diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..0b346d74 --- /dev/null +++ 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 index 1718f1de..e6b172f5 100644 --- a/_dist/application/SvelteApplication.js +++ b/_dist/application/SvelteApplication.js @@ -444,8 +444,12 @@ 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. * @@ -453,7 +457,7 @@ export class SvelteApplication extends Application * * @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 index 4ec8a639..e614f675 100644 --- 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 index 806a78d7..526d7c2a 100644 --- 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 index 869f3bd0..5823be95 100644 --- 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,8 +444,12 @@ 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. * @@ -453,7 +457,7 @@ export class SvelteFormApplication extends FormApplication * * @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 index 5c35d634..f76f1c53 100644 --- 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 (https://github.com/typhonrt)",