diff --git a/.gitignore b/.gitignore index ea647e6..4bc427c 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ bower_components npm-debug.log template/**/*.js +.idea \ No newline at end of file diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js index 3aafd1b..824744b 100644 --- a/src/dropdownToggle/dropdownToggle.js +++ b/src/dropdownToggle/dropdownToggle.js @@ -46,12 +46,30 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.f if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) { dropdown.css('display', 'block'); // We display the element so that offsetParent is populated dropdown.addClass('f-open-dropdown'); - + + var options = element.attr('data-options') ? element.attr('data-options').split(';') : []; + var align = null; + + for (var i = 0; i < options.length; i++) { + var split = options[i].split(':'); + if (split[0] === 'align') { + align = split[1]; + } + } var offset = $position.offset(element); var parentOffset = $position.offset(angular.element(dropdown[0].offsetParent)); var dropdownWidth = dropdown.prop('offsetWidth'); + var dropdownHeight = dropdown.prop('offsetHeight'); + var top = offset.top - parentOffset.top + offset.height; + + switch (align) { + case 'top-left': + top -= dropdownHeight / 2; + break; + } + var css = { - top: offset.top - parentOffset.top + offset.height + 'px' + top: top + 'px' }; if (controller.small()) { @@ -67,6 +85,14 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.f left = rightThreshold; dropdown.removeClass('left').addClass('right'); } + switch (align) { + case 'left': + left -= dropdownWidth; + break; + case 'top-left': + left -= dropdownWidth; + break; + } css.left = left + 'px'; css.position = null; css['max-width'] = null; diff --git a/src/topbar/test/topbar.spec.js b/src/topbar/test/topbar.spec.js index 5f75948..f06be5a 100644 --- a/src/topbar/test/topbar.spec.js +++ b/src/topbar/test/topbar.spec.js @@ -158,4 +158,43 @@ describe('topbar directive', function() { expect(containerElement.hasClass('fixed')).toBe(false); }); }); + + describe('onScroll', function() { + var scope, elm; + + beforeEach(inject(function($compile, $rootScope) { + elm = $compile('')($rootScope); + $rootScope.$digest(); + scope = elm.isolateScope(); + scope.$apply = jasmine.createSpy('$apply'); + })); + + describe('when both stickyTopbar and isSticky are true', function() { + it('does not invoke scope.$apply', function() { + scope.stickyTopbar = true; + scope.isSticky = jasmine.createSpy('isSticky').andReturn(true); + angular.element($window).triggerHandler('scroll'); + expect(scope.$apply).toHaveBeenCalled(); + }); + }); + + describe('when either stickyTopbar or isSticky is false', function() { + it('does not invoke scope.$apply', function () { + scope.stickyTopbar = false; + scope.isSticky = jasmine.createSpy('isSticky').andReturn(false); + angular.element($window).triggerHandler('scroll'); + expect(scope.$apply).not.toHaveBeenCalled(); + + scope.stickyTopbar = true; + scope.isSticky = jasmine.createSpy('isSticky').andReturn(false); + angular.element($window).triggerHandler('scroll'); + expect(scope.$apply).not.toHaveBeenCalled(); + + scope.stickyTopbar = false; + scope.isSticky = jasmine.createSpy('isSticky').andReturn(true); + angular.element($window).triggerHandler('scroll'); + expect(scope.$apply).not.toHaveBeenCalled(); + }); + }); + }); }); diff --git a/src/topbar/topbar.js b/src/topbar/topbar.js index 634dd9a..12a12fa 100644 --- a/src/topbar/topbar.js +++ b/src/topbar/topbar.js @@ -147,7 +147,7 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) var updateStickyPositioning = function() { if (!scope.stickyTopbar || !scope.isSticky()) { - return; + return false; } var distance = stickyoffset; @@ -159,6 +159,7 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) topbarContainer.removeClass('fixed'); body.css('padding-top', ''); } + return true; }; var onResize = function() { @@ -181,8 +182,10 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) }; var onScroll = function() { - updateStickyPositioning(); - scope.$apply(); + var updated = updateStickyPositioning(); + if (updated === true) { + scope.$apply(); + } }; scope.toggle = function(on) {