WinJS 自定义控件 之 GameTag

1. 单独js文件内写入control

2. default.html 中引入

   基本使用方法

   <div data-win-control="XboxJS.OK.GameTag" data-win-options="{location:'right',VUIText:'SignIn',displayName:false}"></div>

options 为可选参数

默认行为是 header左侧， VUI是Profile， 并且显示名字

      /// Displays an item that can be invoked.
        /// 
        /// 
        /// 
        /// HTML content
        /// ]]>
        /// Raised when the user taps or clicks the item.
        /// Main container for the selection item control.
        /// Used to display an outline when the main container has keyboard focus.
        /// 
        /// 
        /// 
        GameTag: WinJS.Class.define(function (element, options) {
            this._winControl = new XboxJS.UI.ItemContainer(element) || new XboxJS.UI.ItemContainer();
            var that = this;
            this._element = this._winControl._element;
            WinJS.Utilities.addClass(this._element, "gameTag");
            WinJS.Utilities.addClass(this._element, "layout-hidewhensnapped");
            this._element.setAttribute("data-win-voice", "{ srcElement: select('.win-text-tiletitle'), targetElement: select('.win-voice-textdisplay')}");
            this._winItem = this._element.querySelector(".win-item");
            //Items elements
            this._childContain = document.createElement("div");
            this._winItem.appendChild(this._childContain);
            WinJS.Utilities.addClass(this._childContain, "gamerContainer");


            //avatar and gamerName

            this._avatar = document.createElement("div");
            this._avatar.id = "avatar";
            this._childContain.appendChild(this._avatar);

            this._gamerName = document.createElement("div");
            this._gamerName.id = "gamerName";
            this._childContain.appendChild(this._gamerName);

            //VUI Text 
            this._voiceText = document.createElement("div");
            WinJS.Utilities.addClass(this._voiceText, "win-text-tiletitle win-voice-inactivetext");
            this._winItem.appendChild(this._voiceText);

            //Default value
            this._location = "left";
            this.locationClass = "gameTagLeft";
            this._VUIText = "Profile";
            this._displayName = true;
            this._animateWidth = "64px";
            //this._animationRunning = false;

            if (options) {
                this._location = options.location || this._location;
                this._VUIText = options.VUIText || this._VUIText;
                this._displayName = options.displayName;
            }
            if (this._location.toLocaleLowerCase() == "right") {
                this.locationClass = "gameTagRight"
            }

            WinJS.Utilities.addClass(this._element, this.locationClass);
            this._voiceText.innerText = this._VUIText;

            if (!this._displayName) {
                WinJS.Utilities.addClass(this._gamerName, "win-hidden");
            }

            //Binding Data
            if (Windows.Xbox) {
                MyApp.Utilities.User.getGamerPicUrlAsync(Windows.Xbox.System.UserPictureSize.small).then(function (url) {
                    // var interValHandler = setInterval(function () {
                    //if (!XboxJS.Utilities._isTransitioning) {
                    that._avatar.style.backgroundImage = "url(" + url + ")";
                    that._element.addEventListener("invoked", MyApp.Utilities.User.invokeSwitchUser, false);

                    var currentUser = MyApp.Utilities.User.tryGetPrimaryUser();
                    if (currentUser) {
                        that._gamerName.innerText = currentUser.displayInfo.gamertag;
                    }
                    //        clearInterval(interValHandler);
                    //    }
                    //}, 200);
                    //}, function error() {

                }).then(function () {
                    that._animateWidth = window.getComputedStyle(that._gamerName, null).getPropertyValue("width");
                    if (that._animateWidth != 0) {
                        that._element.addEventListener("focusin", function (e) {
                            //e.preventDefault();
                            //e.stopPropagation();
                            //that._animationRunning = true;
                            that._childContain.style.width = parseInt(that._animateWidth) + 64 + 25 + 5 + "px";
                            //setTimeout(function () {
                            //    this.focus();
                            //}, 1000)
                        });

                        that._childContain.addEventListener("transitionend", function () {
                            //that._animationRunning = false;
                            //console.log("transitionend:" + that._animationRunning);
                        })
                        that._element.addEventListener("blur", function (e) {

                            //console.log("blur:" +that._animationRunning);
                            //if (that._animationRunning) {
                            //    e.preventDefault();
                            //} else {
                                that._childContain.style.width = "64px";
                            //}
                        });

                    }
                });
            }
        }),
    });
})(this, WinJS);

需要添加的相应CSS 再default.css

.gameTag.gameTagLeft {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
}

.gameTag.gameTagRight {
    -ms-grid-column: 5;
    -ms-grid-row: 1;
}

.gameTag .gamerContainer {
    display: -ms-flexbox;
    overflow: hidden;
    transition-delay: 0s;
    transition-duration: 1s;
    transition-property: width;
    transition-timing-function: ease;
    width: 64px;
}

.gameTag:focus .gamerContainer {
    width: auto;
}

.gameTag #avatar {
    /*background-image: url('/images/avantar_cat.jpg');*/
    width: 64px;
    height: 64px;
}
/*hide the VUI text for gameTag*/
.gameTag .win-voice-inactivetext {
    display: none;
}

.gameTag .win-voice-host {
    overflow: visible;
}

.gameTag #gamerName {
    margin-left: 25px;
}