Skip to content
Browse files

Added hoverThumbs state to options

  • Loading branch information...
1 parent f86cc67 commit 5d9850aec49a362178cc86fc4da9bca1cc3814b0 Jonathan Azoff committed Dec 11, 2011
Showing with 55 additions and 30 deletions.
  1. +4 −0 README.md
  2. +2 −1 demo.html
  3. +33 −14 jquery.overscroll.js
  4. +16 −15 jquery.overscroll.min.js
View
4 README.md
@@ -27,6 +27,8 @@ Usage
- Designates whether or not to show the scroll-bar thumbs on the scrollable container
* `options.persistThumbs` `{Boolean: false}`
- Designates whether or not to fade the thumbs in and out
+ * `options.hoverThumbs` `{Boolean: false}`
+ - Designates whether or not to fade the thumbs in and out on hover
* `options.scrollLeft` `{Integer: undefined}`
- Start the overscrolled element at a particular left offset. Defers to the browser default if not set
* `options.scrollTop` `{Integer: undefined}`
@@ -82,6 +84,8 @@ Change Log
+ <https://github.com/azoff/Overscroll/issues/33>
- Added handling of external scroll event for repositioning thumbs
+ <https://github.com/azoff/Overscroll/issues/34>
+ - Added `hoverThumbs` option to show thumbs on hover
+ + <https://github.com/azoff/Overscroll/pull/32>
* __1.5.1__
- Added CSS "grab" cursors to scrolled elements
+ <https://github.com/azoff/Overscroll/issues/31>
View
3 demo.html
@@ -229,7 +229,8 @@
$(function(o){
o = $("#overscroll").overscroll({
cancelOn: '.no-drag',
- //persistThumbs: true,
+ //hoverThumbs: true,
+ //persistThumbs: true,
//showThumbs: false,
scrollLeft: 200,
scrollTop: 100
View
47 jquery.overscroll.js
@@ -49,12 +49,13 @@
// events handled by overscroll
events: {
- wheel: "mousewheel DOMMouseScroll",
- start: "mousedown",
- drag: "mousemove",
- end: "mouseup mouseleave click",
- scroll: "scroll",
- ignored: "select dragstart drag"
+ wheel: 'mousewheel DOMMouseScroll',
+ start: 'mousedown',
+ hover: 'mouseenter mouseleave',
+ drag: 'mousemove',
+ end: 'mouseup mouseleave click',
+ scroll: 'scroll',
+ ignored: 'select dragstart drag'
},
// to save a couple bits
@@ -88,6 +89,7 @@
data.options = options = $.extend({
showThumbs: true,
persistThumbs: false,
+ hoverThumbs: false,
wheelDirection: 'vertical',
wheelDelta: o.constants.wheelDelta,
scrollDelta: o.constants.scrollDelta,
@@ -145,6 +147,10 @@
.css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
target.prepend(data.thumbs.vertical);
}
+
+ if (data.options.hoverThumbs) {
+ target.on(o.events.hover, data, o.hover);
+ }
}
@@ -192,6 +198,9 @@
if (data.thumbs.vertical) {
data.thumbs.vertical.remove();
}
+ if (data.options.hoverThumbs) {
+ target.off(o.events.hover, o.hover);
+ }
}
};
},
@@ -201,6 +210,11 @@
},
// toggles the drag mode of the target
+ hover: function (event) {
+ o.toggleThumbs(event.data, event.type === 'mouseenter');
+ },
+
+ // toggles the drag mode of the target
toggleThumbs: function (data, dragging) {
if (data.thumbs && !data.options.persistThumbs) {
if (dragging) {
@@ -373,9 +387,16 @@
},
// ends the drag operation and unbinds the mouse move handler
- stop: function (event) {
-
- var data = event.data, target = data.target, flags = data.flags;
+ stop: function (event) { var
+
+ data = event.data,
+ target = data.target,
+ flags = data.flags,
+ done = function() {
+ if (!data.options.hoverThumbs) {
+ o.toggleThumbs(data, flags.dragging = false);
+ }
+ };
target.unbind(o.events.drag, o.drag);
@@ -384,11 +405,9 @@
o.triggerEvent('dragend', data);
if (flags.dragging) {
- o.drift(this, event, function () {
- o.toggleThumbs(data, flags.dragging = false);
- });
- } else {
- o.toggleThumbs(data, false);
+ o.drift(this, event, done);
+ } else {
+ done();
}
// only if we moved, and the mouse down is the same as
View
31 jquery.overscroll.min.js
@@ -16,18 +16,19 @@
Date: Sunday, December 11th 2011
*/
-(function(i,o,f,c,p){p="ontouchstart"in i;c=f.fn.overscroll=function(a){a=a||{};return this.each(function(){c.init(f(this),a)})};f.fn.removeOverscroll=function(){return this.each(function(){var a=f(this).data(c.removerKey);f.isFunction(a)&&a()})};f.extend(c,{events:{wheel:"mousewheel DOMMouseScroll",start:"mousedown",drag:"mousemove",end:"mouseup mouseleave click",scroll:"scroll",ignored:"select dragstart drag"},div:"<div/>",removerKey:"overscroll-remover",constants:{driftFrequency:40,driftSequences:22,
-driftDecay:1.15,driftTimeout:100,timeout:400,captureThreshold:3,wheelDelta:20,scrollDelta:15,thumbThickness:6,thumbOpacity:0.7},init:function(a,b){var d={sizing:c.getSizing(a),cursors:c.getCursors(),flags:{},cleaned:{}};d.options=b=f.extend({showThumbs:true,persistThumbs:false,wheelDirection:"vertical",wheelDelta:c.constants.wheelDelta,scrollDelta:c.constants.scrollDelta,direction:"multi",cancelOn:"",zIndex:999},b);if(b.direction!=="multi"&&b.direction!==b.wheelDirection)b.wheelDirection=b.direction;
-b.scrollDelta=o.abs(b.scrollDelta);b.wheelDelta=o.abs(b.wheelDelta);a.removeOverscroll();a.data(c.removerKey,c.remover(a,d));if(p)a.css({overflow:"auto","-webkit-overflow-scrolling":"touch","-moz-overflow-scrolling":"touch","overflow-scrolling":"touch"});else{d.target=a.css({position:"relative",overflow:"hidden",cursor:d.cursors.grab}).on(c.events.wheel,d,c.wheel).on(c.events.start,d,c.start).on(c.events.end,d,c.stop).on(c.events.scroll,d,c.scroll).on(c.events.ignored,false);if(b.showThumbs){d.thumbs=
-{};if(d.sizing.container.scrollWidth>0&&b.direction!=="vertical"){d.thumbs.horizontal=f(c.div).css(c.getThumbCss(d.sizing.thumbs.horizontal,d.options.zIndex)).css({opacity:b.persistThumbs?c.constants.thumbOpacity:0});a.prepend(d.thumbs.horizontal)}if(d.sizing.container.scrollHeight>0&&b.direction!=="horizontal"){d.thumbs.vertical=f(c.div).css(c.getThumbCss(d.sizing.thumbs.vertical,d.options.zIndex)).css({opacity:b.persistThumbs?c.constants.thumbOpacity:0});a.prepend(d.thumbs.vertical)}}}b.scrollLeft&&
-a.scrollLeft(b.scrollLeft);b.scrollTop&&a.scrollTop(b.scrollTop);c.moveThumbs(d,a.scrollLeft(),a.scrollTop())},getCursors:function(){var a={};if(f.browser.mozilla){a.grab="-moz-grab";a.grabbing="-moz-grabbing"}else if(f.browser.webkit){a.grab="-webkit-grab";a.grabbing="-webkit-grabbing"}else a.grab=a.grabbing="move";return a},remover:function(a,b){return function(){a.removeAttr("style").removeData(c.removerKey).off(c.events.wheel,c.wheel).off(c.events.start,c.start).off(c.events.end,c.stop).off(c.events.ignored,
-false);if(b.thumbs){b.thumbs.horizontal&&b.thumbs.horizontal.remove();b.thumbs.vertical&&b.thumbs.vertical.remove()}}},triggerEvent:function(a,b){b.target.trigger("overscroll:"+a)},toggleThumbs:function(a,b){if(a.thumbs&&!a.options.persistThumbs)if(b){a.thumbs.vertical&&a.thumbs.vertical.stop(true,true).fadeTo("fast",c.constants.thumbOpacity);a.thumbs.horizontal&&a.thumbs.horizontal.stop(true,true).fadeTo("fast",c.constants.thumbOpacity)}else{a.thumbs.vertical&&a.thumbs.vertical.fadeTo("fast",0);
-a.thumbs.horizontal&&a.thumbs.horizontal.fadeTo("fast",0)}},setPosition:function(a,b,d){b.x=a.pageX;b.y=a.pageY;b.time=c.time();b.index=d;return b},wheel:function(a,b){var d=a.data,e=a.originalEvent;a.preventDefault();c.clearInterval(d.target);if(e.wheelDelta)b=e.wheelDelta/(i.opera?-120:120);if(e.detail)b=-e.detail/3;if(!d.wheelCapture){d.wheelCapture={timeout:null};c.toggleThumbs(d,true);d.target.stop(true,d.flags.dragging=true)}b*=d.options.wheelDelta;if(d.options.wheelDirection==="horizontal")this.scrollLeft-=
-b;else this.scrollTop-=b;c.moveThumbs(d,this.scrollLeft,this.scrollTop);d.wheelCapture.timeout&&i.clearTimeout(d.wheelCapture.timeout);d.wheelCapture.timeout=i.setTimeout(function(){c.toggleThumbs(d,d.wheelCapture=d.flags.dragging=null)},c.constants.timeout)},moveThumbs:function(a,b,d){var e,g,h;if(a.options.showThumbs){e=a.thumbs;a=a.sizing;if(e.horizontal){g=b*(1+a.container.width/a.container.scrollWidth);h=d+a.thumbs.horizontal.top;e.horizontal.css("margin",h+"px 0 0 "+g+"px")}if(e.vertical){g=
-b+a.thumbs.vertical.left;h=d*(1+a.container.height/a.container.scrollHeight);e.vertical.css("margin",h+"px 0 0 "+g+"px")}}},start:function(a){var b=a.data,d=b.target,e=b.flags;c.clearInterval(b.target);b.startTarget=f(a.target);if(!b.startTarget.is(b.options.cancelOn)){a.preventDefault();b.target.css("cursor",b.cursors.grabbing);e.dragging=e.dragged=false;d.bind(c.events.drag,b,c.drag).stop(true,true);b.position=c.setPosition(a,{});b.capture=c.setPosition(a,{},2);c.triggerEvent("dragstart",b)}},drag:function(a){a.preventDefault();
-var b=a.data,d=b.flags;d.dragged||c.toggleThumbs(b,true);d.dragged=true;if(b.options.direction!=="vertical")this.scrollLeft-=a.pageX-b.position.x;if(b.options.direction!=="horizontal")this.scrollTop-=a.pageY-b.position.y;c.moveThumbs(b,this.scrollLeft,this.scrollTop);c.setPosition(a,b.position);if(--b.capture.index<=0){d.dragging=true;c.setPosition(a,b.capture,c.constants.captureThreshold)}},time:function(){return(new Date).getTime()},deferClick:function(a){var b=a.data("events");b=b&&b.click?b.click.slice():
-false;a.unbind("click").one("mouseup",function(){b&&f.each(b,function(d,e){a.click(e)});return false})},stop:function(a){var b=a.data,d=b.flags;b.target.unbind(c.events.drag,c.drag);if(b.position){c.triggerEvent("dragend",b);d.dragging?c.drift(this,a,function(){c.toggleThumbs(b,d.dragging=false)}):c.toggleThumbs(b,false);if(d.dragged&&f(a.target).is(b.startTarget)){c.deferClick(b.startTarget);b.startTarget=d.dragged=null}b.capture=b.position=undefined}b.target.css("cursor",b.cursors.grab)},scroll:function(a){a=
-a.data;a.flags.dragging||c.moveThumbs(a,this.scrollLeft,this.scrollTop)},clearInterval:function(a){a=f(a);var b=a.data("overscroll-interval");b&&i.clearInterval(b);a.data("overscroll-interval",null)},setInterval:function(a,b){c.clearInterval(a);f(a).data("overscroll-interval",b)},drift:function(a,b,d){var e=b.data,g,h,j,k,l=a.scrollLeft,m=a.scrollTop,q=c.constants.driftDecay;if(c.time()-e.capture.time>c.constants.driftTimeout)return d.call(null,e);g=e.options.scrollDelta*(b.pageX-e.capture.x);h=e.options.scrollDelta*
-(b.pageY-e.capture.y);j=g/c.constants.driftSequences;k=h/c.constants.driftSequences;if(e.options.direction!=="vertical")l-=g;if(e.options.direction!=="horizontal")m-=h;c.triggerEvent("driftstart",b.data);c.setInterval(a,i.setInterval(function(){var n=true;if(k>1&&a.scrollTop>m||k<-1&&a.scrollTop<m){n=false;a.scrollTop-=k;k/=q}if(j>1&&a.scrollLeft>l||j<-1&&a.scrollLeft<l){n=false;a.scrollLeft-=j;j/=q}c.moveThumbs(e,a.scrollLeft,a.scrollTop);if(n){c.clearInterval(a);c.triggerEvent("driftend",e);d.call(null,
-e)}},c.constants.driftFrequency))},getSizing:function(a){var b={},d=a.get(0);a=b.container={width:a.width(),height:a.height()};a.scrollWidth=a.width>=d.scrollWidth?a.width:d.scrollWidth;a.scrollHeight=a.height>=d.scrollHeight?a.height:d.scrollHeight;b.thumbs={horizontal:{width:a.width*a.width/a.scrollWidth,height:c.constants.thumbThickness,corner:c.constants.thumbThickness/2,left:0,top:a.height-c.constants.thumbThickness},vertical:{width:c.constants.thumbThickness,height:a.height*a.height/a.scrollHeight,
-corner:c.constants.thumbThickness/2,left:a.width-c.constants.thumbThickness,top:0}};return b},getThumbCss:function(a,b){return{position:"absolute","background-color":"black",width:a.width+"px",height:a.height+"px",margin:a.top+"px 0 0 "+a.left+"px","-moz-border-radius":a.corner+"px","-webkit-border-radius":a.corner+"px","border-radius":a.corner+"px","z-index":b}}})})(window,Math,jQuery);
+(function(i,o,f,c,p){p="ontouchstart"in i;c=f.fn.overscroll=function(a){a=a||{};return this.each(function(){c.init(f(this),a)})};f.fn.removeOverscroll=function(){return this.each(function(){var a=f(this).data(c.removerKey);f.isFunction(a)&&a()})};f.extend(c,{events:{wheel:"mousewheel DOMMouseScroll",start:"mousedown",hover:"mouseenter mouseleave",drag:"mousemove",end:"mouseup mouseleave click",scroll:"scroll",ignored:"select dragstart drag"},div:"<div/>",removerKey:"overscroll-remover",constants:{driftFrequency:40,
+driftSequences:22,driftDecay:1.15,driftTimeout:100,timeout:400,captureThreshold:3,wheelDelta:20,scrollDelta:15,thumbThickness:6,thumbOpacity:0.7},init:function(a,b){var d={sizing:c.getSizing(a),cursors:c.getCursors(),flags:{},cleaned:{}};d.options=b=f.extend({showThumbs:true,persistThumbs:false,hoverThumbs:false,wheelDirection:"vertical",wheelDelta:c.constants.wheelDelta,scrollDelta:c.constants.scrollDelta,direction:"multi",cancelOn:"",zIndex:999},b);if(b.direction!=="multi"&&b.direction!==b.wheelDirection)b.wheelDirection=
+b.direction;b.scrollDelta=o.abs(b.scrollDelta);b.wheelDelta=o.abs(b.wheelDelta);a.removeOverscroll();a.data(c.removerKey,c.remover(a,d));if(p)a.css({overflow:"auto","-webkit-overflow-scrolling":"touch","-moz-overflow-scrolling":"touch","overflow-scrolling":"touch"});else{d.target=a.css({position:"relative",overflow:"hidden",cursor:d.cursors.grab}).on(c.events.wheel,d,c.wheel).on(c.events.start,d,c.start).on(c.events.end,d,c.stop).on(c.events.scroll,d,c.scroll).on(c.events.ignored,false);if(b.showThumbs){d.thumbs=
+{};if(d.sizing.container.scrollWidth>0&&b.direction!=="vertical"){d.thumbs.horizontal=f(c.div).css(c.getThumbCss(d.sizing.thumbs.horizontal,d.options.zIndex)).css({opacity:b.persistThumbs?c.constants.thumbOpacity:0});a.prepend(d.thumbs.horizontal)}if(d.sizing.container.scrollHeight>0&&b.direction!=="horizontal"){d.thumbs.vertical=f(c.div).css(c.getThumbCss(d.sizing.thumbs.vertical,d.options.zIndex)).css({opacity:b.persistThumbs?c.constants.thumbOpacity:0});a.prepend(d.thumbs.vertical)}d.options.hoverThumbs&&
+a.on(c.events.hover,d,c.hover)}}b.scrollLeft&&a.scrollLeft(b.scrollLeft);b.scrollTop&&a.scrollTop(b.scrollTop);c.moveThumbs(d,a.scrollLeft(),a.scrollTop())},getCursors:function(){var a={};if(f.browser.mozilla){a.grab="-moz-grab";a.grabbing="-moz-grabbing"}else if(f.browser.webkit){a.grab="-webkit-grab";a.grabbing="-webkit-grabbing"}else a.grab=a.grabbing="move";return a},remover:function(a,b){return function(){a.removeAttr("style").removeData(c.removerKey).off(c.events.wheel,c.wheel).off(c.events.start,
+c.start).off(c.events.end,c.stop).off(c.events.ignored,false);if(b.thumbs){b.thumbs.horizontal&&b.thumbs.horizontal.remove();b.thumbs.vertical&&b.thumbs.vertical.remove();b.options.hoverThumbs&&a.off(c.events.hover,c.hover)}}},triggerEvent:function(a,b){b.target.trigger("overscroll:"+a)},hover:function(a){c.toggleThumbs(a.data,a.type==="mouseenter")},toggleThumbs:function(a,b){if(a.thumbs&&!a.options.persistThumbs)if(b){a.thumbs.vertical&&a.thumbs.vertical.stop(true,true).fadeTo("fast",c.constants.thumbOpacity);
+a.thumbs.horizontal&&a.thumbs.horizontal.stop(true,true).fadeTo("fast",c.constants.thumbOpacity)}else{a.thumbs.vertical&&a.thumbs.vertical.fadeTo("fast",0);a.thumbs.horizontal&&a.thumbs.horizontal.fadeTo("fast",0)}},setPosition:function(a,b,d){b.x=a.pageX;b.y=a.pageY;b.time=c.time();b.index=d;return b},wheel:function(a,b){var d=a.data,e=a.originalEvent;a.preventDefault();c.clearInterval(d.target);if(e.wheelDelta)b=e.wheelDelta/(i.opera?-120:120);if(e.detail)b=-e.detail/3;if(!d.wheelCapture){d.wheelCapture=
+{timeout:null};c.toggleThumbs(d,true);d.target.stop(true,d.flags.dragging=true)}b*=d.options.wheelDelta;if(d.options.wheelDirection==="horizontal")this.scrollLeft-=b;else this.scrollTop-=b;c.moveThumbs(d,this.scrollLeft,this.scrollTop);d.wheelCapture.timeout&&i.clearTimeout(d.wheelCapture.timeout);d.wheelCapture.timeout=i.setTimeout(function(){c.toggleThumbs(d,d.wheelCapture=d.flags.dragging=null)},c.constants.timeout)},moveThumbs:function(a,b,d){var e,g,h;if(a.options.showThumbs){e=a.thumbs;a=a.sizing;
+if(e.horizontal){g=b*(1+a.container.width/a.container.scrollWidth);h=d+a.thumbs.horizontal.top;e.horizontal.css("margin",h+"px 0 0 "+g+"px")}if(e.vertical){g=b+a.thumbs.vertical.left;h=d*(1+a.container.height/a.container.scrollHeight);e.vertical.css("margin",h+"px 0 0 "+g+"px")}}},start:function(a){var b=a.data,d=b.target,e=b.flags;c.clearInterval(b.target);b.startTarget=f(a.target);if(!b.startTarget.is(b.options.cancelOn)){a.preventDefault();b.target.css("cursor",b.cursors.grabbing);e.dragging=e.dragged=
+false;d.bind(c.events.drag,b,c.drag).stop(true,true);b.position=c.setPosition(a,{});b.capture=c.setPosition(a,{},2);c.triggerEvent("dragstart",b)}},drag:function(a){a.preventDefault();var b=a.data,d=b.flags;d.dragged||c.toggleThumbs(b,true);d.dragged=true;if(b.options.direction!=="vertical")this.scrollLeft-=a.pageX-b.position.x;if(b.options.direction!=="horizontal")this.scrollTop-=a.pageY-b.position.y;c.moveThumbs(b,this.scrollLeft,this.scrollTop);c.setPosition(a,b.position);if(--b.capture.index<=
+0){d.dragging=true;c.setPosition(a,b.capture,c.constants.captureThreshold)}},time:function(){return(new Date).getTime()},deferClick:function(a){var b=a.data("events");b=b&&b.click?b.click.slice():false;a.unbind("click").one("mouseup",function(){b&&f.each(b,function(d,e){a.click(e)});return false})},stop:function(a){var b=a.data,d=b.flags,e=function(){if(!b.options.hoverThumbs)c.toggleThumbs(b,d.dragging=false)};b.target.unbind(c.events.drag,c.drag);if(b.position){c.triggerEvent("dragend",b);d.dragging?
+c.drift(this,a,e):e();if(d.dragged&&f(a.target).is(b.startTarget)){c.deferClick(b.startTarget);b.startTarget=d.dragged=null}b.capture=b.position=undefined}b.target.css("cursor",b.cursors.grab)},scroll:function(a){a=a.data;a.flags.dragging||c.moveThumbs(a,this.scrollLeft,this.scrollTop)},clearInterval:function(a){a=f(a);var b=a.data("overscroll-interval");b&&i.clearInterval(b);a.data("overscroll-interval",null)},setInterval:function(a,b){c.clearInterval(a);f(a).data("overscroll-interval",b)},drift:function(a,
+b,d){var e=b.data,g,h,j,k,l=a.scrollLeft,m=a.scrollTop,q=c.constants.driftDecay;if(c.time()-e.capture.time>c.constants.driftTimeout)return d.call(null,e);g=e.options.scrollDelta*(b.pageX-e.capture.x);h=e.options.scrollDelta*(b.pageY-e.capture.y);j=g/c.constants.driftSequences;k=h/c.constants.driftSequences;if(e.options.direction!=="vertical")l-=g;if(e.options.direction!=="horizontal")m-=h;c.triggerEvent("driftstart",b.data);c.setInterval(a,i.setInterval(function(){var n=true;if(k>1&&a.scrollTop>m||
+k<-1&&a.scrollTop<m){n=false;a.scrollTop-=k;k/=q}if(j>1&&a.scrollLeft>l||j<-1&&a.scrollLeft<l){n=false;a.scrollLeft-=j;j/=q}c.moveThumbs(e,a.scrollLeft,a.scrollTop);if(n){c.clearInterval(a);c.triggerEvent("driftend",e);d.call(null,e)}},c.constants.driftFrequency))},getSizing:function(a){var b={},d=a.get(0);a=b.container={width:a.width(),height:a.height()};a.scrollWidth=a.width>=d.scrollWidth?a.width:d.scrollWidth;a.scrollHeight=a.height>=d.scrollHeight?a.height:d.scrollHeight;b.thumbs={horizontal:{width:a.width*
+a.width/a.scrollWidth,height:c.constants.thumbThickness,corner:c.constants.thumbThickness/2,left:0,top:a.height-c.constants.thumbThickness},vertical:{width:c.constants.thumbThickness,height:a.height*a.height/a.scrollHeight,corner:c.constants.thumbThickness/2,left:a.width-c.constants.thumbThickness,top:0}};return b},getThumbCss:function(a,b){return{position:"absolute","background-color":"black",width:a.width+"px",height:a.height+"px",margin:a.top+"px 0 0 "+a.left+"px","-moz-border-radius":a.corner+
+"px","-webkit-border-radius":a.corner+"px","border-radius":a.corner+"px","z-index":b}}})})(window,Math,jQuery);

0 comments on commit 5d9850a

Please sign in to comment.
Something went wrong with that request. Please try again.