WinJS自定义控件之 MsgBox

基本用法

<div data-win-control="XboxJS.OK.MsgBox" data-win-options="{selector:'.pop-main'}"></div>

参数为在控件内的内容，且这个参数必须提供

此控件提供两个非常有意义的事件

document.querySelector("#go").addEventListener("boxShown", function () { console.log("shown") });
document.querySelector("#go").addEventListener("boxClosed", function () { console.log("closed") });

触发时机为MsgBox出现后和关闭后

两个公开方法 showMsgBox hideMsgBox

及几个变量

(function () {
    "use strict";

    var msgbox = WinJS.Class.define(
        function (element, options) {
            //Constructor
            var that = this;
            this._element = element;
            // this._winControl = this._element.winControl;
            this._lastFoucs = null;
            this._isShown = false;

            //element for the background covered the whole page
            this._backgroundEle = document.createElement("div");
            this._element.appendChild(this._backgroundEle);
            this._backgroundEle.id = "msgbox";
            WinJS.Utilities.addClass(this._element, "msgBox");

            //element as the msgbox panel and centre the content
            this._panel = document.createElement("div");
            this._backgroundEle.appendChild(this._panel);
            WinJS.Utilities.addClass(this._panel, "pop-contentSection");

            var parentEle = null;
            var findRootEl = function (parentEle) {
                if (WinJS.Utilities.hasClass(parentEle.parentElement, "pagecontrol")) {
                    return parentEle.parentElement;
                } else {
                    return findRootEl(parentEle.parentElement);
                }
            };

            this._rootEle = findRootEl(this._element);
            WinJS.Utilities.addClass(this._rootEle.querySelector('.win-layout-titlesafeheader'), "haspopup");
     

            //check the content element
            if (options && options.selector) {
                this._contentEle = this._rootEle.querySelector(options.selector).cloneNode(true);
            } else {
                console.error("the parameter selector is required");
            }

            //add content into the msgbox
            this._panel.appendChild(this._contentEle);



        },
        {
            //Instance members

            element: {
                get: function () { return this._element; }
            },
            lastFocus: {
                get: function () { return this._lastFoucs; }
            },
            isShown: {
                get: function () { return this.isShown; }
            },
            showMsgBox: function () {

                //disable the VUI & NUI for the controls not in popup
                this._winControlCollection = this._rootEle.querySelectorAll("div:not(.msgbox) div[data-win-control]");
                for (var i = 0; i < this._winControlCollection.length; i++) {
                    WinJS.Utilities.addClass(this._winControlCollection[i], "win-voice-disableoverride");
                }
                WinJS.Utilities.removeClass(this._element, "win-voice-disableoverride");
                var internalControlCollection = this._rootEle.querySelectorAll("div.msgBox div[data-win-control]");
                for (var i = 0; i < internalControlCollection.length; i++) {
                    WinJS.Utilities.removeClass(internalControlCollection[i], "win-voice-disableoverride");
                }

                this._scrollBarCollection = this._rootEle.querySelectorAll("div:not(.msgbox) .win-scrollindicator");
                var internalScrollCollection = this._rootEle.querySelectorAll("div.msgBox .win-scrollindicator");
                for (var i = 0; i < this._scrollBarCollection.length; i++) {
                    this._scrollBarCollection[i].style.display = "none";
                }
                for (var i = 0; i < internalScrollCollection.length; i++) {
                    internalScrollCollection[i].style.display = "-ms-grid";
                }

                //show
                this._backgroundEle.style.display = "block";
                //this._backgroundEle.style.opacity = "1";

                //calculate the height of the content
                this._contentHeight = window.getComputedStyle(this._contentEle, null).getPropertyValue("height");

                this._panelHeight = (parseInt(this._contentHeight) + 40) + "px";

                //set panel Height
                this._panel.style.height = this._panelHeight;

                this._panel.style.marginTop = (1080 - parseInt(this._panelHeight)) / 2 + "px";

                this._lastFoucs = document.activeElement;
                var newFocusRoot = this._rootEle.querySelector("#msgbox");
                XboxJS.UI.AutomaticFocus.focusRoot = newFocusRoot;

                //initial focus
                if (this._rootEle.querySelector("#msgbox").getElementsByClassName("win-focusable")) {
                    this._rootEle.querySelector("#msgbox").getElementsByClassName("win-focusable")[0].focus();
                }
                this._isShown = true;
                this.dispatchEvent("boxShown");
            },
            hideMsgBox: function () {

                for (var i = 0; i < this._winControlCollection.length; i++) {
                    WinJS.Utilities.removeClass(this._winControlCollection[i], "win-voice-disableoverride");
                }

                for (var i = 0; i < this._scrollBarCollection.length; i++) {
                    this._scrollBarCollection[i].style.display = "";
                }


                this._backgroundEle.style.display = "none";
                //this._backgroundEle.style.opacity = "0";
                XboxJS.UI.AutomaticFocus.focusRoot = document.body;
                this._lastFoucs.focus();
                this._isShown = false;

                this.dispatchEvent("boxClosed");
            },
        },
{
    //Static members
}
        );



    //For Namespace
    WinJS.Namespace.define("XboxJS.OK", {
        MsgBox: msgbox
    });

    //For Events
    WinJS.Class.mix(XboxJS.OK.MsgBox,
        WinJS.Utilities.createEventProperties("boxShown","boxClosed"),
        WinJS.UI.DOMEventMixin);

//    WinJS.Class.mix(WinJS.Utilities.createEventProperties("boxClosed"),
//WinJS.UI.DOMEventMixin);

})(this, WinJS);

配套CSS

#msgbox {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(51,51,51,0.4);
    z-index: 9999;
    left: 0;
    top: 0;
    display: none;
    /*opacity: 0;
    transition-property: opacity;
    transition-duration: 5s;
    transition-timing-function: linear;*/
}

.pop-contentSection {
    height: auto;
    /*margin-top: 340px;*/
    width: 1920px;
    background-color: rgba(51,51,51,1);
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

.win-voice-voicemodeactive .haspopup.win-layout-titlesafeheader > button.win-layout-backbutton, .win-gestureactive .haspopup.win-layout-titlesafeheader > button:not(.win-hidden).win-layout-backbutton {
    display: none;
}