Skip to content

Commit

Permalink
Added global event binder
Browse files Browse the repository at this point in the history 
Fixed bug with responsive setting not
properly reverting to defaults

Draggable setting now properly respects
responsive settings
  • Loading branch information
@NickPiscitelli
NickPiscitelli committed Nov 14, 2018
1 parent f21d972 commit 56606bb
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 79 deletions.
83 changes: 54 additions & 29 deletions docs/assets/js/glider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
\___//_//_/ \_,_/ \__//_/ (_)__/ //___/
|___/
Version: 1.5.1
Version: 1.5.2
Author: Nick Piscitelli (pickykneee)
Website: https://nickpiscitelli.com
Documentation: http://nickpiscitelli.github.io/Glider.js
Expand All @@ -20,9 +20,7 @@
}(function() {
'use strict';

var Glider = window.Glider = (function() {

function Glider(element, settings) {
var Glider = window.Glider = function (element, settings) {

var _ = this;

Expand Down Expand Up @@ -65,28 +63,14 @@
_.init();

// set events
_.ele.classList.toggle('draggable', _.opt.draggable === true)
if (_.opt.draggable){
_.mouseup = function(){
_.mouseDown = undefined;
_.ele.classList.remove('drag');
}
_.ele.addEventListener('mouseup', _.mouseup);
_.ele.addEventListener('mouseleave', _.mouseup);
_.ele.addEventListener('mousedown',function(e){
_.mouseDown = e.clientX;
_.ele.classList.add('drag');
});
_.ele.addEventListener('mousemove', _.handleMouse.bind(_));
}
_.resize = _.init.bind(_, true);
_.ele.addEventListener('scroll', _.updateControls.bind(_))
window.addEventListener('resize', _.resize);
}

return Glider;

}());
_.event(_.ele, 'add', {
scroll: _.updateControls.bind(_)
});
_.event(window, 'add', {
resize: _.resize
})
};

var gliderPrototype = Glider.prototype;
gliderPrototype.init = function(refresh, paging) {
Expand Down Expand Up @@ -130,11 +114,35 @@
_.bindArrows();
_.buildDots();
_.updateControls();
_.bindDrag();
}

_.emit(refresh ? 'refresh ' : 'loaded')
};

gliderPrototype.bindDrag = function(){
var _ = this;
_.mouse = _.mouse || _.handleMouse.bind(_);

var mouseup = function(){
_.mouseDown = undefined;
_.ele.classList.remove('drag');
},
events = {
mouseup: mouseup,
mouseleave: mouseup,
mousedown: function(e){
_.mouseDown = e.clientX;
_.ele.classList.add('drag');
},
mousemove: _.mouse
};

_.ele.classList.toggle('draggable', _.opt.draggable === true)
_.event(_.ele, 'remove', events);
if (_.opt.draggable) _.event(_.ele, 'add', events);
}

gliderPrototype.buildDots = function(){
var _ = this;

Expand All @@ -154,7 +162,9 @@
var li = document.createElement(_.opt.dotTag || 'i');
li.setAttribute('data-index', i);
li.className = 'glider-dot '+(i ? '' : 'active');
li.addEventListener('click',_.scrollItem.bind(_, i, true))
_.event(li, 'add', {
click: _.scrollItem.bind(_, i, true)
})
_.dots.appendChild(li);
}
}
Expand All @@ -167,8 +177,12 @@
if (arrow){
if (typeof arrow === 'string') arrow = document.querySelector(arrow);
arrow._func = arrow._func || _.scrollItem.bind(_, direction)
arrow.removeEventListener('click', arrow._func)
arrow.addEventListener('click', arrow._func)
_.event(arrow, 'remove', {
click: arrow._func
});
_.event(arrow, 'add', {
click: arrow._func
});
_.arrows[direction] = arrow;
}
});
Expand Down Expand Up @@ -300,6 +314,8 @@
}
}
}
// set back to defaults in case they were overriden
_.opt = Object.assign({}, _._opt);
return false;
}

Expand Down Expand Up @@ -375,7 +391,9 @@
clear(replace);
[].forEach.call(replace.getElementsByTagName('*'),clear);
_.ele.parentNode.replaceChild(replace, _.ele);
window.removeEventListener('resize', _.resize);
_.event(window, 'remove', {
resize: _.resize
});
_.emit('destroy')
}

Expand All @@ -386,4 +404,11 @@
});
_.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]);
});
}
}));
12 changes: 6 additions & 6 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,9 +400,9 @@ <h2>Fractional Slides</h2>
</div>
<script>
var glider = new Glider(document.getElementById('glider-cut'), {
slidesToScroll: 1.337,
slidesToShow: 5.555,
dots: '#frac-dots',
slidesToScroll: 1,
slidesToShow: 5.5,
draggable: true,
arrows: {
prev: '#cut-prev',
next: '#cut-next'
Expand All @@ -413,8 +413,9 @@ <h2>Fractional Slides</h2>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToScroll: 1.337,
slidesToShow: 5.555,
slidesToScroll: 1,
slidesToShow: 5.5,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
Expand Down Expand Up @@ -456,7 +457,6 @@ <h2>Add/Remove Items</h2>
var glider = new Glider(document.getElementById('glider-add'), {
slidesToShow: 3,
duration: .6,
slidesToScroll: 3,
dots: '#add-dots',
arrows: {
prev: '#glider-prev-add',
Expand Down
83 changes: 54 additions & 29 deletions glider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
\___//_//_/ \_,_/ \__//_/ (_)__/ //___/
|___/
Version: 1.5.1
Version: 1.5.2
Author: Nick Piscitelli (pickykneee)
Website: https://nickpiscitelli.com
Documentation: http://nickpiscitelli.github.io/Glider.js
Expand All @@ -20,9 +20,7 @@
}(function() {
'use strict';

var Glider = window.Glider = (function() {

function Glider(element, settings) {
var Glider = window.Glider = function (element, settings) {

var _ = this;

Expand Down Expand Up @@ -65,28 +63,14 @@
_.init();

// set events
_.ele.classList.toggle('draggable', _.opt.draggable === true)
if (_.opt.draggable){
_.mouseup = function(){
_.mouseDown = undefined;
_.ele.classList.remove('drag');
}
_.ele.addEventListener('mouseup', _.mouseup);
_.ele.addEventListener('mouseleave', _.mouseup);
_.ele.addEventListener('mousedown',function(e){
_.mouseDown = e.clientX;
_.ele.classList.add('drag');
});
_.ele.addEventListener('mousemove', _.handleMouse.bind(_));
}
_.resize = _.init.bind(_, true);
_.ele.addEventListener('scroll', _.updateControls.bind(_))
window.addEventListener('resize', _.resize);
}

return Glider;

}());
_.event(_.ele, 'add', {
scroll: _.updateControls.bind(_)
});
_.event(window, 'add', {
resize: _.resize
})
};

var gliderPrototype = Glider.prototype;
gliderPrototype.init = function(refresh, paging) {
Expand Down Expand Up @@ -130,11 +114,35 @@
_.bindArrows();
_.buildDots();
_.updateControls();
_.bindDrag();
}

_.emit(refresh ? 'refresh ' : 'loaded')
};

gliderPrototype.bindDrag = function(){
var _ = this;
_.mouse = _.mouse || _.handleMouse.bind(_);

var mouseup = function(){
_.mouseDown = undefined;
_.ele.classList.remove('drag');
},
events = {
mouseup: mouseup,
mouseleave: mouseup,
mousedown: function(e){
_.mouseDown = e.clientX;
_.ele.classList.add('drag');
},
mousemove: _.mouse
};

_.ele.classList.toggle('draggable', _.opt.draggable === true)
_.event(_.ele, 'remove', events);
if (_.opt.draggable) _.event(_.ele, 'add', events);
}

gliderPrototype.buildDots = function(){
var _ = this;

Expand All @@ -154,7 +162,9 @@
var li = document.createElement(_.opt.dotTag || 'i');
li.setAttribute('data-index', i);
li.className = 'glider-dot '+(i ? '' : 'active');
li.addEventListener('click',_.scrollItem.bind(_, i, true))
_.event(li, 'add', {
click: _.scrollItem.bind(_, i, true)
})
_.dots.appendChild(li);
}
}
Expand All @@ -167,8 +177,12 @@
if (arrow){
if (typeof arrow === 'string') arrow = document.querySelector(arrow);
arrow._func = arrow._func || _.scrollItem.bind(_, direction)
arrow.removeEventListener('click', arrow._func)
arrow.addEventListener('click', arrow._func)
_.event(arrow, 'remove', {
click: arrow._func
});
_.event(arrow, 'add', {
click: arrow._func
});
_.arrows[direction] = arrow;
}
});
Expand Down Expand Up @@ -300,6 +314,8 @@
}
}
}
// set back to defaults in case they were overriden
_.opt = Object.assign({}, _._opt);
return false;
}

Expand Down Expand Up @@ -375,7 +391,9 @@
clear(replace);
[].forEach.call(replace.getElementsByTagName('*'),clear);
_.ele.parentNode.replaceChild(replace, _.ele);
window.removeEventListener('resize', _.resize);
_.event(window, 'remove', {
resize: _.resize
});
_.emit('destroy')
}

Expand All @@ -386,4 +404,11 @@
});
_.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]);
});
}
}));
Loading

0 comments on commit 56606bb

Please sign in to comment.