diff options
Diffstat (limited to 'addons/web_editor/static/src/js/widgets/widgets.js')
| -rw-r--r-- | addons/web_editor/static/src/js/widgets/widgets.js | 393 |
1 files changed, 254 insertions, 139 deletions
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 20b67828fad..5340efb821e 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -621,164 +621,80 @@ var fontIconsDialog = Widget.extend({ }, }); - -function createVideoNode(url, options) { - options = options || {}; - - // video url patterns(youtube, instagram, vimeo, dailymotion, youku) - var ytRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; - var ytMatch = url.match(ytRegExp); - - var igRegExp = /\/\/instagram.com\/p\/(.[a-zA-Z0-9]*)/; - var igMatch = url.match(igRegExp); - - var vRegExp = /\/\/vine.co\/v\/(.[a-zA-Z0-9]*)/; - var vMatch = url.match(vRegExp); - - var vimRegExp = /\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/; - var vimMatch = url.match(vimRegExp); - - var dmRegExp = /.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/; - var dmMatch = url.match(dmRegExp); - - var youkuRegExp = /\/\/v\.youku\.com\/v_show\/id_(\w+)\.html/; - var youkuMatch = url.match(youkuRegExp); - - var $video = $('<iframe>'); - if (ytMatch && ytMatch[1].length === 11) { - var youtubeId = ytMatch[1]; - $video = $('<iframe>', { - src: '//www.youtube.com/embed/' + youtubeId, - width: '640', - height: '360' - }); - } else if (igMatch && igMatch[0].length) { - $video = $('<iframe>', { - src: igMatch[0] + '/embed/', - width: '612', - height: '710', - scrolling: 'no', - allowtransparency: 'true' - }); - } else if (vMatch && vMatch[0].length) { - $video = $('<iframe>', { - src: vMatch[0] + '/embed/simple', - width: '600', - height: '600', - class: 'vine-embed' - }); - } else if (vimMatch && vimMatch[3].length) { - $video = $('<iframe>', { - src: '//player.vimeo.com/video/' + vimMatch[3], - width: '640', - height: '360' - }); - } else if (dmMatch && dmMatch[2].length) { - $video = $('<iframe>', { - src: '//www.dailymotion.com/embed/video/' + dmMatch[2], - width: '640', - height: '360' - }); - } else if (youkuMatch && youkuMatch[1].length) { - $video = $('<iframe>', { - height: '498', - width: '510', - src: '//player.youku.com/embed/' + youkuMatch[1] - }); - } else { - // this is not a known video link. Now what, Cat? Now what? - $video = $('<iframe>', { - width: '640', - height: '360', - src: url - }); - } - - if (options.autoplay) { - $video.attr("src", $video.attr("src") + "?autoplay=1"); - } - - $video.attr('frameborder', 0); - - return $video; -} - /** - * VideoDialog widget. Lets users change a video, support all summernote - * video, and embled iframe + * VideoDialog widget. Let users change a video, support all summernote + * video, and embed iframe. */ var VideoDialog = Widget.extend({ template: 'web_editor.dialog.video', xmlDependencies: ['/web_editor/static/src/xml/editor.xml'], - events : _.extend({}, Dialog.prototype.events, { - 'click input#urlvideo ~ button': 'get_video', - 'click input#embedvideo ~ button': 'get_embed_video', - 'change input#autoplay': 'get_video', - 'change input#urlvideo': 'change_input', - 'keyup input#urlvideo': 'change_input', - 'change input#embedvideo': 'change_input', - 'keyup input#embedvideo': 'change_input', - 'keydown.dismiss.bs.modal': function () {}, - }), + events : { + 'change .o_video_dialog_options input': '_onUpdateVideoOption', + 'input textarea#o_video_text': '_onVideoCodeInput', + 'change textarea#o_video_text': '_onVideoCodeChange', + }, + + /** + * @constructor + */ init: function (parent, media) { this._super.apply(this, arguments); this.parent = parent; this.media = media; + this._onVideoCodeInput = _.debounce(this._onVideoCodeInput, 1000); }, + /** + * @override + */ start: function () { this.$preview = this.$('.preview-container').detach(); - this.$iframe = this.$("iframe"); + this.$content = this.$('.o_video_dialog_iframe'); + var $media = $(this.media); - if ($media.hasClass("media_iframe_video")) { - var src = $media.data('src'); - this.$("input#urlvideo").val(src); - this.$("input#autoplay").prop("checked", (src || "").indexOf("autoplay") >= 0); - this.get_video(); + if ($media.hasClass('media_iframe_video')) { + var src = $media.data('src') || ''; + this.$('textarea#o_video_text').val(src); + + this.$('input#o_video_autoplay').prop('checked', src.indexOf('autoplay=1') >= 0); + this.$('input#o_video_hide_controls').prop('checked', src.indexOf('controls=0') >= 0); + this.$('input#o_video_loop').prop('checked', src.indexOf('loop=1') >= 0); + this.$('input#o_video_hide_fullscreen').prop('checked', src.indexOf('fs=0') >= 0); + this.$('input#o_video_hide_yt_logo').prop('checked', src.indexOf('modestbranding=1') >= 0); + this.$('input#o_video_hide_dm_logo').prop('checked', src.indexOf('ui-logo=0') >= 0); + this.$('input#o_video_hide_dm_share').prop('checked', src.indexOf('sharing-enable=0') >= 0); + + this._updateVideo(); } + return this._super.apply(this, arguments); }, - change_input: function (e) { - var $input = $(e.target); - var $button = $input.parent().find("button"); - if ($input.val() === "") { - $button.addClass("btn-default").removeClass("btn-primary"); - } else { - $button.removeClass("btn-default").addClass("btn-primary"); - } - }, - get_embed_video: function (event) { - event.preventDefault(); - var embedvideo = this.$("input#embedvideo").val().match(/src=["']?([^"']+)["' ]?/); - if (embedvideo) { - this.$("input#urlvideo").val(embedvideo[1]); - this.get_video(event); - } - return false; - }, - get_video: function (event) { - if (event) event.preventDefault(); - var $video = createVideoNode(this.$("input#urlvideo").val(), {autoplay: this.$("input#autoplay").is(":checked")}); - this.$iframe.replaceWith($video); - this.$iframe = $video; - return false; - }, + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @override + */ save: function () { - var video_id = this.$("#video_id").val(); - if (!video_id) { - this.$("button.btn-primary").click(); - video_id = this.$("#video_id").val(); + this._updateVideo(); + + if (this.$('.o_video_dialog_iframe').is('iframe')) { + var $content = $( + '<div class="media_iframe_video" data-src="' + this.$content.attr('src') + '">'+ + '<div class="css_editable_mode_display"> </div>'+ + '<div class="media_iframe_video_size" contenteditable="false"> </div>'+ + '<iframe src="' + this.$content.attr('src') + '" frameborder="0" contenteditable="false"></iframe>'+ + '</div>' + ); + $(this.media).replaceWith($content); + this.media = $content[0]; + return this.media; } - var $iframe = $( - '<div class="media_iframe_video" data-src="'+this.$iframe.attr("src")+'">'+ - '<div class="css_editable_mode_display"> </div>'+ - '<div class="media_iframe_video_size" contentEditable="false"> </div>'+ - '<iframe src="'+this.$iframe.attr("src")+'" frameborder="0" allowfullscreen="allowfullscreen" contentEditable="false"></iframe>'+ - '</div>'); - $(this.media).replaceWith($iframe); - this.media = $iframe[0]; - - return this.media; }, + /** + * @override + */ clear: function () { if (this.media.dataset.src) { try { @@ -789,6 +705,205 @@ var VideoDialog = Widget.extend({ } this.media.className = this.media.className.replace(/(^|\s)media_iframe_video(\s|$)/g, ' '); }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Creates a video node according to the given URL and options. If not + * possible, returns an error code. + * + * @private + * @param {string} url + * @param {Object} options + * @returns {Object} + * $video -> the created video jQuery node + * type -> the type of the created video + * errorCode -> if defined, either '0' for invalid URL or '1' for + * unsupported video provider + */ + _createVideoNode: function (url, options) { + options = options || {}; + + // Video url patterns(youtube, instagram, vimeo, dailymotion, youku, ...) + var ytRegExp = /^(?:(?:https?:)?\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; + var ytMatch = url.match(ytRegExp); + + var insRegExp = /(.*)instagram.com\/p\/(.[a-zA-Z0-9]*)/; + var insMatch = url.match(insRegExp); + + var vinRegExp = /\/\/vine.co\/v\/(.[a-zA-Z0-9]*)/; + var vinMatch = url.match(vinRegExp); + + var vimRegExp = /\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/; + var vimMatch = url.match(vimRegExp); + + var dmRegExp = /.+dailymotion.com\/(video|hub|embed)\/([^_]+)[^#]*(#video=([^_&]+))?/; + var dmMatch = url.match(dmRegExp); + + var ykuRegExp = /(.*).youku\.com\/(v_show\/id_|embed\/)(.+)/; + var ykuMatch = url.match(ykuRegExp); + + var $video = $('<iframe>').width(1280).height(720).attr('frameborder', 0).addClass('o_video_dialog_iframe'); + var videoType = 'yt'; + + if (!/^(http:\/\/|https:\/\/|\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test(url)){ + return {errorCode: 0}; + } + + var autoplay = options.autoplay ? '?autoplay=1' : '?autoplay=0'; + + if (ytMatch && ytMatch[1].length === 11) { + $video.attr('src', '//www.youtube.com/embed/' + ytMatch[1] + autoplay); + } else if (insMatch && insMatch[2].length) { + $video.attr('src', '//www.instagram.com/p/' + insMatch[2] + '/embed/'); + videoType = 'ins'; + } else if (vinMatch && vinMatch[0].length) { + $video.attr('src', vinMatch[0] + '/embed/simple'); + videoType = 'vin'; + } else if (vimMatch && vimMatch[3].length) { + $video.attr('src', '//player.vimeo.com/video/' + vimMatch[3] + autoplay); + videoType = 'vim'; + } else if (dmMatch && dmMatch[2].length) { + var just_id = dmMatch[2].replace('video/',''); + $video.attr('src', '//www.dailymotion.com/embed/video/' + just_id + autoplay); + videoType = 'dm'; + } else if (ykuMatch && ykuMatch[3].length) { + var yku_id = ykuMatch[3].indexOf('.html?') >= 0 ? ykuMatch[3].substring(0, ykuMatch[3].indexOf('.html?')) : ykuMatch[3]; + $video.attr('src', '//player.youku.com/embed/' + yku_id); + videoType = 'yku'; + } else { + return {errorCode: 1}; + } + + if (options.loop && (ytMatch || vimMatch)) { + $video.attr('src', $video.attr('src') + '&loop=1'); + } + if (options.hide_controls && (ytMatch || dmMatch)) { + $video.attr('src', $video.attr('src') + '&controls=0'); + } + if (options.hide_fullscreen && ytMatch) { + $video.attr('src', $video.attr('src') + '&fs=0'); + } + if (options.hide_yt_logo && ytMatch) { + $video.attr('src', $video.attr('src') + '&modestbranding=1'); + } + if (options.hide_dm_logo && dmMatch) { + $video.attr('src', $video.attr('src') + '&ui-logo=0'); + } + if (options.hide_dm_share && dmMatch) { + $video.attr('src', $video.attr('src') + '&sharing-enable=0'); + } + + return {$video: $video, type: videoType}; + }, + /** + * Updates the video preview according to video code and enabled options. + * + * @private + */ + _updateVideo: function () { + // Reset the feedback + this.$content.empty(); + this.$('#o_video_form_group').removeClass('has-error has-success'); + this.$('.o_video_dialog_options li').addClass('hidden'); + + // Check video code + var $textarea = this.$('textarea#o_video_text'); + var code = $textarea.val().trim(); + if (!code) { + return; + } + + // Detect if we have an embed code rather than an URL + var embedMatch = code.match(/(src|href)=["']?([^"']+)?/); + if (embedMatch && embedMatch[2].length > 0 && embedMatch[2].indexOf('instagram')){ + embedMatch[1] = embedMatch[2]; // Instagram embed code is different + } + var url = embedMatch ? embedMatch[1] : code; + + var query = this._createVideoNode(url, { + autoplay: this.$('input#o_video_autoplay').is(':checked'), + hide_controls: this.$('input#o_video_hide_controls').is(':checked'), + loop: this.$('input#o_video_loop').is(':checked'), + hide_fullscreen: this.$('input#o_video_hide_fullscreen').is(':checked'), + hide_yt_logo: this.$('input#o_video_hide_yt_logo').is(':checked'), + hide_dm_logo: this.$('input#o_video_hide_dm_logo').is(':checked'), + hide_dm_share: this.$('input#o_video_hide_dm_share').is(':checked'), + }); + + var $opt_box = this.$('.o_video_dialog_options'); + + // Show / Hide preview elements + this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($opt_box).toggleClass('hidden', !query.$video); + // Toggle validation classes + this.$el.find('#o_video_form_group').toggleClass('has-error', !query.$video).toggleClass('has-success', !!query.$video); + + // Individually show / hide options base on the video provider + $opt_box.find('li.o_' + query.type + '_option').removeClass('hidden'); + + // Hide the entire options box if no options are available + $opt_box.toggleClass('hidden', $opt_box.find('li:not(.hidden)').length === 0); + + if (query.type === 'yt') { + // Youtube only: If 'hide controls' is checked, hide 'fullscreen' + // and 'youtube logo' options too + this.$('input#o_video_hide_fullscreen, input#o_video_hide_yt_logo').closest('li').toggleClass('hidden', this.$('input#o_video_hide_controls').is(':checked')); + } + + var $content = query.$video; + if (!$content) { + switch (query.errorCode) { + case 0: + $content = $('<div/>', { + class: 'alert alert-danger o_video_dialog_iframe', + text: _t("The provided url is not valid"), + }); + break; + case 1: + $content = $('<div/>', { + class: 'alert alert-warning o_video_dialog_iframe', + text: _t("The provided url does not reference any supported video"), + }); + break; + } + } + this.$content.replaceWith($content); + this.$content = $content; + }, + + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when a video option changes -> Updates the video preview. + * + * @private + */ + _onUpdateVideoOption: function () { + this._updateVideo(); + }, + /** + * Called when the video code (URL / Iframe) change is confirmed -> Updates + * the video preview immediately. + * + * @private + */ + _onVideoCodeChange: function () { + this._updateVideo(); + }, + /** + * Called when the video code (URL / Iframe) changes -> Updates the video + * preview (note: this function is automatically debounced). + * + * @private + */ + _onVideoCodeInput: function () { + this._updateVideo(); + }, }); /** |