[IMP] website: media editor doubleclick for video and begin to use snippet builder
authorchm@openerp.com <>
Fri, 28 Mar 2014 14:16:19 +0000 (15:16 +0100)
committerchm@openerp.com <>
Fri, 28 Mar 2014 14:16:19 +0000 (15:16 +0100)
bzr revid: chm@openerp.com-20140328141619-x9okgixai2v5dekr

addons/website/static/src/css/editor.css
addons/website/static/src/css/editor.sass
addons/website/static/src/css/website.css
addons/website/static/src/css/website.sass
addons/website/static/src/js/website.editor.js
addons/website/static/src/js/website.snippets.animation.js
addons/website/static/src/js/website.snippets.editor.js
addons/website/static/src/xml/website.editor.xml
addons/website/views/snippets.xml

index 208cde0..36de51d 100644 (file)
   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;
 }
index f3aeb49..7a9c59d 100644 (file)
@@ -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
 
index 29d4e06..90dddb9 100644 (file)
@@ -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;
+}
index 0d545e4..5923f61 100644 (file)
@@ -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
index 9ced990..3e49c12 100644 (file)
             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))) {
                 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';
             // -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; }
 
                 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;
             });
         }
         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, '');
     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");
                 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];
             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();
         },
     });
index e300d4d..1b8dfc0 100644 (file)
     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>');
         },
     });
 })();
index 52deeab..2b7c001 100644 (file)
             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);
                             '$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'));
                     });
                 if (!$target.is(website.snippet.globalSelector)) {
                     $target = $target.parents(website.snippet.globalSelector).first();
                 }
+
                 if (!self.dom_filter($target).length) {
                     $target = false;
                 }
             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");
 
         }
     });
 
+    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) {
             this.snippet_id = this.$target.data("snippet-id");
             this._readXMLData();
             this.load_style_options();
+            this.get_phantom();
             this.get_parent_block();
             this.start();
         },
             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');
index b703ab6..89b184a 100644 (file)
         <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"
index eb1f8c9..4cbe5bd 100644 (file)
         </li>
     </div>
 
+    <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 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>
+    </div>
+
 </template>