kaerus-component-slideshow 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 84d739f9fdbb688d0fada1b8d8e96e84ee408cd7
|
4
|
+
data.tar.gz: 15047e0d3cef2419f9a325dad304aef71a9117a0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e64bb5b3a8607a36871af71391911cd36fa68526077a1cce4bd38888a376c58511d7a6411b3adf4b418031ed044f476319349764ed8e20f6e4411065f82b9550
|
7
|
+
data.tar.gz: ac6a8f67277b2905532fddffa99a59796d6bb34d63b4d9273525b2b8aeec56f9450d13b51fb79a92e3e68e783ea06368b2c68ac4750e9b535c5e4f295afe350a
|
@@ -420,10 +420,10 @@ module.exports = Carousel;
|
|
420
420
|
});
|
421
421
|
require.register("slideshow/index.js", function(exports, require, module){
|
422
422
|
var Carousel = require('carousel'),
|
423
|
-
template = require('./template')
|
424
|
-
id = 0;
|
423
|
+
template = require('./template');
|
425
424
|
|
426
425
|
var transitionProp = ['webkitTransition','mozTransition','msTransition','oTransition'],
|
426
|
+
transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'],
|
427
427
|
transformProp = ['webkitTransform','mozTransform','msTransform','oTransform'];
|
428
428
|
|
429
429
|
|
@@ -437,7 +437,7 @@ function Slideshow(container,options){
|
|
437
437
|
if(!container) throw new Error("invalid slideshow container");
|
438
438
|
|
439
439
|
var settings = {
|
440
|
-
id: 'slideshow'
|
440
|
+
id: container.id || 'slideshow',
|
441
441
|
template: template,
|
442
442
|
next:'⟩',
|
443
443
|
prev:'⟨',
|
@@ -513,13 +513,13 @@ Slideshow.prototype = (function(){
|
|
513
513
|
function setup(container){
|
514
514
|
var slides = '\n',
|
515
515
|
dots = '\n',
|
516
|
-
navId = slideshow.id + 'nav',
|
516
|
+
navId = slideshow.id + '-nav',
|
517
517
|
childs = container.childNodes;
|
518
518
|
|
519
519
|
/* get slides from parent container */
|
520
520
|
for(var i = 0, n = 0, l = childs.length; i < l; i++){
|
521
521
|
if(childs[i].nodeType === 1){
|
522
|
-
slides+= '<div id="'+ slideshow.id + 's' + n + '">' + childs[i].outerHTML + '</div>\n';
|
522
|
+
slides+= '<div id="'+ slideshow.id + '-s' + n + '">' + childs[i].outerHTML + '</div>\n';
|
523
523
|
dots+='<li class="dot" id="' + navId + n + '"></li>\n';
|
524
524
|
n++;
|
525
525
|
}
|
@@ -543,16 +543,16 @@ Slideshow.prototype = (function(){
|
|
543
543
|
else container.className+= ' slideshow';
|
544
544
|
|
545
545
|
/* create newcarousel instance */
|
546
|
-
carousel = new Carousel(slideshow.id);
|
546
|
+
carousel = new Carousel(slideshow.id+'-slides');
|
547
547
|
|
548
548
|
attachHandlers();
|
549
549
|
}
|
550
550
|
|
551
551
|
function attachHandlers(){
|
552
|
-
var slides = document.getElementById(slideshow.id),
|
553
|
-
nav = document.getElementById(slideshow.id+'nav'),
|
554
|
-
next = document.getElementById(slideshow.id+'next'),
|
555
|
-
prev = document.getElementById(slideshow.id+'prev');
|
552
|
+
var slides = document.getElementById(slideshow.id+'-slides'),
|
553
|
+
nav = document.getElementById(slideshow.id+'-nav'),
|
554
|
+
next = document.getElementById(slideshow.id+'-next'),
|
555
|
+
prev = document.getElementById(slideshow.id+'-prev');
|
556
556
|
|
557
557
|
/* add slidshow UI handlers */
|
558
558
|
addNavHandler(nav);
|
@@ -601,7 +601,7 @@ Slideshow.prototype = (function(){
|
|
601
601
|
}
|
602
602
|
|
603
603
|
function addNavHandler(elem){
|
604
|
-
var nav = document.getElementById(slideshow.id+'nav'),
|
604
|
+
var nav = document.getElementById(slideshow.id+'-nav'),
|
605
605
|
matchNav = new RegExp(elem.id + '(\\d+)');
|
606
606
|
|
607
607
|
addEvent(elem,'click', function(event){
|
@@ -639,7 +639,7 @@ Slideshow.prototype = (function(){
|
|
639
639
|
/* to avoid animations on startup */
|
640
640
|
if(!slideshow.hasTransitions){
|
641
641
|
for(var i = 0, l = carousel.slides.length; i < l; i++)
|
642
|
-
applyStyle(slideshow.id + 's' + i,transitionProp,slideshow.transition);
|
642
|
+
applyStyle(slideshow.id + '-s' + i,transitionProp,slideshow.transition);
|
643
643
|
slideshow.hasTransitions = true;
|
644
644
|
}
|
645
645
|
}
|
@@ -656,7 +656,7 @@ Slideshow.prototype = (function(){
|
|
656
656
|
addEvent(elem,te,function(event){
|
657
657
|
event = event ? event : window.event;
|
658
658
|
var target = event.target || event.srcElement,
|
659
|
-
target_id = slideshow.id + 's' + carousel.index;
|
659
|
+
target_id = slideshow.id + '-s' + carousel.index;
|
660
660
|
// fixme: fires twice
|
661
661
|
if(target.id === target_id && typeof slideshow.afterTransit ==='function'){
|
662
662
|
slideshow.afterTransit(carousel.index, slideshow);
|
@@ -687,8 +687,7 @@ function getStyleProperty(props){
|
|
687
687
|
}
|
688
688
|
|
689
689
|
function hasTransitionEndEvent(){
|
690
|
-
var
|
691
|
-
hasTev;
|
690
|
+
var hasTev;
|
692
691
|
|
693
692
|
hasTev = transitionEndEvents.filter(function(m){
|
694
693
|
return ('on'+m.toLowerCase()) in window
|
@@ -719,7 +718,7 @@ function addEvent(el,ev,fn,cap){
|
|
719
718
|
module.exports = Slideshow;
|
720
719
|
});
|
721
720
|
require.register("slideshow/template.js", function(exports, require, module){
|
722
|
-
module.exports = '<div class="slides" id="{id}">{slides}</div>\n<div class="nextSlide" id="{id}next">{next}</div>\n<div class="prevSlide" id="{id}prev">{prev}</div>\n<div class="navSlide" id="{id}nav"><ul>{nav}</ul></div>\n ';
|
721
|
+
module.exports = '<div class="slides" id="{id}-slides">{slides}</div>\n<div class="nextSlide" id="{id}-next">{next}</div>\n<div class="prevSlide" id="{id}-prev">{prev}</div>\n<div class="navSlide" id="{id}-nav"><ul>{nav}</ul></div>\n ';
|
723
722
|
});
|
724
723
|
require.alias("kaerus-component-carousel/index.js", "slideshow/deps/carousel/index.js");
|
725
724
|
require.alias("kaerus-component-carousel/index.js", "carousel/index.js");
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: kaerus-component-slideshow
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Anders Elo
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-09-
|
11
|
+
date: 2013-09-05 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -62,9 +62,7 @@ files:
|
|
62
62
|
- lib/kaerus/component/slideshow/version.rb
|
63
63
|
- lib/kaerus/component/slideshow.rb
|
64
64
|
- vendor/assets/javascripts/kaerus_component_slideshow.js
|
65
|
-
- vendor/assets/javascripts/slideshow.js
|
66
65
|
- vendor/assets/stylesheets/kaerus_component_slideshow.css
|
67
|
-
- vendor/assets/stylesheets/slideshow.css
|
68
66
|
homepage: https://github.com/kaerus-component/slideshow
|
69
67
|
licenses:
|
70
68
|
- APACHE2_0
|
@@ -1,725 +0,0 @@
|
|
1
|
-
;(function(){
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Require the given path.
|
5
|
-
*
|
6
|
-
* @param {String} path
|
7
|
-
* @return {Object} exports
|
8
|
-
* @api public
|
9
|
-
*/
|
10
|
-
|
11
|
-
function require(path, parent, orig) {
|
12
|
-
var resolved = require.resolve(path);
|
13
|
-
|
14
|
-
// lookup failed
|
15
|
-
if (null == resolved) {
|
16
|
-
orig = orig || path;
|
17
|
-
parent = parent || 'root';
|
18
|
-
var err = new Error('Failed to require "' + orig + '" from "' + parent + '"');
|
19
|
-
err.path = orig;
|
20
|
-
err.parent = parent;
|
21
|
-
err.require = true;
|
22
|
-
throw err;
|
23
|
-
}
|
24
|
-
|
25
|
-
var module = require.modules[resolved];
|
26
|
-
|
27
|
-
// perform real require()
|
28
|
-
// by invoking the module's
|
29
|
-
// registered function
|
30
|
-
if (!module.exports) {
|
31
|
-
module.exports = {};
|
32
|
-
module.client = module.component = true;
|
33
|
-
module.call(this, module.exports, require.relative(resolved), module);
|
34
|
-
}
|
35
|
-
|
36
|
-
return module.exports;
|
37
|
-
}
|
38
|
-
|
39
|
-
/**
|
40
|
-
* Registered modules.
|
41
|
-
*/
|
42
|
-
|
43
|
-
require.modules = {};
|
44
|
-
|
45
|
-
/**
|
46
|
-
* Registered aliases.
|
47
|
-
*/
|
48
|
-
|
49
|
-
require.aliases = {};
|
50
|
-
|
51
|
-
/**
|
52
|
-
* Resolve `path`.
|
53
|
-
*
|
54
|
-
* Lookup:
|
55
|
-
*
|
56
|
-
* - PATH/index.js
|
57
|
-
* - PATH.js
|
58
|
-
* - PATH
|
59
|
-
*
|
60
|
-
* @param {String} path
|
61
|
-
* @return {String} path or null
|
62
|
-
* @api private
|
63
|
-
*/
|
64
|
-
|
65
|
-
require.resolve = function(path) {
|
66
|
-
if (path.charAt(0) === '/') path = path.slice(1);
|
67
|
-
|
68
|
-
var paths = [
|
69
|
-
path,
|
70
|
-
path + '.js',
|
71
|
-
path + '.json',
|
72
|
-
path + '/index.js',
|
73
|
-
path + '/index.json'
|
74
|
-
];
|
75
|
-
|
76
|
-
for (var i = 0; i < paths.length; i++) {
|
77
|
-
var path = paths[i];
|
78
|
-
if (require.modules.hasOwnProperty(path)) return path;
|
79
|
-
if (require.aliases.hasOwnProperty(path)) return require.aliases[path];
|
80
|
-
}
|
81
|
-
};
|
82
|
-
|
83
|
-
/**
|
84
|
-
* Normalize `path` relative to the current path.
|
85
|
-
*
|
86
|
-
* @param {String} curr
|
87
|
-
* @param {String} path
|
88
|
-
* @return {String}
|
89
|
-
* @api private
|
90
|
-
*/
|
91
|
-
|
92
|
-
require.normalize = function(curr, path) {
|
93
|
-
var segs = [];
|
94
|
-
|
95
|
-
if ('.' != path.charAt(0)) return path;
|
96
|
-
|
97
|
-
curr = curr.split('/');
|
98
|
-
path = path.split('/');
|
99
|
-
|
100
|
-
for (var i = 0; i < path.length; ++i) {
|
101
|
-
if ('..' == path[i]) {
|
102
|
-
curr.pop();
|
103
|
-
} else if ('.' != path[i] && '' != path[i]) {
|
104
|
-
segs.push(path[i]);
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
return curr.concat(segs).join('/');
|
109
|
-
};
|
110
|
-
|
111
|
-
/**
|
112
|
-
* Register module at `path` with callback `definition`.
|
113
|
-
*
|
114
|
-
* @param {String} path
|
115
|
-
* @param {Function} definition
|
116
|
-
* @api private
|
117
|
-
*/
|
118
|
-
|
119
|
-
require.register = function(path, definition) {
|
120
|
-
require.modules[path] = definition;
|
121
|
-
};
|
122
|
-
|
123
|
-
/**
|
124
|
-
* Alias a module definition.
|
125
|
-
*
|
126
|
-
* @param {String} from
|
127
|
-
* @param {String} to
|
128
|
-
* @api private
|
129
|
-
*/
|
130
|
-
|
131
|
-
require.alias = function(from, to) {
|
132
|
-
if (!require.modules.hasOwnProperty(from)) {
|
133
|
-
throw new Error('Failed to alias "' + from + '", it does not exist');
|
134
|
-
}
|
135
|
-
require.aliases[to] = from;
|
136
|
-
};
|
137
|
-
|
138
|
-
/**
|
139
|
-
* Return a require function relative to the `parent` path.
|
140
|
-
*
|
141
|
-
* @param {String} parent
|
142
|
-
* @return {Function}
|
143
|
-
* @api private
|
144
|
-
*/
|
145
|
-
|
146
|
-
require.relative = function(parent) {
|
147
|
-
var p = require.normalize(parent, '..');
|
148
|
-
|
149
|
-
/**
|
150
|
-
* lastIndexOf helper.
|
151
|
-
*/
|
152
|
-
|
153
|
-
function lastIndexOf(arr, obj) {
|
154
|
-
var i = arr.length;
|
155
|
-
while (i--) {
|
156
|
-
if (arr[i] === obj) return i;
|
157
|
-
}
|
158
|
-
return -1;
|
159
|
-
}
|
160
|
-
|
161
|
-
/**
|
162
|
-
* The relative require() itself.
|
163
|
-
*/
|
164
|
-
|
165
|
-
function localRequire(path) {
|
166
|
-
var resolved = localRequire.resolve(path);
|
167
|
-
return require(resolved, parent, path);
|
168
|
-
}
|
169
|
-
|
170
|
-
/**
|
171
|
-
* Resolve relative to the parent.
|
172
|
-
*/
|
173
|
-
|
174
|
-
localRequire.resolve = function(path) {
|
175
|
-
var c = path.charAt(0);
|
176
|
-
if ('/' == c) return path.slice(1);
|
177
|
-
if ('.' == c) return require.normalize(p, path);
|
178
|
-
|
179
|
-
// resolve deps by returning
|
180
|
-
// the dep in the nearest "deps"
|
181
|
-
// directory
|
182
|
-
var segs = parent.split('/');
|
183
|
-
var i = lastIndexOf(segs, 'deps') + 1;
|
184
|
-
if (!i) i = 0;
|
185
|
-
path = segs.slice(0, i + 1).join('/') + '/deps/' + path;
|
186
|
-
return path;
|
187
|
-
};
|
188
|
-
|
189
|
-
/**
|
190
|
-
* Check if module is defined at `path`.
|
191
|
-
*/
|
192
|
-
|
193
|
-
localRequire.exists = function(path) {
|
194
|
-
return require.modules.hasOwnProperty(localRequire.resolve(path));
|
195
|
-
};
|
196
|
-
|
197
|
-
return localRequire;
|
198
|
-
};
|
199
|
-
require.register("kaerus-component-carousel/index.js", function(exports, require, module){
|
200
|
-
// CAROUSEL ////////////////////////////////////////////////////////
|
201
|
-
/* element class mappings */
|
202
|
-
var CAROUSEL_SLIDE = 'slide', ACTIVE_SLIDE = 'show', NEXT_SLIDE = 'next', PREVIOUS_SLIDE = 'prev';
|
203
|
-
|
204
|
-
function Carousel(container,tag) {
|
205
|
-
|
206
|
-
if(!container) container = "carousel";
|
207
|
-
|
208
|
-
if(typeof container === 'string')
|
209
|
-
container = document.getElementById(container);
|
210
|
-
|
211
|
-
if(!container) throw new Error("invalid carousel container");
|
212
|
-
|
213
|
-
if(tag) tag = tag.toUpperCase();
|
214
|
-
|
215
|
-
var childs = container.childNodes;
|
216
|
-
|
217
|
-
var nodes = this.slides = [];
|
218
|
-
|
219
|
-
/* get child nodes from parent container */
|
220
|
-
for(var i = 0, l = childs.length; i < l; i++){
|
221
|
-
if(childs[i].nodeType === 1 && (!tag || childs[i].nodeName === tag)){
|
222
|
-
nodes.push(childs[i]);
|
223
|
-
}
|
224
|
-
}
|
225
|
-
|
226
|
-
/* clone nodes if we have less than three childs */
|
227
|
-
for(var i = 0; nodes.length < 3; i++){
|
228
|
-
nodes[nodes.length] = nodes[i].cloneNode(true);
|
229
|
-
container.appendChild(nodes[nodes.length-1]);
|
230
|
-
}
|
231
|
-
|
232
|
-
/* adds slide class to every element */
|
233
|
-
addClass(nodes,CAROUSEL_SLIDE);
|
234
|
-
|
235
|
-
var index, carousel = this;
|
236
|
-
|
237
|
-
/* manages index updates */
|
238
|
-
Object.defineProperty(this,'index',{
|
239
|
-
enumerable:false,
|
240
|
-
get: function(){
|
241
|
-
return index;
|
242
|
-
},
|
243
|
-
set: function(to_index){
|
244
|
-
|
245
|
-
if(index === to_index) return index;
|
246
|
-
|
247
|
-
to_index = cap(nodes.length,to_index);
|
248
|
-
|
249
|
-
/* allows user to handle transitions */
|
250
|
-
if(typeof carousel.onChange === 'function'){
|
251
|
-
carousel.onChange(to_index,index);
|
252
|
-
} else carousel.transit(to_index,index);
|
253
|
-
|
254
|
-
return index = to_index;
|
255
|
-
}
|
256
|
-
})
|
257
|
-
}
|
258
|
-
|
259
|
-
/* cap the index */
|
260
|
-
function cap(max,value){
|
261
|
-
value = value % max;
|
262
|
-
if(value < 0) value = max + value;
|
263
|
-
|
264
|
-
return value;
|
265
|
-
}
|
266
|
-
|
267
|
-
function addClass(node,type){
|
268
|
-
if(typeof type === 'string') type = [type];
|
269
|
-
|
270
|
-
if(Array.isArray(node)){
|
271
|
-
for(var i = 0; i < node.length; i++)
|
272
|
-
addClass(node[i],type);
|
273
|
-
} else {
|
274
|
-
node.className = node.className
|
275
|
-
.split(' ').filter(function(f){ return type.indexOf(f) < 0 })
|
276
|
-
.concat(type).join(' ');
|
277
|
-
}
|
278
|
-
}
|
279
|
-
|
280
|
-
function clearClass(node,type){
|
281
|
-
|
282
|
-
if(typeof type === 'string') type = [type];
|
283
|
-
|
284
|
-
if(Array.isArray(node)){
|
285
|
-
for(var i = 0; i < node.length; i++)
|
286
|
-
clearClass(node[i],type);
|
287
|
-
} else {
|
288
|
-
node.className = node.className
|
289
|
-
.split(' ')
|
290
|
-
.filter(function(f){ return type.indexOf(f) < 0 })
|
291
|
-
.reduce(function(a,b){
|
292
|
-
return a ? a + (b ? ' ' + b : '') : b||'';
|
293
|
-
},'');
|
294
|
-
}
|
295
|
-
}
|
296
|
-
|
297
|
-
Carousel.prototype.next = function(){
|
298
|
-
|
299
|
-
this.stop();
|
300
|
-
|
301
|
-
this.index++;
|
302
|
-
|
303
|
-
return this;
|
304
|
-
}
|
305
|
-
|
306
|
-
Carousel.prototype.prev = function(){
|
307
|
-
|
308
|
-
this.stop();
|
309
|
-
|
310
|
-
this.index--;
|
311
|
-
|
312
|
-
return this;
|
313
|
-
}
|
314
|
-
|
315
|
-
Carousel.prototype.transit = function(index,from){
|
316
|
-
|
317
|
-
clearClass(this.slides,[ACTIVE_SLIDE,NEXT_SLIDE,PREVIOUS_SLIDE]);
|
318
|
-
|
319
|
-
var prev = cap(this.slides.length,index-1),
|
320
|
-
next = cap(this.slides.length,index+1);
|
321
|
-
|
322
|
-
addClass(this.slides[prev], PREVIOUS_SLIDE);
|
323
|
-
addClass(this.slides[index], ACTIVE_SLIDE);
|
324
|
-
addClass(this.slides[next], NEXT_SLIDE);
|
325
|
-
|
326
|
-
if(!this.paused) this.nextInterval();
|
327
|
-
|
328
|
-
return this;
|
329
|
-
}
|
330
|
-
|
331
|
-
Carousel.prototype.nextInterval = function(){
|
332
|
-
var self = this;
|
333
|
-
|
334
|
-
if(!this.timer){
|
335
|
-
this.startTime = new Date();
|
336
|
-
|
337
|
-
this.timer = setTimeout(function(){
|
338
|
-
self.timer = null;
|
339
|
-
self.next();
|
340
|
-
},this.interval);
|
341
|
-
}
|
342
|
-
|
343
|
-
return this;
|
344
|
-
}
|
345
|
-
|
346
|
-
Carousel.prototype.setInterval = function(interval){
|
347
|
-
|
348
|
-
this.interval = isNaN(interval) ? (this.interval||4000): interval;
|
349
|
-
|
350
|
-
return this;
|
351
|
-
}
|
352
|
-
|
353
|
-
Carousel.prototype.show = function(index){
|
354
|
-
index = isNaN(index) ? this.index : index;
|
355
|
-
|
356
|
-
this.stop();
|
357
|
-
|
358
|
-
this.index = index;
|
359
|
-
|
360
|
-
return this;
|
361
|
-
};
|
362
|
-
|
363
|
-
Carousel.prototype.start = function(index,interval){
|
364
|
-
|
365
|
-
this.paused = undefined;
|
366
|
-
|
367
|
-
this.setInterval(interval);
|
368
|
-
|
369
|
-
this.show(index);
|
370
|
-
|
371
|
-
return this;
|
372
|
-
};
|
373
|
-
|
374
|
-
Carousel.prototype.stop = function(){
|
375
|
-
|
376
|
-
this.startTime = null;
|
377
|
-
|
378
|
-
if(this.timer){
|
379
|
-
clearTimeout(this.timer);
|
380
|
-
this.timer = null;
|
381
|
-
}
|
382
|
-
|
383
|
-
return this;
|
384
|
-
}
|
385
|
-
|
386
|
-
Carousel.prototype.pause = function(skipPauseInterval){
|
387
|
-
|
388
|
-
this.paused = true;
|
389
|
-
|
390
|
-
if(this.startTime && !skipPauseInterval) {
|
391
|
-
this.pauseInterval = new Date() - this.startTime;
|
392
|
-
}
|
393
|
-
|
394
|
-
this.stop();
|
395
|
-
|
396
|
-
return this;
|
397
|
-
}
|
398
|
-
|
399
|
-
Carousel.prototype.resume = function(skipPauseInterval){
|
400
|
-
|
401
|
-
this.paused = false;
|
402
|
-
|
403
|
-
if(skipPauseInterval || !this.pausesInterval) {
|
404
|
-
this.nextInterval();
|
405
|
-
} else {
|
406
|
-
var interval = this.interval;
|
407
|
-
|
408
|
-
/* resume from paused interval */
|
409
|
-
this.setInterval(this.pauseInterval).nextInterval();
|
410
|
-
|
411
|
-
this.interval = interval;
|
412
|
-
}
|
413
|
-
|
414
|
-
this.pauseInterval = null;
|
415
|
-
|
416
|
-
return this;
|
417
|
-
}
|
418
|
-
|
419
|
-
module.exports = Carousel;
|
420
|
-
});
|
421
|
-
require.register("slideshow/index.js", function(exports, require, module){
|
422
|
-
var Carousel = require('carousel'),
|
423
|
-
template = require('./template'),
|
424
|
-
id = 0;
|
425
|
-
|
426
|
-
var transitionProp = ['webkitTransition','mozTransition','msTransition','oTransition'],
|
427
|
-
transformProp = ['webkitTransform','mozTransform','msTransoform','oTransform'];
|
428
|
-
|
429
|
-
|
430
|
-
function Slideshow(container,options){
|
431
|
-
if(!(this instanceof Slideshow))
|
432
|
-
return new Slideshow(container,options);
|
433
|
-
|
434
|
-
if(typeof container === 'string')
|
435
|
-
container = document.getElementById(container);
|
436
|
-
|
437
|
-
if(!container) throw new Error("invalid slideshow container");
|
438
|
-
|
439
|
-
var settings = {
|
440
|
-
id: 'slideshow' + id,
|
441
|
-
template: template,
|
442
|
-
next:'⟩',
|
443
|
-
prev:'⟨',
|
444
|
-
time: 4000,
|
445
|
-
transition: ['all','1s'],
|
446
|
-
beforeTransit: undefined,
|
447
|
-
afterTransit: undefined
|
448
|
-
};
|
449
|
-
|
450
|
-
mergeOptions(settings,options);
|
451
|
-
mergeOptions(this,settings);
|
452
|
-
|
453
|
-
this.init(container);
|
454
|
-
}
|
455
|
-
|
456
|
-
Slideshow.prototype = (function(){
|
457
|
-
var carousel, slideshow;
|
458
|
-
|
459
|
-
SSproto = {
|
460
|
-
init: function(container,options){
|
461
|
-
slideshow = this;
|
462
|
-
|
463
|
-
setup(container);
|
464
|
-
|
465
|
-
return this;
|
466
|
-
},
|
467
|
-
start: function(){
|
468
|
-
carousel.start(0,slideshow.time);
|
469
|
-
|
470
|
-
return this;
|
471
|
-
},
|
472
|
-
stop: function(){
|
473
|
-
carousel.stop();
|
474
|
-
|
475
|
-
return this;
|
476
|
-
},
|
477
|
-
pause: function(){
|
478
|
-
carousel.pause();
|
479
|
-
|
480
|
-
return this;
|
481
|
-
},
|
482
|
-
next: function(){
|
483
|
-
carousel.next();
|
484
|
-
|
485
|
-
return this;
|
486
|
-
},
|
487
|
-
previous: function(){
|
488
|
-
carousel.prev();
|
489
|
-
|
490
|
-
return this;
|
491
|
-
},
|
492
|
-
resume: function(){
|
493
|
-
carousel.resume;
|
494
|
-
|
495
|
-
return this;
|
496
|
-
},
|
497
|
-
show: function(x){
|
498
|
-
carousel.show(x);
|
499
|
-
|
500
|
-
return this;
|
501
|
-
},
|
502
|
-
display: function(value){
|
503
|
-
var slides = document.getElementById(slideshow.id);
|
504
|
-
|
505
|
-
if(typeof value === 'string') slides.style.display = value;
|
506
|
-
else if(!!value) slides.style.display = 'block';
|
507
|
-
else slides.style.display = 'none';
|
508
|
-
|
509
|
-
return this;
|
510
|
-
}
|
511
|
-
}
|
512
|
-
|
513
|
-
function setup(container){
|
514
|
-
var slides = '\n',
|
515
|
-
dots = '\n',
|
516
|
-
navId = slideshow.id + 'nav',
|
517
|
-
childs = container.childNodes;
|
518
|
-
|
519
|
-
/* get slides from parent container */
|
520
|
-
for(var i = 0, n = 0, l = childs.length; i < l; i++){
|
521
|
-
if(childs[i].nodeType === 1){
|
522
|
-
slides+= '<div id="'+ slideshow.id + 's' + n + '">' + childs[i].outerHTML + '</div>\n';
|
523
|
-
dots+='<li class="dot" id="' + navId + n + '"></li>\n';
|
524
|
-
n++;
|
525
|
-
}
|
526
|
-
}
|
527
|
-
|
528
|
-
/* create dom structure from template */
|
529
|
-
var template = slideshow.template.replace(/{\w+}/mg,function(m){
|
530
|
-
switch(m){
|
531
|
-
case "{id}": return slideshow.id;
|
532
|
-
case "{slides}": return slides;
|
533
|
-
case "{next}": return slideshow.next;
|
534
|
-
case "{prev}": return slideshow.prev;
|
535
|
-
case "{nav}": return dots;
|
536
|
-
}
|
537
|
-
});
|
538
|
-
|
539
|
-
/* apply slider template */
|
540
|
-
container.innerHTML = template;
|
541
|
-
/* add slideshow class to target container */
|
542
|
-
if(!container.className) container.className = 'slideshow';
|
543
|
-
else container.className+= ' slideshow';
|
544
|
-
|
545
|
-
/* create newcarousel instance */
|
546
|
-
carousel = new Carousel(slideshow.id);
|
547
|
-
|
548
|
-
attachHandlers();
|
549
|
-
}
|
550
|
-
|
551
|
-
function attachHandlers(){
|
552
|
-
var slides = document.getElementById(slideshow.id),
|
553
|
-
nav = document.getElementById(slideshow.id+'nav'),
|
554
|
-
next = document.getElementById(slideshow.id+'next'),
|
555
|
-
prev = document.getElementById(slideshow.id+'prev');
|
556
|
-
|
557
|
-
/* add slidshow UI handlers */
|
558
|
-
addNavHandler(nav);
|
559
|
-
addPauseHandler(slides);
|
560
|
-
addTransitionHandler(nav);
|
561
|
-
addTransitionEndHandler(slides);
|
562
|
-
addButtonHandler(next,'next');
|
563
|
-
addButtonHandler(prev,'prev');
|
564
|
-
}
|
565
|
-
|
566
|
-
function applyStyle(elem,prop,attr){
|
567
|
-
var style = '';
|
568
|
-
|
569
|
-
if(typeof elem === 'string')
|
570
|
-
elem = document.getElementById(elem);
|
571
|
-
|
572
|
-
if(!elem) return;
|
573
|
-
|
574
|
-
if(Array.isArray.prop){
|
575
|
-
prop = getStyleProperty(prop);
|
576
|
-
}
|
577
|
-
|
578
|
-
if(!prop) return;
|
579
|
-
|
580
|
-
if(typeof attr == 'string'){
|
581
|
-
style = attr;
|
582
|
-
}
|
583
|
-
if(Array.isArray(attr)){
|
584
|
-
style = attr.join(' ');
|
585
|
-
} else if(typeof attr === 'object'){
|
586
|
-
style = Object.keys(attr).reduce(function(a,b){
|
587
|
-
return !a ? attr[b] : a + ' ' + attr[b]
|
588
|
-
},null);
|
589
|
-
} else if(typeof attr === 'function'){
|
590
|
-
style = attr(elem.id);
|
591
|
-
}
|
592
|
-
|
593
|
-
elem.style[prop] = style;
|
594
|
-
}
|
595
|
-
|
596
|
-
function addButtonHandler(elem,button){
|
597
|
-
addEvent(elem,'click',function(event){
|
598
|
-
carousel[button]();
|
599
|
-
event.stopPropagation();
|
600
|
-
});
|
601
|
-
}
|
602
|
-
|
603
|
-
function addNavHandler(elem){
|
604
|
-
var nav = document.getElementById(slideshow.id+'nav'),
|
605
|
-
matchNav = new RegExp(elem.id + '(\\d+)');
|
606
|
-
|
607
|
-
addEvent(elem,'click', function(event){
|
608
|
-
event = event ? event : window.event;
|
609
|
-
var target = event.target || event.srcElement,
|
610
|
-
ix = matchNav.exec(target.id);
|
611
|
-
|
612
|
-
if(ix) {
|
613
|
-
carousel.show(ix[1]);
|
614
|
-
event.stopPropagation();
|
615
|
-
}
|
616
|
-
});
|
617
|
-
}
|
618
|
-
|
619
|
-
/* adds click handler on slide to toggle pause */
|
620
|
-
function addPauseHandler(elem){
|
621
|
-
elem.addEventListener('click',function(event){
|
622
|
-
if(carousel.paused) {
|
623
|
-
carousel.resume();
|
624
|
-
} else {
|
625
|
-
carousel.pause();
|
626
|
-
}
|
627
|
-
});
|
628
|
-
}
|
629
|
-
|
630
|
-
function addTransitionHandler(nav){
|
631
|
-
var dots = nav.getElementsByTagName('li');
|
632
|
-
|
633
|
-
carousel.onChange = function(index,from){
|
634
|
-
if(typeof slideshow.beforeTransit === 'function') slideshow.beforeTransit();
|
635
|
-
|
636
|
-
if(from !== undefined){
|
637
|
-
dots[from].className = "dot";
|
638
|
-
/* apply transitions after first slide */
|
639
|
-
/* to avoid animations on startup */
|
640
|
-
if(!slideshow.hasTransitions){
|
641
|
-
for(var i = 0, l = carousel.slides.length; i < l; i++)
|
642
|
-
applyStyle(slideshow.id + 's' + i,transitionProp,slideshow.transition);
|
643
|
-
slideshow.hasTransitions = true;
|
644
|
-
}
|
645
|
-
}
|
646
|
-
|
647
|
-
dots[index].className = "active dot";
|
648
|
-
carousel.transit(index,from);
|
649
|
-
}
|
650
|
-
}
|
651
|
-
|
652
|
-
function addTransitionEndHandler(elem){
|
653
|
-
var te;
|
654
|
-
|
655
|
-
if((te = hasTransitionEndEvent())){
|
656
|
-
addEvent(elem,te,function(elem){
|
657
|
-
if(typeof slideshow.afterTransit ==='function') slideshow.afterTransit();
|
658
|
-
});
|
659
|
-
slideshow.hasTransitionEndEvent = true;
|
660
|
-
} else {
|
661
|
-
slideshow.hasTransitionEndEvent = false;
|
662
|
-
}
|
663
|
-
}
|
664
|
-
|
665
|
-
return SSproto;
|
666
|
-
}());
|
667
|
-
|
668
|
-
transitionProp = getStyleProperty(transitionProp);
|
669
|
-
transformProp = getStyleProperty(transformProp);
|
670
|
-
|
671
|
-
function getStyleProperty(props){
|
672
|
-
var root = document.documentElement,
|
673
|
-
prop;
|
674
|
-
|
675
|
-
prop = props.filter(function(p){
|
676
|
-
return p in root.style
|
677
|
-
});
|
678
|
-
|
679
|
-
return prop[0]
|
680
|
-
}
|
681
|
-
|
682
|
-
function hasTransitionEndEvent(){
|
683
|
-
var transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'],
|
684
|
-
hasTev;
|
685
|
-
|
686
|
-
hasTev = transitionEndEvents.filter(function(m){
|
687
|
-
return ('on'+m.toLowerCase()) in window
|
688
|
-
});
|
689
|
-
|
690
|
-
return hasTev[0];
|
691
|
-
}
|
692
|
-
|
693
|
-
function mergeOptions(target,source){
|
694
|
-
for(var key in source) {
|
695
|
-
target[key] = source[key];
|
696
|
-
}
|
697
|
-
|
698
|
-
return target;
|
699
|
-
}
|
700
|
-
|
701
|
-
function addEvent(el,ev,fn,cap){
|
702
|
-
if(el.addEventListener){
|
703
|
-
el.addEventListener(ev, fn, !!cap);
|
704
|
-
} else if (elm.attachEvent){
|
705
|
-
el.attachEvent('on' + ev, fn);
|
706
|
-
} else el['on' + ev] = fn;
|
707
|
-
|
708
|
-
return el;
|
709
|
-
}
|
710
|
-
|
711
|
-
|
712
|
-
module.exports = Slideshow;
|
713
|
-
});
|
714
|
-
require.register("slideshow/template.js", function(exports, require, module){
|
715
|
-
module.exports = '<div class="slides" id="{id}">{slides}</div>\n<div class="nextSlide" id="{id}next">{next}</div>\n<div class="prevSlide" id="{id}prev">{prev}</div>\n<div class="navSlide" id="{id}nav"><ul>{nav}</ul></div>\n ';
|
716
|
-
});
|
717
|
-
require.alias("kaerus-component-carousel/index.js", "slideshow/deps/carousel/index.js");
|
718
|
-
require.alias("kaerus-component-carousel/index.js", "carousel/index.js");
|
719
|
-
if (typeof exports == "object") {
|
720
|
-
module.exports = require("slideshow");
|
721
|
-
} else if (typeof define == "function" && define.amd) {
|
722
|
-
define(function(){ return require("slideshow"); });
|
723
|
-
} else {
|
724
|
-
this["Slideshow"] = require("slideshow");
|
725
|
-
}})();
|
@@ -1,122 +0,0 @@
|
|
1
|
-
.slideshow {
|
2
|
-
background-color: transparent;
|
3
|
-
margin: 0 auto;
|
4
|
-
position: relative;
|
5
|
-
overflow: hidden;
|
6
|
-
width: 40em;
|
7
|
-
height: 20em;
|
8
|
-
color: white;
|
9
|
-
-webkit-user-select: none;
|
10
|
-
-moz-user-select: none;
|
11
|
-
-ms-user-select: none;
|
12
|
-
-o-user-select: none;
|
13
|
-
user-select: none;
|
14
|
-
}
|
15
|
-
|
16
|
-
.slideshow .nextSlide,
|
17
|
-
.slideshow .prevSlide {
|
18
|
-
cursor: pointer;
|
19
|
-
display: inline-block;
|
20
|
-
position: absolute;
|
21
|
-
top:0;
|
22
|
-
bottom: 0;
|
23
|
-
margin: auto;
|
24
|
-
line-height: 3em;
|
25
|
-
width: 3em;
|
26
|
-
height: 3em;
|
27
|
-
text-align: center;
|
28
|
-
color: black;
|
29
|
-
background-color: white;
|
30
|
-
background: rgba(255,255,255,0.5);
|
31
|
-
-webkit-border-radius: 2em;
|
32
|
-
-moz-border-radius: 2em;
|
33
|
-
-ms-border-radius: 2em;
|
34
|
-
-o-border-radius: 2em;
|
35
|
-
border-radius: 2em;
|
36
|
-
z-index: 9999;
|
37
|
-
}
|
38
|
-
|
39
|
-
.slideshow .nextSlide {
|
40
|
-
right: 2em;
|
41
|
-
}
|
42
|
-
|
43
|
-
.slideshow .prevSlide {
|
44
|
-
left: 2em;
|
45
|
-
}
|
46
|
-
|
47
|
-
.slideshow .navSlide {
|
48
|
-
font-size: 2em;
|
49
|
-
position: absolute;
|
50
|
-
bottom: 0;
|
51
|
-
width: 100%;
|
52
|
-
color: white;
|
53
|
-
color: rgba(255,255,255,0.5);
|
54
|
-
z-index: 9999;
|
55
|
-
}
|
56
|
-
|
57
|
-
.slideshow .navSlide .dot {
|
58
|
-
width: 0.5em;
|
59
|
-
text-align: center;
|
60
|
-
display: inline-block;
|
61
|
-
list-style-type: none;
|
62
|
-
}
|
63
|
-
|
64
|
-
.slideshow .navSlide .dot:before {
|
65
|
-
content: "\0025cb";
|
66
|
-
}
|
67
|
-
|
68
|
-
.slideshow .navSlide .dot.active:before {
|
69
|
-
content: "\0025cf";
|
70
|
-
}
|
71
|
-
|
72
|
-
.slideshow .navSlide ul{
|
73
|
-
padding-top: 1em;
|
74
|
-
text-align: center;
|
75
|
-
margin: 0 auto;
|
76
|
-
padding-start: 0;
|
77
|
-
-o-padding-start: 0;
|
78
|
-
-moz-padding-start: 0;
|
79
|
-
-webkit-padding-start: 0;
|
80
|
-
}
|
81
|
-
|
82
|
-
.slideshow .slides .slide{
|
83
|
-
position: absolute;
|
84
|
-
overflow: hidden;
|
85
|
-
display: none;
|
86
|
-
width: 100%;
|
87
|
-
height: 100%;
|
88
|
-
padding: 0;
|
89
|
-
margin: 0;
|
90
|
-
top: 0;
|
91
|
-
left: 0;
|
92
|
-
z-index: 0;
|
93
|
-
}
|
94
|
-
|
95
|
-
.slideshow .slides .slide .caption {
|
96
|
-
position: absolute;
|
97
|
-
display: block;
|
98
|
-
left: 2em;
|
99
|
-
top: 2em;
|
100
|
-
z-index: 9999;
|
101
|
-
}
|
102
|
-
|
103
|
-
|
104
|
-
.slideshow .slides .slide.prev,
|
105
|
-
.slideshow .slides .slide.next,
|
106
|
-
.slideshow .slides .slide.show {
|
107
|
-
display: block;
|
108
|
-
z-index: 1;
|
109
|
-
}
|
110
|
-
|
111
|
-
.slideshow .slides .slide.next {
|
112
|
-
left: 100% !important;
|
113
|
-
}
|
114
|
-
|
115
|
-
.slideshow .slides .slide.prev {
|
116
|
-
left: -100% !important;
|
117
|
-
}
|
118
|
-
|
119
|
-
.slideshow .slides .slide.show {
|
120
|
-
left: 0 !important;
|
121
|
-
z-index: 9999;
|
122
|
-
}
|