New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

glider-js

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

glider-js - npm Package Compare versions

Comparing version 1.5.4 to 1.5.5

.editorconfig

11

docs/assets/js/main.js

@@ -27,2 +27,13 @@ /* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */

document.addEventListener('glider-loaded', hideFFScrollBars);
document.addEventListener('glider-refresh', hideFFScrollBars);
function hideFFScrollBars(e){
if(/firefox/i.test(navigator.userAgent)){
if (window.innerWidth > 575 && e.target.id !== 'glider-persp'){
e.target.parentNode.style.height = (e.target.offsetHeight - 17) + 'px'
}
}
}
(function ($) {

@@ -29,0 +40,0 @@

593

glider.js

@@ -1,2 +0,2 @@

/*
/* @preserve
_____ __ _ __ _

@@ -8,3 +8,3 @@ / ___// /(_)___/ /___ ____ (_)___

Version: 1.5.4
Version: 1.6.1
Author: Nick Piscitelli (pickykneee)

@@ -17,230 +17,282 @@ Website: https://nickpiscitelli.com

*/
;(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
typeof exports === 'object' ? module.exports = factory() :
factory();
}(function() {
'use strict';
var Glider = window.Glider = function (element, settings) {
/* global define */
var _ = this;
(function (factory) {
typeof define === 'function' && define.amd
? define(factory)
: typeof exports === 'object'
? (module.exports = factory())
: factory()
})(function () {
/* globals window:true */
window = typeof window !== 'undefined' ? window : this;
if (element._glider) return element._glider;
('use strict') // eslint-disable-line no-unused-expressions
_.ele = element
_.ele.classList.add('glider');
var Glider = (window.Glider = function (element, settings) {
var _ = this
// expose glider object to its DOM element
_.ele._glider = _
if (element._glider) return element._glider
// merge user setting with defaults
_.opt = Object.assign({}, {
_.ele = element
_.ele.classList.add('glider')
// expose glider object to its DOM element
_.ele._glider = _
// merge user setting with defaults
_.opt = Object.assign(
{},
{
slidesToScroll: 1,
slidesToShow: 1,
duration: .5,
resizeLock: true,
duration: 0.5,
// easeInQuad
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
return c * (t /= d) * t + b
}
}, settings);
},
settings
)
// set defaults
_.aIndex = _.page = _.slide = 0;
_.arrows = {};
// set defaults
_.animate_id = _.page = _.slide = 0
_.arrows = {}
// preserve original options to
// extend breakpoint settings
_._opt = _.opt;
// preserve original options to
// extend breakpoint settings
_._opt = _.opt
// create track and wrap slides
_.track = document.createElement('div');
_.track.className = 'glider-track';
_.ele.appendChild(_.track)
while (_.ele.children.length !== 1){
_.track.appendChild(_.ele.children[0])
}
// create track and wrap slides
_.track = document.createElement('div')
_.track.className = 'glider-track'
_.ele.appendChild(_.track)
while (_.ele.children.length !== 1) {
_.track.appendChild(_.ele.children[0])
}
// calculate list dimensions
_.init();
// start glider
_.init()
// set events
_.resize = _.init.bind(_, true);
_.event(_.ele, 'add', {
scroll: _.updateControls.bind(_)
});
_.event(window, 'add', {
resize: _.resize
})
};
// set events
_.resize = _.init.bind(_, true)
_.event(_.ele, 'add', {
scroll: _.updateControls.bind(_)
})
_.event(window, 'add', {
resize: _.resize
})
})
var gliderPrototype = Glider.prototype;
gliderPrototype.init = function(refresh, paging) {
var gliderPrototype = Glider.prototype
gliderPrototype.init = function (refresh, paging) {
var _ = this
var _ = this,
width = 0, height = 0;
var width = 0
var height = 0
_.slides = _.track.children;
[].forEach.call(_.slides, function(_){
_.classList.add('glider-slide');
});
[].forEach.call(_.slides, function (_) {
_.classList.add('glider-slide')
})
_.containerWidth = _.ele.clientWidth;
_.containerWidth = _.ele.clientWidth
var breakpointChanged = _.settingsBreakpoint();
if (!paging) paging = breakpointChanged;
var breakpointChanged = _.settingsBreakpoint()
if (!paging) paging = breakpointChanged
if (_.opt.slidesToShow === 'auto'){
_.opt.slidesToShow = Math.floor(_.containerWidth / _.opt.itemWidth);
if (_.opt.slidesToShow === 'auto' || _.opt._autoSlide) {
var slideCount = _.containerWidth / _.opt.itemWidth
_.opt._autoSlide = _.opt.slidesToShow = _.opt.exactWidth
? slideCount
: Math.floor(slideCount)
}
if (_.opt.slidesToScroll === 'auto'){
_.opt.slidesToScroll = _.opt.slidesToShow;
if (_.opt.slidesToScroll === 'auto') {
_.opt.slidesToScroll = Math.floor(_.opt.slidesToShow)
}
_.itemWidth = _.containerWidth / _.opt.slidesToShow;
_.itemWidth = _.opt.exactWidth
? _.opt.itemWidth
: _.containerWidth / _.opt.slidesToShow;
// set slide dimensions
[].forEach.call(_.slides, function(__){
__.style.height = 'auto';
__.style.width = _.itemWidth + 'px';
width += _.itemWidth;
height = Math.max(__.offsetHeight, height);
});
[].forEach.call(_.slides, function (__) {
__.style.height = 'auto'
__.style.width = _.itemWidth + 'px'
width += _.itemWidth
height = Math.max(__.offsetHeight, height)
})
_.track.style.width = width + 'px';
_.trackWidth = width;
_.track.style.width = width + 'px'
_.trackWidth = width
// rebuild paging controls when settings changed
if (!refresh || paging){
_.bindArrows();
_.buildDots();
_.updateControls();
_.bindDrag();
_.opt.resizeLock && _.scrollTo(_.slide * _.itemWidth, 0)
if (breakpointChanged || paging) {
_.bindArrows()
_.buildDots()
_.bindDrag()
}
_.updateControls()
_.emit(refresh ? 'refresh ' : 'loaded')
};
}
gliderPrototype.bindDrag = function(){
var _ = this;
_.mouse = _.mouse || _.handleMouse.bind(_);
gliderPrototype.bindDrag = function () {
var _ = this
_.mouse = _.mouse || _.handleMouse.bind(_)
var mouseup = function(){
_.mouseDown = undefined;
_.ele.classList.remove('drag');
var mouseup = function () {
_.mouseDown = undefined
_.ele.classList.remove('drag')
}
var events = {
mouseup: mouseup,
mouseleave: mouseup,
mousedown: function (e) {
_.mouseDown = e.clientX
_.ele.classList.add('drag')
},
events = {
mouseup: mouseup,
mouseleave: mouseup,
mousedown: function(e){
_.mouseDown = e.clientX;
_.ele.classList.add('drag');
},
mousemove: _.mouse
};
mousemove: _.mouse
}
_.ele.classList.toggle('draggable', _.opt.draggable === true)
_.event(_.ele, 'remove', events);
if (_.opt.draggable) _.event(_.ele, 'add', events);
_.event(_.ele, 'remove', events)
if (_.opt.draggable) _.event(_.ele, 'add', events)
}
gliderPrototype.buildDots = function(){
var _ = this;
gliderPrototype.buildDots = function () {
var _ = this
if (!_.opt.dots){
if (_.dots) _.dots.innerHTML = '';
return;
if (!_.opt.dots) {
if (_.dots) _.dots.innerHTML = ''
return
}
if (typeof _.opt.dots === 'string') _.dots = document.querySelector(_.opt.dots)
else _.dots = _.opt.dots
if (!_.dots) return;
if (typeof _.opt.dots === 'string') {
_.dots = document.querySelector(_.opt.dots)
} else _.dots = _.opt.dots
if (!_.dots) return
_.dots.innerHTML = '';
_.dots.className = 'glider-dots';
_.dots.innerHTML = ''
_.dots.className = 'glider-dots'
for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i){
var li = document.createElement(_.opt.dotTag || 'i');
li.setAttribute('data-index', i);
li.className = 'glider-dot '+(i ? '' : 'active');
_.event(li, 'add', {
for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i) {
var dot = document.createElement('button')
dot.dataset.index = i
dot.setAttribute('aria-label', 'Page ' + (i + 1))
dot.className = 'glider-dot ' + (i ? '' : 'active')
_.event(dot, 'add', {
click: _.scrollItem.bind(_, i, true)
})
_.dots.appendChild(li);
_.dots.appendChild(dot)
}
}
gliderPrototype.bindArrows = function(){
var _ = this;
if (!_.opt.arrows) return
['prev','next'].forEach(function(direction){
gliderPrototype.bindArrows = function () {
var _ = this
if (!_.opt.arrows) {
Object.keys(_.arrows).forEach(function (direction) {
var element = _.arrows[direction]
_.event(element, 'remove', { click: element._func })
})
return
}
['prev', 'next'].forEach(function (direction) {
var arrow = _.opt.arrows[direction]
if (arrow){
if (typeof arrow === 'string') arrow = document.querySelector(arrow);
if (arrow) {
if (typeof arrow === 'string') arrow = document.querySelector(arrow)
arrow._func = arrow._func || _.scrollItem.bind(_, direction)
_.event(arrow, 'remove', {
click: arrow._func
});
})
_.event(arrow, 'add', {
click: arrow._func
});
_.arrows[direction] = arrow;
})
_.arrows[direction] = arrow
}
});
})
}
gliderPrototype.updateControls = function(event){
gliderPrototype.updateControls = function (event) {
var _ = this
if (event && !_.opt.scrollPropagate){
event.stopPropagation();
if (event && !_.opt.scrollPropagate) {
event.stopPropagation()
}
var disableArrows = _.containerWidth >= _.trackWidth;
var disableArrows = _.containerWidth >= _.trackWidth
if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) || disableArrows)
if (!_.opt.rewind) {
if (_.arrows.prev) {
_.arrows.prev.classList.toggle(
'disabled',
_.ele.scrollLeft <= 0 || disableArrows
)
}
if (_.arrows.next) {
_.arrows.next.classList.toggle(
'disabled',
_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) ||
disableArrows
)
}
}
_.slide = Math.round(_.ele.scrollLeft / _.itemWidth);
_.page = Math.round(_.ele.scrollLeft / _.containerWidth);
_.slide = Math.round(_.ele.scrollLeft / _.itemWidth)
_.page = Math.round(_.ele.scrollLeft / _.containerWidth)
var middle = _.slide + Math.floor(Math.floor(_.opt.slidesToShow) / 2),
extraMiddle = Math.floor(_.opt.slidesToShow) % 2 ? 0 : middle + 1;
if ( Math.floor(_.opt.slidesToShow) == 1){
extraMiddle = 0;
var middle = _.slide + Math.floor(Math.floor(_.opt.slidesToShow) / 2)
var extraMiddle = Math.floor(_.opt.slidesToShow) % 2 ? 0 : middle + 1
if (Math.floor(_.opt.slidesToShow) === 1) {
extraMiddle = 0
}
if (_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)){
_.page = _.dots ? _.dots.children.length - 1 : 0;
_.slide = _.slides.length - _.opt.slidesToShow;
// the last page may be less than one half of a normal page width so
// the page is rounded down. when at the end, force the page to turn
if (_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)) {
_.page = _.dots ? _.dots.children.length - 1 : 0
}
[].forEach.call(_.slides,function(slide,index){
var
slideClasses = slide.classList,
wasVisible = slideClasses.contains('visible'),
start = _.ele.scrollLeft,
end = _.ele.scrollLeft + _.containerWidth,
itemStart = _.itemWidth * index,
itemEnd = itemStart + _.itemWidth;
[].forEach.call(_.slides, function (slide, index) {
var slideClasses = slide.classList
slideClasses.forEach(function(className){
var wasVisible = slideClasses.contains('visible')
var start = _.ele.scrollLeft
var end = _.ele.scrollLeft + _.containerWidth
var itemStart = _.itemWidth * index
var itemEnd = itemStart + _.itemWidth
slideClasses.forEach(function (className) {
/^left|right/.test(className) && slideClasses.remove(className)
});
})
slideClasses.toggle('active', _.slide === index)
if (middle == index || (extraMiddle && (extraMiddle == index))){
slideClasses.add('center');
if (middle === index || (extraMiddle && extraMiddle === index)) {
slideClasses.add('center')
} else {
slideClasses.remove('center');
slideClasses.add([
index < middle ? 'left' : 'right',
Math.abs(index - (index < middle ? middle : (extraMiddle || middle)))
].join('-'))
slideClasses.remove('center')
slideClasses.add(
[
index < middle ? 'left' : 'right',
Math.abs(index - (index < middle ? middle : extraMiddle || middle))
].join('-')
)
}
var isVisible = itemStart >= start && itemEnd <= end;
slideClasses.toggle('visible', isVisible);
if (isVisible != wasVisible){
_.emit('slide-' +(isVisible ? 'visible' : 'hidden'), {
var isVisible = itemStart >= start && itemEnd <= end
slideClasses.toggle('visible', isVisible)
if (isVisible !== wasVisible) {
_.emit('slide-' + (isVisible ? 'visible' : 'hidden'), {
slide: index

@@ -250,11 +302,13 @@ })

})
if (_.dots) [].forEach.call(_.dots.children,function(dot,index){
dot.classList.toggle('active', _.page === index)
})
if (_.dots) {
[].forEach.call(_.dots.children, function (dot, index) {
dot.classList.toggle('active', _.page === index)
})
}
if (event && _.opt.scrollLock){
clearTimeout(_.scrollLock);
_.scrollLock = setTimeout(function(){
clearTimeout(_.scrollLock);
if ((_.ele.scrollLeft / _.itemWidth) % 1){
if (event && _.opt.scrollLock) {
clearTimeout(_.scrollLock)
_.scrollLock = setTimeout(function () {
clearTimeout(_.scrollLock)
if ((_.ele.scrollLeft / _.itemWidth) % 1) {
_.scrollItem(_.round(_.ele.scrollLeft / _.itemWidth))

@@ -266,27 +320,42 @@ }

gliderPrototype.scrollItem = function(slide, dot, e){
if(e) e.preventDefault();
gliderPrototype.scrollItem = function (slide, dot, e) {
if (e) e.preventDefault()
var _ = this, originalSlide = slide;
_.aIndex++;
var _ = this
var originalSlide = slide
++_.animate_id
if (dot === true) {
slide = slide * _.containerWidth
slide = Math.round(slide / _.itemWidth) * _.itemWidth
} else {
if (typeof slide === 'string') {
var backwards = slide === 'prev';
var backwards = slide === 'prev'
// use precise location if fractional slides are on
if (_.opt.slidesToScroll % 1 || _.opt.slidesToShow % 1){
if (_.opt.slidesToScroll % 1 || _.opt.slidesToShow % 1) {
slide = _.round(_.ele.scrollLeft / _.itemWidth)
} else {
slide = _.slide;
slide = _.slide
}
if (backwards) slide -= _.opt.slidesToScroll;
else slide += _.opt.slidesToScroll;
if (backwards) slide -= _.opt.slidesToScroll
else slide += _.opt.slidesToScroll
if (_.opt.rewind) {
var scrollLeft = _.ele.scrollLeft
slide =
backwards && !scrollLeft
? _.slides.length
: !backwards &&
scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)
? 0
: slide
}
}
slide = Math.max(Math.min(slide, _.slides.length), 0)
_.slide = slide;
_.slide = slide
slide = _.itemWidth * slide

@@ -297,27 +366,36 @@ }

slide,
_.opt.duration * (Math.abs(_.ele.scrollLeft - slide)),
function() {
_.updateControls();
_.emit('animated',{
_.opt.duration * Math.abs(_.ele.scrollLeft - slide),
function () {
_.updateControls()
_.emit('animated', {
value: originalSlide,
type: typeof originalSlide === 'string' ? 'arrow' :
dot ? 'dot' : 'slide'
type:
typeof originalSlide === 'string' ? 'arrow' : dot ? 'dot' : 'slide'
})
});
}
)
return false;
return false
}
gliderPrototype.settingsBreakpoint = function(){
var _ = this, resp = _._opt.responsive;
if (resp){
for (var i = 0; i < resp.length;++i){
var size = resp[i];
if (window.innerWidth > size.breakpoint){
if (_.breakpoint != size.breakpoint){
_.opt = Object.assign({}, _._opt, size.settings);
gliderPrototype.settingsBreakpoint = function () {
var _ = this
var resp = _._opt.responsive
if (resp) {
// Sort the breakpoints in mobile first order
resp.sort(function (a, b) {
return b.breakpoint - a.breakpoint
})
for (var i = 0; i < resp.length; ++i) {
var size = resp[i]
if (window.innerWidth >= size.breakpoint) {
if (_.breakpoint !== size.breakpoint) {
_.opt = Object.assign({}, _._opt, size.settings)
_.breakpoint = size.breakpoint
return true;
return true
}
return false;
return false
}

@@ -327,32 +405,38 @@ }

// set back to defaults in case they were overriden
_.opt = Object.assign({}, _._opt);
_.breakpoint = 0;
return false;
var breakpointChanged = _.breakpoint !== 0
_.opt = Object.assign({}, _._opt)
_.breakpoint = 0
return breakpointChanged
}
gliderPrototype.scrollTo = function(scrollTarget, scrollDuration, callback) {
var
_ = this,
start = new Date().getTime(),
animateIndex = _.aIndex,
animate = function(){
var now = (new Date().getTime() - start);
_.ele.scrollLeft = _.ele.scrollLeft + (scrollTarget - _.ele.scrollLeft) * _.opt.easing(0, now, 0, 1, scrollDuration);
if(now < scrollDuration && animateIndex == _.aIndex){
window.requestAnimationFrame(animate);
} else {
_.ele.scrollLeft = scrollTarget
callback && callback.call(_)
}
};
gliderPrototype.scrollTo = function (scrollTarget, scrollDuration, callback) {
var _ = this
window.requestAnimationFrame(animate);
var start = new Date().getTime()
var animateIndex = _.animate_id
var animate = function () {
var now = new Date().getTime() - start
_.ele.scrollLeft =
_.ele.scrollLeft +
(scrollTarget - _.ele.scrollLeft) *
_.opt.easing(0, now, 0, 1, scrollDuration)
if (now < scrollDuration && animateIndex === _.animate_id) {
window.requestAnimationFrame(animate)
} else {
_.ele.scrollLeft = scrollTarget
callback && callback.call(_)
}
}
window.requestAnimationFrame(animate)
}
gliderPrototype.removeItem = function(index){
gliderPrototype.removeItem = function (index) {
var _ = this
if (_.slides.length){
_.track.removeChild(_.slides[index]);
_.refresh(true);
if (_.slides.length) {
_.track.removeChild(_.slides[index])
_.refresh(true)
_.emit('remove')

@@ -362,14 +446,15 @@ }

gliderPrototype.addItem = function(ele){
gliderPrototype.addItem = function (ele) {
var _ = this
_.track.appendChild(ele);
_.refresh(true);
_.track.appendChild(ele)
_.refresh(true)
_.emit('add')
}
gliderPrototype.handleMouse = function(e){
gliderPrototype.handleMouse = function (e) {
var _ = this
if (_.mouseDown){
_.ele.scrollLeft += (_.mouseDown - e.clientX) * (_.opt.dragVelocity || 3.3);
if (_.mouseDown) {
_.ele.scrollLeft +=
(_.mouseDown - e.clientX) * (_.opt.dragVelocity || 3.3)
_.mouseDown = e.clientX

@@ -380,24 +465,26 @@ }

// used to round to the nearest 0.XX fraction
gliderPrototype.round = function(double){
var step = (this.opt.slidesToScroll % 1) || 1;
var inv = 1.0 / step;
return Math.round(double * inv) / inv;
gliderPrototype.round = function (double) {
var _ = this
var step = _.opt.slidesToScroll % 1 || 1
var inv = 1.0 / step
return Math.round(double * inv) / inv
}
gliderPrototype.refresh = function(paging){
this.init(true, paging)
gliderPrototype.refresh = function (paging) {
var _ = this
_.init(true, paging)
}
gliderPrototype.setOption = function(opt, global){
var _ = this;
gliderPrototype.setOption = function (opt, global) {
var _ = this
if (_.breakpoint){
_._opt.responsive.forEach(function(v){
if (v.breakpoint === _.breakpoint){
if (_.breakpoint) {
_._opt.responsive.forEach(function (v) {
if (v.breakpoint === _.breakpoint) {
v.settings = Object.assign({}, v.settings, opt)
}
});
})
}
if ((!_.breakpoint) || global) {
if (!_.breakpoint || global) {
_._opt = Object.assign({}, _._opt, opt)

@@ -409,8 +496,12 @@ }

gliderPrototype.destroy = function(){
var _ = this, replace = _.ele.cloneNode(true), clear = function(ele){
ele.removeAttribute('style');
ele.classList.forEach(function(className){
gliderPrototype.destroy = function () {
var _ = this
var replace = _.ele.cloneNode(true)
var clear = function (ele) {
ele.removeAttribute('style')
ele.classList.forEach(function (className) {
/^glider/.test(className) && ele.classList.remove(className)
});
})
}

@@ -420,24 +511,28 @@ // remove track

clear(replace);
[].forEach.call(replace.getElementsByTagName('*'),clear);
_.ele.parentNode.replaceChild(replace, _.ele);
[].forEach.call(replace.getElementsByTagName('*'), clear)
_.ele.parentNode.replaceChild(replace, _.ele)
_.event(window, 'remove', {
resize: _.resize
});
})
_.emit('destroy')
}
gliderPrototype.emit = function(name, arg){
var _ = this, e = new CustomEvent('glider-'+name, {
gliderPrototype.emit = function (name, arg) {
var _ = this
var e = new window.CustomEvent('glider-' + name, {
bubbles: !_.opt.eventPropagate,
detail: arg
});
_.ele.dispatchEvent(e);
})
_.ele.dispatchEvent(e)
}
gliderPrototype.event = function(ele, type, args){
var eventHandler = ele[type+'EventListener'].bind(ele);
Object.keys(args).forEach(function(k){
eventHandler(k, args[k]);
});
gliderPrototype.event = function (ele, type, args) {
var eventHandler = ele[type + 'EventListener'].bind(ele)
Object.keys(args).forEach(function (k) {
eventHandler(k, args[k])
})
}
}));
return Glider
})

@@ -1,2 +0,2 @@

/*
/* @preserve
_____ __ _ __ _

@@ -8,3 +8,3 @@ / ___// /(_)___/ /___ ____ (_)___

Version: 1.5.4
Version: 1.6.1
Author: Nick Piscitelli (pickykneee)

@@ -17,15 +17,2 @@ Website: https://nickpiscitelli.com

*/
(function(e){"function"===typeof define&&define.amd?define(e):"object"===typeof exports?module.exports=e():e()})(function(){var e=(window.Glider=function(b,a){if(b._glider)return b._glider;this.ele=b;this.ele.classList.add("glider");this.ele._glider=this;this.opt=Object.assign({},{slidesToScroll:1,slidesToShow:1,duration:.5,easing:function(a,b,e,h,g){return h*(b/=g)*b+e}},a);this.aIndex=this.page=this.slide=0;this.arrows={};this._opt=this.opt;this.track=document.createElement("div");this.track.className=
"glider-track";for(this.ele.appendChild(this.track);1!==this.ele.children.length;)this.track.appendChild(this.ele.children[0]);this.init();this.resize=this.init.bind(this,!0);this.event(this.ele,"add",{scroll:this.updateControls.bind(this)});this.event(window,"add",{resize:this.resize})}).prototype;e.init=function(b,a){var c=this,d=0;c.slides=c.track.children;[].forEach.call(c.slides,function(a){a.classList.add("glider-slide")});c.containerWidth=c.ele.clientWidth;var e=c.settingsBreakpoint();a||(a=
e);"auto"===c.opt.slidesToShow&&(c.opt.slidesToShow=Math.floor(c.containerWidth/c.opt.itemWidth));"auto"===c.opt.slidesToScroll&&(c.opt.slidesToScroll=c.opt.slidesToShow);c.itemWidth=c.containerWidth/c.opt.slidesToShow;[].forEach.call(c.slides,function(a){a.style.height="auto";a.style.width=c.itemWidth+"px";d+=c.itemWidth});c.track.style.width=d+"px";c.trackWidth=d;if(!b||a)c.bindArrows(),c.buildDots(),c.updateControls(),c.bindDrag();c.emit(b?"refresh ":"loaded")};e.bindDrag=function(){var b=this;
b.mouse=b.mouse||b.handleMouse.bind(b);var a=function(){b.mouseDown=void 0;b.ele.classList.remove("drag")};a={mouseup:a,mouseleave:a,mousedown:function(a){b.mouseDown=a.clientX;b.ele.classList.add("drag")},mousemove:b.mouse};b.ele.classList.toggle("draggable",!0===b.opt.draggable);b.event(b.ele,"remove",a);b.opt.draggable&&b.event(b.ele,"add",a)};e.buildDots=function(){if(this.opt.dots){if(this.dots="string"===typeof this.opt.dots?document.querySelector(this.opt.dots):this.opt.dots){this.dots.innerHTML=
"";this.dots.className="glider-dots";for(var b=0;b<Math.ceil(this.slides.length/this.opt.slidesToShow);++b){var a=document.createElement(this.opt.dotTag||"i");a.setAttribute("data-index",b);a.className="glider-dot "+(b?"":"active");this.event(a,"add",{click:this.scrollItem.bind(this,b,!0)});this.dots.appendChild(a)}}}else this.dots&&(this.dots.innerHTML="")};e.bindArrows=function(){var b=this;b.opt.arrows&&["prev","next"].forEach(function(a){var c=b.opt.arrows[a];c&&("string"===typeof c&&(c=document.querySelector(c)),
c._func=c._func||b.scrollItem.bind(b,a),b.event(c,"remove",{click:c._func}),b.event(c,"add",{click:c._func}),b.arrows[a]=c)})};e.updateControls=function(b){var a=this;b&&!a.opt.scrollPropagate&&b.stopPropagation();var c=a.containerWidth>=a.trackWidth;a.arrows.prev&&a.arrows.prev.classList.toggle("disabled",0>=a.ele.scrollLeft||c);a.arrows.next&&a.arrows.next.classList.toggle("disabled",a.ele.scrollLeft+a.containerWidth>=Math.floor(a.trackWidth)||c);a.slide=Math.round(a.ele.scrollLeft/a.itemWidth);
a.page=Math.round(a.ele.scrollLeft/a.containerWidth);var d=a.slide+Math.floor(Math.floor(a.opt.slidesToShow)/2),e=Math.floor(a.opt.slidesToShow)%2?0:d+1;1==Math.floor(a.opt.slidesToShow)&&(e=0);a.ele.scrollLeft+a.containerWidth>=Math.floor(a.trackWidth)&&(a.page=a.dots?a.dots.children.length-1:0,a.slide=a.slides.length-a.opt.slidesToShow);[].forEach.call(a.slides,function(b,c){var f=b.classList,l=f.contains("visible"),g=a.ele.scrollLeft,h=a.ele.scrollLeft+a.containerWidth,k=a.itemWidth*c,m=k+a.itemWidth;
f.forEach(function(a){/^left|right/.test(a)&&f.remove(a)});f.toggle("active",a.slide===c);d==c||e&&e==c?f.add("center"):(f.remove("center"),f.add([c<d?"left":"right",Math.abs(c-(c<d?d:e||d))].join("-")));g=k>=g&&m<=h;f.toggle("visible",g);g!=l&&a.emit("slide-"+(g?"visible":"hidden"),{slide:c})});a.dots&&[].forEach.call(a.dots.children,function(b,c){b.classList.toggle("active",a.page===c)});b&&a.opt.scrollLock&&(clearTimeout(a.scrollLock),a.scrollLock=setTimeout(function(){clearTimeout(a.scrollLock);
a.ele.scrollLeft/a.itemWidth%1&&a.scrollItem(a.round(a.ele.scrollLeft/a.itemWidth))},a.opt.scrollLockDelay||250))};e.scrollItem=function(b,a,c){c&&c.preventDefault();var d=this,e=b;d.aIndex++;!0===a?b*=d.containerWidth:("string"===typeof b&&(c="prev"===b,b=d.opt.slidesToScroll%1||d.opt.slidesToShow%1?d.round(d.ele.scrollLeft/d.itemWidth):d.slide,b=c?b-d.opt.slidesToScroll:b+d.opt.slidesToScroll),b=Math.max(Math.min(b,d.slides.length),0),d.slide=b,b*=d.itemWidth);d.scrollTo(b,d.opt.duration*Math.abs(d.ele.scrollLeft-
b),function(){d.updateControls();d.emit("animated",{value:e,type:"string"===typeof e?"arrow":a?"dot":"slide"})});return!1};e.settingsBreakpoint=function(){var b=this._opt.responsive;if(b)for(var a=0;a<b.length;++a){var c=b[a];if(window.innerWidth>c.breakpoint)return this.breakpoint!=c.breakpoint?(this.opt=Object.assign({},this._opt,c.settings),this.breakpoint=c.breakpoint,!0):!1}this.opt=Object.assign({},this._opt);this.breakpoint=0;return!1};e.scrollTo=function(b,a,c){var d=this,e=(new Date).getTime(),
h=d.aIndex,g=function(){var f=(new Date).getTime()-e;d.ele.scrollLeft+=(b-d.ele.scrollLeft)*d.opt.easing(0,f,0,1,a);f<a&&h==d.aIndex?window.requestAnimationFrame(g):(d.ele.scrollLeft=b,c&&c.call(d))};window.requestAnimationFrame(g)};e.removeItem=function(b){this.slides.length&&(this.track.removeChild(this.slides[b]),this.refresh(!0),this.emit("remove"))};e.addItem=function(b){this.track.appendChild(b);this.refresh(!0);this.emit("add")};e.handleMouse=function(b){this.mouseDown&&(this.ele.scrollLeft+=
(this.mouseDown-b.clientX)*(this.opt.dragVelocity||3.3),this.mouseDown=b.clientX)};e.round=function(b){var a=1/(this.opt.slidesToScroll%1||1);return Math.round(b*a)/a};e.refresh=function(b){this.init(!0,b)};e.setOption=function(b,a){var c=this;c.breakpoint&&c._opt.responsive.forEach(function(a){a.breakpoint===c.breakpoint&&(a.settings=Object.assign({},a.settings,b))});if(!c.breakpoint||a)c._opt=Object.assign({},c._opt,b);c.opt=Object.assign({},c.opt,b)};e.destroy=function(){var b=this.ele.cloneNode(!0),
a=function(a){a.removeAttribute("style");a.classList.forEach(function(b){/^glider/.test(b)&&a.classList.remove(b)})};b.children[0].outerHTML=b.children[0].innerHTML;a(b);[].forEach.call(b.getElementsByTagName("*"),a);this.ele.parentNode.replaceChild(b,this.ele);this.event(window,"remove",{resize:this.resize});this.emit("destroy")};e.emit=function(b,a){var c=new CustomEvent("glider-"+b,{bubbles:!this.opt.eventPropagate,detail:a});this.ele.dispatchEvent(c)};e.event=function(b,a,c){var d=b[a+"EventListener"].bind(b);
Object.keys(c).forEach(function(a){d(a,c[a])})}});
!function(e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():e()}(function(){window="undefined"!=typeof window?window:this;var e=window.Glider=function(e,t){var o=this;if(e._glider)return e._glider;for(o.ele=e,o.ele.classList.add("glider"),(o.ele._glider=o).opt=Object.assign({},{slidesToScroll:1,slidesToShow:1,resizeLock:!0,duration:.5,easing:function(e,t,o,i,r){return i*(t/=r)*t+o}},t),o.animate_id=o.page=o.slide=0,o.arrows={},o._opt=o.opt,o.track=document.createElement("div"),o.track.className="glider-track",o.ele.appendChild(o.track);1!==o.ele.children.length;)o.track.appendChild(o.ele.children[0]);o.init(),o.resize=o.init.bind(o,!0),o.event(o.ele,"add",{scroll:o.updateControls.bind(o)}),o.event(window,"add",{resize:o.resize})},t=e.prototype;return t.init=function(e,t){var o=this,i=0,r=0;o.slides=o.track.children,[].forEach.call(o.slides,function(e){e.classList.add("glider-slide")}),o.containerWidth=o.ele.clientWidth;var s=o.settingsBreakpoint();if(t||(t=s),"auto"===o.opt.slidesToShow||o.opt._autoSlide){var n=o.containerWidth/o.opt.itemWidth;o.opt._autoSlide=o.opt.slidesToShow=o.opt.exactWidth?n:Math.floor(n)}"auto"===o.opt.slidesToScroll&&(o.opt.slidesToScroll=Math.floor(o.opt.slidesToShow)),o.itemWidth=o.opt.exactWidth?o.opt.itemWidth:o.containerWidth/o.opt.slidesToShow,[].forEach.call(o.slides,function(e){e.style.height="auto",e.style.width=o.itemWidth+"px",i+=o.itemWidth,r=Math.max(e.offsetHeight,r)}),o.track.style.width=i+"px",o.trackWidth=i,o.opt.resizeLock&&o.scrollTo(o.slide*o.itemWidth,0),(s||t)&&(o.bindArrows(),o.buildDots(),o.bindDrag()),o.updateControls(),o.emit(e?"refresh ":"loaded")},t.bindDrag=function(){var t=this;t.mouse=t.mouse||t.handleMouse.bind(t);var e=function(){t.mouseDown=void 0,t.ele.classList.remove("drag")},o={mouseup:e,mouseleave:e,mousedown:function(e){t.mouseDown=e.clientX,t.ele.classList.add("drag")},mousemove:t.mouse};t.ele.classList.toggle("draggable",!0===t.opt.draggable),t.event(t.ele,"remove",o),t.opt.draggable&&t.event(t.ele,"add",o)},t.buildDots=function(){var e=this;if(e.opt.dots){if("string"==typeof e.opt.dots?e.dots=document.querySelector(e.opt.dots):e.dots=e.opt.dots,e.dots){e.dots.innerHTML="",e.dots.className="glider-dots";for(var t=0;t<Math.ceil(e.slides.length/e.opt.slidesToShow);++t){var o=document.createElement("button");o.dataset.index=t,o.setAttribute("aria-label","Page "+(t+1)),o.className="glider-dot "+(t?"":"active"),e.event(o,"add",{click:e.scrollItem.bind(e,t,!0)}),e.dots.appendChild(o)}}}else e.dots&&(e.dots.innerHTML="")},t.bindArrows=function(){var o=this;o.opt.arrows?["prev","next"].forEach(function(e){var t=o.opt.arrows[e];t&&("string"==typeof t&&(t=document.querySelector(t)),t._func=t._func||o.scrollItem.bind(o,e),o.event(t,"remove",{click:t._func}),o.event(t,"add",{click:t._func}),o.arrows[e]=t)}):Object.keys(o.arrows).forEach(function(e){var t=o.arrows[e];o.event(t,"remove",{click:t._func})})},t.updateControls=function(e){var d=this;e&&!d.opt.scrollPropagate&&e.stopPropagation();var t=d.containerWidth>=d.trackWidth;d.opt.rewind||(d.arrows.prev&&d.arrows.prev.classList.toggle("disabled",d.ele.scrollLeft<=0||t),d.arrows.next&&d.arrows.next.classList.toggle("disabled",d.ele.scrollLeft+d.containerWidth>=Math.floor(d.trackWidth)||t)),d.slide=Math.round(d.ele.scrollLeft/d.itemWidth),d.page=Math.round(d.ele.scrollLeft/d.containerWidth);var c=d.slide+Math.floor(Math.floor(d.opt.slidesToShow)/2),h=Math.floor(d.opt.slidesToShow)%2?0:c+1;1===Math.floor(d.opt.slidesToShow)&&(h=0),d.ele.scrollLeft+d.containerWidth>=Math.floor(d.trackWidth)&&(d.page=d.dots?d.dots.children.length-1:0),[].forEach.call(d.slides,function(e,t){var o=e.classList,i=o.contains("visible"),r=d.ele.scrollLeft,s=d.ele.scrollLeft+d.containerWidth,n=d.itemWidth*t,l=n+d.itemWidth;o.forEach(function(e){/^left|right/.test(e)&&o.remove(e)}),o.toggle("active",d.slide===t),c===t||h&&h===t?o.add("center"):(o.remove("center"),o.add([t<c?"left":"right",Math.abs(t-(t<c?c:h||c))].join("-")));var a=r<=n&&l<=s;o.toggle("visible",a),a!==i&&d.emit("slide-"+(a?"visible":"hidden"),{slide:t})}),d.dots&&[].forEach.call(d.dots.children,function(e,t){e.classList.toggle("active",d.page===t)}),e&&d.opt.scrollLock&&(clearTimeout(d.scrollLock),d.scrollLock=setTimeout(function(){clearTimeout(d.scrollLock),d.ele.scrollLeft/d.itemWidth%1&&d.scrollItem(d.round(d.ele.scrollLeft/d.itemWidth))},d.opt.scrollLockDelay||250))},t.scrollItem=function(e,t,o){o&&o.preventDefault();var i=this,r=e;if(++i.animate_id,!0===t)e*=i.containerWidth,e=Math.round(e/i.itemWidth)*i.itemWidth;else{if("string"==typeof e){var s="prev"===e;if(e=i.opt.slidesToScroll%1||i.opt.slidesToShow%1?i.round(i.ele.scrollLeft/i.itemWidth):i.slide,s?e-=i.opt.slidesToScroll:e+=i.opt.slidesToScroll,i.opt.rewind){var n=i.ele.scrollLeft;e=s&&!n?i.slides.length:!s&&n+i.containerWidth>=Math.floor(i.trackWidth)?0:e}}e=Math.max(Math.min(e,i.slides.length),0),i.slide=e,e=i.itemWidth*e}return i.scrollTo(e,i.opt.duration*Math.abs(i.ele.scrollLeft-e),function(){i.updateControls(),i.emit("animated",{value:r,type:"string"==typeof r?"arrow":t?"dot":"slide"})}),!1},t.settingsBreakpoint=function(){var e=this,t=e._opt.responsive;if(t){t.sort(function(e,t){return t.breakpoint-e.breakpoint});for(var o=0;o<t.length;++o){var i=t[o];if(window.innerWidth>=i.breakpoint)return e.breakpoint!==i.breakpoint&&(e.opt=Object.assign({},e._opt,i.settings),e.breakpoint=i.breakpoint,!0)}}var r=0!==e.breakpoint;return e.opt=Object.assign({},e._opt),e.breakpoint=0,r},t.scrollTo=function(t,o,i){var r=this,s=(new Date).getTime(),n=r.animate_id,l=function(){var e=(new Date).getTime()-s;r.ele.scrollLeft=r.ele.scrollLeft+(t-r.ele.scrollLeft)*r.opt.easing(0,e,0,1,o),e<o&&n===r.animate_id?window.requestAnimationFrame(l):(r.ele.scrollLeft=t,i&&i.call(r))};window.requestAnimationFrame(l)},t.removeItem=function(e){var t=this;t.slides.length&&(t.track.removeChild(t.slides[e]),t.refresh(!0),t.emit("remove"))},t.addItem=function(e){this.track.appendChild(e),this.refresh(!0),this.emit("add")},t.handleMouse=function(e){var t=this;t.mouseDown&&(t.ele.scrollLeft+=(t.mouseDown-e.clientX)*(t.opt.dragVelocity||3.3),t.mouseDown=e.clientX)},t.round=function(e){var t=1/(this.opt.slidesToScroll%1||1);return Math.round(e*t)/t},t.refresh=function(e){this.init(!0,e)},t.setOption=function(t,e){var o=this;o.breakpoint&&o._opt.responsive.forEach(function(e){e.breakpoint===o.breakpoint&&(e.settings=Object.assign({},e.settings,t))}),o.breakpoint&&!e||(o._opt=Object.assign({},o._opt,t)),o.opt=Object.assign({},o.opt,t)},t.destroy=function(){var e=this,t=e.ele.cloneNode(!0),o=function(t){t.removeAttribute("style"),t.classList.forEach(function(e){/^glider/.test(e)&&t.classList.remove(e)})};t.children[0].outerHTML=t.children[0].innerHTML,o(t),[].forEach.call(t.getElementsByTagName("*"),o),e.ele.parentNode.replaceChild(t,e.ele),e.event(window,"remove",{resize:e.resize}),e.emit("destroy")},t.emit=function(e,t){var o=new window.CustomEvent("glider-"+e,{bubbles:!this.opt.eventPropagate,detail:t});this.ele.dispatchEvent(o)},t.event=function(e,t,o){var i=e[t+"EventListener"].bind(e);Object.keys(o).forEach(function(e){i(e,o[e])})},e});
{
"name": "glider-js",
"version": "1.5.4",
"version": "1.5.5",
"description": "A fast, lightweight carousel alternative",

@@ -10,2 +10,3 @@ "main": "glider.js",

"scripts": {
"start": "http-server docs/",
"test": "\"echo \\\"Error: no test specified\\\" && exit 1\""

@@ -28,3 +29,30 @@ },

},
"homepage": "https://github.com/NickPiscitelli/Glider.js#readme"
"homepage": "https://github.com/NickPiscitelli/Glider.js#readme",
"devDependencies": {
"http-server": "^0.11.1",
"husky": "1.2.0",
"lint-staged": "8.1.0",
"prettier": "1.15.2",
"standard": "12.0.1",
"uglify-js": "^3.4.9"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"linters": {
"glider.js": [
"prettier --write",
"standard --fix",
"uglifyjs --compress --mangle --comments -o glider.min.js --",
"uglifyjs --compress --mangle --comments -o docs/assets/js/glider.min.js --",
"git add glider.min.js docs/assets/js/glider.min.js"
]
},
"ignore": [
"*.min.js"
]
}
}
# Glider.js
A fast, light-weight, dependency free, responsive, native scrolling list with paging controls. (2.3kb gzipped!)
A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.8kb gzipped!)

@@ -44,10 +44,29 @@ Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/

new Glider(document.querySelector('.glider'), {
// `auto` allows automatic responsive
// width calculations
slidesToShow: 'auto',
slidesToScroll: 'auto',
itemWidth: 150,
// should have been named `itemMinWidth`
// slides grow to fit the container viewport
// ignored unless `slidesToShow` is set to `auto`
itemWidth: undefined,
// if true, slides wont be resized to fit viewport
// requires `itemWidth` to be set
// * this may cause fractional slides
exactWidth: false,
// speed aggravator - higher is slower
duration: .5,
dots: '.glider-dots',
// dot container element or selector
dots: 'CSS Selector',
// arrow container elements or selector
arrows: {
prev: '.glider-prev',
next: '.glider-next'
prev: 'CSS Selector',
// may also pass element directly
next: document.querySelector('CSS Selector')
},

@@ -76,4 +95,6 @@

// Force centering slide after resize event
resizeLock: true,
// Glider.js breakpoints are mobile-first
// be conscious of your ordering
responsive: [

@@ -133,2 +154,38 @@ {

#### Native Scrollbars
Since Glider.js uses native scrolling, the browser wants to apply the standard scrollbar to the glider. In most cases, this is fine since the scrollbar can be hidden with CSS and Glider.js does so when appropriate. In browsers such as Firefox though, the scrollbars cannot be hidden with CSS and require additional markup to hide.
To hide the scrollbars in Firefox, you'll want to wrap your glider with `<div class="glider-wrap">` and apply the following CSS/JS:
```css
@-moz-document url-prefix() {
.glider-track {
margin-bottom: 17px;
}
.glider-wrap {
overflow: hidden;
}
}
```
```javascript
document.addEventListener('glider-loaded', hideFFScrollBars);
document.addEventListener('glider-refresh', hideFFScrollBars);
function hideFFScrollBars(e){
var scrollbarHeight = 17; // Currently 17, may change with updates
if(/firefox/i.test(navigator.userAgent)){
// We only need to appy to desktop. Firefox for mobile uses
// a different rendering engine (WebKit)
if (window.innerWidth > 575){
e.target.parentNode.style.height = (e.target.offsetHeight - scrollbarHeight) + 'px'
}
}
}
```
#### Packages using Glider.js :rocket:
- [react-glider](https://www.npmjs.com/package/react-glider) - A react wrapper for Glider.js written in typescript.
#### Dependencies

@@ -135,0 +192,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc