From e762a51e4cc089930d3e7a56a9fe0dfbde98f96d Mon Sep 17 00:00:00 2001 From: TheHollidayInn Date: Wed, 19 Aug 2015 08:53:51 -0500 Subject: [PATCH] Moved menu expand directive and created menu close directive --- website/public/js/controllers/menuCtrl.js | 4 +- .../js/directives/close-menu.directive.js | 20 +++++ .../js/directives/expand-menu.directive.js | 20 +++++ website/public/manifest.json | 2 + website/views/shared/header/menu.jade | 78 +++++++++---------- 5 files changed, 82 insertions(+), 42 deletions(-) create mode 100644 website/public/js/directives/close-menu.directive.js create mode 100644 website/public/js/directives/expand-menu.directive.js diff --git a/website/public/js/controllers/menuCtrl.js b/website/public/js/controllers/menuCtrl.js index f9f8f9e69c..651735880e 100644 --- a/website/public/js/controllers/menuCtrl.js +++ b/website/public/js/controllers/menuCtrl.js @@ -9,9 +9,7 @@ angular.module('habitrpg') window.location.href = '/logout'; }; - $scope.expandMenu = function(menu) { - $scope._expandedMenu = ($scope._expandedMenu == menu) ? null : menu; - }; + $scope._expandedMenu = null; function selectNotificationValue(mysteryValue, invitationValue, cardValue, unallocatedValue, messageValue, noneValue) { var user = $scope.user; diff --git a/website/public/js/directives/close-menu.directive.js b/website/public/js/directives/close-menu.directive.js new file mode 100644 index 0000000000..776e153966 --- /dev/null +++ b/website/public/js/directives/close-menu.directive.js @@ -0,0 +1,20 @@ +'use strict'; + +(function(){ + + angular + .module('habitrpg') + .directive('closeMenu', closeMenu); + + function closeMenu() { + return { + restrict: 'A', + link: function(scope, element, attrs) { + element.on('click', function(event) { + scope._expandedMenu = null; + scope.$apply() + }); + } + } + } +}()); diff --git a/website/public/js/directives/expand-menu.directive.js b/website/public/js/directives/expand-menu.directive.js new file mode 100644 index 0000000000..73a070a2ac --- /dev/null +++ b/website/public/js/directives/expand-menu.directive.js @@ -0,0 +1,20 @@ +'use strict'; + +(function(){ + + angular + .module('habitrpg') + .directive('expandMenu', expandMenu); + + function expandMenu() { + return { + restrict: 'A', + link: function(scope, element, attrs) { + element.on('click', function(event) { + scope._expandedMenu = (scope._expandedMenu == attrs.menu) ? null : attrs.menu; + scope.$apply() + }); + } + } + } +}()); diff --git a/website/public/manifest.json b/website/public/manifest.json index 848437642a..227d42c2e0 100644 --- a/website/public/manifest.json +++ b/website/public/manifest.json @@ -58,6 +58,8 @@ "js/filters/roundLargeNumbers.js", "js/filters/taskOrdering.js", + "js/directives/close-menu.directive.js", + "js/directives/expand-menu.directive.js", "js/directives/focus-me.directive.js", "js/directives/from-now.directive.js", "js/directives/habitrpg-tasks.directive.js", diff --git a/website/views/shared/header/menu.jade b/website/views/shared/header/menu.jade index 75adc03d94..eba7ed60b8 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(ng-click='expandMenu("mobile")', ng-class='{active: _expandedMenu=="mobile"}') + a(data-expand-menu, menu="mobile", ng-class='{active: _expandedMenu=="mobile"}') span.glyphicon.glyphicon-align-justify - div(ng-if='_expandedMenu=="mobile"', ng-click='expandMenu(null)') + div(ng-show='_expandedMenu=="mobile"', data-close-menu) h4=env.t('menu') div ul.toolbar-submenu @@ -71,18 +71,18 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-subscribe-button button(ng-if='!user.purchased.plan.customerId',ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe') li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') + a(data-close-menu)=env.t('close') ul.toolbar-nav li.toolbar-button - a(ui-sref='tasks') + a(ui-sref='tasks', data-close-menu) span=env.t('tasks') li.toolbar-button-dropdown - a(ui-sref='options.profile.avatar') + a(ui-sref='options.profile.avatar', data-close-menu) span=env.t('user') - a(ng-click='expandMenu("avatar")', ng-class='{active: _expandedMenu == "avatar"}') + a(ng-class='{active: _expandedMenu == "avatar"}', data-expand-menu, menu='avatar') span ☰ - div(ng-if='_expandedMenu == "avatar"') - ul.toolbar-submenu(ng-click='expandMenu(null)') + div(ng-show='_expandedMenu == "avatar"', data-close-menu) + ul.toolbar-submenu li a(ui-sref='options.profile.avatar')=env.t('avatar') li @@ -94,12 +94,12 @@ nav.toolbar(ng-controller='MenuCtrl') li.toolbar-button-dropdown a(ui-sref='options.social.inbox', ng-if='user.inbox.newMessages') span.badge.badge-danger {{user.inbox.newMessages}} - a(ui-sref='options.social.tavern') + a(ui-sref='options.social.tavern', data-close-menu) span=env.t('social') - a(ng-click='expandMenu("social")', ng-class='{active: _expandedMenu == "social"}') + a(ng-class='{active: _expandedMenu == "social"}', data-expand-menu, menu='social') span ☰ - div(ng-if='_expandedMenu == "social"') - ul.toolbar-submenu(ng-click='expandMenu(null)') + div(ng-show='_expandedMenu == "social"', data-close-menu) + ul.toolbar-submenu li a(ui-sref='options.social.inbox') span.badge.badge-danger(ng-if='user.inbox.newMessages') {{user.inbox.newMessages}}   @@ -115,12 +115,12 @@ nav.toolbar(ng-controller='MenuCtrl') li a(ui-sref='options.social.hall.heroes')=env.t('hall') li.toolbar-button-dropdown - a(ui-sref='options.inventory.drops') + a(ui-sref='options.inventory.drops', data-close-menu) span=env.t('inventory') - a(ng-click='expandMenu("inventory")', ng-class='{active: _expandedMenu == "inventory"}') + a(ng-class='{active: _expandedMenu == "inventory"}' data-expand-menu, menu='inventory') span ☰ - div(ng-if='_expandedMenu == "inventory"') - ul.toolbar-submenu(ng-click='expandMenu(null)') + div(ng-show='_expandedMenu == "inventory"', data-close-menu) + ul.toolbar-submenu li a(ui-sref='options.inventory.drops')=env.t('market') li @@ -136,12 +136,12 @@ nav.toolbar(ng-controller='MenuCtrl') li a(ui-sref='options.inventory.seasonalshop')=env.t('seasonalShop') li.toolbar-button-dropdown - a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}') + a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}', data-close-menu) span=env.t('data') - a(ng-click='expandMenu("data")', ng-class='{active: _expandedMenu == "data"}') + a(ng-class='{active: _expandedMenu == "data"}', data-expand-menu, menu='data') span ☰ - div(ng-if='_expandedMenu == "data"') - ul.toolbar-submenu(ng-click='expandMenu(null)') + div(ng-show='_expandedMenu == "data"', data-close-menu) + ul.toolbar-submenu li a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}')=env.t('dataTool') li @@ -150,10 +150,10 @@ nav.toolbar(ng-controller='MenuCtrl') a(target="_blank" href='http://habitrpg.wikia.com/wiki/') span.glyphicon.glyphicon-question-sign span=env.t('help') - a(ng-click='expandMenu("help")', ng-class='{active: _expandedMenu == "help"}') + a(ng-class='{active: _expandedMenu == "help"}', data-expand-menu, menu='help') span ☰ - div(ng-if='_expandedMenu == "help"') - ul.toolbar-submenu(ng-click='expandMenu(null)') + div(ng-show='_expandedMenu == "help"', data-close-menu) + ul.toolbar-submenu li a(target="_blank" href='http://habitrpg.wikia.com/wiki/')=env.t('overview') li @@ -171,9 +171,9 @@ nav.toolbar(ng-controller='MenuCtrl') button.highlight(ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe') ul.toolbar-options li.toolbar-notifs - a(ng-click='expandMenu("notifs")') + a(data-expand-menu, menu='notifs') span.glyphicon(ng-class='iconClasses()') - div(ng-if='_expandedMenu=="notifs"') + div(ng-show='_expandedMenu=="notifs"', data-close-menu) h4=env.t('notifications') div ul.toolbar-notifs-notifs @@ -183,7 +183,7 @@ nav.toolbar(ng-controller='MenuCtrl') span.glyphicon.glyphicon-gift span=env.t('newSubscriberItem') li(ng-if='user.invitations.party.id') - a(ui-sref='options.social.party', ng-click='expandMenu(null)') + a(ui-sref='options.social.party') span.glyphicon.glyphicon-user span=env.t('invitedTo', {name: '{{user.invitations.party.name}}'}) li(ng-if='user.flags.cardReceived') @@ -193,11 +193,11 @@ nav.toolbar(ng-controller='MenuCtrl') 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', ng-click='expandMenu(null)') + a(ui-sref='options.social.guilds.public') 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', ng-click='expandMenu(null)') + a(ui-sref='options.profile.stats') 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') @@ -209,35 +209,35 @@ nav.toolbar(ng-controller='MenuCtrl') ul.toolbar-controls li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') + a(data-close-menu)=env.t('close') li.toolbar-audio - a(ng-click='expandMenu("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-if='_expandedMenu=="audio"',style='min-width:150px') + div(ng-show='_expandedMenu=="audio"',style='min-width:150px', data-close-menu) h4=env.t('audioTheme') div - ul.toolbar-submenu(ng-click='expandMenu(null)') + ul.toolbar-submenu // Using [{k,v}] instead of {k:v,k:v} to maintain order ('off' at top) for theme in ['off','danielTheBard', 'wattsTheme', 'gokulTheme'] li a(ng-class="{'bg-primary':user.preferences.sound=='#{theme}'}", ng-click="set({'preferences.sound':'#{theme}'})")=env.t('audioTheme_'+theme) ul.toolbar-controls li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') + a(data-close-menu)=env.t('close') li.toolbar-sync a(ng-click='User.sync()', popover=env.t('sync'),popover-placement='bottom',popover-trigger='mouseenter') span.glyphicon.glyphicon-refresh li.toolbar-settings - a(ng-click='expandMenu("settings")') + a(data-expand-menu, menu="settings") span.glyphicon.glyphicon-cog - div(ng-if='_expandedMenu=="settings"') + div(ng-show='_expandedMenu=="settings"', data-close-menu) h4=env.t('settings') div - ul.toolbar-submenu(ng-click='expandMenu(null)') + ul.toolbar-submenu li a(ng-click='logout()')=env.t('logout') - ul.toolbar-submenu(ng-click='expandMenu(null)') + ul.toolbar-submenu li a(ui-sref='options.settings.settings')=env.t('site') li @@ -250,14 +250,14 @@ nav.toolbar(ng-controller='MenuCtrl') a(ui-sref='options.settings.subscription')=env.t('subscription') li a(ui-sref='options.settings.notifications')=env.t('notifications') - ul.toolbar-submenu(ng-click='expandMenu(null)') + ul.toolbar-submenu li a(href="http://habitrpg.wikia.com/wiki/FAQ", target='_blank')=env.t('FAQ') li a(href="https://vimeo.com/57654086", target='_blank')=env.t('tutorials') ul.toolbar-controls li.toolbar-controls-button - a(ng-click='expandMenu(null)')=env.t('close') + a(data-close-menu)=env.t('close') ul.toolbar-wallet li.toolbar-gems(popover-trigger='mouseenter', popover-title=env.t('gemsPopoverTitle'), popover=env.t('gemsWhatFor'), popover-placement='bottom',popover-append-to-body='true') a.gem-wallet(ng-click='openModal("buyGems",{track:"Gems > Toolbar"})')