kaerus-component-slideshow 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c42ee0299b0b413078cd14398439e471ee1abcfb
-  data.tar.gz: a5ce0e39c633e36f8b195b7e5609460a50e99766
+  metadata.gz: 52b19604b6f001d260096edef9cd4148191fd590
+  data.tar.gz: 9e33c37a52f6256994861d2f393d1d14c364cb4f
 SHA512:
-  metadata.gz: e9d5b211e83f971527eea2da78c6f6f67376752c9b9d5908f463812322003a76efa315380e46830c1e6adbde7de9154ac80c6b0dd6e9b686754efa9f2ca148f3
-  data.tar.gz: 14c1bfd9c2dad67ded51cdd6ce773ddf9c9d38b3ecc86598781bdd3e6f88ab07dbc5cc4a66bb7ece3c78bfaa90c30d55b4ce2cc66867dd541e1991afa82467f2
+  metadata.gz: 1953b19d35de7f8892f6895fb6e337a27bef589ea6a3cfba42686df68b9fef71811a5a3825cf1d1a358d7e897c1d4c177b5c5d52a2fe12b935866d3b0a96e4aa
+  data.tar.gz: 33c63a8f8b156900c584dc415c272409543bb9ab8d26ac827f0b8b5d4be6c9dc9baccb5da34993a325e0a3380226a1bbd74baaedab9f559c5c7401ef742f1e1e

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

@@ -1,7 +1,7 @@
 module Kaerus
   module Component
     module Slideshow
-      VERSION = "0.1.1"
+      VERSION = "0.1.2"
     end
   end
 end

data/vendor/assets/javascripts/kaerus_component_slideshow.js

@@ -644,11 +644,15 @@ function Slideshow(container,options){
 (function(){
     Slideshow.prototype = {
         init: function(container,options){
-            var settings = this.settings,
+            var self = this,
+                settings = this.settings,
                 id = this.id = settings.id,
                 slides = '\n', 
                 navItems = '\n', 
                 navId = id + '-nav',
+                nextId = id + '-next',
+                prevId = id + '-prev',
+                slideId = id + '-slides',
                 childs = container.childNodes;
 
             /* get slides from parent container */
@@ -683,21 +687,33 @@ function Slideshow(container,options){
             settings.width = container.clientWidth;
 
             /* create newcarousel instance */
-            this.carousel = new Carousel(id+'-slides');
+            this.carousel = new Carousel(slideId);
 
             this.slides = this.carousel.slides;
 
-            attachHandlers(this);  
+            this.navId = '#' + navId;
 
-            this.inTransition = false;
+            this.slideId = '#' + slideId;
+
+            this.nextId = '#' + nextId;
+
+            this.prevId = '#' + prevId;
 
-            this.emit('init');
+            transitionHandler(document.getElementById(navId),
+                document.getElementById(slideId),
+                this);  
+
+            this.inTransition = false;
 
             /* autostart on initialization */
             if(this.settings.auto !== false){
                 this.start(this.settings.auto === true ? 0 : this.settings.auto);
             }      
 
+            setTimeout(function(){
+                self.emit('init');
+            }, 0 );
+
             return this;        
         },
         start: function(index){
@@ -737,9 +753,14 @@ function Slideshow(container,options){
             return this;
         },
         show: function(x){
-            this.carousel.show(x);
-            this.emit('show');
+            if(typeof x === 'string'){
+                x = x.match(/\d+$/)[0];
+                x = x ? parseInt(x,10) : 0;
+            }
 
+            if(this.whenReady('show',x));
+                this.emit('show',x);
+            
             return this;
         },
         display: function(value){
@@ -751,11 +772,11 @@ function Slideshow(container,options){
 
             return this;
         },
-        whenReady: function(action){
+        whenReady: function(action,value){
             var self = this, handlers, hasHandler;
 
             if(!this.inTransition) {
-                this.carousel[action]();
+                this.carousel[action](value);
                 return true;
             } else {
                 handlers = this.listeners('transition-end');
@@ -767,7 +788,7 @@ function Slideshow(container,options){
                 }
                 
                 if(!hasHandler){
-                    this.once('transition-end', self[action]);
+                    this.once('transition-end', self[action], value);
                 }
             }
 
@@ -776,34 +797,6 @@ function Slideshow(container,options){
     }
 
 
-    function attachHandlers(slideshow){
-        var id = slideshow.settings.id,
-            slides = document.getElementById(id+'-slides'),
-            nav = document.getElementById(id+'-nav'),
-            next = document.getElementById(id+'-next'),
-            prev = document.getElementById(id+'-prev');
-
-        /* add slidshow UI handlers */
-        addEvent(next,'click',function(event){
-            event = event ? event : window.event;
-            slideshow.next();
-            event.stopPropagation();
-        }); 
-
-        addEvent(prev,'click',function(event){
-            event = event ? event : window.event;
-            slideshow.prev();
-            event.stopPropagation();
-        }); 
-
-        if(slideshow.settings.canPause) 
-            addPauseHandler(slides, slideshow);
-        
-        addNavHandler(nav,slideshow);
-
-        addTransitionHandler(nav, slides, slideshow);
-    }
-
     function applyStyle(elem,prop,attr){
         var style = '';
 
@@ -837,36 +830,8 @@ function Slideshow(container,options){
         elem.style[prop] = style; 
     }
 
-    function addNavHandler(elem,slideshow){
-        var nav = document.getElementById(slideshow.settings.id+'-nav'),
-            matchNav = new RegExp(elem.id + '(\\d+)');
-
-        addEvent(elem,'click', function(event){
-            event = event ? event : window.event;
-            var target = event.target || event.srcElement,
-                ix = matchNav.exec(target.id);
-
-            if(ix) {
-                slideshow.show(ix[1]);
-                event.stopPropagation();
-            }	
-        });
-    }
-
-    /* adds click handler on slide to toggle pause */
-    function addPauseHandler(elem,slideshow){
-        elem.addEventListener('click',function(event){
-            if(slideshow.paused) {
-                slideshow.resume();
-            } else {
-                slideshow.pause();
-            }
-        });
-    }
-
-    function addTransitionHandler(nav,slides,slideshow){
+    function transitionHandler(nav,slides,slideshow){
         var settings = slideshow.settings,
-            transition = settings.transition,
             navItems = nav.getElementsByTagName('li'), 
             timer, durationProp, s = 0, 
             ix, fx, lx = navItems.length, slide = [], node;
@@ -878,6 +843,8 @@ function Slideshow(container,options){
             if(node && node.id && node.id.indexOf(settings.id + '-s') === 0)
                 slide[s++] = node;
         }
+
+        applyStyle(slide,'transition',settings.transition);
         
         slideshow.carousel.onChange = function(index,from){
             var current;
@@ -891,11 +858,6 @@ function Slideshow(container,options){
                 slideshow.inTransition = true;
 
                 navItems[fx].className = "navItem";
-                // apply transitions after first slide to avoid animations on startup
-                if(!slideshow.hasTransitions){
-                    applyTransitions(document.getElementById(settings.id + '-slides'));
-                    slideshow.hasTransitions = true;
-                }
 
                 s = window.getComputedStyle(slide[ix],null).getPropertyValue(durationProp);
             
@@ -917,19 +879,6 @@ function Slideshow(container,options){
 
             slideshow.carousel.transit(index,from);
         }
-
-        function applyTransitions(container){
-            var childs = container.childNodes, elems = [];
-
-            for(var i = 0, l = childs.length; i < l; i++){
-                if(childs[i].nodeType === 1){
-                    elems.push(childs[i]);      
-                }    
-            }
-
-            applyStyle(elems,'transition',transition);
-        }
-
     }
 
     function getStyleProperty(prop){
@@ -939,25 +888,6 @@ function Slideshow(container,options){
         return prefixProp[prop];
     }
 
-    function hasTransitionEndEvent(){
-        var transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'], e;
-
-        e = transitionEndEvents.filter(function(m){
-            return ('on'+m.toLowerCase()) in window
-        });
-
-        return e[0];
-    }
-
-    function addEvent(el,ev,fn,cap){
-        if(el.addEventListener){
-            el.addEventListener(ev, fn, !!cap);
-        } else if (el.attachEvent){
-            el.attachEvent('on' + ev, fn);
-        }  else el['on' + ev] = fn;
-
-        return el;
-    }
 }());
 
 module.exports = Slideshow;

metadata

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