From a65d8dfe7c397f18595f5c0b42a6948fe370a72b Mon Sep 17 00:00:00 2001 From: Jakub Strojewski Date: Mon, 31 Mar 2014 14:23:11 +0200 Subject: [PATCH] Add rebuild on window resize ...and update karma config and spec --- dist/ng-scrollbar.js | 9 +++ dist/ng-scrollbar.min.js | 2 +- karma.conf.js | 113 ++++++++++++++++++++------------------ src/ng-scrollbar.js | 33 +++++++++-- test/spec/ng-scrollbar.js | 6 +- 5 files changed, 102 insertions(+), 61 deletions(-) diff --git a/dist/ng-scrollbar.js b/dist/ng-scrollbar.js index 8326c94..5a69bb0 100644 --- a/dist/ng-scrollbar.js +++ b/dist/ng-scrollbar.js @@ -9,7 +9,9 @@ angular.module('ngScrollbar', []).directive('ngScrollbar', [ transclude: true, link: function (scope, element, attrs) { var win, mainElm, transculdedContainer, tools, thumb, thumbLine, track; + // Elements var dragger = { top: 0 }, page = { top: 0 }; + // Styles var scrollboxStyle, draggerStyle, draggerLineStyle, pageStyle; var calcStyles = function () { scrollboxStyle = { @@ -68,6 +70,7 @@ 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(); }; @@ -79,21 +82,27 @@ angular.module('ngScrollbar', []).directive('ngScrollbar', [ 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]); + // Check if scroll bar is needed page.height = element[0].offsetHeight; 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); + // Bind scroll bar events track.bind('click', trackClick); + // Handl mousewheel var wheelEvent = win[0].onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll'; transculdedContainer[0].addEventListener(wheelEvent, wheelHandler, false); + // Drag the scroller thumb.bind('mousedown', function (event) { lastOffsetY = event.pageY - thumb[0].offsetTop; win.bind('mouseup', function () { diff --git a/dist/ng-scrollbar.min.js b/dist/ng-scrollbar.min.js index 657ec0f..485f016 100644 --- a/dist/ng-scrollbar.min.js +++ b/dist/ng-scrollbar.min.js @@ -1,6 +1,6 @@ /** * ng-scrollbar - * @version v0.0.1 - 2014-02-25 + * @version v0.0.1 - 2014-03-31 * @link https://github.com/asafdav/ng-scrollbar * @author Asaf David <> * @license MIT License, http://www.opensource.org/licenses/MIT diff --git a/karma.conf.js b/karma.conf.js index 4c56ae7..7e3d900 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,55 +1,62 @@ // Karma configuration -// base path, that will be used to resolve files and exclude -basePath = ''; - -// list of files / patterns to load in the browser -files = [ - JASMINE, - JASMINE_ADAPTER, - 'bower_components/angular/angular.js', - 'bower_components/jquery/jquery.js', - 'bower_components/angular-mocks/angular-mocks.js', - 'src/*.js', - 'test/spec/*.js' -]; - -// list of files to exclude -exclude = []; - -// test results reporter to use -// possible values: dots || progress || growl -reporters = ['progress']; - -// web server port -port = 8080; - -// cli runner port -runnerPort = 9100; - -// enable / disable colors in the output (reporters and logs) -colors = true; - -// level of logging -// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG -logLevel = LOG_INFO; - -// enable / disable watching file and executing tests whenever any file changes -autoWatch = false; - -// Start these browsers, currently available: -// - Chrome -// - ChromeCanary -// - Firefox -// - Opera -// - Safari (only Mac) -// - PhantomJS -// - IE (only Windows) -browsers = ['Chrome']; - -// If browser does not capture in given timeout [ms], kill it -captureTimeout = 5000; - -// Continuous Integration mode -// if true, it capture browsers, run tests and exit -singleRun = false; + + +module.exports = function(config) { + config.set({ + // base path, that will be used to resolve files and exclude + basePath: '', + + // list of files / patterns to load in the browser + files: [ + 'bower_components/jquery/dist/jquery.js', + 'bower_components/angular/angular.js', + 'bower_components/angular-mocks/angular-mocks.js', + 'src/*.js', + 'test/spec/*.js' + ], + + // list of files to exclude + exclude: [], + + // test results reporter to use + // possible values: dots || progress || growl + reporters: ['progress'], + + frameworks: ['jasmine'], + + // web server port + port: 8080, + + // cli runner port + runnerPort: 9100, + + // enable / disable colors in the output (reporters and logs) + colors: true, + + // level of logging + // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG + logLevel: config.LOG_INFO, + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: false, + + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + browsers: ['Chrome'], + + // If browser does not capture in given timeout [ms], kill it + captureTimeout: 5000, + + // Continuous Integration mode + // if true, it capture browsers, run tests and exit + singleRun: false + + }); +}; \ No newline at end of file diff --git a/src/ng-scrollbar.js b/src/ng-scrollbar.js index 474fe04..52f09ec 100644 --- a/src/ng-scrollbar.js +++ b/src/ng-scrollbar.js @@ -7,7 +7,9 @@ angular.module('ngScrollbar', []). replace: true, transclude: true, link: function(scope, element, attrs) { - var win, mainElm, transculdedContainer, tools, thumb, thumbLine, track; + var mainElm, transculdedContainer, tools, thumb, thumbLine, track; + + var win = angular.element($window); // Elements var dragger = { @@ -99,7 +101,6 @@ angular.module('ngScrollbar', []). }; var buildScrollbar = function () { - win = angular.element($window); mainElm = angular.element(element.children()[0]); transculdedContainer = angular.element(mainElm.children()[0]); tools = angular.element(mainElm.children()[1]); @@ -148,14 +149,36 @@ angular.module('ngScrollbar', []). scope.showYScrollbar = false; } }; + + 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; + buildScrollbar(rollToBottom); + if (!scope.$$phase) { + scope.$digest(); + } + }, 72); + }; + buildScrollbar(); if (!!attrs.rebuildOn) { - scope.$on(attrs.rebuildOn, function() { - page.height = null; - buildScrollbar(); + attrs.rebuildOn.split(' ').forEach(function (eventName) { + scope.$on(eventName, rebuild); }); } + + if (attrs.hasOwnProperty('rebuildOnResize')) { + win.on('resize', rebuild); + } }, template: '
' + '
' + diff --git a/test/spec/ng-scrollbar.js b/test/spec/ng-scrollbar.js index 8aad37b..1852cac 100644 --- a/test/spec/ng-scrollbar.js +++ b/test/spec/ng-scrollbar.js @@ -21,8 +21,10 @@ describe('Module: ngScrollbar', function () { var templates = { 'default': { - scope: {}, - element: '
' + scope: { + helloWorld: 'hello world' + }, + element: '
{{ helloWorld }}
' } };