From f880ce9ae7057628ded1337bab31f7dbff1bad90 Mon Sep 17 00:00:00 2001
From: ddm <ddm@openerp.com>
Date: Tue, 27 Aug 2013 09:48:16 +0200
Subject: [PATCH] Code cleanup

bzr revid: ddm@openerp.com-20130827074816-1kuvpbz6vubhel68
---
 addons/website/static/src/css/editor.css  | 10 ++++-----
 addons/website/static/src/css/editor.sass |  2 +-
 addons/website/static/src/js/website.js   | 27 ++++++++++++++++++-----
 addons/website/static/src/xml/website.xml |  9 ++++----
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index fce31223e8e..b95df24bc01 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -221,7 +221,7 @@
   overflow: hidden;
 }
 
-#mobile-preview.modal {
+.oe_mobile_preview.modal {
   height: 660px;
   background-color: black;
   border: 2px solid;
@@ -234,22 +234,22 @@
   right: 0;
   max-width: 330px;
 }
-#mobile-preview.modal .modal-header {
+.oe_mobile_preview.modal .modal-header {
   background-color: black;
   border-bottom: 0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
-#mobile-preview.modal .modal-header .oe_mobile_preview_title {
+.oe_mobile_preview.modal .modal-header .oe_mobile_preview_title {
   color: #1a1a1a;
 }
-#mobile-preview.modal .modal-body {
+.oe_mobile_preview.modal .modal-body {
   background-color: black;
   max-height: 600px;
   padding: 0;
   margin: 0;
 }
-#mobile-preview.modal .modal-footer {
+.oe_mobile_preview.modal .modal-footer {
   background-color: black;
 }
 
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 16ff37371ff..87e8715e931 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -195,7 +195,7 @@
 $mobile_preview_background: #000000
 $mobile_preview_border: #1A1A1A
 $icon_close: #E00101
-#mobile-preview.modal
+.oe_mobile_preview.modal
     height: 660px
     background-color: $mobile_preview_background
     border: 2px solid
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 890748c6988..74034e239f1 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -76,9 +76,6 @@
                     window.location.reload();
                 });
             });
-            $('#mobile-preview').on('hidden', function () {
-                $('body').removeClass('oe_stop_scrolling');
-            });
         },
         start: function() {
             var self = this;
@@ -198,14 +195,31 @@
             this.snippets.toggle();
         },
         mobilePreview: function () {
-            $('body').addClass('oe_stop_scrolling');
-            document.getElementById("mobile-viewport").src = window.location.href + "?mobile-preview=true";
+            (new website.MobilePreview()).appendTo($('body'));
         },
         promotePage: function () {
             (new website.seo.Configurator()).appendTo($('body'));
         },
     });
 
+    /* ----- MOBILE PREVIEW ---- */
+    website.MobilePreview = openerp.Widget.extend({
+        template: 'website.mobile_preview',
+        events: {
+            'hidden': 'close'
+        },
+        start: function () {
+            $('body').addClass('oe_stop_scrolling');
+            document.getElementById("mobile-viewport").src = window.location.href + "?mobile-preview=true";
+            this.$el.modal();
+        },
+        close: function () {
+            $('body').removeClass('oe_stop_scrolling');
+            this.destroy();
+        }
+
+    });
+
     /* ----- SEO TOOLS ---- */
     website.seo = {};
     website.seo.Keyword = openerp.Widget.extend({
@@ -223,6 +237,7 @@
         events: {
             'click button[data-action=add]': 'add',
             'click a[data-action=update]': 'update',
+            'hidden': 'destroy'
         },
         start: function () {
             $('input[name=seo_page_url]').val(window.location.href);
@@ -233,7 +248,7 @@
         addKeyword: function (word) {
             new website.seo.Keyword({
                 keyword: word
-            }).appendTo(this.$el.find('.seo-keywords-list'));
+            }).appendTo(this.$el.find('.js_seo_keywords_list'));
         },
         add: function () {
             var word = this.$el.find('input[name=seo_page_keywords]').val();
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 326331d23af..9b7c22482ae 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -10,7 +10,7 @@
                     <button data-action="edit" class="btn btn-primary">Edit</button>
                 </form>
                 <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><a data-action="show-mobile-preview" href="#"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
                     <li class="divider-vertical"></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>
@@ -38,8 +38,10 @@
                 </ul>
             </div>
         </div>
+    </t>
 
-        <div id="mobile-preview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
+    <t t-name="website.mobile_preview">
+        <div id="mobile-preview" class="modal hide fade oe_mobile_preview" tabindex="-1" role="dialog" aria-labelledby="mobile-preview-title" aria-hidden="true">
             <div class="modal-header oe_mobile_preview_header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h3 id="mobile-preview-title" class="oe_mobile_preview_title">Mobile preview</h3>
@@ -50,7 +52,6 @@
                 </div>
             </div>
         </div>
-
     </t>
 
     <t t-name="website.seo_configuration">
@@ -85,7 +86,7 @@
                             <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">
+                        <ul class="js_seo_keywords_list">
                             <!-- filled in JS -->
                         </ul>
                     </div>