mirror of
https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git
synced 2026-04-14 12:48:27 +10:00
435 lines
25 KiB
HTML
435 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>App Installer Settings</title>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script type="text/javascript" src="../../js/module.js"></script>
|
||
<script type="text/javascript" src="../../js/polyfill-ie.js"></script>
|
||
<link rel="stylesheet" href="../../libs/winjs/2.0/css/ui-light.css" id="winjs-style">
|
||
<script type="text/javascript" src="../../libs/winjs/1.0/js/base.js"></script>
|
||
<script type="text/javascript" src="../../libs/winjs/1.0/js/ui.js"></script>
|
||
<script type="text/javascript" src="../../js/color.js"></script>
|
||
<script type="text/javascript" src="../../js/promise.js"></script>
|
||
<script type="text/javascript" src="../../js/bridge.js"></script>
|
||
<script type="text/javascript" src="../../js/dpimodes.js"></script>
|
||
<script type="text/javascript" src="../../js/resources.js"></script>
|
||
<script type="text/javascript" src="../../js/animation.js"></script>
|
||
<link rel="stylesheet" href="../../fonts/fonts.css">
|
||
<script type="text/javascript" src="../../js/event.js"></script>
|
||
<script type="text/javascript" src="../../js/tileback.js"></script>
|
||
<script type="text/javascript" src="../../js/load.js"></script>
|
||
<script type="text/javascript" src="../../js/params.js"></script>
|
||
<link rel="stylesheet" type="text/css" href="../../libs/msgbox/msgbox.css">
|
||
<script type="text/javascript" src="../../libs/msgbox/msgbox.js"></script>
|
||
<link rel="stylesheet" type="text/css" href="../../libs/toggle/toggle.css">
|
||
<script type="text/javascript" src="../../libs/toggle/toggle.js"></script>
|
||
<script type="text/javascript" src="../../js/init.js"></script>
|
||
<script type="text/javascript" src="../initsame.js"></script>
|
||
<link rel="stylesheet" type="text/css" href="../page.css">
|
||
<script type="text/javascript" src="preinit.js"></script>
|
||
<script type="text/javascript" src="items.js"></script>
|
||
<script type="text/javascript" src="init.js"></script>
|
||
<script type="text/javascript" src="../../js/theme.js"></script>
|
||
<link href="../../libs/codemirror/5.0.0/lib/codemirror.css" rel="stylesheet" />
|
||
<link href="../../libs/codemirror/5.0.0/theme/neat.css" rel="stylesheet" />
|
||
<link href="../../libs/codemirror/5.0.0/addon/hint/show-hint.css" rel="stylesheet" />
|
||
<script src="../../libs/codemirror/5.0.0/lib/codemirror.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/mode/css/css.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/edit/matchbrackets.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/edit/closebrackets.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/search/searchcursor.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/search/match-highlighter.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/search/matchesonscrollbar.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/comment/continuecomment.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/comment/comment.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/fold/foldcode.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/fold/foldgutter.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/fold/brace-fold.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/fold/comment-fold.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/fold/xml-fold.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/hint/show-hint.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/hint/css-hint.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/display/panel.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/lint/lint.js"></script>
|
||
<script src="../../libs/codemirror/5.0.0/addon/lint/css-lint.js"></script>
|
||
<style>
|
||
.markdown-style {
|
||
font-weight: normal;
|
||
font-size: 16px;
|
||
-ms-user-select: element;
|
||
}
|
||
|
||
.markdown-style h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.markdown-style h2 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.markdown-style p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.markdown-style ul {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.markdown-style li {
|
||
font-size: 16px;
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
<style type="text/css">
|
||
.CodeMirror,
|
||
.CodeMirror * {
|
||
font-family: 'Fixedsys Excelsior 3.01', Consolas, Monaco, 'Andale Mono', monospace, 'Fixedsys Excelsior 1.2', 'Fixedsys Excelsior 1.01', 'Fixedsys Excelsior 1.1', 'Fixedsys Excelsior 3.1', 'Microsoft YaHei', 'Lucida Console', 'Courier New', 'Courier', 'Lucida Sans Typewriter', 'Lucida Sans Typewriter', 'Bitstream Vera Sans Mono', 'Bitstream Vera Sans', 'DejaVu Sans Mono', 'DejaVu Sans', 'Verdana', 'Arial', sans-serif, 'Fixedsys';
|
||
}
|
||
|
||
.CodeMirror {
|
||
box-sizing: border-box;
|
||
border-top: 1px solid black;
|
||
border-bottom: 1px solid black;
|
||
}
|
||
|
||
.editor-container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
justify-content: flex-start;
|
||
position: relative;
|
||
width: 100%;
|
||
height: calc(100% - 120px);
|
||
min-height: 100px;
|
||
max-height: 400px;
|
||
}
|
||
|
||
.editor-container * {
|
||
/* transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); */
|
||
}
|
||
|
||
.editor-editblock {
|
||
width: calc(60% - 10px);
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.editor-editblock .CodeMirror {
|
||
height: calc(100% - 20px) !important;
|
||
}
|
||
|
||
.editor-filelist {
|
||
width: 40%;
|
||
margin-left: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.css-editor-filedir {
|
||
box-sizing: border-box;
|
||
border: 2px solid #ccc;
|
||
padding: 3px;
|
||
overflow-y: auto;
|
||
height: calc(100% - 20px);
|
||
width: 100%;
|
||
}
|
||
|
||
.filedir-rootdir {
|
||
box-sizing: border-box;
|
||
width: 100% !important;
|
||
min-width: 0;
|
||
}
|
||
|
||
.filelist-container {
|
||
box-sizing: border-box;
|
||
height: calc(100% - 40px);
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
padding: 0px;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.filelist-container li {
|
||
padding: 5px 0 5px 5px;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.filelist-container li::before {
|
||
font-family: 'Segoe UI Symbol', 'Segoe MDL2 Assets', 'Segoe Fluent Icons', Wingdings;
|
||
}
|
||
|
||
.filelist-container li[role=file]::before {
|
||
content: '';
|
||
}
|
||
|
||
.filelist-container li[role=dir]::before {
|
||
content: '';
|
||
}
|
||
|
||
.filelist-container li:hover {
|
||
background-color: rgba(142, 185, 255, 0.499);
|
||
}
|
||
|
||
.filelist-container li:active {
|
||
background-color: rgba(101, 183, 255, 0.499);
|
||
}
|
||
</style>
|
||
<script>
|
||
function onBack_CssEditPage() {
|
||
if (typeof saveCurrentEdit !== "undefined") saveCurrentEdit();
|
||
Bridge.Frame.callEvent("InvokeBackPage");
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="settingpage" class="pagecontainer full">
|
||
<div class="page full guide">
|
||
<aside class="top win-ui-dark">
|
||
<header aria-label="Header content" role="banner" class="titlebanner" id="pagebanner" style="height: 120px;">
|
||
<button id="back" class="win-backbutton pagetitlewb-backbutton" onclick="onBack_CssEditPage ()" style="margin-left: 20px; transform: scale(0.72);"></button>
|
||
<h2 class="titlearea win-type-ellipsis" id="apptitle" style="">
|
||
<span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;">编辑自定义 CSS 样式</span>
|
||
</h2>
|
||
</header>
|
||
</aside>
|
||
<main class="main bottom padding">
|
||
<div class="bottom-compensate" id="page-edit-css" style="height: 100%;">
|
||
<p>在这里，编辑自定义的 CSS 样式。</p>
|
||
<label id="theme-custom-color">当前主题颜色基于</label>
|
||
<script>
|
||
(function() {
|
||
"use strict";
|
||
var sect = document.getElementById("theme-custom-color");
|
||
var toggle = new Toggle();
|
||
toggle.create();
|
||
toggle.parent = sect;
|
||
toggle.setColor("#202020");
|
||
toggle.showlabel = true;
|
||
toggle.setStatusText("深色", "浅色");
|
||
toggle.addEventListener("change", function() {
|
||
saveCurrentEdit();
|
||
isSwitching = true;
|
||
Theme.setCustomColor(toggle.checked ? Theme.ColorType.dark : Theme.ColorType.light);
|
||
reloadCurrentEdit();
|
||
isSwitching = false;
|
||
});
|
||
OnLoad.add(function() {
|
||
setTimeout(function() {
|
||
isSwitching = true;
|
||
toggle.checked = Theme.customColor === Theme.ColorType.dark;
|
||
reloadCurrentEdit();
|
||
isSwitching = false;
|
||
}, 100);
|
||
});
|
||
})();
|
||
</script>
|
||
<br>
|
||
<div class="editor-container">
|
||
<div class="editor-editblock">
|
||
<label for="css-editor">编辑样式</label>
|
||
<textarea id="css-editor" name="code"></textarea>
|
||
<script>
|
||
var editor = document.getElementById("css-editor");
|
||
var storage = Bridge.External.Storage;
|
||
var path = storage.path;
|
||
editor.codeMirror = CodeMirror.fromTextArea(editor, {
|
||
lineNumbers: true,
|
||
matchBrackets: true,
|
||
continueComments: "Enter",
|
||
extraKeys: {
|
||
"Ctrl-Q": "toggleComment",
|
||
"Ctrl-Space": "autocomplete"
|
||
},
|
||
mode: "css",
|
||
lineWrapping: true,
|
||
indentUnit: 4,
|
||
indentWithTabs: true,
|
||
smartIndent: true,
|
||
autoCloseBrackets: true,
|
||
foldGutter: true,
|
||
styleActiveLine: true,
|
||
theme: "neat",
|
||
});
|
||
var cm = editor.codeMirror;
|
||
window.isSwitching = false;
|
||
|
||
function saveCurrentEdit() {
|
||
var currentColor = Theme.customColor;
|
||
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
|
||
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom\\custom.css").replace("{colortype}", colorStr);
|
||
var cssFile = storage.getFile(customPath);
|
||
cssFile.content = editor.codeMirror.getValue();
|
||
}
|
||
var deb_sce = debounce(saveCurrentEdit, 200);
|
||
cm.on("change", function(inst, e) {
|
||
if (!isSwitching) deb_sce();
|
||
});
|
||
|
||
function reloadCurrentEdit() {
|
||
var currentColor = Theme.customColor;
|
||
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
|
||
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom\\custom.css").replace("{colortype}", colorStr);
|
||
var cssFile = storage.getFile(customPath);
|
||
var content = cssFile.content;
|
||
if (content === null || content === void 0) {
|
||
var defaultCssPath = path.combine(path.root, "html\\theme\\{colortype}\\default\\default.css").replace("{colortype}", colorStr);
|
||
var defaultCssFile = storage.getFile(defaultCssPath);
|
||
content = defaultCssFile.content;
|
||
if (content === null || content === void 0) {
|
||
content = '\n/* Installer */\n\n.page {\n background-color: #F3F3F3;\n}\n.page.splash {\n background-color: #0078d7;\n}\n.page .content.loading,\n.page .content.main,\n.page .progress,\n.page .reason p,\n.page .controls .checkbox {\n color: black;\n}\n.page .content.main .pkgapplabel {\n color: #0078d7;\n}\n\n/* App Launch List */\n\n.applist-font-title {\n color: black;\n}\n.applist-font-text {\n color: black;\n}\n.applist-window {\n border: 2px solid rgb(42, 42, 42);\n background-color: white;\n}\n.applist-title {\n background: white;\n}\n.applist-control {\n background: white;\n}\n.applist-list-item {\n background-color: rgba(0, 255, 255, 0);\n}\n.applist-list-item:hover {\n background-color: rgb(222, 222, 222);\n}\n.applist-item-picbox {\n background-color: #001020;\n}\n.applist-item-img-border {\n border: 1px solid rgba(254, 254, 254, 0.1);\n}\n.win10.applist-window {\n border: 1px solid #ccc;\n}';
|
||
} else {
|
||
var idx = content.indexOf("*/");
|
||
if (idx >= 0 && idx < content.length / 2) {
|
||
content = content.substring(idx + 2);
|
||
}
|
||
}
|
||
var head = "/* The following content is sample content and is for reference only. */";
|
||
editor.codeMirror.setValue(head + content);
|
||
} else {
|
||
editor.codeMirror.setValue(content);
|
||
}
|
||
}
|
||
</script>
|
||
</div>
|
||
<div class="editor-filelist">
|
||
<label>自定义文件目录</label>
|
||
<div class="css-editor-filedir">
|
||
<input type="text" class="filedir-rootdir" style="direction: rtl; text-align: left;">
|
||
<ul class="filelist-container">
|
||
</ul>
|
||
<script>
|
||
(function() {
|
||
var rootDir = document.querySelector(".css-editor-filedir .filedir-rootdir");
|
||
var fileList = document.querySelector(".css-editor-filedir .filelist-container");
|
||
var storage = Bridge.External.Storage;
|
||
var path = storage.path;
|
||
var currentColor = Theme.customColor;
|
||
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
|
||
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
|
||
rootDir.value = customPath;
|
||
var eventutil = Windows.UI.Event.Util;
|
||
|
||
function refreshFileList() {
|
||
fileList.innerHTML = "";
|
||
var root = rootDir.value;
|
||
var dirs = JSON.parse(path.enumDirsToJson(root, false, false, false));
|
||
dirs.unshift("..");
|
||
var files = JSON.parse(path.enumFilesToJson(root, "*.*", false, false, false));
|
||
for (var i = 0; i < dirs.length; i++) {
|
||
var li = document.createElement("li");
|
||
li.setAttribute("role", "dir");
|
||
li.textContent = dirs[i];
|
||
fileList.appendChild(li);
|
||
eventutil.addEvent(li, "dblclick", function(e) {
|
||
var self = this;
|
||
rootDir.value = path.combine(root, self.textContent);
|
||
refreshFileList();
|
||
});
|
||
}
|
||
for (var i = 0; i < files.length; i++) {
|
||
var li = document.createElement("li");
|
||
li.setAttribute("role", "file");
|
||
li.textContent = files[i];
|
||
fileList.appendChild(li);
|
||
eventutil.addEvent(li, "dblclick", function(e) {
|
||
var self = this;
|
||
var filePath = path.combine(root, self.textContent);
|
||
editor.codeMirror.replaceSelection(self.textContent);
|
||
});
|
||
eventutil.addEvent(li, "click", function(e) {
|
||
var self = this;
|
||
var filePath = path.combine(root, self.textContent);
|
||
var objele = document.createElement("object");
|
||
objele.data = filePath;
|
||
var tipele = document.createElement("param");
|
||
tipele.name = "type";
|
||
tipele.value = "text/html";
|
||
tipele.textContent = "不受 Internet Explorer 支持显示的资源。";
|
||
objele.appendChild(tipele);
|
||
objele.style.maxWidth = "100%";
|
||
var title = Bridge.String.format("预览", this.textContent);
|
||
var contentele = document.createElement("div");
|
||
var filenameele = document.createElement("p");
|
||
filenameele.textContent = this.textContent;
|
||
contentele.appendChild(filenameele);
|
||
contentele.style.width = "100%";
|
||
contentele.appendChild(objele);
|
||
messageBoxAsync(contentele, title).then(function() {
|
||
if (typeof objele.remove === "function") {
|
||
objele.remove();
|
||
} else if (typeof objele.removeNode === "function") {
|
||
objele.removeNode(true);
|
||
} else if (typeof objele.parentNode.removeChild === "function") {
|
||
objele.parentNode.removeChild(objele);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
OnLoad.add(function() {
|
||
setTimeout(refreshFileList, 100);
|
||
});
|
||
window.refreshFileList = refreshFileList;
|
||
})();
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<h3>向自定义样式中添加自定义文件</h3>
|
||
<p>在自定义样式文件目录中，可以添加图片、音效等文件，这些文件将会用于自定义样式中。</p>
|
||
<p>添加的文件将在文件列表中显示。双击目录会跳转到该目录，双击文件会将文件名插入到编辑器中。</p>
|
||
<p>如果想要删除文件，请在资源管理器中直接删除。</p>
|
||
<p>不建议用过大分辨率的图片，因为可能会导致页面加载变慢，而且也用不到。也不要用太大的视频和音频。这些资源都会影响加载速度和内存占用。</p>
|
||
<button id="custom-addfile">添加</button>
|
||
<script>
|
||
var customAddFileBtn = document.getElementById("custom-addfile");
|
||
customAddFileBtn.addEventListener("click", function() {
|
||
this.disabled = true;
|
||
var storage = Bridge.External.Storage;
|
||
var path = storage.path;
|
||
var currentColor = Theme.customColor;
|
||
var colorStr = currentColor === Theme.ColorType.dark ? "dark" : "light";
|
||
var customPath = path.combine(path.root, "html\\theme\\{colortype}\\custom").replace("{colortype}", colorStr);
|
||
var supportFilterFormat = "{0}|" +
|
||
"*.jpg;*.png;*.jpeg;*.bmp;*.gif;*.ico;*.tiff;*.svg|" +
|
||
"{1}|" +
|
||
"*.mp3;*.wav;*.wma;*.aac;*.m4a|" +
|
||
"{2}|" +
|
||
"*.mp4;*.avi;*.wmv|" +
|
||
"{3}|" +
|
||
"*.*";
|
||
var getfile = JSON.parse(Bridge.External.SelectFilesToJSON(supportFilterFormat, 0x00080000 | 0x00000800, "请选择文件", null));
|
||
for (var i = 0; i < getfile.length; i++) {
|
||
var srcfilepath = getfile[i];
|
||
var filename = path.getName(srcfilepath);
|
||
var fsize = Bridge.External.GetFileSize(srcfilepath);
|
||
if (fsize < 0 || fsize > 104857600) { // 100MB 限制
|
||
messageBoxAsync("文件大小不符合要求，请选择尺寸较小的文件（不超过100MB）。", "文件无法复制");
|
||
} else {
|
||
var destfilepath = path.combine(customPath, filename);
|
||
Bridge.External.ShellCopyFile(srcfilepath, destfilepath);
|
||
refreshFileList();
|
||
}
|
||
}
|
||
this.disabled = false;
|
||
});
|
||
</script>
|
||
<br><br>
|
||
<h3>导出</h3>
|
||
<p>在这里，您可以导出自己的自定义样式，以便分享给其他人。</p>
|
||
<button id="custom-export">导出</button>
|
||
<div class="bottom-compensate"></div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |