From 7aed86c2057eef42fc9d281bb93183481cb4c5a9 Mon Sep 17 00:00:00 2001
From: Fabian Becker <halfdan@xnorfz.de>
Date: Tue, 23 Sep 2014 09:37:08 +0000
Subject: [PATCH] Remove placeholders and limit SERP description

closes #4112, closes #4113
- Remove meta_* placeholders
- Add &hellip; in SERP preview when desc too long
---
 core/client/controllers/post-settings-menu.js | 70 ++++++++++++-------
 core/client/templates/post-settings-menu.hbs  |  4 +-
 2 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/core/client/controllers/post-settings-menu.js b/core/client/controllers/post-settings-menu.js
index 5e14c526f6..133d927a6c 100644
--- a/core/client/controllers/post-settings-menu.js
+++ b/core/client/controllers/post-settings-menu.js
@@ -101,36 +101,44 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
     metaTitleScratch: boundOneWay('meta_title'),
     metaDescriptionScratch: boundOneWay('meta_description'),
 
-    metaDescriptionPlaceholder: Ember.computed('scratch', function () {
-        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
-        placeholder = placeholder.replace(/\n+/g, ' ').trim();
-        // Limit to 156 characters
-        placeholder = placeholder.substring(0,156);
-
-        return placeholder;
-    }),
-
     seoTitle: Ember.computed('titleScratch', 'metaTitleScratch', function () {
         var metaTitle = this.get('metaTitleScratch') || '';
 
         return metaTitle.length > 0 ? metaTitle : this.get('titleScratch');
     }),
 
-    seoDescription: Ember.computed('metaDescriptionScratch', function () {
-        var metaDescription = this.get('metaDescriptionScratch') || '';
+    seoDescription: Ember.computed('scratch', 'metaDescriptionScratch', function () {
+        var metaDescription = this.get('metaDescriptionScratch') || '',
+            el,
+            html = '',
+            placeholder;
 
-        return metaDescription.length > 0 ? metaDescription : this.get('metaDescriptionPlaceholder');
+        if (metaDescription.length > 0) {
+            placeholder = metaDescription;
+        } else {
+            el = $('.rendered-markdown');
+
+            // Get rendered markdown
+            if (!_.isUndefined(el) && el.length > 0) {
+                html = el.clone();
+                html.find('.image-uploader').remove();
+                html = html[0].innerHTML;
+            }
+
+            // Strip HTML
+            placeholder = $('<div />', { html: html }).text();
+            // Replace new lines and trim
+            placeholder = placeholder.replace(/\n+/g, ' ').trim();
+        }
+
+        if (placeholder.length > 156) {
+            // Limit to 156 characters
+            placeholder = placeholder.substring(0,156).trim();
+            placeholder = Ember.Handlebars.Utils.escapeExpression(placeholder);
+            placeholder = new Ember.Handlebars.SafeString(placeholder + '&hellip;');
+        }
+
+        return placeholder;
     }),
 
     seoSlug: Ember.computed('slug', 'slugPlaceholder', function () {
@@ -314,7 +322,13 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
         },
 
         setMetaTitle: function (metaTitle) {
-            var self = this;
+            var self = this,
+                currentTitle = this.get('meta_title') || '';
+
+            // Only update if the title has changed
+            if (currentTitle === metaTitle) {
+                return;
+            }
 
             this.set('meta_title', metaTitle);
 
@@ -330,7 +344,13 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
         },
 
         setMetaDescription: function (metaDescription) {
-            var self = this;
+            var self = this,
+                currentDescription = this.get('meta_description') || '';
+
+            // Only update if the description has changed
+            if (currentDescription === metaDescription) {
+                return;
+            }
 
             this.set('meta_description', metaDescription);
 
diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs
index 3de264ff04..3877bd9351 100644
--- a/core/client/templates/post-settings-menu.hbs
+++ b/core/client/templates/post-settings-menu.hbs
@@ -88,13 +88,13 @@
             <form>
             <div class="form-group">
                 <label for="blog-title">Meta Title</label>
-                {{gh-input class="post-setting-meta-title" value=metaTitleScratch 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" stopEnterKeyDownPropagation="true"}}
                 <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=metaDescriptionScratch 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" stopEnterKeyDownPropagation="true"}}
                 <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
             </div>