[ts][player] popup is dismissed if button is pressed a second time.

spine-ts/build/spine-widget.d.ts

@@ -1698,6 +1698,7 @@ declare module spine {
         atlasUrl: string;
         animation: string;
         animations: string[];
+        defaultMix: number;
         skin: string;
         skins: string[];
         controlBones: string[];
@@ -1772,6 +1773,7 @@ declare module spine {
         validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
         showError(error: string): void;
         render(): HTMLElement;
+        private lastPopup;
         showSpeedDialog(speedButton: HTMLElement): void;
         showAnimationsDialog(animationsButton: HTMLElement): void;
         showSkinsDialog(skinButton: HTMLElement): void;

spine-ts/build/spine-widget.js

@@ -9457,7 +9457,7 @@ var spine;
                     return;
                 }
                 if (!isContained(_this.dom, event.target)) {
-					_this.dom.parentNode.removeChild(_this.dom);
+                    _this.dom.remove();
                     window.removeEventListener("click", windowClickListener);
                     dismissedListener();
                     dismissed = true;
@@ -9631,6 +9631,8 @@ var spine;
                 config.controlBones = [];
             if (typeof config.showControls === "undefined")
                 config.showControls = true;
+            if (typeof config.defaultMix === "undefined")
+                config.defaultMix = 0.25;
             return config;
         };
         SpinePlayer.prototype.showError = function (error) {
@@ -9753,6 +9755,13 @@ var spine;
         };
         SpinePlayer.prototype.showSpeedDialog = function (speedButton) {
             var _this = this;
+            if (this.lastPopup)
+                this.lastPopup.dom.remove();
+            if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Speed") {
+                this.lastPopup = null;
+                speedButton.classList.remove("spine-player-button-icon-speed-selected");
+                return;
+            }
             var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Speed</div>\n\t\t\t\t<hr>\n\t\t\t\t<div class=\"spine-player-row\" style=\"user-select: none; align-items: center; padding: 8px;\">\n\t\t\t\t\t<div class=\"spine-player-column\">\n\t\t\t\t\t\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom: 4px;\"></div>\n\t\t\t\t\t\t<div class=\"spine-player-row\" style=\"justify-content: space-between;\">\n\t\t\t\t\t\t\t<div>0.1x</div>\n\t\t\t\t\t\t\t<div>1x</div>\n\t\t\t\t\t\t\t<div>2x</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
             var sliderParent = findWithClass(popup.dom, "spine-player-speed-slider")[0];
             var slider = new Slider(2, 0.1, true);
@@ -9765,9 +9774,17 @@ var spine;
             popup.show(function () {
                 speedButton.classList.remove("spine-player-button-icon-speed-selected");
             });
+            this.lastPopup = popup;
         };
         SpinePlayer.prototype.showAnimationsDialog = function (animationsButton) {
             var _this = this;
+            if (this.lastPopup)
+                this.lastPopup.dom.remove();
+            if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Animations") {
+                this.lastPopup = null;
+                animationsButton.classList.remove("spine-player-button-icon-animations-selected");
+                return;
+            }
             if (!this.skeleton || this.skeleton.data.animations.length == 0)
                 return;
             var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
@@ -9793,9 +9810,17 @@ var spine;
             popup.show(function () {
                 animationsButton.classList.remove("spine-player-button-icon-animations-selected");
             });
+            this.lastPopup = popup;
         };
         SpinePlayer.prototype.showSkinsDialog = function (skinButton) {
             var _this = this;
+            if (this.lastPopup)
+                this.lastPopup.dom.remove();
+            if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Skins") {
+                this.lastPopup = null;
+                skinButton.classList.remove("spine-player-button-icon-skins-selected");
+                return;
+            }
             if (!this.skeleton || this.skeleton.data.animations.length == 0)
                 return;
             var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Skins</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
@@ -9821,9 +9846,17 @@ var spine;
             popup.show(function () {
                 skinButton.classList.remove("spine-player-button-icon-skins-selected");
             });
+            this.lastPopup = popup;
         };
         SpinePlayer.prototype.showSettingsDialog = function (settingsButton) {
             var _this = this;
+            if (this.lastPopup)
+                this.lastPopup.dom.remove();
+            if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Debug") {
+                this.lastPopup = null;
+                settingsButton.classList.remove("spine-player-button-icon-settings-selected");
+                return;
+            }
             if (!this.skeleton || this.skeleton.data.animations.length == 0)
                 return;
             var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t<div class=\"spine-player-popup-title\">Debug</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t</li>\n\t\t\t");
@@ -9850,6 +9883,7 @@ var spine;
             popup.show(function () {
                 settingsButton.classList.remove("spine-player-button-icon-settings-selected");
             });
+            this.lastPopup = popup;
         };
         SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
             var _this = this;
@@ -9979,7 +10013,7 @@ var spine;
             }
             this.skeleton = new spine.Skeleton(skeletonData);
             var stateData = new spine.AnimationStateData(skeletonData);
-			stateData.defaultMix = 0.2;
+            stateData.defaultMix = this.config.defaultMix;
             this.animationState = new spine.AnimationState(stateData);
             if (this.config.controlBones) {
                 this.config.controlBones.forEach(function (bone) {

spine-ts/widget/src/Player.ts

@@ -53,6 +53,9 @@
 		/* Optional: list of animation names from which the user can choose. */
 		animations: string[]
 
+		/* Optional: the default mix time used to switch between two animations. */
+		defaultMix: number
+
 		/* Optional: the name of the skin to be set. Default: the default skin. */
 		skin: string
 
@@ -158,7 +161,7 @@
 					return;
 				}
 				if (!isContained(this.dom, event.target)) {
-					this.dom.parentNode.removeChild(this.dom);
+					this.dom.remove();
 					window.removeEventListener("click", windowClickListener);
 					dismissedListener();
 					dismissed = true;
@@ -354,6 +357,9 @@
 			if (typeof config.showControls === "undefined")
 				config.showControls = true;
 
+			if (typeof config.defaultMix === "undefined")
+				config.defaultMix = 0.25;
+
 			return config;
 		}
 
@@ -507,7 +513,14 @@
 			return dom;
 		}
 
+		private lastPopup: Popup;
 		showSpeedDialog (speedButton: HTMLElement) {
+			if (this.lastPopup) this.lastPopup.dom.remove()
+			if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Speed") {
+				this.lastPopup = null;
+				speedButton.classList.remove("spine-player-button-icon-speed-selected")
+				return;
+			}
 			let popup = new Popup(this.dom, this.playerControls, /*html*/`
 				<div class="spine-player-popup-title">Speed</div>
 				<hr>
@@ -533,9 +546,16 @@
 			popup.show(() => {
 				speedButton.classList.remove("spine-player-button-icon-speed-selected")
 			});
+			this.lastPopup = popup;
 		}
 
 		showAnimationsDialog (animationsButton: HTMLElement) {
+			if (this.lastPopup) this.lastPopup.dom.remove()
+			if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Animations") {
+				this.lastPopup = null;
+				animationsButton.classList.remove("spine-player-button-icon-animations-selected")
+				return;
+			}
 			if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
 
 			let popup = new Popup(this.dom, this.playerControls, /*html*/`
@@ -574,9 +594,16 @@
 			popup.show(() => {
 				animationsButton.classList.remove("spine-player-button-icon-animations-selected")
 			});
+			this.lastPopup = popup;
 		}
 
 		showSkinsDialog (skinButton: HTMLElement) {
+			if (this.lastPopup) this.lastPopup.dom.remove()
+			if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Skins") {
+				this.lastPopup = null;
+				skinButton.classList.remove("spine-player-button-icon-skins-selected")
+				return;
+			}
 			if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
 
 			let popup = new Popup(this.dom, this.playerControls, /*html*/`
@@ -616,9 +643,16 @@
 			popup.show(() => {
 				skinButton.classList.remove("spine-player-button-icon-skins-selected")
 			});
+			this.lastPopup = popup;
 		}
 
 		showSettingsDialog (settingsButton: HTMLElement) {
+			if (this.lastPopup) this.lastPopup.dom.remove()
+			if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Debug") {
+				this.lastPopup = null;
+				settingsButton.classList.remove("spine-player-button-icon-settings-selected")
+				return;
+			}
 			if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
 
 			let popup = new Popup(this.dom, this.playerControls, /*html*/`
@@ -653,6 +687,7 @@
 			popup.show(() => {
 				settingsButton.classList.remove("spine-player-button-icon-settings-selected")
 			});
+			this.lastPopup = popup;
 		}
 
 		drawFrame (requestNextFrame = true) {
@@ -808,7 +843,7 @@
 			}
 			this.skeleton = new Skeleton(skeletonData);
 			let stateData = new AnimationStateData(skeletonData);
-			stateData.defaultMix = 0.2;
+			stateData.defaultMix = this.config.defaultMix;
 			this.animationState = new AnimationState(stateData);
 
 			// Check if all controllable bones are in the skeleton