From a007ae144272f2c4e62e02a186f2cb6d299c6d22 Mon Sep 17 00:00:00 2001 From: Jason Williams Date: Wed, 14 Jan 2015 14:46:29 +0000 Subject: [PATCH] Connect Navigation page to live data Closes #4539 --- .../client/controllers/settings/navigation.js | 111 ++++++++++++++++-- core/client/routes/settings/navigation.js | 6 +- core/client/templates/settings/navigation.hbs | 10 +- core/client/views/settings/navigation.js | 10 +- core/server/data/default-settings.json | 2 +- 5 files changed, 120 insertions(+), 19 deletions(-) diff --git a/core/client/controllers/settings/navigation.js b/core/client/controllers/settings/navigation.js index a16fdc5b6f..bd2f447958 100644 --- a/core/client/controllers/settings/navigation.js +++ b/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); + }); } } }); diff --git a/core/client/routes/settings/navigation.js b/core/client/routes/settings/navigation.js index 0f26cf9a62..87c6d1f4a6 100644 --- a/core/client/routes/settings/navigation.js +++ b/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'); + } } }); diff --git a/core/client/templates/settings/navigation.hbs b/core/client/templates/settings/navigation.hbs index ee493face3..e27c433924 100644 --- a/core/client/templates/settings/navigation.hbs +++ b/core/client/templates/settings/navigation.hbs @@ -9,26 +9,26 @@
- {{#each navItem in navigationJSON}} + {{#each navItem in navigationItems}}
- + {{gh-trim-focus-input focus=navItem.last placeholder="Label" value=navItem.label}} - + {{gh-trim-focus-input focus=false placeholder="http://my-ghost-blog.com/" value=navItem.url}}
{{#if navItem.last}} - {{else}} - {{/if}} diff --git a/core/client/views/settings/navigation.js b/core/client/views/settings/navigation.js index 74146cb972..adaec03ef2 100644 --- a/core/client/views/settings/navigation.js +++ b/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; diff --git a/core/server/data/default-settings.json b/core/server/data/default-settings.json index 6f2ec7dafe..e83fe49a7c 100644 --- a/core/server/data/default-settings.json +++ b/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": {