From b58573ded59eb60bc91d897bce15b9be5af612ac Mon Sep 17 00:00:00 2001 From: Matt Enlow Date: Sun, 8 Jun 2014 14:48:14 -0600 Subject: [PATCH] Refactored PostSettingsMenuController Closes #2845. Ref #1351. - Refactored `PostSettingsMenuController` to appropriately set and display slug and publish date and their placeholders. - Removed api spam on title change by putting `slugPlaceholder` generation inside of an `Ember.run.debounce` call. - Renamed `gh-blur-text-field` to `gh-blur-input` - Created `SlugGenerator` class to abstract slug generation. - Added `timestampVerification` function to `utils/date-formatting` - `utils/date-formatting` now uses `strict` parsing of dates - Added more acceptable date formats to accommodate strict parsing - Moved `isDraft` and `isPublished` computed properties from `EditorController` to `PostModel` --- ...gh-blur-text-field.js => gh-blur-input.js} | 4 +- ghost/admin/controllers/post-settings-menu.js | 168 ++++++++++-------- ghost/admin/mixins/editor-base-controller.js | 3 - ghost/admin/models/post.js | 21 +-- ghost/admin/models/slug-generator.js | 27 +++ ghost/admin/templates/-navbar.hbs | 1 - ghost/admin/templates/post-settings-menu.hbs | 4 +- ghost/admin/utils/date-formatting.js | 30 ++-- 8 files changed, 151 insertions(+), 107 deletions(-) rename ghost/admin/components/{gh-blur-text-field.js => gh-blur-input.js} (76%) create mode 100644 ghost/admin/models/slug-generator.js diff --git a/ghost/admin/components/gh-blur-text-field.js b/ghost/admin/components/gh-blur-input.js similarity index 76% rename from ghost/admin/components/gh-blur-text-field.js rename to ghost/admin/components/gh-blur-input.js index 4f1798a31f..8a01b59f70 100644 --- a/ghost/admin/components/gh-blur-text-field.js +++ b/ghost/admin/components/gh-blur-input.js @@ -1,4 +1,4 @@ -var BlurTextField = Ember.TextField.extend({ +var BlurInput = Ember.TextField.extend({ selectOnClick: false, click: function (event) { if (this.get('selectOnClick')) { @@ -10,4 +10,4 @@ var BlurTextField = Ember.TextField.extend({ } }); -export default BlurTextField; +export default BlurInput; diff --git a/ghost/admin/controllers/post-settings-menu.js b/ghost/admin/controllers/post-settings-menu.js index 64343624ce..f5173d8a85 100644 --- a/ghost/admin/controllers/post-settings-menu.js +++ b/ghost/admin/controllers/post-settings-menu.js @@ -1,4 +1,6 @@ +/* global moment */ import {parseDateString, formatDate} from 'ghost/utils/date-formatting'; +import SlugGenerator from 'ghost/models/slug-generator'; var PostSettingsMenuController = Ember.ObjectController.extend({ isStaticPage: function (key, val) { @@ -16,123 +18,143 @@ var PostSettingsMenuController = Ember.ObjectController.extend({ return !!this.get('page'); }.property('page'), + /** + * The placeholder is the published date of the post, + * or the current date if the pubdate has not been set. + */ + publishedAtPlaceholder: function () { + var pubDate = this.get('published_at'); + if (pubDate) { + return formatDate(pubDate); + } + return formatDate(moment()); + }.property('publishedAtValue'), - newSlugBinding: Ember.computed.oneWay('slug'), + publishedAtValue: function (key, value) { + if (arguments.length > 1) { + return value; + } + return formatDate(this.get('published_at')); + }.property('published_at'), - slugPlaceholder: function () { - return this.get('model').generateSlug(); - }.property('title'), + slugValue: function (key, value) { + if (arguments.length > 1) { + return value; + } + return this.get('slug'); + }.property('slug'), + + //Lazy load the slug generator for slugPlaceholder + slugGenerator: Ember.computed(function () { + return SlugGenerator.create({ghostPaths: this.get('ghostPaths')}); + }), + //Requests slug from title + generateSlugPlaceholder: function () { + var self = this, + slugGenerator = this.get('slugGenerator'), + title = this.get('title'); + slugGenerator.generateSlug(title).then(function (slug) { + return self.set('slugPlaceholder', slug); + }); + }, + titleObserver: function () { + Ember.run.debounce(this, 'generateSlugPlaceholder', 700); + }.observes('title'), + slugPlaceholder: function (key, value) { + var slug = this.get('slug'); + + //If the post has a slug, that's its placeholder. + if (slug) { + return slug; + } + + //Otherwise, it's whatever value was set by the + // slugGenerator (below) + if (arguments.length > 1) { + return value; + } + //The title will stand in until the actual slug has been generated + return this.get('title'); + }.property(), actions: { - updateSlug: function () { - var newSlug = this.get('newSlug'), - slug = this.get('slug'), - placeholder = this.get('slugPlaceholder'), + /** + * triggered by user manually changing slug + */ + updateSlug: function (newSlug) { + var slug = this.get('slug'), self = this; - newSlug = (!newSlug && placeholder) ? placeholder : newSlug; - // Ignore unchanged slugs if (slug === newSlug) { return; } - //reset to model's slug on empty string - if (!newSlug) { - this.set('newSlug', slug); - return; - } - //Validation complete this.set('slug', newSlug); - // If the model doesn't currently - // exist on the server - // then just update the model's value - if (!this.get('isNew')) { + //Don't save just yet if it's an empty slug on a draft + if (!newSlug && this.get('isDraft')) { return; } - this.get('model').save().then(function () { + this.get('model').save('slug').then(function () { self.notifications.showSuccess('Permalink successfully changed to ' + self.get('slug') + '.'); }, this.notifications.showErrors); }, - updatePublishedAt: function (userInput) { - var self = this, - errMessage = '', - newPubDate = formatDate(parseDateString(userInput)), - pubDate = this.get('publishedAt'), - newPubDateMoment, - pubDateMoment; + /** + * Parse user's set published date. + * Action sent by post settings menu view. + * (#1351) + */ + setPublishedAt: function (userInput) { + var errMessage = '', + newPublishedAt = parseDateString(userInput), + publishedAt = this.get('published_at'), + self = this; - // if there is no new pub date, mark that until the post is published, - // when we'll fill in with the current time. - if (!newPubDate) { - this.set('publishedAt', ''); + if (!userInput) { + //Clear out the published_at field for a draft + if (this.get('isDraft')) { + this.set('published_at', null); + } return; } - // Check for missing time stamp on new data - // If no time specified, add a 12:00 - if (newPubDate && !newPubDate.slice(-5).match(/\d+:\d\d/)) { - newPubDate += ' 12:00'; - } - - newPubDateMoment = parseDateString(newPubDate); - - // If there was a published date already set - if (pubDate) { - // Check for missing time stamp on current model - // If no time specified, add a 12:00 - if (!pubDate.slice(-5).match(/\d+:\d\d/)) { - pubDate += ' 12:00'; - } - - pubDateMoment = parseDateString(pubDate); - - // Quit if the new date is the same - if (pubDateMoment.isSame(newPubDateMoment)) { - return; - } + // Do nothing if the user didn't actually change the date + if (publishedAt && publishedAt.isSame(newPublishedAt)) { + return; } // Validate new Published date - if (!newPubDateMoment.isValid() || newPubDate.substr(0, 12) === 'Invalid date') { + if (!newPublishedAt.isValid()) { errMessage = 'Published Date must be a valid date with format: ' + 'DD MMM YY @ HH:mm (e.g. 6 Dec 14 @ 15:00)'; } - if (newPubDateMoment.diff(new Date(), 'h') > 0) { + //Can't publish in the future yet + if (newPublishedAt.diff(new Date(), 'h') > 0) { errMessage = 'Published Date cannot currently be in the future.'; } + //If errors, notify and exit. if (errMessage) { - // Show error message this.notifications.showError(errMessage); - //Hack to push a "change" when it's actually staying - // the same. - //This alerts the listener on post-settings-menu - this.notifyPropertyChange('publishedAt'); return; } //Validation complete - this.set('published_at', newPubDateMoment.toDate()); + this.set('published_at', newPublishedAt); - // If the model doesn't currently - // exist on the server - // then just update the model's value - if (!this.get('isNew')) { - return; - } - - this.get('model').save().then(function () { - this.notifications.showSuccess('Publish date successfully changed to ' + - self.get('publishedAt') + '.'); + //@ TODO: Make sure we're saving ONLY the publish date here, + // Don't want to accidentally save text the user's been working on. + this.get('model').save('published_at').then(function () { + self.notifications.showSuccess('Publish date successfully changed to ' + + formatDate(self.get('published_at')) + '.'); }, this.notifications.showErrors); } } }); -export default PostSettingsMenuController; +export default PostSettingsMenuController; \ No newline at end of file diff --git a/ghost/admin/mixins/editor-base-controller.js b/ghost/admin/mixins/editor-base-controller.js index 074cd3663e..c9cc211314 100644 --- a/ghost/admin/mixins/editor-base-controller.js +++ b/ghost/admin/mixins/editor-base-controller.js @@ -1,9 +1,6 @@ /* global console */ var EditorControllerMixin = Ember.Mixin.create({ - //## Computed post properties - isPublished: Ember.computed.equal('status', 'published'), - isDraft: Ember.computed.equal('status', 'draft'), /** * By default, a post will not change its publish state. * Only with a user-set value (via setSaveType action) diff --git a/ghost/admin/models/post.js b/ghost/admin/models/post.js index 71f93db0e0..cb6316bed6 100644 --- a/ghost/admin/models/post.js +++ b/ghost/admin/models/post.js @@ -19,21 +19,10 @@ var Post = DS.Model.extend({ published_at: DS.attr('moment-date'), published_by: DS.belongsTo('user', { async: true }), tags: DS.hasMany('tag', { async: true }), - - generateSlug: function () { - var title = this.get('title'), - url; - - if (!title) { - return; - } - - url = this.get('ghostPaths').apiUrl('slugs', 'post', encodeURIComponent(title)); - - return ic.ajax.request(url, { - type: 'GET' - }); - }, + + //## Computed post properties + isPublished: Ember.computed.equal('status', 'published'), + isDraft: Ember.computed.equal('status', 'draft'), validate: function () { var validationErrors = []; @@ -48,4 +37,4 @@ var Post = DS.Model.extend({ }.property('title') }); -export default Post; \ No newline at end of file +export default Post; diff --git a/ghost/admin/models/slug-generator.js b/ghost/admin/models/slug-generator.js new file mode 100644 index 0000000000..ba7806d407 --- /dev/null +++ b/ghost/admin/models/slug-generator.js @@ -0,0 +1,27 @@ +var SlugGenerator = Ember.Object.extend({ + ghostPaths: null, + value: null, + toString: function () { + return this.get('value'); + }, + generateSlug: function (textToSlugify) { + var self = this, + url; + + if (!textToSlugify) { + return Ember.RSVP.resolve(''); + } + + url = this.get('ghostPaths').apiUrl('slugs', 'post', encodeURIComponent(textToSlugify)); + + return ic.ajax.request(url, { + type: 'GET' + }).then(function (response) { + var slug = response.slugs[0].slug; + self.set('value', slug); + return slug; + }); + } +}); + +export default SlugGenerator; diff --git a/ghost/admin/templates/-navbar.hbs b/ghost/admin/templates/-navbar.hbs index 1e913b13f8..728e198881 100644 --- a/ghost/admin/templates/-navbar.hbs +++ b/ghost/admin/templates/-navbar.hbs @@ -17,7 +17,6 @@ {{/if}} {{user.name}} {{/gh-popover-button}} - {{!-- @TODO: add functionality to allow for dropdown to work --}} {{#gh-popover tagName="ul" classNames="overlay" name="user-menu" closeOnClick="true"}}
  • {{#link-to "settings.user"}}Your Profile{{/link-to}}
  • diff --git a/ghost/admin/templates/post-settings-menu.hbs b/ghost/admin/templates/post-settings-menu.hbs index ea5bebe95e..9ef5749d1f 100644 --- a/ghost/admin/templates/post-settings-menu.hbs +++ b/ghost/admin/templates/post-settings-menu.hbs @@ -6,7 +6,7 @@ - {{gh-blur-text-field class="post-setting-slug" id="url" value=newSlug action="updateSlug" placeholder=slugPlaceholder selectOnClick="true"}} + {{gh-blur-input class="post-setting-slug" id="url" value=slugValue action="updateSlug" placeholder=slugPlaceholder selectOnClick="true"}} @@ -14,7 +14,7 @@ - {{gh-blur-text-field class="post-setting-date" value=view.publishedAt action="updatePublishedAt" placeholder=view.datePlaceholder}} + {{gh-blur-input class="post-setting-date" value=publishedAtValue action="setPublishedAt" placeholder=publishedAtPlaceholder}} diff --git a/ghost/admin/utils/date-formatting.js b/ghost/admin/utils/date-formatting.js index 200f7ee972..898cbdd378 100644 --- a/ghost/admin/utils/date-formatting.js +++ b/ghost/admin/utils/date-formatting.js @@ -1,21 +1,31 @@ /* global moment */ -var parseDateFormats = ['DD MMM YY HH:mm', - 'DD MMM YYYY HH:mm', - 'DD/MM/YY HH:mm', - 'DD/MM/YYYY HH:mm', - 'DD-MM-YY HH:mm', - 'DD-MM-YYYY HH:mm', - 'YYYY-MM-DD HH:mm'], +var parseDateFormats = ['DD MMM YY @ HH:mm', 'DD MMM YY HH:mm', + 'DD MMM YYYY @ HH:mm', 'DD MMM YYYY HH:mm', + 'DD/MM/YY @ HH:mm', 'DD/MM/YY HH:mm', + 'DD/MM/YYYY @ HH:mm', 'DD/MM/YYYY HH:mm', + 'DD-MM-YY @ HH:mm', 'DD-MM-YY HH:mm', + 'DD-MM-YYYY @ HH:mm', 'DD-MM-YYYY HH:mm', + 'YYYY-MM-DD @ HH:mm', 'YYYY-MM-DD HH:mm'], displayDateFormat = 'DD MMM YY @ HH:mm'; +/** + * Add missing timestamps + */ +var verifyTimeStamp = function (dateString) { + if (dateString && !dateString.slice(-5).match(/\d+:\d\d/)) { + dateString += ' 12:00'; + } + return dateString; +}; + //Parses a string to a Moment var parseDateString = function (value) { - return value ? moment(value, parseDateFormats) : ''; + return value ? moment(verifyTimeStamp(value), parseDateFormats, true) : undefined; }; //Formats a Date or Moment var formatDate = function (value) { - return value ? moment(value).format(displayDateFormat) : ''; + return verifyTimeStamp(value ? moment(value).format(displayDateFormat) : ''); }; -export {parseDateString, formatDate}; +export {parseDateString, formatDate}; \ No newline at end of file