"ignore" and "once" attributes, improved performance
This commit is contained in:
parent
f4d37ebf3a
commit
6074da9a52
343
reinitializer.js
343
reinitializer.js
|
|
@ -1,181 +1,244 @@
|
|||
"use strict";
|
||||
|
||||
if (typeof window.reinitializer !== "function") {
|
||||
// Not initialized
|
||||
// Not initialized
|
||||
|
||||
// Initialize of the class in global namespace
|
||||
window.reinitializer = class reinitializer {
|
||||
/**
|
||||
* Parent element for location <link> elements
|
||||
*/
|
||||
css = document.head;
|
||||
|
||||
/**
|
||||
* Parent element for location <script> elements
|
||||
*/
|
||||
js = document.body;
|
||||
// Initialize of the class in global namespace
|
||||
window.reinitializer = class reinitializer {
|
||||
/**
|
||||
* Parent element for location <link> elements
|
||||
*/
|
||||
css = document.head;
|
||||
|
||||
/**
|
||||
* Target element for searching new <link> and <script> elements
|
||||
*/
|
||||
root = document.body.getElementsByTagName("main")[0];
|
||||
/**
|
||||
* Parent element for location <script> elements
|
||||
*/
|
||||
js = document.body;
|
||||
|
||||
/**
|
||||
* Instance of the observer
|
||||
*/
|
||||
observer = new MutationObserver(() => this.handle(this.root));
|
||||
/**
|
||||
* Target element for searching new <link> and <script> elements
|
||||
*/
|
||||
root = document.body.getElementsByTagName("main")[0];
|
||||
|
||||
/**
|
||||
* Construct
|
||||
*
|
||||
* @param {object} root Entry point
|
||||
*/
|
||||
constructor(root) {
|
||||
// Initialize of the root element
|
||||
this.root = root ?? this.root;
|
||||
}
|
||||
/**
|
||||
* Instance of the observer
|
||||
*/
|
||||
observer = new MutationObserver(() => this.handle(this.root));
|
||||
|
||||
/**
|
||||
* Reinitialize <link> and <script> elements
|
||||
*
|
||||
* @return {bool} Processing status
|
||||
*/
|
||||
handle() {
|
||||
// Check for a dublicate execute launch
|
||||
if (this.started) return false;
|
||||
/**
|
||||
* Construct
|
||||
*
|
||||
* @param {object} root Entry point
|
||||
*/
|
||||
constructor(root) {
|
||||
// Initialize of the root element
|
||||
this.root = root ?? this.root;
|
||||
}
|
||||
|
||||
// Initialization an observation status
|
||||
this.started = true;
|
||||
/**
|
||||
* Reinitialize <link> and <script> elements
|
||||
*
|
||||
* @return {bool} Processing status
|
||||
*/
|
||||
handle() {
|
||||
// Check for a dublicate execute launch
|
||||
if (this.started) return false;
|
||||
|
||||
for (
|
||||
let links;
|
||||
(links = this.root.getElementsByTagName("link")).length > 0;
|
||||
) {
|
||||
// Enumeration <link> elements
|
||||
// Initialization an observation status
|
||||
this.started = true;
|
||||
|
||||
// Initialization of the <link> element
|
||||
const link = links[0];
|
||||
for (
|
||||
let links;
|
||||
(links = this.root.getElementsByTagName("link")).length > 0;
|
||||
) {
|
||||
// Enumeration <link> elements
|
||||
|
||||
// Initialization link of the <link> element
|
||||
const href = link.getAttribute("href");
|
||||
// Initialization of the <link> element
|
||||
const link = links[0];
|
||||
|
||||
// Stop listening
|
||||
this.stop();
|
||||
if (link.getAttribute("data-reinitializer-ignore") === "true") {
|
||||
// Marked as ignored
|
||||
|
||||
// Delete outdated <link> element from the document
|
||||
link.remove();
|
||||
// Move element
|
||||
this.css.appendChild(link);
|
||||
|
||||
// Start listening
|
||||
this.start();
|
||||
continue;
|
||||
}
|
||||
|
||||
// Deleting outdated elements
|
||||
for (
|
||||
const element of this.css.querySelectorAll(
|
||||
`script[href="${href}"]`,
|
||||
)
|
||||
) element.remove();
|
||||
// Initialization link of the <link> element
|
||||
const href = link.getAttribute("href");
|
||||
|
||||
// Initialization of new <link> element
|
||||
const element = document.createElement("link");
|
||||
element.setAttribute("href", href);
|
||||
element.setAttribute("rel", "stylesheet");
|
||||
if (
|
||||
link.getAttribute("data-reinitializer-once") === "true" &&
|
||||
this.css.querySelector(`:scope > link[href="${href}"]`)
|
||||
) {
|
||||
// Marked as executing once and already executed
|
||||
|
||||
// Write new element
|
||||
this.css.appendChild(element);
|
||||
}
|
||||
// Stop listening
|
||||
this.stop();
|
||||
|
||||
for (
|
||||
let scripts;
|
||||
(scripts = this.root.getElementsByTagName("script")).length > 0;
|
||||
) {
|
||||
// Enumeration of <script> elements
|
||||
// Delete outdated <link> element from the document
|
||||
link.remove();
|
||||
|
||||
// Initialization of the <script> element
|
||||
const script = scripts[0];
|
||||
// Start listening
|
||||
this.start();
|
||||
|
||||
// Initialization link of the <script> element
|
||||
const src = script.getAttribute("src");
|
||||
continue;
|
||||
}
|
||||
|
||||
// Initialization text of the <script> element
|
||||
const text = script.textContent;
|
||||
// Initialization outerHTML of the <script> element
|
||||
const html = script.outerHTML;
|
||||
|
||||
// Stop listening
|
||||
this.stop();
|
||||
// Stop listening
|
||||
this.stop();
|
||||
|
||||
// Delete outdated <script> element from the document
|
||||
script.remove();
|
||||
// Delete outdated <link> element from the document
|
||||
link.remove();
|
||||
|
||||
// Start listening
|
||||
this.start();
|
||||
// Start listening
|
||||
this.start();
|
||||
|
||||
// Initialization of new <script> element
|
||||
const element = document.createElement("script");
|
||||
// Deleting outdated elements
|
||||
for (const element of this.css.querySelectorAll(
|
||||
`:scope > link[href="${href}"]`
|
||||
)) element.remove();
|
||||
|
||||
if (typeof src === "string") {
|
||||
// File
|
||||
// Initialization of new <link> element
|
||||
const element = document.createElement("link");
|
||||
element.setAttribute("href", href);
|
||||
element.setAttribute("rel", "stylesheet");
|
||||
|
||||
// Deleting outdated elements
|
||||
for (
|
||||
const element of this.js.querySelectorAll(
|
||||
`script[src="${src}"]`,
|
||||
)
|
||||
) element.remove();
|
||||
// Write new element
|
||||
this.css.appendChild(element);
|
||||
}
|
||||
|
||||
// Copy link from outdated <script> element
|
||||
element.setAttribute("src", src);
|
||||
} else {
|
||||
// Script
|
||||
for (
|
||||
let scripts;
|
||||
(scripts = this.root.getElementsByTagName("script")).length > 0;
|
||||
) {
|
||||
// Enumeration of <script> elements
|
||||
|
||||
// Deleting outdated elements
|
||||
for (
|
||||
const element of Array.from(
|
||||
this.js.getElementsByTagName("script"),
|
||||
)
|
||||
.filter((e) => e.textContent === text)
|
||||
) {
|
||||
element.remove();
|
||||
}
|
||||
// Initialization of the <script> element
|
||||
const script = scripts[0];
|
||||
|
||||
// Copy text from outdated <script> element
|
||||
element.textContent = text;
|
||||
}
|
||||
if (script.getAttribute("data-reinitializer-ignore") === "true") {
|
||||
// Marked as ignored
|
||||
|
||||
// Write new <script> element to end of <body> element
|
||||
this.js.appendChild(element);
|
||||
}
|
||||
// Move element
|
||||
this.js.appendChild(script);
|
||||
|
||||
// Initialize of observation status
|
||||
this.started = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Return (success)
|
||||
return true;
|
||||
}
|
||||
// Initialization link of the <script> element
|
||||
const src = script.getAttribute("src");
|
||||
|
||||
/**
|
||||
* Start observation
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
start() {
|
||||
this.observer.observe(this.root, {
|
||||
childList: true,
|
||||
});
|
||||
}
|
||||
// Initialization text of the <script> element
|
||||
const text = script.textContent;
|
||||
|
||||
/**
|
||||
* Stop observation
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
stop() {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
};
|
||||
if (
|
||||
script.getAttribute("data-reinitializer-once") === "true" &&
|
||||
(this.js.querySelector(`:scope > script[src="${src}"]`) ||
|
||||
Array.from(this.js.querySelectorAll(`:scope > script`)).filter(
|
||||
(e) => e.textContent === text
|
||||
).length > 0)
|
||||
) {
|
||||
// Marked as executing once and already executed
|
||||
|
||||
// Stop listening
|
||||
this.stop();
|
||||
|
||||
// Delete outdated <script> element from the document
|
||||
script.remove();
|
||||
|
||||
// Start listening
|
||||
this.start();
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
// Initialization outerHTML of the <script> element
|
||||
const html = script.outerHTML;
|
||||
|
||||
// Stop listening
|
||||
this.stop();
|
||||
|
||||
// Delete outdated <script> element from the document
|
||||
script.remove();
|
||||
|
||||
// Start listening
|
||||
this.start();
|
||||
|
||||
// Initialization of new <script> element
|
||||
const element = document.createElement("script");
|
||||
|
||||
if (typeof src === "string") {
|
||||
// File
|
||||
|
||||
// Deleting outdated elements
|
||||
for (const element of this.js.querySelectorAll(
|
||||
`:scope > script[src="${src}"]`
|
||||
))
|
||||
element.remove();
|
||||
|
||||
// Copy link from outdated <script> element
|
||||
element.setAttribute("src", src);
|
||||
|
||||
// Write a type of <script> element
|
||||
element.setAttribute('type', 'text/javascript');
|
||||
} else {
|
||||
// Script
|
||||
|
||||
// Deleting outdated elements
|
||||
for (const element of Array.from(
|
||||
this.js.querySelectorAll(`:scope > script`)
|
||||
).filter((e) => e.textContent === text)) {
|
||||
element.remove();
|
||||
}
|
||||
|
||||
// Copy text from outdated <script> element
|
||||
element.textContent = text;
|
||||
}
|
||||
|
||||
// Write the new <script> element to end of <body> element
|
||||
this.js.appendChild(element);
|
||||
|
||||
// Write content to the new <script> element
|
||||
element.outerHTML = html;
|
||||
}
|
||||
|
||||
// Initialize of observation status
|
||||
this.started = false;
|
||||
|
||||
// Return (success)
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start observation
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
start() {
|
||||
this.observer.observe(this.root, {
|
||||
childList: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop observation
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
stop() {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Вызов события: "инициализировано"
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("reinitializer.initialized", {
|
||||
detail: { reinitializer: window.reinitializer },
|
||||
}),
|
||||
new CustomEvent("reinitializer.initialized", {
|
||||
detail: { reinitializer: window.reinitializer },
|
||||
})
|
||||
);
|
||||
Loading…
Reference in New Issue