kaerus-component-slideshow 0.0.16 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bc88b2f6034c4a3635217ebef8ce8ee39c1d8a5d
-  data.tar.gz: aa5f0a1a62709441be31521c86835921a8e32b47
+  metadata.gz: 72670e2a3117f1b09dee06ac66e4dc779eb6de14
+  data.tar.gz: b673b2987bcce655535569a18a1dd841a5696d3e
 SHA512:
-  metadata.gz: e5642386fc2a6077cc7e36cf5a3a790b306c5ddf78d06a6b0fbcbdb1149bcec2a56c5b5df3154d08d000c820ccbcf2d71cf860104737ac04763c9c30bd7df956
-  data.tar.gz: bdcc5682793603cc8e52a543f47ac11ba79f87add5786c8e4ec09b9f2d56d23b5975f105c888aed3e3196a8d57fb6efe93ca8fb8b370ad9379f697b692b8a551
+  metadata.gz: 8941862bcda605072cd69cec6b2b38fadabb644d89f4a6325b9a04d7922336561e8e4581ca4bbc434308835c41b1f9a3c3081250c82bda9dd6c23d1c9acbc111
+  data.tar.gz: 6e33bd319d6af1cbdb08a18b3876c0b84b335123a9a0154412813dd4a9430c0d40d4a3e90a71dac460228e349cdaef1840fbf3d9a6e8cae5f39a12dc211644b3

data/lib/kaerus/component/slideshow/version.rb

@@ -1,7 +1,7 @@
 module Kaerus
   module Component
     module Slideshow
-      VERSION = "0.0.16"
+      VERSION = "0.1.0"
     end
   end
 end

data/vendor/assets/javascripts/kaerus_component_slideshow.js

@@ -432,6 +432,118 @@ Carousel.prototype.resume = function(skipPauseInterval){
 }
 
 module.exports = Carousel;
+});
+require.register("kaerus-component-emitter/index.js", function(exports, require, module){
+ // Emitter /////////////////////////////////////////////////////////////////////////////
+function Emitter(obj) {
+    /* Emitter mixin */
+    if(obj) {
+        for(var key in Emitter.prototype) {
+            obj[key] = Emitter.prototype[key];
+        }
+        obj._events = {};
+        return obj;
+    }
+
+    if(!(this instanceof Emitter)) {
+        return new Emitter;
+    }
+
+    this._events = {};  
+}
+
+Emitter.prototype.listeners = function(event) {
+    var handlers = this._events[event];
+
+    if(!handlers) return [];
+    
+    return handlers.filter(function(f){return f !==before && f !==after});
+}
+
+Emitter.prototype.hasListeners = function(event) {
+    return !!this._events[event];
+}
+
+function before(){};
+function after(){};
+
+Emitter.prototype.on = function(event,handler,first) {
+    var events = this._events[event];
+
+    if(!events) events = this._events[event] = [before,after];
+
+    if(first === true) events.splice(events.indexOf(before),0,handler);
+    else if(first === undefined) events.splice(events.indexOf(after),0,handler);
+    else events[events.length] = handler;
+   
+    return this;
+}
+
+Emitter.prototype.before = function(event,handler) {
+    return this.on(event,handler,true);
+}
+
+Emitter.prototype.after = function(event,handler) {
+    return this.on(event,handler,false);
+}
+
+Emitter.prototype.off = function(event,handler) {
+    
+    if(!arguments.length) {
+        this._events = {};
+    }    
+
+    if(this._events[event]) {
+        if(!handler) {
+            delete this._events[event];
+        } else {
+            this._events[event] = this._events[event].filter(function(f) {
+                return (f._of || f) !== handler;
+            });
+        }
+    }
+
+    return this;
+}
+
+Emitter.prototype.emit = function(event) {
+    var context, handler, args;
+
+    if(typeof event === 'object') {
+        context = event;
+        event = arguments[1];
+    }
+
+    args = Array.prototype.slice.call(arguments, (context ? 2 : 1));
+    
+    handler = this.listeners(event);
+
+    context = context ? context : this;
+
+    for(var i = 0, l = handler.length; i < l; i++){
+        if(handler[i].apply(context,args) === false) break;
+    }        
+
+    return this;
+}
+
+Emitter.prototype.once = function(event,handler) {
+    var self = this;
+
+    function once() {
+        self.off(event, handler);
+        handler.apply(this, arguments);
+    }
+    
+    this.on(event, once);
+
+    once._of = handler;
+
+    return this;
+}
+
+module.exports = Emitter;
+
 });
 require.register("pgherveou-prefix/index.js", function(exports, require, module){
 // module globals
@@ -489,6 +601,7 @@ module.exports = function(ppty, dasherized) {
 });
 require.register("slideshow/index.js", function(exports, require, module){
 var Carousel = require('carousel'),
+    Emitter = require('emitter'),
     template = require('./template'),
     Prefix = require('prefix'),
     prefixProp = {};
@@ -509,9 +622,7 @@ function Slideshow(container,options){
         prev:'&lang;',
         auto: true,
         time: 4000,
-        transition: ['all','1s', 'linear'],
-        beforeTransit: undefined,
-        afterTransit: undefined
+        transition: ['all','1s', 'linear']
     };
  
     for(var key in options) {
@@ -524,6 +635,9 @@ function Slideshow(container,options){
         }
     });
 
+    /* mixin emitter */
+    Emitter(this);
+
 	this.init(container);
 }
 
@@ -575,6 +689,8 @@ function Slideshow(container,options){
 
             attachHandlers(this);  
 
+            this.emit('init');
+
             /* autostart on initialization */
             if(this.settings.auto !== false){
                 this.start(this.settings.auto === true ? 0 : this.settings.auto);
@@ -584,36 +700,55 @@ function Slideshow(container,options){
         },
         start: function(index){
             this.carousel.start(index,this.settings.time);
+            this.emit('start');
 
             return this;
         },
         stop: function(){
             this.carousel.stop();
+            this.emit('stop');
 
             return this;
         },
         pause: function(){
             this.carousel.pause();
+            this.emit('pause');
 
             return this;
         },
         next: function(){
-            this.carousel.next();
+            var self = this;
+
+            if(!this.inTransition) {
+                this.carousel.next();
+                this.emit('next');
+            } else this.once('transition-end',function(){
+                self.next();
+            });
 
             return this;
         },
         prev: function(){
-            this.carousel.prev();
+            var self = this;
+
+            if(!this.inTransition) {
+                this.carousel.prev();
+                this.emit('prev');
+            } else this.once('transition-end',function(){
+                self.prev();
+            });
 
             return this;
         },
         resume: function(){
             this.carousel.resume();
+            this.emit('resume');
 
             return this;
         },
         show: function(x){
             this.carousel.show(x);
+            this.emit('show');
 
             return this;
         },
@@ -717,22 +852,33 @@ function Slideshow(container,options){
     function addTransitionHandler(nav,slides,slideshow){
         var settings = slideshow.settings,
             transition = settings.transition,
-            beforeTransit = settings.beforeTransit,
-            afterTransit = settings.afterTransit,
             navItems = nav.getElementsByTagName('li'), 
-            ix, fx, lx = navItems.length;
+            timer, durationProp, duration, s = 0, 
+            ix, fx, lx = navItems.length, slide = [], node;
+
+/*        $('#objectID').css('-webkit-transition-duration');*/
 
+        durationProp = getStyleProperty('transition-duration',true);
+
+        for(var x in slides.childNodes){
+            node = slides.childNodes[x];
+            if(node && node.id && node.id.indexOf(settings.id + '-s') === 0)
+                slide[s++] = node;
+        }
+        
         slideshow.carousel.onChange = function(index,from){
+            var current;
+
             ix = index % lx;
             fx = from % lx;
 
-            if(typeof beforeTransit === 'function') 
-                beforeTransit(ix, slideshow);
+            slideshow.inTransition = true;
+
+            slideshow.emit('transition',slide[ix],ix);
 
             if(from !== undefined){
                 navItems[fx].className = "navItem";
-                /* apply transitions after first slide */
-                /* to avoid animations on startup */
+                // apply transitions after first slide to avoid animations on startup
                 if(!slideshow.hasTransitions){
                     applyTransitions(document.getElementById(settings.id + '-slides'));
                     slideshow.hasTransitions = true;
@@ -741,11 +887,25 @@ function Slideshow(container,options){
             
             navItems[ix].className = "active navItem";
 
+            
+            s = window.getComputedStyle(slide[ix],null).getPropertyValue(durationProp);
+            
+            if(s.indexOf('s') > 0) s = parseInt(s,10) * 1000;
+            else s = parseInt(s,10);
+
+            current = ix;
+
+            if(s){
+                /* note: workaround for problematic transition-end event */
+                timer = setTimeout(function(){
+                    slideshow.inTransition = false;
+                    slideshow.emit('transition-end',slide[current],current);
+                },s);
+            }
+
             slideshow.carousel.transit(index,from);
         }
 
-        addTransitionEndHandler(slides);
-
         function applyTransitions(container){
             var childs = container.childNodes, elems = [];
 
@@ -758,25 +918,6 @@ function Slideshow(container,options){
             applyStyle(elems,'transition',transition);
         }
 
-        function addTransitionEndHandler(elem){
-            var te, index = slideshow.carousel.index, x = index % lx;
-
-            if((te = hasTransitionEndEvent())){
-                addEvent(elem,te,function(event){
-                    event = event ? event : window.event;
-                    var target = event.target || event.srcElement,
-                        target_id = slideshow.id + '-s' + index;
-                    // fixme: fires twice
-                    if(target.id === target_id && typeof afterTransit ==='function'){ 
-                        afterTransit(x, slideshow);
-                    }   
-                });
-                slideshow.hasTransitionEndEvent = true;
-            } else {
-                slideshow.hasTransitionEndEvent = false;
-            }
-        }
-
     }
 
     function getStyleProperty(prop){
@@ -816,9 +957,14 @@ module.exports = '<div class="slides" id="{id}-slides">{slides}</div>\n<div clas
 
 
 
+
+
 require.alias("kaerus-component-carousel/index.js", "slideshow/deps/carousel/index.js");
 require.alias("kaerus-component-carousel/index.js", "carousel/index.js");
 
+require.alias("kaerus-component-emitter/index.js", "slideshow/deps/emitter/index.js");
+require.alias("kaerus-component-emitter/index.js", "emitter/index.js");
+
 require.alias("pgherveou-prefix/index.js", "slideshow/deps/prefix/index.js");
 require.alias("pgherveou-prefix/index.js", "slideshow/deps/prefix/index.js");
 require.alias("pgherveou-prefix/index.js", "prefix/index.js");

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kaerus-component-slideshow
 version: !ruby/object:Gem::Version
-  version: 0.0.16
+  version: 0.1.0
 platform: ruby
 authors:
 - Anders Elo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-13 00:00:00.000000000 Z
+date: 2014-01-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler