From d743e466b570782bf30bc1ceefe6578a58a4cd44 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Mon, 1 Sep 2014 17:45:06 +0100
Subject: [PATCH] [WIP] Wire up new mobile nav

References #3810

With GUI2, there's now a number of places to open the mobile navigation menu. This handles those clicks.
---
 .../assets/sass/components/navigation.scss    | 29 ++++++++-
 ghost/admin/assets/sass/layouts/default.scss  |  2 +-
 ghost/admin/controllers/application.js        |  1 +
 ghost/admin/routes/application.js             |  4 ++
 ghost/admin/templates/-navbar.hbs             | 16 ++---
 ghost/admin/templates/editor/edit.hbs         |  2 +-
 ghost/admin/templates/posts.hbs               |  2 +-
 ghost/admin/templates/settings.hbs            |  2 +-
 ghost/admin/views/application.js              | 61 ++++++++++++++++---
 9 files changed, 96 insertions(+), 23 deletions(-)

diff --git a/ghost/admin/assets/sass/components/navigation.scss b/ghost/admin/assets/sass/components/navigation.scss
index d7bfcb3373..49e1faf793 100644
--- a/ghost/admin/assets/sass/components/navigation.scss
+++ b/ghost/admin/assets/sass/components/navigation.scss
@@ -205,7 +205,7 @@ body.right-outlet-expanded & {
             display: block;
         }
 
-        &.global-nav-expanded {
+        body.global-nav-expanded & {
             transform: translate3d(0, 0px, 0px);
         }
     }
@@ -257,13 +257,13 @@ body.right-outlet-expanded & {
         bottom: 0;
         left: 0;
         height: auto;
-        padding: 15px;
+        padding: 0;
         border-bottom: none;
         border-top: $darkgrey 1px solid;
         transition: color 0.5s, background 0.5s;
 
         .nav-label {
-            padding: 0;
+            padding: 15px;
             height: auto;
         }
 
@@ -301,5 +301,28 @@ body.right-outlet-expanded & {
             }
         }
 
+        .dropdown .dropdown-menu {
+            top: auto;
+            right: auto;
+            bottom: calc(100% + 80px);
+            left: 10px;
+        }
+
+
     }//.user-menu
+
+    body.global-nav-expanded & {
+
+        .nav-cover {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 600;
+            transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
+            transform: translate3d(260px, 0px, 0px); // Not off the screen, to give a parallax effect
+        }//.nav-cover
+    }//body.global-nav-expanded
+
 }
\ No newline at end of file
diff --git a/ghost/admin/assets/sass/layouts/default.scss b/ghost/admin/assets/sass/layouts/default.scss
index 220540d6ff..9809e6d986 100644
--- a/ghost/admin/assets/sass/layouts/default.scss
+++ b/ghost/admin/assets/sass/layouts/default.scss
@@ -30,7 +30,7 @@
         transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
     }
 
-    &.global-nav-expanded {
+    body.global-nav-expanded & {
         transform: translate3d(260px, 0px, 0px);
     }
 
diff --git a/ghost/admin/controllers/application.js b/ghost/admin/controllers/application.js
index c8c1881922..4bf4e2ef88 100644
--- a/ghost/admin/controllers/application.js
+++ b/ghost/admin/controllers/application.js
@@ -2,6 +2,7 @@ var ApplicationController = Ember.Controller.extend({
     hideNav: Ember.computed.match('currentPath', /(error|signin|signup|setup|forgotten|reset)/),
 
     topNotificationCount: 0,
+    showGlobalMobileNav: false,
 
     actions: {
         toggleMenu: function () {
diff --git a/ghost/admin/routes/application.js b/ghost/admin/routes/application.js
index 30800a7e6d..b8497502b5 100644
--- a/ghost/admin/routes/application.js
+++ b/ghost/admin/routes/application.js
@@ -25,6 +25,10 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
             this._super();
         },
 
+        toggleGlobalMobileNav: function () {
+            this.toggleProperty('controller.showGlobalMobileNav');
+        },
+
         closePopups: function () {
             this.get('popover').closePopovers();
             this.get('notifications').closeAll();
diff --git a/ghost/admin/templates/-navbar.hbs b/ghost/admin/templates/-navbar.hbs
index 4d3de563a6..852cb80fb1 100644
--- a/ghost/admin/templates/-navbar.hbs
+++ b/ghost/admin/templates/-navbar.hbs
@@ -4,16 +4,16 @@
         <div class="nav-label"><i class="icon-ghost"></i> <span>Visit blog</span> </div>
     </a>
     
-    {{#link-to "posts" classNames="nav-item nav-content"}}
+    {{#link-to "posts" classNames="nav-item nav-content js-nav-item"}}
         <div class="nav-label"><i class="icon-content"></i> Content</div>
     {{/link-to}}
 
-    {{#link-to "editor.new" classNames="nav-item nav-new"}}
+    {{#link-to "editor.new" classNames="nav-item nav-new js-nav-item"}}
         <div class="nav-label"><i class="icon-add"></i> New Post</div>
     {{/link-to}}
     
     {{#unless session.user.isAuthor}}
-    {{#link-to "settings" classNames="nav-item nav-settings"}}
+    {{#link-to "settings" classNames="nav-item nav-settings js-nav-item"}}
         <div class="nav-label"><i class="icon-settings2"></i> Settings</div>
     {{/link-to}}
     {{/unless}}
@@ -30,7 +30,7 @@
     }}
 
     <div class="nav-item user-menu" data-href="#">
-        {{#gh-popover-button popoverName="user-menu" tagName="div" classNames="nav-label"}}
+        {{#gh-popover-button popoverName="user-menu" tagName="div" classNames="nav-label clearfix"}}
             {{#if session.user.image}}
             <div class="image"><img {{bind-attr src="session.user.image"}} alt="{{session.user.name}}'s profile picture" /></div>
             {{else}}
@@ -42,8 +42,8 @@
             </div>
         {{/gh-popover-button}}
         {{#gh-popover tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}}
-            <ul class="dropdown-menu dropdown-triangle-top-right" role="menu">
-                <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile" role="menuitem" tabindex="-1"}}Your Profile{{/link-to}}</li>
+            <ul class="dropdown-menu dropdown-triangle-top-right js-user-menu-dropdown-menu" role="menu">
+                <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}Your Profile{{/link-to}}</li>
                 <li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/">Help / Support</a></li>
                 <li class="divider"></li>
                 <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}Sign Out{{/link-to}}</li>
@@ -51,4 +51,6 @@
         {{/gh-popover}}
     </div>{{! .user-menu }}
 
-</nav>{{! .global-nav }}
\ No newline at end of file
+</nav>{{! .global-nav }}
+
+<div class="nav-cover js-nav-cover"></div>
\ No newline at end of file
diff --git a/ghost/admin/templates/editor/edit.hbs b/ghost/admin/templates/editor/edit.hbs
index 9b29c76760..075eda1cdd 100644
--- a/ghost/admin/templates/editor/edit.hbs
+++ b/ghost/admin/templates/editor/edit.hbs
@@ -1,5 +1,5 @@
 <header class="page-header">
-    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
     <h2 class="page-title">Editor</h2>
 </header>
 
diff --git a/ghost/admin/templates/posts.hbs b/ghost/admin/templates/posts.hbs
index e9caf0dfc7..e95d0d679e 100644
--- a/ghost/admin/templates/posts.hbs
+++ b/ghost/admin/templates/posts.hbs
@@ -1,5 +1,5 @@
 <header class="page-header">
-    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
     <h2 class="page-title">Content</h2>
 </header>
 
diff --git a/ghost/admin/templates/settings.hbs b/ghost/admin/templates/settings.hbs
index 562d692ca5..a7d8b4cc10 100644
--- a/ghost/admin/templates/settings.hbs
+++ b/ghost/admin/templates/settings.hbs
@@ -1,5 +1,5 @@
 <header class="page-header">
-    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
+    <button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
     <h2 class="page-title">Settings</h2>
 </header>
 
diff --git a/ghost/admin/views/application.js b/ghost/admin/views/application.js
index d6feba6fca..28e25e42f9 100644
--- a/ghost/admin/views/application.js
+++ b/ghost/admin/views/application.js
@@ -1,18 +1,61 @@
+import {mobileQuery} from 'ghost/utils/mobile';
+
 var ApplicationView = Ember.View.extend({
     blogRoot: Ember.computed.alias('controller.ghostPaths.blogRoot'),
-    
-    setupCloseSidebar: function () {
+
+    setupGlobalMobileNav: function () {
         // #### Navigating within the sidebar closes it.
-        $(document).on('click', '.js-close-sidebar', function () {
-            $('body').removeClass('off-canvas');
+        var self = this;
+        $('body').on('click', '.js-nav-item', function () {
+            if (mobileQuery.matches) {
+                self.set('controller.showGlobalMobileNav', false);
+            }
         });
+
+        // #### Close the nav if mobile and clicking outside of the nav or not the burger toggle
+        $('.js-nav-cover').on('click', function () {
+            var isOpen = self.get('controller.showGlobalMobileNav');
+            if (isOpen) {
+                self.set('controller.showGlobalMobileNav', false);
+            }
+        });
+
+        // #### Listen to the viewport and change user-menu dropdown triangle classes accordingly
+        mobileQuery.addListener(this.swapUserMenuPopoverTriangleClasses);
+        this.swapUserMenuPopoverTriangleClasses(mobileQuery);
+
     }.on('didInsertElement'),
-    
-    actions: {
-        toggleSidebar: function () {
-            $('body').toggleClass('off-canvas');
+
+    swapUserMenuPopoverTriangleClasses: function (mq) {
+        if (mq.matches) {
+            $('.js-user-menu-dropdown-menu').removeClass('dropdown-triangle-top-right ').addClass('dropdown-triangle-bottom');
+        } else {
+            $('.js-user-menu-dropdown-menu').removeClass('dropdown-triangle-bottom').addClass('dropdown-triangle-top-right');
         }
-    }
+    },
+    
+    showGlobalMobileNavObserver: function () {
+        if (this.get('controller.showGlobalMobileNav')) {
+            $('body').addClass('global-nav-expanded');
+        } else {
+            $('body').removeClass('global-nav-expanded');
+        }
+    }.observes('controller.showGlobalMobileNav'),
+
+    setupCloseNavOnDesktop: function () {
+        this.set('closeGlobalMobileNavOnDesktop', _.bind(function closeGlobalMobileNavOnDesktop(mq) {
+            if (!mq.matches) {
+                // Is desktop sized
+                this.set('controller.showGlobalMobileNav', false);
+            }
+        }, this));
+        mobileQuery.addListener(this.closeGlobalMobileNavOnDesktop);
+    }.on('didInsertElement'),
+
+    removeCloseNavOnDesktop: function () {
+        mobileQuery.removeListener(this.closeGlobalMobileNavOnDesktop);
+    }.on('willDestroyElement'),
+
 });
 
 export default ApplicationView;