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`

core/client/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;

core/client/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,120 +18,140 @@ 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 () {
+    slugValue: function (key, value) {
-        return this.get('model').generateSlug();
+        if (arguments.length > 1) {
-    }.property('title'),
+            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'),
+         * triggered by user manually changing slug
-                slug = this.get('slug'),
+         */
-                placeholder = this.get('slugPlaceholder'),
+        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
+            //Don't save just yet if it's an empty slug on a draft
-            // exist on the server
+            if (!newSlug && this.get('isDraft')) {
-            // then just update the model's value
-            if (!this.get('isNew')) {
                 return;
             }
 
-            this.get('model').save().then(function () {
+            this.get('model').save('slug').then(function () {
                 self.notifications.showSuccess('Permalink successfully changed to <strong>' +
                     self.get('slug') + '</strong>.');
             }, this.notifications.showErrors);
         },
 
-        updatePublishedAt: function (userInput) {
+        /**
-            var self = this,
+         * Parse user's set published date.
-                errMessage = '',
+         * Action sent by post settings menu view.
-                newPubDate = formatDate(parseDateString(userInput)),
+         * (#1351)
-                pubDate = this.get('publishedAt'),
+         */
-                newPubDateMoment,
+        setPublishedAt: function (userInput) {
-                pubDateMoment;
+            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,
+            if (!userInput) {
-            //    when we'll fill in with the current time.
+                //Clear out the published_at field for a draft
-            if (!newPubDate) {
+                if (this.get('isDraft')) {
-                this.set('publishedAt', '');
+                    this.set('published_at', null);
+                }
                 return;
             }
 
-            // Check for missing time stamp on new data
+            // Do nothing if the user didn't actually change the date
-            // If no time specified, add a 12:00
+            if (publishedAt && publishedAt.isSame(newPublishedAt)) {
-            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;
             }
-            }
 
             // 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
+            //@ TODO: Make sure we're saving ONLY the publish date here,
-            // exist on the server
+            // Don't want to accidentally save text the user's been working on.
-            // then just update the model's value
+            this.get('model').save('published_at').then(function () {
-            if (!this.get('isNew')) {
+                self.notifications.showSuccess('Publish date successfully changed to <strong>' +
-                return;
+                    formatDate(self.get('published_at')) + '</strong>.');
-            }
-
-            this.get('model').save().then(function () {
-                this.notifications.showSuccess('Publish date successfully changed to <strong>' +
-                    self.get('publishedAt') + '</strong>.');
             }, this.notifications.showErrors);
         }
     }

core/client/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)

core/client/models/post.js

@@ -20,20 +20,9 @@ var Post = DS.Model.extend({
     published_by: DS.belongsTo('user', { async: true }),
     tags: DS.hasMany('tag', { async: true }),
     
-    generateSlug: function () {
+    //## Computed post properties
-        var title = this.get('title'),
+    isPublished: Ember.computed.equal('status', 'published'),
-            url;
+    isDraft: Ember.computed.equal('status', 'draft'),
-
-        if (!title) {
-            return;
-        }
-
-        url = this.get('ghostPaths').apiUrl('slugs', 'post', encodeURIComponent(title));
-
-        return ic.ajax.request(url, {
-                type: 'GET'
-            });
-    },
 
     validate: function () {
         var validationErrors = [];

core/client/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;

core/client/templates/-navbar.hbs

@@ -17,7 +17,6 @@
                     {{/if}}
                     <span class="name">{{user.name}}</span>
                 {{/gh-popover-button}}
-                {{!-- @TODO: add functionality to allow for dropdown to work --}}
                 {{#gh-popover tagName="ul" classNames="overlay" name="user-menu" closeOnClick="true"}}
                         <li class="usermenu-profile">{{#link-to "settings.user"}}Your Profile{{/link-to}}</li>
                         <li class="divider"></li>

core/client/templates/post-settings-menu.hbs

@@ -6,7 +6,7 @@
                     <label for="url">URL</label>
                 </td>
                 <td class="post-setting-field">
-                    {{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"}}
                 </td>
             </tr>
             <tr class="post-setting">
@@ -14,7 +14,7 @@
                     <label for="pub-date">Pub Date</label>
                 </td>
                 <td class="post-setting-field">
-                    {{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}}
                 </td>
             </tr>
             <tr class="post-setting">

core/client/utils/date-formatting.js

@@ -1,21 +1,31 @@
 /* global moment */
-var parseDateFormats = ['DD MMM YY 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 MMM YYYY HH:mm',
-                        'DD/MM/YY HH:mm',
+                        'DD/MM/YY @ HH:mm', 'DD/MM/YY HH:mm',
-                        'DD/MM/YYYY HH:mm',
+                        'DD/MM/YYYY @ HH:mm', 'DD/MM/YYYY HH:mm',
-                        'DD-MM-YY HH:mm',
+                        'DD-MM-YY @ HH:mm', 'DD-MM-YY HH:mm',
-                        'DD-MM-YYYY HH:mm',
+                        'DD-MM-YYYY @ HH:mm', 'DD-MM-YYYY HH:mm',
-                        'YYYY-MM-DD 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};