kaerus-component-slideshow 0.0.10 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a24b45c7c9bde961092446d913fd38a26ecbb243
-  data.tar.gz: f08391920945319dfb3544f7350f0b6e8f05f253
+  metadata.gz: 9623d33cdb055350d09cc5d1717b2a78be468bbb
+  data.tar.gz: 08229965f72b944821118c69ef85423c36585ab9
 SHA512:
-  metadata.gz: 5487b90793cb4a1aacc65f623420f1ad40af8db768d94782d7e9d4e381d4fa2fc38eab2870838fd2e63de9e37149082753a6e2f0b55d76ae870a6361cc883b37
-  data.tar.gz: 9fe46cd2d914c255c1accb0705ab6f84b629d45d88673f83c9337348b881074aca62cc15a00708ae2e2f64d46be9c74fa164636c1b01f0be779ce752faff0ddd
+  metadata.gz: 538fe6b9b7d4a90cd4f9434a3c82c7a651104bafa9735782a2f7bca212396a4f18e818dd5954e7703a70de245c0740fd356df7ef24dd448f1629b3188074de72
+  data.tar.gz: 4ec530f96a540bfe2563e2908392f491f4bf44a2873d6cd3b5e2f9a12e3bdc82f44505084ecd45a107675ee73cdcc6b09cb2d7603edc6ec3e98896cf6f1408ea

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

@@ -1,7 +1,7 @@
 module Kaerus
   module Component
     module Slideshow
-      VERSION = "0.0.10"
+      VERSION = "0.0.11"
     end
   end
 end

data/vendor/assets/javascripts/kaerus_component_slideshow.js

@@ -422,11 +422,6 @@ require.register("slideshow/index.js", function(exports, require, module){
 var Carousel = require('carousel'),
     template = require('./template');
 
-var transitionProp = ['webkitTransition','mozTransition','msTransition','oTransition'],
-    transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'],
-    transformProp = ['webkitTransform','mozTransform','msTransform','oTransform'];
-
-
 function Slideshow(container,options){
 	if(!(this instanceof Slideshow))
 		return new Slideshow(container,options);
@@ -436,7 +431,7 @@ function Slideshow(container,options){
 
     if(!container) throw new Error("invalid slideshow container");
 
-    var settings = {
+    this.settings = {
         id: container.id || 'slideshow',
         template: template,
         next:'⟩',
@@ -447,60 +442,98 @@ function Slideshow(container,options){
         afterTransit: undefined
     };
  
-    mergeOptions(settings,options);
-    mergeOptions(this,settings);
+    mergeOptions(this.settings,options);
+
+    Object.defineProperty(this,'paused',{
+        get: function() {
+            return this.carousel.paused;
+        }
+    });
 
 	this.init(container);
 }
 
-Slideshow.prototype = (function(){
-	var carousel, slideshow;
+Slideshow.prototype = {
+        init: function(container,options){
+            var settings = this.settings,
+                id = settings.id,
+                slides = '\n', 
+                dots = '\n', 
+                navId = id + '-nav',
+                childs = container.childNodes;
+
+            /* get slides from parent container */
+            for(var i = 0, n = 0, l = childs.length; i < l; i++){
+                if(childs[i].nodeType === 1){ 
+                    slides+= '<div id="'+ id + '-s' + n + '">' + childs[i].outerHTML + '</div>\n';
+                    dots+='<li class="dot" id="' + navId + n + '"></li>\n';
+                    n++;
+                }    
+            }
+
+            /* create dom structure from template */
+            var template = settings.template.replace(/{\w+}/mg,function(m){
+                switch(m){
+                    case "{id}": return id;
+                    case "{slides}": return slides;
+                    case "{next}": return settings.next;
+                    case "{prev}": return settings.prev; 
+                    case "{nav}": return dots;
+                }
+            });
+
+            /* apply slider template */
+            container.innerHTML = template;
+            /* add slideshow class to target container */
+            if(!container.className) container.className = 'slideshow';
+            else container.className+= ' slideshow';
 
-	SSproto = {
-		init: function(container,options){
-            slideshow = this;
+            /* create newcarousel instance */
+            this.carousel = new Carousel(id+'-slides');
 
-            setup(container);
+            this.slides = this.carousel.slides;
 
-            return this;		
+            attachHandlers(this);        
+
+            return this;        
         },
         start: function(){
-            carousel.start(0,slideshow.time);
+            this.carousel.start(0,this.settings.time);
 
             return this;
         },
         stop: function(){
-            carousel.stop();
+            this.carousel.stop();
 
             return this;
         },
         pause: function(){
-            carousel.pause();
+            this.carousel.pause();
 
             return this;
         },
         next: function(){
-            carousel.next();
+            this.carousel.next();
 
             return this;
         },
-        previous: function(){
-            carousel.prev();
+        prev: function(){
+            this.carousel.prev();
 
             return this;
         },
         resume: function(){
-            carousel.resume;
+            this.carousel.resume();
 
             return this;
         },
         show: function(x){
-            carousel.show(x);
+            this.carousel.show(x);
 
             return this;
         },
         display: function(value){
-            var slides = document.getElementById(slideshow.id);
+            var slides = document.getElementById(this.settings.id);
 
             if(typeof value === 'string') slides.style.display = value;
             else if(!!value) slides.style.display = 'block';
@@ -508,58 +541,35 @@ Slideshow.prototype = (function(){
 
             return this;
         }
-    }
-
-    function setup(container){
-        var slides = '\n', 
-            dots = '\n', 
-            navId = slideshow.id + '-nav',
-            childs = container.childNodes;
-
-        /* get slides from parent container */
-        for(var i = 0, n = 0, l = childs.length; i < l; i++){
-            if(childs[i].nodeType === 1){ 
-                slides+= '<div id="'+ slideshow.id + '-s' + n + '">' + childs[i].outerHTML + '</div>\n';
-                dots+='<li class="dot" id="' + navId + n + '"></li>\n';
-                n++;
-            }    
-        }
-
-        /* create dom structure from template */
-        var template = slideshow.template.replace(/{\w+}/mg,function(m){
-            switch(m){
-                case "{id}": return slideshow.id;
-                case "{slides}": return slides;
-                case "{next}": return slideshow.next;
-                case "{prev}": return slideshow.prev; 
-                case "{nav}": return dots;
-            }
-        });
+}
 
-        /* apply slider template */
-        container.innerHTML = template;
-        /* add slideshow class to target container */
-        if(!container.className) container.className = 'slideshow';
-        else container.className+= ' slideshow';
 
-        /* create newcarousel instance */
-        carousel = new Carousel(slideshow.id+'-slides');
+    var transitionProp = ['webkitTransition','mozTransition','msTransition','oTransition'],
+    transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'],
+    transformProp = ['webkitTransform','mozTransform','msTransform','oTransform'];
 
-        attachHandlers();        
-    }
 
-    function attachHandlers(){
-        var slides = document.getElementById(slideshow.id+'-slides'),
-            nav = document.getElementById(slideshow.id+'-nav'),
-            next = document.getElementById(slideshow.id+'-next'),
-            prev = document.getElementById(slideshow.id+'-prev');
+    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 */
-        addNavHandler(nav);
+        addNavHandler(nav,slideshow);
         addPauseHandler(slides);
-        addTransitionHandler(nav, slides);
-        addButtonHandler(next,'next');
-        addButtonHandler(prev,'prev');
+        addTransitionHandler(nav, slides, slideshow);
+
+        addEvent(next,'click',function(event){
+            slideshow.next();
+            event.stopPropagation();
+        }); 
+        
+        addEvent(prev,'click',function(event){
+            slideshow.prev();
+            event.stopPropagation();
+        }); 
     }
 
     function applyStyle(elem,prop,attr){
@@ -592,15 +602,8 @@ Slideshow.prototype = (function(){
         elem.style[prop] = style; 
     }
 
-    function addButtonHandler(elem,button){
-        addEvent(elem,'click',function(event){
-            carousel[button]();
-            event.stopPropagation();
-        });	
-    }
-
-    function addNavHandler(elem){
-        var nav = document.getElementById(slideshow.id+'-nav'),
+    function addNavHandler(elem,slideshow){
+        var nav = document.getElementById(slideshow.settings.id+'-nav'),
             matchNav = new RegExp(elem.id + '(\\d+)');
 
         addEvent(elem,'click', function(event){
@@ -609,62 +612,67 @@ Slideshow.prototype = (function(){
                 ix = matchNav.exec(target.id);
 
             if(ix) {
-                carousel.show(ix[1]);
+                slideshow.show(ix[1]);
                 event.stopPropagation();
             }	
         });
     }
 
     /* adds click handler on slide to toggle pause */
-    function addPauseHandler(elem){
+    function addPauseHandler(elem,slideshow){
         elem.addEventListener('click',function(event){
-            if(carousel.paused) {
-                carousel.resume();
+            if(slideshow.paused) {
+                slideshow.resume();
             } else {
-                carousel.pause();
+                slideshow.pause();
             }
         });
     }
 
-    function addTransitionHandler(nav,slides){
-        var dots = nav.getElementsByTagName('li'), 
+    function addTransitionHandler(nav,slides,slideshow){
+        var settings = slideshow.settings,
+            transition = settings.transition,
+            beforeTransit = settings.beforeTransit,
+            afterTransit = settings.afterTransit,
+            dots = nav.getElementsByTagName('li'), 
             ix, fx, lx = dots.length;
 
-        carousel.onChange = function(index,from){
+        slideshow.carousel.onChange = function(index,from){
             ix = index % lx;
             fx = from % lx;
 
-            if(typeof slideshow.beforeTransit === 'function') slideshow.beforeTransit(ix, slideshow);
+            if(typeof beforeTransit === 'function') 
+                beforeTransit(ix, slideshow);
 
             if(from !== undefined){
                 dots[fx].className = "dot";
                 /* apply transitions after first slide */
                 /* to avoid animations on startup */
                 if(!slideshow.hasTransitions){
-                    for(var i = 0, l = carousel.slides.length; i < l; i++)
-                        applyStyle(slideshow.id + '-s' + i,transitionProp,slideshow.transition);
+                    for(var i = 0, l = slideshow.slides.length; i < l; i++)
+                        applyStyle(settings.id + '-s' + i,transitionProp,transition);
                     slideshow.hasTransitions = true;
                 }
             }
             
             dots[ix].className = "active dot";
 
-            carousel.transit(index,from);
+            slideshow.carousel.transit(index,from);
         }
 
         addTransitionEndHandler(slides);
 
         function addTransitionEndHandler(elem){
-            var te, x = carousel.index % lx;
+            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' + carousel.index;
+                        target_id = slideshow.id + '-s' + index;
                     // fixme: fires twice
-                    if(target.id === target_id && typeof slideshow.afterTransit ==='function'){ 
-                        slideshow.afterTransit(x, slideshow);
+                    if(target.id === target_id && typeof afterTransit ==='function'){ 
+                        afterTransit(x, slideshow);
                     }   
                 });
                 slideshow.hasTransitionEndEvent = true;
@@ -675,50 +683,47 @@ Slideshow.prototype = (function(){
 
     }
 
-    return SSproto;
-}());
-
-transitionProp = getStyleProperty(transitionProp);
-transformProp = getStyleProperty(transformProp);
+    transitionProp = getStyleProperty(transitionProp);
+    transformProp = getStyleProperty(transformProp);
 
-function getStyleProperty(props){
-    var root = document.documentElement, 
-        prop;
+    function getStyleProperty(props){
+        var root = document.documentElement, 
+            prop;
 
-    prop = props.filter(function(p){
-        return p in root.style
-    });
+        prop = props.filter(function(p){
+            return p in root.style
+        });
 
-    return prop[0]
-}
+        return prop[0]
+    }
 
-function hasTransitionEndEvent(){
-    var hasTev;
+    function hasTransitionEndEvent(){
+        var hasTev;
 
-    hasTev = transitionEndEvents.filter(function(m){
-        return ('on'+m.toLowerCase()) in window
-    });
+        hasTev = transitionEndEvents.filter(function(m){
+            return ('on'+m.toLowerCase()) in window
+        });
 
-    return hasTev[0];
-}
+        return hasTev[0];
+    }
 
-function mergeOptions(target,source){
-    for(var key in source) {
-        target[key] = source[key];
+    function mergeOptions(target,source){
+        for(var key in source) {
+            target[key] = source[key];
+        }
+        
+        return target;
     }
-    
-    return target;
-}
 
-function addEvent(el,ev,fn,cap){
-    if(el.addEventListener){
-        el.addEventListener(ev, fn, !!cap);
-    } else if (elm.attachEvent){
-        el.attachEvent('on' + ev, fn);
-    }  else el['on' + ev] = fn;
+    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;
-}
+        return el;
+    }
 
 
 module.exports = Slideshow;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kaerus-component-slideshow
 version: !ruby/object:Gem::Version
-  version: 0.0.10
+  version: 0.0.11
 platform: ruby
 authors:
 - Anders Elo