[WIP] website: add media editor template

bzr revid: chm@openerp.com-20140326155822-f4wascgyrm7ffeg8

2 files changed, 141 insertions, 80 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 57d18cac873..e7e7a44e31e 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -64,7 +64,7 @@
         return new website.editor.RTELinkDialog(editor).appendTo(document.body);
     }
     function image_dialog(editor, image) {
-        return new website.editor.RTEImageDialog(editor, image).appendTo(document.body);
+        return new website.editor.MediaDialog(editor, image).appendTo(document.body);
     }
 
     // only enable editors manually
@@ -80,7 +80,7 @@
 
     website.init_editor = function () {
         CKEDITOR.plugins.add('customdialogs', {
-//            requires: 'link,image',
+            // requires: 'link,image',
             init: function (editor) {
                 editor.on('doubleclick', function (evt) {
                     var element = evt.data.element;
@@ -754,7 +754,11 @@
                     })
                 }
                 
-                $image_button.find("button.hover-style-button").addClass("btn-primary").removeClass("btn-default");
+                if ($selected.parents('[data-oe-field="image"]').length) {
+                    $image_button.find("button.hover-style-button").hide();
+                } else {
+                    $image_button.find("button.hover-style-button").show().addClass("btn-primary").removeClass("btn-default");
+                }
             }).on('mouseleave', 'a, img, .fa', function (e) {
                 var current = document.elementFromPoint(e.clientX, e.clientY);
                 if (current === $link_button[0] || $(current).parent()[0] === $link_button[0] ||
@@ -1324,6 +1328,31 @@
         },
     });
 
+    website.editor.Media = openerp.Widget.extend({
+        init: function (editor) {
+            this._super();
+            this.editor = editor;
+        },
+    });
+    website.editor.MediaDialog = website.editor.Dialog.extend({
+        template: 'website.editor.dialog.media',
+        init: function (editor, media) {
+            this.media = media;
+            this.editor = editor;
+            this._super(editor);
+        },
+        start: function (editor, media) {
+            this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
+            this.imageDialog.appendTo(this.$("#editor-media-image"));
+            console.log(this.imageDialog.$el[0]);
+            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"));
+            return this._super();
+        }
+    });
+
     /**
      * ImageDialog widget. Lets users change an image, including uploading a
      * new image in OpenERP or selecting the image style (if supported by
@@ -1341,7 +1370,7 @@
      *                           selected by the users (or possibly the ones
      *                           originally passed in)
      */
-    website.editor.ImageDialog = website.editor.Dialog.extend({
+    website.editor.ImageDialog = website.editor.Media.extend({
         template: 'website.editor.dialog.image',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
             'change .url-source': function (e) { this.changed($(e.target)); },
@@ -1447,6 +1476,7 @@
             new website.editor.ExistingImageDialog(this).appendTo(document.body);
         },
     });
+
     website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
         init: function (editor, image) {
             this._super(editor);
@@ -1614,7 +1644,7 @@
         range.shrink(CKEDITOR.SHRINK_TEXT);
         var commonAncestor = range.getCommonAncestor();
         var viewRoot = editor.elementPath(commonAncestor).contains(function (element) {
-            return element.data('oe-model') === 'ir.ui.view'
+            return element.data('oe-model') === 'ir.ui.view';
         });
         if (!viewRoot) { return null; }
         // if viewRoot is the first link, don't edit it.
@@ -1622,7 +1652,7 @@
                 .contains('a', true);
     }
 
-    website.editor.FontIconsDialog = website.editor.Dialog.extend({
+    website.editor.FontIconsDialog = website.editor.Media.extend({
         template: 'website.editor.dialog.font-icons',
         events : _.extend({}, website.editor.Dialog.prototype.events, {
             change: 'update_preview',
@@ -1679,7 +1709,7 @@
          * all the new ones if necessary.
          */
         save: function () {
-            var classes = this.element.className.split(/\s+/);
+            var classes = (this.element.className||"").split(/\s+/);
             var non_fa_classes = _.reject(classes, function (cls) {
                 return cls === 'fa' || /^fa-/.test(cls);
             });
@@ -1695,7 +1725,7 @@
          * which may not match the visual look of the element.
          */
         load_data: function () {
-            var classes = this.element.className.split(/\s+/);
+            var classes = (this.element.className||"").split(/\s+/);
             for (var i = 0; i < classes.length; i++) {
                 var cls = classes[i];
                 switch(cls) {
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 617a2cf59df..343e7070014 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -88,49 +88,83 @@
             </form>
         </t>
     </t>
-    <t t-name="website.editor.dialog.image">
-        <t t-call="website.editor.dialog">
-            <t t-set="title">Image:</t>
-            <div class="row">
-                <form method="POST" action="/website/attach"
-                      enctype="multipart/form-data"
-                      target="fileframe"
-                      class="col-sm-8">
-                    <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"/>
-                        <p class="text-muted mt16">— or —</p>
+    <t t-name="website.editor.dialog.media">
+        <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <!-- Nav tabs -->
+                        <ul class="nav nav-tabs">
+                            <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
+                            <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
+                            <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
+                        </ul>
                     </div>
-                    <div class="well">
-                        <a href="#existing" class="pull-right">Browse existing images</a>
-                        <h3 class="list-group-item-heading">Image URL</h3>
-                        <input type="text" class="form-control url"
-                               placeholder="http://openerp.com"/>
+                    <div class="modal-body">
+                        <!-- Tab panes -->
+                        <div class="tab-content">
+                            <div class="tab-pane fade in active" id="editor-media-image">
+                                
+                            </div>
+                            <div class="tab-pane fade" id="editor-media-icon">
+                                
+                            </div>
+                            <div class="tab-pane fade" id="editor-media-video">
+                                
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary save">Save</button>
+                        <button type="button" class="btn hidden wait" disabled="disabled"/>
+                        or
+                        <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
                     </div>
-                    <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">
-                        <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>
                 </div>
             </div>
-            <iframe src="about:blank" name="fileframe" class="hidden"/>
-        </t>
+        </div>
+    </t>
+    <t t-name="website.editor.dialog.image">
+        <div class="row">
+            <form method="POST" action="/website/attach"
+                  enctype="multipart/form-data"
+                  target="fileframe"
+                  class="col-sm-8">
+                <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"/>
+                    <p class="text-muted mt16">— or —</p>
+                </div>
+                <div class="well">
+                    <a href="#existing" class="pull-right">Browse existing images</a>
+                    <h3 class="list-group-item-heading">Image URL</h3>
+                    <input type="text" class="form-control url"
+                           placeholder="http://openerp.com"/>
+                </div>
+                <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">
+                    <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>
+            </div>
+        </div>
+        <iframe src="about:blank" name="fileframe" class="hidden"/>
     </t>
     <t t-name="website.editor.dialog.image.existing">
         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
@@ -225,41 +259,38 @@
     </t>
 
     <t t-name="website.editor.dialog.font-icons">
-        <t t-call="website.editor.dialog">
-            <t t-set="title">Icon:</t>
-            <form>
-                <div class="form-group" id="fa-preview">
+        <form>
+            <div class="form-group" id="fa-preview">
 
+            </div>
+            <div class="form-group 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 class="font-icons-icons">
+                    <t t-call="website.editor.dialog.font-icons.icons">
+                        <t t-set="icons" t-value="widget.icons"/>
+                    </t>
                 </div>
-                <div class="form-group 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 class="font-icons-icons">
-                        <t t-call="website.editor.dialog.font-icons.icons">
-                            <t t-set="icons" t-value="widget.icons"/>
-                        </t>
-                    </div>
-                </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>
+            </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">
         <span t-foreach="icons" t-as="icon"