diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index e734525ee08..29d4e06eaff 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -1,3 +1,4 @@ +@charset "utf-8"; /* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY * * css for editor buttons, openerp widget included in the website and other @@ -531,8 +532,15 @@ span[data-oe-type="monetary"] { margin: 40px auto; } -.oe_website_overflow_ellipsis{ - white-space:nowrap; - overflow:hidden; - text-overflow:ellipsis; +div.media_iframe_video { + height: 0; + margin: 0 auto; + text-align: center; + position: relative; + overflow: hidden; + padding-bottom: 66.5%; +} +div.media_iframe_video iframe { + width: 100%; + height: 100%; } diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 3bdda2cb720..0d545e4362d 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -435,3 +435,13 @@ span[data-oe-type="monetary"] overflow:hidden text-overflow:ellipsis +div.media_iframe_video + height: 0 + margin: 0 auto + text-align: center + position: relative + overflow: hidden + padding-bottom: 66.5% + iframe + width: 100% + height: 100% \ 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 d756f3c67d3..9ced9905bd8 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -727,7 +727,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', function () { + $(editor.element.$).on('mouseover', 'a, img, .fa, .media_iframe_video', function () { // Back from edit button -> ignore if (previous && previous === this) { return; } @@ -746,7 +746,7 @@ previous = this; var $selected = $(this); var position = $selected.offset(); - if ($selected.is('img') || $selected.is('.fa')) { + if ($selected.is('img') || $selected.is('.fa') || $selected.is('.media_iframe_video')) { $link_button.hide(); // center button on image $image_button.show().offset({ @@ -1370,35 +1370,38 @@ }), init: function (editor, media) { - this.media = media; + this._super(editor); this.editor = editor; this.page = 0; - this._super(editor); + this.media = media; }, - start: function (editor, media) { + start: function () { var self = this; 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, this.editor, this.media); this.iconDialog.appendTo(this.$("#editor-media-icon")); - this.videoDialog = {}; - //this.videoDialog.appendTo(this.$("#editor-media-video")); + this.videoDialog = new website.editor.VideoDialog(this, this.editor, this.media); + this.videoDialog.appendTo(this.$("#editor-media-video")); this.active = this.imageDialog; $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) { if ($(event.target).is('[href="#editor-media-image"]')) { self.active = self.imageDialog; + self.$('.nav-tabs li.search').removeClass("hidden"); } else if ($(event.target).is('[href="#editor-media-icon"]')) { self.active = self.iconDialog; + self.$('.nav-tabs li.search').removeClass("hidden"); } else if ($(event.target).is('[href="#editor-media-video"]')) { self.active = self.videoDialog; + self.$('.nav-tabs li.search').addClass("hidden"); } }); if (this.media.$.nodeName === "IMG") { this.$('[href="#editor-media-image"]').tab('show'); - } else if (this.media.$.nodeName === "IFRAME") { + } else if (this.media.$.className.match(/(^|\s)media_iframe_video($|\s)/)) { this.$('[href="#editor-media-video"]').tab('show'); } else if (this.media.$.className.match(/(^|\s)fa($|\s)/)) { this.$('[href="#editor-media-icon"]').tab('show'); @@ -1474,9 +1477,9 @@ 'click .existing-attachment-remove': 'try_remove', }), - init: function (editor, media) { + init: function (parent, editor, media) { this.page = 0; - this._super(editor, media); + this._super(parent, editor, media); }, start: function () { var res = this._super(); @@ -1822,6 +1825,67 @@ } }); + website.editor.VideoDialog = website.editor.Media.extend({ + template: 'website.editor.dialog.video', + events : _.extend({}, website.editor.Dialog.prototype.events, { + 'input input#urlvideo': 'get_video', + }), + start: function () { + this.$iframe = this.$("iframe"); + var $media = $(this.media.$); + if ($media.hasClass("media_iframe_video")) { + var src = $media.data('src'); + this.$("input#urlvideo").val(src); + this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1); + this.get_video(); + } + return this._super(); + }, + get_url: function () { + var video_id = this.$("#video_id").val(); + var video_type = this.$("#video_type").val(); + switch (video_type) { + case "youtube": + return "//www.youtube.com/embed/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0); + case "vimeo": + return "//player.vimeo.com/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0); + case "dailymotion": + return "//www.dailymotion.com/embed/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0); + } + }, + get_video: function () { + var needle = this.$("input#urlvideo").val(); + var video_id; + var video_type; + + if (needle.indexOf(".youtube.") != -1) { + video_type = "youtube"; + video_id = needle.match(/\.youtube\.[a-z]+\/(embed\/|watch\?v=)?([^\/?&]+)/i)[2]; + } else if (needle.indexOf("//youtu.") != -1) { + video_type = "youtube"; + 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]; + } else if (needle.indexOf(".dailymotion.") != -1) { + video_type = "dailymotion"; + video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3]; + } + + this.$("#video_id").val(video_id); + this.$("#video_type").val(video_type); + + this.$iframe.attr("src", this.get_url()); + }, + save: function () { + $(this.media.$).replaceWith( + '
'+ + ''+ + '
'); + this._super(); + }, + }); + website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver; var OBSERVER_CONFIG = { childList: true, diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js index 56ad596d71a..e300d4d5338 100644 --- a/addons/website/static/src/js/website.snippets.animation.js +++ b/addons/website/static/src/js/website.snippets.animation.js @@ -148,4 +148,11 @@ }); }, }); + + website.snippet.animationRegistry.media_video = website.snippet.Animation.extend({ + selector: ".media_iframe_video", + start: function () { + this.$target.html(''); + }, + }); })(); diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 607e603e724..b703ab633ee 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -101,13 +101,13 @@
  • Image
  • Pictogram
  • Video
    • -
  • +
    • -
  • +
  • @@ -274,9 +274,9 @@ - - - + + +
    @@ -295,4 +295,42 @@ + + +
    +
    + + + + Youtube, Vimeo, Dailymotion + +
    +
    + +
    +
    + +
    +
    + + + + +
    +
    + +
    +
    + +     +