terrier-engine 4.0.3 → 4.0.5

package/loading.ts

@@ -0,0 +1,70 @@
+import { createElement } from "tuff-core/html"
+import Time from "tuff-core/time"
+import Theme, {ThemeType} from "./theme";
+
+
+
+const overlayClass = 'loading-overlay'
+
+////////////////////////////////////////////////////////////////////////////////
+// Overlay
+////////////////////////////////////////////////////////////////////////////////
+
+function getOverlay(container: Element): HTMLDivElement | null {
+    const elems = container.getElementsByClassName(overlayClass)
+    if (elems.length) {
+        return elems[0] as HTMLDivElement
+    }
+    return null
+}
+
+function createOverlay<TT extends ThemeType>(theme: Theme<TT>): HTMLDivElement {
+    return createElement('div', div => {
+        div.class(overlayClass)
+        const loaderSrc = theme.getLoaderSrc()
+        if (loaderSrc?.length) {
+            div.img({src: loaderSrc})
+        }
+    })
+}
+
+/**
+ * Creates and shows a loading overlay in the given container.
+ * @param container
+ */
+function showOverlay<TT extends ThemeType>(container: Element, theme: Theme<TT>) {
+    const existingOverlay = getOverlay(container)
+    if (existingOverlay) {
+        return
+    }
+    const overlay = createOverlay(theme)
+    container.append(overlay)
+    Time.wait(0).then(() => overlay.classList.add("active")) // start css fade in
+}
+
+/**
+ * Removes the loading overlay (if present) from the given container.
+ * @param container
+ */
+function removeOverlay(container: Element) {
+    const overlay = getOverlay(container)
+    if (overlay) {
+        overlay.classList.remove('active')
+        Time.wait(500).then(() => {
+            overlay.remove()
+        })
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Loading = {
+    getOverlay,
+    showOverlay,
+    removeOverlay
+}
+
+export default Loading

package/modals.ts

@@ -0,0 +1,154 @@
+import { Logger } from "tuff-core/logging"
+import { untypedKey } from "tuff-core/messages"
+import {ContentPart, TerrierPart} from "./parts"
+import {PartParent, PartTag} from "tuff-core/parts"
+import {ThemeType} from "./theme";
+
+const log = new Logger('Modals')
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Base Part
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Base class for all modals.
+ * Since it extends ContentPart, all of the same title/action methods
+ * available for pages can be used in modals as well.
+ */
+export abstract class ModalPart<T, TT extends ThemeType> extends ContentPart<T, TT> {
+
+
+    get parentClasses(): Array<string> {
+        return ['modal-part', 'tt-typography']
+    }
+
+    protected pop() {
+        this.emitMessage(modalPopKey, {}, { scope: 'bubble' })
+    }
+
+    render(parent: PartTag)  {
+        parent.div('.modal-header', header => {
+            if (this._icon) {
+                this.theme.renderIcon(header, this._icon, 'secondary')
+            }
+            header.h2({text: this._title || 'Call setTitle()'})
+            this.theme.renderActions(header, this.getActions('tertiary'), {defaultClass: 'secondary'})
+            header.a('.close-modal', closeButton => {
+                this.theme.renderCloseIcon(closeButton)
+            }).emitClick(modalPopKey)
+        })
+        parent.div('.modal-content', content => {
+            this.renderContent(content)
+        })
+        const secondaryActions = this.getActions('secondary')
+        const primaryActions = this.getActions('primary')
+        if (secondaryActions.length || primaryActions.length) {
+            parent.div('.modal-actions', actions => {
+                actions.div('.secondary-actions', container => {
+                    this.theme.renderActions(container, secondaryActions, {iconColor: 'white', defaultClass: 'secondary'})
+                })
+                actions.div('.primary-actions', container => {
+                    this.theme.renderActions(container, primaryActions, {iconColor: 'white', defaultClass: 'primary'})
+                })
+            })
+        }
+    }
+
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Stack
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Emit this key from anywhere inside a modal to pop it off the stack.
+ */
+export const modalPopKey = untypedKey()
+
+export class ModalStackPart<TT extends ThemeType> extends TerrierPart<{}, TT> {
+
+    displayClass: 'show' | 'hide' = 'show'
+
+    async init() {
+        this.onClick(modalPopKey, _ => this.pop())
+        this.listenMessage(modalPopKey, _ => this.pop())
+    }
+
+    modals: ModalPart<unknown, TT>[] = []
+
+    /**
+     * Pops the last modal off the stack and removes itself if it's empty.
+     */
+    pop() {
+        log.info("Popping Modal")
+        if (this.modals.length == 0) {
+            this.close()
+            return
+        }
+        const modal = this.modals.pop()
+        if (modal) {
+            this.removeChild(modal)
+        }
+        if (this.modals.length == 0) {
+            this.close()
+        }
+        this.dirty()
+    }
+
+    close() {
+        const elem = this.element
+        this.displayClass = 'hide'
+        if (elem) {
+            const stackElem = elem.querySelector('.tt-modal-stack')
+            if (stackElem) {
+                stackElem.classList.remove('show')
+            }
+        }
+    }
+
+    /**
+     * Pushes a new modal to the stack
+     * @param constructor the modal class
+     * @param state the modal's state
+     */
+    pushModal<ModalType extends ModalPart<StateType, TT>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
+        log.info(`Making modal`, constructor.name)
+        const modal = this.makePart(constructor, state)
+        this.modals.push(modal)
+        this.displayClass = 'show'
+        this.dirty()
+        return modal
+    }
+
+
+    render(parent: PartTag) {
+        const classes = [`stack-${this.modals.length}`]
+        if (this.displayClass == 'show') {
+            classes.push(this.displayClass)
+        }
+        parent.div('.tt-modal-stack', {classes}, stack => {
+            stack.div('.modal-container', container => {
+                this.eachChild(part => {
+                    container.part(part)
+                })
+            })
+        })
+    }
+
+
+    update(root: HTMLElement) {
+        const stack = root.querySelector('.tt-modal-stack')
+        if (stack && this.displayClass == 'show') {
+            setTimeout(
+                () => {
+                    stack.classList.add('show')
+                    stack.querySelectorAll('.modal-part').forEach(modal => {
+                        modal.classList.add('show')
+                    })
+                }, 10
+            )
+        }
+    }
+}

package/overlays.ts

@@ -0,0 +1,234 @@
+import { Part, PartParent, PartTag, StatelessPart, NoState } from "tuff-core/parts"
+import { Size, Box, Side } from "tuff-core/box"
+import { Logger } from "tuff-core/logging"
+
+const log = new Logger('Overlays')
+
+////////////////////////////////////////////////////////////////////////////////
+// Part
+////////////////////////////////////////////////////////////////////////////////
+
+const OverlayLayers = ['modal', 'dropdown', 'lightbox', 'jump'] as const
+
+/**
+ * Which overlay layer to use for an overlay part.
+ * There can only be one part per layer.
+ */
+export type OverlayLayer = typeof OverlayLayers[number]
+
+export class OverlayPart extends Part<NoState> {
+
+    parts: {[layer in OverlayLayer]?: StatelessPart} = {}
+
+    /**
+     * Creates a part at the given layer.
+     * Discards the old part at that layer, if there was one.
+     * @param constructor
+     * @param state
+     * @param layer
+     */
+    makeLayer<PartType extends Part<StateType>, StateType>(
+        constructor: { new(p: PartParent, id: string, state: StateType): PartType; },
+        state: StateType,
+        layer: OverlayLayer): PartType {
+        const part = this.makePart(constructor, state)
+        this.clearLayer(layer)
+        this.parts[layer] = part
+        return part
+    }
+
+    /**
+     * Clear a single overlay layer.
+     * @param layer
+     */
+    clearLayer(layer: OverlayLayer) {
+        const layerPart = this.parts[layer]
+        if (layerPart) {
+            this.removeChild(layerPart)
+            this.parts[layer] = undefined
+        }
+        this.dirty()
+    }
+
+    /**
+     * Clear all overlay layers.
+     */
+    clearAll() {
+        for (const layer of OverlayLayers) {
+            this.clearLayer(layer)
+        }
+    }
+
+    render(parent: PartTag) {
+        for (const layer of OverlayLayers) {
+            const part = this.parts[layer]
+            if (part) {
+                parent.div(layer).part(part)
+            }
+        }
+    }
+
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Anchoring
+////////////////////////////////////////////////////////////////////////////////
+
+type AnchorResult = {
+    left: number
+    top: number
+    width?: number,
+    height?: number,
+    valid: boolean
+}
+
+function clampHorizontal(result: AnchorResult, size: Size, container: Size) {
+    if (container.width < size.width) {
+        result.width = container.width
+    }
+    const rightOffset = container.width - (result.width ?? size.width) // don't hang off the right side of the viewport
+    result.left = Math.max(0, Math.min(result.left, rightOffset)) // don't hang off the left side of the viewport
+    if (result.top < 0 || result.top+size.height > container.height) {
+        result.valid = false
+    }
+}
+
+function anchorBoxBottom(size: Size, anchor: Box, container: Size): AnchorResult {
+    const result = {
+        top: anchor.y + anchor.height,
+        left: anchor.x + anchor.width / 2 - size.width / 2,
+        valid: true
+    }
+    clampHorizontal(result, size, container)
+    return result
+}
+
+function anchorBoxTop(size: Size, anchor: Box, container: Size): AnchorResult {
+    const result = {
+        top: anchor.y - size.height,
+        left: anchor.x + anchor.width / 2 - size.width / 2,
+        valid: true
+    }
+    clampHorizontal(result, size, container)
+    return result
+}
+
+function clampVertical(result: AnchorResult, size: Size, container: Size) {
+    if (container.height < size.height) {
+        result.height = container.height
+    }
+    const bottomOffset = container.height - (result.height ?? size.height) // don't hang off the bottom of the viewport
+    result.top = Math.max(0, Math.min(result.top, bottomOffset)) // don't hang off the top of the viewport
+    if (result.left < 0 || result.left + size.width > container.width) {
+        result.valid = false
+    }
+}
+
+function anchorBoxLeft(size: Size, anchor: Box, container: Size): AnchorResult {
+    const result = {
+        top: anchor.y + anchor.height/2 - size.height / 2,
+        left: anchor.x - size.width,
+        valid: true
+    }
+    clampVertical(result, size, container)
+    return result
+}
+
+function anchorBoxRight(size: Size, anchor: Box, container: Size): AnchorResult {
+    const result = {
+        top: anchor.y + anchor.height/2 - size.height / 2,
+        left: anchor.x + anchor.width,
+        valid: true
+    }
+    clampVertical(result, size, container)
+    return result
+}
+
+function anchorBoxSide(size: Size, anchor: Box, container: Size, side: Side): AnchorResult {
+    switch (side) {
+        case 'bottom':
+            return anchorBoxBottom(size, anchor, container)
+        case 'top':
+            return anchorBoxTop(size, anchor, container)
+        case 'left':
+            return anchorBoxLeft(size, anchor, container)
+        case 'right':
+            return anchorBoxRight(size, anchor, container)
+    }
+}
+
+export type AnchorOptions = {
+    preferredSide: Side
+}
+
+/**
+ * Computes an anchored position for a box of the given size to the anchor.
+ * @param size the size of the box to be anchored
+ * @param anchor the anchor box itself
+ * @param container the size of the container (presumably the window)
+ * @param options
+ * @return a left/top combination representing the new anchored position
+ */
+function anchorBox(size: Size, anchor: Box, container: Size, options: AnchorOptions): AnchorResult {
+    // try the preferred side first
+    const preferredResult = anchorBoxSide(size, anchor, container, options.preferredSide)
+    if (preferredResult.valid) {
+        return preferredResult
+    }
+
+    // try other sides
+    for (const side of ['bottom', 'top', 'right', 'left'] as const) {
+        if (side == options.preferredSide) {
+            continue
+        }
+        const result = anchorBoxSide(size, anchor, container, side)
+        if (result.valid) {
+            return result
+        }
+    }
+
+    // none of the sides were valid, just use the preferred one, I guess
+    return preferredResult
+}
+
+/**
+ * Anchors one element to the side of another.
+ * @param elem the element to reposition
+ * @param anchor the anchor element
+ */
+function anchorElement(elem: HTMLElement, anchor: HTMLElement) {
+    // Sometimes the actual width and height of the rendered element is incorrect before we set the style attribute.
+    // Setting the style attribute first forces the browser to re-calculate the size of the element so that we can use
+    // the "real" size to calculate where to anchor the element.
+    elem.setAttribute('style', 'top:0;left:0;')
+
+    const elemSize = {
+        width: elem.offsetWidth,
+        height: elem.offsetHeight
+    }
+    log.debug(`Anchoring element`, elem, anchor)
+    const rect = anchor.getBoundingClientRect()
+    const win = {width: window.innerWidth, height: window.innerHeight }
+    const anchorResult = anchorBox(elemSize, rect, win, {preferredSide: 'bottom'})
+
+    let styleString = ""
+    for (const key of ['top', 'left', 'width', 'height'] as const) {
+        if (anchorResult[key] != null) {
+            styleString += `${key}: ${anchorResult[key]}px;`
+        }
+    }
+    elem.setAttribute('style', styleString)
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Overlays = {
+    anchorElement,
+    anchorBox
+}
+
+export default Overlays

package/package.json

@@ -4,16 +4,17 @@
   "files": [
     "*"
   ],
-  "version": "4.0.3",
+  "version": "4.0.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"
   },
   "license": "MIT",
   "scripts" : {
+    "check" : "tsc -p app/frontend -noEmit"
   },
   "dependencies": {
-    "tuff-core": "^0.24.1"
+    "tuff-core": "^0.25.0"
   },
   "devDependencies": {
     "@types/node": "^18.16.3",