0.0.1 release

typhonjs-fvtt-lib · Dec 16, 2021 · e58b692 · e58b692
1 parent 6a296ac
commit e58b692
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,8 @@
+# Changelog
+
+## Release 0.0.1
+Updated SvelteApplication / SvelteFormApplication `setPosition` to automatically determine `noHeight` / `noWidth` from 
+style `height` or `width`.
+
+## Release 0.0.0
+Initial release
diff --git a/_dist/application/SvelteApplication.js b/_dist/application/SvelteApplication.js
@@ -444,16 +444,20 @@ export class SvelteApplication extends Application
    }
 
    /**
-    * Modified Application `setPosition` to support QuestTrackerApp for switchable resizable globalThis.
-    * Set the application position and store its new location.
+    * Modified Application `setPosition` which changes a few aspects from the default {@link Application.setPosition}.
+    * The gate on `popOut` is removed, so if manually called popOut applications can use `setPosition`.
+    *
+    * There are two new options `noHeight` and `noWidth` that respect `width` & `height` style options while still
+    * producing a correct position object in return. You may set these options manually, but they are also automatically
+    * determined when not explicitly provided by checking if the target element style for `height` or `width` is `auto`.
     *
     * @param {object}               [opts] - Optional parameters.
     *
     * @param {number|null}          [opts.left] - The left offset position in pixels
     *
     * @param {number|null}          [opts.top] - The top offset position in pixels
     *
-    * @param {number|null}          [opts.width] - The application width in pixels
+    * @param {number|string|null}   [opts.width] - The application width in pixels
     *
     * @param {number|string|null}   [opts.height] - The application height in pixels
     *
@@ -466,12 +470,18 @@ export class SvelteApplication extends Application
     * @returns {{left: number, top: number, width: number, height: number, scale:number}}
     * The updated position object for the application containing the new values
     */
-   setPosition({ left, top, width, height, scale, noHeight = false, noWidth = false } = {})
+   setPosition({ left, top, width, height, scale, noHeight, noWidth } = {})
    {
       const el = this.elementTarget;
       const currentPosition = this.position;
       const styles = globalThis.getComputedStyle(el);
 
+      // Automatically determine if noHeightActual from manual value or when `el.style.height` is `auto`.
+      const noHeightActual = typeof noHeight === 'boolean' ? noHeight : el.style.height === 'auto';
+
+      // Automatically determine if noWidthActual from manual value or when `el.style.width` is `auto`.
+      const noWidthActual = typeof noWidth === 'boolean' ? noWidth : el.style.width === 'auto';
+
       // Update width if an explicit value is passed, or if no width value is set on the element
       if (!el.style.width || width)
       {
@@ -480,7 +490,7 @@ export class SvelteApplication extends Application
          const maxW = el.style.maxWidth || globalThis.innerWidth;
          currentPosition.width = width = Math.clamped(tarW, minW, maxW);
 
-         if (!noWidth) { el.style.width = `${width}px`; }
+         if (!noWidthActual) { el.style.width = `${width}px`; }
          if ((width + currentPosition.left) > globalThis.innerWidth) { left = currentPosition.left; }
       }
       width = el.offsetWidth;
@@ -493,7 +503,7 @@ export class SvelteApplication extends Application
          const maxH = el.style.maxHeight || globalThis.innerHeight;
          currentPosition.height = height = Math.clamped(tarH, minH, maxH);
 
-         if (!noHeight) { el.style.height = `${height}px`; }
+         if (!noHeightActual) { el.style.height = `${height}px`; }
          if ((height + currentPosition.top) > globalThis.innerHeight + 1) { top = currentPosition.top - 1; }
       }
       height = el.offsetHeight;

diff --git a/_dist/application/legacy/HandlebarsApplication.js b/_dist/application/legacy/HandlebarsApplication.js
@@ -33,6 +33,7 @@ export class HandlebarsApplication extends SvelteApplication
     * of ApplicationShell if the original popOut value is true.
     *
     * @inheritDoc
+    * @ignore
     */
    async _render(force, options)
    {
@@ -42,6 +43,14 @@ export class HandlebarsApplication extends SvelteApplication
       this.options.popOut = this.#orignalPopOut;
    }
 
+   /**
+    * Append HTML to application shell content area.
+    *
+    * @param {JQuery}   html - new content.
+    *
+    * @private
+    * @ignore
+    */
    _injectHTML(html)
    {
       // Mounts any Svelte components.
@@ -59,6 +68,7 @@ export class HandlebarsApplication extends SvelteApplication
     * application frame / title for pop-out applications.
     *
     * @inheritDoc
+    * @ignore
     */
    _replaceHTML(element, html)  // eslint-disable-line no-unused-vars
    {
@@ -76,12 +86,15 @@ export class HandlebarsApplication extends SvelteApplication
          elementContent.appendChild(...html);
 
          // Use the setter from `SvelteFormApplication` to set the title store.
+         /** @ignore */
          this.title = this.title; // eslint-disable-line no-self-assign
       }
       else
       {
          element.replaceWith(html);
+         /** @ignore */
          this._element = html;
+         /** @ignore */
          this.elementTarget = html[0];
       }
    }

diff --git a/_dist/application/legacy/HandlebarsFormApplication.js b/_dist/application/legacy/HandlebarsFormApplication.js
@@ -34,6 +34,7 @@ export class HandlebarsFormApplication extends SvelteFormApplication
     * of ApplicationShell if the original popOut value is true.
     *
     * @inheritDoc
+    * @ignore
     */
    async _render(force, options)
    {
@@ -48,6 +49,7 @@ export class HandlebarsFormApplication extends SvelteFormApplication
     * implementations.
     *
     * @inheritDoc
+    * @ignore
     */
    async _renderInner(data)
    {
@@ -59,6 +61,14 @@ export class HandlebarsFormApplication extends SvelteFormApplication
       return html;
    }
 
+   /**
+    * Append HTML to application shell content area.
+    *
+    * @param {JQuery}   html - new content.
+    *
+    * @private
+    * @ignore
+    */
    _injectHTML(html)
    {
       // Mounts any Svelte components.
@@ -76,6 +86,7 @@ export class HandlebarsFormApplication extends SvelteFormApplication
     * application frame / title for pop-out applications.
     *
     * @inheritDoc
+    * @ignore
     */
    _replaceHTML(element, html)  // eslint-disable-line no-unused-vars
    {
@@ -93,12 +104,15 @@ export class HandlebarsFormApplication extends SvelteFormApplication
          elementContent.appendChild(...html);
 
          // Use the setter from `SvelteFormApplication` to set the title store.
+         /** @ignore */
          this.title = this.title; // eslint-disable-line no-self-assign
       }
       else
       {
          element.replaceWith(html);
+         /** @ignore */
          this._element = html;
+         /** @ignore */
          this.elementTarget = html[0];
       }
    }

diff --git a/_dist/application/legacy/SvelteFormApplication.js b/_dist/application/legacy/SvelteFormApplication.js
@@ -66,9 +66,9 @@ export class SvelteFormApplication extends FormApplication
    /**
     * @inheritDoc
     */
-   constructor(options)
+   constructor(object, options)
    {
-      super(options);
+      super(object, options);
 
       this.#reactive = new SvelteReactive(this);
 
@@ -444,16 +444,20 @@ export class SvelteFormApplication extends FormApplication
    }
 
    /**
-    * Modified Application `setPosition` to support QuestTrackerApp for switchable resizable globalThis.
-    * Set the application position and store its new location.
+    * Modified Application `setPosition` which changes a few aspects from the default {@link Application.setPosition}.
+    * The gate on `popOut` is removed, so if manually called popOut applications can use `setPosition`.
+    *
+    * There are two new options `noHeight` and `noWidth` that respect `width` & `height` style options while still
+    * producing a correct position object in return. You may set these options manually, but they are also automatically
+    * determined when not explicitly provided by checking if the target element style for `height` or `width` is `auto`.
     *
     * @param {object}               [opts] - Optional parameters.
     *
     * @param {number|null}          [opts.left] - The left offset position in pixels
     *
     * @param {number|null}          [opts.top] - The top offset position in pixels
     *
-    * @param {number|null}          [opts.width] - The application width in pixels
+    * @param {number|string|null}   [opts.width] - The application width in pixels
     *
     * @param {number|string|null}   [opts.height] - The application height in pixels
     *
@@ -466,12 +470,18 @@ export class SvelteFormApplication extends FormApplication
     * @returns {{left: number, top: number, width: number, height: number, scale:number}}
     * The updated position object for the application containing the new values
     */
-   setPosition({ left, top, width, height, scale, noHeight = false, noWidth = false } = {})
+   setPosition({ left, top, width, height, scale, noHeight, noWidth } = {})
    {
       const el = this.elementTarget;
       const currentPosition = this.position;
       const styles = globalThis.getComputedStyle(el);
 
+      // Automatically determine if noHeightActual from manual value or when `el.style.height` is `auto`.
+      const noHeightActual = typeof noHeight === 'boolean' ? noHeight : el.style.height === 'auto';
+
+      // Automatically determine if noWidthActual from manual value or when `el.style.width` is `auto`.
+      const noWidthActual = typeof noWidth === 'boolean' ? noWidth : el.style.width === 'auto';
+
       // Update width if an explicit value is passed, or if no width value is set on the element
       if (!el.style.width || width)
       {
@@ -480,7 +490,7 @@ export class SvelteFormApplication extends FormApplication
          const maxW = el.style.maxWidth || globalThis.innerWidth;
          currentPosition.width = width = Math.clamped(tarW, minW, maxW);
 
-         if (!noWidth) { el.style.width = `${width}px`; }
+         if (!noWidthActual) { el.style.width = `${width}px`; }
          if ((width + currentPosition.left) > globalThis.innerWidth) { left = currentPosition.left; }
       }
       width = el.offsetWidth;
@@ -493,7 +503,7 @@ export class SvelteFormApplication extends FormApplication
          const maxH = el.style.maxHeight || globalThis.innerHeight;
          currentPosition.height = height = Math.clamped(tarH, minH, maxH);
 
-         if (!noHeight) { el.style.height = `${height}px`; }
+         if (!noHeightActual) { el.style.height = `${height}px`; }
          if ((height + currentPosition.top) > globalThis.innerHeight + 1) { top = currentPosition.top - 1; }
       }
       height = el.offsetHeight;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typhonjs-fvtt/svelte",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Provides resources to integrate Svelte w/ Foundry VTT.",
   "type": "module",
   "author": "Michael Leahy <[email protected]> (https://github.com/typhonrt)",