From 1a1c5eb35b3c216342b4ea175ab44bfe957002f1 Mon Sep 17 00:00:00 2001 From: Vadim Kazakov Date: Sun, 28 Sep 2014 22:32:57 -0600 Subject: [PATCH] 0.6.2 --- bower.json | 2 +- dist/ng-tiny-scrollbar.js | 76 ++++++++++++++++++++--------------- dist/ng-tiny-scrollbar.min.js | 2 +- package.json | 2 +- 4 files changed, 46 insertions(+), 36 deletions(-) diff --git a/bower.json b/bower.json index e63f106..b247899 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ngTinyScrollbar", - "version": "0.6.1", + "version": "0.6.2", "homepage": "https://github.com/yads/ngTinyScrollbar", "authors": [ "Vadim Kazakov " diff --git a/dist/ng-tiny-scrollbar.js b/dist/ng-tiny-scrollbar.js index 1ef95c3..58cf8be 100644 --- a/dist/ng-tiny-scrollbar.js +++ b/dist/ng-tiny-scrollbar.js @@ -90,45 +90,53 @@ angular.module('ngTinyScrollbar', ['ngAnimate']) }; this.update = function(scrollTo) { - this.viewportSize = $viewport[0]['offset'+ sizeLabelCap]; - this.contentSize = $overview[0]['scroll'+ sizeLabelCap]; - this.contentRatio = this.viewportSize / this.contentSize; - this.trackSize = this.options.trackSize || this.viewportSize; - this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio)))); - this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize); - mousePosition = $scrollbar[0].offsetTop; - - $scrollbar.toggleClass('disable', this.contentRatio >= 1); - - switch (scrollTo) { - case 'bottom': - this.contentPosition = this.contentSize - this.viewportSize; - break; - case 'relative': - this.contentPosition = Math.min(this.contentSize - this.viewportSize, Math.max(0, this.contentPosition)); - break; - default: - this.contentPosition = parseInt(scrollTo, 10) || 0; - } - - if (this.contentRatio > 1) { - $overview.css(posiLabel, -self.contentPosition + 'px'); - return this; - } - - if (!this.options.alwaysVisible && this.viewportSize > 0) { + this.viewportSize = $viewport.prop('offset'+ sizeLabelCap); + this.contentSize = $overview.prop('scroll'+ sizeLabelCap); + this.contentRatio = this.viewportSize / this.contentSize; + this.trackSize = this.options.trackSize || this.viewportSize; + this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio)))); + this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize); + mousePosition = $scrollbar.prop('offsetTop'); + + $scrollbar.toggleClass('disable', this.contentRatio >= 1); + + if (!this.options.alwaysVisible && this.contentRatio < 1 && this.viewportSize > 0) { //flash the scrollbar when update happens $animate.addClass($scrollbar[0], 'visible').then(function() { $animate.removeClass($scrollbar[0], 'visible'); $scope.$digest(); }); - } - $thumb.css(posiLabel, self.contentPosition / self.trackRatio + 'px'); - $scrollbar.css(sizeLabel, self.trackSize + 'px'); - $thumb.css(sizeLabel, self.thumbSize + 'px'); - $overview.css(posiLabel, -self.contentPosition + 'px'); + } + + switch (scrollTo) { + case 'bottom': + this.contentPosition = this.contentSize - this.viewportSize; + break; + case 'relative': + this.contentPosition = Math.min(this.contentSize - this.viewportSize, Math.max(0, this.contentPosition)); + break; + default: + this.contentPosition = parseInt(scrollTo, 10) || 0; + } + + ensureContentPosition(); + $thumb.css(posiLabel, self.contentPosition / self.trackRatio + 'px'); + $scrollbar.css(sizeLabel, self.trackSize + 'px'); + $thumb.css(sizeLabel, self.thumbSize + 'px'); + $overview.css(posiLabel, -self.contentPosition + 'px'); + + return this; + }; - return this; + function ensureContentPosition() { + // if scrollbar is on, ensure the bottom of the content does not go above the bottom of the viewport + if (self.contentRatio <= 1 && self.contentPosition > self.contentSize - self.viewportSize) { + self.contentPosition = self.contentSize - self.viewportSize; + } + // if scrollbar is off, ensure the top of the content does not go below the top of the viewport + else if (self.contentRatio > 1 && self.contentPosition > 0) { + self.contentPosition = 0; + } } function setEvents() { @@ -224,6 +232,7 @@ angular.module('ngTinyScrollbar', ['ngAnimate']) $element[0].dispatchEvent(moveEvent); + ensureContentPosition(); $thumb.css(posiLabel, self.contentPosition / self.trackRatio + 'px'); $overview.css(posiLabel, -self.contentPosition + 'px'); @@ -256,6 +265,7 @@ angular.module('ngTinyScrollbar', ['ngAnimate']) $element[0].dispatchEvent(moveEvent); + ensureContentPosition(); $thumb.css(posiLabel, thumbPositionNew + 'px'); $overview.css(posiLabel, -self.contentPosition + 'px'); } diff --git a/dist/ng-tiny-scrollbar.min.js b/dist/ng-tiny-scrollbar.min.js index 5d4f53c..cdfd29a 100644 --- a/dist/ng-tiny-scrollbar.min.js +++ b/dist/ng-tiny-scrollbar.min.js @@ -21,4 +21,4 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -"use strict";angular.module("ngTinyScrollbar",["ngAnimate"]).directive("scrollbar",["$window","$animate","$timeout","$parse",function(t,e,o,i){return{restrict:"A",transclude:!0,template:'
',controller:["$scope","$element","$attrs",function(s,n,l){function a(){M?g.on("touchstart",r):(x.on("mousedown",h),k.on("mousedown",m)),angular.element(t).on("resize",c),w.options.wheel&&n.on(R,u)}function c(){w.update("relative")}function r(t){1===t.touches.length&&(t.stopPropagation(),h(t.touches[0]))}function h(t){z.addClass("scroll-no-select"),n.addClass("scroll-no-select"),w.options.alwaysVisible||k.addClass("visible"),y=C?t.pageX:t.pageY,w.thumbPosition=parseInt(x.css(X),10)||0,M?(b.on("touchmove",p),b.on("touchend",v)):(b.on("mousemove",m),b.on("mouseup",v),x.on("mouseup",v))}function u(t){if(!(w.contentRatio>=1)){w.options.alwaysVisible||(S&&o.cancel(S),k.addClass("visible"),S=o(function(){k.removeClass("visible")},100));var e=t||window.event,i=w.options.axis.toUpperCase(),s={X:e.deltaX,Y:e.deltaY},l=0==e.deltaMode?w.options.wheelSpeed:1;w.options.scrollInvert&&(l*=-1),"mousewheel"===R&&(s.Y=-1*e.wheelDelta/40,e.wheelDeltaX&&(s.X=-1*e.wheelDeltaX/40)),s.X*=-1/l,s.Y*=-1/l;var a=s[i];w.contentPosition-=a*w.options.wheelSpeed,w.contentPosition=Math.min(w.contentSize-w.viewportSize,Math.max(0,w.contentPosition)),n[0].dispatchEvent(D),x.css(X,w.contentPosition/w.trackRatio+"px"),P.css(X,-w.contentPosition+"px"),(w.options.wheelLock||w.contentPosition!==w.contentSize-w.viewportSize&&0!==w.contentPosition)&&e.preventDefault()}}function p(t){t.preventDefault(),m(t.touches[0])}function m(t){if(!(w.contentRatio>=1)){var e=C?t.pageX:t.pageY,o=e-y;(w.options.scrollInvert&&!M||M&&!w.options.scrollInvert)&&(o=y-e);var i=Math.min(w.trackSize-w.thumbSize,Math.max(0,w.thumbPosition+o));w.contentPosition=i*w.trackRatio,n[0].dispatchEvent(D),x.css(X,i+"px"),P.css(X,-w.contentPosition+"px")}}function v(t){z.removeClass("scroll-no-select"),n.removeClass("scroll-no-select"),t||w.options.alwaysVisible||k.removeClass("visible"),b.off("mousemove",m),b.off("mouseup",v),x.off("mouseup",v),b.off("touchmove",p),b.off("ontouchend",v)}var d={axis:"y",wheel:!0,wheelSpeed:40,wheelLock:!0,scrollInvert:!1,trackSize:!1,thumbSize:!1,alwaysVisible:!0},f=l.scrollbar;f=f?i(f)(s):{},this.options=angular.extend({},d,f),this._defaults=d;var S,w=this,z=angular.element(document.querySelectorAll("body")[0]),b=angular.element(document),g=angular.element(n[0].querySelectorAll(".scroll-viewport")[0]),P=angular.element(n[0].querySelectorAll(".scroll-overview")[0]),k=angular.element(n[0].querySelectorAll(".scroll-bar")[0]),x=angular.element(n[0].querySelectorAll(".scroll-thumb")[0]),y=0,C="x"===this.options.axis,M="ontouchstart"in document.documentElement,R="onwheel"in document?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",$=C?"width":"height",A=$.charAt(0).toUpperCase()+$.slice(1).toLowerCase(),X=C?"left":"top",D=document.createEvent("HTMLEvents");D.initEvent("move",!0,!0),this.contentPosition=0,this.viewportSize=0,this.contentSize=0,this.contentRatio=0,this.trackSize=0,this.trackRatio=0,this.thumbSize=0,this.thumbPosition=0,this.initialize=function(){return this.options.alwaysVisible||k.css("opacity",0),w.update(),a(),w},this.update=function(t){switch(this.viewportSize=g[0]["offset"+A],this.contentSize=P[0]["scroll"+A],this.contentRatio=this.viewportSize/this.contentSize,this.trackSize=this.options.trackSize||this.viewportSize,this.thumbSize=Math.min(this.trackSize,Math.max(0,this.options.thumbSize||this.trackSize*this.contentRatio)),this.trackRatio=this.options.thumbSize?(this.contentSize-this.viewportSize)/(this.trackSize-this.thumbSize):this.contentSize/this.trackSize,y=k[0].offsetTop,k.toggleClass("disable",this.contentRatio>=1),t){case"bottom":this.contentPosition=this.contentSize-this.viewportSize;break;case"relative":this.contentPosition=Math.min(this.contentSize-this.viewportSize,Math.max(0,this.contentPosition));break;default:this.contentPosition=parseInt(t,10)||0}return this.contentRatio>1?(P.css(X,-w.contentPosition+"px"),this):(!this.options.alwaysVisible&&this.viewportSize>0&&e.addClass(k[0],"visible").then(function(){e.removeClass(k[0],"visible"),s.$digest()}),x.css(X,w.contentPosition/w.trackRatio+"px"),k.css($,w.trackSize+"px"),x.css($,w.thumbSize+"px"),P.css(X,-w.contentPosition+"px"),this)},this.cleanup=function(){g.off("touchstart",r),x.off("mousedown",h),k.off("mousedown",m),angular.element(t).off("resize",c),n.off(R,u),v(!0)}}],link:function(t,e,o,i){e.css("position","relative"),i.initialize(),e.on("$destroy",function(){i.cleanup()})}}}]); \ No newline at end of file +"use strict";angular.module("ngTinyScrollbar",["ngAnimate"]).directive("scrollbar",["$window","$animate","$timeout","$parse",function(t,e,o,i){return{restrict:"A",transclude:!0,template:'
',controller:["$scope","$element","$attrs",function(n,s,a){function l(){z.contentRatio<=1&&z.contentPosition>z.contentSize-z.viewportSize?z.contentPosition=z.contentSize-z.viewportSize:z.contentRatio>1&&z.contentPosition>0&&(z.contentPosition=0)}function c(){M?g.on("touchstart",h):(y.on("mousedown",u),x.on("mousedown",v)),angular.element(t).on("resize",r),z.options.wheel&&s.on($,p)}function r(){z.update("relative")}function h(t){1===t.touches.length&&(t.stopPropagation(),u(t.touches[0]))}function u(t){b.addClass("scroll-no-select"),s.addClass("scroll-no-select"),z.options.alwaysVisible||x.addClass("visible"),C=R?t.pageX:t.pageY,z.thumbPosition=parseInt(y.css(D),10)||0,M?(P.on("touchmove",m),P.on("touchend",d)):(P.on("mousemove",v),P.on("mouseup",d),y.on("mouseup",d))}function p(t){if(!(z.contentRatio>=1)){z.options.alwaysVisible||(w&&o.cancel(w),x.addClass("visible"),w=o(function(){x.removeClass("visible")},100));var e=t||window.event,i=z.options.axis.toUpperCase(),n={X:e.deltaX,Y:e.deltaY},a=0==e.deltaMode?z.options.wheelSpeed:1;z.options.scrollInvert&&(a*=-1),"mousewheel"===$&&(n.Y=-1*e.wheelDelta/40,e.wheelDeltaX&&(n.X=-1*e.wheelDeltaX/40)),n.X*=-1/a,n.Y*=-1/a;var c=n[i];z.contentPosition-=c*z.options.wheelSpeed,z.contentPosition=Math.min(z.contentSize-z.viewportSize,Math.max(0,z.contentPosition)),s[0].dispatchEvent(E),l(),y.css(D,z.contentPosition/z.trackRatio+"px"),k.css(D,-z.contentPosition+"px"),(z.options.wheelLock||z.contentPosition!==z.contentSize-z.viewportSize&&0!==z.contentPosition)&&e.preventDefault()}}function m(t){t.preventDefault(),v(t.touches[0])}function v(t){if(!(z.contentRatio>=1)){var e=R?t.pageX:t.pageY,o=e-C;(z.options.scrollInvert&&!M||M&&!z.options.scrollInvert)&&(o=C-e);var i=Math.min(z.trackSize-z.thumbSize,Math.max(0,z.thumbPosition+o));z.contentPosition=i*z.trackRatio,s[0].dispatchEvent(E),l(),y.css(D,i+"px"),k.css(D,-z.contentPosition+"px")}}function d(t){b.removeClass("scroll-no-select"),s.removeClass("scroll-no-select"),t||z.options.alwaysVisible||x.removeClass("visible"),P.off("mousemove",v),P.off("mouseup",d),y.off("mouseup",d),P.off("touchmove",m),P.off("ontouchend",d)}var S={axis:"y",wheel:!0,wheelSpeed:40,wheelLock:!0,scrollInvert:!1,trackSize:!1,thumbSize:!1,alwaysVisible:!0},f=a.scrollbar;f=f?i(f)(n):{},this.options=angular.extend({},S,f),this._defaults=S;var w,z=this,b=angular.element(document.querySelectorAll("body")[0]),P=angular.element(document),g=angular.element(s[0].querySelectorAll(".scroll-viewport")[0]),k=angular.element(s[0].querySelectorAll(".scroll-overview")[0]),x=angular.element(s[0].querySelectorAll(".scroll-bar")[0]),y=angular.element(s[0].querySelectorAll(".scroll-thumb")[0]),C=0,R="x"===this.options.axis,M="ontouchstart"in document.documentElement,$="onwheel"in document?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",A=R?"width":"height",X=A.charAt(0).toUpperCase()+A.slice(1).toLowerCase(),D=R?"left":"top",E=document.createEvent("HTMLEvents");E.initEvent("move",!0,!0),this.contentPosition=0,this.viewportSize=0,this.contentSize=0,this.contentRatio=0,this.trackSize=0,this.trackRatio=0,this.thumbSize=0,this.thumbPosition=0,this.initialize=function(){return this.options.alwaysVisible||x.css("opacity",0),z.update(),c(),z},this.update=function(t){switch(this.viewportSize=g.prop("offset"+X),this.contentSize=k.prop("scroll"+X),this.contentRatio=this.viewportSize/this.contentSize,this.trackSize=this.options.trackSize||this.viewportSize,this.thumbSize=Math.min(this.trackSize,Math.max(0,this.options.thumbSize||this.trackSize*this.contentRatio)),this.trackRatio=this.options.thumbSize?(this.contentSize-this.viewportSize)/(this.trackSize-this.thumbSize):this.contentSize/this.trackSize,C=x.prop("offsetTop"),x.toggleClass("disable",this.contentRatio>=1),!this.options.alwaysVisible&&this.contentRatio<1&&this.viewportSize>0&&e.addClass(x[0],"visible").then(function(){e.removeClass(x[0],"visible"),n.$digest()}),t){case"bottom":this.contentPosition=this.contentSize-this.viewportSize;break;case"relative":this.contentPosition=Math.min(this.contentSize-this.viewportSize,Math.max(0,this.contentPosition));break;default:this.contentPosition=parseInt(t,10)||0}return l(),y.css(D,z.contentPosition/z.trackRatio+"px"),x.css(A,z.trackSize+"px"),y.css(A,z.thumbSize+"px"),k.css(D,-z.contentPosition+"px"),this},this.cleanup=function(){g.off("touchstart",h),y.off("mousedown",u),x.off("mousedown",v),angular.element(t).off("resize",r),s.off($,p),d(!0)}}],link:function(t,e,o,i){e.css("position","relative"),i.initialize(),e.on("$destroy",function(){i.cleanup()})}}}]); \ No newline at end of file diff --git a/package.json b/package.json index 13a28da..5ea1875 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngTinyScrollbar", - "version": "0.6.1", + "version": "0.6.2", "description": "An angular directive port of the TinyScrollbar", "repository": { "type": "git",