Add rebuild on window resize

...and update karma config and spec

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 () {

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
+
+    });
+};

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: '<div>' +
         '<div class="ngsb-wrap">' +

test/spec/ng-scrollbar.js

@@ -21,8 +21,10 @@ describe('Module: ngScrollbar', function () {
 
   var templates = {
     'default': {
-      scope: {},
-      element: '<div my-directive></div>'
+      scope: {
+        helloWorld: 'hello world'
+      },
+      element: '<div my-directive>{{ helloWorld }}</div>'
     }
   };