From 6fb29d8766c414c7d6b1e0f970c0f1bfdead5f8c Mon Sep 17 00:00:00 2001 From: TheHollidayInn Date: Wed, 26 Aug 2015 15:32:59 -0500 Subject: [PATCH] Added ability to close menu when a child element has closeMenu directive --- test/spec/directives/close-menu.directive.js | 22 +++++++-- test/spec/directives/expand-menu.directive.js | 7 +-- .../js/directives/close-menu.directive.js | 5 +- .../js/directives/expand-menu.directive.js | 5 +- website/views/shared/header/menu.jade | 46 +++++++++---------- 5 files changed, 54 insertions(+), 31 deletions(-) diff --git a/test/spec/directives/close-menu.directive.js b/test/spec/directives/close-menu.directive.js index 3c50b16cc6..6dc9bdfda1 100644 --- a/test/spec/directives/close-menu.directive.js +++ b/test/spec/directives/close-menu.directive.js @@ -1,7 +1,7 @@ 'use strict'; describe('closeMenu Directive', function() { - var menuElement, scope; + var menuElement, menuElementWithChild, menuElementChild, scope; beforeEach(module('habitrpg')); @@ -9,17 +9,33 @@ describe('closeMenu Directive', function() { scope = $rootScope.$new(); var element = ''; + var elementWithChild = '
  • '; + var elementChild = '    '; menuElement = $compile(element)(scope); + menuElementWithChild = $compile(elementWithChild)(scope); + menuElementChild = $compile(elementChild)(scope); scope.$digest(); })); it('closes a connected menu when element is clicked', function() { - scope._expandedMenu = 'mobile'; + scope._expandedMenu = {}; + scope._expandedMenu.menu = 'mobile'; menuElement.appendTo(document.body); menuElement.triggerHandler('click'); - expect(scope._expandedMenu).to.eql(null) + expect(scope._expandedMenu.menu).to.eql(null) + }); + + it('closes a connected menu when child element is clicked', function() { + scope._expandedMenu = {}; + scope._expandedMenu.menu = 'mobile'; + menuElementWithChild.appendTo(document.body); + menuElementChild.appendTo(menuElementWithChild); + + menuElementChild.triggerHandler('click'); + + expect(scope._expandedMenu.menu).to.eql(null) }); }); diff --git a/test/spec/directives/expand-menu.directive.js b/test/spec/directives/expand-menu.directive.js index f73de77c5b..a9570ca941 100644 --- a/test/spec/directives/expand-menu.directive.js +++ b/test/spec/directives/expand-menu.directive.js @@ -20,15 +20,16 @@ describe('expandMenu Directive', function() { menuElement.triggerHandler('click'); - expect(scope._expandedMenu).to.eql('mobile') + expect(scope._expandedMenu.menu).to.eql('mobile') }); it('closes a connected menu when it is already open', function() { - scope._expandedMenu = 'mobile'; + scope._expandedMenu = {}; + scope._expandedMenu.menu = 'mobile'; menuElement.appendTo(document.body); menuElement.triggerHandler('click'); - expect(scope._expandedMenu).to.eql(null) + expect(scope._expandedMenu.menu).to.eql(null) }); }); diff --git a/website/public/js/directives/close-menu.directive.js b/website/public/js/directives/close-menu.directive.js index c932cfcd41..0bc4b72931 100644 --- a/website/public/js/directives/close-menu.directive.js +++ b/website/public/js/directives/close-menu.directive.js @@ -11,7 +11,10 @@ restrict: 'A', link: function($scope, element, attrs) { element.on('click', function(event) { - $scope._expandedMenu = null; + if ( $scope.$parent._expandedMenu ) { + $scope.$parent._expandedMenu.menu = null; + } + $scope._expandedMenu.menu = null; $scope.$apply() }); } diff --git a/website/public/js/directives/expand-menu.directive.js b/website/public/js/directives/expand-menu.directive.js index 246c649a70..c4f142fa6d 100644 --- a/website/public/js/directives/expand-menu.directive.js +++ b/website/public/js/directives/expand-menu.directive.js @@ -11,7 +11,10 @@ restrict: 'A', link: function($scope, element, attrs) { element.on('click', function(event) { - $scope._expandedMenu = ($scope._expandedMenu === attrs.menu) ? null : attrs.menu; + if (!$scope._expandedMenu) { + $scope._expandedMenu = {}; + } + $scope._expandedMenu.menu = ($scope._expandedMenu.menu === attrs.menu) ? null : attrs.menu; $scope.$apply() }); } diff --git a/website/views/shared/header/menu.jade b/website/views/shared/header/menu.jade index 12a3ac5298..cdeacaf924 100644 --- a/website/views/shared/header/menu.jade +++ b/website/views/shared/header/menu.jade @@ -2,9 +2,9 @@ nav.toolbar(ng-controller='MenuCtrl') .toolbar-container ul.toolbar-mobile-nav li.toolbar-mobile - a(data-expand-menu, menu="mobile", ng-class='{active: _expandedMenu=="mobile"}') + a(data-expand-menu, menu="mobile", ng-class='{active: _expandedMenu.menu=="mobile"}') span.glyphicon.glyphicon-align-justify - div(ng-show='_expandedMenu=="mobile"', data-close-menu) + div(ng-show='_expandedMenu.menu=="mobile"', data-close-menu) h4=env.t('menu') div ul.toolbar-submenu @@ -79,9 +79,9 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-button-dropdown a(ui-sref='options.profile.avatar', data-close-menu) span=env.t('user') - a(ng-class='{active: _expandedMenu == "avatar"}', data-expand-menu, menu='avatar') + a(ng-class='{active: _expandedMenu.menu == "avatar"}', data-expand-menu, menu='avatar') span ☰ - div(ng-show='_expandedMenu == "avatar"', data-close-menu) + div(ng-show='_expandedMenu.menu == "avatar"', data-close-menu) ul.toolbar-submenu li a(ui-sref='options.profile.avatar')=env.t('avatar') @@ -96,9 +96,9 @@ nav.toolbar(ng-controller='MenuCtrl') span.badge.badge-danger {{user.inbox.newMessages}} a(ui-sref='options.social.tavern', data-close-menu) span=env.t('social') - a(ng-class='{active: _expandedMenu == "social"}', data-expand-menu, menu='social') + a(ng-class='{active: _expandedMenu.menu == "social"}', data-expand-menu, menu='social') span ☰ - div(ng-show='_expandedMenu == "social"', data-close-menu) + div(ng-show='_expandedMenu.menu == "social"', data-close-menu) ul.toolbar-submenu li a(ui-sref='options.social.inbox') @@ -117,9 +117,9 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-button-dropdown a(ui-sref='options.inventory.drops', data-close-menu) span=env.t('inventory') - a(ng-class='{active: _expandedMenu == "inventory"}' data-expand-menu, menu='inventory') + a(ng-class='{active: _expandedMenu.menu == "inventory"}' data-expand-menu, menu='inventory') span ☰ - div(ng-show='_expandedMenu == "inventory"', data-close-menu) + div(ng-show='_expandedMenu.menu == "inventory"', data-close-menu) ul.toolbar-submenu li a(ui-sref='options.inventory.drops')=env.t('market') @@ -138,9 +138,9 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-button-dropdown a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}', data-close-menu) span=env.t('data') - a(ng-class='{active: _expandedMenu == "data"}', data-expand-menu, menu='data') + a(ng-class='{active: _expandedMenu.menu == "data"}', data-expand-menu, menu='data') span ☰ - div(ng-show='_expandedMenu == "data"', data-close-menu) + div(ng-show='_expandedMenu.menu == "data"', data-close-menu) ul.toolbar-submenu li a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}')=env.t('dataTool') @@ -150,9 +150,9 @@ nav.toolbar(ng-controller='MenuCtrl') a(target="_blank" href='http://habitica.wikia.com/wiki/') span.glyphicon.glyphicon-question-sign span=env.t('help') - a(ng-class='{active: _expandedMenu == "help"}', data-expand-menu, menu='help') + a(ng-class='{active: _expandedMenu.menu == "help"}', data-expand-menu, menu='help') span ☰ - div(ng-show='_expandedMenu == "help"', data-close-menu) + div(ng-show='_expandedMenu.menu == "help"', data-close-menu) ul.toolbar-submenu li a(target="_blank" href='http://habitica.wikia.com/wiki/')=env.t('overview') @@ -173,35 +173,35 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-notifs a(data-expand-menu, menu='notifs') span.glyphicon(ng-class='iconClasses()') - div(ng-show='_expandedMenu=="notifs"', data-close-menu) + div(ng-show='_expandedMenu.menu=="notifs"') h4=env.t('notifications') div ul.toolbar-notifs-notifs li.toolbar-notifs-no-messages(ng-if='hasNoNotifications()')=env.t('noNotifications') li(ng-if='user.purchased.plan.mysteryItems.length') - a(ng-click='$state.go("options.inventory.drops"); expandMenu(null)') + a(ng-click='$state.go("options.inventory.drops"); ', data-close-menu) span.glyphicon.glyphicon-gift span=env.t('newSubscriberItem') li(ng-if='user.invitations.party.id') - a(ui-sref='options.social.party') + a(ui-sref='options.social.party', data-close-menu) span.glyphicon.glyphicon-user span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}) li(ng-if='user.flags.cardReceived') - a(ng-click='$state.go("options.inventory.drops"); expandMenu(null)') + a(ng-click='$state.go("options.inventory.drops"); ', data-close-menu) span.glyphicon.glyphicon-envelope span=env.t('cardReceived') a(ng-click='clearCards()', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') span.glyphicon.glyphicon-remove-circle li(ng-repeat='guild in user.invitations.guilds') - a(ui-sref='options.social.guilds.public') + a(ui-sref='options.social.guilds.public', data-close-menu) span.glyphicon.glyphicon-user span=env.t('invitedTo', {name: '{{guild.name}}'}) li(ng-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points') - a(ui-sref='options.profile.stats') + a(ui-sref='options.profile.stats', data-close-menu) span.glyphicon.glyphicon-plus-sign span=env.t('haveUnallocated', {points: '{{user.stats.points}}'}) li(ng-repeat='(k,v) in user.newMessages', ng-if='v.value') - a(ng-click='k==party._id ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k}); expandMenu(null)') + a(ng-click='k==party._id ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k}); ', data-close-menu) span.glyphicon.glyphicon-comment span {{v.name}} a(ng-click='clearMessages(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') @@ -213,7 +213,7 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-audio a(data-expand-menu, menu="audio") span.glyphicon(ng-class="{'glyphicon-volume-off':user.preferences.sound=='off', 'glyphicon-volume-up':user.preferences.sound!='off'}") - div(ng-show='_expandedMenu=="audio"',style='min-width:150px', data-close-menu) + div(ng-show='_expandedMenu.menu=="audio"',style='min-width:150px', data-close-menu) h4=env.t('audioTheme') div ul.toolbar-submenu @@ -231,7 +231,7 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-settings a(data-expand-menu, menu="settings") span.glyphicon.glyphicon-cog - div(ng-show='_expandedMenu=="settings"', data-close-menu) + div(ng-show='_expandedMenu.menu=="settings"', data-close-menu) h4=env.t('settings') div ul.toolbar-submenu @@ -271,10 +271,10 @@ nav.toolbar(ng-controller='MenuCtrl') span.shop_silver span {{Shared.silver(user.stats.gp)}} - ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu}') + ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu.menu}') li.toolbar-bailey-container(ng-if='user.flags.tour.intro!=-2') .npc_justin_head.npc_bailey_head(popover="Continue Tour", popover-trigger='mouseenter', popover-placement='bottom', ng-click='Guide.goto("intro", user.flags.tour.intro, true)') - ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu}') + ul.toolbar-bailey(ng-class='{inactive: !_expandedMenu.menu}') li.toolbar-bailey-container(ng-if='user.flags.newStuff') .npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff",{size:"lg"})')