Update Shell

shared/html/js/animation.js

@@ -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
                 }
             }
         }

shared/html/js/bridge.js

@@ -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; },
     });

shared/html/js/color.js

@@ -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);

shared/html/js/event.js

@@ -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"
             }
         };

shared/html/js/pages.js

@@ -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);

shared/html/js/tileback.js

@@ -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
+        }
+    };
+})();