diff --git a/dist/ng-scrollbar.js b/dist/ng-scrollbar.js index ccde394..6df7553 100644 --- a/dist/ng-scrollbar.js +++ b/dist/ng-scrollbar.js @@ -8,10 +8,12 @@ angular.module('ngScrollbar', []).directive('ngScrollbar', [ replace: true, transclude: true, link: function (scope, element, attrs) { - var mainElm, transculdedContainer, tools, thumb, thumbLine, track; + var mainElm, transculdedContainer, thumb, thumbContainer, track; var flags = { bottom: attrs.hasOwnProperty('bottom') }; var win = angular.element($window); + // Elements var dragger = { top: 0 }, page = { top: 0 }; + // Styles var scrollboxStyle, draggerStyle, draggerLineStyle, pageStyle; var calcStyles = function () { scrollboxStyle = { @@ -53,6 +55,7 @@ angular.module('ngScrollbar', []).directive('ngScrollbar', [ }; var wheelHandler = function (event) { var wheelDivider = 20; + // so it can be changed easily var deltaY = event.wheelDeltaY !== undefined ? event.wheelDeltaY / wheelDivider : event.wheelDelta !== undefined ? event.wheelDelta / wheelDivider : -event.detail * (wheelDivider / 10); dragger.top = Math.max(0, Math.min(parseInt(page.height, 10) - parseInt(dragger.height, 10), parseInt(dragger.top, 10) - deltaY)); redraw(); @@ -70,33 +73,40 @@ angular.module('ngScrollbar', []).directive('ngScrollbar', [ var dragHandler = function (event) { var newOffsetY = event.pageY - thumb[0].scrollTop - lastOffsetY; var newOffsetX = 0; + // TBD thumbDrag(event, newOffsetX, newOffsetY); redraw(); }; var buildScrollbar = function (rollToBottom) { + // Getting top position of a parent element to place scroll correctly var parentOffsetTop = element[0].parentElement.offsetTop; var wheelEvent = win[0].onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll'; rollToBottom = flags.bottom || rollToBottom; mainElm = angular.element(element.children()[0]); transculdedContainer = angular.element(mainElm.children()[0]); - tools = angular.element(mainElm.children()[1]); - thumb = angular.element(angular.element(tools.children()[0]).children()[0]); - thumbLine = angular.element(thumb.children()[0]); - track = angular.element(angular.element(tools.children()[0]).children()[1]); + thumb = angular.element(element[0].querySelector('.ngsb-thumb-pos')); + thumbContainer = angular.element(element[0].querySelector('.ngsb-thumb')); + track = angular.element(element[0].querySelector('.ngsb-track')); + // Check if scroll bar is needed page.height = element[0].offsetHeight - parentOffsetTop; page.scrollHeight = transculdedContainer[0].scrollHeight; if (page.height < page.scrollHeight) { scope.showYScrollbar = true; + // Calculate the dragger height dragger.height = Math.round(page.height / page.scrollHeight * page.height); dragger.trackHeight = page.height; + // update the transcluded content style and clear the parent's calcStyles(); element.css({ overflow: 'hidden' }); mainElm.css(scrollboxStyle); transculdedContainer.css(pageStyle); thumb.css(draggerStyle); - thumbLine.css(draggerLineStyle); + thumbContainer.css(draggerLineStyle); + // Bind scroll bar events track.bind('click', trackClick); + // Handle mousewheel transculdedContainer[0].addEventListener(wheelEvent, wheelHandler, false); + // Drag the scroller thumb.on('mousedown', function (event) { lastOffsetY = event.pageY - thumb[0].offsetTop; win.on('mouseup', function () { @@ -118,14 +128,17 @@ angular.module('ngScrollbar', []).directive('ngScrollbar', [ thumb.off('mousedown'); transculdedContainer[0].removeEventListener(wheelEvent, wheelHandler, false); transculdedContainer.attr('style', 'position:relative;top:0'); + // little hack to remove other inline styles mainElm.css({ height: '100%' }); } }; var rebuildTimer; var rebuild = function (e, data) { + /* jshint -W116 */ if (rebuildTimer != null) { clearTimeout(rebuildTimer); } + /* jshint +W116 */ var rollToBottom = !!data && !!data.rollToBottom; rebuildTimer = setTimeout(function () { page.height = null; diff --git a/dist/ng-scrollbar.min.js b/dist/ng-scrollbar.min.js index ace8723..d264d9b 100644 --- a/dist/ng-scrollbar.min.js +++ b/dist/ng-scrollbar.min.js @@ -1,8 +1,8 @@ /** * ng-scrollbar - * @version v0.0.1 - 2014-05-14 + * @version v0.0.1 - 2014-07-29 * @link https://github.com/asafdav/ng-scrollbar * @author Asaf David <> * @license MIT License, http://www.opensource.org/licenses/MIT */ -"use strict";angular.module("ngScrollbar",[]).directive("ngScrollbar",["$parse","$window",function(a,b){return{restrict:"A",replace:!0,transclude:!0,link:function(a,c,d){var e,f,g,h,i,j,k,l,m,n,o,p,q={bottom:d.hasOwnProperty("bottom")},r=angular.element(b),s={top:0},t={top:0},u=function(){k={position:"relative",overflow:"hidden","max-width":"100%",height:"100%"},t.height&&(k.height=t.height+"px"),l={position:"absolute",height:s.height+"px",top:s.top+"px"},m={position:"relative","line-height":s.height+"px"},n={position:"relative",top:t.top+"px",overflow:"hidden"}},v=function(){h.css("top",s.top+"px");var a=s.top/t.height;t.top=-Math.round(t.scrollHeight*a),f.css("top",t.top+"px")},w=function(a){var b=a.hasOwnProperty("offsetY")?a.offsetY:a.layerY,c=Math.max(0,Math.min(parseInt(s.trackHeight,10)-parseInt(s.height,10),b));s.top=c,v(),a.stopPropagation()},x=function(a){var b=20,c=void 0!==a.wheelDeltaY?a.wheelDeltaY/b:void 0!==a.wheelDelta?a.wheelDelta/b:-a.detail*(b/10);return s.top=Math.max(0,Math.min(parseInt(t.height,10)-parseInt(s.height,10),parseInt(s.top,10)-c)),v(),a.preventDefault?void a.preventDefault():!1},y=function(a,b,c){s.top=Math.max(0,Math.min(parseInt(s.trackHeight,10)-parseInt(s.height,10),c)),a.stopPropagation()},z=function(a){var b=a.pageY-h[0].scrollTop-o,c=0;y(a,c,b),v()},A=function(b){var d=c[0].parentElement.offsetTop,p=void 0!==r[0].onmousewheel?"mousewheel":"DOMMouseScroll";b=q.bottom||b,e=angular.element(c.children()[0]),f=angular.element(e.children()[0]),g=angular.element(e.children()[1]),h=angular.element(angular.element(g.children()[0]).children()[0]),i=angular.element(h.children()[0]),j=angular.element(angular.element(g.children()[0]).children()[1]),t.height=c[0].offsetHeight-d,t.scrollHeight=f[0].scrollHeight,t.height
'}}]); \ No newline at end of file +"use strict";angular.module("ngScrollbar",[]).directive("ngScrollbar",["$parse","$window",function(a,b){return{restrict:"A",replace:!0,transclude:!0,link:function(a,c,d){var e,f,g,h,i,j,k,l,m,n,o,p={bottom:d.hasOwnProperty("bottom")},q=angular.element(b),r={top:0},s={top:0},t=function(){j={position:"relative",overflow:"hidden","max-width":"100%",height:"100%"},s.height&&(j.height=s.height+"px"),k={position:"absolute",height:r.height+"px",top:r.top+"px"},l={position:"relative","line-height":r.height+"px"},m={position:"relative",top:s.top+"px",overflow:"hidden"}},u=function(){g.css("top",r.top+"px");var a=r.top/s.height;s.top=-Math.round(s.scrollHeight*a),f.css("top",s.top+"px")},v=function(a){var b=a.hasOwnProperty("offsetY")?a.offsetY:a.layerY,c=Math.max(0,Math.min(parseInt(r.trackHeight,10)-parseInt(r.height,10),b));r.top=c,u(),a.stopPropagation()},w=function(a){var b=20,c=void 0!==a.wheelDeltaY?a.wheelDeltaY/b:void 0!==a.wheelDelta?a.wheelDelta/b:-a.detail*(b/10);return r.top=Math.max(0,Math.min(parseInt(s.height,10)-parseInt(r.height,10),parseInt(r.top,10)-c)),u(),a.preventDefault?void a.preventDefault():!1},x=function(a,b,c){r.top=Math.max(0,Math.min(parseInt(r.trackHeight,10)-parseInt(r.height,10),c)),a.stopPropagation()},y=function(a){var b=a.pageY-g[0].scrollTop-n,c=0;x(a,c,b),u()},z=function(b){var d=c[0].parentElement.offsetTop,o=void 0!==q[0].onmousewheel?"mousewheel":"DOMMouseScroll";b=p.bottom||b,e=angular.element(c.children()[0]),f=angular.element(e.children()[0]),g=angular.element(c[0].querySelector(".ngsb-thumb-pos")),h=angular.element(c[0].querySelector(".ngsb-thumb")),i=angular.element(c[0].querySelector(".ngsb-track")),s.height=c[0].offsetHeight-d,s.scrollHeight=f[0].scrollHeight,s.height
'}}]); \ No newline at end of file diff --git a/src/ng-scrollbar.js b/src/ng-scrollbar.js index daadc75..36b6067 100644 --- a/src/ng-scrollbar.js +++ b/src/ng-scrollbar.js @@ -8,7 +8,7 @@ angular.module('ngScrollbar', []). transclude: true, link: function(scope, element, attrs) { - var mainElm, transculdedContainer, tools, thumb, thumbLine, track; + var mainElm, transculdedContainer, thumb, thumbContainer, track; var flags = { bottom: attrs.hasOwnProperty('bottom') @@ -120,10 +120,9 @@ angular.module('ngScrollbar', []). rollToBottom = flags.bottom || rollToBottom; mainElm = angular.element(element.children()[0]); transculdedContainer = angular.element(mainElm.children()[0]); - tools = angular.element(mainElm.children()[1]); - thumb = angular.element(angular.element(tools.children()[0]).children()[0]); - thumbLine = angular.element(thumb.children()[0]); - track = angular.element(angular.element(tools.children()[0]).children()[1]); + thumb = angular.element(element[0].querySelector('.ngsb-thumb-pos')); + thumbContainer = angular.element(element[0].querySelector('.ngsb-thumb')); + track = angular.element(element[0].querySelector('.ngsb-track')); // Check if scroll bar is needed page.height = element[0].offsetHeight - parentOffsetTop; @@ -142,12 +141,12 @@ angular.module('ngScrollbar', []). mainElm.css(scrollboxStyle); transculdedContainer.css(pageStyle); thumb.css(draggerStyle); - thumbLine.css(draggerLineStyle); + thumbContainer.css(draggerLineStyle); // Bind scroll bar events track.bind('click', trackClick); - // Handl mousewheel + // Handle mousewheel transculdedContainer[0].addEventListener(wheelEvent, wheelHandler, false); // Drag the scroller