2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

User:Iskyex/groundglass.js

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox/Safari:按住“Shift”的同时单击“刷新”,或按“Ctrl-F5”或“Ctrl-R”(Mac为“⌘-R”)
  • Google Chrome:按“Ctrl-Shift-R”(Mac为“⌘-Shift-R”)
  • Internet Explorer:按住“Ctrl”的同时单击“刷新”,或按“Ctrl-F5”
  • Opera:在“工具→首选项”中清除缓存
如果您已登录但该页面出现未登录状态,请尝试在地址栏的地址最后添加代码?_=1来访问最新页面。
添加代码后的本页地址如下:-{R|https://moegirl.icu/User:Iskyex/groundglass.js?_=1}-
(function () {
	"use strict";
})();


/**
 * 添加 palette
 */
const body = document.body;
const ul = document.querySelector("#p-views").querySelector("ul");
const palette = document.createElement("li");
palette.id = "palette";
palette.title = "配置面板";
palette.innerHTML = "<span></span><div class='what-panel'><div class='what-mode' title='日夜模式'><span></span></div><div class='what-theme' title='主题颜色'><span></span></div><div class='what-heimu' title='黑幕显隐'><span></span></div></div>";

ul.appendChild(palette);


/**
 * 显示 panel
 */
const panel = palette.querySelector(".what-panel");
palette.addEventListener("click", function () {
	panel.classList.toggle("visible");
	event.stopPropagation();
});


/**
 * 阻止点击冒泡
 */
panel.addEventListener("click", function () {
	event.stopPropagation();
});


/**
 * 切换黑幕
 */
const heimu = panel.querySelector(".what-heimu");
heimu.addEventListener("click", function () {
	localStorage.setItem("what-heimu", body.classList.toggle("heimu_toggle_on"));
});

function getHeimu() {
	const whatHeimu = localStorage.getItem("what-heimu");
	if (whatHeimu === "true") {
		body.classList.add("heimu_toggle_on");
	}
}


/**
 * 切换颜色
 */
const whatThemeColor = ["#95a5a6", "#8fbc8f", "#ffcc66", "#decafb", "#ff6666", "#81c7d4"];
const root = document.documentElement;
const theme = panel.querySelector(".what-theme");
var whatThemeColorIndex;
var notFirstTimeChangeThemeColor = false;

function getIndex() {
	const localThemeColorIndex = parseInt(localStorage.getItem("what-theme-color-index"));
	if (localThemeColorIndex && localThemeColorIndex < whatThemeColor.length) {
		whatThemeColorIndex = localThemeColorIndex;
	} else {
		whatThemeColorIndex = 0;
	}
	notFirstTimeChangeThemeColor = true;
}

function changeThemeColor() {
	if (notFirstTimeChangeThemeColor) {
		whatThemeColorIndex++;
		if (whatThemeColorIndex >= whatThemeColor.length) {
			whatThemeColorIndex = 0;
		}
		localStorage.setItem("what-theme-color-index", whatThemeColorIndex);
	} else {
		getIndex();
	}
	root.style.setProperty("--theme-color", whatThemeColor[whatThemeColorIndex]);
}

// 给 theme 按钮添加
theme.addEventListener("click", changeThemeColor);

/**
 * 切换日夜
 */

const mode = panel.querySelector(".what-mode");
const modeIcon = mode.querySelector("span");

mode.addEventListener("click", function () {
	modeIcon.classList.add("icon-spin");
	localStorage.setItem("what-dark-mode-on", body.classList.toggle("dark-mode"));
});

mode.addEventListener("animationend", function () {
	modeIcon.classList.toggle("dark");
	modeIcon.classList.remove("icon-spin");
});

function getMode() {
	if (localStorage.getItem("what-dark-mode-on") === "true") {
		body.classList.add("dark-mode");
		modeIcon.classList.add("dark");
	}
}


/**
 * 全局
 */

window.addEventListener("click", function () {
	// 关闭 panel
	if (panel.classList.contains("visible")) {
		panel.classList.remove("visible");
	}
});
// 阻止目录滚动冒泡
const toc = document.querySelector(".toc");
console.log(toc);
if (toc !== undefined && toc !== null) {
	toc.addEventListener("wheel", function () {
		event.stopPropagation();
	});
}


/**
 * 脚本载入时执行
 */
changeThemeColor();
getHeimu();
getMode();