vanilla-js-carousel - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

index.js

@@ -1,1 +0,1 @@
-module.exports=function(a){function v(){e&&x(),f&&A(),g&&B(),c&&H(),w(r-1,-b.offsetWidth+"px","afterBegin"),s&&E(s)}function w(a,c,d){var e=b.querySelectorAll("."+h+" > ul li")[a];e.style.marginLeft=c,b.querySelector("."+h+" > ul").removeChild(e),b.querySelector("."+h+" > ul").insertAdjacentHTML(d,e.outerHTML)}function x(){var a=document.createElement("ul");a.classList.add(k),a.addEventListener("click",z.bind(this));for(var c=0;c<r;c++){var d=document.createElement("li");d.setAttribute("data-position",c),a.appendChild(d)}b.appendChild(a),y()}function y(){switch([].forEach.call(b.querySelectorAll("."+k+" li"),function(a){a.classList.remove("active")}),t){case-1:t=r-1;break;case r:t=0;break;default:t=t}b.querySelectorAll("."+k+" li")[t].classList.add("active")}function z(a){"LI"===a.target.tagName&&E(a.target.getAttribute("data-position"))}function A(){var a=document.createElement("button");a.innerHTML=q,a.classList.add(i);var c=document.createElement("button");c.innerHTML=p,c.classList.add(j),a.addEventListener("click",F),c.addEventListener("click",G),b.appendChild(a),b.appendChild(c)}function B(){var a=document.createElement("button");a.innerHTML=n,a.classList.add(m),a.addEventListener("click",H);var c=document.createElement("button");c.innerHTML=o,c.classList.add(l),c.addEventListener("click",I),b.appendChild(a),b.appendChild(c)}function C(a){a.style.marginLeft=""}function D(a){a.style.marginLeft=-b.offsetWidth+"px"}function E(a){var b=t-a;if(0!==b)if(b<0)for(var c=0;c<-b;c++)G();else for(var d=0;d<b;d++)F()}function F(){C(b.querySelectorAll("."+h+" > ul li")[0]),w(r-1,-b.offsetWidth+"px","afterBegin"),t--,e&&y()}function G(){D(b.querySelectorAll("."+h+" > ul li")[1]),w(0,"","beforeEnd"),t++,e&&y()}function H(){u||(u=setInterval(G.bind(this),d))}function I(){clearInterval(u),u=null}function J(){return t}var b=document.getElementById(a.elem||"carousel"),c=a.autoplay||!1,d=a.interval||3e3,e=a.dots&&!0,f=a.arrows&&!0,g=a.buttons&&!0,h=a.crslClass||"js-carousel",i=a.crslArrowPrevClass||"arrow_prev",j=a.crslArrowNextClass||"arrow_next",k=a.crslDotsClass||"dots",l=a.crslButtonStopClass||"btn_stop",m=a.crslButtonPlayClass||"btn_play",n=a.btnPlayText||"Play",o=a.btnStopText||"Stop",p=a.arrNextText||"&rsaquo;",q=a.arrPrevText||"&lsaquo;",r=b.querySelectorAll("li").length,s=a.initial>=r?r:a.initial,t=0,u=null;return r>1&&v(),{live:J,show:E,prev:F,next:G,play:H,stop:I}};
+module.exports=function(t){function e(){var e={dots:function(){return r()},arrows:function(){return o()},buttons:function(){return a()},autoplay:function(){return b()},infinite:function(){return n(I-1,-S.offsetWidth+"px","afterBegin")},initial:function(){var e=t.initial>=I?I:t.initial;return s(e)}};for(var i in e)t.hasOwnProperty(i)&&t[i]&&e[i]()}function n(t,e,n){var r=S.querySelectorAll("."+j+" > ul li")[t];r.style.marginLeft=e,S.querySelector("."+j+" > ul").removeChild(r),S.querySelector("."+j+" > ul").insertAdjacentHTML(n,r.outerHTML)}function r(){var t=document.createElement("ul");t.classList.add(H),t.addEventListener("click",l.bind(this));for(var e=0;I>e;e++){var n=document.createElement("li");n.setAttribute("data-position",e),t.appendChild(n)}S.appendChild(t),i()}function i(){switch([].forEach.call(S.querySelectorAll("."+H+" li"),function(t){t.classList.remove("is-active")}),B){case-1:B=I-1;break;case I:B=0;break;default:B=B}S.querySelectorAll("."+H+" li")[B].classList.add("is-active")}function l(t){"LI"===t.target.tagName&&s(t.target.getAttribute("data-position"))}function o(){var t=document.createElement("button");t.innerHTML=T,t.classList.add(k);var e=document.createElement("button");e.innerHTML=A,e.classList.add(w),t.addEventListener("click",f),e.addEventListener("click",p),S.appendChild(t),S.appendChild(e)}function a(){var t=document.createElement("button");t.innerHTML=g,t.classList.add(P),t.addEventListener("click",b);var e=document.createElement("button");e.innerHTML=x,e.classList.add(M),e.addEventListener("click",E),S.appendChild(t),S.appendChild(e)}function u(t){t.style.marginLeft=""}function c(t){t.style.marginLeft=-S.offsetWidth+"px"}function s(t){var e=B-t;0>e?d(-e,p):d(e,f)}function d(t,e){for(var n=0;t>n;n++)e()}function f(){t.infinite?v():m()}function v(){u(document.querySelectorAll("."+j+" > ul li")[0]),n(I-1,-S.offsetWidth+"px","afterBegin"),h(-1)}function m(){E(),0!==B&&(u(document.querySelectorAll("."+j+" > ul li")[B-1]),h(-1))}function p(){t.infinite?L():y()}function L(){c(document.querySelectorAll("."+j+" > ul li")[1]),n(0,"","beforeEnd"),h(1)}function y(){return B===I-1?void E():(c(document.querySelectorAll("."+j+" > ul li")[B]),void h(1))}function h(e){B+=e,t.dots&&i()}function b(){N||(N=setInterval(p.bind(this),q))}function E(){clearInterval(N),N=null}function C(){return B}var S=document.getElementById(t.elem||"carousel"),q=t.interval||3e3,g=t.btnPlayText||"Play",x=t.btnStopText||"Stop",A=t.arrNextText||"&rsaquo;",T=t.arrPrevText||"&lsaquo;",j="js-Carousel",k="js-Carousel-arrowPrev",w="js-Carousel-arrowNext",H="js-Carousel-dots",M="js-Carousel-btnStop",P="js-Carousel-btnPlay",I=S.querySelectorAll("li").length,B=0,N=null;return I>1&&e(),{live:C,show:s,prev:f,next:p,play:b,stop:E}};

package.json

 {
   "name": "vanilla-js-carousel",
-  "version": "2.1.0",
-  "description": "Pure Javascript carousel with all the basic features in 1024 bytes (minified and gzipped).",
+  "version": "3.0.0",
+  "description": "Tiny (1Kb gzipped) JavaScript carousel with all the basic features.",
   "main": "index.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -1,8 +0,10 @@
-Vanilla Javascript Carousel
+Vanilla JavaScript Carousel
 -------
 
-[![Build Status](https://travis-ci.org/zoltantothcom/vanilla-js-carousel.svg?branch=master)](https://travis-ci.org/zoltantothcom/vanilla-js-carousel) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/vanilla-js-carousel/badge.svg?branch=master)](https://coveralls.io/github/zoltantothcom/vanilla-js-carousel?branch=master) [![Code Climate](https://codeclimate.com/github/zoltantothcom/vanilla-js-carousel/badges/gpa.svg)](https://codeclimate.com/github/zoltantothcom/vanilla-js-carousel)
+[![Build Status](https://travis-ci.org/zoltantothcom/vanilla-js-carousel.svg?branch=master)](https://travis-ci.org/zoltantothcom/vanilla-js-carousel) [![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/vanilla-js-carousel/badge.svg?branch=master)](https://coveralls.io/github/zoltantothcom/vanilla-js-carousel?branch=master) [![Code Climate](https://codeclimate.com/github/zoltantothcom/vanilla-js-carousel/badges/gpa.svg)](https://codeclimate.com/github/zoltantothcom/vanilla-js-carousel) ![Dependencies](https://img.shields.io/badge/dependencies-none-brightgreen.svg)
 
-Pure Javascript carousel with all the basic features in 1024 bytes (minified and gzipped).
+Tiny *(1Kb gzipped)* JavaScript carousel with all the basic features.
 
+[![Vanilla JavaScript Carousel](https://raw.githubusercontent.com/zoltantothcom/vanilla-js-carousel/npm/carousel.jpg)](http://zoltantothcom.github.io/vanilla-js-carousel/)
+
 *— Inspired by the blazing fast, lightweight, cross-platform and crazy popular [Vanilla JS](http://vanilla-js.com/)  framework.*
@@ -13,3 +15,3 @@
 ---
-[Carousel](http://zoltantothcom.github.io/vanilla-js-carousel "Carousel Demo")
+[**Carousel**](http://zoltantothcom.github.io/vanilla-js-carousel "Carousel Demo")
 
@@ -43,3 +45,3 @@
     ```html
-    <div class="js-carousel" id="carousel">
+    <div class="js-Carousel" id="carousel">
         <ul>
@@ -63,2 +65,3 @@ <li><img src="image-1.jpg" alt=""></li>
         autoplay: false,     // starts the rotation automatically
+        infinite: true,      // enables the infinite mode
         interval: 1500,      // interval between slide changes
@@ -90,2 +93,3 @@ initial: 0,          // slide to start with
 autoplay | boolean | false | Enables auto play of slides
+infinite | boolean | false | Enables infinite mode
 dots | boolean | true | Display navigation dots
@@ -95,12 +99,2 @@ arrows | boolean | true | Display navigation arrows (<*prev*>/<*next*>)
 
-#### CSS classes
-Option | Type | Default | Description
------- | ---- | ------- | -----------
-crslClass | string | .js-carousel | CSS class of the carousel container
-crslArrowPrevClass | string | .arrow_prev | CSS class of the <*prev*> arrow
-crslArrowNextClass | string | .arrow_next | CSS class of the <*next*> arrow
-crslDotsClass | string | .dots | CSS class of the nav dots container
-crslButtonPlayClass | string | .btn_play | CSS class of the <*play*> button
-crslButtonStopClass | string | .btn_stop | CSS class of the <*stop*> button
-
 #### Button titles
@@ -149,2 +143,2 @@ Option | Type | Default | Description
 ---
-Free. [Unlicense](http://unlicense.org).
+Free. [Unlicense](http://unlicense.org).

src/vanilla-js-carousel.js

 /**
 * @fileOverview
 * @author Zoltan Toth
-* @version 2.1.0
+* @version 3.0.0
 */
@@ -9,10 +9,12 @@
 * @description
-* Pure Javascript carousel with all the basic features just under 1024 bytes (minified and gzipped).
+* 1Kb (gzipped) pure JavaScript carousel with all the basic features.
 *
 * @class
 * @param {object} options - User defined settings for the carousel.
-* @param {string} options.elem - The HTML id of the carousel container.
-* @param {(boolean)} [options.autoplay=false] - Enables auto play of slides.
+* @param {string} options.elem [options.elem=carousel] - The HTML id of the carousel container.
+* @param {(boolean)} [options.infinite=false] - Enables infinite mode for the carousel.
+* @param {(boolean)} [options.autoplay=false] - Enables auto play for slides.
 * @param {number} [options.interval=3000] - The interval between slide change.
 * @param {number} [options.show=0] - Index of the slide to start on. Numeration begins at 0.
+*
 * @param {(boolean)} [options.dots=true] - Display navigation dots.
@@ -22,9 +24,2 @@ * @param {(boolean)} [options.arrows=true] - Display navigation arrows (PREV/NEXT).
 *
-* @param {(string)} [options.crslClass=.js-carousel] -  CSS class of the carousel container.
-* @param {(string)} [options.crslArrowPrevClass=.arrow_prev] -  CSS class of the _PREV_ arrow.
-* @param {(string)} [options.crslArrowNextClass=.arrow_next] -  CSS class of the _NEXT_ arrow.
-* @param {(string)} [options.crslDotsClass=.dots] -  CSS class of the nav dots container.
-* @param {(string)} [options.crslButtonStopClass=.btn_play] -  CSS class of the _PLAY_ button.
-* @param {(string)} [options.crslButtonPlayClass=.btn_stop] -  CSS class of the _STOP_ button.
-*
 * @param {(string)} [options.btnPlayText=Play] - Text for _PLAY_ button.
@@ -36,17 +31,5 @@ * @param {(string)} [options.btnStopText=Stop] - Text for _STOP_ button.
 module.exports = function(options) {
+    var element  = document.getElementById(options.elem || 'carousel'),
+        interval = options.interval || 3000,
 
-    var el = document.getElementById(options.elem || 'carousel'),
-        autoplay       = options.autoplay || false,
-        interval       = options.interval || 3000,
-        controlDots    = options.dots     && true,
-        controlArrows  = options.arrows   && true,
-        controlButtons = options.buttons  && true,
-
-        crslClass           = options.crslClass           || 'js-carousel',
-        crslArrowPrevClass  = options.crslArrowPrevClass  || 'arrow_prev',
-        crslArrowNextClass  = options.crslArrowNextClass  || 'arrow_next',
-        crslDotsClass       = options.crslDotsClass       || 'dots',
-        crslButtonStopClass = options.crslButtonStopClass || 'btn_stop',
-        crslButtonPlayClass = options.crslButtonPlayClass || 'btn_play',
-
         btnPlayText = options.btnPlayText || 'Play',
@@ -58,4 +41,10 @@ btnStopText = options.btnStopText || 'Stop',
 
-        count   = el.querySelectorAll('li').length,
-        initial = 0 || (options.initial >= count) ? count : options.initial,
+        crslClass           = 'js-Carousel',
+        crslArrowPrevClass  = 'js-Carousel-arrowPrev',
+        crslArrowNextClass  = 'js-Carousel-arrowNext',
+        crslDotsClass       = 'js-Carousel-dots',
+        crslButtonStopClass = 'js-Carousel-btnStop',
+        crslButtonPlayClass = 'js-Carousel-btnPlay',
+
+        count   = element.querySelectorAll('li').length,
         current = 0,
@@ -75,22 +64,31 @@ cycle   = null;
     * play/stop buttons) if needed. Start with a particular slide, if set.
-    * Move the last item to the very beginning and off the display area.
+    * If infinite - move the last item to the very beginning and off the display area.
     */
     function render() {
-        if (controlDots) {
-            showDots();
-        }
-        if (controlArrows) {
-            showArrows();
-        }
-        if (controlButtons) {
-            showButtons();
-        }
-        if (autoplay) {
-            play();
-        }
+        var actions = {
+            dots: function() {
+                return showDots();
+            },
+            arrows: function() {
+                return showArrows();
+            },
+            buttons: function() {
+                return showButtons();
+            },
+            autoplay: function() {
+                return play();
+            },
+            infinite: function() {
+                return moveItem(count - 1, -element.offsetWidth + 'px', 'afterBegin');
+            },
+            initial: function() {
+                var initial = 0 || (options.initial >= count) ? count : options.initial;
+                return show(initial);
+            }
+        };
 
-        moveItem(count - 1, -el.offsetWidth + 'px', 'afterBegin');
-
-        if (initial) {
-            show(initial);
+        for (var key in actions) {
+            if (options.hasOwnProperty(key) && options[key]) {
+                actions[key]();
+            }
         }
@@ -110,9 +108,9 @@ }
     function moveItem(i, marginLeft, position) {
-        var itemToMove = el.querySelectorAll('.' + crslClass + ' > ul li')[i];
+        var itemToMove = element.querySelectorAll('.' + crslClass + ' > ul li')[i];
         itemToMove.style.marginLeft = marginLeft;
 
-        el.querySelector('.' + crslClass + ' > ul')
+        element.querySelector('.' + crslClass + ' > ul')
           .removeChild(itemToMove);
 
-        el.querySelector('.' + crslClass + ' > ul')
+        element.querySelector('.' + crslClass + ' > ul')
           .insertAdjacentHTML(position, itemToMove.outerHTML);
@@ -136,3 +134,3 @@ }
 
-        el.appendChild(dotContainer);
+        element.appendChild(dotContainer);
         currentDot();
@@ -145,4 +143,4 @@ }
     function currentDot() {
-        [].forEach.call(el.querySelectorAll('.' + crslDotsClass + ' li'), function(item) {
-            item.classList.remove('active');
+        [].forEach.call(element.querySelectorAll('.' + crslDotsClass + ' li'), function(item) {
+            item.classList.remove('is-active');
         });
@@ -161,3 +159,3 @@
 
-        el.querySelectorAll('.' + crslDotsClass + ' li')[current].classList.add('active');
+        element.querySelectorAll('.' + crslDotsClass + ' li')[current].classList.add('is-active');
     }
@@ -188,7 +186,7 @@
 
-        buttonPrev.addEventListener('click', prev);
-        buttonNext.addEventListener('click', next);
+        buttonPrev.addEventListener('click', showPrev);
+        buttonNext.addEventListener('click', showNext);
 
-        el.appendChild(buttonPrev);
-        el.appendChild(buttonNext);
+        element.appendChild(buttonPrev);
+        element.appendChild(buttonNext);
     }
@@ -210,4 +208,4 @@
 
-        el.appendChild(buttonPlay);
-        el.appendChild(buttonStop);
+        element.appendChild(buttonPlay);
+        element.appendChild(buttonStop);
     }
@@ -231,3 +229,3 @@
     function animateNext(item) {
-        item.style.marginLeft = -el.offsetWidth + 'px';
+        item.style.marginLeft = -element.offsetWidth + 'px';
     }
@@ -244,14 +242,6 @@
 
-        if (delta === 0) {
-            return;
-        }
-
         if (delta < 0) {
-            for (var i = 0; i < -delta; i++) {
-                next();
-            }
+            moveByDelta(-delta, showNext);
         } else {
-            for (var j = 0; j < delta; j++) {
-                prev();
-            }
+            moveByDelta(delta, showPrev);
         }
@@ -261,17 +251,49 @@ }
     /**
+    * Helper to move the slides by index.
+    * 
+    * @param {number} delta - how many slides to move.
+    * @param {function} direction - function to move forward or back.
+    */
+    function moveByDelta(delta, direction) {
+        for (var i = 0; i < delta; i++) {
+            direction();
+        }
+    }
+
+    /**
     * Move the carousel back.
-    * Do the sliding, move the last item to the very beginning, highlight the 
-    * corresponding navigation dot.
     * 
     * @public
     */
-    function prev() {
-        animatePrev(el.querySelectorAll('.' + crslClass + ' > ul li')[0]);
-        moveItem(count - 1, -el.offsetWidth + 'px', 'afterBegin');
+    function showPrev() {
+        if (options.infinite) {
+            showPrevInfinite();
+        } else {
+            showPrevLinear();
+        }
+    }
 
-        current--;
+    /**
+    * Helper function to show the previous slide for INFINITE carousel.
+    * Do the sliding, move the last item to the very beginning.
+    */
+    function showPrevInfinite() {
+        animatePrev(document.querySelectorAll('.' + crslClass + ' > ul li')[0]);
+        moveItem(count - 1, -element.offsetWidth + 'px', 'afterBegin');
 
-        if (controlDots) {
-            currentDot();
+        adjustCurrent(-1);
+    }
+
+    /**
+    * Helper function to show the previous slide for LINEAR carousel.
+    * Stop the autoplay if user goes back. If on the first slide - do nothing.
+    */
+    function showPrevLinear() {
+        stop();
+        if (current === 0) {
+            return;
         }
+        animatePrev(document.querySelectorAll('.' + crslClass + ' > ul li')[current - 1]);
+        
+        adjustCurrent(-1);
     }
@@ -281,14 +303,47 @@
     * Move the carousel forward.
-    * Do the sliding, move the second item to the very end, highlight the 
-    * corresponding navigation dot.
     * 
     * @public
     */
-    function next() {
-        animateNext(el.querySelectorAll('.' + crslClass + ' > ul li')[1]);
+    function showNext() {
+        if (options.infinite) {
+            showNextInfinite();
+        } else {
+            showNextLinear();
+        }
+    }
+
+    /**
+    * Helper function to show the next slide for INFINITE carousel.
+    * Do the sliding, move the second item to the very end.
+    */
+    function showNextInfinite() {
+        animateNext(document.querySelectorAll('.' + crslClass + ' > ul li')[1]);
         moveItem(0, '', 'beforeEnd');
 
-        current++;
+        adjustCurrent(1);
+    }
 
-        if (controlDots) {
+    /**
+    * Helper function to show the next slide for LINEAR carousel.
+    * If on the last slide - stop the play and do nothing else.
+    */
+    function showNextLinear() {
+        if (current === count - 1) {
+            stop();
+            return;
+        }
+        animateNext(document.querySelectorAll('.' + crslClass + ' > ul li')[current]);
+
+        adjustCurrent(1);
+    }
+
+    /**
+    * Adjust _current_ and highlight the respective dot.
+    *
+    * @param {number} val - defines which way current should be corrected.
+    */
+    function adjustCurrent(val) {
+        current += val;
+
+        if (options.dots) {
             currentDot();
@@ -308,3 +363,3 @@ }
         }
-        cycle = setInterval(next.bind(this), interval);
+        cycle = setInterval(showNext.bind(this), interval);
     }
@@ -334,4 +389,4 @@
         'show': show,
-        'prev': prev,
-        'next': next,
+        'prev': showPrev,
+        'next': showNext,
         'play': play,
@@ -338,0 +393,0 @@ 'stop': stop

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78506

increased by235.37%

Number of package files

9

increased by28.57%

Lines of code

424

increased by13.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

138

decreased by-4.83%

No dependency changes