Navigation UI Ember Integration

Closes #4537

- Adds Navigation to the Settings menu
- Adds a `navigationUI` config flag (redirects if not an editor or author)

core/client/controllers/settings.js

@@ -10,6 +10,9 @@ var SettingsController = Ember.Controller.extend({
     showTags: Ember.computed('session.user.name', function () {
         return this.get('session.user.isAuthor') ? false : true;
     }),
+    showNavigation: Ember.computed('session.user.name', 'config.navigationUI', function () {
+        return this.get('session.user.isAuthor') || this.get('session.user.isEditor') || !this.get('config.navigationUI') ? false : true;
+    }),
     showCodeInjection: Ember.computed('session.user.name', 'controllers.feature.codeInjectionUI', function () {
         return this.get('session.user.isAuthor') || this.get('session.user.isEditor') || !this.get('controllers.feature.codeInjectionUI') ? false : true;
     }),

core/client/controllers/settings/navigation.js

@@ -0,0 +1,25 @@
+var NavigationController = Ember.Controller.extend(Ember.Evented, {
+
+    navigationJSON: Ember.computed('model.navigation', function () {
+        var navJSON = JSON.parse(this.get('model.navigation') || {}),
+            lastNavItem = navJSON[navJSON.length - 1];
+        lastNavItem.last = true; // Set a 'last' property on the last nav item, only used in the template
+        return navJSON;
+    }),
+
+    actions: {
+        addItem: function () {
+            // Add a new item
+        },
+
+        deleteItem: function () {
+            // Delete navItem which should be a function param like: `deleteItem: function(navItem) {`
+        },
+
+        save: function () {
+            // Save everything
+        }
+    }
+});
+
+export default NavigationController;

core/client/models/setting.js

@@ -17,7 +17,8 @@ var Setting = DS.Model.extend(NProgressSaveMixin, ValidationEngine, {
     availableThemes: DS.attr(),
     ghost_head: DS.attr('string'),
     ghost_foot: DS.attr('string'),
-    labs: DS.attr('string')
+    labs: DS.attr('string'),
+    navigation: DS.attr('string')
 });
 
 export default Setting;

core/client/router.js

@@ -41,6 +41,7 @@ Router.map(function () {
         this.route('tags');
         this.route('labs');
         this.route('code-injection');
+        this.route('navigation');
     });
 
     // Redirect debug to settings labs

core/client/routes/settings/navigation.js

@@ -0,0 +1,27 @@
+import AuthenticatedRoute from 'ghost/routes/authenticated';
+import CurrentUserSettings from 'ghost/mixins/current-user-settings';
+
+var NavigationRoute = AuthenticatedRoute.extend(CurrentUserSettings, {
+
+    titleToken: 'Navigation',
+
+    beforeModel: function () {
+        if (!this.get('config.navigationUI')) {
+            return this.transitionTo('settings.general');
+        }
+
+        return this.currentUser().then(this.transitionAuthor());
+    },
+
+    model: function () {
+        return this.store.find('setting', {type: 'blog,theme'}).then(function (records) {
+            return records.get('firstObject');
+        });
+    },
+
+    setupController: function (controller, model) {
+        this._super(controller, model);
+    }
+});
+
+export default NavigationRoute;

core/client/templates/settings.hbs

@@ -19,6 +19,10 @@
                 {{gh-activating-list-item route="settings.tags" title="Tags" classNames="settings-nav-tags icon-tag"}}
             {{/if}}
 
+            {{#if showNavigation}}
+                {{gh-activating-list-item route="settings.navigation" title="Navigation" classNames="settings-nav-navigation icon-compass"}}
+            {{/if}}
+
             {{#if showCodeInjection}}
                 {{gh-activating-list-item route="settings.code-injection" title="Code Injection" classNames="settings-nav-code icon-code"}}
             {{/if}}

core/client/templates/settings/navigation.hbs

@@ -0,0 +1,40 @@
+<header class="settings-view-header">
+    {{#link-to "settings" class="btn btn-default btn-back"}}Back{{/link-to}}
+    <h2 class="page-title">Navigation</h2>
+    <section class="page-actions">
+        <button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
+    </section>
+</header>
+
+<section class="content settings-navigation">
+    <form id="settings-navigation" novalidate="novalidate">
+
+        {{#each navItem in navigationJSON}}
+            <div class="navigation-item">
+                <button type="button" class="navigation-item-drag-handle icon-grab">
+                    <span class="hidden">Reorder</span>
+                </button>
+                <div class="navigation-inputs">
+                    <span class="navigation-item-label">
+                        <input type="text" {{bind-attr value=navItem.label}} placeholder="Label">
+                    </span>
+                    <span class="navigation-item-url">
+                        <input type="text" {{bind-attr value=navItem.url}} placeholder="http://my-ghost-blog.com/">
+                    </span>
+                </div>
+                <span class="navigation-item-action">
+                    {{#if navItem.last}}
+                        <button type="button" class="add-navigation-link icon-add" {{action 'addItem'}}>
+                            <span class="hidden">Add</span>
+                        </button>
+                    {{else}}
+                        <button type="button" class="navigation-delete icon-trash" {{action 'deleteItem' navItem}}>
+                            <span class="hidden">Delete</span>
+                        </button>
+                    {{/if}}
+                </span>
+            </div>
+        {{/each}}
+
+    </form>
+</section>

core/client/views/settings/navigation.js

@@ -0,0 +1,5 @@
+import BaseView from 'ghost/views/settings/content-base';
+
+var SettingsNavigationView = BaseView.extend();
+
+export default SettingsNavigationView;

core/server/api/configuration.js

@@ -11,6 +11,7 @@ function getValidKeys() {
     var validKeys = {
             fileStorage: config.fileStorage === false ? false : true,
             apps: config.apps === true ? true : false,
+            navigationUI: config.navigationUI === true ? true : false,
             codeInjectionUI: config.codeInjectionUI === true ? true : false,
             version: config.ghostVersion,
             environment: process.env.NODE_ENV,

core/server/data/default-settings.json

@@ -70,6 +70,9 @@
         },
         "labs": {
             "defaultValue": "{}"
+        },
+        "navigation": {
+            "defaultValue": "[{\"id\": 1, \"label\":\"Home\", \"url\":\"http://my-ghost-blog.com/\"},{\"id\": 2, \"label\":\"About\", \"url\":\"http://my-ghost-blog.com/about/\"},{\"id\": 3, \"label\":\"Links\", \"url\":\"http://my-ghost-blog.com/links/\"},{\"id\": 4, \"label\":\"External\", \"url\":\"https://ghost.org\"}]"
         }
     },
     "theme": {