UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][player] Popup stays within bounds of player.

Browse Source
This commit is contained in:
badlogic 2018-11-22 15:53:44 +01:00
parent 7910e7cc3e
commit 980ae773d3
5 changed files with 12055 additions and 12026 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
spine-ts/build/spine-widget.js
View File

@ -9402,7 +9402,8 @@ var spine;
var spine;
(function (spine) {
var Popup = (function () {
function Popup(parent, htmlContent) {
function Popup(player, parent, htmlContent) {
this.player = player;
this.dom = createElement("\n\t\t\t\t<div class=\"spine-player-popup spine-player-hidden\">\n\t\t\t\t</div>\n\t\t\t");
this.dom.innerHTML = htmlContent;
parent.appendChild(this.dom);
@ -9411,6 +9412,16 @@ var spine;
var _this = this;
if (dismissedListener === void 0) { dismissedListener = function () { }; }
this.dom.classList.remove("spine-player-hidden");
var dismissed = false;
var resize = function () {
if (!dismissed)
requestAnimationFrame(resize);
var bottomOffset = Math.abs(_this.dom.getBoundingClientRect().bottom - _this.player.getBoundingClientRect().bottom);
var rightOffset = Math.abs(_this.dom.getBoundingClientRect().right - _this.player.getBoundingClientRect().right);
var maxHeight = _this.player.clientHeight - bottomOffset - rightOffset;
_this.dom.style.maxHeight = maxHeight + "px";
};
requestAnimationFrame(resize);
var justClicked = true;
var windowClickListener = function (event) {
if (justClicked) {
@ -9421,6 +9432,7 @@ var spine;
_this.dom.parentNode.removeChild(_this.dom);
window.removeEventListener("click", windowClickListener);
dismissedListener();
dismissed = true;
}
};
window.addEventListener("click", windowClickListener);
@ -9699,7 +9711,7 @@ var spine;
};
SpinePlayer.prototype.showSpeedDialog = function (speedButton) {
var _this = this;
var popup = new Popup(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 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);
sliderParent.appendChild(slider.render());
@ -9716,7 +9728,7 @@ var spine;
var _this = this;
if (!this.skeleton || this.skeleton.data.animations.length == 0)
return;
var popup = new Popup(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");
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");
var rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.animations.forEach(function (animation) {
if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0) {
@ -9744,7 +9756,7 @@ var spine;
var _this = this;
if (!this.skeleton || this.skeleton.data.animations.length == 0)
return;
var popup = new Popup(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");
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");
var rows = findWithClass(popup.dom, "spine-player-list")[0];
this.skeleton.data.skins.forEach(function (skin) {
if (_this.config.skins && _this.config.skins.indexOf(skin.name) < 0) {
@ -9772,7 +9784,7 @@ var spine;
var _this = this;
if (!this.skeleton || this.skeleton.data.animations.length == 0)
return;
var popup = new Popup(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");
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");
var rows = findWithClass(popup.dom, "spine-player-list")[0];
var makeItem = function (label, name) {
var row = createElement("<li class=\"spine-player-list-item\"></li>");

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/widget/example/player-test.html
View File

@ -15,7 +15,7 @@ body {
</style>
<body>
<div id="container" style="width: 480px; height: 320px;"></div>
<div id="container" style="width: 480px; height: 200px;"></div>
</body>
<script>
new spine.SpinePlayer(document.getElementById("container"), {

27
spine-ts/widget/src/Player.ts
View File

@ -108,7 +108,7 @@
class Popup {
public dom: HTMLElement;
constructor(parent: HTMLElement, htmlContent: string) {
constructor(private player: HTMLElement, parent: HTMLElement, htmlContent: string) {
this.dom = createElement(/*html*/`
<div class="spine-player-popup spine-player-hidden">
</div>
@ -119,6 +119,20 @@
show (dismissedListener = () => {}) {
this.dom.classList.remove("spine-player-hidden");
// Make sure the popup isn't bigger than the player.
var dismissed = false;
let resize = () => {
if (!dismissed) requestAnimationFrame(resize);
let bottomOffset = Math.abs(this.dom.getBoundingClientRect().bottom - this.player.getBoundingClientRect().bottom);
let rightOffset = Math.abs(this.dom.getBoundingClientRect().right - this.player.getBoundingClientRect().right);
let maxHeight = this.player.clientHeight - bottomOffset - rightOffset;
this.dom.style.maxHeight = maxHeight + "px";
}
requestAnimationFrame(resize);
// Dismiss when clicking somewhere else outside
// the popup
var justClicked = true;
let windowClickListener = (event: any) => {
if (justClicked) {
@ -129,6 +143,7 @@
this.dom.parentNode.removeChild(this.dom);
window.removeEventListener("click", windowClickListener);
dismissedListener();
dismissed = true;
}
}
window.addEventListener("click", windowClickListener);
@ -218,6 +233,8 @@
if (this.change) this.change(percentage);
}
});
return this.slider;
}
@ -454,7 +471,7 @@
}
showSpeedDialog (speedButton: HTMLElement) {
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Speed</div>
<hr>
<div class="spine-player-row" style="user-select: none; align-items: center; padding: 8px;">
@ -484,7 +501,7 @@
showAnimationsDialog (animationsButton: HTMLElement) {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Animations</div>
<hr>
<ul class="spine-player-list"></ul>
@ -525,7 +542,7 @@
showSkinsDialog (skinButton: HTMLElement) {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Skins</div>
<hr>
<ul class="spine-player-list"></ul>
@ -567,7 +584,7 @@
showSettingsDialog (settingsButton: HTMLElement) {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Debug</div>
<hr>
<ul class="spine-player-list">