Files
App-Installer-For-Windows-8…/shared/html/install.html
2026-04-04 19:27:45 +08:00

522 lines
30 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>App Installer</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">
<link rel="stylesheet" href="css/pages.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/pages.js"></script>
<script type="text/javascript" src="js/load.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" type="text/css" href="libs/msgbox/contentdlg.css">
<script type="text/javascript" src="libs/msgbox/contentdlg.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="theme/light/default/default.css" id="theme-style">
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/params.js"></script>
<script>
OnLoad.add(function() {
window.displayMode = "normal";
window.setThemeId = "default";
window.setThemeColor = 0xFFFFFF;
try {
var p = params;
var keys = Object.keys(p);
var hasidparam = false;
var hascolorparam = false;
try {
displayMode = p["mode"];
} catch (e) {}
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
if (key.indexOf("color") >= 0) {
hascolorparam = true;
}
if (key.indexOf("id") >= 0) {
hasidparam = true;
}
}
if (hasidparam && hascolorparam) {
window.setThemeColor = p["color"];
window.setThemeId = p["id"];
Theme.currentColor = parseInt(p["color"]);
Theme.currentTheme = p["id"];
} else {
throw new Error("Invalid parameters.");
}
} catch (e) {
try {
Theme.refresh();
} catch (e) {}
}
if (displayMode === "preview") {
var preview = document.getElementById("preview-operator-panel");
var winjsCss = document.getElementById("winjs-style");
if (winjsCss) {
winjsCss.setAttribute("href", "libs/winjs/2.0/css/ui-" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + ".css");
}
var themeCss = document.getElementById("theme-style");
if (themeCss) {
themeCss.setAttribute("href", "theme/" + (window.setThemeColor == 0xFFFFFF ? "light" : "dark") + "/" + window.setThemeId + "/" + window.setThemeId + ".css");
}
if (preview) {
preview.style.display = "";
}
}
});
</script>
<style>
#preview-operator-panel {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
top: 50%;
right: 0;
transform: translateY(-50%);
box-sizing: border-box;
padding: 5px;
color: white;
}
</style>
</head>
<body>
<div id="page-background" class="pagecontainer full background"></div>
<script>
(function() {
var backgroundiv = document.getElementById("page-background");
if (backgroundiv) {
var storage = Bridge.External.Storage;
var path = storage.path;
if (Theme.useCustomBackgroundImage) {
var imgpath = Theme.suitableBackgroundImage;
try {
var imgfile = storage.getFile(imgpath);
if (!imgfile.exist) return;
var relative = imgfile.relativePath(path.combine(path.root, "html"));
var backgroundImage = "url('" + relative.replace("\\", "/") + "')";
backgroundiv.style.backgroundImage = backgroundImage;
} catch (e) {}
}
}
})();
</script>
<div id="page-container" class="pagecontainer full main">
<div class="page splash">
<!-- Splash Screen -->
<img class="splash" src="images/splash.default.png" alt="Splash Screen" width="620" height="300">
<div class="content splash">
<progress class="win-ring"></progress>
<p class="status-text"></p>
</div>
<script>
(function() {
"use strict";
var img = document.querySelector(".pagecontainer .page img.splash");
if (img) img.src = Bridge.UI.Splash.imageurl;
var progress = document.querySelector(".pagecontainer .page .content.splash progress");
if (Bridge.Frame.WindowSize.height / Bridge.UI.dpi < 500) {
if (progress.classList.contains("win-ring")) progress.classList.remove("win-ring");
} else progress.classList.add("win-ring");
var splashpage = document.querySelector(".pagecontainer .page.splash");
if (splashpage) {
splashpage.style.backgroundColor = Bridge.UI.Splash.backcolor;
}
})();
</script>
<!-- Loading... -->
<div class="content loading">
<span class="ring-loading">&#57543;</span>&nbsp;
<span data-res-byname="IDS_PLEASEWAIT">Please wait...</span>
</div>
<!-- Main Page -->
<div class="content select preinstall installing installsuccess installfailed main">
<div style="width: 100%; box-sizing: border-box;" class="currentfile multiple">
<h1 class="win-type-x-large title multiple" data-res-byname="IDS_PREINSTALL_MTTITLE"></h1>
<label for="select-package" class="win-label" data-res-byname="IDS_PREINSTALL_MSELECT"></label><br />
<select id="select-package" style="width: 100%;"></select><br />
</div>
<div class="storelogo" style="margin-left: 24px;">
<div class="filter">
<img src="images/splash.default.png" alt="App Store Logo">
</div>
</div>
<script>
(function() {
"use strict";
var storelogo = document.querySelector(".page .content .storelogo");
var slimg = storelogo.querySelector("img");
var monitor = Windows.UI.Event.Monitor;
monitor.observe(slimg, monitor.EventType.attribute, function() {
if (slimg.hasAttribute("src") && slimg.src && slimg.src.length > 1 && slimg.naturalHeight > 0) {
storelogo.style.display = '';
} else {
storelogo.style.display = 'none';
}
});
})();
</script>
<h1 class="win-type-x-large pkgtitle title single" data-res-byname="IDS_PREINSTALL_TITLE"></h1>
<script>
(function() {
"use strict";
var monitor = Windows.UI.Event.Monitor;
var htitle = document.body.querySelector(".page .content h1.pkgtitle");
if (!htitle) return;
function getHeight(ele) {
if (typeof ele === "string") ele = document.getElementById(ele);
try {
return ele.offsetHeight;
} catch (e) {
try {
return ele.clientHeight;
} catch (e) {
return ele.getBoundingClientRect().height;
}
}
return 0;
}
function onChildChangeEventHandler(e) {
var span = htitle.querySelector("span");
if (!span) return;
if (!span.hasAttribute("data-original")) span.setAttribute("data-original", span.textContent);
else span.textContent = span.getAttribute("data-original");
if (!span.hasAttribute("data-showlength")) span.setAttribute("data-showlength", (span.textContent || "").length);
else span.setAttribute("data-showlength", (span.textContent || "").length);
var totalheight = getHeight(htitle);
var limitheight = (parseFloat(("" + (getComputedStyle(htitle, null).lineHeight || 25 / 72 * 96)).replace("px", "")) + 1) * 2;
while (totalheight > limitheight && span.textContent.length) {
totalheight = getHeight(htitle);
if (totalheight > limitheight) {
span.textContent = (span.textContent || "").slice(0, -1);
span.setAttribute("data-showlength", span.textContent.length);
// console.log(totalheight, limitheight, span.textContent.length, span.getAttribute("data-showlength"), span.getAttribute("data-original").length)
}
}
if (!(totalheight > limitheight && span.textContent.length)) {
var isfulllen =
span.getAttribute("data-original").length <=
parseInt(span.getAttribute("data-showlength"), 10);
if (isfulllen) {
span.removeAttribute("data-overflow");
} else {
span.setAttribute("data-overflow", true);
}
}
}
monitor.observe(htitle, monitor.EventType.child, onChildChangeEventHandler);
function getWidth(ele) {
if (typeof ele === "string") ele = document.getElementById(ele);
try {
return ele.getBoundingClientRect().width;
} catch (e) {
try {
return ele.offsetWidth;
} catch (e) {
return ele.clientWidth;
}
}
return 0;
}
var lastWidth = getWidth(htitle);
function onSizeChangeEventHandler(e) {
if (lastWidth === getWidth(htitle)) return;
lastWidth = getWidth(htitle);
onChildChangeEventHandler(e);
}
var deb_sizechange = debounce(onSizeChangeEventHandler, 500);
monitor.observe(htitle, monitor.EventType.resize, deb_sizechange);
var lastAttr = htitle.getAttribute("data-titlefmt") || "";
function onAttributeChangeEventHandler(e) {
if (lastAttr === htitle.getAttribute("data-titlefmt")) return;
lastAttr = htitle.getAttribute("data-titlefmt");
htitle.innerHTML = Bridge.String.formatInnerHtml(lastAttr, htitle.getAttribute("data-pkgname") || "");
}
monitor.observe(htitle, monitor.EventType.attribute, onAttributeChangeEventHandler);
})();
</script>
<p class="pkgtitle multiple" data-res-byname="IDS_PREINSTALL_MPKGNAME"></p>
<p class="pkgapplabel" data-res-byname="IDS_MSAPP"></p>
<p class="pkgpublisher" data-res-byname="IDS_PUBLISHER"></p>
<p class="pkgversion" data-res-byname="IDS_VERSION"></p>
<p class="pkgsupport preinstall">
<span class="support" data-res-byname="IDS_PREINSTALL_SUPPOS"></span>
<span class="not-support" data-res-byname="IDS_PREINSTALL_NOSUPPOS"></span>
</p>
<br />
<p class="pkgfunctions-label" data-res-byname="IDS_FUNCTIONNAME"></p>
<div class="functions">
<ul>
</ul>
</div>
<a class="moreinfo" data-res-byname="IDS_MOREINFO" tabindex="0"></a>
<script>
(function() {
"use strict";
var monitor = Windows.UI.Event.Monitor;
var page = document.querySelector(".page");
var content = page.querySelector(".content.main");
var functions = page.querySelector(".functions");
var funculist = functions.querySelector("ul");
var moreinfo = page.querySelector(".moreinfo");
function sizeChangeEvent(e) {
// var height = parseFloat((getComputedStyle(content, null).height || ("" + content.getBoundingClientRect().height)).replace("px", ""));
var height = content.getBoundingClientRect().height;
var iscomputedheight = false;
if (height < ("" + content.getBoundingClientRect().height)) iscomputedheight = true;
if (height <= 0) height = height || content.offsetHeight || content.clientHeight;
var top = functions.getBoundingClientRect().top;
var newheight = 0;
if (iscomputedheight) {
newheight = height - top;
} else {
newheight = parseInt((height - top - (moreinfo.offsetHeight || moreinfo.getBoundingClientRect().height || 10)));
}
var listheight = (funculist.scrollHeight || funculist.offsetHeight || funculist.clientHeight || funculist.getBoundingClientRect().height || 10) + 20;
// console.log(newheight, listheight);
if (newheight > listheight) newheight = listheight;
functions.style.height = newheight + "px";
}
var deb_sizechange = debounce(sizeChangeEvent, 500);
monitor.observe(content, Windows.UI.Event.Monitor.EventType.resize, deb_sizechange);
monitor.observe(content, Windows.UI.Event.Monitor.EventType.position, deb_sizechange);
monitor.observe(funculist, Windows.UI.Event.Monitor.EventType.child, deb_sizechange);
setTimeout(sizeChangeEvent, 0);
})();
</script>
<script>
(function() {
"use strict";
var eutils = Windows.UI.Event.Util;
var select = document.getElementById("select-package");
eutils.addEvent(select, "change", function() {
var strutils = Bridge.External.String;
var page = document.querySelector(".page");
var pkgtitle = page.querySelector(".pkgtitle.multiple");
var pkgpublisher = page.querySelector(".pkgpublisher");
var pkgversion = page.querySelector(".pkgversion");
var funculist = page.querySelector(".functions ul");
var storelogo = page.querySelector(".storelogo");
var slimg = storelogo.querySelector("img");
var slfilter = storelogo.querySelector(".filter");
var pi = Bridge.Package.pkginfo(this.value);
var reason = page.querySelector(".reason textarea");
var support = page.querySelector(".pkgsupport");
if (pi && pi.valid) {
var res = Bridge.Resources;
pkgtitle.textContent = strutils.format(res.byname("IDS_PREINSTALL_MPKGNAME"), pi.properties.display_name);
slimg.src = pi.properties.logo_base64;
pkgpublisher.textContent = strutils.format(res.byname("IDS_PUBLISHER"), pi.properties.publisher_display_name);
pkgversion.textContent = strutils.format(res.byname("IDS_VERSION"), stringifyVersion(pi.identity.version));
funculist.innerHTML = "";
storelogo.setAttribute("data-logoimg", pi.properties.logo);
for (var j = 0; j < pi.capabilities.capabilities_name.length; j++) {
var li = document.createElement("li");
var capname = pi.capabilities.capabilities_name[j];
li.setAttribute("data-capability", capname);
li.textContent = Bridge.Package.capabilityDisplayName(capname);
if (Bridge.NString.empty(li.textContent)) li.textContent = capname;
funculist.appendChild(li);
}
for (var j = 0; j < pi.capabilities.device_capabilities.length; j++) {
var capname = pi.capabilities.device_capabilities[j];
var cdname = Bridge.Package.capabilityDisplayName(capname);
if (!Bridge.NString.empty(cdname)) {
var li = document.createElement("li");
li.setAttribute("data-capability", capname);
li.textContent = Bridge.Package.capabilityDisplayName(capname);
funculist.appendChild(li);
}
}
try {
var bc = pi.applications[0].BackgroundColor || Bridge.UI.themeColor;
if (strutils.tolower(bc) === "transparent") {
bc = Bridge.UI.themeColor;
}
storelogo.style.backgroundColor = bc;
slfilter.style.background = Color.genTileBackFilter(bc);
} catch (e) {
var bc = Bridge.UI.themeColor;
storelogo.style.backgroundColor = bc;
slfilter.style.background = Color.genTileBackFilter(bc);
}
var support = setFlyoutDisplayInfo(pi);
var supportDisplay = page.querySelector(".pkgsupport");
if (support.architectureSupport && support.osminversionSupport) {
supportDisplay.classList.add("support");
supportDisplay.classList.remove("not-support");
} else {
supportDisplay.classList.add("not-support");
supportDisplay.classList.remove("support");
}
supportDisplay.setAttribute("title", strutils.format("OS Min Version: {0}, Architecture: {1}", support.showOsminversionText, support.showArchitectureText));
var hres = Bridge.Package.installResult(this.value);
if (hres && hres.failed) {
reason.textContent = hres.message;
} else {
reason.textContent = Bridge.Resources.byname("IDS_FAILED_MSUCCESS");
}
}
});
})();
</script>
</div>
<div class="progress installing">
<div>
<span class="ring-loading">&#57543;</span>&nbsp;<span class="status" data-res-byname="IDS_INSTALLING_SLOADING"></span>
</div>
<progress min="0" max="100" class="win-progress-bar"></progress>
</div>
<div class="reason installfailed">
<p data-res-byname="IDS_FAILED_REASONNAME"></p>
<textarea class="win-textarea" readonly></textarea>
</div>
<div class="controls">
<div class="checkbox">
<input type="checkbox" id="preinst-enablelaunch" class="win-checkbox" style="margin-left: 0;">
<label for="preinst-enablelaunch" data-res-byname="IDS_LAUNCHWHENREADY"></label>
</div>
<div class="command">
<button data-res-byname="IDS_PREINSTALL_TINSTALL" onclick="Bridge.Frame.callEvent ('OnPress_Button1')"></button>
<button data-res-byname="IDS_PREINSTALL_CANCEL" onclick="Bridge.Frame.callEvent ('OnPress_Button2')"></button>
</div>
</div>
</div>
</div>
<div data-win-control="WinJS.UI.Flyout" id="moreinfo-flyout" style="max-width: 80%; max-height: 80%; position: absolute;">
<div id="moreinfo-flyout-content" style="-ms-user-select: element; user-select: text; padding: 0 0 25px 0; box-sizing: border-box;;">
<div style="width: 100%;">
<p><span colspan="2" style="font-weight: bold;" data-res-byname="IDS_MOREINFO_ID"></span></p>
<p><span data-res-byname="IDS_MOREINFO_IDNAME"></span>: <span class="id name"></span></p>
<p><span data-res-byname="IDS_MOREINFO_IDPUBLISHER"></span>: <span class="id publisher"></span></p>
<p><span data-res-byname="IDS_MOREINFO_IDVERSION"></span>: <span class="id version"></span></p>
<p><span data-res-byname="IDS_MOREINFO_IDARCH"></span>: <span class="id arch"></span></p>
<p><span data-res-byname="IDS_MOREINFO_IDFAMILY"></span>: <span class="id family"></span></p>
<p><span data-res-byname="IDS_MOREINFO_IDFULL"></span>: <span class="id full"></span></p>
</div>
<div style="width: 100%; display: none;">
<p><span colspan="2" style="font-weight:bold;" data-res-byname="IDS_MOREINFO_PROP"></span></p>
<p><span data-res-byname="IDS_MOREINFO_PROPFREAMWORK"></span>: <span class="prop framework"></span></p>
<p><span data-res-byname="IDS_MOREINFO_PROPRESPKG"></span>: <span class="prop respkg"></span></p>
</div>
<div style="width: 100%;">
<p><span colspan="2" style="font-weight:bold;" data-res-byname="IDS_MOREINFO_INFO"></span></p>
<p><span data-res-byname="IDS_MOREINFO_INFOSYS"></span>: <span class="info sys"></span></p>
<p><span data-res-byname="IDS_MOREINFO_INFOLANG"></span>: </p>
<ul class="info langs"></ul>
</div>
</div>
</div>
<script>
(function() {
"Use strict";
var page = document.querySelector(".page");
var content = page.querySelector(".content.preinstall");
var moreinfo = page.querySelector(".moreinfo");
Windows.UI.Event.Util.addEvent(moreinfo, "click", function() {
var flyout = document.getElementById("moreinfo-flyout").winControl;
flyout.show(this);
});
})();
</script>
<div id="preview-operator-panel" style="display: none;">
<label>Please select the page: </label><br>
<select id="preview-operator-select" value="splash">
<option value="splash">Splash Screen</option>
<option value="select">Package Select</option>
<option value="preinstall">Pre-install</option>
<option value="installing">Installing</option>
<option value="installsuccess">Install Successfully</option>
<option value="installfailed">Install Failed</option>
</select><br>
<input type="checkbox" id="preview-operator-checkbox">
<label for="preview-operator-checkbox">Multiple Package Page</label><br>
<input type="checkbox" id="preview-operator-progress">
<label for="preview-operator-progress">Show Progress Bar with Value</label>
<script>
(function() {
var preview_operator_panel = document.getElementById("preview-operator-panel");
var preview_operator_select = document.getElementById("preview-operator-select");
var preview_operator_checkbox = document.getElementById("preview-operator-checkbox");
var preview_operator_progress = document.getElementById("preview-operator-progress");
var eventutils = Windows.UI.Event.Util;
var page = document.querySelector("#page-container .page");
function clearPageClass() {
page.setAttribute("class", "page");
}
eventutils.addEvent(preview_operator_select, "change", function() {
clearPageClass();
page.classList.add(preview_operator_select.value);
if (preview_operator_checkbox.checked) {
page.classList.add("multiple");
} else {
page.classList.remove("multiple");
}
});
eventutils.addEvent(preview_operator_checkbox, "change", function() {
clearPageClass();
page.classList.add(preview_operator_select.value);
if (preview_operator_checkbox.checked) {
page.classList.add("multiple");
} else {
page.classList.remove("multiple");
}
});
eventutils.addEvent(preview_operator_progress, "change", function() {
if (preview_operator_progress.checked) {
page.querySelector(".progress.installing progress").value = 50;
} else {
page.querySelector(".progress.installing progress").removeAttribute("value");
}
});
OnLoad.add(function() {
setTimeout(function() {
if (displayMode === "preview") {
var subnodes = page.querySelectorAll("*");
for (var i = 0; i < subnodes.length; i++) {
var subnode = subnodes[i];
var mark = "";
if (subnode.hasAttribute("id")) {
mark += "Id: {" + subnode.getAttribute("id") + "} ";
}
if (subnode.hasAttribute("class")) {
mark += "Class: {" + subnode.getAttribute("class") + "} ";
}
if (subnode.hasAttribute("data-res-byname")) {
mark += "Res: {" + subnode.getAttribute("data-res-byname") + "} ";
}
subnode.appendChild(document.createTextNode(mark));
}
}
}, 100);
});
})();
</script>
</div>
</body>
</html>