Permalink
Browse files

Fixed issues 33 and 34

  • Loading branch information...
1 parent 1ed99ab commit 0a109dd8d5dac006c1ea3001127e4991df748274 @coeamyd coeamyd committed Dec 7, 2011
Showing with 31 additions and 27 deletions.
  1. +10 −3 README.md
  2. +18 −7 jquery.overscroll.js
  3. +3 −17 jquery.overscroll.min.js
View
@@ -1,6 +1,6 @@
-Overscroll v1.5.1
-=================
-Thursday, November 24th 2011 (Gobble Gobble)
+Overscroll v1.5.1.1
+===================
+Wednesday, December 7th 2011
Overscroll is a jQuery Plugin that emulates the iPhone scrolling experience in a browser. It is intended for use with the latest version of jQuery
<http://code.jquery.com/jquery-latest.js>
@@ -41,6 +41,8 @@ Usage
- The amount of drift to apply per mouse wheel 'tick'
* `options.scrollDelta` `{Number: 5.7}`
- The amount of drift to apply per drag interval
+ * `options.zIndex` `{Number: 999}`
+ - The z-index applied to the thumb elements
`$(selector).removeOverscroll();`
@@ -75,6 +77,11 @@ As of 1.4.4 you can call the `overscroll` constructor on a jQuery element as muc
Change Log
----------
+ * __1.5.1.1__
+ - Added zIndex option for configuring thumb elements' z-index
+ + <https://github.com/azoff/Overscroll/issues/33>
+ - Added handling of external scroll event for repositioning thumbs
+ + <https://github.com/azoff/Overscroll/issues/34>
* __1.5.1__
- Added CSS "grab" cursors to scrolled elements
+ <https://github.com/azoff/Overscroll/issues/31>
View
@@ -1,5 +1,5 @@
/**@license
- * Overscroll v1.5.1
+ * Overscroll v1.5.1.1
* A jQuery Plugin that emulates the iPhone scrolling experience in a browser.
* http://azoffdesign.com/overscroll
*
@@ -13,7 +13,7 @@
* For API documentation, see the README file
* http://azof.fr/pYCzuM
*
- * Date: Thursday, November 24th 2011 (Gobble Gobble)
+ * Date: Wednesday, December 7th 2011
*/
/*jslint onevar: true, strict: true */
@@ -53,6 +53,7 @@
start: "mousedown",
drag: "mousemove",
end: "mouseup mouseleave click",
+ scroll: "scroll",
ignored: "select dragstart drag"
},
@@ -91,7 +92,8 @@
wheelDelta: o.constants.wheelDelta,
scrollDelta: o.constants.scrollDelta,
direction: 'multi',
- cancelOn: ''
+ cancelOn: '',
+ zIndex: 999
}, options);
// check for inconsistent directional restrictions
@@ -125,20 +127,21 @@
}).on(o.events.wheel, data, o.wheel)
.on(o.events.start, data, o.start)
.on(o.events.end, data, o.stop)
+ .on(o.events.scroll, data, o.scroll)
.on(o.events.ignored, false);
if (options.showThumbs) {
data.thumbs = {};
if (data.sizing.container.scrollWidth > 0 && options.direction !== 'vertical') {
- data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal))
+ data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal, data.options.zIndex))
.css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
target.prepend(data.thumbs.horizontal);
}
if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
- data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical))
+ data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical, data.options.zIndex))
.css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
target.prepend(data.thumbs.vertical);
}
@@ -402,6 +405,14 @@
data.target.css('cursor', data.cursors.grab);
},
+
+ scroll: function (event) {
+ var data = event.data, flags = data.flags;
+
+ if (!flags.dragging) {
+ o.moveThumbs(data, this.scrollLeft, this.scrollTop);
+ }
+ },
clearInterval: function (target) {
target = $(target);
@@ -506,7 +517,7 @@
},
// gets the CSS object for a thumb
- getThumbCss: function (size) {
+ getThumbCss: function (size, zIndex) {
return {
position: "absolute",
@@ -517,7 +528,7 @@
"-moz-border-radius": size.corner + "px",
"-webkit-border-radius": size.corner + "px",
"border-radius": size.corner + "px",
- "z-index": "999"
+ "z-index": zIndex
};
}
@@ -1,6 +1,6 @@
/*
- Overscroll v1.5.1
+ Overscroll v1.5.1.1
A jQuery Plugin that emulates the iPhone scrolling experience in a browser.
http://azoffdesign.com/overscroll
@@ -14,20 +14,6 @@
For API documentation, see the README file
http://azof.fr/pYCzuM
- Date: Thursday, November 24th 2011 (Gobble Gobble)
+ Date: Wednesday, December 7th 2011
*/
-(function(h,i,e,c,n){n="ontouchstart"in h;c=e.fn.overscroll=function(a){a=a||{};return this.each(function(){c.init(e(this),a)})};e.fn.removeOverscroll=function(){return this.each(function(){var a=e(this).data(c.removerKey);e.isFunction(a)&&a()})};e.extend(c,{events:{wheel:"mousewheel DOMMouseScroll",start:"mousedown",drag:"mousemove",end:"mouseup mouseleave click",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=e.extend({showThumbs:!0,persistThumbs:!1,wheelDirection:"vertical",wheelDelta:c.constants.wheelDelta,scrollDelta:c.constants.scrollDelta,direction:"multi",cancelOn:""},b);if(b.direction!=="multi"&&b.direction!==b.wheelDirection)b.wheelDirection=b.direction;b.scrollDelta=i.abs(b.scrollDelta);
-b.wheelDelta=i.abs(b.wheelDelta);a.removeOverscroll();a.data(c.removerKey,c.remover(a,d));if(n)a.css({overflow:"auto","-webkit-overflow-scrolling":"touch","-moz-overflow-scrolling":"touch","overflow-scrolling":"touch"});else if(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.ignored,!1),b.showThumbs){d.thumbs={};if(d.sizing.container.scrollWidth>0&&b.direction!=="vertical")d.thumbs.horizontal=
-e(c.div).css(c.getThumbCss(d.sizing.thumbs.horizontal)).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=e(c.div).css(c.getThumbCss(d.sizing.thumbs.vertical)).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=
-{};e.browser.mozilla?(a.grab="-moz-grab",a.grabbing="-moz-grabbing"):e.browser.webkit?(a.grab="-webkit-grab",a.grabbing="-webkit-grabbing"):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,!1);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){a.thumbs&&!a.options.persistThumbs&&(b?(a.thumbs.vertical&&a.thumbs.vertical.stop(!0,!0).fadeTo("fast",c.constants.thumbOpacity),a.thumbs.horizontal&&a.thumbs.horizontal.stop(!0,!0).fadeTo("fast",c.constants.thumbOpacity)):(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,f=a.originalEvent;a.preventDefault();c.clearInterval(d.target);f.wheelDelta&&(b=f.wheelDelta/(h.opera?-120:120));f.detail&&(b=-f.detail/3);if(!d.wheelCapture)d.wheelCapture={timeout:null},c.toggleThumbs(d,!0),d.target.stop(!0,d.flags.dragging=!0);b*=d.options.wheelDelta;d.options.wheelDirection==="horizontal"?this.scrollLeft-=b:this.scrollTop-=b;c.moveThumbs(d,this.scrollLeft,this.scrollTop);d.wheelCapture.timeout&&h.clearTimeout(d.wheelCapture.timeout);d.wheelCapture.timeout=h.setTimeout(function(){c.toggleThumbs(d,
-d.wheelCapture=d.flags.dragging=null)},c.constants.timeout)},moveThumbs:function(a,b,c){var f,e,g;if(a.options.showThumbs)f=a.thumbs,a=a.sizing,f.horizontal&&(e=b*(1+a.container.width/a.container.scrollWidth),g=c+a.thumbs.horizontal.top,f.horizontal.css("margin",g+"px 0 0 "+e+"px")),f.vertical&&(e=b+a.thumbs.vertical.left,g=c*(1+a.container.height/a.container.scrollHeight),f.vertical.css("margin",g+"px 0 0 "+e+"px"))},start:function(a){var b=a.data,d=b.target,f=b.flags;c.clearInterval(b.target);b.startTarget=
-e(a.target);if(!b.startTarget.is(b.options.cancelOn))a.preventDefault(),b.target.css("cursor",b.cursors.grabbing),f.dragging=f.dragged=!1,d.bind(c.events.drag,b,c.drag).stop(!0,!0),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,!0);d.dragged=!0;b.options.direction!=="vertical"&&(this.scrollLeft-=a.pageX-b.position.x);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=!0,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():!1;a.unbind("click").one("mouseup",function(){b&&e.each(b,function(b,c){a.click(c)});return!1})},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=!1)}):c.toggleThumbs(b,!1);if(d.dragged&&e(a.target).is(b.startTarget))c.deferClick(b.startTarget),b.startTarget=d.dragged=null;b.capture=b.position=void 0}b.target.css("cursor",b.cursors.grab)},clearInterval:function(a){var a=e(a),b=a.data("overscroll-interval");b&&h.clearInterval(b);a.data("overscroll-interval",null)},setInterval:function(a,b){c.clearInterval(a);e(a).data("overscroll-interval",b)},drift:function(a,b,d){var f=b.data,
-e,g,j,k,l=a.scrollLeft,m=a.scrollTop,i=c.constants.driftDecay;if(c.time()-f.capture.time>c.constants.driftTimeout)return d.call(null,f);e=f.options.scrollDelta*(b.pageX-f.capture.x);g=f.options.scrollDelta*(b.pageY-f.capture.y);j=e/c.constants.driftSequences;k=g/c.constants.driftSequences;f.options.direction!=="vertical"&&(l-=e);f.options.direction!=="horizontal"&&(m-=g);c.triggerEvent("driftstart",b.data);c.setInterval(a,h.setInterval(function(){var b=!0;if(k>1&&a.scrollTop>m||k<-1&&a.scrollTop<
-m)b=!1,a.scrollTop-=k,k/=i;if(j>1&&a.scrollLeft>l||j<-1&&a.scrollLeft<l)b=!1,a.scrollLeft-=j,j/=i;c.moveThumbs(f,a.scrollLeft,a.scrollTop);b&&(c.clearInterval(a),c.triggerEvent("driftend",f),d.call(null,f))},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){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":"999"}}})})(window,Math,jQuery);
+(function(a,b,c,d,e){"use strict";e="ontouchstart"in a;d=c.fn.overscroll=function(a){a=a||{};return this.each(function(){d.init(c(this),a)})};c.fn.removeOverscroll=function(a){return this.each(function(){var a=c(this).data(d.removerKey);if(c.isFunction(a)){a()}})};c.extend(d,{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:.7},init:function(a,f){var g={sizing:d.getSizing(a),cursors:d.getCursors(),flags:{},cleaned:{}};g.options=f=c.extend({showThumbs:true,persistThumbs:false,wheelDirection:"vertical",wheelDelta:d.constants.wheelDelta,scrollDelta:d.constants.scrollDelta,direction:"multi",cancelOn:"",zIndex:999},f);if(f.direction!=="multi"&&f.direction!==f.wheelDirection){f.wheelDirection=f.direction}f.scrollDelta=b.abs(f.scrollDelta);f.wheelDelta=b.abs(f.wheelDelta);a.removeOverscroll();a.data(d.removerKey,d.remover(a,g));if(e){a.css({overflow:"auto","-webkit-overflow-scrolling":"touch","-moz-overflow-scrolling":"touch","overflow-scrolling":"touch"})}else{g.target=a.css({position:"relative",overflow:"hidden",cursor:g.cursors.grab}).on(d.events.wheel,g,d.wheel).on(d.events.start,g,d.start).on(d.events.end,g,d.stop).on(d.events.scroll,g,d.scroll).on(d.events.ignored,false);if(f.showThumbs){g.thumbs={};if(g.sizing.container.scrollWidth>0&&f.direction!=="vertical"){g.thumbs.horizontal=c(d.div).css(d.getThumbCss(g.sizing.thumbs.horizontal,g.options.zIndex)).css({opacity:f.persistThumbs?d.constants.thumbOpacity:0});a.prepend(g.thumbs.horizontal)}if(g.sizing.container.scrollHeight>0&&f.direction!=="horizontal"){g.thumbs.vertical=c(d.div).css(d.getThumbCss(g.sizing.thumbs.vertical,g.options.zIndex)).css({opacity:f.persistThumbs?d.constants.thumbOpacity:0});a.prepend(g.thumbs.vertical)}}}if(f.scrollLeft){a.scrollLeft(f.scrollLeft)}if(f.scrollTop){a.scrollTop(f.scrollTop)}d.moveThumbs(g,a.scrollLeft(),a.scrollTop())},getCursors:function(){var a={};if(c.browser.mozilla){a.grab="-moz-grab";a.grabbing="-moz-grabbing"}else if(c.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(d.removerKey).off(d.events.wheel,d.wheel).off(d.events.start,d.start).off(d.events.end,d.stop).off(d.events.ignored,false);if(b.thumbs){if(b.thumbs.horizontal){b.thumbs.horizontal.remove()}if(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){if(a.thumbs.vertical){a.thumbs.vertical.stop(true,true).fadeTo("fast",d.constants.thumbOpacity)}if(a.thumbs.horizontal){a.thumbs.horizontal.stop(true,true).fadeTo("fast",d.constants.thumbOpacity)}}else{if(a.thumbs.vertical){a.thumbs.vertical.fadeTo("fast",0)}if(a.thumbs.horizontal){a.thumbs.horizontal.fadeTo("fast",0)}}}},setPosition:function(a,b,c){b.x=a.pageX;b.y=a.pageY;b.time=d.time();b.index=c;return b},wheel:function(b,c){var e=b.data,f=b.originalEvent;b.preventDefault();d.clearInterval(e.target);if(f.wheelDelta){c=f.wheelDelta/(a.opera?-120:120)}if(f.detail){c=-f.detail/3}if(!e.wheelCapture){e.wheelCapture={timeout:null};d.toggleThumbs(e,true);e.target.stop(true,e.flags.dragging=true)}c*=e.options.wheelDelta;if(e.options.wheelDirection==="horizontal"){this.scrollLeft-=c}else{this.scrollTop-=c}d.moveThumbs(e,this.scrollLeft,this.scrollTop);if(e.wheelCapture.timeout){a.clearTimeout(e.wheelCapture.timeout)}e.wheelCapture.timeout=a.setTimeout(function(a){d.toggleThumbs(e,e.wheelCapture=e.flags.dragging=null)},d.constants.timeout)},moveThumbs:function(a,b,c){var d,e,f,g;if(a.options.showThumbs){d=a.thumbs;e=a.sizing;if(d.horizontal){f=b*(1+e.container.width/e.container.scrollWidth);g=c+e.thumbs.horizontal.top;d.horizontal.css("margin",g+"px 0 0 "+f+"px")}if(d.vertical){f=b+e.thumbs.vertical.left;g=c*(1+e.container.height/e.container.scrollHeight);d.vertical.css("margin",g+"px 0 0 "+f+"px")}}},start:function(a){var b=a.data,e=b.target,f=b.flags;d.clearInterval(b.target);b.startTarget=c(a.target);if(!b.startTarget.is(b.options.cancelOn)){a.preventDefault();b.target.css("cursor",b.cursors.grabbing);f.dragging=f.dragged=false;e.bind(d.events.drag,b,d.drag).stop(true,true);b.position=d.setPosition(a,{});b.capture=d.setPosition(a,{},2);d.triggerEvent("dragstart",b)}},drag:function(a){a.preventDefault();var b=a.data,c=b.flags;if(!c.dragged){d.toggleThumbs(b,true)}c.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}d.moveThumbs(b,this.scrollLeft,this.scrollTop);d.setPosition(a,b.position);if(--b.capture.index<=0){c.dragging=true;d.setPosition(a,b.capture,d.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(){if(b){c.each(b,function(b,c){a.click(c)})}return false})},stop:function(a){var b=a.data,e=b.target,f=b.flags;e.unbind(d.events.drag,d.drag);if(b.position){d.triggerEvent("dragend",b);if(f.dragging){d.drift(this,a,function(){d.toggleThumbs(b,f.dragging=false)})}else{d.toggleThumbs(b,false)}if(f.dragged&&c(a.target).is(b.startTarget)){d.deferClick(b.startTarget);b.startTarget=f.dragged=null}b.capture=b.position=undefined}b.target.css("cursor",b.cursors.grab)},scroll:function(a){var b=a.data,c=b.flags;if(!c.dragging){d.moveThumbs(b,this.scrollLeft,this.scrollTop)}},clearInterval:function(b){b=c(b);var d=b.data("overscroll-interval");if(d){a.clearInterval(d)}b.data("overscroll-interval",null)},setInterval:function(a,b){d.clearInterval(a);c(a).data("overscroll-interval",b)},drift:function(b,c,e){var f=c.data,g,h,i,j,k=b.scrollLeft,l=b.scrollTop,m=d.constants.driftDecay;if(d.time()-f.capture.time>d.constants.driftTimeout){return e.call(null,f)}g=f.options.scrollDelta*(c.pageX-f.capture.x);h=f.options.scrollDelta*(c.pageY-f.capture.y);i=g/d.constants.driftSequences;j=h/d.constants.driftSequences;if(f.options.direction!=="vertical"){k-=g}if(f.options.direction!=="horizontal"){l-=h}d.triggerEvent("driftstart",c.data);d.setInterval(b,a.setInterval(function(){var a=true,c=1,g=-1;if(j>c&&b.scrollTop>l||j<g&&b.scrollTop<l){a=false;b.scrollTop-=j;j/=m}if(i>c&&b.scrollLeft>k||i<g&&b.scrollLeft<k){a=false;b.scrollLeft-=i;i/=m}d.moveThumbs(f,b.scrollLeft,b.scrollTop);if(a){d.clearInterval(b);d.triggerEvent("driftend",f);e.call(null,f)}},d.constants.driftFrequency))},getSizing:function(a){var b={},c=a.get(0);a=b.container={width:a.width(),height:a.height()};a.scrollWidth=a.width>=c.scrollWidth?a.width:c.scrollWidth;a.scrollHeight=a.height>=c.scrollHeight?a.height:c.scrollHeight;b.thumbs={horizontal:{width:a.width*a.width/a.scrollWidth,height:d.constants.thumbThickness,corner:d.constants.thumbThickness/2,left:0,top:a.height-d.constants.thumbThickness},vertical:{width:d.constants.thumbThickness,height:a.height*a.height/a.scrollHeight,corner:d.constants.thumbThickness/2,left:a.width-d.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 0a109dd

Please sign in to comment.