diff options
| author | qsm-odoo <qsm@odoo.com> | 2019-10-08 13:23:52 +0000 |
|---|---|---|
| committer | fw-bot <otis@odoo.com> | 2019-10-10 06:26:21 +0000 |
| commit | b0fc1cd4559d466f95f7146b67fde71974f0e7b8 (patch) | |
| tree | 6ada9bb0aae98f7e818380c4ad9102b2ddd6b344 /addons/website/static | |
| parent | 7af8534d07211f2267efe4881ab2139e2374c19d (diff) | |
[FIX] website: make background videos in mega menus work
When a background video was used in a mega menu, it was only working in
edit mode. Indeed, the background video size is computed on page load
(and on window resize) but as the video is inside a hidden dropdown
menu in this case, the size cannot be properly computed.
This commit fixes the issue by recomputing the video size on dropdown
menu opening.
task-2080590
closes odoo/odoo#38314
X-original-commit: 66ec1c19b63fe26e559ed2d8d7359df974ade789
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Diffstat (limited to 'addons/website/static')
| -rw-r--r-- | addons/website/static/src/js/content/snippets.animation.js | 19 | ||||
| -rw-r--r-- | addons/website/static/src/xml/website.background.video.xml | 2 |
2 files changed, 19 insertions, 2 deletions
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index 9a7b4ee8c14..c303d0691d3 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -710,7 +710,15 @@ registry.backgroundVideo = publicWidget.Widget.extend({ } } - $(window).on('resize.' + this.iframeID, _.throttle(() => this._adjustIframe(), 50)); + var throttledUpdate = _.throttle(() => this._adjustIframe(), 50); + + var $dropdownMenu = this.$el.closest('.dropdown-menu'); + if ($dropdownMenu.length) { + this.$dropdownParent = $dropdownMenu.parent(); + this.$dropdownParent.on('shown.bs.dropdown.backgroundVideo', throttledUpdate); + } + + $(window).on('resize.' + this.iframeID, throttledUpdate); return Promise.all(proms).then(() => this._appendBgVideo()); }, @@ -720,6 +728,10 @@ registry.backgroundVideo = publicWidget.Widget.extend({ destroy: function () { this._super.apply(this, arguments); + if (this.$dropdownParent) { + this.$dropdownParent.off('.backgroundVideo'); + } + $(window).off('resize.' + this.iframeID); if (this.$bgVideoContainer) { @@ -738,6 +750,8 @@ registry.backgroundVideo = publicWidget.Widget.extend({ * @private */ _adjustIframe: function () { + this.$iframe.removeClass('show'); + // Adjust the iframe var wrapperWidth = this.$target.innerWidth(); var wrapperHeight = this.$target.innerHeight(); @@ -755,6 +769,9 @@ registry.backgroundVideo = publicWidget.Widget.extend({ style['top'] = '0'; } this.$iframe.css(style); + + void this.$iframe[0].offsetWidth; // Force style addition + this.$iframe.addClass('show'); }, /** * Append background video related elements to the target. diff --git a/addons/website/static/src/xml/website.background.video.xml b/addons/website/static/src/xml/website.background.video.xml index 548ce2aabb2..18c1f4bdba6 100644 --- a/addons/website/static/src/xml/website.background.video.xml +++ b/addons/website/static/src/xml/website.background.video.xml @@ -8,7 +8,7 @@ </div> </div> <iframe t-att-id="iframeID" - class="o_bg_video_iframe" + class="o_bg_video_iframe fade" frameBorder="0" t-att-src="videoSrc"/> </div> |