Merge pull request #4089 from halfdan/4087-meta

Validate and properly color letter count.

ghost/admin/controllers/post-settings-menu.js

@@ -6,6 +6,7 @@ import boundOneWay from 'ghost/utils/bound-one-way';
 var PostSettingsMenuController = Ember.ObjectController.extend({
     //State for if the user is viewing a tab's pane.
     needs: 'application',
+
     isViewingSubview: Ember.computed('controllers.application.showRightOutlet', function (key, value) {
         // Not viewing a subview if we can't even see the PSM
         if (!this.get('controllers.application.showRightOutlet')) {
@@ -97,13 +98,19 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
         });
     },
 
-    metaTitleValue: boundOneWay('meta_title'),
+    metaTitleScratch: boundOneWay('meta_title'),
+    metaDescriptionScratch: boundOneWay('meta_description'),
 
-    metaDescriptionValue: boundOneWay('meta_description'),
     metaDescriptionPlaceholder: Ember.computed('scratch', function () {
-        var html = this.get('scratch'),
+        var el = $('.rendered-markdown'),
+            html = '',
             placeholder;
 
+        // Get rendered markdown
+        if (!_.isUndefined(el) && el.length > 0) {
+            html = el[0].innerHTML;
+        }
+
         // Strip HTML
         placeholder = $('<div />', { html: html }).text();
         // Replace new lines and trim
@@ -114,14 +121,14 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
         return placeholder;
     }),
 
-    seoTitle: Ember.computed('titleScratch', 'metaTitleValue', function () {
+    seoTitle: Ember.computed('titleScratch', 'metaTitleScratch', function () {
-        var metaTitle = this.get('metaTitleValue') || '';
+        var metaTitle = this.get('metaTitleScratch') || '';
 
         return metaTitle.length > 0 ? metaTitle : this.get('titleScratch');
     }),
 
-    seoDescription: Ember.computed('scratch', 'metaDescriptionValue', function () {
+    seoDescription: Ember.computed('metaDescriptionScratch', function () {
-        var metaDescription = this.get('metaDescriptionValue') || '';
+        var metaDescription = this.get('metaDescriptionScratch') || '';
 
         return metaDescription.length > 0 ? metaDescription : this.get('metaDescriptionPlaceholder');
     }),
@@ -319,7 +326,6 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
 
             this.get('model').save(this.get('saveOptions')).catch(function (errors) {
                 self.showErrors(errors);
-                self.get('model').rollback();
             });
         },
 
@@ -336,7 +342,6 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
 
             this.get('model').save(this.get('saveOptions')).catch(function (errors) {
                 self.showErrors(errors);
-                self.get('model').rollback();
             });
         },
 

ghost/admin/helpers/gh-count-down-characters.js

@@ -6,7 +6,7 @@ var countDownCharacters = Ember.Handlebars.makeBoundHelper(function (content, ma
     if (length > maxCharacters) {
         el.style.color = '#E25440';
     } else {
-        el.style.color = '#9E9D95';
+        el.style.color = '#9FBB58';
     }
 
     el.innerHTML = length;

ghost/admin/templates/post-settings-menu.hbs

@@ -85,16 +85,17 @@
 
 
         <div class="post-settings-content">
+            <form>
             <div class="form-group">
                 <label for="blog-title">Meta Title</label>
-                {{gh-input class="post-setting-meta-title" value=metaTitleValue name="post-setting-meta-title" focus-out="setMetaTitle" placeholder=titleScratch stopEnterKeyDownPropagation="true"}}
+                {{gh-input class="post-setting-meta-title" value=metaTitleScratch name="post-setting-meta-title" focus-out="setMetaTitle" placeholder=titleScratch stopEnterKeyDownPropagation="true"}}
-                <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters metaTitleValue 70}}</p>
+                <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters metaTitleScratch 70}}</p>
             </div>
 
             <div class="form-group">
                 <label for="blog-title">Meta Description</label>
-                {{gh-textarea class="post-setting-meta-description" value=metaDescriptionValue name="post-setting-meta-description" focus-out="setMetaDescription" placeholder=metaDescriptionPlaceholder stopEnterKeyDownPropagation="true"}}
+                {{gh-textarea class="post-setting-meta-description" value=metaDescriptionScratch name="post-setting-meta-description" focus-out="setMetaDescription" placeholder=metaDescriptionPlaceholder stopEnterKeyDownPropagation="true"}}
-                <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionValue 156}}</p>
+                <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
             </div>
 
             <div class="form-group">
@@ -105,6 +106,7 @@
                     <div class="seo-preview-description">{{seoDescription}}</div>
                 </div>
             </div>
+            </form>
         </div>
     {{/gh-tab-pane}}
     </div>

ghost/admin/validators/post.js

@@ -1,15 +1,26 @@
 var PostValidator = Ember.Object.create({
     check: function (model) {
         var validationErrors = [],
+            data = model.getProperties('title', 'meta_title', 'meta_description');
 
-            title = model.get('title');
+        if (validator.empty(data.title)) {
-
-        if (validator.empty(title)) {
             validationErrors.push({
                 message: 'You must specify a title for the post.'
             });
         }
 
+        if (!validator.isLength(data.meta_title, 0, 70)) {
+            validationErrors.push({
+                message: 'Meta Title is too long.'
+            });
+        }
+
+        if (!validator.isLength(data.meta_description, 0, 156)) {
+            validationErrors.push({
+                message: 'Meta Description is too long.'
+            });
+        }
+
         return validationErrors;
     }
 });