[WIP] website media editor

bzr revid: chm@openerp.com-20140327105103-r4laze34bf0z62o2

4 files changed, 94 insertions, 39 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 8192a6e1111..1256af59369 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -301,7 +301,16 @@ ul.oe_menu_editor .disclose {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1001;
+  z-index: 1000;
+}
+
+.preview-container {
+  height: 100px;
+}
+.preview-container > * {
+  max-height: 100px;
+  margin: 0 auto;
+  display: block;
 }
 
 .cke_editable .fa {
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index c0f946e0f6f..4543fce4500 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -266,6 +266,12 @@ $attachment-border-color: #848490
     left: 0
     // This z-index is due to .navbar of bootstrap
     z-index: 1000
+.preview-container
+    height: 100px
+    > *
+        max-height: 100px
+        margin: 0 auto
+        display: block
 
 // fontawesome
 .cke_editable .fa
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index ad6f2f67157..67653152d5c 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -629,30 +629,45 @@
         },
 
         /**
-         * Creates a "hover" button for image and link edition
+         * Creates a "hover" button for link edition
          *
-         * @param {String} label the button's label
          * @param {Function} editfn edition function, called when clicking the button
-         * @param {String} [classes] additional classes to set on the button
          * @returns {jQuery}
          */
-        make_hover_button: function (label, editfn, classes, styleButton) {
-            var $div = $(openerp.qweb.render('website.editor.hoverbutton', {
-                label: label,
-                classes: classes,
-                styleButton: styleButton
-            })).hide().appendTo(document.body);
-
-            $div.find("button.hover-edition-button").click(function (e) {
+        make_hover_button_link: function (editfn) {
+            return $(openerp.qweb.render('website.editor.hoverbutton.link', {}))
+                .hide()
+                .click(function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    editfn.call(this, e);
+                })
+                .appendTo(document.body);
+        },
+
+        /**
+         * Creates a "hover" button for image
+         *
+         * @param {Function} editfn edition function, called when clicking the button
+         * @param {Function} stylefn edition style function, called when clicking the button
+         * @returns {jQuery}
+         */
+        make_hover_button_image: function (editfn, stylefn) {
+            var $div = $(openerp.qweb.render('website.editor.hoverbutton.image', {}))
+                .hide()
+                .appendTo(document.body);
+
+            $div.find('[data-toggle="dropdown"]').dropdown();
+            $div.find(".hover-edition-button").click(function (e) {
                 e.preventDefault();
                 e.stopPropagation();
                 editfn.call(this, e);
             });
-            if (styleButton) {
-                $div.find("button.hover-style-button").click(function (e) {
+            if (stylefn) {
+                $div.find(".hover-style-button").click(function (e) {
                     e.preventDefault();
                     e.stopPropagation();
-                    styleButton.call(this, e);
+                    stylefn.call(this, e);
                 });
             }
             return $div;
@@ -664,7 +679,7 @@
          */
         setup_hover_buttons: function () {
             var editor = this.rte.editor;
-            var $link_button = this.make_hover_button(_t("Change"), function () {
+            var $link_button = this.make_hover_button_link(function () {
                 var sel = new CKEDITOR.dom.element(previous);
                 editor.getSelection().selectElement(sel);
                 if(sel.hasClass('fa')) {
@@ -675,13 +690,13 @@
                 }
                 $link_button.hide();
                 previous = null;
-            }, 'btn-xs');
+            });
 
-            var $image_button = this.make_hover_button(_t("Change"), function () {
+            var $image_button = this.make_hover_button_image(function () {
                 image_dialog(editor, new CKEDITOR.dom.element(previous));
                 $image_button.hide();
                 previous = null;
-            }, 'btn-sm', function () {
+            }, function () {
                 var prev = previous;
                 var sel = new CKEDITOR.dom.element(prev);
                 var $sel = $(sel.$);
@@ -1329,9 +1344,10 @@
     });
 
     website.editor.Media = openerp.Widget.extend({
-        init: function (editor) {
+        init: function (editor, media) {
             this._super();
             this.editor = editor;
+            this.media = media;
         },
         save: function () {
         },
@@ -1349,14 +1365,34 @@
             this._super(editor);
         },
         start: function (editor, media) {
+            var self = this;
+            this.$preview = this.$(".preview-container");
+
             this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
             this.imageDialog.appendTo(this.$("#editor-media-image"));
             this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media);
             this.iconDialog.appendTo(this.$("#editor-media-icon"));
             this.videoDialog = null;
             //this.videoDialog.appendTo(this.$("#editor-media-video"));
+
+            this.preview(this.imageDialog);
+
+            $('a[data-toggle="tab"]').on('show.bs.tab', function (event) {
+                self.active.$preview.detach();
+                if ($(event.relatedTarget).is('[href="#editor-media-image"]'))
+                if ($(event.target).is('[href="#editor-media-image"]'))
+                event.target // activated tab
+                event.relatedTarget // previous tab
+                console.log(event);
+                console.log($(event.target).is('[href="#editor-media-image"]'));
+            })
+
             return this._super();
         },
+        preview: function (active) {
+            this.active = active;
+            this.$preview.after(active.$preview);
+        },
         save: function () {
             this.imageDialog.save();
             this.iconDialog.save();
@@ -1396,7 +1432,8 @@
         }),
 
         start: function () {
-            this.$('button.wait').text("Uploading…");
+            this.$preview = this.$('.preview-container').detach();
+
             var $options = this.$('.image-style').children();
             this.image_styles = $options.map(function () { return this.value; }).get();
 
@@ -1470,7 +1507,7 @@
             var image = this.$('input.url').val();
             if (!image) { loaded(); return; }
 
-            var $img = this.$('img.image-preview')
+            var $img = this.$preview.find('img.image-preview')
                 .attr('src', image)
                 .removeClass(this.image_styles.join(' '))
                 .addClass(this.$('select.image-style').val());
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 343e7070014..2f6977c990f 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -94,6 +94,7 @@
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <div class="preview-container hidden"></div>
                         <!-- Nav tabs -->
                         <ul class="nav nav-tabs">
                             <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
@@ -126,17 +127,16 @@
         </div>
     </t>
     <t t-name="website.editor.dialog.image">
-        <div class="row">
+        <div>
             <form method="POST" action="/website/attach"
                   enctype="multipart/form-data"
-                  target="fileframe"
-                  class="col-sm-8">
+                  target="fileframe">
                 <div class="text-center">
                     <input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
                     <button type="button" class="btn btn-primary btn-lg filepicker">
                         Upload an image from your computer
                     </button>
-                    <button type="button" class="btn btn-lg hidden wait" disabled="disabled"/>
+                    <button type="button" class="btn btn-lg hidden wait" disabled="disabled">Uploading...</button>
                     <p class="text-muted mt16">— or —</p>
                 </div>
                 <div class="well">
@@ -148,20 +148,16 @@
                 <input type="hidden" name="func"/>
                 <div class="help-block"/>
             </form>
-            <div class="col-sm-4 image-preview-container">
-                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
-                     class="pull-right img-rounded image-preview"
-                     width="100%"/>
-                <img src="/web/static/src/img/throbber-large.gif"
-                     class="pull-right img-rounded wait hidden"
-                     width="100%"/>
-                <select class="form-control image-style">
+            <div class="preview-container">
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D" class="image-preview"/>
+                <img src="/web/static/src/img/throbber-large.gif" class="wait hidden"/>
+                <!--select class="form-control image-style">
                     <option value="">No styling</option>
                     <option value="img-rounded">Rounded corners</option>
                     <option value="img-thumbnail">Box</option>
                     <option value="img-circle">Circle</option>
                     <option value="shadow">Shadow</option>
-                </select>
+                </select-->
             </div>
         </div>
         <iframe src="about:blank" name="fileframe" class="hidden"/>
@@ -251,10 +247,17 @@
         </div>
     </t>
 
-    <t t-name="website.editor.hoverbutton">
-        <div contentEditable="false" class="hover-edition">
-            <button type="button" t-attf-class="btn btn-primary hover-edition-button #{classes or ''}"><t t-esc="label"/></button>
-            <button t-if="styleButton" type="button" t-attf-class="btn btn-primary hover-style-button #{classes or ''}">Style</button>
+    <t t-name="website.editor.hoverbutton.link">
+        <button contentEditable="false" type="button" class="btn btn-primary hover-edition-button btn-xs">Change</button>
+    </t>
+
+    <t t-name="website.editor.hoverbutton.image">
+        <div contentEditable="false" class="hover-edition dropdown">
+            <a class="btn btn-primary btn-sm" data-toggle="dropdown" href="#">Customize</a>
+            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                <li><a href="#" class="hover-edition-button">Change Media</a></li>
+                <li><a href="#" class="hover-style-button">Style</a></li>
+            </ul>
         </div>
     </t>