jquery.clicknscroll.gui.js 8.5 KB

1
  1. /* * * 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);