✨ Added Secondary Navigation (#1410)

refs: TryGhost/Ghost#11409 - Added a new UI for a second set of navigation links - This should support most concepts of nav, e.g. left and right, or header and footer - This PR mostly updates the design and nav components to cope with a second set of nav
TryGhost · Dec 4, 2019 · 377055a · 377055a
1 parent 251bd03
commit 377055a
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 44 deletions.
diff --git a/app/components/gh-navitem.js b/app/components/gh-navitem.js
@@ -23,8 +23,8 @@ export default Component.extend(ValidationState, {
     }),
 
     actions: {
-        addItem() {
-            this.addItem();
+        addItem(item) {
+            this.addItem(item);
         },
 
         deleteItem(item) {
@@ -53,7 +53,7 @@ export default Component.extend(ValidationState, {
         if (event.keyCode === 13 && this.get('navItem.isNew')) {
             event.preventDefault();
             run.scheduleOnce('actions', this, function () {
-                this.send('addItem');
+                this.send('addItem', this.get('navItem'));
             });
         }
     }

diff --git a/app/controllers/settings/design.js b/app/controllers/settings/design.js
@@ -19,12 +19,14 @@ export default Controller.extend({
 
     dirtyAttributes: false,
     newNavItem: null,
+    newSecondaryNavItem: null,
     themes: null,
     themeToDelete: null,
 
     init() {
         this._super(...arguments);
         this.set('newNavItem', NavigationItem.create({isNew: true}));
+        this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
     },
 
     showDeleteThemeModal: notEmpty('themeToDelete'),
@@ -40,16 +42,14 @@ export default Controller.extend({
             this.save.perform();
         },
 
-        addNavItem() {
-            let newNavItem = this.newNavItem;
-
+        addNavItem(item) {
             // If the url sent through is blank (user never edited the url)
-            if (newNavItem.get('url') === '') {
-                newNavItem.set('url', '/');
+            if (item.get('url') === '') {
+                item.set('url', '/');
             }
 
-            return newNavItem.validate().then(() => {
-                this.addNewNavItem();
+            return item.validate().then(() => {
+                this.addNewNavItem(item);
             });
         },
 
@@ -58,7 +58,7 @@ export default Controller.extend({
                 return;
             }
 
-            let navItems = this.get('settings.navigation');
+            let navItems = item.isSecondary ? this.get('settings.secondaryNavigation') : this.get('settings.navigation');
 
             navItems.removeObject(item);
             this.set('dirtyAttributes', true);
@@ -196,23 +196,33 @@ export default Controller.extend({
 
         reset() {
             this.set('newNavItem', NavigationItem.create({isNew: true}));
+            this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
         }
     },
 
     save: task(function* () {
         let navItems = this.get('settings.navigation');
-        let newNavItem = this.newNavItem;
+        let secondaryNavItems = this.get('settings.secondaryNavigation');
+
         let notifications = this.notifications;
         let validationPromises = [];
 
-        if (!newNavItem.get('isBlank')) {
-            validationPromises.pushObject(this.send('addNavItem'));
+        if (!this.newNavItem.get('isBlank')) {
+            validationPromises.pushObject(this.send('addNavItem', this.newNavItem));
+        }
+
+        if (!this.newSecondaryNavItem.get('isBlank')) {
+            validationPromises.pushObject(this.send('addNavItem', this.newSecondaryNavItem));
         }
 
         navItems.map((item) => {
             validationPromises.pushObject(item.validate());
         });
 
+        secondaryNavItems.map((item) => {
+            validationPromises.pushObject(item.validate());
+        });
+
         try {
             yield RSVP.all(validationPromises);
             this.set('dirtyAttributes', false);
@@ -225,15 +235,20 @@ export default Controller.extend({
         }
     }),
 
-    addNewNavItem() {
-        let navItems = this.get('settings.navigation');
-        let newNavItem = this.newNavItem;
+    addNewNavItem(item) {
+        let navItems = item.isSecondary ? this.get('settings.secondaryNavigation') : this.get('settings.navigation');
 
-        newNavItem.set('isNew', false);
-        navItems.pushObject(newNavItem);
+        item.set('isNew', false);
+        navItems.pushObject(item);
         this.set('dirtyAttributes', true);
-        this.set('newNavItem', NavigationItem.create({isNew: true}));
-        $('.gh-blognav-line:last input:first').focus();
+
+        if (item.isSecondary) {
+            this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
+            $('.gh-blognav-container:last .gh-blognav-line:last input:first').focus();
+        } else {
+            this.set('newNavItem', NavigationItem.create({isNew: true}));
+            $('.gh-blognav-container:first .gh-blognav-line:last input:first').focus();
+        }
     },
 
     _deleteTheme() {

diff --git a/app/models/navigation-item.js b/app/models/navigation-item.js
@@ -7,6 +7,7 @@ export default EmberObject.extend(ValidationEngine, {
     label: '',
     url: '',
     isNew: false,
+    isSecondary: false,
 
     validationType: 'navItem',
 

diff --git a/app/models/setting.js b/app/models/setting.js
@@ -19,6 +19,7 @@ export default Model.extend(ValidationEngine, {
     twitter: attr('twitter-url-user'),
     labs: attr('string'),
     navigation: attr('navigation-settings'),
+    secondaryNavigation: attr('navigation-settings', {isSecondary: true}),
     isPrivate: attr('boolean'),
     publicHash: attr('string'),
     password: attr('string'),

diff --git a/app/templates/components/gh-navitem.hbs b/app/templates/components/gh-navitem.hbs
@@ -32,7 +32,7 @@
 </div>
 
 {{#if navItem.isNew}}
-    <button type="button" class="gh-blognav-add" {{action "addItem"}}>
+    <button type="button" class="gh-blognav-add" {{action "addItem" navItem}}>
         {{svg-jar "add"}}<span class="sr-only">Add</span>
     </button>
 {{else}}

diff --git a/app/templates/settings/design.hbs b/app/templates/settings/design.hbs
@@ -16,7 +16,6 @@
     {{/if}}
 
     <section class="view-container">
-
         <div class="gh-setting-header gh-first-header">Navigation</div>
         <div class="gh-blognav-container pa5 pt6 bg-grouped-table shadow-1 br3">
             <form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
@@ -43,6 +42,32 @@
             </form>
         </div>
 
+        <div class="gh-setting-header">Secondary Navigation</div>
+        <div class="gh-blognav-container pa5 pt6 bg-grouped-table shadow-1 br3">
+            <form id="secondary-navigation" class="gh-blognav" novalidate="novalidate">
+                {{#sortable-objects sortableObjectList=settings.secondaryNavigation useSwap=false}}
+                    {{#each settings.secondaryNavigation as |navItem index|}}
+                        {{#draggable-object content=navItem dragHandle=".gh-blognav-grab" isSortable=true}}
+                            {{gh-navitem
+                                navItem=navItem
+                                baseUrl=blogUrl
+                                addItem=(action "addNavItem")
+                                deleteItem=(action "deleteNavItem")
+                                updateUrl=(action "updateUrl")
+                                updateLabel=(action "updateLabel")
+                                data-test-navitem=index}}
+                        {{/draggable-object}}
+                    {{/each}}
+                {{/sortable-objects}}
+                {{gh-navitem
+                    navItem=newSecondaryNavItem
+                    baseUrl=blogUrl
+                    addItem=(action "addNavItem")
+                    updateUrl=(action "updateUrl")
+                    data-test-navitem="new"}}
+            </form>
+        </div>
+
         <div class="gh-setting-header">Theme Directory</div>
         <div class="gh-theme-directory-container">
             <div class="theme-directory">

diff --git a/app/transforms/navigation-settings.js b/app/transforms/navigation-settings.js
@@ -3,7 +3,7 @@ import Transform from 'ember-data/transform';
 import {A as emberA, isArray as isEmberArray} from '@ember/array';
 
 export default Transform.extend({
-    deserialize(serialized) {
+    deserialize(serialized, options) {
         let navItems, settingsArray;
 
         try {
@@ -12,7 +12,10 @@ export default Transform.extend({
             settingsArray = [];
         }
 
-        navItems = settingsArray.map(itemDetails => NavigationItem.create(itemDetails));
+        navItems = settingsArray.map((itemDetails) => {
+            itemDetails.isSecondary = options && options.isSecondary || false;
+            return NavigationItem.create(itemDetails);
+        });
 
         return emberA(navItems);
     },

diff --git a/mirage/fixtures/settings.js b/mirage/fixtures/settings.js
@@ -192,5 +192,15 @@ export default [
         created_by: 1,
         updated_at: '2019-10-09T09:49:00.000Z',
         updated_by: 1
+    },
+    {
+        id: 25,
+        key: 'secondary_navigation',
+        type: 'blog',
+        created_at: '2019-11-20T09:44:30.810Z',
+        created_by: 1,
+        updated_at: '2019-11-20T13:32:49.868Z',
+        updated_by: 1,
+        value: JSON.stringify([])
     }
 ];