bulma-extensions
Advanced tools
Comparing version 0.6.1 to 0.6.2
{ | ||
"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", |
@@ -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); | ||
}); | ||
}); |
@@ -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)})}); |
{ | ||
"name": "bulma-carousel", | ||
"version": "0.2.8", | ||
"version": "0.2.9", | ||
"description": "Display a Image / Content carousel", | ||
@@ -5,0 +5,0 @@ "main": "carousel.sass", |
{ | ||
"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", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
506855
8217