timamsk/App-Installer-For-Windows-8.x-Reset
1
0
Fork 0
mirror of https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git synced 2026-04-20 02:34:42 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update Shell

Browse Source
This commit is contained in:
Bruce
2025-11-26 07:44:51 +08:00
parent ae3771bfdb
commit a70b0547bd
45 changed files with 5781 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
shared/html/css/pages.css
View File

@@ -24,6 +24,7 @@ body * {
margin: 0px;
padding: 0px;
border: 0px;
background-color: #f3f3f3;
}
.pagecontainer.full {
@@ -74,6 +75,17 @@ body * {
color: white;
}
.page.splash .content.splash .status-text {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
margin-top: 10px;
overflow-y: hidden;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page.splash .content.splash progress {
border-style: none;
background-color: transparent;
@@ -257,9 +269,53 @@ progress.win-ring:indeterminate::-ms-fill {
box-sizing: border-box;
transition: width 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), height 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), top 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), left 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), right 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), bottom 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), margin 0.5s cubic-bezier(0.1, 0.9, 0.2, 1), padding 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
list-style-position: outside;
color: rgb(113, 113, 113);
/*test*/
border: 1px solid black;
padding: 5px;
/*border: 1px solid black;
padding: 5px;*/
}
.page .content p,
.page .content span,
.page .content h1,
.page .content label,
.page .content select,
.page .content .functions ul li,
.page .content .reason {
font-weight: normal;
}
.page .content .pkgtitle.multiple {
font-weight: bold;
-ms-overflow-x: hidden;
-ms-overflow-y: hidden;
-ms-text-overflow: ellipsis;
white-space: nowrap;
max-height: 1.3em;
max-width: 100%;
}
.page .content .pkgtitle.multiple span {
font-weight: bold;
-ms-overflow-x: hidden;
-ms-overflow-y: hidden;
-ms-text-overflow: ellipsis;
max-height: 1.3em;
white-space: nowrap;
max-width: 100%;
}
.pkgtitle span[data-overflow]::after {
content: "...";
}
.page>.content h1 {
font-size: 25pt;
margin-bottom: 8px;
}
.page>.content .pkgapplabel {
color: rgb(0, 120, 215);
}
.page>.progress {
@@ -273,6 +329,14 @@ progress.win-ring:indeterminate::-ms-fill {
box-sizing: border-box;
}
.content #moreinfo-flyout-content p>span:nth-child(1) {
-ms-user-select: none;
}
.content #moreinfo-flyout-content>span:nth-child(2) {
color: darkgray;
}
.progress * {
width: 100%;
}
@@ -364,7 +428,7 @@ progress.win-ring:indeterminate::-ms-fill {
}
.page.select>.controls.select>.command button:nth-of-type(2) {
display: none;
/*display: none;*/
}
.page.select>.content.select,
@@ -450,4 +514,32 @@ progress.win-ring:indeterminate::-ms-fill {
.page.installing.multiple>.content .currentfile select,
.page.installing.multiple>.content .currentfile br {
display: none;
}
@keyframes scale-visible {
from {
transform: translateX(50px) scale(0.8);
opacity: 0;
}
to {
transform: translateX(0) scale(1);
opacity: 1;
}
}
.page.installsuccess.multiple>.content.installsuccess * {
display: none;
}
.page.installsuccess.multiple>.content.installsuccess>.currentfile {
display: block;
}
.page.installsuccess.multiple>.content.installsuccess>.currentfile h1.title {
display: block;
}
.page.installsuccess>.controls.installsuccess>.command button:nth-of-type(2),
.page.installfailed>.controls.installsuccess>.command button:nth-of-type(2) {
display: none;
}

376
shared/html/deepseek_html_20251122_6d71df.html Normal file
View File

@@ -0,0 +1,376 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果测试</title>
<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">
<script type="text/javascript" src="libs/winjs/2.0/js/base.js"></script>
<script type="text/javascript" src="libs/winjs/2.0/js/ui.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 20px;
overflow-x: auto;
overflow-y: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #0067b8, #004e8c);
color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.description {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.control-group {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.control-group h3 {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
color: #0067b8;
}
.demo-area {
display: flex;
flex-direction: column;
align-items: center;
margin: 15px 0;
flex-grow: 1;
}
.demo-element {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #0067b8, #00a4ef);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s;
}
.demo-element::after {
content: "动画元素";
font-size: 0.9rem;
text-align: center;
padding: 5px;
}
.animation-buttons {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
}
button {
background-color: #0067b8;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
font-size: 14px;
width: 100%;
}
button:hover {
background-color: #004e8c;
}
.animation-status {
background: #f8f8f8;
padding: 10px;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
min-height: 60px;
white-space: pre-wrap;
margin-top: 10px;
width: 100%;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #666;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.controls {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>动画效果测试</h1>
<p class="description">此页面展示animation.js中定义的所有动画效果。点击每个动画类别下的按钮来测试对应的动画。</p>
</header>
<div class="controls">
<div class="control-group">
<h3>弹出动画 (Flyout)</h3>
<div class="demo-area">
<div class="demo-element" id="flyoutElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Flyout.toTop', 'flyoutElement')">向顶端</button>
<button onclick="runAnimation('Flyout.toBottom', 'flyoutElement')">向底端</button>
<button onclick="runAnimation('Flyout.toLeft', 'flyoutElement')">向左</button>
<button onclick="runAnimation('Flyout.toRight', 'flyoutElement')">向右</button>
<button onclick="runAnimation('Flyout.fromBottom', 'flyoutElement')">从底端</button>
<button onclick="runAnimation('Flyout.fromTop', 'flyoutElement')">从顶端</button>
<button onclick="runAnimation('Flyout.fromLeft', 'flyoutElement')">从左侧</button>
<button onclick="runAnimation('Flyout.fromRight', 'flyoutElement')">从右侧</button>
</div>
<div class="animation-status" id="flyoutStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>渐变动画 (Opacity)</h3>
<div class="demo-area">
<div class="demo-element" id="opacityElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Opacity.visible', 'opacityElement')">显示</button>
<button onclick="runAnimation('Opacity.hidden', 'opacityElement')">消失</button>
</div>
<div class="animation-status" id="opacityStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>缩放动画 (Scale)</h3>
<div class="demo-area">
<div class="demo-element" id="scaleElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Scale.up', 'scaleElement')">放大</button>
<button onclick="runAnimation('Scale.down', 'scaleElement')">缩小</button>
</div>
<div class="animation-status" id="scaleStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>默认动画 (Default)</h3>
<div class="demo-area">
<div class="demo-element" id="defaultElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Default.remove', 'defaultElement')">从右返回</button>
<button onclick="runAnimation('Default.removertl', 'defaultElement')">从左返回</button>
<button onclick="runAnimation('Default.apply', 'defaultElement')">向右移动</button>
<button onclick="runAnimation('Default.applyrtl', 'defaultElement')">向左移动</button>
</div>
<div class="animation-status" id="defaultStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>边缘动画 (Edge)</h3>
<div class="demo-area">
<div class="demo-element" id="edgeElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Edge.show', 'edgeElement')">从顶部显示</button>
<button onclick="runAnimation('Edge.hide', 'edgeElement')">向顶部隐藏</button>
</div>
<div class="animation-status" id="edgeStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>面板动画 (Panel)</h3>
<div class="demo-area">
<div class="demo-element" id="panelElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Panel.show', 'panelElement')">从右侧显示</button>
<button onclick="runAnimation('Panel.showrtl', 'panelElement')">从左侧显示</button>
<button onclick="runAnimation('Panel.hide', 'panelElement')">向右侧隐藏</button>
<button onclick="runAnimation('Panel.hidertl', 'panelElement')">向左侧隐藏</button>
</div>
<div class="animation-status" id="panelStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>弹出动画 (Popup)</h3>
<div class="demo-area">
<div class="demo-element" id="popupElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Popup.show', 'popupElement')">弹出显示</button>
</div>
<div class="animation-status" id="popupStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>拖放动画 (Drag)</h3>
<div class="demo-area">
<div class="demo-element" id="dragElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Drag.sourceEnd', 'dragElement')">从右复位</button>
<button onclick="runAnimation('Drag.sourceEndRtl', 'dragElement')">从左复位</button>
</div>
<div class="animation-status" id="dragStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>内容动画 (Content)</h3>
<div class="demo-area">
<div class="demo-element" id="contentElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Content.enter', 'contentElement')">从右进入</button>
<button onclick="runAnimation('Content.enterrtl', 'contentElement')">从左进入</button>
</div>
<div class="animation-status" id="contentStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>页面动画 (Page)</h3>
<div class="demo-area">
<div class="demo-element" id="pageElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Page.enter', 'pageElement')">从右进入</button>
<button onclick="runAnimation('Page.enterrtl', 'pageElement')">从左进入</button>
</div>
<div class="animation-status" id="pageStatus">等待动画执行...</div>
</div>
</div>
<div class="control-group">
<h3>其他动画</h3>
<div class="demo-area">
<div class="demo-element" id="otherElement"></div>
<div class="animation-buttons">
<button onclick="runAnimation('Exit', 'otherElement')">退出</button>
<button onclick="runAnimation('UpdateBadge', 'otherElement')">更新徽章</button>
</div>
<div class="animation-status" id="otherStatus">等待动画执行...</div>
</div>
</div>
</div>
<footer>
<p>动画效果测试页面 - 使用 WinJS 动画库</p>
</footer>
</div>
<script>
// 确保Windows对象存在
if (typeof Windows === 'undefined') {
console.error('Windows对象未定义，请确保已正确引入WinJS库');
} else if (!Windows.UI || !Windows.UI.Animation) {
console.error('Windows.UI.Animation未定义，请确保animation.js已正确加载');
}
// 动画映射表
const animationMap = {
'Flyout.toTop': Windows.UI.Animation.Keyframes.Flyout.toTop,
'Flyout.toBottom': Windows.UI.Animation.Keyframes.Flyout.toBottom,
'Flyout.toLeft': Windows.UI.Animation.Keyframes.Flyout.toLeft,
'Flyout.toRight': Windows.UI.Animation.Keyframes.Flyout.toRight,
'Flyout.fromBottom': Windows.UI.Animation.Keyframes.Flyout.fromBottom,
'Flyout.fromTop': Windows.UI.Animation.Keyframes.Flyout.fromTop,
'Flyout.fromLeft': Windows.UI.Animation.Keyframes.Flyout.fromLeft,
'Flyout.fromRight': Windows.UI.Animation.Keyframes.Flyout.fromRight,
'Opacity.visible': Windows.UI.Animation.Keyframes.Opacity.visible,
'Opacity.hidden': Windows.UI.Animation.Keyframes.Opacity.hidden,
'Scale.up': Windows.UI.Animation.Keyframes.Scale.up,
'Scale.down': Windows.UI.Animation.Keyframes.Scale.down,
'Default.remove': Windows.UI.Animation.Keyframes.Default.remove,
'Default.removertl': Windows.UI.Animation.Keyframes.Default.removertl,
'Default.apply': Windows.UI.Animation.Keyframes.Default.apply,
'Default.applyrtl': Windows.UI.Animation.Keyframes.Default.applyrtl,
'Edge.show': Windows.UI.Animation.Keyframes.Edge.show,
'Edge.hide': Windows.UI.Animation.Keyframes.Edge.hide,
'Panel.show': Windows.UI.Animation.Keyframes.Panel.show,
'Panel.showrtl': Windows.UI.Animation.Keyframes.Panel.showrtl,
'Panel.hide': Windows.UI.Animation.Keyframes.Panel.hide,
'Panel.hidertl': Windows.UI.Animation.Keyframes.Panel.hidertl,
'Popup.show': Windows.UI.Animation.Keyframes.Popup.show,
'Drag.sourceEnd': Windows.UI.Animation.Keyframes.Drag.sourceEnd,
'Drag.sourceEndRtl': Windows.UI.Animation.Keyframes.Drag.sourceEndRtl,
'Content.enter': Windows.UI.Animation.Keyframes.Content.enter,
'Content.enterrtl': Windows.UI.Animation.Keyframes.Content.enterrtl,
'Page.enter': Windows.UI.Animation.Keyframes.Page.enter,
'Page.enterrtl': Windows.UI.Animation.Keyframes.Page.enterrtl,
'Exit': Windows.UI.Animation.Keyframes.Exit,
'UpdateBadge': Windows.UI.Animation.Keyframes.UpdateBadge
};
// 运行动画的函数
function runAnimation(animationKey, elementId) {
const targetElement = document.getElementById(elementId);
const statusElement = document.getElementById(elementId.replace('Element', 'Status'));
if (!animationMap[animationKey]) {
statusElement.textContent = `错误：未找到动画键 "${animationKey}"`;
return;
}
// 获取动画关键帧
const keyFrame = animationMap[animationKey];
// 更新状态
statusElement.textContent = `正在执行动画: ${animationKey}\n关键帧: ${keyFrame}\n开始时间: ${new Date().toLocaleTimeString()}`;
// 执行动画
Windows.UI.Animation.RunAsync(targetElement, keyFrame, 1000)
.then(function() {
statusElement.textContent += `\n动画完成时间: ${new Date().toLocaleTimeString()}`;
})
.catch(function(error) {
statusElement.textContent = `动画执行出错: ${error.message}`;
});
}
// 页面加载完成后显示提示
window.addEventListener('DOMContentLoaded', function() {
const statusElements = document.querySelectorAll('.animation-status');
statusElements.forEach(element => {
element.textContent = '页面已加载完成，点击按钮测试动画效果';
});
});
</script>
</body>
</html>

226
shared/html/install.html
View File

@@ -20,6 +20,7 @@
<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>
@@ -27,11 +28,12 @@
<body>
<div id="page-container" class="pagecontainer full">
<div class="page splash">
<div class="page preinstall">
<!-- 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() {
@@ -54,44 +56,160 @@
<span data-res-byname="IDS_PLEASEWAIT">Please wait...</span>
</div>
<!-- Main Page -->
<div class="content select preinstall installing installsuccess installfailed">
<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" 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"></select><br />
<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">
<div class="storelogo" style="margin-left: 24px;">
<div class="filter">
<img src="images/splash.default.png" alt="App Store Logo">
</div>
</div>
<h1 class="win-type-x-large pkgtitle" data-res-byname="IDS_PREINSTALL_TITLE"></h1>
<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 data-res-byname="IDS_MSAPP"></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><br />
<p class="pkgfunctions-label" data-res-byname="IDS_FUNCTIONNAME"></p>
<div class="functions">
<ul>
<li>使用全部的系统资源</li>
</ul>
</div>
<a class="moreinfo" data-res-byname="IDS_MOREINFO"></a>
<a class="moreinfo" data-res-byname="IDS_MOREINFO" tabindex="0"></a>
<div data-win-control="WinJS.UI.Flyout" id="moreinfo-flyout" style="max-width: 80%; max-height: 80%;">
<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 monitor = Windows.UI.Event.Monitor;
var page = document.querySelector(".page");
var content = page.querySelector(".content.preinstall");
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 = parseInt((height - top - 10));
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);
// console.log(newheight, listheight);
if (newheight > listheight) newheight = listheight;
functions.style.height = newheight + "px";
}
@@ -102,12 +220,87 @@
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");
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;
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);
}
setFlyoutDisplayInfo(pi);
var hres = Bridge.Package.installResult(this.value);
if (hres) {
reason.textContent = hres.message;
} else {
reason.textContent = Bridge.Resources.byname("IDS_FAILED_MSUCCESS");
}
}
});
})();
</script>
<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>
<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" value="50" class="win-progress-bar"></progress>
<progress min="0" max="100" class="win-progress-bar"></progress>
</div>
<div class="reason installfailed">
<p data-res-byname="IDS_FAILED_REASONNAME"></p>
@@ -119,11 +312,10 @@
<label for="preinst-enablelaunch" data-res-byname="IDS_LAUNCHWHENREADY"></label>
</div>
<div class="command">
<button data-res-byname="IDS_PREINSTALL_TINSTALL"></button>
<button data-res-byname="IDS_PREINSTALL_CANCEL"></button>
<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 data-win-control="WinJS.UI.Flyout" id="moreinfo-flyout"></div>
</div>
</div>
</body>

125
shared/html/js/animation.js
View File

@@ -152,35 +152,114 @@
}
return swResult;
}
/**
* 异步设置动画，返回一个 Promise 对象，动画结束后会执行
* @param {HTMLElement} element 元素节点
* @param {string|Array <string>} swKeyFrames 动画关键帧名称
* @param {number} uMillisecond 动画持续时间（毫秒）
* @param {string} [swTimingFunc] 缓动函数，默认 cubic-bezier(0.1, 0.9, 0.2, 1)
* @param {number} [uDelayMs] 延迟时间（毫秒），默认 0
* @param {string} [swIteration] 播放次数，默认 "1"
* @param {string} [swDirection] 播放方向，默认 "normal"
* @param {string} [swFillMode] 填充模式，默认 "forwards"
* @param {string} [swPlayState] 播放状态，默认 ""
* @returns {Promise}
*/
function RunAsync(element, swKeyFrames, uMillisecond, swTimingFunc, uDelayMs, swIteration, swDirection, swFillMode, swPlayState) {
return new WinJS.Promise(function(complete) {
element.style.animation = generateAnimeString(swKeyFrames, uMillisecond, swTimingFunc, uDelayMs, swIteration, swDirection, swFillMode, swPlayState);
element.addEventListener("animationend", function() {
element.style.animation = "";
complete();
});
});
}
module.exports = {
Windows: {
UI: {
Animation: {
Keyframes: AnimationKeyFrames,
Animation: generateAnimeString,
/**
* 异步设置动画，返回一个 Promise 对象，动画结束后会执行
* @param {HTMLElement} element 元素节点
* @param {string|Array <string>} swKeyFrames 动画关键帧名称
* @param {number} uMillisecond 动画持续时间（毫秒）
* @param {string} [swTimingFunc] 缓动函数，默认 cubic-bezier(0.1, 0.9, 0.2, 1)
* @param {number} [uDelayMs] 延迟时间（毫秒），默认 0
* @param {string} [swIteration] 播放次数，默认 "1"
* @param {string} [swDirection] 播放方向，默认 "normal"
* @param {string} [swFillMode] 填充模式，默认 "forwards"
* @param {string} [swPlayState] 播放状态，默认 ""
* @returns {Promise}
*/
RunAsync: function(element, swKeyFrames, uMillisecond, swTimingFunc, uDelayMs, swIteration, swDirection, swFillMode, swPlayState) {
return new WinJS.Promise(function(complete) {
element.style.animation = generateAnimeString(swKeyFrames, uMillisecond, swTimingFunc, uDelayMs, swIteration, swDirection, swFillMode, swPlayState);
element.addEventListener("animationend", function() {
element.style.animation = "";
complete();
});
});
}
animation: generateAnimeString,
RunAsync: RunAsync,
runAsync: RunAsync
}
}
}
};
if (!String.prototype.repeat) {
String.prototype.repeat = function(count) {
'use strict';
if (this == null) { throw new TypeError('can\'t convert ' + this + ' to object'); }
var str = '' + this;
count = +count;
if (count != count) { count = 0 }
if (count < 0) { throw new RangeError('repeat count must be non-negative'); }
if (count == Infinity) { throw new RangeError('repeat count must be less than infinity'); }
count = Math.floor(count);
if (str.length == 0 || count == 0) { return '' }
if (str.length * count >= 1 << 28) { throw new RangeError('repeat count must not overflow maximum string size'); }
var rpt = '';
for (var i = 0; i < count; i++) { rpt += str }
return rpt
}
}
var timers = {};
function DisplayLoadingAmineChar(containerId, shouldAnimate) {
var container = null;
if (containerId instanceof HTMLElement) {
if (typeof containerId.id === "string" && containerId.id.length > 0) {
container = containerId;
containerId = container.id;
} else {
containerId.id = "elementid-" + Math.floor(Math.random() * 1000000);
container = containerId;
containerId = container.id;
}
} else document.getElementById(containerId);
var textNode = container.firstChild;
if (!textNode || textNode.nodeType !== 3) {
textNode = document.createTextNode("");
container.innerHTML = "";
container.appendChild(textNode);
}
var chars = ''.repeat(10);
var index = 0;
var charGroupSize = 120;
function showNextChar() {
if (index < chars.length) {
textNode.nodeValue = chars.charAt(index);
index++;
if (index % charGroupSize === 0) {
clearInterval(timers[containerId]);
setTimeout(startAnimation, 200);
}
} else {
index = 0;
textNode.nodeValue = chars.charAt(index);
}
}
function startAnimation() {
if (timers[containerId]) {
clearInterval(timers[containerId]);
}
if (shouldAnimate) {
timers[containerId] = setInterval(showNextChar, 30);
} else {
clearInterval(timers[containerId]);
textNode.nodeValue = chars.charAt(chars.length - 1);
}
}
startAnimation();
}
module.exports = {
Windows: {
UI: {
Animation: {
loading: DisplayLoadingAmineChar
}
}
}

45
shared/html/js/bridge.js
View File

@@ -10,7 +10,10 @@
External: ext,
Frame: {
isIe10: function() { return ext.IEFrame.Version === 10; },
isIe11: function() { return ext.IEFrame.Version === 11; }
isIe11: function() { return ext.IEFrame.Version === 11; },
callEvent: function(funcName, e) {
ext.Window.CallEvent(funcName, e);
}
},
UI: {
Splash: {
@@ -19,11 +22,12 @@
fadeOut: function() { ext.System.UI.FadeOutSplash(); }
}
},
String: {
trim: function(str) { return ext.String.Trim(str); },
tolower: function(str) { return ext.String.ToLower(str); },
toupper: function(str) { return ext.String.ToUpper(str); },
},
String: ext.String,
/* {
trim: function(str) { return ext.String.Trim(str); },
tolower: function(str) { return ext.String.ToLower(str); },
toupper: function(str) { return ext.String.ToUpper(str); },
}, */
NString: {
equals: function(str1, str2) { return ext.String.NString.NEquals(str1, str2); },
compare: function(str1, str2) { return ext.String.NString.Compare(str1, str2); },
@@ -35,6 +39,26 @@
byid: function(resid) { return ext.System.Resources.GetById(resid); },
nameToId: function(resname) { return ext.System.Resources.ToId(resname); },
idToName: function(resid) { return ext.System.Resources.ToName(resid); },
},
Package: {
filepaths: function() {
return JSON.parse(ext.Package.GetPackagesToJson() || "[]");
},
pkginfo: function(filepath) {
return JSON.parse(ext.Package.GetPackageInfoToJson(filepath) || "{}");
},
capabilityDisplayName: function(capability) {
return ext.Package.GetCapabilityDisplayName(capability);
},
installResult: function(filepath) {
return ext.Package.GetPackageInstallResult(filepath);
},
},
Locale: {
toLcid: function(localeName) { return ext.System.Locale.ToLcid(localeName); },
toLocaleName: function(lcid) { return ext.System.Locale.ToLocaleName(lcid); },
localeInfo: function(lcid, lcType) { return ext.System.Locale.LocaleInfo(lcid, lcType); },
localeInfoEx: function(localeName, lcType) { return ext.System.Locale.LocaleInfoEx(localeName, lcType); }
}
};
Object.defineProperty(global.Bridge.Frame, "scale", {
@@ -56,6 +80,15 @@
Object.defineProperty(global.Bridge.UI, "dpi", {
get: function() { return ext.System.UI.DPI; }
});
Object.defineProperty(global.Bridge.UI, "themeColor", {
get: function() { return ext.System.UI.ThemeColor; }
});
Object.defineProperty(global.Bridge.UI, "contrast", {
get: function() { return ext.System.UI.HighContrast; }
});
Object.defineProperty(global.Bridge.UI, "darkmode", {
get: function() { return ext.System.UI.DarkMode; }
});
Object.defineProperty(global.Bridge.UI.Splash, "backcolor", {
get: function() { return ext.System.UI.SplashBackgroundColor; },
});

47
shared/html/js/color.js
View File

@@ -24,6 +24,7 @@
Object.defineProperty(this, "color", {
get: function() { return parent; }
});
this.stringify = function() { return "rgb(" + parent.red + "," + parent.green + "," + parent.blue + ")"; };
}
function RGBA(parent) {
@@ -34,6 +35,7 @@
});
this.toString = function() { return "rgba(" + parent.red + "," + parent.green + "," + parent.blue + "," + (parent.alpha / 255).toFixed(2) + ")"; };
this.valueOf = function() { return parent.valueOf(); };
this.stringify = function() { return "rgba(" + parent.red + "," + parent.green + "," + parent.blue + "," + (parent.alpha / 255).toFixed(2) + ")"; };
}
function HSL(parent) {
@@ -196,6 +198,7 @@
});
this.toString = function() { return "hsl(" + this.hue + "," + (this.saturation * 100).toFixed(2) + "%," + (this.lightness * 100).toFixed(2) + "%)"; };
this.valueOf = function() { return parent.valueOf(); };
this.stringify = function() { return "hsl(" + this.hue + "," + (this.saturation * 100).toFixed(2) + "%," + (this.lightness * 100).toFixed(2) + "%)"; };
}
function HSLA(parent) {
@@ -206,6 +209,7 @@
});
this.toString = function() { return "hsla(" + this.hue + "," + (this.saturation * 100).toFixed(2) + "%," + (this.lightness * 100).toFixed(2) + "%," + (parent.alpha / 255).toFixed(2) + ")"; };
this.valueOf = function() { return parent.valueOf(); };
this.stringify = function() { return "hsla(" + this.hue + "," + (this.saturation * 100).toFixed(2) + "%," + (this.lightness * 100).toFixed(2) + "%," + (parent.alpha / 255).toFixed(2) + ")"; };
}
function HWB(parent) {
@@ -381,6 +385,13 @@
}
};
this.valueOf = function() { return parent.valueOf(); };
this.stringify = function() {
if (parent.alpha == 255) {
return "hwb(" + this.hue + "," + (this.white * 100).toFixed(2) + "%," + (this.black * 100).toFixed(2) + "%)";
} else {
return "hwb(" + this.hue + "," + (this.white * 100).toFixed(2) + "%," + (this.black * 100).toFixed(2) + "% / " + (parent.alpha / 255).toFixed(2) + ")";
}
};
}
/**
*
@@ -390,26 +401,28 @@
* @param {number} alpha 透明度通道值 0-255
*/
function Color(red, green, blue, alpha) {
red = red & 0xFF;
green = green & 0xFF;
blue = blue & 0xFF;
alpha = (typeof alpha === "undefined") ? 255 : (alpha & 0xFF);
this.rgbData = (red << 16) | (green << 8) | blue;
this.alpha = alpha;
this._red = red & 0xFF;
this._green = green & 0xFF;
this._blue = blue & 0xFF;
this._alpha = (typeof alpha === "undefined") ? 255 : (alpha & 0xFF);
Object.defineProperty(this, "rgbData", {
get: function() { return this._rgbData; },
set: function(value) { this._rgbData = value & 0xFFFFFF; }
});
// 红色通道
Object.defineProperty(this, "red", {
get: function() { return (this.rgbData >>> 16) & 0xFF; },
set: function(value) { this.rgbData = ((value & 0xFF) << 16) | (this.rgbData & 0x00FFFF); }
get: function() { return this._red; },
set: function(value) { this._red = value & 0xFF; }
});
// 绿色通道
Object.defineProperty(this, "green", {
get: function() { return (this.rgbData >>> 8) & 0xFF; },
set: function(value) { this.rgbData = (this.rgbData & 0xFF00FF) | ((value & 0xFF) << 8); }
get: function() { return this._green; },
set: function(value) { this._green = value & 0xFF; }
});
// 蓝色通道
Object.defineProperty(this, "blue", {
get: function() { return this.rgbData & 0xFF; },
set: function(value) { this.rgbData = (this.rgbData & 0xFFFF00) | (value & 0xFF); }
get: function() { return this._blue; },
set: function(value) { this._blue = value & 0xFF; }
});
// Alpha 通道单独存储
Object.defineProperty(this, "alpha", {
@@ -458,6 +471,16 @@
this.HSL = new HSL(this);
this.HSLA = new HSLA(this);
this.HWB = new HWB(this);
this.stringify = function() { return this.hex; };
}
/**
* 解析颜色字符串
* @param {string} str 颜色字符串
* @returns {Color} 解析得到的颜色对象
*/
Color.parse = function(str) {
var json = JSON.parse(window.external.IEFrame.ParseHtmlColor(str));
return new Color(json.r, json.g, json.b, json.a);
}
module.exports = { Color: Color };
})(this);

22
shared/html/js/event.js
View File

@@ -171,13 +171,35 @@
}
return {
/**
* 监听元素变化，并触发回调函数。
* @param {Element} el 目标元素
* @param {string} type 事件类型，如 "resize", "position", "attribute", "child"
* @param {function} callback 回调函数，参数为事件对象
*/
observe: observe,
/**
* 取消监听元素变化。
* @param {Element} el 目标元素
* @param {string} type 事件类型，如 "resize", "position", "attribute", "child"
* @param {function} [callback] 回调函数，如果指定，则只移除指定的回调函数，否则移除所有回调函数。
*/
detach: detach,
/**
* 清除所有监听。
*/
clearAll: clearAll,
/**
* 事件类型枚举。
*/
EventType: {
/** 元素尺寸变化 */
resize: "resize",
/** 元素位置变化 */
position: "position",
/** 元素属性变化 */
attribute: "attribute",
/** 子元素变化 */
child: "child"
}
};

528
shared/html/js/pages.js
View File

@@ -25,12 +25,20 @@
var splashBackColor = "";
var timer = {
title: null,
text: null,
logo: null,
progress: null,
controls: null,
};
function setPage(swPageLabel, bIsMulti) {
var page = getPage();
swPageLabel = ("" + (swPageLabel || ""));
for (var i = 0; i < supportPageList.length; i++) {
if (Bridge.NString.equals(swPageLabel, supportPageList[i])) {
page.classList.add(supportPageList[i]);
if (!page.classList.contains(supportPageList[i])) page.classList.add(supportPageList[i]);
} else {
if (page.classList.contains(supportPageList[i])) page.classList.remove(supportPageList[i]);
}
@@ -49,6 +57,125 @@
break;
}
}
(function() {
if (Bridge.NString.equals(swPageLabel, "loading")) {
var content = page.querySelector(".content.loading");
if (content) content.style.visibility = "hidden";
setTimeout(function(node) {
if (node) {
node.style.visibility = "visible";
var animation = Windows.UI.Animation;
animation.runAsync(node, animation.Keyframes.Flyout.toLeft, 500);
}
}, 0, content);
var loading = content.querySelector(".ring-loading");
Windows.UI.Animation.loading(loading, true);
} else {
var content = page.querySelector(".content.loading");
if (content) {
var loading = content.querySelector(".ring-loading");
Windows.UI.Animation.loading(loading, false);
}
}
})();
(function() {
function push_nonull(arr, item) {
if (item) arr.push(item);
}
var timerkeys = Object.keys(timer);
for (var i = 0; i < timerkeys.length; i++) {
if (timer[timerkeys[i]]) {
clearTimeout(timer[timerkeys[i]]);
timer[timerkeys[i]] = null;
}
}
var content = page.querySelector(".content." + Bridge.String.trim(swPageLabel));
var controls = page.querySelector(".controls." + Bridge.String.trim(swPageLabel));
var progress = page.querySelector(".progress");
var reason = page.querySelector(".reason");
var titlepart = [];
var textpart = [];
var storelogo = null;
if (content) {
if (bIsMulti) push_nonull(titlepart, content.querySelector(".currentfile"));
push_nonull(titlepart, content.querySelector(".pkgtitle"));
if (bIsMulti) push_nonull(titlepart, content.querySelector(".pkgtitle.multiple"));
push_nonull(titlepart, content.querySelector(".pkgapplabel"));
push_nonull(titlepart, content.querySelector(".pkgpublisher"));
push_nonull(titlepart, content.querySelector(".pkgversion"));
push_nonull(textpart, content.querySelector(".pkgfunctions-label"));
push_nonull(textpart, content.querySelector(".functions"));
push_nonull(textpart, content.querySelector(".moreinfo"));
storelogo = content.querySelector(".storelogo");
}
var refresh = function(nodes) {
for (var i = 0; i < nodes.titlepart.length; i++) nodes.titlepart[i].style.visibility = "hidden";
for (var i = 0; i < nodes.textpart.length; i++) nodes.textpart[i].style.visibility = "hidden";
if (nodes.storelogo) nodes.storelogo.style.visibility = "hidden";
if (nodes.progress) nodes.progress.style.visibility = "hidden";
if (nodes.controls) nodes.controls.style.visibility = "hidden";
if (nodes.reason) nodes.reason.style.visibility = "hidden";
var animation = Windows.UI.Animation;
timer.title = setTimeout(function(titlenodes) {
if (titlenodes) {
for (var i = 0; i < titlenodes.length; i++) {
animation.runAsync(titlenodes[i], animation.Keyframes.Flyout.toLeft, 500);
}
for (var i = 0; i < titlenodes.length; i++) titlenodes[i].style.visibility = "visible";
}
}, 0, nodes.titlepart);
timer.text = setTimeout(function(textnodes) {
if (textnodes) {
for (var i = 0; i < textnodes.length; i++) {
animation.runAsync(textnodes[i], animation.Keyframes.Flyout.toLeft, 500);
}
for (var i = 0; i < textnodes.length; i++) textnodes[i].style.visibility = "visible";
}
}, 50, nodes.textpart);
timer.logo = setTimeout(function(logonode) {
if (logonode) {
animation.runAsync(logonode, "scale-visible", 500);
logonode.style.visibility = "visible";
}
}, 100, nodes.storelogo);
timer.progress = setTimeout(function(progressnode) {
if (progressnode) {
animation.runAsync(progressnode, animation.Keyframes.Flyout.toLeft, 500);
progressnode.style.visibility = "visible";
}
}, 100, nodes.progress);
timer.controls = setTimeout(function(controlnodes) {
if (controlnodes) {
animation.runAsync(controlnodes, animation.Keyframes.Flyout.toTop, 500);
controlnodes.style.visibility = "visible";
}
}, 100, nodes.controls);
timer.reason = setTimeout(function(reasonnode) {
if (reasonnode) {
animation.runAsync(reasonnode, animation.Keyframes.Flyout.toLeft, 500);
reasonnode.style.visibility = "visible";
}
}, 100, nodes.reason);
};
refresh({
titlepart: titlepart,
textpart: textpart,
storelogo: storelogo,
progress: progress,
controls: controls,
reason: reason,
});
})();
(function() {
var page = document.querySelector(".page");
var progress = page.querySelector(".progress");
var ringLoading = progress.querySelector(".ring-loading");
if (Bridge.NString.equals(swPageLabel, "installing")) {
Windows.UI.Animation.loading(ringLoading, true);
} else {
Windows.UI.Animation.loading(ringLoading, false);
}
})();
}
function getPageLabel() {
@@ -97,15 +224,48 @@
});
Object.defineProperty(ret, "content", {
get: function() {
var content = page.querySelector(".content.splash");
return content;
try {
var content = page.querySelector(".content.splash");
return content;
} catch (e) { return null; }
},
});
Object.defineProperty(ret, "statusText", {
get: function() {
var statustext = page.querySelector(".content.splash .status-text");
return statustext.textContent;
},
set: function(value) {
var statustext = page.querySelector(".content.splash .status-text");
if (!statustext) return;
statustext.textContent = value;
}
});
ret["getImageUrl"] = function() { return ret.imagesrc; };
ret["setImageUrl"] = function(value) { ret.imagesrc = value; };
ret["getBackground"] = function() { return ret.background; };
ret["setBackground"] = function(value) { ret.background = value; };
ret["setStatusText"] = function(value) { ret.statusText = value; };
ret["getStatusText"] = function() { return ret.statusText; };
ret["getContent"] = function() { return ret.content; };
return ret;
}
function getPreinstallPage() {
return document.querySelector(".page.preinstall");
}
module.exports = {
Page: {}
Page: {
set: setPage,
get: function() {
if (isMultiPage()) {
return [getPageLabel(), "multiple"];
} else {
return getPageLabel();
}
}
}
};
Object.defineProperty(Page, "current", {
get: function() { return getPageLabel(); },
@@ -118,4 +278,364 @@
Object.defineProperty(Page, "splash", {
get: function() { return getSplashPage(); }
});
module.exports = {
setPage: setPage,
getPage: getPage,
getPageIsMulti: isMultiPage,
setPageMultiple: setPageMultiple,
getSplashPage: getSplashPage,
getSplashPageImageUrl: function() { return getSplashPage().imagesrc; },
setSplashPageImageUrl: function(value) { getSplashPage().imagesrc = value; },
getSplashPageBackground: function() { return getSplashPage().background; },
setSplashPageBackground: function(value) { getSplashPage().background = value; },
getSplashPageStatusText: function() { return getSplashPage().statusText; },
setSplashPageStatusText: function(value) { try { getSplashPage().statusText = value; } catch (e) {} },
getSplashPageContent: function() { return getSplashPage().content; },
};
function parseVersion(version) {
var v = (version || "0.0.0.0").split(".");
var ret = { major: 0, minor: 0, build: 0, revision: 0 };
if (v.length >= 1) ret.major = parseInt(v[0]);
if (v.length >= 2) ret.minor = parseInt(v[1]);
if (v.length >= 3) ret.build = parseInt(v[2]);
if (v.length >= 4) ret.revision = parseInt(v[3]);
return ret;
}
function stringifyVersion(version) {
return version.major + "." + version.minor + "." + version.build + "." + version.revision;
}
function setFlyoutDisplayInfo(pkginfo) {
var flyout = document.getElementById("moreinfo-flyout");
var content = document.getElementById("moreinfo-flyout-content");
(function() {
var name = content.querySelector(".id.name");
name.textContent = pkginfo.identity.name;
var publisher = content.querySelector(".id.publisher");
publisher.textContent = pkginfo.identity.publisher;
var version = content.querySelector(".id.version");
version.textContent = stringifyVersion(pkginfo.identity.realver);
var arch = content.querySelector(".id.arch");
if (pkginfo.type === 1) {
switch (pkginfo.identity.architecture) {
case 1:
arch.textContent = "x86";
break;
case 2:
arch.textContent = "x64";
break;
case 4:
arch.textContent = "ARM";
break;
case 8:
arch.textContent = "ARM64";
break;
case 16:
arch.textContent = "Neutral";
break;
}
} else if (pkginfo.type === 2) {
var varch = pkginfo.identity.architecture;
var strarr = [];
if (varch & 1) strarr.push("x86");
if (varch & 2) strarr.push("x64");
if (varch & 4) strarr.push("ARM");
if (varch & 8) strarr.push("ARM64");
arch.textContent = strarr.join(", ");
}
var family = content.querySelector(".id.family");
family.textContent = pkginfo.identity.package_family_name;
var full = content.querySelector(".id.full");
full.textContent = pkginfo.identity.package_full_name;
})();
(function() {
var framework = content.querySelector(".prop.framework");
framework.textContent = Bridge.Resources.byname(pkginfo.properties.framework ? "IDS_MOREINFO_PROPYES" : "IDS_MOREINFO_PROPNO");
var respkg = content.querySelector(".prop.respkg");
respkg.textContent = Bridge.Resources.byname(pkginfo.properties.removable ? "IDS_MOREINFO_PROPYES" : "IDS_MOREINFO_PROPNO");
})();
(function() {
var sys = content.querySelector(".info.sys");
var strutils = Bridge.External.String;
sys.textContent = strutils.format(Bridge.Resources.byname("IDS_MOREINFO_INFOSYS_VALUE"), pkginfo.prerequisites.os_min_version_description, stringifyVersion(pkginfo.prerequisites.os_min_version));
var lang = content.querySelector(".info.langs");
lang.innerHTML = "";
for (var i = 0; i < pkginfo.resources.languages.length; i++) {
var localeName = pkginfo.resources.languages[i];
var li = document.createElement("li");
li.textContent = Bridge.Locale.localeInfoEx(localeName, 2);
lang.appendChild(li);
}
})();
}
function noticeLoadPreinstallPage(ismul) {
setPage("preinstall", ismul);
var page = getPreinstallPage();
if (!page) return;
var content = page.querySelector(".content.preinstall");
if (!content) return;
var filelist = Bridge.Package.filepaths();
var fselect = content.querySelector(".currentfile select");
for (var i = 0; i < filelist.length; i++) {
var option = document.createElement("option");
option.value = filelist[i];
option.text = filelist[i];
fselect.appendChild(option);
}
if (filelist.length > 0) {
var strutils = Bridge.External.String;
var pkgtitle = null;
if (filelist.length <= 1) {
pkgtitle = content.querySelector(".pkgtitle");
} else {
pkgtitle = content.querySelector(".pkgtitle.multiple");
}
var pkgpublisher = content.querySelector(".pkgpublisher");
var pkgversion = content.querySelector(".pkgversion");
var storelogo = content.querySelector(".storelogo");
var storelogoimg = storelogo.querySelector("img");
var storelogofilter = storelogo.querySelector(".filter");
var pkginfo = Bridge.Package.pkginfo(filelist[0]);
if (filelist.length <= 1) {
if (!pkgtitle.hasAttribute("data-pkgname"))
pkgtitle.setAttribute("data-pkgname", pkginfo.properties.display_name);
if (!pkgtitle.hasAttribute("data-titlefmt"))
pkgtitle.setAttribute("data-titlefmt", Bridge.Resources.byname("IDS_PREINSTALL_TITLE"));
pkgtitle.innerHTML = strutils.formatInnerHtml(pkgtitle.getAttribute("data-titlefmt"), pkgtitle.getAttribute("data-pkgname"));
} else {
pkgtitle.innerHTML = strutils.formatInnerHtml(Bridge.Resources.byname("IDS_PREINSTALL_MPKGNAME"), pkginfo.properties.display_name);
}
pkgpublisher.innerHTML = strutils.formatInnerHtml(Bridge.Resources.byname("IDS_PUBLISHER"), pkginfo.properties.publisher_display_name);
pkgversion.innerHTML = strutils.formatInnerHtml(Bridge.Resources.byname("IDS_VERSION"), stringifyVersion(pkginfo.identity.version));
storelogoimg.src = pkginfo.properties.logo_base64;
storelogo.setAttribute("data-logoimg", pkginfo.properties.logo);
var backcolor = "";
if (pkginfo.applications.length > 0) {
var appinfo = pkginfo.applications[0];
backcolor = appinfo.BackgroundColor || Bridge.UI.themeColor;
} else { backcolor = Bridge.UI.themeColor; }
storelogo.style.backgroundColor = backcolor;
storelogofilter.style.background = Color.genTileBackFilter(backcolor);
var funclist = content.querySelector(".functions ul");
for (var j = 0; j < pkginfo.capabilities.capabilities_name.length; j++) {
var li = document.createElement("li");
var capname = pkginfo.capabilities.capabilities_name[j];
li.setAttribute("data-capability", capname);
li.textContent = Bridge.Package.capabilityDisplayName(capname);
if (Bridge.NString.empty(li.textContent)) li.textContent = capname;
funclist.appendChild(li);
}
for (var j = 0; j < pkginfo.capabilities.device_capabilities.length; j++) {
var capname = pkginfo.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);
funclist.appendChild(li);
}
}
setFlyoutDisplayInfo(pkginfo);
}
}
function setPreinstallPagePkgTitleFormatSingle(fmt) {
var page = document.querySelector(".page");
if (!page) return;
var content = page.querySelector(".content.preinstall");
if (!content) return;
var pkgtitle = content.querySelector("h1.pkgtitle");
pkgtitle.setAttribute("data-titlefmt", fmt);
}
function setControlButtonState(serial, title, display, ban) {
var page = document.querySelector(".page");
if (!page) return;
var controls = page.querySelector(".controls");
if (!controls) return;
var commands = controls.querySelectorAll(".command button");
try {
if (title !== void 0) commands[serial - 1].textContent = title;
if (display !== void 0) commands[serial - 1].style.display = display ? "" : "none";
if (ban !== void 0) commands[serial - 1].disabled = ban;
} catch (e) {}
}
function setLaunchWhenReady(selected, ban) {
var page = document.querySelector(".page");
if (!page) return;
var controls = page.querySelector(".controls");
if (!controls) return;
var checkbox = controls.querySelector(".checkbox input");
if (!checkbox) return;
if (selected !== void 0) checkbox.checked = selected;
if (ban !== void 0) checkbox.disabled = ban;
}
function getLaunchWhenReady() {
var page = document.querySelector(".page");
if (!page) return false;
var controls = page.querySelector(".controls");
if (!controls) return false;
var checkbox = controls.querySelector(".checkbox input");
if (!checkbox) return false;
return checkbox.checked == true;
}
function noticeLoadSelectPage() {
setPage("select", false);
setPreinstallPagePkgTitleFormatSingle(Bridge.Resources.byname("IDS_SELECT_TITLE"))
setControlButtonState(1, Bridge.Resources.byname("IDS_SELECT_OPENFILE"), true, false);
setControlButtonState(2, Bridge.Resources.byname("IDS_PREINSTALL_CANCEL"), true, false);
}
function setInstallingPackageInfoMultiple(filepath) {
var page = document.querySelector(".page");
if (!page) return;
var content = page.querySelector(".content.installing");
if (!content) return;
var progress = page.querySelector(".progress");
if (!progress) return;
var pkgtitle = content.querySelector(".pkgtitle.multiple");
var title = content.querySelector(".title.multiple");
var pkgpublisher = content.querySelector(".pkgpublisher");
var pkgversion = content.querySelector(".pkgversion");
var storelogo = content.querySelector(".storelogo");
var storelogoimg = storelogo.querySelector("img");
var storelogofilter = storelogo.querySelector(".filter");
var pkginfo = Bridge.Package.pkginfo(filepath);
pkgtitle.innerHTML = Bridge.String.formatInnerHtml(Bridge.Resources.byname("IDS_PREINSTALL_MPKGNAME"), pkginfo.properties.display_name);
pkgpublisher.innerHTML = Bridge.String.formatInnerHtml(Bridge.Resources.byname("IDS_PUBLISHER"), pkginfo.properties.publisher_display_name);
pkgversion.innerHTML = Bridge.String.formatInnerHtml(Bridge.Resources.byname("IDS_VERSION"), stringifyVersion(pkginfo.identity.version));
storelogoimg.src = pkginfo.properties.logo_base64;
storelogo.setAttribute("data-logoimg", pkginfo.properties.logo);
var backcolor = "";
if (pkginfo.applications.length > 0) {
var appinfo = pkginfo.applications[0];
backcolor = appinfo.BackgroundColor || Bridge.UI.themeColor;
} else { backcolor = Bridge.UI.themeColor; }
storelogo.style.backgroundColor = backcolor;
storelogofilter.style.background = Color.genTileBackFilter(backcolor);
}
function noticeLoadInstallingPage(ismul) {
setPage("installing", ismul);
var page = document.querySelector(".page");
if (!page) return;
var content = page.querySelector(".content.installing");
if (!content) return;
var progress = page.querySelector(".progress");
if (!progress) return;
var pkgtitle = null;
if (!ismul) {
pkgtitle = content.querySelector(".pkgtitle");
pkgtitle.setAttribute("data-titlefmt", Bridge.Resources.byname("IDS_INSTALLING_TITLE"));
}
var title = null;
if (ismul) {
title = content.querySelector(".title.multiple");
title.textContent = Bridge.Resources.byname("IDS_INSTALLING_MTITLE");
} else title = content.querySelector(".title");
}
// 0 - 100, float
function setInstallingProgress(percent) {
var page = document.querySelector(".page");
if (!page) return;
var progress = page.querySelector(".progress");
if (!progress) return;
var bar = progress.querySelector("progress");
if (typeof bar.max !== "number") bar.max = 100;
if (typeof bar.min !== "number") bar.min = 0;
bar.value = bar.min + (bar.max - bar.min) * (percent * 0.01);
if (bar.value > bar.max) bar.value = bar.max;
if (bar.value < bar.min) bar.value = bar.min;
}
function setInstallingStatus(status) {
var page = document.querySelector(".page");
if (!page) return;
var progress = page.querySelector(".progress");
if (!progress) return;
var statusbar = progress.querySelector(".status");
if (!statusbar) return;
statusbar.textContent = status;
}
function noticeLoadInstallSuccessPage(ismul) {
setPage("installsuccess", ismul);
var page = document.querySelector(".page");
var files = Bridge.Package.filepaths();
var pkginfo = Bridge.Package.pkginfo(files[0]);
if (ismul) {
var content = page.querySelector(".content.installsuccess");
if (!content) return;
var title = content.querySelector(".currentfile .title.multiple");
title.textContent = Bridge.Resources.byname("IDS_SUCCESS_MTITLE");
var hasApp = false;
for (var i = 0; i < files.length; i++) {
var pi = Bridge.Package.pkginfo(files[i]);
if (pi.applications && pi.applications.length > 0) {
hasApp = true;
break;
}
}
setControlButtonState(1, Bridge.Resources.byname(hasApp ? "IDS_SUCCESS_LAUNCH" : "IDS_COMMAND_CANCEL"), true, false);
} else {
setPreinstallPagePkgTitleFormatSingle(Bridge.Resources.byname("IDS_SUCCESS_TITLE"));
setControlButtonState(1, Bridge.Resources.byname(pkginfo.applications && pkginfo.applications.length > 0 ? "IDS_SUCCESS_LAUNCH" : "IDS_COMMAND_CANCEL"), true, false);
}
}
function noticeLoadInstallFailedPage(ismul) {
setPage("installfailed", ismul);
var page = document.querySelector(".page");
if (!page) return;
var content = page.querySelector(".content.installfailed");
if (!content) return;
var files = Bridge.Package.filepaths();
setControlButtonState(1, Bridge.Resources.byname("IDS_COMMAND_CANCEL"), true, false);
var title = null;
var reason = page.querySelector(".reason textarea");
if (ismul) {
title = content.querySelector(".currentfile .title.multiple");
title.textContent = Bridge.Resources.byname("IDS_FAILED_MTITLE");
var select = content.querySelector(".currentfile select");
select.value = "";
select.value = files[0];
try {
if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false); // bubbles, cancelable
select.dispatchEvent(event);
} else if (select.fireEvent) { // IE <= 8
select.fireEvent('onchange');
}
} catch (e) {}
} else {
title = content.querySelector(".title");
setPreinstallPagePkgTitleFormatSingle(Bridge.Resources.byname("IDS_FAILED_STITLE"));
var hres = Bridge.Package.installResult(files[0]);
reason.textContent = hres.message;
}
}
module.exports = {
noticeLoadPreinstallPage: noticeLoadPreinstallPage,
parseVersion: parseVersion,
stringifyVersion: stringifyVersion,
setFlyoutDisplayInfo: setFlyoutDisplayInfo,
setPreinstallPagePkgTitleFormatSingle: setPreinstallPagePkgTitleFormatSingle,
setControlButtonState: setControlButtonState,
setLaunchWhenReady: setLaunchWhenReady,
getLaunchWhenReady: getLaunchWhenReady,
noticeLoadSelectPage: noticeLoadSelectPage,
setInstallingPackageInfoMultiple: setInstallingPackageInfoMultiple,
noticeLoadInstallingPage: noticeLoadInstallingPage,
setInstallingProgress: setInstallingProgress,
setInstallingStatus: setInstallingStatus,
noticeLoadInstallSuccessPage: noticeLoadInstallSuccessPage,
noticeLoadInstallFailedPage: noticeLoadInstallFailedPage
};
})(this);

33
shared/html/js/tileback.js Normal file
View File

@@ -0,0 +1,33 @@
(function() {
"use strict";
function calcColorComponent(x) {
var y;
if (x <= 127.5) {
y = 0.999 * x - 5.4361 + x;
} else {
y = -0.999 * x + 249.32 + x;
}
return (y < 0 ? 0 : y) % 256; // 确保y不小于0
}
function roundToNearestInt(num) {
return Math.round(num);
}
function genTileBackFilter(backcolor) {
var basecolor = Color.parse(backcolor);
var rightcolor = new Color(
roundToNearestInt(calcColorComponent(basecolor.red)),
roundToNearestInt(calcColorComponent(basecolor.green)),
roundToNearestInt(calcColorComponent(basecolor.blue)),
0.25
);
return "linear-gradient(to right, rgba(0,0,0,0), " + rightcolor.RGBA.stringify() + ")";
}
module.exports = {
Color: {
genTileBackFilter: genTileBackFilter
}
};
})();