bulma-extensions - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

bulma-accordion/package.json

 {
   "name": "bulma-accordion",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A simple accordion extension for Bulma",
@@ -5,0 +5,0 @@ "main": "accordion.sass",

bulma-carousel/carousel.js

@@ -11,8 +11,7 @@ const MOUSE_EVENTS = ['click', 'touchstart'];
   init() {
-    this.carouselContent = this.element.querySelector('.carousel-content');
-    this.items = this.carouselContent.querySelectorAll('.carousel-item');
+    this.items = Array.from(this.element.querySelectorAll('.carousel-item'));
 
     MOUSE_EVENTS.forEach((event) => {
       this.element.querySelector('.carousel-nav-left').addEventListener(event, (e) => {
-        this.prevSlide();
+        this.move('previous');
         if (this.autoplayInterval) {
@@ -24,3 +23,3 @@ clearInterval(this.autoplayInterval);
       this.element.querySelector('.carousel-nav-right').addEventListener(event, (e) => {
-        this.nextSlide();
+        this.move('next');
         if (this.autoplayInterval) {
@@ -33,5 +32,5 @@ clearInterval(this.autoplayInterval);
 
-    this.setOrder();
+    this.initOrder();
 
-    if (this.element.dataset.autoplay && this.element.dataset.autoplay == "true") {
+    if (this.element.dataset.autoplay && this.element.dataset.autoplay == 'true') {
       this.autoPlay(this.element.dataset.delay || 5000);
@@ -41,64 +40,66 @@ }
 
-  setOrder(direction){
-    // initialize direction to change order
-    if (direction === 'previous') {
-      direction = 1;
-    } else if (direction === 'next') {
-      direction = -1;
-    }
+  initOrder() {
+    const currentActiveItem = this.element.querySelector('.carousel-item.is-active');
+    const currentActiveItemPos = this.items.indexOf(currentActiveItem);
+    const length = this.items.length;
 
-    let nbItems = this.items.length;
-    if (nbItems) {
-      [].forEach.call(this.items, function(item, index) {
-        let newValue;
-        if (item.style.order) {
-          newValue = (parseInt(item.style.order, 10) + direction) % nbItems;
-        } else {
-          newValue = ((index + 2) % nbItems);
-        }
-        if (!newValue || newValue !== 2) {
-          item.style['z-index'] = '0';
-          item.classList.remove('is-active');
-        } else {
-          item.style['z-index'] = '1';
-          item.classList.add('is-active');
-        }
-        item.style.order = newValue ? newValue : nbItems;
-      });
+    if (currentActiveItemPos) {
+      this.items.push(this.items.splice(0, currentActiveItemPos));
+    } else {
+      this.items.unshift(this.items.pop());
     }
+    this.setOrder();
   }
 
-  prevSlide(evt) {
-    // add reverse
-    this.carouselContent.classList.add('carousel-reverse');
-    // Disable transition to instant change order
-    this.carouselContent.classList.toggle('carousel-animate');
-    // Change order of element
-    // Current order 2 visible become order 1
-    this.setOrder('previous');
-
-    // Enable transition to animate order 1 to order 2
-    setTimeout(() => {
-      this.carouselContent.classList.toggle('carousel-animate');
-    }, 50);
+  setOrder() {
+    this.items.forEach((item, index) => {
+      if (index !== 1) {
+        item.style['z-index'] = '0';
+      } else {
+        item.style['z-index'] = '1';
+      }
+      item.style.order = index;
+    });
   }
 
-  nextSlide(evt) {
-    // remove reverse
-    this.carouselContent.classList.remove('carousel-reverse');
+  move(direction = 'next') {
+    if (this.items.length) {
+      const currentActiveItem = this.element.querySelector('.carousel-item.is-active');
+      let newActiveItem;
 
-    // Disable transition to instant change order
-    this.carouselContent.classList.toggle('carousel-animate');
-    // Change order of element
-    // Current order 2 visible become order 3
-    this.setOrder('next');
-    // Enable transition to animate order 3 to order 2
-    setTimeout(() => {
-      this.carouselContent.classList.toggle('carousel-animate');
-    }, 50);
-  };
+      currentActiveItem.classList.remove('is-active');
 
+      // initialize direction to change order
+      if (direction === 'previous') {
+        // Reorder items
+        this.items.unshift(this.items.pop());
+        // add reverse class
+        this.element.classList.add('is-reversing');
+      } else {
+        // Reorder items
+        this.items.push(this.items.shift());
+        // remove reverse class
+        this.element.classList.remove('is-reversing');
+      }
+
+      if (this.items.length >= 1) {
+        newActiveItem = this.items[1];
+      } else {
+        newActiveItem = this.items[0];
+      }
+      newActiveItem.classList.add('is-active');
+      this.setOrder();
+
+      // Disable transition to instant change order
+      this.element.classList.toggle('carousel-animated');
+      // Enable transition to animate order 1 to order 2
+      setTimeout(() => {
+        this.element.classList.toggle('carousel-animated');
+      }, 50);
+    }
+  }
+
   autoPlay(delay = 5000) {
     this.autoplayInterval = setInterval(() => {
-      this.nextSlide();
+      this.move('next');
     }, delay);
@@ -108,7 +109,7 @@ }
 
-document.addEventListener( 'DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function() {
   var carousels = document.querySelectorAll('.carousel, .hero-carousel');
   [].forEach.call(carousels, function(carousel) {
-      new Carousel(carousel);
+    new Carousel(carousel);
   });
 });

bulma-carousel/carousel.min.js

@@ -1,7 +0,9 @@
-var MOUSE_EVENTS=["click","touchstart"],Carousel=function(a){this.element=a;this.init()};
-Carousel.prototype.init=function(){var a=this;this.carouselContent=this.element.querySelector(".carousel-content");this.items=this.carouselContent.querySelectorAll(".carousel-item");MOUSE_EVENTS.forEach(function(b){a.element.querySelector(".carousel-nav-left").addEventListener(b,function(b){a.prevSlide();a.autoplayInterval&&(clearInterval(a.autoplayInterval),a.autoPlay(a.element.dataset.delay||5E3))},!1);a.element.querySelector(".carousel-nav-right").addEventListener(b,function(b){a.nextSlide();a.autoplayInterval&&
-(clearInterval(a.autoplayInterval),a.autoPlay(a.element.dataset.delay||5E3))},!1)});this.setOrder();this.element.dataset.autoplay&&"true"==this.element.dataset.autoplay&&this.autoPlay(this.element.dataset.delay||5E3)};
-Carousel.prototype.setOrder=function(a){"previous"===a?a=1:"next"===a&&(a=-1);var b=this.items.length;b&&[].forEach.call(this.items,function(c,e){var d;(d=c.style.order?(parseInt(c.style.order,10)+a)%b:(e+2)%b)&&2===d?(c.style["z-index"]="1",c.classList.add("is-active")):(c.style["z-index"]="0",c.classList.remove("is-active"));c.style.order=d?d:b})};
-Carousel.prototype.prevSlide=function(a){var b=this;this.carouselContent.classList.add("carousel-reverse");this.carouselContent.classList.toggle("carousel-animate");this.setOrder("previous");setTimeout(function(){b.carouselContent.classList.toggle("carousel-animate")},50)};
-Carousel.prototype.nextSlide=function(a){var b=this;this.carouselContent.classList.remove("carousel-reverse");this.carouselContent.classList.toggle("carousel-animate");this.setOrder("next");setTimeout(function(){b.carouselContent.classList.toggle("carousel-animate")},50)};Carousel.prototype.autoPlay=function(a){var b=this;this.autoplayInterval=setInterval(function(){b.nextSlide()},void 0===a?5E3:a)};
-document.addEventListener("DOMContentLoaded",function(){var a=document.querySelectorAll(".carousel, .hero-carousel");[].forEach.call(a,function(a){new Carousel(a)})});
+var $jscomp={scope:{}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(c.get||c.set)throw new TypeError("ES3 does not support getters and setters.");a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_";
+$jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};$jscomp.symbolCounter_=0;$jscomp.Symbol=function(a){return $jscomp.SYMBOL_PREFIX+(a||"")+$jscomp.symbolCounter_++};
+$jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var a=$jscomp.global.Symbol.iterator;a||(a=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[a]&&$jscomp.defineProperty(Array.prototype,a,{configurable:!0,writable:!0,value:function(){return $jscomp.arrayIterator(this)}});$jscomp.initSymbolIterator=function(){}};$jscomp.arrayIterator=function(a){var b=0;return $jscomp.iteratorPrototype(function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}})};
+$jscomp.iteratorPrototype=function(a){$jscomp.initSymbolIterator();a={next:a};a[$jscomp.global.Symbol.iterator]=function(){return this};return a};$jscomp.polyfill=function(a,b,c,d){if(b){c=$jscomp.global;a=a.split(".");for(d=0;d<a.length-1;d++){var f=a[d];f in c||(c[f]={});c=c[f]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:b})}};
+$jscomp.polyfill("Array.from",function(a){return a?a:function(a,c,d){$jscomp.initSymbolIterator();c=null!=c?c:function(a){return a};var b=[],e=a[Symbol.iterator];if("function"==typeof e)for(a=e.call(a);!(e=a.next()).done;)b.push(c.call(d,e.value));else for(var e=a.length,g=0;g<e;g++)b.push(c.call(d,a[g]));return b}},"es6-impl","es3");var MOUSE_EVENTS=["click","touchstart"],Carousel=function(a){this.element=a;this.init()};
+Carousel.prototype.init=function(){var a=this;this.items=Array.from(this.element.querySelectorAll(".carousel-item"));MOUSE_EVENTS.forEach(function(b){a.element.querySelector(".carousel-nav-left").addEventListener(b,function(b){a.move("previous");a.autoplayInterval&&(clearInterval(a.autoplayInterval),a.autoPlay(a.element.dataset.delay||5E3))},!1);a.element.querySelector(".carousel-nav-right").addEventListener(b,function(b){a.move("next");a.autoplayInterval&&(clearInterval(a.autoplayInterval),a.autoPlay(a.element.dataset.delay||
+5E3))},!1)});this.initOrder();this.element.dataset.autoplay&&"true"==this.element.dataset.autoplay&&this.autoPlay(this.element.dataset.delay||5E3)};Carousel.prototype.initOrder=function(){var a=this.element.querySelector(".carousel-item.is-active");(a=this.items.indexOf(a))?this.items.push(this.items.splice(0,a)):this.items.unshift(this.items.pop());this.setOrder()};Carousel.prototype.setOrder=function(){this.items.forEach(function(a,b){a.style["z-index"]=1!==b?"0":"1";a.style.order=b})};
+Carousel.prototype.move=function(a){a=void 0===a?"next":a;var b=this;this.items.length&&(this.element.querySelector(".carousel-item.is-active").classList.remove("is-active"),"previous"===a?(this.items.unshift(this.items.pop()),this.element.classList.add("is-reversing")):(this.items.push(this.items.shift()),this.element.classList.remove("is-reversing")),(1<=this.items.length?this.items[1]:this.items[0]).classList.add("is-active"),this.setOrder(),this.element.classList.toggle("carousel-animated"),setTimeout(function(){b.element.classList.toggle("carousel-animated")},
+50))};Carousel.prototype.autoPlay=function(a){var b=this;this.autoplayInterval=setInterval(function(){b.move("next")},void 0===a?5E3:a)};document.addEventListener("DOMContentLoaded",function(){var a=document.querySelectorAll(".carousel, .hero-carousel");[].forEach.call(a,function(a){new Carousel(a)})});

bulma-carousel/package.json

 {
   "name": "bulma-carousel",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Display a Image / Content carousel",
@@ -5,0 +5,0 @@ "main": "carousel.sass",

package.json

 {
   "name": "bulma-extensions",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Set of extensions for Bulma.io CSS Framework",
@@ -5,0 +5,0 @@ "main": "extensions.sass",

No alert changes

Improved metrics

Total package byte prevSize

506855

0.39%

Lines of code

8217

0.07%

No dependency changes