diff options
| -rw-r--r-- | addons/web/static/src/js/public/lazyloader.js | 71 | ||||
| -rw-r--r-- | addons/web/static/src/scss/lazyloader.scss | 8 | ||||
| -rw-r--r-- | addons/web/views/webclient_templates.xml | 1 | ||||
| -rw-r--r-- | addons/website_sale/views/templates.xml | 2 |
4 files changed, 78 insertions, 4 deletions
diff --git a/addons/web/static/src/js/public/lazyloader.js b/addons/web/static/src/js/public/lazyloader.js index 7c873e1938d..4f8be8c2d65 100644 --- a/addons/web/static/src/js/public/lazyloader.js +++ b/addons/web/static/src/js/public/lazyloader.js @@ -1,6 +1,62 @@ odoo.define('web.public.lazyloader', function (require) { 'use strict'; +var blockEvents = ['submit', 'click']; +var blockFunction = function (ev) { + ev.preventDefault(); + ev.stopImmediatePropagation(); +}; + +var waitingLazy = false; + +/** + * Blocks the DOM sections which explicitely require the lazy loaded JS to be + * working (those sections should be marked with the 'o_wait_lazy_js' class). + * + * @see stopWaitingLazy + */ +function waitLazy() { + if (waitingLazy) { + return; + } + waitingLazy = true; + + document.querySelectorAll('.o_wait_lazy_js').forEach(function (element) { + blockEvents.forEach(function (evType) { + element.addEventListener(evType, blockFunction); + }); + }); +} +/** + * Unblocks the DOM sections blocked by @see waitLazy and removes the related + * 'o_wait_lazy_js' class from the whole DOM. + */ +function stopWaitingLazy() { + if (!waitingLazy) { + return; + } + waitingLazy = false; + + document.querySelectorAll('.o_wait_lazy_js').forEach(function (element) { + blockEvents.forEach(function (evType) { + element.removeEventListener(evType, blockFunction); + }); + element.classList.remove('o_wait_lazy_js'); + }); +} + +// Start waiting for lazy loading as soon as the DOM is available +if (document.readyState !== 'loading') { + waitLazy(); +} else { + document.addEventListener('DOMContentLoaded', function () { + waitLazy(); + }); +} + +// As soon as everything is fully loaded, start loading all the remaining JS +// and unblock the related DOM section when all of it have been loaded and +// executed var doResolve = null; var _allScriptsLoaded = new Promise(function (resolve) { if (doResolve) { @@ -8,12 +64,21 @@ var _allScriptsLoaded = new Promise(function (resolve) { } else { doResolve = resolve; } +}).then(function () { + stopWaitingLazy(); }); - -window.addEventListener('load', function () { +if (document.readyState === 'complete') { setTimeout(_loadScripts, 0); -}); +} else { + window.addEventListener('load', function () { + setTimeout(_loadScripts, 0); + }); +} +/** + * @param {DOMElement[]} scripts + * @param {integer} index + */ function _loadScripts(scripts, index) { if (scripts === undefined) { scripts = document.querySelectorAll('script[data-src]'); diff --git a/addons/web/static/src/scss/lazyloader.scss b/addons/web/static/src/scss/lazyloader.scss new file mode 100644 index 00000000000..fb3f39f4086 --- /dev/null +++ b/addons/web/static/src/scss/lazyloader.scss @@ -0,0 +1,8 @@ + +// Disable buttons and links marked with the o_wait_lazy_js class or in a +// section which is marked with the o_wait_lazy_js class. +a[href], button, input[type="submit"], input[type="button"], .btn { + &.o_wait_lazy_js, .o_wait_lazy_js & { + pointer-events: none; + } +} diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml index 31a2e62ef53..5e322ad2ac9 100644 --- a/addons/web/views/webclient_templates.xml +++ b/addons/web/views/webclient_templates.xml @@ -370,6 +370,7 @@ </t> <t t-call="web._assets_bootstrap"/> + <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/lazyloader.scss"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/navbar_mobile.scss"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/notification.scss"/> diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml index f819b6f0398..0182725b451 100644 --- a/addons/website_sale/views/templates.xml +++ b/addons/website_sale/views/templates.xml @@ -85,7 +85,7 @@ <attribute name="data-display-image">true</attribute> </xpath> <xpath expr="//div[hasclass('input-group')]" position="replace"> - <form t-attf-class="o_wsale_products_searchbar_form #{_classes}" t-att-action="action if action else '/shop'" method="get"> + <form t-attf-class="o_wsale_products_searchbar_form o_wait_lazy_js #{_classes}" t-att-action="action if action else '/shop'" method="get"> <t>$0</t> <input name="order" type="hidden" class="o_wsale_search_order_by" value=""/> <t t-raw="0"/> |