104 lines
2.7 KiB
JavaScript
104 lines
2.7 KiB
JavaScript
|
|
|
|
|
|
var SequenceNav = function($element) {
|
|
var _this = this;
|
|
var $element = $element;
|
|
var $wrapper = $element.find('.sequence-list-wrapper');
|
|
var $list = $element.find('#sequence-list');
|
|
var $arrows = $element.find('.sequence-nav-buttons');
|
|
var maxScroll = $list.width() - $wrapper.width() + 20;
|
|
var $leftShadow = $('<div class="left-shadow"></div>');
|
|
var $rightShadow = $('<div class="right-shadow"></div>');
|
|
var $body = $('body');
|
|
var listOrigin;
|
|
var mouseOrigin;
|
|
|
|
var startDrag = function(e) {
|
|
updateWidths();
|
|
mouseOrigin = e.pageX;
|
|
listOrigin = $list.position().left;
|
|
$body.css('-webkit-user-select', 'none');
|
|
$body.bind('mousemove', moveDrag);
|
|
$body.bind('mouseup', stopDrag);
|
|
};
|
|
|
|
var moveDrag = function(e) {
|
|
var offset = e.pageX - mouseOrigin;
|
|
var targetLeft = clamp(listOrigin + offset, -maxScroll, 0);
|
|
|
|
console.log('---------------');
|
|
console.log('offset: ' + offset);
|
|
console.log('target left: ' + targetLeft);
|
|
console.log('max: ' + maxScroll);
|
|
|
|
updateHorizontalPosition(targetLeft);
|
|
|
|
setShadows(targetLeft);
|
|
};
|
|
|
|
var stopDrag = function(e) {
|
|
$body.css('-webkit-user-select', 'auto');
|
|
$body.unbind('mousemove', moveDrag);
|
|
$body.unbind('mouseup', stopDrag);
|
|
};
|
|
|
|
var setShadows = function(left) {
|
|
var left = left || $list.position().left;
|
|
var padding = 30;
|
|
|
|
var leftPercent = clamp(-left / padding, 0, 1);
|
|
$leftShadow.css('opacity', leftPercent);
|
|
|
|
var rightPercent = clamp((maxScroll + left) / padding, 0, 1);
|
|
$rightShadow.css('opacity', rightPercent);
|
|
};
|
|
|
|
var clamp = function(val, min, max) {
|
|
if(val > max) return max;
|
|
if(val < min) return min;
|
|
return val;
|
|
};
|
|
|
|
var updateWidths = function(e) {
|
|
maxScroll = $list.width() - $wrapper.width() + 20;
|
|
var targetLeft = clamp($list.position().left, -maxScroll, 0);
|
|
updateHorizontalPosition(targetLeft);
|
|
setShadows(targetLeft);
|
|
};
|
|
|
|
var updateHorizontalPosition = function(left) {
|
|
$list.css({
|
|
'left': left + 'px'
|
|
});
|
|
};
|
|
|
|
var checkPosition = function(e) {
|
|
var $active = $element.find('.active');
|
|
if(!$active[0]) {
|
|
return;
|
|
}
|
|
if($active.position().left + $active.width() > $wrapper.width() - $list.position().left) {
|
|
$list.animate({
|
|
'left': (-$active.position().left + $wrapper.width() - $active.width() - 10) + 'px'
|
|
}, {
|
|
step: setShadows
|
|
});
|
|
} else if($active.position().left < -$list.position().left) {
|
|
$list.animate({
|
|
'left': (-$active.position().left + 10) + 'px'
|
|
}, {
|
|
step: setShadows
|
|
});
|
|
}
|
|
};
|
|
|
|
$wrapper.append($leftShadow).append($rightShadow);
|
|
setShadows(0);
|
|
$wrapper.bind('mousedown', startDrag);
|
|
$arrows.bind('click', checkPosition);
|
|
$(window).bind('resize', updateWidths);
|
|
setTimeout(function() {
|
|
checkPosition();
|
|
}, 200);
|
|
} |