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

This commit is contained in:
badlogic 2018-12-10 15:39:12 +01:00
parent c09b0673ac
commit 6596319c36
4 changed files with 12299 additions and 12228 deletions

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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