krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 15:17:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added ability to close menu when a child element has closeMenu directive

Browse Source
This commit is contained in:
TheHollidayInn
2015-08-26 15:32:59 -05:00
parent 049f9280a2
commit 6fb29d8766
5 changed files with 54 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
test/spec/directives/close-menu.directive.js
View File

@@ -1,7 +1,7 @@
'use strict'; 'use strict';
describe('closeMenu Directive', function() { describe('closeMenu Directive', function() {
var menuElement, scope; var menuElement, menuElementWithChild, menuElementChild, scope;
beforeEach(module('habitrpg')); beforeEach(module('habitrpg'));
@@ -9,17 +9,33 @@ describe('closeMenu Directive', function() {
scope = $rootScope.$new(); scope = $rootScope.$new();
var element = '<a data-close-menu menu="mobile">'; var element = '<a data-close-menu menu="mobile">';
var elementWithChild = '<li></li>';
var elementChild = '<a data-close-menu></a>';
menuElement = $compile(element)(scope); menuElement = $compile(element)(scope);
menuElementWithChild = $compile(elementWithChild)(scope);
menuElementChild = $compile(elementChild)(scope);
scope.$digest(); scope.$digest();
})); }));
it('closes a connected menu when element is clicked', function() { it('closes a connected menu when element is clicked', function() {
scope._expandedMenu = 'mobile'; scope._expandedMenu = {};
scope._expandedMenu.menu = 'mobile';
menuElement.appendTo(document.body); menuElement.appendTo(document.body);
menuElement.triggerHandler('click'); 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)
}); });
}); });

7
test/spec/directives/expand-menu.directive.js
View File

@@ -20,15 +20,16 @@ describe('expandMenu Directive', function() {
menuElement.triggerHandler('click'); 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() { 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.appendTo(document.body);
menuElement.triggerHandler('click'); menuElement.triggerHandler('click');
expect(scope._expandedMenu).to.eql(null) expect(scope._expandedMenu.menu).to.eql(null)
}); });
}); });

5
website/public/js/directives/close-menu.directive.js
View File

@@ -11,7 +11,10 @@
restrict: 'A', restrict: 'A',
link: function($scope, element, attrs) { link: function($scope, element, attrs) {
element.on('click', function(event) { element.on('click', function(event) {
$scope._expandedMenu = null; if ( $scope.$parent._expandedMenu ) {
$scope.$parent._expandedMenu.menu = null;
}
$scope._expandedMenu.menu = null;
$scope.$apply() $scope.$apply()
}); });
} }

5
website/public/js/directives/expand-menu.directive.js
View File

@@ -11,7 +11,10 @@
restrict: 'A', restrict: 'A',
link: function($scope, element, attrs) { link: function($scope, element, attrs) {
element.on('click', function(event) { 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() $scope.$apply()
}); });
} }

46
website/views/shared/header/menu.jade
View File

@@ -2,9 +2,9 @@ nav.toolbar(ng-controller='MenuCtrl')
.toolbar-container .toolbar-container
ul.toolbar-mobile-nav ul.toolbar-mobile-nav
li.toolbar-mobile 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 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') h4=env.t('menu')
div div
ul.toolbar-submenu ul.toolbar-submenu
@@ -79,9 +79,9 @@ nav.toolbar(ng-controller='MenuCtrl')
li.toolbar-button-dropdown li.toolbar-button-dropdown
a(ui-sref='options.profile.avatar', data-close-menu) a(ui-sref='options.profile.avatar', data-close-menu)
span=env.t('user') 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 &#9776; span &#9776;
div(ng-show='_expandedMenu == "avatar"', data-close-menu) div(ng-show='_expandedMenu.menu == "avatar"', data-close-menu)
ul.toolbar-submenu ul.toolbar-submenu
li li
a(ui-sref='options.profile.avatar')=env.t('avatar') 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}} span.badge.badge-danger {{user.inbox.newMessages}}
a(ui-sref='options.social.tavern', data-close-menu) a(ui-sref='options.social.tavern', data-close-menu)
span=env.t('social') 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 &#9776; span &#9776;
div(ng-show='_expandedMenu == "social"', data-close-menu) div(ng-show='_expandedMenu.menu == "social"', data-close-menu)
ul.toolbar-submenu ul.toolbar-submenu
li li
a(ui-sref='options.social.inbox') a(ui-sref='options.social.inbox')
@@ -117,9 +117,9 @@ nav.toolbar(ng-controller='MenuCtrl')
li.toolbar-button-dropdown li.toolbar-button-dropdown
a(ui-sref='options.inventory.drops', data-close-menu) a(ui-sref='options.inventory.drops', data-close-menu)
span=env.t('inventory') 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 &#9776; span &#9776;
div(ng-show='_expandedMenu == "inventory"', data-close-menu) div(ng-show='_expandedMenu.menu == "inventory"', data-close-menu)
ul.toolbar-submenu ul.toolbar-submenu
li li
a(ui-sref='options.inventory.drops')=env.t('market') a(ui-sref='options.inventory.drops')=env.t('market')
@@ -138,9 +138,9 @@ nav.toolbar(ng-controller='MenuCtrl')
li.toolbar-button-dropdown li.toolbar-button-dropdown
a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}', data-close-menu) a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}', data-close-menu)
span=env.t('data') 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 &#9776; span &#9776;
div(ng-show='_expandedMenu == "data"', data-close-menu) div(ng-show='_expandedMenu.menu == "data"', data-close-menu)
ul.toolbar-submenu ul.toolbar-submenu
li li
a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}')=env.t('dataTool') 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/') a(target="_blank" href='http://habitica.wikia.com/wiki/')
span.glyphicon.glyphicon-question-sign span.glyphicon.glyphicon-question-sign
span=env.t('help') 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 &#9776; span &#9776;
div(ng-show='_expandedMenu == "help"', data-close-menu) div(ng-show='_expandedMenu.menu == "help"', data-close-menu)
ul.toolbar-submenu ul.toolbar-submenu
li li
a(target="_blank" href='http://habitica.wikia.com/wiki/')=env.t('overview') a(target="_blank" href='http://habitica.wikia.com/wiki/')=env.t('overview')
@@ -173,35 +173,35 @@ nav.toolbar(ng-controller='MenuCtrl')
li.toolbar-notifs li.toolbar-notifs
a(data-expand-menu, menu='notifs') a(data-expand-menu, menu='notifs')
span.glyphicon(ng-class='iconClasses()') span.glyphicon(ng-class='iconClasses()')
div(ng-show='_expandedMenu=="notifs"', data-close-menu) div(ng-show='_expandedMenu.menu=="notifs"')
h4=env.t('notifications') h4=env.t('notifications')
div div
ul.toolbar-notifs-notifs ul.toolbar-notifs-notifs
li.toolbar-notifs-no-messages(ng-if='hasNoNotifications()')=env.t('noNotifications') li.toolbar-notifs-no-messages(ng-if='hasNoNotifications()')=env.t('noNotifications')
li(ng-if='user.purchased.plan.mysteryItems.length') 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.glyphicon.glyphicon-gift
span=env.t('newSubscriberItem') span=env.t('newSubscriberItem')
li(ng-if='user.invitations.party.id') 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.glyphicon.glyphicon-user
span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}) span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'})
li(ng-if='user.flags.cardReceived') 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.glyphicon.glyphicon-envelope
span=env.t('cardReceived') span=env.t('cardReceived')
a(ng-click='clearCards()', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') a(ng-click='clearCards()', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true')
span.glyphicon.glyphicon-remove-circle span.glyphicon.glyphicon-remove-circle
li(ng-repeat='guild in user.invitations.guilds') 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.glyphicon.glyphicon-user
span=env.t('invitedTo', {name: '{{guild.name}}'}) span=env.t('invitedTo', {name: '{{guild.name}}'})
li(ng-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points') 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.glyphicon.glyphicon-plus-sign
span=env.t('haveUnallocated', {points: '{{user.stats.points}}'}) span=env.t('haveUnallocated', {points: '{{user.stats.points}}'})
li(ng-repeat='(k,v) in user.newMessages', ng-if='v.value') 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.glyphicon.glyphicon-comment
span {{v.name}} span {{v.name}}
a(ng-click='clearMessages(k)', popover=env.t('clear'),popover-placement='right',popover-trigger='mouseenter',popover-append-to-body='true') 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 li.toolbar-audio
a(data-expand-menu, menu="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'}") 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') h4=env.t('audioTheme')
div div
ul.toolbar-submenu ul.toolbar-submenu
@@ -231,7 +231,7 @@ nav.toolbar(ng-controller='MenuCtrl')
li.toolbar-settings li.toolbar-settings
a(data-expand-menu, menu="settings") a(data-expand-menu, menu="settings")
span.glyphicon.glyphicon-cog 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') h4=env.t('settings')
div div
ul.toolbar-submenu ul.toolbar-submenu
@@ -271,10 +271,10 @@ nav.toolbar(ng-controller='MenuCtrl')
span.shop_silver span.shop_silver
span {{Shared.silver(user.stats.gp)}} 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') 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)') .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') 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"})') .npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff",{size:"lg"})')