kaerus-component-slideshow 0.0.16 → 0.1.0

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: bc88b2f6034c4a3635217ebef8ce8ee39c1d8a5d
4
- data.tar.gz: aa5f0a1a62709441be31521c86835921a8e32b47
3
+ metadata.gz: 72670e2a3117f1b09dee06ac66e4dc779eb6de14
4
+ data.tar.gz: b673b2987bcce655535569a18a1dd841a5696d3e
5
5
  SHA512:
6
- metadata.gz: e5642386fc2a6077cc7e36cf5a3a790b306c5ddf78d06a6b0fbcbdb1149bcec2a56c5b5df3154d08d000c820ccbcf2d71cf860104737ac04763c9c30bd7df956
7
- data.tar.gz: bdcc5682793603cc8e52a543f47ac11ba79f87add5786c8e4ec09b9f2d56d23b5975f105c888aed3e3196a8d57fb6efe93ca8fb8b370ad9379f697b692b8a551
6
+ metadata.gz: 8941862bcda605072cd69cec6b2b38fadabb644d89f4a6325b9a04d7922336561e8e4581ca4bbc434308835c41b1f9a3c3081250c82bda9dd6c23d1c9acbc111
7
+ data.tar.gz: 6e33bd319d6af1cbdb08a18b3876c0b84b335123a9a0154412813dd4a9430c0d40d4a3e90a71dac460228e349cdaef1840fbf3d9a6e8cae5f39a12dc211644b3
@@ -1,7 +1,7 @@
1
1
  module Kaerus
2
2
  module Component
3
3
  module Slideshow
4
- VERSION = "0.0.16"
4
+ VERSION = "0.1.0"
5
5
  end
6
6
  end
7
7
  end
@@ -432,6 +432,118 @@ Carousel.prototype.resume = function(skipPauseInterval){
432
432
  }
433
433
 
434
434
  module.exports = Carousel;
435
+ });
436
+ require.register("kaerus-component-emitter/index.js", function(exports, require, module){
437
+ // Emitter /////////////////////////////////////////////////////////////////////////////
438
+ function Emitter(obj) {
439
+ /* Emitter mixin */
440
+ if(obj) {
441
+ for(var key in Emitter.prototype) {
442
+ obj[key] = Emitter.prototype[key];
443
+ }
444
+ obj._events = {};
445
+ return obj;
446
+ }
447
+
448
+ if(!(this instanceof Emitter)) {
449
+ return new Emitter;
450
+ }
451
+
452
+ this._events = {};
453
+ }
454
+
455
+ Emitter.prototype.listeners = function(event) {
456
+ var handlers = this._events[event];
457
+
458
+ if(!handlers) return [];
459
+
460
+ return handlers.filter(function(f){return f !==before && f !==after});
461
+ }
462
+
463
+ Emitter.prototype.hasListeners = function(event) {
464
+ return !!this._events[event];
465
+ }
466
+
467
+ function before(){};
468
+ function after(){};
469
+
470
+ Emitter.prototype.on = function(event,handler,first) {
471
+ var events = this._events[event];
472
+
473
+ if(!events) events = this._events[event] = [before,after];
474
+
475
+ if(first === true) events.splice(events.indexOf(before),0,handler);
476
+ else if(first === undefined) events.splice(events.indexOf(after),0,handler);
477
+ else events[events.length] = handler;
478
+
479
+ return this;
480
+ }
481
+
482
+ Emitter.prototype.before = function(event,handler) {
483
+ return this.on(event,handler,true);
484
+ }
485
+
486
+ Emitter.prototype.after = function(event,handler) {
487
+ return this.on(event,handler,false);
488
+ }
489
+
490
+ Emitter.prototype.off = function(event,handler) {
491
+
492
+ if(!arguments.length) {
493
+ this._events = {};
494
+ }
495
+
496
+ if(this._events[event]) {
497
+ if(!handler) {
498
+ delete this._events[event];
499
+ } else {
500
+ this._events[event] = this._events[event].filter(function(f) {
501
+ return (f._of || f) !== handler;
502
+ });
503
+ }
504
+ }
505
+
506
+ return this;
507
+ }
508
+
509
+ Emitter.prototype.emit = function(event) {
510
+ var context, handler, args;
511
+
512
+ if(typeof event === 'object') {
513
+ context = event;
514
+ event = arguments[1];
515
+ }
516
+
517
+ args = Array.prototype.slice.call(arguments, (context ? 2 : 1));
518
+
519
+ handler = this.listeners(event);
520
+
521
+ context = context ? context : this;
522
+
523
+ for(var i = 0, l = handler.length; i < l; i++){
524
+ if(handler[i].apply(context,args) === false) break;
525
+ }
526
+
527
+ return this;
528
+ }
529
+
530
+ Emitter.prototype.once = function(event,handler) {
531
+ var self = this;
532
+
533
+ function once() {
534
+ self.off(event, handler);
535
+ handler.apply(this, arguments);
536
+ }
537
+
538
+ this.on(event, once);
539
+
540
+ once._of = handler;
541
+
542
+ return this;
543
+ }
544
+
545
+ module.exports = Emitter;
546
+
435
547
  });
436
548
  require.register("pgherveou-prefix/index.js", function(exports, require, module){
437
549
  // module globals
@@ -489,6 +601,7 @@ module.exports = function(ppty, dasherized) {
489
601
  });
490
602
  require.register("slideshow/index.js", function(exports, require, module){
491
603
  var Carousel = require('carousel'),
604
+ Emitter = require('emitter'),
492
605
  template = require('./template'),
493
606
  Prefix = require('prefix'),
494
607
  prefixProp = {};
@@ -509,9 +622,7 @@ function Slideshow(container,options){
509
622
  prev:'&lang;',
510
623
  auto: true,
511
624
  time: 4000,
512
- transition: ['all','1s', 'linear'],
513
- beforeTransit: undefined,
514
- afterTransit: undefined
625
+ transition: ['all','1s', 'linear']
515
626
  };
516
627
 
517
628
  for(var key in options) {
@@ -524,6 +635,9 @@ function Slideshow(container,options){
524
635
  }
525
636
  });
526
637
 
638
+ /* mixin emitter */
639
+ Emitter(this);
640
+
527
641
  this.init(container);
528
642
  }
529
643
 
@@ -575,6 +689,8 @@ function Slideshow(container,options){
575
689
 
576
690
  attachHandlers(this);
577
691
 
692
+ this.emit('init');
693
+
578
694
  /* autostart on initialization */
579
695
  if(this.settings.auto !== false){
580
696
  this.start(this.settings.auto === true ? 0 : this.settings.auto);
@@ -584,36 +700,55 @@ function Slideshow(container,options){
584
700
  },
585
701
  start: function(index){
586
702
  this.carousel.start(index,this.settings.time);
703
+ this.emit('start');
587
704
 
588
705
  return this;
589
706
  },
590
707
  stop: function(){
591
708
  this.carousel.stop();
709
+ this.emit('stop');
592
710
 
593
711
  return this;
594
712
  },
595
713
  pause: function(){
596
714
  this.carousel.pause();
715
+ this.emit('pause');
597
716
 
598
717
  return this;
599
718
  },
600
719
  next: function(){
601
- this.carousel.next();
720
+ var self = this;
721
+
722
+ if(!this.inTransition) {
723
+ this.carousel.next();
724
+ this.emit('next');
725
+ } else this.once('transition-end',function(){
726
+ self.next();
727
+ });
602
728
 
603
729
  return this;
604
730
  },
605
731
  prev: function(){
606
- this.carousel.prev();
732
+ var self = this;
733
+
734
+ if(!this.inTransition) {
735
+ this.carousel.prev();
736
+ this.emit('prev');
737
+ } else this.once('transition-end',function(){
738
+ self.prev();
739
+ });
607
740
 
608
741
  return this;
609
742
  },
610
743
  resume: function(){
611
744
  this.carousel.resume();
745
+ this.emit('resume');
612
746
 
613
747
  return this;
614
748
  },
615
749
  show: function(x){
616
750
  this.carousel.show(x);
751
+ this.emit('show');
617
752
 
618
753
  return this;
619
754
  },
@@ -717,22 +852,33 @@ function Slideshow(container,options){
717
852
  function addTransitionHandler(nav,slides,slideshow){
718
853
  var settings = slideshow.settings,
719
854
  transition = settings.transition,
720
- beforeTransit = settings.beforeTransit,
721
- afterTransit = settings.afterTransit,
722
855
  navItems = nav.getElementsByTagName('li'),
723
- ix, fx, lx = navItems.length;
856
+ timer, durationProp, duration, s = 0,
857
+ ix, fx, lx = navItems.length, slide = [], node;
858
+
859
+ /* $('#objectID').css('-webkit-transition-duration');*/
724
860
 
861
+ durationProp = getStyleProperty('transition-duration',true);
862
+
863
+ for(var x in slides.childNodes){
864
+ node = slides.childNodes[x];
865
+ if(node && node.id && node.id.indexOf(settings.id + '-s') === 0)
866
+ slide[s++] = node;
867
+ }
868
+
725
869
  slideshow.carousel.onChange = function(index,from){
870
+ var current;
871
+
726
872
  ix = index % lx;
727
873
  fx = from % lx;
728
874
 
729
- if(typeof beforeTransit === 'function')
730
- beforeTransit(ix, slideshow);
875
+ slideshow.inTransition = true;
876
+
877
+ slideshow.emit('transition',slide[ix],ix);
731
878
 
732
879
  if(from !== undefined){
733
880
  navItems[fx].className = "navItem";
734
- /* apply transitions after first slide */
735
- /* to avoid animations on startup */
881
+ // apply transitions after first slide to avoid animations on startup
736
882
  if(!slideshow.hasTransitions){
737
883
  applyTransitions(document.getElementById(settings.id + '-slides'));
738
884
  slideshow.hasTransitions = true;
@@ -741,11 +887,25 @@ function Slideshow(container,options){
741
887
 
742
888
  navItems[ix].className = "active navItem";
743
889
 
890
+
891
+ s = window.getComputedStyle(slide[ix],null).getPropertyValue(durationProp);
892
+
893
+ if(s.indexOf('s') > 0) s = parseInt(s,10) * 1000;
894
+ else s = parseInt(s,10);
895
+
896
+ current = ix;
897
+
898
+ if(s){
899
+ /* note: workaround for problematic transition-end event */
900
+ timer = setTimeout(function(){
901
+ slideshow.inTransition = false;
902
+ slideshow.emit('transition-end',slide[current],current);
903
+ },s);
904
+ }
905
+
744
906
  slideshow.carousel.transit(index,from);
745
907
  }
746
908
 
747
- addTransitionEndHandler(slides);
748
-
749
909
  function applyTransitions(container){
750
910
  var childs = container.childNodes, elems = [];
751
911
 
@@ -758,25 +918,6 @@ function Slideshow(container,options){
758
918
  applyStyle(elems,'transition',transition);
759
919
  }
760
920
 
761
- function addTransitionEndHandler(elem){
762
- var te, index = slideshow.carousel.index, x = index % lx;
763
-
764
- if((te = hasTransitionEndEvent())){
765
- addEvent(elem,te,function(event){
766
- event = event ? event : window.event;
767
- var target = event.target || event.srcElement,
768
- target_id = slideshow.id + '-s' + index;
769
- // fixme: fires twice
770
- if(target.id === target_id && typeof afterTransit ==='function'){
771
- afterTransit(x, slideshow);
772
- }
773
- });
774
- slideshow.hasTransitionEndEvent = true;
775
- } else {
776
- slideshow.hasTransitionEndEvent = false;
777
- }
778
- }
779
-
780
921
  }
781
922
 
782
923
  function getStyleProperty(prop){
@@ -816,9 +957,14 @@ module.exports = '<div class="slides" id="{id}-slides">{slides}</div>\n<div clas
816
957
 
817
958
 
818
959
 
960
+
961
+
819
962
  require.alias("kaerus-component-carousel/index.js", "slideshow/deps/carousel/index.js");
820
963
  require.alias("kaerus-component-carousel/index.js", "carousel/index.js");
821
964
 
965
+ require.alias("kaerus-component-emitter/index.js", "slideshow/deps/emitter/index.js");
966
+ require.alias("kaerus-component-emitter/index.js", "emitter/index.js");
967
+
822
968
  require.alias("pgherveou-prefix/index.js", "slideshow/deps/prefix/index.js");
823
969
  require.alias("pgherveou-prefix/index.js", "slideshow/deps/prefix/index.js");
824
970
  require.alias("pgherveou-prefix/index.js", "prefix/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.16
4
+ version: 0.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Anders Elo
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-01-13 00:00:00.000000000 Z
11
+ date: 2014-01-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler