Skip to content
Permalink
Browse files

[IMP]website, web_editor: improvement in code

- background video option for adding video as background is removed.
- background image option is renamed as "background" and media dialog will be open with both images and video tabs.
- loading background, opacity and filling options will not be displayed while adding a normal video in website.
  • Loading branch information...
var-odoo committed Apr 10, 2019
1 parent 48a3a07 commit 08867f1eb8663767459aa3f877cd039ed68185d6
@@ -822,8 +822,9 @@ var VideoWidget = MediaWidget.extend({
/**
* @constructor
*/
init: function (parent, media) {
init: function (parent, media, options) {
this._super.apply(this, arguments);
this.options = options;
this._onVideoCodeInput = _.debounce(this._onVideoCodeInput, 1000);
},
/**
@@ -840,18 +841,20 @@ var VideoWidget = MediaWidget.extend({
var container = $media.data('container') || '';
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_muted').prop('checked', src.indexOf('mute=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.$('input#o_video_opacity').val(opacity);
this.$('#o_video_background').val(background);
this.$("input[name=iframefit][value='"+container+"']").prop('checked', true);
if(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_muted').prop('checked', src.indexOf('mute=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.$('input#o_video_opacity').val(opacity);
this.$('#o_video_background').val(background);
this.$("input[name=iframefit][value='"+container+"']").prop('checked', true);
}
this._updateVideo();
}

@@ -852,18 +852,48 @@ registry.background = SnippetOption.extend({

var $editable = this.$target.closest('.o_editable');
var _editor = new weWidgets.MediaDialog(this, {
onlyImages: true,
noDocuments: true,
noIcons: true,
firstFilters: ['background'],
res_model: $editable.data('oe-model'),
res_id: $editable.data('oe-id'),
o_yt_option: true,
o_dm_option: true,
o_vim_option: true,
}, $image[0]).open();

_editor.on('save', this, function () {
this._setCustomBackground($image.attr('src'));
this.$target.trigger('content_changed');
_editor.on('save', this, function (data) {
if (_editor.$el.find('.tab-pane.active').attr('id') === 'editor-media-image') {
if (this.$target.find(".yt_video_container").length) {
this.$target.find(".yt_video_container").remove();
this.$target.removeAttr('src opacity background iframefit muted loop');
this.$target.removeClass('oe_video_background oe_video');
$(this.$target.children().first()).removeClass("oe_video_bg");
}
this._setCustomBackground($image.attr('src'));
this.$target.trigger('content_changed');
} else {
$image.remove();
var src = $(data).attr('data-oe-expression');
if (src.indexOf('loop=1') >= 0) {
var video_id = $(data).attr('data-oe-expression').split('/')[4].split('?')[0];
src += "&playlist="+video_id;
}
var opacity = $(data).attr('data-opacity');
var background = $(data).attr('data-background');
var container = $(data).attr('data-container');
this.$target.attr({'src': src, 'opacity': opacity, 'background': background, 'iframefit': container});
this.$target.addClass('oe_video_background oe_video');
$(this.$target.children().first()).addClass("oe_video_bg");
var param = $.deparam(src);
this.$target.attr({'muted': param.mute, 'loop': param.loop, 'controls': param.controls, 'autoplay': param.autoplay});
this._refreshPublicWidgets();
}
});
_editor.on('closed', this, function () {
$image.remove();
if (_editor.$el.find('.tab-pane.active').attr('id') === 'editor-media-image') {
$image.remove();
}
});
},

@@ -270,12 +270,12 @@
<label class="o_switch mb0"><input id="o_video_hide_yt_logo" type="checkbox" checked="checked"/><span/>Hide Youtube logo</label>
</div>
<div class="o_dm_option">
<label class="o_switch mb0"><input id="o_video_hide_dm_logo" type="checkbox"/><span/>Hide Dailymotion logo</label>
<label class="o_switch mb0"><input id="o_video_hide_dm_logo" type="checkbox" checked="checked"/><span/>Hide Dailymotion logo</label>
</div>
<div class="o_dm_option">
<label class="o_switch mb0"><input id="o_video_hide_dm_share" type="checkbox"/><span/>Hide sharing button</label>
<label class="o_switch mb0"><input id="o_video_hide_dm_share" type="checkbox" checked="checked"/><span/>Hide sharing button</label>
</div>
<div class="row o_yt_option o_dm_option o_vim_option mt-2">
<div t-attf-class="#{widget.options.o_dm_option ? 'o_dm_option' : ''} #{widget.options.o_yt_option ? 'o_yt_option' : ''} #{widget.options.o_vim_option ? 'o_vim_option' : ''} row mt-2">
<label class="col-md-4 pre_label">Video background</label>
<label class="col-md-8">
<select name="background" id="o_video_background" class="form-control background">
@@ -285,18 +285,18 @@
</select>
</label>
</div>
<div class="row o_yt_option o_dm_option o_vim_option" style="overflow:hidden">
<div t-attf-class="#{widget.options.o_dm_option ? 'o_dm_option' : ''} #{widget.options.o_yt_option ? 'o_yt_option' : ''} #{widget.options.o_vim_option ? 'o_vim_option' : ''} row" style="overflow:hidden">
<label class="col-md-4 pre_label col-form-label">Opacity</label>
<label class="col-md-8">
<input class="my-2" name="opacity" id="o_video_opacity" type="range" step="0.1" min="0" max="1" value="1" placeholder="1"/>
</label>
</div>
<div class="o_yt_option o_dm_option o_vim_option">
<div class="o_yt_option o_dm_option o_vim_option custom-control custom-radio col-md-6">
<div t-attf-class="#{widget.options.o_dm_option ? 'o_dm_option' : ''} #{widget.options.o_yt_option ? 'o_yt_option' : ''} #{widget.options.o_vim_option ? 'o_vim_option' : ''}">
<div t-attf-class="#{widget.options.o_dm_option ? 'o_dm_option' : ''} #{widget.options.o_yt_option ? 'o_yt_option' : ''} #{widget.options.o_vim_option ? 'o_vim_option' : ''} custom-control custom-radio col-md-6">
<input type="radio" id="fitCont" name="iframefit" class="custom-control-input" value="fitCont" checked="checked"/>
<label for="fitCont" class="small custom-control-label">Fill container with video</label>
</div>
<div class="o_yt_option o_dm_option o_vim_option custom-control custom-radio col-md-6">
<div t-attf-class="#{widget.options.o_dm_option ? 'o_dm_option' : ''} #{widget.options.o_yt_option ? 'o_yt_option' : ''} #{widget.options.o_vim_option ? 'o_vim_option' : ''} custom-control custom-radio col-md-6">
<input type="radio" id="fitIframe" name="iframefit" class="custom-control-input" value="fitIframe"/>
<label for="fitIframe" class="small custom-control-label">Put video in container</label>
</div>
@@ -660,7 +660,7 @@ registry.backgroundVideo = Animation.extend({
params.controls = true;
if (videoUrl) {
$($container.children()[0]).removeClass("oe_video_bg");
if($container.find('iframe').length >=1){
if ($container.find('iframe').length >=1) {
$container.find('iframe').remove();
}
$iframe = $('<iframe/>', {
@@ -719,7 +719,9 @@ registry.backgroundVideo = Animation.extend({
$videoContainer.append($el).append($loader);

var interval = null;
if ($("#oe_main_menu_navbar").length > 0) { $loader.css("top", $("#oe_main_menu_navbar").outerHeight()+1); }
if ($("#oe_main_menu_navbar").length > 0) {
$loader.css("top", $("#oe_main_menu_navbar").outerHeight()+1);
}
$loader.animate({width: "45%"}, 800, function () {
var el = $loader;
interval = setInterval(function () { timer(); }, 300);
@@ -29,36 +29,6 @@ options.Class.include({
},
});

options.registry.background_video = options.Class.extend({
chooseVideo: function (previewMode, value, $opt) {
var $iframe = this.$target.find("iframe.playerBox");
$iframe.data({'oe-expression': this.$target.attr('src'), "opacity": this.$target.attr('opacity'), "background": this.$target.attr('background'), "container": this.$target.attr('iframefit')});
var _editor = new weWidgets.MediaDialog(this, {
noImages: true,
noDocuments: true,
noIcons: true,
firstFilters: ['background_video'],
}, $iframe[0]).open();
_editor.on('save', this, function (data) {
var src = $(data).attr('data-oe-expression');
if(src.indexOf('loop=1') >= 0){
var video_id = $(data).attr('data-oe-expression').split('/')[4].split('?')[0];
src += "&playlist="+video_id;
}
var opacity = $(data).attr('data-opacity');
var background = $(data).attr('data-background');
var container = $(data).attr('data-container');
this.$target.attr({'src': src, 'opacity': opacity, 'background': background, 'iframefit': container});
this.$target.addClass('oe_video_background oe_video');
$(this.$target.children()[0]).addClass("oe_video_bg");
var param = $.deparam(src);
this.$target.attr({'muted': param.mute, 'loop': param.loop, 'controls': false, 'autoplay': param.autoplay});
this._refreshPublicWidgets();
});
_editor.on('closed', this, function () {
});
},
});
options.registry.menu_data = options.Class.extend({
xmlDependencies: ['/website/static/src/xml/website.editor.xml'],

@@ -1246,12 +1246,7 @@
<div data-js="background"
data-selector="section, .parallax, :not(.o_gallery > .container) > .carousel"
data-exclude=".s_hr, .s_image_gallery">
<a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background Image</a>
</div>
<div data-js="background_video"
data-selector="section, .parallax, :not(.o_gallery > .container) > .carousel"
data-exclude=".carousel .s_hr, .s_image_gallery">
<a tabindex="-1" href="#" class="dropdown-item" data-choose-video="true" data-no-preview="true"><i class="fa fa-video-camera"/>Background Video</a>
<a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background</a>
</div>

<!-- Background Image -->

0 comments on commit 08867f1

Please sign in to comment.
You can’t perform that action at this time.