[WIP] website media editor

bzr revid: chm@openerp.com-20140327171417-nz2cd8tn2dmmljge

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 1f4e0ae..208cde0 100644 (file)
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -324,6 +324,10 @@ ul.oe_menu_editor .disclose {
   cursor: pointer;
 }
 
+.img-responsive {
+  text-align: center;
+}
+
 /* ---- MOBILE PREVIEW ---- {{{ */
 .oe_mobile_preview.modal .modal-content {
   height: 660px;

diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 50f9b3e..f3aeb49 100644 (file)
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -284,6 +284,9 @@ $attachment-border-color: #848490
 .cke_editable .fa
     cursor: pointer
 
+.img-responsive
+    text-align: center
+
 // }}}
 
 /* ---- MOBILE PREVIEW ---- {{{ */

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 87bce89..d756f3c 100644 (file)
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -653,7 +653,7 @@
          * @returns {jQuery}
          */
         make_hover_button_image: function (editfn, stylefn) {
-            var $div = $(openerp.qweb.render('website.editor.hoverbutton.image', {}))
+            var $div = $(openerp.qweb.render('website.editor.hoverbutton.media', {}))
                 .hide()
                 .appendTo(document.body);
 
@@ -1344,8 +1344,9 @@
     });
 
     website.editor.Media = openerp.Widget.extend({
-        init: function (editor, media) {
+        init: function (parent, editor, media) {
             this._super();
+            this.parent = parent;
             this.editor = editor;
             this.media = media;
         },
@@ -1353,6 +1354,8 @@
             this.$preview = this.$('.preview-container').detach();
             return this._super();
         },
+        search: function (needle) {
+        },
         save: function () {
         },
         cancel: function () {
@@ -1362,6 +1365,9 @@
     });
     website.editor.MediaDialog = website.editor.Dialog.extend({
         template: 'website.editor.dialog.media',
+        events : _.extend({}, website.editor.Dialog.prototype.events, {
+            'input input#icon-search': 'search',
+        }),
 
         init: function (editor, media) {
             this.media = media;
@@ -1371,9 +1377,9 @@
         },
         start: function (editor, media) {
             var self = this;
-            this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
+            this.imageDialog = new website.editor.RTEImageDialog(this, this.editor, this.media);
             this.imageDialog.appendTo(this.$("#editor-media-image"));
-            this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media);
+            this.iconDialog = new website.editor.FontIconsDialog(this, this.editor, this.media);
             this.iconDialog.appendTo(this.$("#editor-media-icon"));
             this.videoDialog = {};
             //this.videoDialog.appendTo(this.$("#editor-media-video"));
@@ -1401,11 +1407,23 @@
             return this._super();
         },
         save: function () {
-            if (this.active) {
-                this.active.save();
+            this.active.save();
+            if (this.active === this.imageDialog) {
+                this.media.$.className = this.media.$.className.replace(/(^|\s)fa[^\s]+/g, '');
+                $(this.media.$).addClass("img img-responsive");
+            }
+            if (this.active === this.iconDialog) {
+                this.media.$.className = this.media.$.className.replace(/(^|\s)img[^\s]+/g, '');
+            }
+            if (this.active === this.videoDialog) {
+                this.media.$.className = this.media.$.className.replace(/(^|\s)(img|fa)[^\s]+/g, '');
             }
             return this._super();
         },
+        search: function () {
+            var needle = this.$("input#icon-search").val();
+            this.active.search(needle || "");
+        }
     });
 
     /**
@@ -1612,8 +1630,8 @@
     });
 
     website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
-        init: function (editor, media) {
-            this._super(editor, media);
+        init: function (parent, editor, media) {
+            this._super(parent, editor, media);
 
             this.on('start', this, this.proxy('started'));
             this.on('save', this, this.proxy('saved'));
@@ -1690,20 +1708,6 @@
                 this.$('#fa-size').val(e.target.getAttribute('data-size'));
                 this.update_preview();
             },
-            'input input#icon-search': function () {
-                var needle = this.$('#icon-search').val();
-                var icons = this.icons;
-                if (needle) {
-                    icons = _(icons).filter(function (icon) {
-                        return icon.id.substring(3).indexOf(needle) !== -1;
-                    });
-                }
-
-                this.$('div.font-icons-icons').html(
-                    openerp.qweb.render(
-                        'website.editor.dialog.font-icons.icons',
-                        {icons: icons}));
-            },
         }),
 
         // List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
@@ -1720,6 +1724,19 @@
         start: function () {
             return this._super().then(this.proxy('load_data'));
         },
+        search: function (needle) {
+            var icons = this.icons;
+            if (needle) {
+                icons = _(icons).filter(function (icon) {
+                    return icon.id.substring(3).indexOf(needle) !== -1;
+                });
+            }
+
+            this.$('div.font-icons-icons').html(
+                openerp.qweb.render(
+                    'website.editor.dialog.font-icons.icons',
+                    {icons: icons}));
+        },
         /**
          * Removes existing FontAwesome classes on the bound element, and sets
          * all the new ones if necessary.
@@ -1765,9 +1782,6 @@
                     this.$('#fa-icon').val(cls);
                 }
             }
-            if (this.$('#fa-icon').val() === "") {
-                this.$('#fa-icon').val("fa-glass");
-            }
             this.update_preview();
         },
         /**

diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index f6fe37c..607e603 100644 (file)
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -108,10 +108,8 @@
                                 </ul>
                             </li>
                             <li style="float: right;">
-                                <form>
+                                <form action="#">
                                     <div class="form-group font-icons fa fa-search mb0">
-                                        <input type="hidden" id="fa-icon" class="form-control"/>
-                                        <input type="hidden" id="fa-size" class="form-control"/>
                                         <input type="search" class="form-control" id="icon-search"/>
                                     </div>
                                 </form>
@@ -256,23 +254,29 @@
         <button contentEditable="false" type="button" class="btn btn-primary hover-edition-button btn-xs">Change</button>
     </t>
 
-    <t t-name="website.editor.hoverbutton.image">
+    <t t-name="website.editor.hoverbutton.media">
         <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>
+                <li class="dropdown-submenu">
+                    <a href="#" tabindex="-1">Rotation</a>
+                    <ul class="dropdown-menu">
+                        <li data-value="fa-spin"><a>Spin</a></li>
+                        <li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
+                        <li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
+                    </ul>
+                </li>
+                <li><a href="#" data-value="fa-border">border</a></li>
             </ul>
         </div>
     </t>
 
     <t t-name="website.editor.dialog.font-icons">
         <form>
-            <div class="form-group hidden font-icons fa fa-search">
-                <input type="hidden" id="fa-icon" class="form-control"/>
-                <input type="hidden" id="fa-size" class="form-control"/>
-                <input type="search" class="form-control" id="icon-search"/>
-            </div>
+            <input type="hidden" id="fa-icon" class="form-control"/>
+            <input type="hidden" id="fa-size" class="form-control"/>
             <div class="font-icons-icons">
                 <t t-call="website.editor.dialog.font-icons.icons">
                     <t t-set="icons" t-value="widget.icons"/>
@@ -281,23 +285,6 @@
             <div class="form-group mt32" id="fa-preview">
 
             </div>
-            <div class="form-group">
-                <label for="fa-rotation">Rotation</label>
-                <select id="fa-rotation" class="form-control">
-                    <option value="">None</option>
-                    <option value="fa-spin">Spin</option>
-                    <option value="fa-rotate-90">Rotate 90º</option>
-                    <option value="fa-rotate-180">Rotate 180º</option>
-                    <option value="fa-rotate-270">Rotate 270º</option>
-                    <option value="fa-flip-horizontal">Horizontal flip</option>
-                    <option value="fa-flip-vertical">Vertical flip</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label>
-                    <input type="checkbox" id="fa-border"/> border
-                </label>
-            </div>
         </form>
     </t>
     <t t-name="website.editor.dialog.font-icons.icons">