fixed a length issue when parent has non-zero padding

README.md

@@ -1,5 +1,5 @@
 # tiny-slider
-![version](https://img.shields.io/badge/Version-0.4.1-green.svg)   
+![version](https://img.shields.io/badge/Version-0.4.2-green.svg)   
 Tiny slider for all purposes, inspired by [Owl Carousel](http://owlcarousel.owlgraphic.com/).
 Works on morden browsers and IE8+.   
 [demo](http://creatiointl.org/william/tiny-slider/v1/demo/)   

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "homepage": "https://github.com/ganlanyuan/tiny-slider",
   "authors": [
     "WilliamLin <[email protected]>"
@@ -27,7 +27,7 @@
     "gulpfile.js"
   ],
   "devDependencies": {
-    "go-native": "0.0.8"
+    "go-native": "0.x"
   },
   "dependencies": {}
 }

changelog.md

@@ -27,6 +27,9 @@ class `tiny-next` => attribute `[data-controls="next"`.
 - Fixed: an issue with `items`, when container width is shorter than one slide in fixedWidth slider.
  -->
 
+#### v0.4.2
+- Fixed: a length issue when slider parent element has non-zero `padding`.
+
 #### v0.4.1
 - Added: `gutterPosition` option.
 - Fixed: `margin` attribute is added even gutter is 0.

dist/tiny-slider.ie8.js

@@ -141,4 +141,44 @@ if (!Object.keys) {
       }
     });
   }
+})();
+// getComputedStyle
+
+(function(){
+  "use strict";
+
+  if(!window.getComputedStyle){
+    window.getComputedStyle = function(el){
+      if(!el) { return null; }
+
+      /**
+       * currentStyle returns an instance of a non-standard class called "CSSCurrentStyleDeclaration"
+       * instead of "CSSStyleDeclaration", which has a few methods and properties missing (such as cssText).
+       * https://msdn.microsoft.com/en-us/library/cc848941(v=vs.85).aspx
+       *
+       * Instead of returning the currentStyle value directly, we'll copy its properties to the style
+       * of a shadow element. This ensures cssText is included, and ensures the result is an instance of
+       * the correct DOM interface.
+       *
+       * There'll still be some minor discrepancies in the style values. For example, IE preserves the way
+       * colour values were authored, whereas standards-compliant browsers will expand colours to use "rgb()"
+       * notation. We won't bother to fix things like these, as they'd involve too much fiddling for little
+       * gain.
+       */
+
+      var style   = el.currentStyle;
+      var box     = el.getBoundingClientRect();
+      var shadow  = document.createElement("div");
+      var output  = shadow.style;
+      for(var i in style) {
+        output[i] = style[i];
+      }
+
+      /** Fix some glitches */
+      output.cssFloat = output.styleFloat;
+      if("auto" === output.width) { output.width  = (box.right - box.left) + "px"; }
+      if("auto" === output.height) { output.height = (box.bottom - box.top) + "px"; }
+      return output;
+    };
+  } 
 })();

dist/tiny-slider.js

@@ -352,6 +352,45 @@
 	}
 }());
 
+(function(t,e,o){"use strict";function r(t,e,r,p){r=r||"width";var n,l,m,c=(e.match(s)||[])[2],f="px"===c?1:d[c+"toPx"],u=/r?em/i;if(f||u.test(c)&&!p)t=f?t:"rem"===c?i:"fontSize"===r?t.parentNode||t:t,f=f||parseFloat(a(t,"fontSize")),m=parseFloat(e)*f;else{n=t.style,l=n[r];try{n[r]=e}catch(x){return 0}m=n[r]?parseFloat(a(t,r)):0,n[r]=l!==o?l:null}return m}function a(t,e){var o,n,i,l,d,c=/^top|bottom/,f=["paddingTop","paddingBottom","borderTop","borderBottom"],u=4;if(o=m?m(t)[e]:(n=t.style["pixel"+e.charAt(0).toUpperCase()+e.slice(1)])?n+"px":"fontSize"===e?r(t,"1em","left",1)+"px":t.currentStyle[e],i=(o.match(s)||[])[2],"%"===i&&p)if(c.test(e)){for(l=(d=t.parentNode||t).offsetHeight;u--;)l-=parseFloat(a(d,f[u]));o=parseFloat(o)/100*l+"px"}else o=r(t,o);else("auto"===o||i&&"px"!==i)&&m?o=0:i&&"px"!==i&&!m&&(o=r(t,o)+"px");return o}var p,n=e.createElement("test"),i=e.documentElement,l=e.defaultView,m=l&&l.getComputedStyle,s=/^(-?[\d+\.\-]+)([a-z]+|%)$/i,d={},c=[1/25.4,1/2.54,1/72,1/6],f=["mm","cm","pt","pc","in","mozmm"],u=6;for(i.appendChild(n),m&&(n.style.marginTop="1%",p="1%"===m(n).marginTop);u--;)d[f[u]+"toPx"]=c[u]?c[u]*d.inToPx:r(n,"1"+f[u]);i.removeChild(n),n=o,t.Length={toPx:r}})(this,this.document);
+/*
+//@ sourceMappingURL=Length.min.js.map
+*/
+// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller.
+// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+
+// MIT license
+
+if (!Date.now)
+    Date.now = function() { return new Date().getTime(); };
+
+(function() {
+    'use strict';
+
+    var vendors = ['webkit', 'moz'];
+    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+        var vp = vendors[i];
+        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
+                                   || window[vp+'CancelRequestAnimationFrame']);
+    }
+    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
+        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+        var lastTime = 0;
+        window.requestAnimationFrame = function(callback) {
+            var now = Date.now();
+            var nextTime = Math.max(lastTime + 16, now);
+            return setTimeout(function() { callback(lastTime = nextTime); },
+                              nextTime - now);
+        };
+        window.cancelAnimationFrame = clearTimeout;
+    }
+}());
+
 // ChildNode.remove
 (function () {
   "use strict";
@@ -533,44 +572,34 @@ gn.unwrap = function (els) {
     parent.removeChild(el);
   }
 };
-// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+// getWidth
+// @require "/src/gn/base.js"
+// @require "/bower_components/Units/Length.js"
+// 1. outer size: content + padding + border + margin //
 
-// requestAnimationFrame polyfill by Erik Möller.
-// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+// 2. offset size: content + padding + border //
+//    el.offsetWidth  
+//    el.offsetHeight
 
-// MIT license
+// 3. client size: content + padding
+//    el.clientWidth  
+//    el.clientHeight
 
-if (!Date.now)
-    Date.now = function() { return new Date().getTime(); };
+// 4. size: content
 
-(function() {
-    'use strict';
-
-    var vendors = ['webkit', 'moz'];
-    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
-        var vp = vendors[i];
-        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
-        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
-                                   || window[vp+'CancelRequestAnimationFrame']);
-    }
-    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
-        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
-        var lastTime = 0;
-        window.requestAnimationFrame = function(callback) {
-            var now = Date.now();
-            var nextTime = Math.max(lastTime + 16, now);
-            return setTimeout(function() { callback(lastTime = nextTime); },
-                              nextTime - now);
-        };
-        window.cancelAnimationFrame = clearTimeout;
-    }
-}());
+gn.getWidth = function (el) {
+  var pattern = /\d/, // check if value contains digital number
+      width = el.clientWidth,
+      style = el.currentStyle || getComputedStyle(el),
+      paddingLeft = (pattern.exec(style.paddingLeft) === null) ? '0px' : style.paddingLeft,
+      paddingRight = (pattern.exec(style.paddingRight) === null) ? '0px' : style.paddingRight;
 
+  width -= (parseInt(Length.toPx(el, paddingLeft)) + parseInt(Length.toPx(el, paddingRight)));
+  return width;
+};
 /**
   * tiny-slider
-  * @version 0.4.1
+  * @version 0.4.2
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -756,7 +785,7 @@ var tinySlider = (function () {
       if (fixedWidth) {
         return function () { return fixedWidth + gutter; };
       } else {
-        return function () { return (sliderContainer.parentNode.offsetWidth + gutter) / items; };
+        return function () { return (gn.getWidth(sliderContainer.parentNode) + gutter) / items; };
       }
     })();
 

dist/tiny-slider.native.js

@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 0.4.1
+  * @version 0.4.2
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -186,7 +186,7 @@ var tinySlider = (function () {
       if (fixedWidth) {
         return function () { return fixedWidth + gutter; };
       } else {
-        return function () { return (sliderContainer.parentNode.offsetWidth + gutter) / items; };
+        return function () { return (gn.getWidth(sliderContainer.parentNode) + gutter) / items; };
       }
     })();
 

gulpfile.js

@@ -20,6 +20,8 @@ var config = {
   js: {
     src: [[
         "bower_components/domtokenlist/src/token-list.js",
+        "bower_components/Units/Length.min.js",
+        "bower_components/requestAnimationFrame/requestAnimationFrame.js",
 
         "bower_components/go-native/src/utilities/childNode.remove.js",
         "bower_components/go-native/src/gn/base.js",
@@ -28,13 +30,12 @@ var config = {
         "bower_components/go-native/src/gn/indexOf.js",
         "bower_components/go-native/src/gn/getSupportedProp.js",
         "bower_components/go-native/src/gn/DOM.ready.js",
-
         "bower_components/go-native/src/gn/isNodeList.js",
         "bower_components/go-native/src/gn/append.js",
         "bower_components/go-native/src/gn/wrap.js",
         "bower_components/go-native/src/gn/unwrap.js",
+        "bower_components/go-native/src/gn/getWidth.js",
 
-        "bower_components/requestAnimationFrame/requestAnimationFrame.js",
         "src/tiny-slider.native.js",
       ], [
         "src/tiny-slider.native.js",
@@ -45,6 +46,7 @@ var config = {
         "bower_components/go-native/src/ie8/lastElementChild.js",
         "bower_components/go-native/src/ie8/previousElementSibling.js",
         "bower_components/go-native/src/ie8/nextElementSibling.js",
+        "bower_components/go-native/src/ie8/getComputedStyle.js",
       ]],
     name: ['tiny-slider.js', 'tiny-slider.native.js', 'tiny-slider.ie8.js'],
     options: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Pure tiny javascript slider for all purposes.",
   "main": "dist/tiny-slider.js",
   "style": "dist/tiny-slider.css",

src/tiny-slider.native.js

@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 0.4.1
+  * @version 0.4.2
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -186,7 +186,7 @@ var tinySlider = (function () {
       if (fixedWidth) {
         return function () { return fixedWidth + gutter; };
       } else {
-        return function () { return (sliderContainer.parentNode.offsetWidth + gutter) / items; };
+        return function () { return (gn.getWidth(sliderContainer.parentNode) + gutter) / items; };
       }
     })();
 

tests/index.html

@@ -19,6 +19,7 @@
   <link href="prism/prism.css" rel="stylesheet">
   <link rel="stylesheet" href="../dist/tiny-slider.css">
   <style>
+    /*.wrapper { padding: 5em; }*/
     li { list-style: none; }
     ul, ol, li { margin: 0; padding: 0; }
     body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
@@ -195,38 +196,40 @@
   <h1>Tiny-slider Demos</h1>
   <section>
     <h2>responsive</h2>
-    <div class="responsive" id="myslider">
-      <div>
-        <div class="img img-1">1</div>
-        <p>Lorem ipsum dolor sit amet</p>
-      </div>
-      <div>
-        <div class="img img-2">2</div>
-        <p>Blanditiis sapiente tempora </p>
-      </div>
-      <div>
-        <div class="img img-3">3</div>
-        <p>At possimus dolorum eligendi repellat</p>
-      </div>
-      <div>
-        <div class="img img-4">4</div>
-        <p>Cumque facilis amet eos nulla</p>
-      </div>
-      <div>
-        <div class="img img-5">5</div>
-        <p>Sint ad, praesentium est delectus</p>
-      </div>
-      <div>
-        <div class="img img-6">6</div>
-        <p>Neque accusamus inventore rerum</p>
-      </div>
-      <div>
-        <div class="img img-7">7</div>
-        <p>Quis deserunt quo sequi qui fugiat nobis </p>
-      </div>
-      <div>
-        <div class="img img-8">8</div>
-        <p>Laborum officiis, magnam, eos possimus </p>
+    <div class="wrapper">
+      <div class="responsive" id="myslider">
+        <div>
+          <div class="img img-1">1</div>
+          <p>Lorem ipsum dolor sit amet</p>
+        </div>
+        <div>
+          <div class="img img-2">2</div>
+          <p>Blanditiis sapiente tempora </p>
+        </div>
+        <div>
+          <div class="img img-3">3</div>
+          <p>At possimus dolorum eligendi repellat</p>
+        </div>
+        <div>
+          <div class="img img-4">4</div>
+          <p>Cumque facilis amet eos nulla</p>
+        </div>
+        <div>
+          <div class="img img-5">5</div>
+          <p>Sint ad, praesentium est delectus</p>
+        </div>
+        <div>
+          <div class="img img-6">6</div>
+          <p>Neque accusamus inventore rerum</p>
+        </div>
+        <div>
+          <div class="img img-7">7</div>
+          <p>Quis deserunt quo sequi qui fugiat nobis </p>
+        </div>
+        <div>
+          <div class="img img-8">8</div>
+          <p>Laborum officiis, magnam, eos possimus </p>
+        </div>
       </div>
     </div>
     <pre><code class="language-javascript">