kaerus-component-slideshow 0.0.12 → 0.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b2b177ae3b9027ad2f42ce55788bf92a50e63359
-  data.tar.gz: fd45fb2fdc3e33e03836b6a2b74c8bd5821f5a17
+  metadata.gz: 4818e037339369aebd2aef3fadfff07ab157129f
+  data.tar.gz: 5af561d86b376a94c65a11016a60d83915662dac
 SHA512:
-  metadata.gz: ff6839c359de533a3079dc1f081274c304b9024e397b23ac0bba2f53b73785827d2612881060fca6c4cc748d8a6cd5270a94fdad9f2ff1c136ea8536c7086904
-  data.tar.gz: f3b807e34d12c45f6208952e4afc00504807048c02ba88bdda8cd14050614a858ed9977d607489bb04e4f8491be7dfd4a9221fd77e93d82e1429ae9c00b06a7f
+  metadata.gz: 8a6b79cd920d6b07e5d88b3389d77367c7dbe5f30abc64cbf500945a5bd73afbb72be68bd2e1fc14d9c1305cfbe785522207d39e147e5fd30d7a51a0d4cc710e
+  data.tar.gz: bf0fcfdff82dbf32e1ac56c20af6067808897fdc5da9c7b88e2558b52bbc133444c1e6210c37570cd162a05e4aac6b41868694de2efff023925d46c54c46a8ef

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

@@ -1,7 +1,7 @@
 module Kaerus
   module Component
     module Slideshow
-      VERSION = "0.0.12"
+      VERSION = "0.0.13"
     end
   end
 end

data/vendor/assets/javascripts/kaerus_component_slideshow.js

@@ -64,6 +64,7 @@ require.aliases = {};
 
 require.resolve = function(path) {
   if (path.charAt(0) === '/') path = path.slice(1);
+  var index = path + '/index.js';
 
   var paths = [
     path,
@@ -76,7 +77,10 @@ require.resolve = function(path) {
   for (var i = 0; i < paths.length; i++) {
     var path = paths[i];
     if (require.modules.hasOwnProperty(path)) return path;
-    if (require.aliases.hasOwnProperty(path)) return require.aliases[path];
+  }
+
+  if (require.aliases.hasOwnProperty(index)) {
+    return require.aliases[index];
   }
 };
 
@@ -224,9 +228,9 @@ function Carousel(container,tag) {
     }
 
      /* clone some nodes if we have to few slides */
-    var min_slides = 3;
+    var min_slides = 4;
 
-    if(nodes.length === 2) min_slides = 4;
+    if(nodes.length === 3) min_slides = 6;
     
     for(var i = 0; nodes.length < min_slides; i++){
         nodes[nodes.length] = nodes[i].cloneNode(true);
@@ -316,6 +320,13 @@ Carousel.prototype.prev = function(){
     return this;
 }
 
+Carousel.prototype.getSlide = function(offset, pos){
+    var index = pos !== undefined ? offset : this.index,
+        slide = cap(this.slides.length,offset+pos);
+
+    return this.slides[slide];
+}
+
 Carousel.prototype.transit = function(index,from){
     
     clearClass(this.slides,[ACTIVE_SLIDE,NEXT_SLIDE,PREVIOUS_SLIDE]);
@@ -421,10 +432,66 @@ Carousel.prototype.resume = function(skipPauseInterval){
 }
 
 module.exports = Carousel;
+});
+require.register("pgherveou-prefix/index.js", function(exports, require, module){
+// module globals
+
+var prefixes = ['webkit','Moz','ms','O']
+  , len = prefixes.length
+  , p = document.createElement('p')
+  , style = p.style
+  , capitalize = function (str) {return str.charAt(0).toUpperCase() + str.slice(1);}
+  , dasherize = function(str) {
+      return str.replace(/([A-Z])/g, function(str,m1) {
+        return '-' + m1.toLowerCase();
+      });
+    };
+
+// nullify p to release dom node
+p = null;
+
+/**
+ * get prefix for dom style
+ *
+ * example
+ *   prefix('transform') // webkitTransform
+ *   prefix('transform', true) // -webkit-transform
+ *
+ * @param  {String}   ppty dom style
+ * @param  {Boolean}  dasherize
+ * @return {String}   prefixed ppty
+ * @api public
+ */
+
+module.exports = function(ppty, dasherized) {
+  var Ppty, name, Name;
+
+  // test without prefix
+  if (style[ppty] !== undefined) {
+    if (!dasherized) return ppty;
+    return dasherize(ppty);
+  }
+
+  // test with prefix
+  Ppty = capitalize(ppty);
+  for (i = 0; i < len; i++) {
+    name = prefixes[i] + Ppty;
+    if (style[name] !== undefined) {
+      if (!dasherized) return name;
+      return '-' + prefixes[i].toLowerCase() + '-' + dasherize(ppty);
+    }
+  }
+
+  // not found return empty string
+  return '';
+};
+
 });
 require.register("slideshow/index.js", function(exports, require, module){
 var Carousel = require('carousel'),
-    template = require('./template');
+    template = require('./template'),
+    Prefix = require('prefix'),
+    prefixProp = {};
 
 function Slideshow(container,options){
 	if(!(this instanceof Slideshow))
@@ -441,12 +508,15 @@ function Slideshow(container,options){
         next:'&rang;',
         prev:'&lang;',
         time: 4000,
-        transition: ['all','1s'],
+        transition: ['all','1s', 'linear'],
         beforeTransit: undefined,
         afterTransit: undefined
     };
  
-    mergeOptions(this.settings,options);
+    for(var key in options) {
+        if(options.hasOwnProperty(key))
+            this.settings[key] = options[key];
+    }
 
     Object.defineProperty(this,'paused',{
         get: function() {
@@ -457,7 +527,8 @@ function Slideshow(container,options){
 	this.init(container);
 }
 
-Slideshow.prototype = {
+(function(){
+    Slideshow.prototype = {
         init: function(container,options){
             var settings = this.settings,
                 id = settings.id,
@@ -492,6 +563,9 @@ Slideshow.prototype = {
             if(!container.className) container.className = 'slideshow';
             else container.className+= ' slideshow';
 
+            settings.height = container.clientHeight;
+            settings.width = container.clientWidth;
+
             /* create newcarousel instance */
             this.carousel = new Carousel(id+'-slides');
 
@@ -545,12 +619,7 @@ Slideshow.prototype = {
 
             return this;
         }
-}
-
-
-    var transitionProp = ['webkitTransition','mozTransition','msTransition','oTransition'],
-    transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'],
-    transformProp = ['webkitTransform','mozTransform','msTransform','oTransform'];
+    }
 
 
     function attachHandlers(slideshow){
@@ -582,13 +651,9 @@ Slideshow.prototype = {
         if(typeof elem === 'string')
             elem = document.getElementById(elem);
 
-        if(!elem) return;
-
-        if(Array.isArray(prop)){
-            prop = getStyleProperty(prop);
-        }
+        if(!elem || !prop) return;
 
-        if(!prop) return;
+        prop = getStyleProperty(prop,true);
 
         if(Array.isArray(elem)){
             for(var i = 0, l = elem.length; i < l; i++)
@@ -646,7 +711,9 @@ Slideshow.prototype = {
             beforeTransit = settings.beforeTransit,
             afterTransit = settings.afterTransit,
             dots = nav.getElementsByTagName('li'), 
-            ix, fx, lx = dots.length;
+            ix, fx, lx = dots.length, 
+            prev, next, show,
+            width = slideshow.width;
 
         slideshow.carousel.onChange = function(index,from){
             ix = index % lx;
@@ -667,6 +734,22 @@ Slideshow.prototype = {
             
             dots[ix].className = "active dot";
 
+            prev = slideshow.carousel.getSlide(from,-1);
+            next = slideshow.carousel.getSlide(from,1);
+            show = slideshow.carousel.getSlide(from,0);
+
+            applyStyle(prev,'transform','translate3d(0, 0, 0)');
+            applyStyle(next,'transform','translate3d(0, 0, 0)');
+            applyStyle(show,'transform','translate3d(0, 0, 0)');
+
+            prev = slideshow.carousel.getSlide(index,-1);
+            next = slideshow.carousel.getSlide(index,1);
+            show = slideshow.carousel.getSlide(index,0);
+            
+            applyStyle(prev,'transform','translate3d(-' + settings.width + 'px, 0, 0)');
+            applyStyle(next,'transform','translate3d(' + settings.width + 'px, 0, 0)');
+            applyStyle(show,'transform','translate3d(0, 0, 0)');
+
             slideshow.carousel.transit(index,from);
         }
 
@@ -681,7 +764,8 @@ Slideshow.prototype = {
                 }    
             }
 
-            applyStyle(elems,transitionProp,transition);
+            applyStyle(elems,'transition',transition);
+            applyStyle(elems,'transform','translate3d(0, 0, 0)');
         }
 
         function addTransitionEndHandler(elem){
@@ -705,36 +789,21 @@ Slideshow.prototype = {
 
     }
 
-    transitionProp = getStyleProperty(transitionProp);
-    transformProp = getStyleProperty(transformProp);
-
-    function getStyleProperty(props){
-        var root = document.documentElement, 
-            prop;
+    function getStyleProperty(prop){
+        if(!prefixProp.hasOwnProperty(prop))
+            prefixProp[prop] = Prefix(prop,true);
 
-        prop = props.filter(function(p){
-            return p in root.style
-        });
-
-        return prop[0]
+        return prefixProp[prop];
     }
 
     function hasTransitionEndEvent(){
-        var hasTev;
+        var transitionEndEvents = ['transitionend', 'webkitTransitionEnd', 'otransitionend'], e;
 
-        hasTev = transitionEndEvents.filter(function(m){
+        e = transitionEndEvents.filter(function(m){
             return ('on'+m.toLowerCase()) in window
         });
 
-        return hasTev[0];
-    }
-
-    function mergeOptions(target,source){
-        for(var key in source) {
-            target[key] = source[key];
-        }
-        
-        return target;
+        return e[0];
     }
 
     function addEvent(el,ev,fn,cap){
@@ -746,7 +815,7 @@ Slideshow.prototype = {
 
         return el;
     }
-
+}());
 
 module.exports = Slideshow;
 });
@@ -755,6 +824,12 @@ 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("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");
+require.alias("pgherveou-prefix/index.js", "pgherveou-prefix/index.js");
+
 if (typeof exports == "object") {
   module.exports = require("slideshow");
 } else if (typeof define == "function" && define.amd) {

data/vendor/assets/stylesheets/kaerus_component_slideshow.css

@@ -81,13 +81,13 @@
 .slideshow .slides .slide{
     position: absolute;
     overflow: hidden;
+    display: none;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     top: 0;
     left: 0;
-    z-index: 0;
 }
 
 .slideshow .slides .slide img {
@@ -100,27 +100,10 @@
     display: block;
     left: 2em;
     top: 2em;
-    z-index: 9999;
 }
 
-
 .slideshow .slides .slide.prev,
 .slideshow .slides .slide.next,
 .slideshow .slides .slide.show {
     display: block;
-}
-
-.slideshow .slides .slide.prev {
-    left: -100%;
-    z-index: 10;
-}
-
-.slideshow .slides .slide.next {
-    left: 100%;
-    z-index: 10;
-}
-
-.slideshow .slides .slide.show {
-    left: 0;
-    z-index: 9999;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kaerus-component-slideshow
 version: !ruby/object:Gem::Version
-  version: 0.0.12
+  version: 0.0.13
 platform: ruby
 authors:
 - Anders Elo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-12 00:00:00.000000000 Z
+date: 2013-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -83,7 +83,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.0
+rubygems_version: 2.0.3
 signing_key: 
 specification_version: 4
 summary: Created as a component.js module