Use createElement to load style

This commit is contained in:
the1812 2019-05-11 12:17:06 +08:00
parent ac0ae46019
commit e246f17998
8 changed files with 169 additions and 49 deletions

View File

@ -131,8 +131,8 @@ declare global
applyStyle(key: string, id?: string): void;
removeStyle(key: string): void;
applyImportantStyle(key: string, id?: string): void;
applyStyleFromText(text: string): void;
applyImportantStyleFromText(text: string): void;
applyStyleFromText(text: string, id: string): void;
applyImportantStyleFromText(text: string, id: string): void;
getStyle(key: string, id?: string): void;
}
const resources: ResourceManager;

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name Bilibili Evolved (Offline)
// @version 298.84
// @version 298.85
// @description Bilibili Evolved 的离线版, 所有功能都已内置于脚本中.
// @author Grant Howard, Coulomb-G
// @copyright 2019, Grant Howard (https://github.com/the1812) & Coulomb-G (https://github.com/Coulomb-G)
@ -1246,12 +1246,16 @@ class Resource
{
logError("Attempt to get style which is not downloaded.");
}
let attributes = `id='${id}'`;
// let attributes = `id='${id}'`;
// if (this.priority !== undefined)
// {
// attributes += ` priority='${this.priority}'`;
// }
return `<style ${attributes}>${style}</style>`;
// return `<style ${attributes}>${style}</style>`;
const styleElement = document.createElement("style");
styleElement.id = id;
styleElement.innerText = style;
return styleElement;
}
getPriorStyle()
{
@ -1301,11 +1305,11 @@ class Resource
// }
if (important)
{
document.body.insertAdjacentHTML("beforeend", style);
document.body.insertAdjacentElement("beforeend", style);
}
else
{
document.head.insertAdjacentHTML("afterbegin", style);
document.head.insertAdjacentElement("afterbegin", style);
}
}
}
@ -1949,13 +1953,33 @@ class StyleManager
}
Resource.all[key].applyStyle(id, true);
}
applyStyleFromText(text)
applyStyleFromText(text, id)
{
document.head.insertAdjacentHTML("afterbegin", text);
if (!id)
{
document.head.insertAdjacentHTML("afterbegin", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.head.insertAdjacentElement("afterbegin", style);
}
}
applyImportantStyleFromText(text)
applyImportantStyleFromText(text, id)
{
document.body.insertAdjacentHTML("beforeend", text);
if (!id)
{
document.body.insertAdjacentHTML("beforeend", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.body.insertAdjacentElement("beforeend", style);
}
}
getStyle(key, id)
{
@ -2042,7 +2066,7 @@ class ResourceManager
styles.push("--invert-filter:" + settings.filterInvert);
styles.push("--blur-background-opacity:" + settings.blurBackgroundOpacity);
styles.push("--custom-control-background-opacity:" + settings.customControlBackgroundOpacity);
this.applyStyleFromText(`<style id="bilibili-evolved-variables">html{${styles.join(";")}}</style>`);
this.applyStyleFromText(`html{${styles.join(";")}}`, "bilibili-evolved-variables");
}
resolveComponentName(componentName)
{

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name Bilibili Evolved (Preview Offline)
// @version 298.84
// @version 298.85
// @description Bilibili Evolved 的预览离线版, 可以抢先体验新功能, 并且所有功能都已内置于脚本中.
// @author Grant Howard, Coulomb-G
// @copyright 2019, Grant Howard (https://github.com/the1812) & Coulomb-G (https://github.com/Coulomb-G)
@ -1246,12 +1246,16 @@ class Resource
{
logError("Attempt to get style which is not downloaded.");
}
let attributes = `id='${id}'`;
// let attributes = `id='${id}'`;
// if (this.priority !== undefined)
// {
// attributes += ` priority='${this.priority}'`;
// }
return `<style ${attributes}>${style}</style>`;
// return `<style ${attributes}>${style}</style>`;
const styleElement = document.createElement("style");
styleElement.id = id;
styleElement.innerText = style;
return styleElement;
}
getPriorStyle()
{
@ -1301,11 +1305,11 @@ class Resource
// }
if (important)
{
document.body.insertAdjacentHTML("beforeend", style);
document.body.insertAdjacentElement("beforeend", style);
}
else
{
document.head.insertAdjacentHTML("afterbegin", style);
document.head.insertAdjacentElement("afterbegin", style);
}
}
}
@ -1949,13 +1953,33 @@ class StyleManager
}
Resource.all[key].applyStyle(id, true);
}
applyStyleFromText(text)
applyStyleFromText(text, id)
{
document.head.insertAdjacentHTML("afterbegin", text);
if (!id)
{
document.head.insertAdjacentHTML("afterbegin", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.head.insertAdjacentElement("afterbegin", style);
}
}
applyImportantStyleFromText(text)
applyImportantStyleFromText(text, id)
{
document.body.insertAdjacentHTML("beforeend", text);
if (!id)
{
document.body.insertAdjacentHTML("beforeend", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.body.insertAdjacentElement("beforeend", style);
}
}
getStyle(key, id)
{
@ -2042,7 +2066,7 @@ class ResourceManager
styles.push("--invert-filter:" + settings.filterInvert);
styles.push("--blur-background-opacity:" + settings.blurBackgroundOpacity);
styles.push("--custom-control-background-opacity:" + settings.customControlBackgroundOpacity);
this.applyStyleFromText(`<style id="bilibili-evolved-variables">html{${styles.join(";")}}</style>`);
this.applyStyleFromText(`html{${styles.join(";")}}`, "bilibili-evolved-variables");
}
resolveComponentName(componentName)
{

View File

@ -1172,12 +1172,16 @@ class Resource
{
logError("Attempt to get style which is not downloaded.");
}
let attributes = `id='${id}'`;
// let attributes = `id='${id}'`;
// if (this.priority !== undefined)
// {
// attributes += ` priority='${this.priority}'`;
// }
return `<style ${attributes}>${style}</style>`;
// return `<style ${attributes}>${style}</style>`;
const styleElement = document.createElement("style");
styleElement.id = id;
styleElement.innerText = style;
return styleElement;
}
getPriorStyle()
{
@ -1227,11 +1231,11 @@ class Resource
// }
if (important)
{
document.body.insertAdjacentHTML("beforeend", style);
document.body.insertAdjacentElement("beforeend", style);
}
else
{
document.head.insertAdjacentHTML("afterbegin", style);
document.head.insertAdjacentElement("afterbegin", style);
}
}
}
@ -1875,13 +1879,33 @@ class StyleManager
}
Resource.all[key].applyStyle(id, true);
}
applyStyleFromText(text)
applyStyleFromText(text, id)
{
document.head.insertAdjacentHTML("afterbegin", text);
if (!id)
{
document.head.insertAdjacentHTML("afterbegin", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.head.insertAdjacentElement("afterbegin", style);
}
}
applyImportantStyleFromText(text)
applyImportantStyleFromText(text, id)
{
document.body.insertAdjacentHTML("beforeend", text);
if (!id)
{
document.body.insertAdjacentHTML("beforeend", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.body.insertAdjacentElement("beforeend", style);
}
}
getStyle(key, id)
{
@ -1968,7 +1992,7 @@ class ResourceManager
styles.push("--invert-filter:" + settings.filterInvert);
styles.push("--blur-background-opacity:" + settings.blurBackgroundOpacity);
styles.push("--custom-control-background-opacity:" + settings.customControlBackgroundOpacity);
this.applyStyleFromText(`<style id="bilibili-evolved-variables">html{${styles.join(";")}}</style>`);
this.applyStyleFromText(`html{${styles.join(";")}}`, "bilibili-evolved-variables");
}
resolveComponentName(componentName)
{

View File

@ -1172,12 +1172,16 @@ class Resource
{
logError("Attempt to get style which is not downloaded.");
}
let attributes = `id='${id}'`;
// let attributes = `id='${id}'`;
// if (this.priority !== undefined)
// {
// attributes += ` priority='${this.priority}'`;
// }
return `<style ${attributes}>${style}</style>`;
// return `<style ${attributes}>${style}</style>`;
const styleElement = document.createElement("style");
styleElement.id = id;
styleElement.innerText = style;
return styleElement;
}
getPriorStyle()
{
@ -1227,11 +1231,11 @@ class Resource
// }
if (important)
{
document.body.insertAdjacentHTML("beforeend", style);
document.body.insertAdjacentElement("beforeend", style);
}
else
{
document.head.insertAdjacentHTML("afterbegin", style);
document.head.insertAdjacentElement("afterbegin", style);
}
}
}
@ -1875,13 +1879,33 @@ class StyleManager
}
Resource.all[key].applyStyle(id, true);
}
applyStyleFromText(text)
applyStyleFromText(text, id)
{
document.head.insertAdjacentHTML("afterbegin", text);
if (!id)
{
document.head.insertAdjacentHTML("afterbegin", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.head.insertAdjacentElement("afterbegin", style);
}
}
applyImportantStyleFromText(text)
applyImportantStyleFromText(text, id)
{
document.body.insertAdjacentHTML("beforeend", text);
if (!id)
{
document.body.insertAdjacentHTML("beforeend", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.body.insertAdjacentElement("beforeend", style);
}
}
getStyle(key, id)
{
@ -1968,7 +1992,7 @@ class ResourceManager
styles.push("--invert-filter:" + settings.filterInvert);
styles.push("--blur-background-opacity:" + settings.blurBackgroundOpacity);
styles.push("--custom-control-background-opacity:" + settings.customControlBackgroundOpacity);
this.applyStyleFromText(`<style id="bilibili-evolved-variables">html{${styles.join(";")}}</style>`);
this.applyStyleFromText(`html{${styles.join(";")}}`, "bilibili-evolved-variables");
}
resolveComponentName(componentName)
{

View File

@ -43,7 +43,7 @@ export class ResourceManager
styles.push("--invert-filter:" + settings.filterInvert);
styles.push("--blur-background-opacity:" + settings.blurBackgroundOpacity);
styles.push("--custom-control-background-opacity:" + settings.customControlBackgroundOpacity);
this.applyStyleFromText(`<style id="bilibili-evolved-variables">html{${styles.join(";")}}</style>`);
this.applyStyleFromText(`html{${styles.join(";")}}`, "bilibili-evolved-variables");
}
resolveComponentName(componentName)
{

View File

@ -117,12 +117,16 @@ export class Resource
{
logError("Attempt to get style which is not downloaded.");
}
let attributes = `id='${id}'`;
// let attributes = `id='${id}'`;
// if (this.priority !== undefined)
// {
// attributes += ` priority='${this.priority}'`;
// }
return `<style ${attributes}>${style}</style>`;
// return `<style ${attributes}>${style}</style>`;
const styleElement = document.createElement("style");
styleElement.id = id;
styleElement.innerText = style;
return styleElement;
}
getPriorStyle()
{
@ -172,11 +176,11 @@ export class Resource
// }
if (important)
{
document.body.insertAdjacentHTML("beforeend", style);
document.body.insertAdjacentElement("beforeend", style);
}
else
{
document.head.insertAdjacentHTML("afterbegin", style);
document.head.insertAdjacentElement("afterbegin", style);
}
}
}

View File

@ -30,13 +30,33 @@ export class StyleManager
}
Resource.all[key].applyStyle(id, true);
}
applyStyleFromText(text)
applyStyleFromText(text, id)
{
document.head.insertAdjacentHTML("afterbegin", text);
if (!id)
{
document.head.insertAdjacentHTML("afterbegin", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.head.insertAdjacentElement("afterbegin", style);
}
}
applyImportantStyleFromText(text)
applyImportantStyleFromText(text, id)
{
document.body.insertAdjacentHTML("beforeend", text);
if (!id)
{
document.body.insertAdjacentHTML("beforeend", text);
}
else
{
const style = document.createElement("style");
style.id = id;
style.innerText = text;
document.body.insertAdjacentElement("beforeend", style);
}
}
getStyle(key, id)
{