[IMP] add SEO preview

bzr revid: ddm@openerp.com-20140121125325-641psvqr4w96lsci

4 files changed, 146 insertions, 5 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index faf02a57fc0..d0a02ce7b0b 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -358,6 +358,56 @@ ul.oe_menu_editor .disclose {
   -o-border-radius: 0.4em;
   border-radius: 0.4em;
 }
+.oe_seo_configuration li.oe_seo_preview_g {
+  line-height: 1.2;
+  list-style: none;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  font-size: small;
+  font-family: arial, sans-serif;
+}
+.oe_seo_configuration li.oe_seo_preview_g h3 {
+  font-size: medium;
+}
+.oe_seo_configuration li.oe_seo_preview_g .r {
+  margin: 0;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oe_seo_configuration li.oe_seo_preview_g .r a {
+  color: #1e0fbe;
+  text-decoration: underline;
+  text-transform: none;
+}
+.oe_seo_configuration li.oe_seo_preview_g .r a em {
+  font-style: normal !important;
+}
+.oe_seo_configuration li.oe_seo_preview_g .s {
+  color: #444444;
+  max-width: 42em;
+}
+.oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
+  display: block;
+  margin-bottom: 1px;
+}
+.oe_seo_configuration li.oe_seo_preview_g .f {
+  color: #666666;
+  margin-bottom: 1px;
+}
+.oe_seo_configuration li.oe_seo_preview_g .f cite {
+  color: #006621;
+  font-style: normal;
+  font-size: 14px;
+}
+.oe_seo_configuration li.oe_seo_preview_g .st {
+  line-height: 1.24;
+}
 
 /* ---- ACE EDITOR ---- {{{ */
 .oe_ace_view_editor {
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 27cee9a2eae..ce9e43ec1a2 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -313,6 +313,47 @@ $highlighted_text_color: #ffffff
     .oe_seo_keyword
         padding: .2em .4em .2em .5em
         +border-radius(.4em)
+    li.oe_seo_preview_g
+        line-height: 1.2
+        list-style: none
+        list-style-image: none
+        list-style-position: outside
+        list-style-type: none
+        font-size: small
+        font-family: arial,sans-serif
+        h3
+            font-size: medium
+        .r
+            margin: 0
+            font-size: 16px
+            font-style: normal
+            font-weight: normal
+            overflow: hidden
+            text-overflow: ellipsis
+            -webkit-text-overflow: ellipsis
+            white-space: nowrap
+            a
+                color: rgb(30, 15, 190)
+                text-decoration: underline
+                text-transform: none
+                em
+                    font-style: normal !important
+        .s
+            color: #444
+            max-width: 42em
+        .kv,.slp
+            display: block
+            margin-bottom: 1px
+        .f
+            color: #666
+            margin-bottom: 1px
+            cite
+                color: #006621
+                font-style: normal
+                font-size: 14px
+        .st
+            line-height: 1.24
+
 
 // }}}
 
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index 563f850486e..9f1745fc1df 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -234,6 +234,16 @@
         },
     });
 
+    website.seo.Preview = openerp.Widget.extend({
+        template: 'website.seo_preview',
+        init: function (parent, options) {
+            this.title = options.title;
+            this.url = options.url;
+            this.description = options.description || "[ The description will be generated by google unless you specify one ]";
+            this._super(parent);
+        },
+    });
+
     website.seo.HtmlPage = openerp.Class.extend(openerp.PropertiesMixin, {
         url: function () {
             var url = window.location.href;
@@ -327,7 +337,7 @@
         canEditDescription: false,
         canEditKeywords: false,
         maxTitleSize: 65,
-        maxDescriptionSize: 155,
+        maxDescriptionSize: 160,
         start: function () {
             var self = this;
             var $modal = self.$el;
@@ -361,6 +371,7 @@
             });
             self.keywordList.appendTo($modal.find('.js_seo_keywords_list'));
             self.disableUnsavableFields();
+            self.renderPreview();
             $modal.modal();
         },
         disableUnsavableFields: function () {
@@ -484,6 +495,7 @@
             setTimeout(function () {
                 var title = self.$('input[name=seo_page_title]').val();
                 self.htmlPage.changeTitle(title);
+                self.renderPreview();
             }, 0);
         },
         descriptionChanged: function () {
@@ -491,7 +503,18 @@
             setTimeout(function () {
                 var description = self.$('textarea[name=seo_page_description]').attr('value');
                 self.htmlPage.changeDescription(description);
-            }, 1);
+                self.renderPreview();
+            }, 0);
+        },
+        renderPreview: function () {
+            var preview = new website.seo.Preview(this, {
+                title: this.htmlPage.title(),
+                description: this.htmlPage.description(),
+                url: this.htmlPage.url(),
+            });
+            var $preview = this.$('.js_seo_preview');
+            $preview.empty();
+            preview.appendTo($preview);
         },
         destroy: function () {
             this.htmlPage.changeKeywords(this.keywordList.keywords());
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index be9414ca37f..0c055487dd8 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -43,19 +43,24 @@
                                 <div class="form-group">
                                     <label for="seo_page_description" class="col-lg-2 control-label">Description</label>
                                     <div class="col-lg-8">
-                                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" size="160"/>
+                                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" t-att-maxlength="widget.maxDescriptionSize"/>
                                     </div>
                                 </div>
                             </div>
                         </section>
+                        <section>
+                            <h3 class="page-header">3. Preview <small>how your page will be listed on Google</small></h3>
+                            <div class="js_seo_preview"></div>
+                        </section>
                         <!--
                         <section class="js_image_section">
-                            <h3 class="page-header">3. Describe your images</h3>
+                            <h3 class="page-header">4. Describe your images</h3>
                             <div class="row js_seo_image_list">
                             </div>
                         </section>
                         -->
-                    </div><div class="modal-footer">
+                    </div>
+                    <div class="modal-footer">
                         <button type="button" data-action="update" class="btn btn-primary">Save</button>
                         or
                         <a data-action="discard" data-dismiss="modal" href="#" >Discard</a>
@@ -111,4 +116,26 @@
         </div>
     </t>
 
+    <t t-name="website.seo_preview">
+        <li class="oe_seo_preview_g">
+            <div class="rc">
+                <span class="altcts"></span>
+                <h3 class="r">
+                    <a t-att-href="url">
+                        <em><t t-esc="widget.title"/></em>
+                    </a>
+                </h3>
+                <div class="s">
+                    <div>
+                        <div class="f kv" style="white-space:nowrap">
+                            <cite><t t-esc="widget.url"/></cite>
+                        </div>
+                        <div class="f slp"></div>
+                        <span class="st"><t t-esc="widget.description"/></span>
+                    </div>
+                </div>
+            </div>
+        </li>
+    </t>
+
 </templates>