carousel2 - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+**v0.2.0** - 17/06/2016
+
+- Add fadeDuration setting
+
 **v0.1.3** - 17/06/2016
@@ -2,0 +6,0 @@

dist/carousel.js

@@ -1157,4 +1157,14 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Carousel = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+var id = 0;
 var CLS_SLIDE_HIDDEN = 'carousel-slide--hidden';
 
+/**
+ * @private
+ * @static
+ */
+function getInstanceId () {
+  return 'carousel-' + id++;
+}
+
+// @todo Move to Dom
 Dom.findAll = function findAll (root, selector) {
@@ -1168,3 +1178,2 @@ return Array.prototype.slice.call(root.querySelectorAll(selector));
  */
-
 var defaults = {
@@ -1175,2 +1184,4 @@ /** {Number} Index of active slide */
   autoRotate: true,
+  /** {Number} Duration of fade effect */
+  fadeDuration: 2000,
   /** {Number} Interval of automatic rotation */
@@ -1181,5 +1192,6 @@ interval: 5000
 /**
+ * @param {Element} target
+ * @param {Object} props
  * @class
  */
-
 function Carousel (target, props) {
@@ -1190,3 +1202,3 @@ var inst = this;
 
-  props = lang.extend({}, defaults, props);
+  props = getInitialProps(props);
 
@@ -1205,5 +1217,7 @@ /** {Array} Slides */
 
-  // ============================================================
-  // Private methods
-  // ============================================================
+  /*
+   * ------------------------------------------------------------------------------------------
+   * Private methods
+   * ------------------------------------------------------------------------------------------
+   */
 
@@ -1213,7 +1227,9 @@ /**
    */
-
   function init (target, props) {
-    nodes.root = target;
+    inst.id = getInstanceId();
 
+    nodes.container = target;
+
     parseDom();
+    setupStyles();
     bindEvents();
@@ -1230,3 +1246,2 @@ updateDom();
    */
-
   function bindEvents () {}
@@ -1237,3 +1252,2 @@
    */
-
   function animate (from, to) {
@@ -1258,10 +1272,21 @@ var prevSlide = nodes.slides[from];
       nextSlide.style.zIndex = 'auto';
-    }, 2000);
+    }, props.fadeDuration);
   }
 
   /**
+   * @private
+   */
+  function getInitialProps (props) {
+    props = lang.extend({}, defaults, props);
+
+    props.fadeDuration = parseInt(props.fadeDuration, 10);
+    props.interval = parseInt(props.interval, 10);
+
+    return props;
+  }
+
+  /**
    * @param {Number} delta
    * @private
    */
-
   function getNext (delta) {
@@ -1284,3 +1309,2 @@ var idx = state.active + delta;
    */
-
   function hideSlide (slide) {
@@ -1293,5 +1317,8 @@ slide.style.visibility = 'hidden';
    */
+  function parseDom () {
+    nodes.root = nodes.container.firstElementChild;
+    nodes.root.id = inst.id;
 
-  function parseDom () {
-    nodes.slides = Dom.findAll(nodes.root, '.carousel-slide');
+    nodes.slides = Dom.findAll(nodes.root, '[data-element="slide"]');
+
     state.count = nodes.slides.length;
@@ -1303,3 +1330,2 @@ }
    */
-
   function scheduleRotate () {
@@ -1312,3 +1338,20 @@ setTimeout(onRotateTimer, props.interval);
    */
+  function setupStyles () {
+    var elem = document.createElement('style');
+    var opacity = 'opacity ' + props.fadeDuration + 'ms;';
+    var selector = '#' + inst.id + ' .carousel-slide--hidden';
 
+    elem.innerHTML = [
+      selector + ' {',
+      '-webkit-transition: ' + opacity,
+      'transition: ' + opacity,
+      '}'
+    ].join('\n');
+
+    nodes.root.appendChild(elem);
+  }
+
+  /**
+   * @private
+   */
   function showSlide (slide) {
@@ -1321,3 +1364,2 @@ slide.style.visibility = 'visible';
    */
-
   function updateDom () {
@@ -1333,5 +1375,7 @@ lang.each(nodes.slides, function iterateSlides (slide, idx) {
 
-  // ============================================================
-  // Event handlers
-  // ============================================================
+  /*
+   * ------------------------------------------------------------------------------------------
+   * Event handlers
+   * ------------------------------------------------------------------------------------------
+   */
 
@@ -1345,5 +1389,7 @@ function onRotateTimer () {
 
-  // ============================================================
-  // Public methods
-  // ============================================================
+  /*
+   * ------------------------------------------------------------------------------------------
+   * Public methods
+   * ------------------------------------------------------------------------------------------
+   */
 
@@ -1354,3 +1400,2 @@ /**
    */
-
   inst.attachTo = function attachTo (target) {
@@ -1365,3 +1410,2 @@ nodes.target = target;
    */
-
   inst.destroy = function destroy () {
@@ -1374,6 +1418,4 @@ if (nodes.target && nodes.root && nodes.root.parentNode === nodes.target) {
   /**
-   *
    * @public
    */
-
   inst.next = function next () {
@@ -1388,3 +1430,2 @@ var prev = state.active;
    */
-
   inst.prev = function prev () {
@@ -1405,3 +1446,2 @@ var prev = state.active;
    */
-
   inst.start = function start () {
@@ -1417,3 +1457,2 @@ if (!state.autoRotate) {
    */
-
   inst.stop = function stop () {
@@ -1430,3 +1469,3 @@ state.autoRotate = false;
 
-Carousel.version = '0.1.0';
+Carousel.version = '0.2.0';
 
@@ -1433,0 +1472,0 @@ module.exports = Carousel;

package.json

 {
   "name": "carousel2",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Lightweight and fast dependency free Carousel UI component.",
@@ -5,0 +5,0 @@ "main": "./dist/carousel.js",

README.md

@@ -5,2 +5,6 @@ # carousel
 
+## Browser support
+
+- Chrome
+
 ## Build
@@ -11,1 +15,2 @@
 ```
+

src/Carousel.js

@@ -6,4 +6,14 @@ 'use strict';
 
+var id = 0;
 var CLS_SLIDE_HIDDEN = 'carousel-slide--hidden';
 
+/**
+ * @private
+ * @static
+ */
+function getInstanceId () {
+  return 'carousel-' + id++;
+}
+
+// @todo Move to Dom
 Dom.findAll = function findAll (root, selector) {
@@ -17,3 +27,2 @@ return Array.prototype.slice.call(root.querySelectorAll(selector));
  */
-
 var defaults = {
@@ -24,2 +33,4 @@ /** {Number} Index of active slide */
   autoRotate: true,
+  /** {Number} Duration of fade effect */
+  fadeDuration: 2000,
   /** {Number} Interval of automatic rotation */
@@ -30,5 +41,6 @@ interval: 5000
 /**
+ * @param {Element} target
+ * @param {Object} props
  * @class
  */
-
 function Carousel (target, props) {
@@ -39,3 +51,3 @@ var inst = this;
 
-  props = lang.extend({}, defaults, props);
+  props = getInitialProps(props);
 
@@ -54,5 +66,7 @@ /** {Array} Slides */
 
-  // ============================================================
-  // Private methods
-  // ============================================================
+  /*
+   * ------------------------------------------------------------------------------------------
+   * Private methods
+   * ------------------------------------------------------------------------------------------
+   */
 
@@ -62,7 +76,9 @@ /**
    */
-
   function init (target, props) {
-    nodes.root = target;
+    inst.id = getInstanceId();
 
+    nodes.container = target;
+
     parseDom();
+    setupStyles();
     bindEvents();
@@ -79,3 +95,2 @@ updateDom();
    */
-
   function bindEvents () {}
@@ -86,3 +101,2 @@
    */
-
   function animate (from, to) {
@@ -107,10 +121,21 @@ var prevSlide = nodes.slides[from];
       nextSlide.style.zIndex = 'auto';
-    }, 2000);
+    }, props.fadeDuration);
   }
 
   /**
+   * @private
+   */
+  function getInitialProps (props) {
+    props = lang.extend({}, defaults, props);
+
+    props.fadeDuration = parseInt(props.fadeDuration, 10);
+    props.interval = parseInt(props.interval, 10);
+
+    return props;
+  }
+
+  /**
    * @param {Number} delta
    * @private
    */
-
   function getNext (delta) {
@@ -133,3 +158,2 @@ var idx = state.active + delta;
    */
-
   function hideSlide (slide) {
@@ -142,5 +166,8 @@ slide.style.visibility = 'hidden';
    */
+  function parseDom () {
+    nodes.root = nodes.container.firstElementChild;
+    nodes.root.id = inst.id;
 
-  function parseDom () {
-    nodes.slides = Dom.findAll(nodes.root, '.carousel-slide');
+    nodes.slides = Dom.findAll(nodes.root, '[data-element="slide"]');
+
     state.count = nodes.slides.length;
@@ -152,3 +179,2 @@ }
    */
-
   function scheduleRotate () {
@@ -161,3 +187,20 @@ setTimeout(onRotateTimer, props.interval);
    */
+  function setupStyles () {
+    var elem = document.createElement('style');
+    var opacity = 'opacity ' + props.fadeDuration + 'ms;';
+    var selector = '#' + inst.id + ' .carousel-slide--hidden';
 
+    elem.innerHTML = [
+      selector + ' {',
+      '-webkit-transition: ' + opacity,
+      'transition: ' + opacity,
+      '}'
+    ].join('\n');
+
+    nodes.root.appendChild(elem);
+  }
+
+  /**
+   * @private
+   */
   function showSlide (slide) {
@@ -170,3 +213,2 @@ slide.style.visibility = 'visible';
    */
-
   function updateDom () {
@@ -182,5 +224,7 @@ lang.each(nodes.slides, function iterateSlides (slide, idx) {
 
-  // ============================================================
-  // Event handlers
-  // ============================================================
+  /*
+   * ------------------------------------------------------------------------------------------
+   * Event handlers
+   * ------------------------------------------------------------------------------------------
+   */
 
@@ -194,5 +238,7 @@ function onRotateTimer () {
 
-  // ============================================================
-  // Public methods
-  // ============================================================
+  /*
+   * ------------------------------------------------------------------------------------------
+   * Public methods
+   * ------------------------------------------------------------------------------------------
+   */
 
@@ -203,3 +249,2 @@ /**
    */
-
   inst.attachTo = function attachTo (target) {
@@ -214,3 +259,2 @@ nodes.target = target;
    */
-
   inst.destroy = function destroy () {
@@ -223,6 +267,4 @@ if (nodes.target && nodes.root && nodes.root.parentNode === nodes.target) {
   /**
-   *
    * @public
    */
-
   inst.next = function next () {
@@ -237,3 +279,2 @@ var prev = state.active;
    */
-
   inst.prev = function prev () {
@@ -254,3 +295,2 @@ var prev = state.active;
    */
-
   inst.start = function start () {
@@ -266,3 +306,2 @@ if (!state.autoRotate) {
    */
-
   inst.stop = function stop () {
@@ -279,4 +318,4 @@ state.autoRotate = false;
 
-Carousel.version = '0.1.0';
+Carousel.version = '0.2.0';
 
 module.exports = Carousel;

No alert changes

Improved metrics

Total package byte prevSize

2046517

0.14%

Lines of code

1546

6.18%

Number of lines in readme file

15

50%

No dependency changes