1 line
8.5 KiB
JavaScript
1 line
8.5 KiB
JavaScript
/*
|
|
*
|
|
* 2011 www.g-u-i.net
|
|
*
|
|
*/
|
|
|
|
(function($){
|
|
|
|
jQuery.extend({
|
|
mouse: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
clickNScroll: {
|
|
mousedown:false,
|
|
emaX: 0,
|
|
emaY: 0,
|
|
started : false
|
|
}
|
|
});
|
|
|
|
var methods = {
|
|
init : function(options){
|
|
|
|
var settings = {
|
|
scroller:'',
|
|
allowHiliting:false,
|
|
acceleration:.65,
|
|
deceleration:.85,
|
|
decelRate:64,
|
|
reverse:false,
|
|
rightMouse:false,
|
|
allowThrowing:true,
|
|
throwOnOut:true,
|
|
stepableparent:false,
|
|
changeLimit:3,
|
|
stepInSpeed:500,
|
|
axis:false,
|
|
distance:0,
|
|
easing:'linear',
|
|
disabled : false,
|
|
started:false,
|
|
};
|
|
|
|
|
|
|
|
return this.each(function(){
|
|
var $this = $(this),
|
|
ops = $.extend({}, settings, options || {});
|
|
|
|
ops.scroller = ops.scroller != '' ? $(ops.scroller, $this) : $this;
|
|
ops.id = $this.attr('id');
|
|
|
|
$this.data("clicknscroll", ops);
|
|
|
|
if(!ops.allowHiliting) {
|
|
if (jQuery.browser.msie) {
|
|
$this.get(0).onselectstart = function () { return false; };
|
|
} else {
|
|
$this.get(0).onmousedown = function(e){e.preventDefault()}
|
|
}
|
|
}
|
|
|
|
|
|
this.addEventListener('mouseup', function(e) {
|
|
if($(this).data('clicknscroll').disabled)
|
|
return;
|
|
|
|
if($(this).hasClass('cns-scrolling')){
|
|
e.stopPropagation(); // stopPropagation to prevent mouseUp on dom children when just scrolling
|
|
$(document).trigger('mouseup');
|
|
|
|
if(ops.allowThrowing)
|
|
sling($(this));
|
|
|
|
}
|
|
|
|
$.clickNScroll.mousedown = false;
|
|
|
|
}, true); // add this event listener with addEventListener because of useCapture = true, that is impossible yet with jQuery bind() …
|
|
|
|
|
|
$this
|
|
.mousedown(function(e) {
|
|
// $this.bind('mousedown click name', function(e) {
|
|
// $.log('mousedown | $(this)',$(this));
|
|
if($(this).data('clicknscroll').disabled)
|
|
return false;
|
|
|
|
$this.stop().clearQueue();
|
|
$.clickNScroll.startX = e.pageX;
|
|
$.clickNScroll.startY = e.pageY;
|
|
$.clickNScroll.mousedown = $this;
|
|
})
|
|
.mouseout(function(e) {
|
|
if($(this).data('clicknscroll').disabled)
|
|
return;
|
|
|
|
var from = e.relatedTarget || e.toElement;
|
|
if (!from || from.nodeName == "HTML") {
|
|
if($.clickNScroll.mousedown && ops.allowThrowing && ops.throwOnOut) sling($(this));
|
|
$.clickNScroll.mousedown = false;
|
|
}
|
|
});
|
|
|
|
});
|
|
},
|
|
enable : function(){
|
|
// $.log('clickNScroll | enable | this',this);
|
|
return this.each(function() {
|
|
$(this).data('clicknscroll').disabled = false;
|
|
});
|
|
},
|
|
disable : function(){
|
|
// $.log('clickNScroll | disable | this',this);
|
|
return this.each(function() {
|
|
$(this).data('clicknscroll').disabled = true;
|
|
});
|
|
},
|
|
isStarted : function(){
|
|
return $(this).data('clicknscroll').started;
|
|
},
|
|
stop : function(){
|
|
return this.each(function() {
|
|
if(!$(this).data('clicknscroll').started){
|
|
$.clickNScroll.mousedown = false;
|
|
$(this).data('clicknscroll').started = false;
|
|
}
|
|
});
|
|
},
|
|
scrollTo : function(delta){
|
|
// $.log('scrollTo | delta = '+delta);
|
|
return this.each(function() {
|
|
$(this).data('clicknscroll').scroller.scrollLeft(delta);
|
|
});
|
|
}
|
|
};
|
|
|
|
jQuery.fn.extend({
|
|
clickNScroll: function(options) {
|
|
// Method calling logic
|
|
if ( methods[options] ) {
|
|
return methods[ options ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
|
} else if ( typeof options === 'object' || ! options ) {
|
|
return methods.init.apply( this, arguments );
|
|
} else {
|
|
$.error( 'Method ' + options + ' does not exist on jQuery.clickNScroll' );
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* sling($this)
|
|
*/
|
|
function sling($this) {
|
|
var data = $this.data("clicknscroll"),
|
|
$scroller = data.scroller,
|
|
|
|
changeX = ($.clickNScroll.emaX)*data.deceleration,
|
|
changeY = ($.clickNScroll.emaY)*data.deceleration;
|
|
|
|
if( Math.abs(changeX) > 0 && Math.abs(changeX) <= data.changeLimit && data.stepableparent) {
|
|
// $.log('ClicknScroll :: end sling X');
|
|
|
|
var scrollPos = $scroller.scrollLeft()+$scroller.width()*.5;
|
|
|
|
$(data.stepableparent, $scroller).children(':visible').each(function(i) {
|
|
var $child = $(this),
|
|
childPos = $child.position();
|
|
|
|
if(scrollPos >= childPos.left && scrollPos <= childPos.left+$child.width() ){
|
|
|
|
var stepLeft = childPos.left + $child.width()*.5 - $scroller.width()*.5;
|
|
|
|
var e = jQuery.Event('stepInLeft');
|
|
e.options = data;
|
|
e.stepIndex = i;
|
|
e.stepTarget = $child;
|
|
e.direction = changeX < 0 ? -1 : 1;
|
|
$this.trigger(e);
|
|
|
|
$scroller.animate({scrollLeft: stepLeft}, {easing:data.easing, duration:data.stepInSpeed, queue:false , complete:function() {
|
|
$this.trigger('stepedInLeft',data);
|
|
}
|
|
});
|
|
|
|
$.clickNScroll.emaX = 0;
|
|
changeX = 0;
|
|
return;
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if( Math.abs(changeY) > 0 && Math.abs(changeY) <= data.changeLimit && data.stepableparent) {
|
|
// $.log('ClicknScroll :: end sling Y');
|
|
|
|
var scrollPos = $scroller.scrollTop()+$scroller.height()*.5;
|
|
|
|
$(data.stepableparent, $scroller).children(':visible').each(function(i) {
|
|
var $child = $(this),
|
|
childPos = $child.position();
|
|
|
|
if(scrollPos >= childPos.top && scrollPos <= childPos.top+$child.height() ){
|
|
|
|
var stepTop = childPos.top + $child.height()*.5 - $scroller.height()*.5;
|
|
|
|
var e = jQuery.Event('stepInTop');
|
|
e.options = data;
|
|
e.stepIndex = i;
|
|
e.stepTarget = $child;
|
|
e.direction = changeY < 0 ? -1 : 1;
|
|
$this.trigger(e);
|
|
|
|
$scroller.animate({scrollTop: stepTop}, {easing:data.easing, duration:data.stepInSpeed, queue:false , complete:function() {
|
|
$this.trigger('stepedInTop',data);
|
|
}
|
|
});
|
|
|
|
$.clickNScroll.emaY = 0;
|
|
changeY = 0;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
if(Math.abs(changeX) < .01 && Math.abs(changeY) < .01 && $this.hasClass('cns-scrolling')){
|
|
$this.removeClass('cns-scrolling').trigger('clickNScrollStop');
|
|
return;
|
|
}
|
|
// return;
|
|
|
|
move($this, changeX, changeY);
|
|
|
|
setTimeout(function() {
|
|
sling($this);
|
|
}, 1000/data.decelRate);
|
|
|
|
};
|
|
|
|
/**
|
|
* move($scroller, changeX, changeY)
|
|
*/
|
|
function move($this, changeX, changeY) {
|
|
$.log('clicknscroll | move');
|
|
// if(!$this.data('clicknscroll').started){
|
|
// $this.trigger('clickNScrollStart').data('clicknscroll').started = true;
|
|
// }
|
|
if(!$this.hasClass('cns-scrolling')){
|
|
$this.addClass('cns-scrolling').trigger('clickNScrollStart');
|
|
}
|
|
$this.trigger('clickNScrollMove');
|
|
if(($.clickNScroll.emaX < 0 && changeX > 0) || ($.clickNScroll.emaX > 0 && changeX < 0))
|
|
$.clickNScroll.emaX = 0;
|
|
|
|
if(($.clickNScroll.emaY < 0 && changeY > 0) || ($.clickNScroll.emaY > 0 && changeY < 0))
|
|
$.clickNScroll.emaY = 0;
|
|
|
|
var ops = $this.data("clicknscroll"),
|
|
$scroller = ops.scroller,
|
|
|
|
amntX = ops.acceleration * changeX + (1 - ops.acceleration) * $.clickNScroll.emaX,
|
|
amntY = ops.acceleration * changeY + (1 - ops.acceleration) * $.clickNScroll.emaY,
|
|
|
|
scrollRight = $scroller[0].scrollWidth ? $scroller[0].scrollWidth - $scroller[0].clientWidth : $scroller[0].body.scrollWidth - $scroller[0].body.clientWidth,
|
|
scrollBottom = $scroller[0].scrollHeight ? $scroller[0].scrollHeight - $scroller[0].clientHeight : $scroller[0].body.scrollHeight - $scroller[0].body.clientHeight;
|
|
|
|
|
|
if(($scroller.scrollLeft() >= 0 && changeX >= 0) || ($scroller.scrollLeft() <= scrollRight && changeX <= 0))
|
|
$scroller.scrollLeft($scroller.scrollLeft() + (amntX));
|
|
|
|
if(($scroller.scrollTop() >= 0 && changeY >= 0) || ($scroller.scrollTop() <= scrollBottom && changeY <= 0))
|
|
$scroller.scrollTop($scroller.scrollTop() + (amntY));
|
|
|
|
$.clickNScroll.emaX = amntX;
|
|
$.clickNScroll.emaY = amntY;
|
|
};
|
|
|
|
/**
|
|
* mousemove event
|
|
*/
|
|
$(document).mousemove(function(e) {
|
|
if($.clickNScroll.mousedown) {
|
|
var $this = $.clickNScroll.mousedown,
|
|
ops = $this.data("clicknscroll");
|
|
|
|
if(ops.rightMouse && e.button != 2) return;
|
|
else if(!ops.rightMouse && e.button == 2) return;
|
|
|
|
var changeX = ops.axis != 'y' ? e.pageX - $.mouse.x : 0,
|
|
changeY = ops.axis != 'x' ? e.pageY - $.mouse.y : 0;
|
|
|
|
if(!ops.reverse) {
|
|
changeX = 0-changeX;
|
|
changeY = 0-changeY;
|
|
}
|
|
if((Math.abs($.clickNScroll.startX - e.pageX) > ops.distance && ops.axis != 'y')
|
|
|| (Math.abs($.clickNScroll.startY - e.pageY) > ops.distance && ops.axis != 'x'))
|
|
move($this, changeX, changeY);
|
|
}
|
|
$.mouse = {
|
|
x: e.pageX,
|
|
y: e.pageY
|
|
};
|
|
});
|
|
|
|
})(jQuery); |