diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss index e9b083e05a..931c794288 100644 --- a/ghost/admin/assets/sass/layouts/settings.scss +++ b/ghost/admin/assets/sass/layouts/settings.scss @@ -412,6 +412,12 @@ width: 100%; } +.navigation-item-url { + .fake-placeholder { + color: lightgrey + } +} + @media (max-width: 600px) { .navigation-item-label { margin-bottom: 5px; diff --git a/ghost/admin/components/gh-navitem-url-input.js b/ghost/admin/components/gh-navitem-url-input.js new file mode 100644 index 0000000000..7708f4f773 --- /dev/null +++ b/ghost/admin/components/gh-navitem-url-input.js @@ -0,0 +1,76 @@ +function joinUrlParts(url, path) { + if (path[0] !== '/' && url.slice(-1) !== '/') { + path = '/' + path; + } else if (path[0] === '/' && url.slice(-1) === '/') { + path = path.slice(1); + } + + return url + path; +} + +var NavItemUrlInputComponent = Ember.TextField.extend({ + classNameBindings: ['fakePlaceholder'], + + isBaseUrl: Ember.computed('baseUrl', 'value', function () { + return this.get('baseUrl') === this.get('value'); + }), + + fakePlaceholder: Ember.computed('isBaseUrl', 'hasFocus', function () { + return this.get('isBaseUrl') && !this.get('hasFocus'); + }), + + isRelative: Ember.computed('value', function () { + return !validator.isURL(this.get('value')); + }), + + didInsertElement: function () { + var url = this.get('url'), + baseUrl = this.get('baseUrl'); + + // if we have a relative url, create the absolute url to be displayed in the input + if (this.get('isRelative')) { + url = joinUrlParts(baseUrl, url); + } + + this.set('value', url); + this.sendAction('change', this.get('value')); + }, + + focusIn: function (event) { + this.set('hasFocus', true); + + if (this.get('isBaseUrl')) { + // position the cursor at the end of the input + Ember.run.next(function (el) { + var length = el.value.length; + + el.setSelectionRange(length, length); + }, event.target); + } + }, + + keyDown: function (event) { + // delete the "placeholder" value all at once + if (this.get('isBaseUrl') && (event.keyCode === 8 || event.keyCode === 46)) { + this.set('value', ''); + + event.preventDefault(); + } + }, + + focusOut: function () { + this.set('hasFocus', false); + this.set('value', this.get('value').trim()); + + var url = this.get('value'), + baseUrl = this.get('baseUrl'); + + if (this.get('isRelative')) { + this.set('value', joinUrlParts(baseUrl, url)); + } + + this.sendAction('change', url); + } +}); + +export default NavItemUrlInputComponent; diff --git a/ghost/admin/components/gh-navitem.js b/ghost/admin/components/gh-navitem.js new file mode 100644 index 0000000000..bb8f995f35 --- /dev/null +++ b/ghost/admin/components/gh-navitem.js @@ -0,0 +1,27 @@ +var NavItemComponent = Ember.Component.extend({ + classNames: 'navigation-item', + + keyPress: function (event) { + // enter key + if (event.keyCode === 13) { + event.preventDefault(); + this.get('controller').send('addItem'); + } + }, + + actions: { + addItem: function () { + this.sendAction('addItem'); + }, + + deleteItem: function (item) { + this.sendAction('deleteItem', item); + }, + + updateUrl: function (value) { + this.sendAction('updateUrl', value, this.get('navItem')); + } + } +}); + +export default NavItemComponent; diff --git a/ghost/admin/controllers/settings/navigation.js b/ghost/admin/controllers/settings/navigation.js index bd2f447958..31f2c43c6a 100644 --- a/ghost/admin/controllers/settings/navigation.js +++ b/ghost/admin/controllers/settings/navigation.js @@ -5,13 +5,19 @@ NavItem = Ember.Object.extend({ label: '', url: '', - isBlank: Ember.computed('label', 'url', function () { - return Ember.isBlank(this.get('label')) && Ember.isBlank(this.get('url')); + isComplete: 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 () { + blogUrl: Ember.computed('config.blogUrl', function () { + var url = this.get('config.blogUrl'); + + return url.slice(-1) !== '/' ? url + '/' : url; + }), + + navigationItems: Ember.computed('model.navigation', function () { var navItems, lastItem; @@ -26,7 +32,7 @@ NavigationController = Ember.Controller.extend({ }); lastItem = navItems.get('lastObject'); - if (!lastItem || !lastItem.get('isBlank')) { + if (!lastItem || lastItem.get('isComplete')) { navItems.addObject(NavItem.create()); } @@ -50,7 +56,7 @@ NavigationController = Ember.Controller.extend({ var navItems = this.get('navigationItems'), lastItem = navItems.get('lastObject'); - if (lastItem && !lastItem.get('isBlank')) { + if (lastItem && lastItem.get('isComplete')) { navItems.addObject(NavItem.create()); } }, @@ -63,6 +69,20 @@ NavigationController = Ember.Controller.extend({ this.get('navigationItems').removeObject(item); }, + updateUrl: function (url, navItem) { + if (!navItem) { + return; + } + + if (Ember.isBlank(url)) { + navItem.set('url', this.get('blogUrl')); + + return; + } + + navItem.set('url', url); + }, + save: function () { var self = this, navSetting, @@ -74,7 +94,7 @@ NavigationController = Ember.Controller.extend({ var label, url; - if (!item || item.get('isBlank')) { + if (!item || !item.get('isComplete')) { return; } @@ -93,6 +113,11 @@ NavigationController = Ember.Controller.extend({ url = '/' + url; } + // if navItem label is empty and URL is still the default, don't save + if (!label && url === '/') { + return; + } + return {label: label, url: url}; }).compact(); diff --git a/ghost/admin/html/navigation.html b/ghost/admin/html/navigation.html deleted file mode 100644 index 6425e077db..0000000000 --- a/ghost/admin/html/navigation.html +++ /dev/null @@ -1,199 +0,0 @@ - - - - - - Navigation - - - - - - - - -
Skip to main content - - - -
- -
- - -
-
- -

Settings

-
- -
- - - -
-
- Back -

Navigation

-
- -
-
- -
-
- -
- -
- - - - - - -
- - - -
- -
- -
- - - - - - -
- - - -
- -
- -
- - - - - - -
- - - -
- -
-
-
- -
-
-
- -
- - - - - - - diff --git a/ghost/admin/html/tags.html b/ghost/admin/html/tags.html deleted file mode 100644 index cffcfae875..0000000000 --- a/ghost/admin/html/tags.html +++ /dev/null @@ -1,264 +0,0 @@ - - - - - Tags - - - - - - - -
- Skip to main content - -
- - -
-
- - Menu - -

Tags

-
-
- -
-
- Back -

Tags

-
- - - - - -
-
- - -
- -
- News - /news -

The latest news, reviews and information from around the world

- 20 - -
- General - /news/general -

My go-to category when I’m not really sure what else to file news

- 7 -
-
- -
- Image - Private -

All posts with the “image” post format

- 12 -
- -
- Kittens - /kittens -

My sordid past and wrongdoings

- 9 - -
- A Short History of Nearly Everything - /kittens/a-short-history - 4 - -
- In Parts - /kittens/a-short-history/in-parts -

Lorem ipsum kittens innit

- 2 -
-
-
- -
- Video - Private -

All posts containing a YouTube video link

- 6 -
- -
- The End - /the-end -

The final frontier

- 1 -
- -
- - -
-
-
-
- -
-
-
-

Tag Settings

- -
-
-
-
- - - - -
Add cover image
-
- -
- - - - -
- -
- - - - -
- -
- - - - -
- -
- - - - - - -
- -
- - - - - - -
- - - -
-
-
-
- -
- -
- - - - - - \ No newline at end of file diff --git a/ghost/admin/routes/settings/navigation.js b/ghost/admin/routes/settings/navigation.js index 87c6d1f4a6..ec769a9ce1 100644 --- a/ghost/admin/routes/settings/navigation.js +++ b/ghost/admin/routes/settings/navigation.js @@ -21,6 +21,10 @@ var NavigationRoute = AuthenticatedRoute.extend(CurrentUserSettings, { actions: { save: function () { + // since shortcuts are run on the route, we have to signal to the components + // on the page that we're about to save. + $('.page-actions .btn-blue').focus(); + this.get('controller').send('save'); } } diff --git a/ghost/admin/templates/components/gh-navitem.hbs b/ghost/admin/templates/components/gh-navitem.hbs new file mode 100644 index 0000000000..90b424d9a5 --- /dev/null +++ b/ghost/admin/templates/components/gh-navitem.hbs @@ -0,0 +1,22 @@ + +
+ + {{gh-trim-focus-input focus=navItem.last placeholder="Label" value=navItem.label}} + + + {{gh-navitem-url-input baseUrl=baseUrl url=navItem.url change="updateUrl"}} + +
+ + {{#if navItem.last}} + + {{else}} + + {{/if}} + diff --git a/ghost/admin/templates/settings/navigation.hbs b/ghost/admin/templates/settings/navigation.hbs index e27c433924..fedb222bac 100644 --- a/ghost/admin/templates/settings/navigation.hbs +++ b/ghost/admin/templates/settings/navigation.hbs @@ -8,33 +8,8 @@
- {{#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}} - -
+ {{gh-navitem navItem=navItem baseUrl=blogUrl addItem="addItem" deleteItem="deleteItem" updateUrl="updateUrl"}} {{/each}} -
-
\ No newline at end of file + diff --git a/ghost/admin/views/settings/navigation.js b/ghost/admin/views/settings/navigation.js index adaec03ef2..f12e4d5d3a 100644 --- a/ghost/admin/views/settings/navigation.js +++ b/ghost/admin/views/settings/navigation.js @@ -1,13 +1,6 @@ import BaseView from 'ghost/views/settings/content-base'; var SettingsNavigationView = BaseView.extend({ - keyPress: function (event) { - // + character - if (event.keyCode === 43) { - event.preventDefault(); - this.get('controller').send('addItem'); - } - } }); export default SettingsNavigationView;