From 4c752bf8c74fe82cb3dcc5386fe8bb39b5bc0357 Mon Sep 17 00:00:00 2001 From: Jeff Browning Date: Sun, 12 Apr 2015 20:20:33 -0400 Subject: [PATCH 1/5] chore(topbar): use topbarContainer instead selecting again --- src/topbar/topbar.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/topbar/topbar.js b/src/topbar/topbar.js index 17b91dd..681285c 100644 --- a/src/topbar/topbar.js +++ b/src/topbar/topbar.js @@ -150,14 +150,13 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) return; } - var $class = angular.element($document[0].querySelector('.' + scope.settings.stickyClass)); var distance = stickyoffset; - if ($window.pageYOffset > distance && !$class.hasClass('fixed')) { - $class.addClass('fixed'); + if ($window.pageYOffset > distance && !topbarContainer.hasClass('fixed')) { + topbarContainer.addClass('fixed'); body.css('padding-top', scope.originalHeight + 'px'); - } else if ($window.pageYOffset <= distance && $class.hasClass('fixed')) { - $class.removeClass('fixed'); + } else if ($window.pageYOffset <= distance && topbarContainer.hasClass('fixed')) { + topbarContainer.removeClass('fixed'); body.css('padding-top', ''); } }; @@ -193,7 +192,7 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) var expand = (on === undefined) ? !topbar.hasClass('expanded') : on; - if (expand){ + if (expand) { topbar.addClass('expanded'); } else { From fd2ccebb64f29fe54d364e4ee37d113cc318883f Mon Sep 17 00:00:00 2001 From: Jeff Browning Date: Mon, 13 Apr 2015 09:22:50 -0400 Subject: [PATCH 2/5] fix(topbar): Fix stickyoffset on scrolled refresh Fixes #208 --- src/topbar/topbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/topbar/topbar.js b/src/topbar/topbar.js index 681285c..b3b44fe 100644 --- a/src/topbar/topbar.js +++ b/src/topbar/topbar.js @@ -232,7 +232,7 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) if(topbarContainer.hasClass('fixed') || isSticky() ) { scope.stickyTopbar = true; scope.height = topbarContainer[0].offsetHeight; - var stickyoffset = topbarContainer[0].getBoundingClientRect().top; + var stickyoffset = topbarContainer[0].getBoundingClientRect().top + $window.pageYOffset; } else { scope.height = topbar[0].offsetHeight; } From ac795418233797bff1e5ed8c823907a3a9c57ecf Mon Sep 17 00:00:00 2001 From: Jeff Browning Date: Mon, 13 Apr 2015 10:59:51 -0400 Subject: [PATCH 3/5] chore(topbar): Refactor topbar specs --- src/topbar/test/topbar.spec.js | 221 +++++++++++++++++---------------- 1 file changed, 113 insertions(+), 108 deletions(-) diff --git a/src/topbar/test/topbar.spec.js b/src/topbar/test/topbar.spec.js index 130263a..3d183db 100644 --- a/src/topbar/test/topbar.spec.js +++ b/src/topbar/test/topbar.spec.js @@ -1,131 +1,136 @@ -describe('topbar directive', function () { - var $rootScope, element, $document; +describe('topbar directive', function() { + var $rootScope, $document, $compile, $window, element, containerElement; - var setMobile = function(windowMock){ - windowMock.matchMedia.andReturn({matches: false}); - }; - - var setDesktop = function(windowMock){ - windowMock.matchMedia.andReturn({matches: true}); - }; - - beforeEach(module('template/topbar/top-bar.html')); - beforeEach(module('template/topbar/has-dropdown.html')); - beforeEach(module('template/topbar/toggle-top-bar.html')); - beforeEach(module('template/topbar/top-bar-section.html')); - beforeEach(module('template/topbar/top-bar-dropdown.html')); + beforeEach(function() { + $window = angular.extend(window, { + pageYOffset: 0, + scrollTo: jasmine.createSpy('scrollTo'), + matchMedia: jasmine.createSpy('matchMedia').andReturn({matches: false}), + }); - beforeEach(module('mm.foundation.topbar', function($provide){ - window.matchMedia = jasmine.createSpy('matchMedia').andReturn({matches: false}); - $provide.value('$window', window); - })); + module( + 'mm.foundation.topbar', + 'template/topbar/top-bar.html', + 'template/topbar/has-dropdown.html', + 'template/topbar/toggle-top-bar.html', + 'template/topbar/top-bar-section.html', + 'template/topbar/top-bar-dropdown.html', + {$window: $window}); - beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) { - $compile = _$compile_; - $rootScope = _$rootScope_; - $document = _$document_; + inject(function(_$compile_, _$rootScope_, _$document_) { + $compile = _$compile_; + $rootScope = _$rootScope_; + $document = _$document_; - element = $compile( - '' + - '
' + - '' + - '
    ' + - '
  • ' + - '

    My Site

    ' + - '
    • ' + - '' + - '
' + - '' + - '' + - '' + - '' + - '' + - '
Content
' + - '
' + - '')($rootScope); - $('body', $document).append(element); - $rootScope.$digest(); - })); + }); + }); beforeEach(inject(function ($rootScope) { this.addMatchers({ toHaveDropDownsOpen: function(noOfLevels) { - var dropDownDomEls = this.actual.find('li.has-dropdown.not-click'); + var dropDownDomEls = element.find('li.has-dropdown.not-click'); return dropDownDomEls.length === noOfLevels; }, toHaveMobileMenuOpen: function() { - var els = this.actual.find('nav.top-bar.expanded'); - return !!els.length; + return element.hasClass("expanded"); } }); })); - it('has a "top-bar" css class', function() { - expect(element.children('nav')).toHaveClass('top-bar'); - }); + var setMobile = function() { + $window.matchMedia.andReturn({matches: false}); + }; - it('has a drop down open on large screen', inject(function($window) { - setDesktop($window); - $('#dropdown', element).trigger('mouseenter'); - expect($window.matchMedia).toHaveBeenCalled(); - expect(element).toHaveDropDownsOpen(1); - })); + var setDesktop = function() { + $window.matchMedia.andReturn({matches: true}); + }; - it('has no drop downs open on small screen', inject(function($window) { - setMobile($window); - $('#dropdown', element).trigger('mouseenter'); - expect($window.matchMedia).toHaveBeenCalled(); - expect(element).toHaveDropDownsOpen(0); - })); + var compileDirective = function(markup) { + if (angular.isUndefined(markup)) { + markup = + '
' + + '' + + '
    ' + + '
  • ' + + '

    My Site

    ' + + '
    • ' + + '' + + '
' + + '' + + '' + + '' + + '' + + '' + + '
Content
' + + '
'; + containerElement = $compile(markup)($rootScope); + $('body', $document).append(element); + $rootScope.$digest(); + element = containerElement.find("nav"); + } + } - it('has no mobile menu opening on large screen', inject(function($window) { - setDesktop($window); - $('#menu-toggle', element).trigger('click'); - expect($window.matchMedia).toHaveBeenCalled(); - expect(element).not.toHaveMobileMenuOpen(); - })); + describe("basic behavior", function() { + beforeEach(function() { + compileDirective(); + }); - it('opens and closes mobile menu on small screen', inject(function($window) { - setMobile($window); - $('#menu-toggle', element).trigger('click'); - expect($window.matchMedia).toHaveBeenCalled(); - expect(element).toHaveMobileMenuOpen(); - $('#menu-toggle', element).trigger('click'); - expect(element).not.toHaveMobileMenuOpen(); - })); + it('has a "top-bar" css class', function() { + expect(element).toHaveClass('top-bar'); + }); - it('opens the submenu when a dropdown is clicked on mobile', inject(function($window) { - setMobile($window); - $('#menu-toggle', element).trigger('click'); - expect($window.matchMedia).toHaveBeenCalled(); - var beforeHeight = $('.top-bar', element)[0].style.height; - $('#dropdown', element).trigger('click'); - var afterHeight = $('.top-bar', element)[0].style.height; - expect(afterHeight).toNotEqual(beforeHeight); - expect($('#top-section', element)[0].style.left).toEqual('-100%'); - })); + it('has a drop down open on large screen', inject(function($window) { + setDesktop(); + $('#dropdown', element).trigger('mouseenter'); + expect($window.matchMedia).toHaveBeenCalled(); + expect(element).toHaveDropDownsOpen(1); + })); + + it('has no drop downs open on small screen', inject(function($window) { + setMobile(); + $('#dropdown', element).trigger('mouseenter'); + expect($window.matchMedia).toHaveBeenCalled(); + expect(element).toHaveDropDownsOpen(0); + })); - // it('has f-topbar-fixed class on body after link is clicked on a fixed mobile topbar', inject(function($window) { - // setMobile($window); - // $('#menu-toggle', element).trigger('click'); - // expect($window.matchMedia).toHaveBeenCalled(); - // $('#dropdown', element).trigger('click'); - // $('#alink', element).trigger('click'); - // expect($('body', $document)).toHaveClass('f-topbar-fixed'); - // })); + it('has no mobile menu opening on large screen', inject(function($window) { + setDesktop($window); + $('#menu-toggle', element).trigger('click'); + expect($window.matchMedia).toHaveBeenCalled(); + expect(element).not.toHaveMobileMenuOpen(); + })); + it('opens and closes mobile menu on small screen', inject(function($window) { + setMobile(); + $('#menu-toggle', element).trigger('click'); + expect($window.matchMedia).toHaveBeenCalled(); + expect(element).toHaveMobileMenuOpen(); + $('#menu-toggle', element).trigger('click'); + expect(element).not.toHaveMobileMenuOpen(); + })); + + it('opens the submenu when a dropdown is clicked on mobile', inject(function($window) { + var topSection = element.find('#top-section'); + var menuToggle = element.find('#menu-toggle'); + setMobile(); + expect(element.hasClass("expanded")).toBe(false); + menuToggle.trigger('click'); + expect($window.matchMedia).toHaveBeenCalled(); + expect(element.hasClass("expanded")).toBe(true); + })); + }); }); From 2095299fb427cd9494c5a1ac9492b2ad44a65b7b Mon Sep 17 00:00:00 2001 From: Jeff Browning Date: Mon, 13 Apr 2015 12:01:02 -0400 Subject: [PATCH 4/5] chore(topbar): Add basic sticky topbar spec --- src/topbar/test/topbar.spec.js | 38 ++++++++++++++++++++++++++++------ src/topbar/topbar.js | 7 +++---- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/src/topbar/test/topbar.spec.js b/src/topbar/test/topbar.spec.js index 3d183db..c77b1a4 100644 --- a/src/topbar/test/topbar.spec.js +++ b/src/topbar/test/topbar.spec.js @@ -21,7 +21,6 @@ describe('topbar directive', function() { $compile = _$compile_; $rootScope = _$rootScope_; $document = _$document_; - }); }); @@ -77,12 +76,13 @@ describe('topbar directive', function() { '' + '
Content
' + ''; - containerElement = $compile(markup)($rootScope); - $('body', $document).append(element); - $rootScope.$digest(); - element = containerElement.find("nav"); } - } + + containerElement = $compile(markup)($rootScope); + $('body', $document).append(element); + $rootScope.$digest(); + element = containerElement.find("nav"); + }; describe("basic behavior", function() { beforeEach(function() { @@ -133,4 +133,30 @@ describe('topbar directive', function() { expect(element.hasClass("expanded")).toBe(true); })); }); + + describe("sticky", function() { + var markup; + + beforeEach(function() { + markup = + '
"' + '
' + + '' + + '
    ' + + '
  • ' + + '

    My Site

    ' + + '
    • ' + + '' + + '
' + + '' + + '
'; + }); + + it('does not apply the fixed class on initial load', function() { + compileDirective(markup); + expect(containerElement.hasClass('fixed')).toBe(false); + }); + }); }); diff --git a/src/topbar/topbar.js b/src/topbar/topbar.js index b3b44fe..bcb3fc3 100644 --- a/src/topbar/topbar.js +++ b/src/topbar/topbar.js @@ -247,13 +247,12 @@ angular.module("mm.foundation.topbar", ['mm.foundation.mediaQueries']) } }); - angular.element($window).bind('resize', onResize); - angular.element($window).bind("scroll", onScroll); + angular.element($window).bind('scroll', onScroll); scope.$on('$destroy', function() { - angular.element($window).unbind("scroll", onResize); - angular.element($window).unbind("resize", onScroll); + angular.element($window).unbind('scroll', onResize); + angular.element($window).unbind('resize', onScroll); }); if (topbarContainer.hasClass('fixed')) { From a0dd5f8d9386c16d35fa25811a956c593e1fd6c6 Mon Sep 17 00:00:00 2001 From: Jeff Browning Date: Mon, 13 Apr 2015 12:06:02 -0400 Subject: [PATCH 5/5] fix(topbar): Remove unnecessary padding div in spec --- src/topbar/test/topbar.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/topbar/test/topbar.spec.js b/src/topbar/test/topbar.spec.js index c77b1a4..5f75948 100644 --- a/src/topbar/test/topbar.spec.js +++ b/src/topbar/test/topbar.spec.js @@ -139,7 +139,6 @@ describe('topbar directive', function() { beforeEach(function() { markup = - '
"' '
' + '' + '
    ' +