mirror of
https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git
synced 2026-04-11 17:57:19 +10:00
670 lines
37 KiB
HTML
670 lines
37 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>
|
|
<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>
|
|
<link rel="stylesheet" type="text/css" href="../page.css">
|
|
<link rel="stylesheet" type="text/css" href="../subpage.css">
|
|
<script type="text/javascript" src="preinit.js"></script>
|
|
<script type="text/javascript" src="initsame.js"></script>
|
|
<script type="text/javascript" src="../../js/theme.js"></script>
|
|
<style>
|
|
.win-settings-section {
|
|
transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
|
|
overflow-y: hidden;
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.settings-listview-h {
|
|
width: 100%;
|
|
height: 200px;
|
|
max-height: 410px;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
display: -ms-flexbox;
|
|
-ms-flex-direction: column;
|
|
-ms-flex-wrap: wrap;
|
|
-ms-flex-line-pack: start;
|
|
/* align-content */
|
|
-ms-flex-pack: start;
|
|
/* justify-content */
|
|
-ms-flex-align: start;
|
|
/* align-items */
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
|
|
.settings-listview-item {
|
|
width: 175px;
|
|
height: 175px;
|
|
border: 3px solid transparent;
|
|
transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
|
|
box-sizing: border-box;
|
|
margin: 0 10px 10px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.settings-listview-item p {
|
|
padding: 0 8px;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.settings-listview-item iframe {
|
|
pointer-events: none;
|
|
height: 133px;
|
|
}
|
|
|
|
.settings-listview-item:hover {
|
|
background-color: rgba(230, 230, 230, 1);
|
|
background-color: rgba(0, 179, 255, 0.225);
|
|
}
|
|
|
|
.settings-listview-item:active {
|
|
transform: scale(0.96);
|
|
background-color: rgba(204, 204, 204, 1);
|
|
background-color: rgba(0, 174, 255, 0.484);
|
|
}
|
|
|
|
.settings-listview-item.selected:hover {
|
|
background-color: rgba(187, 187, 187, 1);
|
|
background-color: rgba(0, 179, 255, 0.407);
|
|
}
|
|
|
|
.settings-listview-item:focus {
|
|
border-color: rgba(0, 118, 215, 0.275);
|
|
}
|
|
|
|
.settings-listview-item.selected:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-style: solid;
|
|
border-width: 4px;
|
|
border-color: rgb(119, 119, 119);
|
|
border-color: rgb(0, 172, 255);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.settings-listview-item.selected:after {
|
|
content: "";
|
|
font-family: "Segoe UI Symbol", Symbols;
|
|
color: white;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: auto;
|
|
left: auto;
|
|
right: 0;
|
|
border-left: 0px solid rgba(0, 0, 0, 0);
|
|
border-right: 30px solid rgb(119, 119, 119);
|
|
border-top: 0px solid rgba(0, 0, 0, 0);
|
|
border-bottom: 30px solid rgba(0, 0, 0, 0);
|
|
border-right: 30px solid rgb(0, 172, 255);
|
|
z-index: 11;
|
|
width: 0;
|
|
height: 0;
|
|
text-indent: 14px;
|
|
font-size: 11px;
|
|
line-height: 22px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-content: flex-end;
|
|
justify-content: flex-start;
|
|
display: -ms-flexbox;
|
|
-ms-flex-direction: column;
|
|
-ms-flex-wrap: nowrap;
|
|
-ms-flex-line-pack: end;
|
|
/* align-content: flex-end */
|
|
-ms-flex-pack: start;
|
|
/* justify-content: flex-start */
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
try {
|
|
window.parent.setItemHighlight("theme");
|
|
} catch (e) {}
|
|
try {
|
|
messageBoxAsync = window.parent.messageBoxAsync;
|
|
} catch (e) {}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="pagecontainer full pagesection">
|
|
<div class="section padding">
|
|
<div class="bottom-compensate">
|
|
<h2 id="page-title" data-res-fromfile="publicRes (102)"></h2>
|
|
<div class="win-settings-section">
|
|
<br>
|
|
<label for="theme-mode" data-res-fromfile="publicRes (145)"></label><br>
|
|
<select id="theme-mode">
|
|
<option value="Theme.ThemeType.light" data-res-fromfile="publicRes (146)"></option>
|
|
<option value="Theme.ThemeType.dark" data-res-fromfile="publicRes (147)"></option>
|
|
<option value="Theme.ThemeType.auto" data-res-fromfile="publicRes (148)"></option>
|
|
<option value="Theme.ThemeType.time" data-res-fromfile="publicRes (149)"></option>
|
|
<option value="Theme.ThemeType.custom" data-res-fromfile="publicRes (150)"></option>
|
|
</select>
|
|
<script>
|
|
function refreshSectionDisplay() {
|
|
var timeSect = document.getElementById("item-time");
|
|
var customSect = document.getElementById("item-custom-theme");
|
|
var themeSect = document.getElementById("item-theme");
|
|
var customThemeSect = document.getElementById("item-custom-theme-edit");
|
|
switch (Theme.getType()) {
|
|
case Theme.ThemeType.time:
|
|
timeSect.style.height = timeSect.scrollHeight + "px";
|
|
customSect.style.height = "0px";
|
|
timeSect.style.opacity = "1";
|
|
customSect.style.opacity = "0";
|
|
themeSect.style.height = themeSect.scrollHeight + "px";
|
|
customThemeSect.style.height = "0px";
|
|
break;
|
|
case Theme.ThemeType.custom:
|
|
customSect.style.height = customSect.scrollHeight + "px";
|
|
timeSect.style.height = "0px";
|
|
timeSect.style.opacity = "0";
|
|
customSect.style.opacity = "1";
|
|
themeSect.style.height = "0px";
|
|
customThemeSect.style.height = customThemeSect.scrollHeight + "px";
|
|
break;
|
|
default:
|
|
case Theme.ThemeType.light:
|
|
case Theme.ThemeType.dark:
|
|
case Theme.ThemeType.auto:
|
|
timeSect.style.height = "0px";
|
|
customSect.style.height = "0px";
|
|
timeSect.style.opacity = "0";
|
|
customSect.style.opacity = "0";
|
|
themeSect.style.height = themeSect.scrollHeight + "px";
|
|
customThemeSect.style.height = "0px";
|
|
break;
|
|
}
|
|
}
|
|
Windows.UI.Event.Util.addEvent(document.getElementById("theme-mode"), "change", function() {
|
|
Theme.setType(eval(document.getElementById("theme-mode").value));
|
|
refreshSectionDisplay();
|
|
});
|
|
OnLoad.add(function() {
|
|
var thememode = document.getElementById("theme-mode");
|
|
var valuestr = "Theme.ThemeType.";
|
|
switch (Theme.getType()) {
|
|
case Theme.ThemeType.light:
|
|
valuestr += "light";
|
|
break;
|
|
case Theme.ThemeType.dark:
|
|
valuestr += "dark";
|
|
break;
|
|
case Theme.ThemeType.auto:
|
|
valuestr += "auto";
|
|
break;
|
|
case Theme.ThemeType.time:
|
|
valuestr += "time";
|
|
break;
|
|
case Theme.ThemeType.custom:
|
|
valuestr += "custom";
|
|
break;
|
|
}
|
|
thememode.value = valuestr;
|
|
setTimeout(refreshSectionDisplay, 100);
|
|
});
|
|
</script>
|
|
<br>
|
|
</div>
|
|
<div class="win-settings-section" id="item-time">
|
|
<br>
|
|
<label data-res-fromfile="publicRes (151)"></label>
|
|
<div class="win-settings-row">
|
|
<div class="win-settings-label" style="font-weight: normal;" data-res-fromfile="publicRes (152)"></div>
|
|
<div class="win-settings-control">
|
|
<div data-win-control="WinJS.UI.TimePicker" data-win-options="{ hour: 9, minute: 0, clock: '24HourClock' }" id="theme-day-time">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-settings-row">
|
|
<div class="win-settings-label" style="font-weight: normal;" data-res-fromfile="publicRes (153)"></div>
|
|
<div class="win-settings-control">
|
|
<div data-win-control="WinJS.UI.TimePicker" data-win-options="{ hour: 18, minute: 0, clock: '24HourClock' }" id="theme-night-time">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var dayTime = document.getElementById("theme-day-time");
|
|
var nightTime = document.getElementById("theme-night-time");
|
|
dayTime.addEventListener("change", function() {
|
|
Theme.setDayTime(dayTime.winControl.current);
|
|
});
|
|
nightTime.addEventListener("change", function() {
|
|
Theme.setNightTime(nightTime.winControl.current);
|
|
});
|
|
OnLoad.add(function() {
|
|
dayTime.winControl.current = Theme.dayTime;
|
|
nightTime.winControl.current = Theme.nightTime;
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="win-settings-section" id="item-custom-theme">
|
|
<br>
|
|
<label data-res-fromfile="publicRes (154)"></label><span>: </span><span id="custom-color-mode-display"></span><br>
|
|
<script>
|
|
(function() {
|
|
var sect = document.getElementById("item-custom-theme");
|
|
var toggleForColorMode = new Toggle();
|
|
toggleForColorMode.create();
|
|
toggleForColorMode.parent = sect;
|
|
toggleForColorMode.setColor("#202020");
|
|
toggleForColorMode.showlabel = true;
|
|
toggleForColorMode.setStatusText(getPublicRes(155), getPublicRes(156));
|
|
toggleForColorMode.addEventListener("change", function() {
|
|
Theme.setCustomColor(toggleForColorMode.checked ? Theme.ColorType.dark : Theme.ColorType.light);
|
|
refreshCustomPreview();
|
|
});
|
|
OnLoad.add(function() {
|
|
toggleForColorMode.checked = Theme.customColor === Theme.ColorType.dark;
|
|
});
|
|
})();
|
|
</script>
|
|
</div>
|
|
<div class="win-settings-section" id="item-theme"> <br>
|
|
<h3 data-res-fromfile="publicRes (157)"></h3>
|
|
<p data-res-fromfile="publicRes (158)"></p>
|
|
<div class="settings-listview-h" id="light-theme-list"></div>
|
|
<p data-res-fromfile="publicRes (159)"></p>
|
|
<div class="settings-listview-h" id="dark-theme-list"></div>
|
|
<script>
|
|
var storage = Bridge.External.Storage;
|
|
var path = storage.Path;
|
|
var config = Bridge.External.Config;
|
|
var themeFolder = path.combine(path.root, "html\\theme");
|
|
var themeLightFolder = path.combine(themeFolder, "light");
|
|
var themeDarkFolder = path.combine(themeFolder, "dark");
|
|
var previewHtml = path.combine(path.root, "html\\preview.html");
|
|
var themePath = path.combine(path.root, "html\\theme\\{colormode}\\{themeid}\\{themeid}.css");
|
|
var themeInfoPath = path.combine(path.root, "html\\theme\\{colormode}\\{themeid}\\themeinfo.json");
|
|
|
|
function createThemeItem(id, color) {
|
|
var item = document.createElement("div");
|
|
item.className = "settings-listview-item";
|
|
item.setAttribute("data-theme-id", id);
|
|
item.setAttribute("data-item-color", color);
|
|
var iframe = document.createElement("iframe");
|
|
iframe.width = "100%";
|
|
/*iframe.onload = function(e) {
|
|
iframe.contentWindow.Theme.currentColor = color;
|
|
iframe.contentWindow.Theme.currentTheme = id;
|
|
};*/
|
|
setTimeout(function(iframenode, iframesrc) {
|
|
iframenode.src = iframesrc;
|
|
}, 0, iframe, previewHtml + "?color=" + color + "&id=" + id);
|
|
// iframe.src = previewHtml + "?color=" + color + "&id=" + id;
|
|
try {
|
|
iframe.defer = true;
|
|
iframe.loading = "lazy";
|
|
iframe.async = true;
|
|
} catch (e) {}
|
|
item.appendChild(iframe);
|
|
var colorstr = "light";
|
|
if (color === Theme.ColorType.dark) colorstr = "dark";
|
|
if (!path.fileExist(themeInfoPath.replace("{colormode}", colorstr).replace("{themeid}", id))) return null;
|
|
var themeinfo = storage.getFile(themeInfoPath.replace("{colormode}", colorstr).replace("{themeid}", id));
|
|
var themeinfojson = {};
|
|
try {
|
|
themeinfojson = JSON.parse(themeinfo.content);
|
|
themeinfojson.Id;
|
|
themeinfojson.DisplayName;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
var displaNameLabel = document.createElement("p");
|
|
displaNameLabel.textContent = themeinfojson.DisplayName;
|
|
if (Bridge.NString.empty(displaNameLabel.textContent)) displaNameLabel.textContent = id;
|
|
item.appendChild(displaNameLabel);
|
|
Windows.UI.Event.Util.addEvent(item, "click", function() {
|
|
var self = this;
|
|
var color = parseInt(self.getAttribute("data-item-color"));
|
|
var id = self.getAttribute("data-theme-id");
|
|
for (var i = 0; i < this.parentNode.children.length; i++) {
|
|
var node = this.parentNode.children[i];
|
|
if (node.classList.contains("selected")) {
|
|
node.classList.remove("selected");
|
|
}
|
|
}
|
|
this.classList.add("selected");
|
|
if (color === Theme.ColorType.dark) {
|
|
Theme.darkTheme = id;
|
|
} else {
|
|
Theme.lightTheme = id;
|
|
}
|
|
});
|
|
if (color === Theme.ColorType.dark) {
|
|
if (Theme.darkTheme === id) {
|
|
item.classList.add("selected");
|
|
}
|
|
} else {
|
|
if (Theme.lightTheme === id) {
|
|
item.classList.add("selected");
|
|
}
|
|
}
|
|
return item;
|
|
}
|
|
|
|
function eventInitList() {
|
|
var lightThemeList = document.getElementById("light-theme-list");
|
|
var darkThemeList = document.getElementById("dark-theme-list");
|
|
var lightThemeListItems = JSON.parse(path.enumSubDirsToJson(themeLightFolder, false));
|
|
var darkThemeListItems = JSON.parse(path.enumSubDirsToJson(themeDarkFolder, false));
|
|
lightThemeList.innerHTML = "";
|
|
darkThemeList.innerHTML = "";
|
|
for (var i = 0; i < lightThemeListItems.length; i++) {
|
|
var node = createThemeItem(lightThemeListItems[i], Theme.ColorType.light);
|
|
if (node) {
|
|
lightThemeList.appendChild(node);
|
|
WinJS.UI.Animation.createAddToListAnimation(lightThemeList, node).execute();
|
|
}
|
|
}
|
|
for (var i = 0; i < darkThemeListItems.length; i++) {
|
|
var node = createThemeItem(darkThemeListItems[i], Theme.ColorType.dark);
|
|
if (node) {
|
|
darkThemeList.appendChild(node);
|
|
WinJS.UI.Animation.createAddToListAnimation(darkThemeList, node).execute();
|
|
}
|
|
}
|
|
}
|
|
OnLoad.add(function() {
|
|
setTimeout(eventInitList, 0);
|
|
});
|
|
</script>
|
|
<p for="theme-loadfrom-file" data-res-fromfile="publicRes (160)"></p>
|
|
<button id="theme-loadfrom-file" data-res-fromfile="publicRes (161)"></button>
|
|
<script>
|
|
var loadFromFileBtn = document.getElementById("theme-loadfrom-file");
|
|
Windows.UI.Event.Util.addEvent(loadFromFileBtn, "click", function() {
|
|
var self = this;
|
|
var filter = "{0}|*.zip|{1}|*.*";
|
|
filter = Bridge.String.format(filter, getPublicRes(162), getPublicRes(163));
|
|
var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(164), null));
|
|
if (files.length > 0) {
|
|
var file = files[0];
|
|
try {
|
|
var tpinf = JSON.parse(Bridge.External.GetThemePkgInfo(file));
|
|
var id = tpinf.Id;
|
|
if (Bridge.NString.empty(id)) throw new Error("Invalid theme package.");
|
|
var displayName = tpinf.DisplayName;
|
|
if (Bridge.NString.empty(displayName)) throw new Error("Invalid theme package.");
|
|
var color = tpinf.Color;
|
|
if (!(Bridge.NString.equals(color, "dark") || Bridge.NString.equals(color, "light"))) throw new Error("Invalid color type.");
|
|
var author = tpinf.Author;
|
|
if (Bridge.NString.empty(author)) throw new Error("Invalid theme package.");
|
|
var version = tpinf.Version;
|
|
if (Bridge.NString.empty(version)) throw new Error("Invalid theme package.");
|
|
var description = tpinf.Description;
|
|
if (Bridge.NString.empty(description)) throw new Error("Invalid theme package.");
|
|
var buildpath = path.combine(path.root, "html\\theme\\{colormode}\\{id}").replace("{colormode}", color).replace("{id}", id);
|
|
var extractEvent = function() {
|
|
try {
|
|
Bridge.External.ExtraceThemePkg(file, buildpath);
|
|
messageBoxAsync(getPublicRes(165), getPublicRes(166), MBFLAGS.MB_OK);
|
|
eventInitList();
|
|
} catch (e) {
|
|
messageBoxAsync(getPublicRes(167) + (e.message || e), getPublicRes(168));
|
|
}
|
|
};
|
|
if (path.dirExist(buildpath)) {
|
|
messageBoxAsync(Bridge.String.format(
|
|
getPublicRes(169),
|
|
displayName, author, id, (Bridge.NString.equals(color, "dark") ? getPublicRes(155) : getPublicRes(156))
|
|
), getPublicRes(170), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
|
|
if (pressid === MBRET.IDOK) {
|
|
extractEvent();
|
|
}
|
|
});
|
|
} else {
|
|
messageBoxAsync(Bridge.String.format(
|
|
getPublicRes(171),
|
|
displayName, author, version, id, (Bridge.NString.equals(color, "dark") ? getPublicRes(155) : getPublicRes(156)), description
|
|
), getPublicRes(172), MBFLAGS.MB_OKCANCEL).done(function(pressid) {
|
|
if (pressid === MBRET.IDOK) {
|
|
extractEvent();
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
messageBoxAsync(getPublicRes(173) + (e.message || e), getPublicRes(168));
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="win-settings-section" id="item-custom-theme-edit">
|
|
<br>
|
|
<h3 data-res-fromfile="publicRes (174)"></h3>
|
|
<label data-res-fromfile="publicRes (175)"></label><br>
|
|
<iframe src="../../preview.html" id="theme-custom-preview" defer loading="lazy" async></iframe>
|
|
<br><br>
|
|
<button id="jump-editpage" data-res-fromfile="publicRes (176)"></button>
|
|
<script>
|
|
function refreshCustomPreview() {
|
|
var storage = Bridge.External.Storage;
|
|
var path = storage.Path;
|
|
var config = Bridge.External.Config;
|
|
var customcolor = Theme.customColor;
|
|
var customcolorstr = "light";
|
|
if (customcolor === Theme.ColorType.dark) customcolorstr = "dark";
|
|
var customThemePath = path.combine(path.root, "html\\theme\\{colormode}\\custom\\custom.css").replace("{colormode}", customcolorstr);
|
|
var iframe = document.getElementById("theme-custom-preview");
|
|
iframe.setAttribute("src", "../../preview.html?id=custom&color=" + customcolor);
|
|
var customColorModeDisplay = document.getElementById("custom-color-mode-display");
|
|
if (customColorModeDisplay) {
|
|
switch (customcolor) {
|
|
case Theme.ColorType.dark:
|
|
customColorModeDisplay.textContent = getPublicRes(155);
|
|
break;
|
|
case Theme.ColorType.light:
|
|
customColorModeDisplay.textContent = getPublicRes(156);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
OnLoad.add(function() {
|
|
setTimeout(refreshCustomPreview, 100);
|
|
});
|
|
Windows.UI.Event.Util.addEvent(document.getElementById("jump-editpage"), "click", function() {
|
|
window.parent.location.href = "cssedit.html";
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="win-settings-section" id="item-custom-background">
|
|
<br>
|
|
<h3 data-res-fromfile="publicRes (219)"></h3>
|
|
<p data-res-fromfile="publicRes (220)"></p>
|
|
<label data-res-fromfile="publicRes (221)"></label>
|
|
<script>
|
|
(function() {
|
|
var sect = document.getElementById("item-custom-background");
|
|
var toggle = new Toggle();
|
|
toggle.create();
|
|
toggle.parent = sect;
|
|
toggle.setColor("#202020");
|
|
toggle.showlabel = true;
|
|
var winjsres = Bridge.External.WinJsStringRes;
|
|
toggle.setStatusText(winjsres.getString("ms-resource://Microsoft.WinJS.1.0/ui/on"), winjsres.getString("ms-resource://Microsoft.WinJS.1.0/ui/off"));
|
|
toggle.addEventListener("change", function() {
|
|
var imgsect = document.getElementById("item-custom-background-image");
|
|
Theme.useCustomBackgroundImage = toggle.checked;
|
|
if (Theme.useCustomBackgroundImage) {
|
|
imgsect.style.height = imgsect.scrollHeight + "px";
|
|
} else {
|
|
imgsect.style.height = "0px";
|
|
}
|
|
});
|
|
OnLoad.add(function() {
|
|
toggle.checked = Theme.useCustomBackgroundImage;
|
|
var imgsect = document.getElementById("item-custom-background-image");
|
|
if (Theme.useCustomBackgroundImage) {
|
|
imgsect.style.height = imgsect.scrollHeight + "px";
|
|
} else {
|
|
imgsect.style.height = "0px";
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</div>
|
|
<div class="win-settings-section" id="item-custom-background-image" style="overflow-x: hidden;">
|
|
<br>
|
|
<h4 data-res-fromfile="publicRes (222)"></h4>
|
|
<p data-res-fromfile="publicRes (223)"></p>
|
|
<p data-res-fromfile="publicRes (158)"></p>
|
|
<p id="backimg-displaypath-light"> </p>
|
|
<button id="backimg-select-light" data-res-fromfile="publicRes (225)"></button>
|
|
<br>
|
|
<p data-res-fromfile="publicRes (159)"></p>
|
|
<p id="backimg-displaypath-dark"></p>
|
|
<button id="backimg-select-dark" data-res-fromfile="publicRes (225)"></button>
|
|
<br><br>
|
|
<h4 data-res-fromfile="publicRes (184)"></h4>
|
|
<style>
|
|
.background-preview {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 300px;
|
|
max-height: 300px;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.background-preview img {
|
|
max-width: 100%;
|
|
max-height: 0px;
|
|
transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
|
|
position: relative;
|
|
margin: auto;
|
|
}
|
|
|
|
.background-preview img[src] {
|
|
max-height: none;
|
|
}
|
|
</style>
|
|
<h5 data-res-fromfile="publicRes (158)"></h5>
|
|
<div class="background-preview" id="background-preview-light">
|
|
<img alt="Cannot Display Image">
|
|
</div>
|
|
<br>
|
|
<h5 data-res-fromfile="publicRes (159)"></h5>
|
|
<div class="background-preview" id="background-preview-dark">
|
|
<img alt="Cannot Display Image">
|
|
</div>
|
|
<script>
|
|
var displaypath_light = document.getElementById("backimg-displaypath-light");
|
|
var displaypath_dark = document.getElementById("backimg-displaypath-dark");
|
|
var lightimg = document.getElementById("background-preview-light").querySelector("img");
|
|
var darkimg = document.getElementById("background-preview-dark").querySelector("img");
|
|
Windows.UI.Event.Util.addEvent(lightimg, "load", function() {
|
|
var imgsect = document.getElementById("item-custom-background-image");
|
|
if (Theme.useCustomBackgroundImage) {
|
|
imgsect.style.height = imgsect.scrollHeight + "px";
|
|
}
|
|
});
|
|
Windows.UI.Event.Util.addEvent(darkimg, "load", function() {
|
|
var imgsect = document.getElementById("item-custom-background-image");
|
|
if (Theme.useCustomBackgroundImage) {
|
|
imgsect.style.height = imgsect.scrollHeight + "px";
|
|
}
|
|
});
|
|
|
|
function refreshCustomBackground() {
|
|
var lightimgsrc = Theme.customBackgroundImageLight;
|
|
var darkimgsrc = Theme.customBackgroundImageDark;
|
|
displaypath_light.textContent = Bridge.String.format(getPublicRes(224), lightimgsrc);
|
|
displaypath_dark.textContent = Bridge.String.format(getPublicRes(224), darkimgsrc);
|
|
lightimg.setAttribute("src", lightimgsrc + "?timestamp=" + new Date().getTime());
|
|
darkimg.setAttribute("src", darkimgsrc + "?timestamp=" + new Date().getTime());
|
|
if (lightimg.getAttribute("src") === "") lightimg.removeAttribute("src");
|
|
if (darkimg.getAttribute("src") === "") darkimg.removeAttribute("src");
|
|
var imgsect = document.getElementById("item-custom-background-image");
|
|
if (Theme.useCustomBackgroundImage) {
|
|
imgsect.style.height = imgsect.scrollHeight + "px";
|
|
}
|
|
}
|
|
OnLoad.add(refreshCustomBackground);
|
|
var lightImgBtn = document.getElementById("backimg-select-light");
|
|
var darkImgBtn = document.getElementById("backimg-select-dark");
|
|
|
|
function copyFile(src, dest, cover) {
|
|
if (typeof cover === "undefined") cover = true;
|
|
return Bridge.External.CopyFile(src, dest, cover);
|
|
}
|
|
var customRootFolder = path.combine(path.root, "html\\custom");
|
|
Windows.UI.Event.Util.addEvent(lightImgBtn, "click", function() {
|
|
var self = this;
|
|
var filter = "{0}|*.jpg;*.jpeg;*.png;*.gif;*.bmp|{1}|*.*";
|
|
filter = Bridge.String.format(filter, getPublicRes(226), getPublicRes(163));
|
|
var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(227), null));
|
|
if (files.length > 0) {
|
|
var file = files[0];
|
|
var savepath = path.combine(customRootFolder, "bglight.pic");
|
|
if (copyFile(file, savepath)) {
|
|
Theme.customBackgroundImageLight = savepath;
|
|
refreshCustomBackground();
|
|
}
|
|
}
|
|
});
|
|
Windows.UI.Event.Util.addEvent(darkImgBtn, "click", function() {
|
|
var self = this;
|
|
var filter = "{0}|*.jpg;*.jpeg;*.png;*.gif;*.bmp|{1}|*.*";
|
|
filter = Bridge.String.format(filter, getPublicRes(226), getPublicRes(163));
|
|
var files = JSON.parse(Bridge.External.SelectFilesToJSON(filter, 0x000800000 & 0x800, getPublicRes(227), null));
|
|
if (files.length > 0) {
|
|
var file = files[0];
|
|
var savepath = path.combine(customRootFolder, "bgdark.pic");
|
|
if (copyFile(file, savepath)) {
|
|
Theme.customBackgroundImageDark = savepath;
|
|
refreshCustomBackground();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |