terrier-engine 4.0.4 → 4.0.6

package/app.ts

@@ -0,0 +1,81 @@
+import { Logger } from "tuff-core/logging"
+import {Part, PartParent} from "tuff-core/parts"
+import {TerrierPart} from "./parts"
+import Tooltips from "./tooltips"
+import Lightbox from "./lightbox"
+
+// @ts-ignore
+import logoUrl from './images/optimized/terrier-hub-logo-light.svg'
+import Theme, {ThemeType} from "./theme"
+import {ModalPart, ModalStackPart} from "./modals"
+import {OverlayLayer, OverlayPart} from "./overlays"
+
+const log = new Logger('App')
+Logger.level = 'info'
+
+/**
+ * Main application part that renders the entire page.
+ */
+export abstract class TerrierApp<TT extends ThemeType> extends TerrierPart<{theme: Theme<TT>}, TT> {
+
+    _theme!: Theme<TT>
+
+    get theme(): Theme<TT> {
+        return this._theme
+    }
+
+    overlayPart!: OverlayPart
+
+    async init() {
+        this._theme = this.state.theme
+        this.overlayPart = this.makePart(OverlayPart, {})
+        log.info("Initialized")
+    }
+
+    load() {
+        // clear all overlays (i.e. dropdowns) whenever the page changes
+        this.clearOverlays()
+    }
+
+    update(root: HTMLElement) {
+        log.info(`Update`, root)
+        Tooltips.init(root)
+        Lightbox.init(root, this, 'body-content')
+    }
+
+
+    /// Overlays
+
+    makeOverlay<OverlayType extends Part<StateType>, StateType>(
+        constructor: { new(p: PartParent, id: string, state: StateType): OverlayType; },
+        state: StateType,
+        layer: OverlayLayer): OverlayType {
+        return this.overlayPart.makeLayer(constructor, state, layer)
+    }
+
+    clearOverlay(layer: OverlayLayer) {
+        this.overlayPart.clearLayer(layer)
+        this.lastDropdownTarget = undefined
+    }
+
+    clearOverlays() {
+        this.overlayPart.clearAll()
+    }
+
+
+    lastDropdownTarget?: HTMLElement
+
+
+    /// Modals
+
+    showModal<ModalType extends ModalPart<StateType, TT>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
+        const modalStack =
+            (this.overlayPart.parts.modal as ModalStackPart<TT>)
+                ?? this.makeOverlay(ModalStackPart, {}, 'modal')
+        const modal = modalStack.pushModal(constructor, state)
+        modalStack.dirty()
+        return modal
+    }
+
+
+}

package/dropdowns.ts

@@ -0,0 +1,96 @@
+import { Logger } from "tuff-core/logging"
+import { untypedKey } from "tuff-core/messages"
+import { unique } from "tuff-core/arrays"
+import {PartTag, StatelessPart} from "tuff-core/parts"
+import Overlays from "./overlays"
+import {TerrierPart} from "./parts"
+import Objects from "tuff-core/objects"
+import {Action, ThemeType} from "./theme"
+
+const log = new Logger('Dropdowns')
+
+const clearDropdownKey = untypedKey()
+
+/**
+ * Abstract base class for dropdown parts.
+ * Subclasses must implement the `renderContent()` method to render the dropdown content.
+ */
+export abstract class Dropdown<T, TT extends ThemeType> extends TerrierPart<T, TT> {
+
+    parentPart?: StatelessPart
+
+    // the computed absolute position of the
+    left = 0
+    top = 0
+
+    async init() {
+        this.onClick(clearDropdownKey, _ => {
+            this.clear()
+        })
+    }
+
+    /**
+     * Removes itself from the DOM.
+     */
+    clear() {
+        log.info("Clearing dropdown")
+        this.app.clearOverlay('dropdown')
+    }
+
+    render(parent: PartTag) {
+        parent.div('.dropdown-content', content => {
+            this.renderContent(content)
+        })
+    }
+
+    /**
+     * Subclasses must implement this to render the actual dropdown content.
+     * @param parent
+     */
+    abstract renderContent(parent: PartTag): void
+
+    anchorTarget?: HTMLElement
+
+    /**
+     * Store the anchor target in order to compute the dropdown position when it's rendered.
+     * @param target
+     */
+    anchor(target: HTMLElement) {
+        log.info(`Anchoring dropdown to target`, target)
+        this.anchorTarget = target
+    }
+
+    update(_elem: HTMLElement) {
+        const content = _elem.querySelector('.dropdown-content')
+        if (this.anchorTarget && content) {
+            log.info(`Anchoring dropdown`, content, this.anchorTarget)
+            Overlays.anchorElement(content as HTMLElement, this.anchorTarget)
+            content.classList.add('show')
+        }
+    }
+
+}
+
+/**
+ * A concrete dropdown part that shows a list of actions.
+ */
+export class ActionsDropdown<TT extends ThemeType> extends Dropdown<Array<Action<TT>>, TT> {
+    renderContent(parent: PartTag) {
+        // handle each key declared on the actions directly,
+        // then clear the dropdown and re-emit them on the parent part
+        const keys = unique(this.state.map(action => action.click?.key).filter(Objects.notNull))
+        for (const key of keys) {
+            this.onClick(key, m => {
+                this.app.clearOverlay('dropdown')
+                log.info(`Re-emitting ${key.id} message`, m, this.parentPart)
+                if (this.parentPart) {
+                    this.parentPart.emit('click', key, m.event, m.data)
+                } else {
+                    this.emit('click', key, m.event, m.data)
+                }
+            })
+        }
+        this.theme.renderActions(parent, this.state, {iconColor: 'white'})
+    }
+
+}

package/fragments.ts

@@ -0,0 +1,396 @@
+import {PartTag} from "tuff-core/parts"
+import {AnchorTagAttrs, HtmlParentTag} from "tuff-core/html"
+import Theme, {Action, Packet, ThemeType} from "./theme"
+import {ActionLevel, PanelActions} from "./parts"
+
+/**
+ * Base class for Panel and Card fragment builders.
+ */
+abstract class ContentFragment<TT extends ThemeType> {
+    protected constructor(readonly prefix: string, readonly theme: Theme<TT>) {
+
+    }
+
+    protected _title?: string
+
+    /**
+     * @param t the title
+     * @param icon the optional icon
+     */
+    title(t: string, icon?: TT['icons']) {
+        this._title = t
+        this._icon = icon
+        return this
+    }
+
+    protected _icon?: TT['icons']
+
+    /**
+     * @param i the panel icon
+     */
+    icon(i: TT['icons']) {
+        this._icon = i
+        return this
+    }
+
+    protected _content?: (parent: HtmlParentTag) => void
+
+    /**
+     * @param fun a function that renders the panel content
+     */
+    content(fun: (parent: HtmlParentTag) => void) {
+        this._content = fun
+        return this
+    }
+
+}
+
+
+export class PanelFragment<TT extends ThemeType> extends ContentFragment<TT> {
+    constructor(theme: Theme<TT>) {
+        super('tt-panel', theme)
+    }
+
+    /// Actions
+
+    actions = {
+        primary: Array<Action<TT>>(),
+        secondary: Array<Action<TT>>(),
+        tertiary: Array<Action<TT>>()
+    }
+
+    /**
+     * Add an action to the panel.
+     * @param action the action to add
+     * @param level whether it's a primary, secondary, or tertiary action
+     */
+    addAction(action: Action<TT>, level: ActionLevel = 'primary') {
+        this.actions[level].push(action)
+        return this
+    }
+
+    /**
+     * Renders the panel into the given parent tag
+     * @param parent
+     */
+    render(parent: PartTag) {
+        return parent.div(this.prefix, panel => {
+            if (this._title?.length) {
+                panel.div(`.${this.prefix}-header`, header => {
+                    header.h2(h2 => {
+                        if (this._icon) {
+                            this.theme.renderIcon(h2, this._icon, 'link')
+                        }
+                        h2.div('.title', {text: this._title})
+                    })
+                    this.theme.renderActions(header, this.actions.tertiary)
+                })
+            }
+            panel.div(`.${this.prefix}-content`, content => {
+                if (this._content) {
+                    this._content(content)
+                }
+            })
+            panelActions(panel, this.actions, this.theme)
+        })
+    }
+
+}
+
+/**
+ * Render the primary and secondary actions to the bottom of a panel
+ * @param panel the .panel container
+ * @param actions the actions
+ */
+function panelActions<TT extends ThemeType>(panel: PartTag, actions: PanelActions<TT>, theme: Theme<TT>) {
+    if (actions.primary.length || actions.secondary.length) {
+        panel.div('.panel-actions', actionsContainer => {
+            actionsContainer.div('.secondary-actions', secondaryContainer => {
+                theme.renderActions(secondaryContainer, actions.secondary, {iconColor: 'white', defaultClass: 'link'})
+            })
+            actionsContainer.div('.primary-actions', primaryContainer => {
+                theme.renderActions(primaryContainer, actions.primary, {iconColor: 'white'})
+            })
+        })
+    }
+}
+
+
+/**
+ * Cards are like panels except they don't have any actions and are themselves an anchor.
+ */
+class CardFragment<TT extends ThemeType> extends ContentFragment<TT> {
+    constructor(theme: Theme<TT>) {
+        super('tt-card', theme)
+    }
+
+    private _href?: string
+
+    /**
+     * Sets the href of the anchor tag
+     * @param h
+     */
+    href(h: string) {
+        this._href = h
+        return this
+    }
+
+    /**
+     * Renders the card into the given parent tag
+     * @param parent
+     */
+    render(parent: PartTag) {
+        return parent.a({href: this._href}, this.prefix, panel => {
+            if (this._title?.length) {
+                panel.div(`.${this.prefix}-header`, header => {
+                    if (this._icon) {
+                        this.theme.renderIcon(header, this._icon, 'link')
+                    }
+                    header.h3({text: this._title})
+                })
+            }
+            panel.div(`.${this.prefix}-content`, content => {
+                if (this._content) {
+                    this._content(content)
+                }
+            })
+        })
+    }
+
+}
+
+
+class LabeledValueFragment<TT extends ThemeType> extends ContentFragment<TT> {
+
+    constructor(theme: Theme<TT>) {
+        super('tt-labeled-value', theme)
+    }
+
+    private _value?: string
+    private _valueIcon?: TT['icons']
+    private _valueIconColor?: TT['colors']
+    private _valueClass?: string[]
+
+    private _href?: string
+    private _hrefTarget?: string
+
+    private _click?: Packet
+
+    private _tooltip?: string
+
+    value(value: string, icon?: TT['icons'], iconColor?: TT['colors']) {
+        this._value = value
+        this._valueIcon = icon
+        this._valueIconColor = iconColor
+        return this
+    }
+
+    valueClass(...classes: string[]) {
+        this._valueClass = classes
+        return this
+    }
+
+    href(value: string, target?: string) {
+        this._href = value
+        if (target) this._hrefTarget = target
+        return this
+    }
+
+    emitClick(packet?: Packet) {
+        this._click = packet
+        return this
+    }
+
+    /**
+     * Set the tooltip that will show for the value
+     * @param tooltip
+     */
+    tooltip(tooltip: string) {
+        this._tooltip = tooltip
+        return this
+    }
+
+    render(parent: PartTag) {
+        parent.div('.tt-labeled-value', container => {
+            if (this._title) {
+                container.div('.title', title => {
+                    if (this._icon) {
+                        this.theme.renderIcon(title, this._icon, 'link')
+                    }
+                    title.div({text: this._title})
+                })
+            }
+
+            container.div('.value', div => {
+                let valueBox: HtmlParentTag = div
+                if (this._href?.length) {
+                    valueBox = div.a({ href: this._href, target: this._hrefTarget })
+                } else if (this._click) {
+                    valueBox = div.a()
+                    valueBox.emitClick(this._click.key, this._click.data ?? {})
+                }
+
+                if (this._valueClass?.length) div.class(...this._valueClass)
+                if (this._tooltip) valueBox.dataAttr("tooltip", this._tooltip)
+                if (this._value) {
+                    if (this._valueIcon) {
+                        this.theme.renderIcon(valueBox, this._valueIcon, this._valueIconColor ?? 'link')
+                    }
+                    valueBox.div('.value-text', {text: this._value})
+                }
+                else if (this._content) {
+                    this._content(valueBox)
+                }
+            })
+        })
+    }
+}
+
+type ListValueDefinition = {
+    value: string
+    href?: string
+    hrefTarget?: string
+    tooltip?: string
+}
+
+class LabeledListFragment<TT extends ThemeType> extends ContentFragment<TT> {
+    private _values?: ListValueDefinition[]
+
+    constructor(theme: Theme<TT>) {
+        super('tt-labeled-list', theme)
+    }
+
+    render(parent: PartTag) {
+        parent.div('.tt-labeled-list', container => {
+            if (this._title) {
+                container.div('.title', title => {
+                    if (this._icon) {
+                        this.theme.renderIcon(title, this._icon, 'link')
+                    }
+                    title.div({ text: this._title })
+                })
+            }
+            container.div('.value.tt-flex.wrap', valueBox => {
+                for (const listItem of this._values ?? []) {
+                    valueBox.div('.tt-flex.shrink.align-center.secondary', badge => {
+                        if (listItem.tooltip) badge.dataAttr("tooltip", listItem.tooltip)
+
+                        const anchorAttrs: AnchorTagAttrs = { classes: ['button'], text: listItem.value }
+                        if (listItem.href?.length) {
+                            anchorAttrs.classes?.push('secondary')
+                            anchorAttrs.href = listItem.href
+                            anchorAttrs.target = listItem.hrefTarget ?? '_blank'
+                        } else {
+                            anchorAttrs.classes?.push('readonly disabled')
+                        }
+
+                        badge.a(anchorAttrs)
+                    })
+                }
+            })
+        })
+    }
+
+    values(values: ListValueDefinition[]) {
+        this._values = values
+        return this
+    }
+}
+
+
+/**
+ * Creates a new card fragment builder.
+ * Make sure to call `render()` in order to render it to a parent tag.
+ */
+function card<TT extends ThemeType>(theme: Theme<TT>) {
+    return new CardFragment(theme)
+}
+
+
+/**
+ * Creates a new panel fragment builder.
+ * Make sure to call `render()` in order to render it to a parent tag.
+ */
+function panel<TT extends ThemeType>(theme: Theme<TT>) {
+    return new PanelFragment(theme)
+}
+
+/**
+ * Creates a new labeled value fragment builder.
+ * Make sure to call `render()` in order to render it to a parent tag.
+ */
+function labeledValue<TT extends ThemeType>(theme: Theme<TT>) {
+    return new LabeledValueFragment(theme)
+}
+
+function labeledList<TT extends ThemeType>(theme: Theme<TT>) {
+    return new LabeledListFragment(theme)
+}
+
+/**
+ * Create a new button in the parent.
+ * @param parent
+ * @param title
+ * @param icon
+ */
+function button<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons']) {
+    return parent.a('.tt-button', button => {
+        if (icon) {
+            theme.renderIcon(button, icon, 'white')
+        }
+        button.div('.title', {text: title})
+    })
+}
+
+/**
+ * Create a new simple value display in the parent.
+ * This is just some text with an optional icon that doesn't have a separate label.
+ * @param parent
+ * @param title
+ * @param icon
+ * @param iconColor
+ */
+function simpleValue<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons'], iconColor?: TT['colors']) {
+    return parent.div('.tt-simple-value.shrink', button => {
+        if (icon) {
+            theme.renderIcon(button, icon, iconColor || 'link')
+        }
+        button.div('.title', {text: title})
+    })
+}
+
+/**
+ * Helper to create a heading with an optional icon.
+ * @param parent
+ * @param title
+ * @param icon
+ */
+function simpleHeading<TT extends ThemeType>(parent: PartTag, theme: Theme<TT>, title: string, icon?: TT['icons']) {
+    return parent.h3('.shrink', heading => {
+        if (icon) {
+            theme.renderIcon(heading, icon, 'link')
+        }
+        heading.div('.title', {text: title})
+    })
+}
+
+
+
+
+const Fragments = {
+    ContentFragment,
+    panel,
+    PanelFragment,
+    card,
+    CardFragment,
+    labeledValue,
+    LabeledValueFragment,
+    labeledList,
+    LabeledListFragment,
+    button,
+    simpleValue,
+    simpleHeading,
+    panelActions
+}
+
+export default Fragments

package/lightbox.ts

@@ -0,0 +1,95 @@
+import { Logger } from "tuff-core/logging"
+import { untypedKey } from "tuff-core/messages"
+import {Part, PartTag} from "tuff-core/parts"
+import {TerrierApp} from "./app"
+
+const log = new Logger('Lightbox')
+
+////////////////////////////////////////////////////////////////////////////////
+// Global Event Listener
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Initializes a global event listener for image elements contained in the `containerClass`
+ * @param root
+ * @param containerClass
+ */
+function init(root: HTMLElement, app: TerrierApp<any>, containerClass: string) {
+    log.info("Init", root)
+    root.addEventListener("click", evt => {
+        if (!(evt.target instanceof HTMLElement) || evt.target.tagName != 'IMG') {
+            return
+        }
+        const elem = evt.target as HTMLImageElement
+
+        // filter the target by the container class
+        let show = false
+        for (const ancestor of evt.composedPath()) {
+            if (ancestor instanceof HTMLElement && ancestor.classList.contains(containerClass)) {
+                show = true
+            }
+        }
+        if (!show) {
+            return
+        }
+
+        const src = elem.src
+        log.info(`Clicked on lightbox image ${src}`, evt, elem)
+        showPart(app, {src})
+
+    }, {capture: true})
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Part
+////////////////////////////////////////////////////////////////////////////////
+
+type LightboxState = { src: string }
+
+function showPart(app: TerrierApp<any>, state: LightboxState) {
+    app.makeOverlay(LightboxPart, {app,...state}, 'lightbox')
+}
+
+const closeKey = untypedKey()
+
+class LightboxPart extends Part<LightboxState & {app: TerrierApp<any>}> {
+
+    async init() {
+        this.onClick(closeKey, _ => {
+            this.close()
+        })
+    }
+
+    render(parent: PartTag) {
+        parent.div('.scroller', scroller => {
+            scroller.img({src: this.state.src})
+        })
+        .emitClick(closeKey)
+    }
+
+    update(_elem: HTMLElement) {
+        setTimeout(_ => {
+            _elem.classList.add('active') // start css fade in
+        }, 10)
+    }
+
+    close() {
+        this.element?.classList.remove('active')
+        setTimeout(_ => {
+            this.state.app.clearOverlay('lightbox')
+        }, 500)
+    }
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Lightbox = {
+    init
+}
+
+export default Lightbox