import { DOMUtils, injectDocumentTime, log, utils } from "@/env";
import type { PopsPanelContentConfig } from "@whitesev/pops/dist/types/src/components/panel/types/index.js";
import { UIInfo } from "./../components/ui-info";
import { CommonUtil } from "@components/utils/CommonUtil";
import { StorageApi } from "@/main/StorageApi";
import { GMTotal } from "@/main/GMTotal";
import { PanelKeyConfig } from "../panel-key-config";
import { UIOwn } from "@components/setting/components/ui-own";
type ApiSupportUIConfig = {
name: string;
isSupport: boolean;
leftTargetSelector?: string;
};
export const Component_Common = (): PopsPanelContentConfig => {
/** 支持的api名称列表 */
let supportApiNameList: ApiSupportUIConfig[] = [];
/** 不支持的api名称列表 */
let notSupportApiNameList: ApiSupportUIConfig[] = [];
Object.keys(GMTotal).forEach((keyName) => {
let value = GMTotal[keyName as keyof typeof GMTotal];
let apiName = value.getApiName();
let isSupport = value.isSupport();
let apiAsyncInfo = value.getAsyncApiOption();
if (isSupport) {
supportApiNameList.push({
name: apiName,
isSupport: isSupport,
});
} else {
notSupportApiNameList.push({
name: apiName,
isSupport: isSupport,
});
}
if (apiAsyncInfo) {
if (apiAsyncInfo.isSupport) {
supportApiNameList.push({
name: apiAsyncInfo.name,
isSupport: apiAsyncInfo.isSupport,
leftTargetSelector: "#aside-" + apiName,
});
} else {
notSupportApiNameList.push({
name: apiAsyncInfo.name,
isSupport: apiAsyncInfo.isSupport,
leftTargetSelector: "#aside-" + apiName,
});
}
}
});
/**
* create element
*/
let createFeatureItem = (config: ApiSupportUIConfig) => {
let $item = DOMUtils.createElement("div", {
className: "gm-api-features-item",
innerHTML: /*html*/ `
${config.name}
${
config.isSupport
? /*html*/ `
`
: /*html*/ `
`
}
`,
});
DOMUtils.on($item, "click", (event) => {
DOMUtils.preventEvent(event);
let shadowRoot = $item.getRootNode() as ShadowRoot;
let selector = utils.isNotNull(config.leftTargetSelector) ? config.leftTargetSelector : "#aside-" + config.name;
let $left = shadowRoot.querySelector(selector);
if ($left) {
$left.click();
$left.scrollIntoView({ behavior: "smooth" });
}
});
return $item;
};
return {
id: "component-common",
title: "通用",
scrollToDefaultView: true,
isDefault() {
return StorageApi.get(PanelKeyConfig.asideLastVisit) === "component-common";
},
clickCallback(data) {
StorageApi.set(PanelKeyConfig.asideLastVisit, "component-common");
},
views: [
{
type: "container",
text: "@run-at document-start
注：注入速度等级越低，注入的速度越快
范围：0~4",
views: [
UIInfo(() => {
return {
text: CommonUtil.escapeHtml(injectDocumentTime),
tag: "info",
};
}),
],
},
{
type: "container",
text: "特性",
afterAddToUListCallBack(formConfig, container) {
container.formHeaderDivElement!.style.fontSize = "1.2em";
container.formHeaderDivElement!.style.fontWeight = "700";
},
views: [],
},
{
type: "container",
text: "不支持列表",
afterAddToUListCallBack(formConfig, container) {
container.formHeaderDivElement!.style.color = "rgb(216, 30, 6)";
container.formHeaderDivElement!.style.fontWeight = "600";
if (notSupportApiNameList.length === 0) {
container.formContainerListElement?.remove();
}
},
views: [
UIOwn(($li) => {
const $container = DOMUtils.createElement("div", {
className: "gm-api-features-not-support",
});
const $fragment = document.createDocumentFragment();
notSupportApiNameList.forEach((config) => {
$fragment.append(createFeatureItem(config));
});
$container.appendChild($fragment);
$li.appendChild($container);
return $li;
}),
],
},
{
type: "container",
text: "支持列表",
afterAddToUListCallBack(formConfig, container) {
container.formHeaderDivElement!.style.fontWeight = "600";
if (supportApiNameList.length === 0) {
container.formContainerListElement?.remove();
}
},
views: [
UIOwn(($li) => {
const $container = DOMUtils.createElement("div", {
className: "gm-api-features-support",
});
const $fragment = document.createDocumentFragment();
supportApiNameList.forEach((config) => {
$fragment.append(createFeatureItem(config));
});
$container.appendChild($fragment);
$li.appendChild($container);
return $li;
}),
],
},
],
} as PopsPanelContentConfig;
};