[IMP] website: media editor doubleclick for video and begin to use snippet builder

bzr revid: chm@openerp.com-20140328141619-x9okgixai2v5dekr

8 files changed, 110 insertions, 69 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 208cde08b45..36de51db096 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -94,6 +94,10 @@
   display: none;
 }
 
+.cke_editable .css_editable_mode_display {
+  display: block !important;
+}
+
 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
   background-image: url("/website/static/src/img/edit_here.png") !important;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index f3aeb492883..7a9c59d8167 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -77,6 +77,9 @@
 .cke_editable .css_editable_mode_hidden
     display: none
 
+.cke_editable .css_editable_mode_display
+    display: block !important
+
 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
     background-image: url('/website/static/src/img/edit_here.png') !important
 
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 29d4e06eaff..90dddb9caf3 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -544,3 +544,9 @@ div.media_iframe_video iframe {
   width: 100%;
   height: 100%;
 }
+div.media_iframe_video div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 0d545e4362d..5923f619d86 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -444,4 +444,9 @@ div.media_iframe_video
     padding-bottom: 66.5%
     iframe
         width: 100%
-        height: 100%
\ No newline at end of file
+        height: 100%
+    div
+        position: absolute
+        width: 100%
+        height: 100%
+        display: none
\ No newline at end of file
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 9ced9905bd8..3e49c1286a9 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -84,10 +84,15 @@
             init: function (editor) {
                 editor.on('doubleclick', function (evt) {
                     var element = evt.data.element;
-                    if (element.is('img') && is_editable_node(element)) {
+                    if ((element.is('img') || element.$.className.indexOf(' fa-') != -1) && is_editable_node(element)) {
                         image_dialog(editor, element);
                         return;
                     }
+                    var parent = new CKEDITOR.dom.element(element.$.parentNode);
+                    if (parent.$.className.indexOf('media_iframe_video') != -1 && is_editable_node(parent)) {
+                        image_dialog(editor, parent);
+                        return;
+                    }
 
                     element = get_selected_link(editor) || evt.data.element;
                     if (!(element.is('a') && is_editable_node(element))) {
@@ -692,31 +697,6 @@
                 previous = null;
             });
 
-            var $image_button = this.make_hover_button_image(function () {
-                image_dialog(editor, new CKEDITOR.dom.element(previous));
-                $image_button.hide();
-                previous = null;
-            }, function () {
-                var prev = previous;
-                var sel = new CKEDITOR.dom.element(prev);
-                var $sel = $(sel.$);
-                var $button = $(this);
-
-                if ($sel.data('transfo')) {
-                    $sel.transfo("destroy");
-                    $button.addClass("btn-primary").removeClass("btn-default");
-                } else {
-                    $sel.transfo();
-                    $sel.data('transfo').$markup
-                        .on("mouseover", function () {
-                            $sel.trigger("mouseover");
-                            $button.removeClass("btn-primary").addClass("btn-default");
-                            $image_button.show();
-                        });
-                    $sel.data('transfo').$markup.mouseover();
-                }
-            });
-
             function is_icons_widget(element) {
                 var w = editor.widgets.getByElement(element);
                 return w && w.name === 'icons';
@@ -727,7 +707,7 @@
             // -ish, because when moving to the button itself ``previous`` is
             // still set to the element having triggered showing the button.
             var previous;
-            $(editor.element.$).on('mouseover', 'a, img, .fa, .media_iframe_video', function () {
+            $(editor.element.$).on('mouseover', 'a', function () {
                 // Back from edit button -> ignore
                 if (previous && previous === this) { return; }
 
@@ -746,41 +726,18 @@
                 previous = this;
                 var $selected = $(this);
                 var position = $selected.offset();
-                if ($selected.is('img') || $selected.is('.fa') || $selected.is('.media_iframe_video')) {
-                    $link_button.hide();
-                    // center button on image
-                    $image_button.show().offset({
-                        top: $selected.outerHeight() / 2
-                                + position.top
-                                - $image_button.outerHeight() / 2,
-                        left: $selected.outerWidth() / 2
-                                + position.left
-                                - $image_button.outerWidth() / 2,
-                    });
-                } else {
-                    $image_button.hide();
-                    // put button below link, horizontally centered
-                    $link_button.show().offset({
-                        top: $selected.outerHeight()
-                                + position.top,
-                        left: $selected.outerWidth() / 2
-                                + position.left
-                                - $link_button.outerWidth() / 2
-                    })
-                }
-                
-                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");
-                }
+                $link_button.show().offset({
+                    top: $selected.outerHeight()
+                            + position.top,
+                    left: $selected.outerWidth() / 2
+                            + position.left
+                            - $link_button.outerWidth() / 2
+                })
             }).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] ||
-                    current === $image_button[0] || $(current).parent()[0] === $image_button[0]) {
+                if (current === $link_button[0] || $(current).parent()[0] === $link_button[0]) {
                     return;
                 }
-                $image_button.add($link_button).hide();
                 previous = null;
             });
         }
@@ -1412,11 +1369,11 @@
         save: function () {
             this.active.save();
             if (this.active === this.imageDialog) {
-                this.media.$.className = this.media.$.className.replace(/(^|\s)fa[^\s]+/g, '');
+                this.media.$.className = this.media.$.className.replace(/(^|\s)(fa|media_iframe_video)[^\s]+/g, '');
                 $(this.media.$).addClass("img img-responsive");
             }
             if (this.active === this.iconDialog) {
-                this.media.$.className = this.media.$.className.replace(/(^|\s)img[^\s]+/g, '');
+                this.media.$.className = this.media.$.className.replace(/(^|\s)(img|media_iframe_video)[^\s]+/g, '');
             }
             if (this.active === this.videoDialog) {
                 this.media.$.className = this.media.$.className.replace(/(^|\s)(img|fa)[^\s]+/g, '');
@@ -1828,7 +1785,7 @@
     website.editor.VideoDialog = website.editor.Media.extend({
         template: 'website.editor.dialog.video',
         events : _.extend({}, website.editor.Dialog.prototype.events, {
-            'input input#urlvideo': 'get_video',
+            'blur input#urlvideo': 'get_video',
         }),
         start: function () {
             this.$iframe = this.$("iframe");
@@ -1866,7 +1823,8 @@
                 video_id = needle.match(/youtube\.[a-z]+\/([^\/?&]+)/i)[1];
             } else if (needle.indexOf("player.vimeo.") != -1 || needle.indexOf("//vimeo.") != -1) {
                 video_type = "vimeo";
-                video_id = needle.match(/vimeo\.[a-z]+\/([^\/?&]+)/i)[1];
+                video_id = needle.match(/vimeo\.[a-z]+\/(video\/)?([^?&]+)/i)[2];
+                console.log(video_id);
             } else if (needle.indexOf(".dailymotion.") != -1) {
                 video_type = "dailymotion";
                 video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3];
@@ -1878,10 +1836,15 @@
             this.$iframe.attr("src", this.get_url());
         },
         save: function () {
-            $(this.media.$).replaceWith(
-                '<div class="media_iframe_video" data-type="'+video_type+'" data-type="'+video_id+'" data-src="'+this.get_url()+'">'+
+            var video_id = this.$("#video_id").val();
+            var video_type = this.$("#video_type").val();
+            var $iframe = $(
+                '<div class="media_iframe_video" data-src="'+this.get_url()+'">'+
+                    '<div class="css_editable_mode_display">&nbsp;</div>'+
                     '<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
                 '</div>');
+            $iframe.attr("style", this.$(this.media.$).attr("style"));
+            $(this.media.$).replaceWith($iframe);
             this._super();
         },
     });
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index e300d4d5338..1b8dfc0b320 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -152,7 +152,7 @@
     website.snippet.animationRegistry.media_video = website.snippet.Animation.extend({
         selector: ".media_iframe_video",
         start: function () {
-            this.$target.html('<iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
+            this.$target.html('<div class="css_editable_mode_display">&nbsp;</div><iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
         },
     });
 })();
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 52deeabf5e6..2b7c001b7b6 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -154,6 +154,7 @@
             this.on('rte:ready', this, function () {
                 self.snippets.$button.removeClass("hidden");
                   website.snippet.stop_animation();
+                  website.snippet.start_animation(true, $(".media_iframe_video"));
             });
 
             return this._super.apply(this, arguments);
@@ -265,7 +266,8 @@
                             '$el': $style,
                             'selector-siblings': $style.data('selector-siblings'),
                             'selector-children': $style.data('selector-children'),
-                            'selector-vertical-children': $style.data('selector-vertical-children')
+                            'selector-vertical-children': $style.data('selector-vertical-children'),
+                            'data': $style.data()
                         };
                         selector.push($style.data('selector'));
                     });
@@ -332,6 +334,7 @@
                 if (!$target.is(website.snippet.globalSelector)) {
                     $target = $target.parents(website.snippet.globalSelector).first();
                 }
+
                 if (!self.dom_filter($target).length) {
                     $target = false;
                 }
@@ -732,7 +735,9 @@
             this.$target.data("snippet-option-ids", styles);
             this.$overlay = this.$target.data('overlay');
             this['snippet-option-id'] = snippet_id;
-            this.$el = website.snippet.templateOptions[snippet_id].$el.find(">li").clone();
+            var $option = website.snippet.templateOptions[snippet_id].$el;
+            this.$el = $option.find(">li").clone();
+            this.data = $option.data();
 
             this.required = this.$el.data("required");
 
@@ -1425,6 +1430,43 @@
         }
     });
 
+    website.snippet.options.media = website.snippet.Option.extend({
+        start: function () {
+            var self = this;
+            this._super();
+            website.snippet.start_animation(true, this.$target);
+
+            this.$el.find('[data-toggle="dropdown"]').dropdown();
+            this.$el.find(".hover-edition-button").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) {
+                self.transfo(event);
+            });
+        },
+        transfo: function (event) {
+            var self = this;
+            var sel = new CKEDITOR.dom.element(this.$target[0]);
+            var $button = $(event.target);
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (this.$target.data('transfo')) {
+                this.$target.transfo("destroy");
+                $button.addClass("btn-primary").removeClass("btn-default");
+            } else {
+                this.$target.transfo();
+                this.$target.data('transfo').$markup
+                    .on("mouseover", function () { self.$target.trigger("mouseover"); })
+                    .mouseover()
+                    .click(function () { self.$target.transfo("destroy"); });
+            }
+        }
+    });
+
 
     website.snippet.Editor = openerp.Class.extend({
         init: function (BuildingBlock, dom) {
@@ -1434,6 +1476,7 @@
             this.snippet_id = this.$target.data("snippet-id");
             this._readXMLData();
             this.load_style_options();
+            this.get_phantom();
             this.get_parent_block();
             this.start();
         },
@@ -1571,6 +1614,23 @@
             this.$overlay.find('[data-toggle="dropdown"]').dropdown();
         },
 
+        get_phantom: function () {
+            var self = this;
+            var phantom = false;
+            for (var i in this.styles){
+                if (this.styles[i].data.phantom) {
+                    phantom = true;
+                    break;
+                }
+            }
+            if (false && phantom) {
+                var $parent = this.$target.parents(website.snippet.globalSelector).first();
+                setTimeout(function () {
+                    self.BuildingBlock.make_active($parent);
+                }, 0);
+            }
+        },
+
         get_parent_block: function () {
             var self = this;
             var $button = this.$overlay.find('.oe_snippet_parent');
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index b703ab633ee..89b184a2c4e 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -299,7 +299,7 @@
         <form action="#" class="form-inline">
             <div class="well">
                 <div class="form-group">
-                    <label for="urlvideo">Viedo URL</label>
+                    <label for="urlvideo">Video URL</label>
                     <input type="text"
                         name="url"
                         class="form-control url"