mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 18:48:51 +02:00
Merge remote-tracking branch 'origin/support/3.0' into develop
# Conflicts: # templates/pages/backoffice/webpage/layout.html.twig
This commit is contained in:
@@ -89,11 +89,11 @@ $(function () {
|
||||
aOptions = $.extend(aOptions, JSON.parse(data));
|
||||
if (aOptions.js_files) {
|
||||
$.each(aOptions.js_files, function (i, item) {
|
||||
if ($.inArray(item, aListJsFiles) === -1)
|
||||
if ($.inArray(item, aLoadedJsFilesRegister) === -1)
|
||||
{
|
||||
sFileUrl = CombodoGlobalToolbox.AddParameterToUrl(item, aOptions.js_files_param, aOptions.js_files_value);
|
||||
$.ajax({url:sFileUrl, dataType: 'script', cache: true });
|
||||
aListJsFiles.push(item);
|
||||
aLoadedJsFilesRegister.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -35,55 +35,99 @@
|
||||
{% set sId = oLayout.GetId() | sanitize(constant('utils::ENUM_SANITIZATION_FILTER_VARIABLE_NAME')) %}
|
||||
{% block iboPageJsFiles %}
|
||||
<script type="text/javascript">
|
||||
window['{{ sPromiseId }}'] = new Promise(function (resolve, reject) {
|
||||
let fInlineOnDomReadyScript{{ sId }} = function () {
|
||||
{% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
|
||||
{{ sJsInlineOnDomReady|raw }}
|
||||
window['{{ sPromiseId }}'] = new Promise(function (resolve, reject) {
|
||||
let fInlineOnDomReadyScript{{ sId }} = function () {
|
||||
{% for sJsInlineOnDomReady in aPage.aJsInlineOnDomReady %}
|
||||
{{ sJsInlineOnDomReady|raw }}
|
||||
{% endfor %}
|
||||
resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {Array} aJsFilesToLoad Files required by the current \AjaxPage
|
||||
*
|
||||
* For each file:
|
||||
* - "id": Used as an identifier to check if file is already being handled
|
||||
* - "url" is the URL that will be use for loading. It should include any relevant query args, including the cache buster
|
||||
*
|
||||
* ```
|
||||
* [
|
||||
* {"id": "https://itop/js/foo.js", "url": "https://itop/js/foo.js?cache_buster=123},
|
||||
* {"id": "https://itop/js/bar.js", "url": "https://itop/js/bar.js?a=b&cache_buster=123"},
|
||||
* ...
|
||||
* ]
|
||||
* ```
|
||||
*/
|
||||
let aJsFilesToLoad = [];
|
||||
/**
|
||||
* @type {Array} aJsFilesToLoadByOtherRequests Files required by the current \AjaxPage but that are already being handled by another request (done or ongoing)
|
||||
*/
|
||||
let aJsFilesToLoadByOtherRequests = [];
|
||||
|
||||
{% for sJsFile in aPage.aJsFiles %}
|
||||
aJsFilesToLoad.push({
|
||||
"id": "{{ sJsFile|raw }}",
|
||||
"url": "{{ sJsFile|add_itop_version|raw }}"
|
||||
});
|
||||
|
||||
// If file is already present in the register (see it declaration in \WebPage TWIG template), let its original requester load it
|
||||
if (aLoadedJsFilesRegister.has("{{ sJsFile|raw }}") === true) {
|
||||
aJsFilesToLoadByOtherRequests.push("{{ sJsFile|raw }}");
|
||||
}
|
||||
// Otherwise add it to register and initialize corresponding promise
|
||||
else {
|
||||
aLoadedJsFilesRegister.set("{{ sJsFile|raw }}", new Promise(function(fJsFileResolve) {
|
||||
aLoadedJsFilesResolveCallbacks.set("{{ sJsFile|raw }}", fJsFileResolve);
|
||||
}));
|
||||
}
|
||||
{% endfor %}
|
||||
resolve();
|
||||
}
|
||||
|
||||
let aFilesToLoad{{ sId }} = [];
|
||||
let iCurrentIdx = 0;
|
||||
let iFilesToLoadCount = aJsFilesToLoad.length;
|
||||
if (iFilesToLoadCount > 0)
|
||||
{
|
||||
let fLoadScript{{ sId }} = function () {
|
||||
let sCurrentFileId = aJsFilesToLoad[iCurrentIdx]["id"];
|
||||
let sCurrentFileUrl = aJsFilesToLoad[iCurrentIdx]["url"];
|
||||
|
||||
{% for sJsFile in aPage.aJsFiles %}
|
||||
if ($.inArray('{{ sJsFile|raw }}', aListJsFiles) === -1)
|
||||
{
|
||||
aFilesToLoad{{ sId }}.push('{{ sJsFile|add_itop_version|raw }}');
|
||||
aListJsFiles.push("{{ sJsFile|raw }}");
|
||||
}
|
||||
{% endfor %}
|
||||
/** @type {Promise} oPromise Promise to use once file is loaded */
|
||||
let oPromise = null;
|
||||
// If file is handled by another request, retrieve the existing promise
|
||||
if ($.inArray(sCurrentFileId, aJsFilesToLoadByOtherRequests) !== -1) {
|
||||
oPromise = aLoadedJsFilesRegister.get(sCurrentFileId)
|
||||
}
|
||||
// Otherwise create its own promise to load it
|
||||
else {
|
||||
oPromise = $.when(
|
||||
$.ajax({
|
||||
url: sCurrentFileUrl,
|
||||
dataType: 'script',
|
||||
cache: true
|
||||
}),
|
||||
aLoadedJsFilesResolveCallbacks.get(sCurrentFileId)()
|
||||
);
|
||||
}
|
||||
|
||||
let iCurrentIdx{{ sId }} = 0;
|
||||
let iFilesToLoadCount{{ sId }} = aFilesToLoad{{ sId }}.length;
|
||||
if (iFilesToLoadCount{{ sId }} > 0)
|
||||
{
|
||||
let fLoadScript{{ sId }} = function () {
|
||||
$.when(
|
||||
$.ajax({
|
||||
url: aFilesToLoad{{ sId }}[iCurrentIdx{{ sId }}],
|
||||
dataType: 'script',
|
||||
cache: true
|
||||
})
|
||||
)
|
||||
.then(function () {
|
||||
iCurrentIdx{{ sId }}++;
|
||||
if (iCurrentIdx{{ sId }} !== iFilesToLoadCount{{ sId }})
|
||||
{
|
||||
fLoadScript{{ sId }}();
|
||||
}
|
||||
else
|
||||
{
|
||||
fInlineOnDomReadyScript{{ sId }}();
|
||||
}
|
||||
});
|
||||
};
|
||||
fLoadScript{{ sId }}();
|
||||
}
|
||||
else
|
||||
{
|
||||
fInlineOnDomReadyScript{{ sId }}();
|
||||
}
|
||||
});
|
||||
// Only once file is loaded (by the request or another), proceed to next step
|
||||
oPromise.then(function () {
|
||||
iCurrentIdx++;
|
||||
if (iCurrentIdx !== iFilesToLoadCount)
|
||||
{
|
||||
fLoadScript{{ sId }}();
|
||||
}
|
||||
else
|
||||
{
|
||||
fInlineOnDomReadyScript{{ sId }}();
|
||||
}
|
||||
});
|
||||
};
|
||||
fLoadScript{{ sId }}();
|
||||
}
|
||||
else
|
||||
{
|
||||
fInlineOnDomReadyScript{{ sId }}();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% else %}
|
||||
|
||||
@@ -66,14 +66,30 @@
|
||||
{% block iboPageTemplates %}
|
||||
{% endblock %}
|
||||
|
||||
{% if aPage.aJsFiles is not empty %}
|
||||
<script type="text/javascript">
|
||||
var aListJsFiles = [];
|
||||
{% for sJsFile in aPage.aJsFiles %}
|
||||
aListJsFiles.push("{{ sJsFile|raw }}");
|
||||
{% endfor %}
|
||||
</script>
|
||||
{% endif %}
|
||||
<script type="text/javascript">
|
||||
{# JS files can either be loaded initially or requested by an XHR response #}
|
||||
{# - For the initial page, all files are loaded before running inline snippets #}
|
||||
{# - For XHR responses, we need to ensure that all required files are fully loaded before running inline snippets #}
|
||||
|
||||
/**
|
||||
* @var {Map} aLoadedJsFilesRegister
|
||||
* Register of all JS files loaded in this page, including the Promise corresponding to the loading state of each file.
|
||||
* A JS file MUST NOT be loaded more than once as it could compromise settings / plugins loaded after the first time.
|
||||
*/
|
||||
const aLoadedJsFilesRegister = new Map();
|
||||
/**
|
||||
* @var {Map} aLoadedJsFilesResolveCallbacks
|
||||
* Resolve callbacks of JS files registered in aLoadedJsFilesRegister. Used -mostly in \AjaxPage- to know when a file is done loading so the depending snippets can run
|
||||
*/
|
||||
const aLoadedJsFilesResolveCallbacks = new Map();
|
||||
{% for sJsFile in aPage.aJsFiles %}
|
||||
aLoadedJsFilesRegister.set("{{ sJsFile|raw }}", new Promise(function(resolve) {
|
||||
aLoadedJsFilesResolveCallbacks.set("{{ sJsFile|raw }}", resolve);
|
||||
// Resolve promise right away as these files are loaded immediately before any inline JS is executed
|
||||
aLoadedJsFilesResolveCallbacks.get("{{ sJsFile|raw }}")();
|
||||
}));
|
||||
{% endfor %}
|
||||
</script>
|
||||
|
||||
{% block iboPageJsFiles %}
|
||||
{% for sJsFile in aPage.aJsFiles %}
|
||||
|
||||
Reference in New Issue
Block a user