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

spine-ts/build/spine-widget.js

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

spine-ts/widget/example/player-test.html

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

spine-ts/widget/src/Player.ts

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