[WIP] website: media editor

bzr revid: chm@openerp.com-20140328154715-alyj4kh33w6v8pgm

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 3e49c12..fb8b536 100644 (file)
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -1315,6 +1315,8 @@
         },
         save: function () {
         },
+        clear: function () {
+        },
         cancel: function () {
         },
         close: function () {
@@ -1367,17 +1369,20 @@
             return this._super();
         },
         save: function () {
-            this.active.save();
-            if (this.active === this.imageDialog) {
-                this.media.$.className = this.media.$.className.replace(/(^|\s)(fa|media_iframe_video)[^\s]+/g, '');
-                $(this.media.$).addClass("img img-responsive");
+            this.media.$.innerHTML = "";
+            if (this.active !== this.imageDialog) {
+                this.imageDialog.clear();
             }
-            if (this.active === this.iconDialog) {
-                this.media.$.className = this.media.$.className.replace(/(^|\s)(img|media_iframe_video)[^\s]+/g, '');
+            if (this.active !== this.iconDialog) {
+                this.iconDialog.clear();
             }
-            if (this.active === this.videoDialog) {
-                this.media.$.className = this.media.$.className.replace(/(^|\s)(img|fa)[^\s]+/g, '');
+            if (this.active !== this.videoDialog) {
+                this.videoDialog.clear();
             }
+            this.active.save();
+
+            this.media.$.className = this.media.$.className.replace(/\s+/g, ' ');
+
             return this._super();
         },
         search: function () {
@@ -1458,6 +1463,9 @@
             this.media.$.attributes.src = this.$('input.url').val();
             return this._super();
         },
+        clear: function () {
+            this.media.$.className = this.media.$.className.replace(/(^|\s)(img(\s|$)|img-[^\s]*)/g, ' ');
+        },
         cancel: function () {
             this.trigger('cancel');
         },
@@ -1779,7 +1787,10 @@
                 }
                 $preview.prepend($p);
             }
-        }
+        },
+        clear: function () {
+            this.media.$.className = this.media.$.className.replace(/(^|\s)(fa(\s|$)|fa-[^\s]*)/g, ' ');
+        },
     });
 
     website.editor.VideoDialog = website.editor.Media.extend({
@@ -1847,6 +1858,10 @@
             $(this.media.$).replaceWith($iframe);
             this._super();
         },
+        clear: function () {
+            delete this.media.$.dataset.src;
+            this.media.$.className = this.media.$.className.replace(/(^|\s)media_iframe_video(\s|$)/g, ' ');
+        },
     });
 
     website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;

diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 2b7c001..cd52ff3 100644 (file)
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -742,7 +742,7 @@
             this.required = this.$el.data("required");
 
             this.set_active();
-            this.$el.find('li[data-value] a').on('mouseover mouseout click', _.bind(this._mouse, this));
+            this.$el.find('li[data-value] a').on('mouseenter mouseleave click', _.bind(this._mouse, this));
             this.$target.on('snippet-style-reset', _.bind(this.set_active, this));
 
             this.start();
@@ -750,7 +750,7 @@
         _mouse: function (event) {
             var self = this;
 
-            if (event.type === 'mouseout') {
+            if (event.type === 'mouseleave') {
                 if (!this.over) return;
                 this.over = false;
             } else if (event.type === 'click') {
@@ -760,7 +760,7 @@
             }
 
             var $prev, $next;
-            if (event.type === 'mouseout') {
+            if (event.type === 'mouseleave') {
                 $prev = $(event.currentTarget).parent();
                 $next = this.$el.find("li[data-value].active");
             } else {
@@ -842,7 +842,7 @@
             var self = this;
 
             // add or remove html class
-            if (np.$prev && this.required) {
+            if (np.$prev) {
                 this.$target.removeClass(np.$prev.data('value') || "");
             }
             if (np.$next) {
@@ -1437,15 +1437,18 @@
             website.snippet.start_animation(true, this.$target);
 
             this.$el.find('[data-toggle="dropdown"]').dropdown();
-            this.$el.find(".hover-edition-button").click(function (event) {
+            this.$el.find(".edition").click(function (event) {
                 event.preventDefault();
                 event.stopPropagation();
                 self.element = new CKEDITOR.dom.element(self.$target[0]);
                 new website.editor.MediaDialog(self, self.element).appendTo(document.body);
             });
-            this.$el.find(".hover-style-button").click(function (event) {
+            this.$el.find(".style").click(function (event) {
                 self.transfo(event);
             });
+            this.$el.find(".clear-style").click(function (event) {
+                self.$target.removeClass("fa-spin").attr("style", null);
+            });
         },
         transfo: function (event) {
             var self = this;
@@ -1607,6 +1610,10 @@
             if (this.selector_vertical_children === "")
                 this.selector_vertical_children = false;
 
+            if (!this.selector_siblings && !this.selector_children && !this.selector_vertical_children) {
+                this.$overlay.find(".oe_snippet_move").addClass('hidden');
+            }
+
 
             if ($ul.find("li").length) {
                 $styles.removeClass("hidden");
@@ -1623,11 +1630,12 @@
                     break;
                 }
             }
-            if (false && phantom) {
-                var $parent = this.$target.parents(website.snippet.globalSelector).first();
-                setTimeout(function () {
-                    self.BuildingBlock.make_active($parent);
-                }, 0);
+            if (phantom) {
+                // var $parent = this.$target.parents(website.snippet.globalSelector).first();
+                // setTimeout(function () {
+                //     self.BuildingBlock.make_active($parent);
+                // }, 0);
+                this.$overlay.find('.oe_snippet_clone, .oe_snippet_remove, .oe_handles').addClass('hidden');
             }
         },
 

diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 4cbe5bd..163a61f 100644 (file)
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -983,17 +983,17 @@
     <div data-snippet-option-id='media'
         data-phantom="true"
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
-        <li><a href="#" class="hover-edition-button">Change Media</a></li>
-        <li><a href="#" class="hover-style-button">Style</a></li>
+        <li><a href="#" class="edition">Change Media</a></li>
+        <li><a href="#" class="style">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>
+                <li data-value="fa-spin"><a>Spin</a></li>
             </ul>
         </li>
-        <li><a href="#" data-value="fa-border">border</a></li>
+        <li><a href="#" class="clear-style">Clear Style</a></li>
     </div>
 
 </template>