Merge pull request #4804 from jaswilli/issue-4539

Connect Navigation page to live data

core/client/controllers/settings/navigation.js

@@ -1,23 +1,114 @@
-var NavigationController = Ember.Controller.extend(Ember.Evented, {
+var NavigationController,
+    NavItem;
 
-    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;
+NavItem = Ember.Object.extend({
+    label: '',
+    url: '',
+
+    isBlank: Ember.computed('label', 'url', function () {
+        return Ember.isBlank(this.get('label')) && Ember.isBlank(this.get('url'));
+    })
+});
+
+NavigationController = Ember.Controller.extend({
+     navigationItems: Ember.computed('model.navigation', function () {
+        var navItems,
+            lastItem;
+
+        try {
+            navItems = JSON.parse(this.get('model.navigation') || [{}]);
+        } catch (e) {
+            navItems = [{}];
+        }
+
+        navItems = navItems.map(function (item) {
+            return NavItem.create(item);
+        });
+
+        lastItem = navItems.get('lastObject');
+        if (!lastItem || !lastItem.get('isBlank')) {
+            navItems.addObject(NavItem.create());
+        }
+
+        return navItems;
+    }),
+
+    navigationItemsObserver: Ember.observer('navigationItems.[]', function () {
+        var navItems = this.get('navigationItems');
+
+        navItems.forEach(function (item, index, items) {
+            if (index === (items.length - 1)) {
+                item.set('last', true);
+            } else {
+                item.set('last', false);
+            }
+        });
     }),
 
     actions: {
         addItem: function () {
-            // Add a new item
+            var navItems = this.get('navigationItems'),
+                lastItem = navItems.get('lastObject');
+
+            if (lastItem && !lastItem.get('isBlank')) {
+                navItems.addObject(NavItem.create());
+            }
         },
 
-        deleteItem: function () {
-            // Delete navItem which should be a function param like: `deleteItem: function(navItem) {`
+        deleteItem: function (item) {
+            if (!item) {
+                return;
+            }
+
+            this.get('navigationItems').removeObject(item);
         },
 
         save: function () {
-            // Save everything
+            var self = this,
+                navSetting,
+                blogUrl = this.get('config').blogUrl,
+                blogUrlRegex = new RegExp('^' + blogUrl + '(.*)', 'i'),
+                match;
+
+            navSetting = this.get('navigationItems').map(function (item) {
+                var label,
+                    url;
+
+                if (!item || item.get('isBlank')) {
+                    return;
+                }
+
+                label = item.get('label').trim();
+                url = item.get('url').trim();
+
+                match = url.match(blogUrlRegex);
+
+                if (match) {
+                    if (match[1] === '') {
+                        url = '/';
+                    } else {
+                        url = match[1];
+                    }
+                } else if (!validator.isURL(url) && url !== '' && url[0] !== '/') {
+                    url = '/' + url;
+                }
+
+                return {label: label, url: url};
+            }).compact();
+
+            this.set('model.navigation', JSON.stringify(navSetting));
+
+            // trigger change event because even if the final JSON is unchanged
+            // we need to have navigationItems recomputed.
+            this.get('model').notifyPropertyChange('navigation');
+
+            this.notifications.closePassive();
+
+            this.get('model').save().then(function () {
+                self.notifications.showSuccess('Navigation items saved.');
+            }).catch(function (err) {
+                self.notifications.showErrors(err);
+            });
         }
     }
 });

core/client/routes/settings/navigation.js

@@ -19,8 +19,10 @@ var NavigationRoute = AuthenticatedRoute.extend(CurrentUserSettings, {
         });
     },
 
-    setupController: function (controller, model) {
-        this._super(controller, model);
+    actions: {
+        save: function () {
+            this.get('controller').send('save');
+        }
     }
 });
 

core/client/templates/settings/navigation.hbs

@@ -9,26 +9,26 @@
 <section class="content settings-navigation">
     <form id="settings-navigation" novalidate="novalidate">
 
-        {{#each navItem in navigationJSON}}
+        {{#each navItem in navigationItems}}
             <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">
+                        {{gh-trim-focus-input focus=navItem.last placeholder="Label" value=navItem.label}}
                     </span>
                     <span class="navigation-item-url">
-                        <input type="text" {{bind-attr value=navItem.url}} placeholder="http://my-ghost-blog.com/">
+                        {{gh-trim-focus-input focus=false placeholder="http://my-ghost-blog.com/" value=navItem.url}}
                     </span>
                 </div>
                 <span class="navigation-item-action">
                     {{#if navItem.last}}
-                        <button type="button" class="add-navigation-link icon-add" {{action 'addItem'}}>
+                        <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}}>
+                        <button type="button" class="navigation-delete icon-trash" {{action "deleteItem" navItem}}>
                             <span class="hidden">Delete</span>
                         </button>
                     {{/if}}

core/client/views/settings/navigation.js

@@ -1,5 +1,13 @@
 import BaseView from 'ghost/views/settings/content-base';
 
-var SettingsNavigationView = BaseView.extend();
+var SettingsNavigationView = BaseView.extend({
+    keyPress: function (event) {
+        // + character
+        if (event.keyCode === 43) {
+            event.preventDefault();
+            this.get('controller').send('addItem');
+        }
+    }
+});
 
 export default SettingsNavigationView;

core/server/data/default-settings.json

@@ -72,7 +72,7 @@
             "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\"}]"
+            "defaultValue": "[{\"label\":\"Home\", \"url\":\"/\"}]"
         }
     },
     "theme": {