244 lines
8.1 KiB
JavaScript
244 lines
8.1 KiB
JavaScript
(function () {
|
|
if (window.__headliner) return;
|
|
window.__headliner = true;
|
|
|
|
window.__headlinerActive = localStorage.getItem("headlinerActive") === "true";
|
|
|
|
const TARGET_TEXT = "Spellchecker";
|
|
const CLONE_KEY = "data-headliner-cloned";
|
|
const STYLE_ID = "headliner-style";
|
|
|
|
const defaults = {
|
|
content: "Sanctum V 1.0.2",
|
|
left: "32",
|
|
top: "56",
|
|
fontSize: "15",
|
|
fontWeight: "700"
|
|
};
|
|
|
|
function loadSettings() {
|
|
try {
|
|
let s = JSON.parse(localStorage.getItem("headlinerSettings"));
|
|
if (s && (s.content === "Stoat V 1.0.0 - Sanctum" || s.content === "Sanctum V 1.0.0" || s.content === "Sanctum V 1.0.1")) {
|
|
s.content = defaults.content;
|
|
saveSettings(s);
|
|
}
|
|
return s || { ...defaults };
|
|
} catch {
|
|
return { ...defaults };
|
|
}
|
|
}
|
|
|
|
function saveSettings(settings) {
|
|
localStorage.setItem("headlinerSettings", JSON.stringify(settings));
|
|
}
|
|
|
|
function buildCSS(s) {
|
|
return `
|
|
svg path[d^="M466.17 254c-12.65"],
|
|
svg path[d^="M734.245 254c-15.377"] {
|
|
display: none !important;
|
|
}
|
|
.flex-sh_0.h_29px.us_none.d_flex.ai_center.fill_var\\(--md-sys-color-on-surface\\).c_var\\(--md-sys-color-outline\\).bg_var\\(--md-sys-color-surface-container-high\\) {
|
|
position: relative !important;
|
|
color: transparent !important;
|
|
}
|
|
.flex-sh_0.h_29px.us_none.d_flex.ai_center.fill_var\\(--md-sys-color-on-surface\\).c_var\\(--md-sys-color-outline\\).bg_var\\(--md-sys-color-surface-container-high\\)::before {
|
|
content: "${s.content}";
|
|
position: absolute;
|
|
left: ${s.left}px;
|
|
top: ${s.top}%;
|
|
transform: translateY(-50%);
|
|
font-size: ${s.fontSize}px;
|
|
font-weight: ${s.fontWeight};
|
|
color: var(--md-sys-color-on-surface) !important;
|
|
pointer-events: none;
|
|
}
|
|
`;
|
|
}
|
|
|
|
function applyCSS() {
|
|
const settings = loadSettings();
|
|
let style = document.getElementById(STYLE_ID);
|
|
if (!style) {
|
|
style = document.createElement("style");
|
|
style.id = STYLE_ID;
|
|
document.head.appendChild(style);
|
|
}
|
|
style.textContent = buildCSS(settings);
|
|
}
|
|
|
|
function removeCSS() {
|
|
const style = document.getElementById(STYLE_ID);
|
|
if (style) style.remove();
|
|
}
|
|
|
|
if (window.__headlinerActive) applyCSS();
|
|
|
|
function applyActiveStyle(clone) {
|
|
const desc = clone.querySelector("div.d_flex.flex-g_1.flex-d_column > span");
|
|
const checkbox = clone.querySelector("mdui-checkbox");
|
|
|
|
if (window.__headlinerActive) {
|
|
clone.setAttribute("data-active", "true");
|
|
if (desc) desc.textContent = "Headliner is ON";
|
|
if (checkbox) checkbox.setAttribute("checked", "");
|
|
applyCSS();
|
|
} else {
|
|
clone.setAttribute("data-active", "false");
|
|
if (desc) desc.textContent = "Modify the Sanctum name in the titlebar to say anything you want";
|
|
if (checkbox) checkbox.removeAttribute("checked");
|
|
removeCSS();
|
|
}
|
|
}
|
|
|
|
function buildPanel() {
|
|
const s = loadSettings();
|
|
|
|
const panel = document.createElement("div");
|
|
panel.id = "headliner-panel";
|
|
panel.style.cssText = `
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
background: var(--md-sys-color-surface-container-highest);
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
font-size: 12px;
|
|
color: var(--md-sys-color-on-surface);
|
|
`;
|
|
|
|
const fields = [
|
|
{ label: "Content", key: "content", type: "text", value: s.content },
|
|
{ label: "Left (px)", key: "left", type: "number", value: s.left },
|
|
{ label: "Top (%)", key: "top", type: "number", value: s.top },
|
|
{ label: "Font Size", key: "fontSize", type: "number", value: s.fontSize },
|
|
{ label: "Font Weight", key: "fontWeight", type: "number", value: s.fontWeight }
|
|
];
|
|
|
|
fields.forEach(({ label, key, type, value }) => {
|
|
const row = document.createElement("div");
|
|
row.style.cssText = "display:flex; align-items:center; justify-content:space-between; gap:8px;";
|
|
|
|
const lbl = document.createElement("label");
|
|
lbl.textContent = label;
|
|
lbl.style.cssText = "flex-shrink:0; font-size:11px; opacity:0.8;";
|
|
|
|
const input = document.createElement("input");
|
|
input.type = type;
|
|
input.value = value;
|
|
input.dataset.key = key;
|
|
input.style.cssText = `
|
|
width: ${type === "text" ? "160px" : "60px"};
|
|
padding: 3px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
background: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
font-size: 11px;
|
|
`;
|
|
|
|
row.appendChild(lbl);
|
|
row.appendChild(input);
|
|
panel.appendChild(row);
|
|
});
|
|
|
|
const saveBtn = document.createElement("button");
|
|
saveBtn.textContent = "Apply";
|
|
saveBtn.style.cssText = `
|
|
margin-top: 4px;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
background: var(--md-sys-color-primary);
|
|
color: var(--md-sys-color-on-primary);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
align-self: flex-end;
|
|
`;
|
|
|
|
saveBtn.addEventListener("click", e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const newSettings = { ...defaults };
|
|
panel.querySelectorAll("input").forEach(input => {
|
|
newSettings[input.dataset.key] = input.value;
|
|
});
|
|
saveSettings(newSettings);
|
|
if (window.__headlinerActive) applyCSS();
|
|
});
|
|
|
|
panel.appendChild(saveBtn);
|
|
return panel;
|
|
}
|
|
|
|
function tryInject() {
|
|
document.querySelectorAll("a.pos_relative").forEach(btn => {
|
|
if (
|
|
btn.hasAttribute(CLONE_KEY) ||
|
|
btn.hasAttribute("data-headliner-entry") ||
|
|
!btn.innerText.includes(TARGET_TEXT)
|
|
) return;
|
|
|
|
btn.setAttribute(CLONE_KEY, "true");
|
|
|
|
const clone = btn.cloneNode(true);
|
|
clone.removeAttribute(CLONE_KEY);
|
|
clone.setAttribute("data-headliner-entry", "true");
|
|
clone.setAttribute("data-active", "false");
|
|
|
|
const title = clone.querySelector("div.d_flex.flex-g_1.flex-d_column > div");
|
|
if (title) title.textContent = "Activate headliner";
|
|
|
|
const settingsBtn = document.createElement("div");
|
|
settingsBtn.title = "Edit headliner settings";
|
|
settingsBtn.style.cssText = "cursor: pointer; z-index: 10; flex-shrink: 0;";
|
|
settingsBtn.innerHTML = `
|
|
<div class="fill_var(--md-sys-color-on-surface) bg_var(--md-sys-color-surface-dim) w_36px h_36px d_flex flex-sh_0 ai_center jc_center bdr_var(--borderRadius-full)">
|
|
<span aria-hidden="true" class="material-symbols-outlined fs_inherit fw_undefined!" style="display: block; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0;">settings</span>
|
|
</div>
|
|
`;
|
|
|
|
const existingIcon = clone.querySelector("div.fill_var\\(--md-sys-color-on-surface\\)");
|
|
if (existingIcon) {
|
|
existingIcon.replaceWith(settingsBtn);
|
|
} else {
|
|
clone.prepend(settingsBtn);
|
|
}
|
|
|
|
const wrapper = document.createElement("div");
|
|
wrapper.style.cssText = "display: flex; flex-direction: column;";
|
|
|
|
const panel = buildPanel();
|
|
|
|
settingsBtn.addEventListener("click", e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
panel.style.display = panel.style.display === "flex" ? "none" : "flex";
|
|
});
|
|
|
|
clone.addEventListener("click", e => {
|
|
if (settingsBtn.contains(e.target)) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
window.__headlinerActive = !window.__headlinerActive;
|
|
localStorage.setItem("headlinerActive", window.__headlinerActive);
|
|
applyActiveStyle(clone);
|
|
});
|
|
|
|
applyActiveStyle(clone);
|
|
|
|
wrapper.appendChild(clone);
|
|
wrapper.appendChild(panel);
|
|
|
|
btn.parentNode.insertBefore(wrapper, btn.nextSibling);
|
|
});
|
|
}
|
|
|
|
tryInject();
|
|
|
|
const observer = new MutationObserver(() => tryInject());
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
})();
|