SEO configurator mockup

bzr revid: ddm@openerp.com-20130827070435-bqrhg887ynz1f6ys

4 files changed, 127 insertions, 14 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 8a20e94bec0..fce31223e8e 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 .oe_hidden {
   display: none !important;
 }
@@ -267,3 +268,16 @@
   color: #e00101;
   opacity: 1;
 }
+
+.oe_seo_configuration input {
+  width: inherit;
+}
+.oe_seo_configuration textarea {
+  width: inherit;
+}
+.oe_seo_configuration ul {
+  list-style: none;
+}
+.oe_seo_configuration .oe_remove {
+  color: #e00101;
+}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 29621f95e4b..16ff37371ff 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -194,7 +194,7 @@
 
 $mobile_preview_background: #000000
 $mobile_preview_border: #1A1A1A
-$mobile_preview_close: #E00101
+$icon_close: #E00101
 #mobile-preview.modal
     height: 660px
     background-color: $mobile_preview_background
@@ -233,5 +233,15 @@ $mobile_preview_close: #E00101
         color: lightgrey
         opacity: 1
     .close:hover
-        color: $mobile_preview_close
+        color: $icon_close
         opacity: 1
+
+.oe_seo_configuration
+    input
+        width: inherit
+    textarea
+        width: inherit
+    ul
+        list-style: none
+    .oe_remove
+        color: $icon_close
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index c71126816c1..88147b4ffb5 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -46,6 +46,7 @@
             'click button[data-action=cancel]': 'cancel',
             'click button[data-action=snippet]': 'snippet',
             'click a[data-action=show-mobile-preview]': 'mobilePreview',
+            'click a[data-action=promote-current-page]': 'promotePage',
         },
         container: 'body',
         customize_setup: function() {
@@ -199,7 +200,47 @@
         mobilePreview: function () {
             $('body').addClass('oe_stop_scrolling');
             document.getElementById("mobile-viewport").src = window.location.href + "?mobile-preview=true";
+        },
+        promotePage: function () {
+            (new website.seo.Configurator()).appendTo($('body'));
+        },
+    });
 
+    /* ----- SEO TOOLS ---- */
+    website.seo = {};
+    website.seo.Keyword = openerp.Widget.extend({
+        template: 'website.seo_keyword',
+        events: {
+            'click a[data-action=remove-keyword]': 'destroy',
+        },
+        init: function (options) {
+            this.keyword = options.keyword;
+        }
+    });
+    website.seo.Configurator = openerp.Widget.extend({
+        template: 'website.seo_configuration',
+        events: {
+            'click button[data-action=add]': 'add',
+            'click a[data-action=update]': 'update',
+        },
+        container: 'body',
+        start: function () {
+            $('input[name=seo_page_url]').val(window.location.href);
+            $('input[name=seo_page_title]').val($('title').text());
+
+            this.$el.modal();
+        },
+        addKeyword: function (word) {
+            new website.seo.Keyword({
+                keyword: word
+            }).appendTo(this.$el.find('.seo-keywords-list'));
+        },
+        add: function () {
+            var word = this.$el.find('input[name=seo_page_keywords]').val();
+            this.addKeyword(word);
+        },
+        update: function () {
+            // TODO: Persist changes
         },
     });
 
@@ -316,14 +357,14 @@
             }
         },
         vomify: function($el){
-            var hue=0; 
+            var hue=0;
             var beat = false;
-            var a = setInterval(function(){ 
+            var a = setInterval(function(){
                 $el.css({'-webkit-filter':'hue-rotate('+hue+'deg)'}); hue += 5;
             }, 10);
             setTimeout(function(){
                 clearInterval(a);
-                setInterval(function(){ 
+                setInterval(function(){
                     var filter =  'hue-rotate('+hue+'deg)'+ (beat ? ' invert()' : '');
                     $('html').css({'-webkit-filter': filter}); hue += 5;
                     if(hue % 35 === 0){
@@ -367,7 +408,7 @@
         // setup widget and drag and drop
         start_snippets: function(){
             var self = this;
-            
+
             this.$('.oe_snippet').draggable({
                 helper: 'clone',
                 zIndex: '1000',
@@ -492,7 +533,7 @@
 
         activate_overlay_zones: function(selector){
             var $targets = $(selector);
-            
+
             function is_visible($el){
                 return     $el.css('display')    != 'none'
                         && $el.css('opacity')    != '0'
@@ -507,7 +548,7 @@
                 var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
                 return parents.length === 0;
             });
-            
+
             var zone_template = "<div class='oe_drop_zone oe_overlay'></div>";
             $('.oe_drop_zone').remove();
 
@@ -531,7 +572,7 @@
             var self = this;
             this.activate_overlay_zones('#wrap .container');
             var $snippets = $('.oe_drop_zone');
-            
+
             for(var i = 0, len = $snippets.length; i < len; i++){
                 var $snippet = $snippets.eq(i);
                 var $manipulator = $(openerp.qweb.render('website.snippet_manipulator'));
@@ -553,10 +594,10 @@
                     var y = event.pageY;
 
                     var pt = $snippet.css('padding-top');
-                    var pb = $snippet.css('padding-bottom'); 
+                    var pb = $snippet.css('padding-bottom');
                     pt = Number(pt.slice(0,pt.length - 2)) || 0; //FIXME something cleaner to remove 'px'
                     pb = Number(pb.slice(0,pb.length - 2)) || 0;
-                    
+
                     $manipulator.addClass('oe_hover');
                     event.preventDefault();
 
@@ -568,7 +609,7 @@
                             $snippet.css('padding-top',pt-dy+'px');
                             self.cover_target($manipulator,$snippet);
                         }else if($handle.hasClass('s') || $handle.hasClass('sw') || $handle.hasClass('se')){
-    
+
                             $snippet.css('padding-bottom',pb+dy+'px');
                             self.cover_target($manipulator,$snippet);
                         }
@@ -580,7 +621,7 @@
                         self.activate_snippet_manipulators();
                     });
                 });
-                    
+
             }
         },
         deactivate_snippet_manipulators: function(){
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 37a3bc453f3..326331d23af 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -12,7 +12,7 @@
                 <ul class="nav pull-right">
                     <li><a data-action="show-mobile-preview" href="#mobile-preview" data-toggle="modal" role="button"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
                     <li class="divider-vertical"></li>
-                    <li><a href="#">Promote<!-- <sup><span class="badge">1</span></sup> --></a></li>
+                    <li><a data-action="promote-current-page" href="#"><span title="Promote page on the web">Promote</span></a></li>
                     <li><a href="#">Translate</a></li>
                     <li class="dropdown">
                         <a id="customize-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">Customize <span class="caret"></span></a>
@@ -53,6 +53,54 @@
 
     </t>
 
+    <t t-name="website.seo_configuration">
+        <div class="modal hide fade oe_seo_configuration" tabindex="-1" role="dialog" aria-labelledby="seo-configuration-title" aria-hidden="true">
+            <div class="modal-header">
+                <button title="Close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="seo-configuration-title">Promote your page on the web</h3>
+            </div>
+            <div class="modal-body">
+                <div class="control-group">
+                    <label class="control-label" for="seo_page_url">URL</label>
+                    <div class="controls">
+                        <input type="text" name="seo_page_url" required="True" size="70" readonly="readonly"/>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="seo_page_title">Title</label>
+                    <div class="controls">
+                        <input type="text" name="seo_page_title" required="True" size="70"/>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="seo_page_description">Description</label>
+                    <div class="controls">
+                        <textarea name="seo_page_description" rows="3" cols="70" size="160"/>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label" for="seo_page_keywords">Keywords</label>
+                    <div class="controls">
+                        <div class="input-append">
+                            <input type="text" name="seo_page_keywords" required="True" size="30" placeholder="New keyword"/>
+                            <button data-action="add" class="btn" type="button">Add</button>
+                        </div>
+                        <ul class="seo-keywords-list">
+                            <!-- filled in JS -->
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <a data-action="update" href="#" class="btn btn-primary">Update page</a>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="website.seo_keyword">
+        <li><a href="#" class="oe_remove" data-action="remove-keyword"><i class="icon-trash"/></a> <span class="label seo-keyword"><t t-raw="widget.keyword"/></span></li>
+    </t>
+
     <t t-name="website.carousel">
         <div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
             <div class='container'>