terrier-engine 4.0.21 → 4.3.0

package/overlays.ts

@@ -1,6 +1,7 @@
-import { Part, PartParent, PartTag, StatelessPart, NoState } from "tuff-core/parts"
+import {Part, PartTag, StatelessPart, NoState, PartConstructor} from "tuff-core/parts"
 import { Size, Box, Side } from "tuff-core/box"
 import { Logger } from "tuff-core/logging"
+import {arrays} from "tuff-core";
 
 const log = new Logger('Overlays')
 
@@ -8,67 +9,133 @@ const log = new Logger('Overlays')
 // Part
 ////////////////////////////////////////////////////////////////////////////////
 
-const OverlayLayers = ['modal', 'dropdown', 'lightbox', 'jump'] as const
+const OverlayLayerTypes = ['modal', 'dropdown', 'lightbox', 'jump'] as const
 
 /**
- * Which overlay layer to use for an overlay part.
- * There can only be one part per layer.
+ * The type of overlay for any given layer.
  */
-export type OverlayLayer = typeof OverlayLayers[number]
+export type OverlayLayerType = typeof OverlayLayerTypes[number]
 
 export class OverlayPart extends Part<NoState> {
 
-    parts: {[layer in OverlayLayer]?: StatelessPart} = {}
+    layerStates: OverlayLayerState<any, any>[] = []
+
+    updateLayers(): StatelessPart[] {
+        return this.assignCollection('layers', OverlayLayer, this.layerStates)
+    }
 
     /**
-     * Creates a part at the given layer.
-     * Discards the old part at that layer, if there was one.
+     * Creates a part and pushes it onto the overlay stack.
      * @param constructor
      * @param state
-     * @param layer
+     * @param type
+     * @return the new part
      */
-    makeLayer<PartType extends Part<StateType>, StateType>(
-        constructor: { new(p: PartParent, id: string, state: StateType): PartType; },
+    pushLayer<PartType extends Part<StateType>, StateType extends {}>(
+        constructor: PartConstructor<PartType, StateType>,
         state: StateType,
-        layer: OverlayLayer
+        type: OverlayLayerType
     ): PartType {
-        const part = this.makePart(constructor, state)
-        this.clearLayer(layer)
-        this.parts[layer] = part
-        return part
+        this.layerStates.push({partClass: constructor, partState: state, type})
+        const parts = this.updateLayers()
+        return (parts[parts.length-1] as OverlayLayer<PartType, StateType>).part as PartType
     }
 
     /**
-     * Clear a single overlay layer.
-     * @param layer
+     * Same as `pushLayer`, except that it will re-use the first existing layer of the given type, if present.
+     * @param constructor
+     * @param state
+     * @param type
+     * @return the new or existing part
      */
-    clearLayer(layer: OverlayLayer) {
-        const layerPart = this.parts[layer]
-        if (layerPart) {
-            this.removeChild(layerPart)
-            this.parts[layer] = undefined
+    getOrCreateLayer<PartType extends Part<StateType>, StateType extends {}>(
+        constructor: PartConstructor<PartType, StateType>,
+        state: StateType,
+        type: OverlayLayerType
+    ): PartType {
+        const layers = this.getCollectionParts('layers')
+        for (const layer of layers) {
+            if (layer.state.type == type) {
+                return (layer as OverlayLayer<PartType, StateType>).part as PartType
+            }
         }
-        this.dirty()
+        const part = this.pushLayer(constructor, state, type)
+        return part as PartType
     }
 
     /**
-     * Clear all overlay layers.
+     * Pops the top layer off the overlay stack.
+     * @return the part that was popped, if there was one.
      */
-    clearAll() {
-        for (const layer of OverlayLayers) {
-            this.clearLayer(layer)
+    popLayer(type?: OverlayLayerType): StatelessPart | undefined {
+        const oldParts = this.getCollectionParts('layers')
+        if (type) {
+            for (let i = this.layerStates.length-1; i>=0; i--) {
+                if (this.layerStates[i].type == type) {
+                    const part = oldParts[i]
+                    this.layerStates = arrays.without(this.layerStates, this.layerStates[i])
+                    this.updateLayers()
+                    return part
+                }
+            }
+            return undefined
+        }
+        else {
+            // no type specified, pop the top one
+            this.layerStates = this.layerStates.slice(0, this.layerStates.length - 1)
+            this.updateLayers()
+            return oldParts[oldParts.length - 1]
         }
     }
 
-    render(parent: PartTag) {
-        for (const layer of OverlayLayers) {
-            const part = this.parts[layer]
-            if (part) {
-                parent.div(layer).part(part)
+    /**
+     * Removes the layer with the given state from the stack.
+     * @param state
+     * @return true if there was a layer actually removed
+     */
+    removeLayer<StateType>(state: StateType): boolean {
+        for (const layerState of this.layerStates) {
+            if (layerState.partState == state) {
+                this.layerStates = arrays.without(this.layerStates, layerState)
+                this.updateLayers()
+                return true
             }
         }
+        return false
+    }
+
+    /**
+     * Clear all overlay layers.
+     */
+    clearAll() {
+        this.layerStates = []
+    }
+
+    render(parent: PartTag) {
+        this.renderCollection(parent, 'layers')
+    }
+
+}
+
+type OverlayLayerState<PartType extends Part<StateType>, StateType extends {}> = {
+    partClass: PartConstructor<PartType, StateType>
+    partState: StateType
+    type: OverlayLayerType
+}
+
+class OverlayLayer<PartType extends Part<StateType>, StateType extends {}> extends Part<OverlayLayerState<PartType, StateType>> {
+
+    part!: PartType
+
+    async init() {
+        this.part = this.makePart(this.state.partClass, this.state.partState)
     }
 
+    render(parent: PartTag) {
+        parent.part(this.part)
+    }
+
+
 }
 
 

package/package.json

@@ -4,7 +4,7 @@
   "files": [
     "*"
   ],
-  "version": "4.0.21",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"

package/parts/content-part.ts

@@ -0,0 +1,187 @@
+import {Action, IconName} from "../theme"
+import {PartParent, PartTag} from "tuff-core/parts"
+import {Dropdown} from "../dropdowns"
+import TerrierPart from "./terrier-part"
+
+export type PanelActions = {
+    primary: Array<Action>
+    secondary: Array<Action>
+    tertiary: Array<Action>
+}
+export type ActionLevel = keyof PanelActions
+
+/**
+ * Base class for all Parts that render some main content, like pages, panels, and modals.
+ */
+export default abstract class ContentPart<TState> extends TerrierPart<TState> {
+
+    /**
+     * All ContentParts must implement this to render their actual content.
+     * @param parent
+     */
+    abstract renderContent(parent: PartTag): void
+
+
+    render(parent: PartTag) {
+        this.renderContent(parent)
+    }
+
+
+    protected _title = ''
+
+    /**
+     * Sets the page, panel, or modal title.
+     * @param title
+     */
+    setTitle(title: string) {
+        this._title = title
+    }
+
+    protected _icon: IconName | null = null
+
+    setIcon(icon: IconName) {
+        this._icon = icon
+    }
+
+    protected _titleClasses: string[] = []
+
+    addTitleClass(c: string) {
+        this._titleClasses.push(c)
+    }
+
+
+    /// Actions
+
+    // stored actions can be either an action object or a reference to a named action
+    private _actions = {
+        primary: Array<Action | string>(),
+        secondary: Array<Action | string>(),
+        tertiary: Array<Action | string>()
+    }
+
+    private _namedActions: Record<string, { action: Action, level: ActionLevel }> = {}
+
+    /**
+     * Add an action to the part, or replace a named action if it already exists.
+     * @param action the action to add
+     * @param level whether it's a primary, secondary, or tertiary action
+     * @param name a name to be given to this action, so it can be accessed later
+     */
+    addAction(action: Action, level: ActionLevel = 'primary', name?: string) {
+        if (name?.length) {
+            if (name in this._namedActions) {
+                const currentLevel = this._namedActions[name].level
+                if (level != currentLevel) {
+                    const index = this._actions[currentLevel].indexOf(name)
+                    this._actions[currentLevel].splice(index, 1)
+                    this._actions[level].push(name)
+                }
+                this._namedActions[name].action = action
+            } else {
+                this._namedActions[name] = {action, level}
+                this._actions[level].push(name)
+            }
+        } else {
+            this._actions[level].push(action)
+        }
+    }
+
+    /**
+     * Returns the action definition for the action with the given name, or undefined if there is no action with that name
+     * @param name
+     */
+    getNamedAction(name: string): Action | undefined {
+        return this._namedActions[name].action
+    }
+
+    /**
+     * Removes the action with the given name
+     * @param name
+     */
+    removeNamedAction(name: string) {
+        if (!(name in this._namedActions)) return
+        const level = this._actions[this._namedActions[name].level]
+        delete this._namedActions[name]
+        const actionIndex = level.indexOf(name)
+        if (actionIndex >= 0) {
+            level.splice(actionIndex, 1)
+        }
+    }
+
+    /**
+     * Clears the actions for this part
+     * @param level whether to clear the primary, secondary, or both sets of actions
+     */
+    clearActions(level: ActionLevel) {
+        for (const action of this._actions[level]) {
+            if (typeof action === 'string') {
+                delete this._namedActions[action]
+            }
+        }
+        this._actions[level] = []
+    }
+
+    getAllActions(): PanelActions {
+        return {
+            primary: this.getActions('primary'),
+            secondary: this.getActions('secondary'),
+            tertiary: this.getActions('tertiary'),
+        }
+    }
+
+    getActions(level: ActionLevel): Action[] {
+        return this._actions[level].map(action => {
+            return (typeof action === 'string') ? this._namedActions[action].action : action
+        })
+    }
+
+    hasActions(level: ActionLevel): boolean {
+        return this._actions[level].length > 0
+    }
+
+
+    /// Dropdowns
+
+    /**
+     * Shows the given dropdown part on the page.
+     * It's generally better to call `toggleDropdown` instead so that the dropdown will be
+     * hidden upon a subsequent click on the target.
+     * @param constructor a constructor for a dropdown part
+     * @param state the dropdown's state
+     * @param target the target element around which to show the dropdown
+     */
+    makeDropdown<DropdownType extends Dropdown<DropdownStateType>, DropdownStateType extends {}>(
+        constructor: { new(p: PartParent, id: string, state: DropdownStateType): DropdownType; },
+        state: DropdownStateType,
+        target: EventTarget | null) {
+        if (!(target && target instanceof HTMLElement)) {
+            throw "Trying to show a dropdown without an element target!"
+        }
+        const dropdown = this.app.addOverlay(constructor, state, 'dropdown')
+        dropdown.parentPart = this
+        dropdown.anchor(target)
+        this.app.lastDropdownTarget = target
+    }
+
+    clearDropdowns() {
+        this.app.clearDropdowns()
+    }
+
+    /**
+     * Calls `makeDropdown` only if there's not a dropdown currently originating from the target.
+     * @param constructor a constructor for a dropdown part
+     * @param state the dropdown's state
+     * @param target the target element around which to show the dropdown
+     */
+    toggleDropdown<DropdownType extends Dropdown<DropdownStateType>, DropdownStateType extends {}>(
+        constructor: { new(p: PartParent, id: string, state: DropdownStateType): DropdownType; },
+        state: DropdownStateType,
+        target: EventTarget | null) {
+        if (target && target instanceof HTMLElement && target == this.app.lastDropdownTarget) {
+            this.clearDropdowns()
+        } else {
+            this.makeDropdown(constructor, state, target)
+        }
+    }
+
+}

package/parts/not-found-page.ts

@@ -0,0 +1,20 @@
+import {Logger} from "tuff-core/logging"
+import PagePart from "./page-part"
+import {NoState, PartTag} from "tuff-core/parts"
+
+const log = new Logger('NotFoundRoute')
+
+/**
+ * Default page part if the router can't find the path.
+ */
+export default class NotFoundRoute extends PagePart<NoState> {
+    async init() {
+        this.setTitle("Page Not Found")
+    }
+
+    renderContent(parent: PartTag) {
+        log.warn(`Not found: ${this.context.href}`)
+        parent.h1({text: "Not Found"})
+    }
+
+}

package/parts/page-part.ts

@@ -0,0 +1,189 @@
+import {Action, RenderActionOptions} from "../theme"
+import ContentPart, {ActionLevel} from "./content-part"
+import {PartTag} from "tuff-core/parts"
+import {optionsForSelect, SelectOptions} from "tuff-core/forms"
+import {UntypedKey} from "tuff-core/messages"
+import {Logger} from "tuff-core/logging"
+import {HtmlParentTag} from "tuff-core/html"
+
+const log = new Logger("Terrier PagePart")
+
+/**
+ * Whether some content should be constrained to a reasonable width or span the entire screen.
+ */
+export type ContentWidth = "normal" | "wide"
+
+/// Toolbar fields
+
+type BaseFieldDef = { name: string } & ToolbarFieldDefOptions
+
+type ToolbarFieldDefOptions = {
+    onChangeKey?: UntypedKey,
+    onInputKey?: UntypedKey,
+    defaultValue?: string,
+    tooltip?: string
+}
+
+type ToolbarSelectDef = { type: 'select', options: SelectOptions } & BaseFieldDef
+
+type ValuedInputType = 'text' | 'color' | 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week'
+type ToolbarValuedInputDef = { type: ValuedInputType } & BaseFieldDef
+
+/**
+ * Defines a field to be rendered in the page's toolbar
+ */
+type ToolbarFieldDef = ToolbarSelectDef | ToolbarValuedInputDef
+
+/**
+ * A part that renders content to a full page.
+ */
+export default abstract class PagePart<TState> extends ContentPart<TState> {
+
+    /// Content Width
+
+    /**
+     * Whether the main content should be constrained to a reasonable width (default) or span the entire screen.
+     */
+    protected mainContentWidth: ContentWidth = "normal"
+
+    /// Breadcrumbs
+
+    private _breadcrumbs = Array<Action>()
+
+    addBreadcrumb(crumb: Action) {
+        this._breadcrumbs.push(crumb)
+    }
+
+    private _titleHref?: string
+
+    /**
+     * Adds an href to the title (last) breadcrumb.
+     * @param href
+     */
+    setTitleHref(href: string) {
+        this._titleHref = href
+    }
+
+    /// Toolbar Fields
+
+    private _toolbarFieldsOrder: string[] = []
+    private _toolbarFields: Record<string, ToolbarFieldDef> = {}
+
+    protected get hasToolbarFields() {
+        return this._toolbarFieldsOrder.length > 0
+    }
+
+    /**
+     * Adds a select to the toolbar with the given options.
+     * @param name the name of the select
+     * @param selectOptions an array of select options
+     * @param opts
+     */
+    addToolbarSelect(name: string, selectOptions: SelectOptions, opts?: ToolbarFieldDefOptions) {
+        this.addToolbarFieldDef({ type: 'select', name, options: selectOptions, ...opts })
+    }
+
+    /**
+     * Adds a select to the toolbar with the given options.
+     * @param name the name of the select
+     * @param type the type attribute of the input field
+     * @param opts
+     */
+    addToolbarInput(name: string, type: ValuedInputType, opts?: ToolbarFieldDefOptions) {
+        this.addToolbarFieldDef({ type, name, ...opts })
+    }
+
+    private addToolbarFieldDef(def: ToolbarFieldDef) {
+        this._toolbarFieldsOrder.push(def.name)
+        this._toolbarFields[def.name] = def
+    }
+
+    /// Rendering
+
+    protected get toolbarClasses() : string[] {
+        return []
+    }
+
+    render(parent: PartTag) {
+        parent.div(`.tt-page-part.content-width-${this.mainContentWidth}`, page => {
+            page.div('.tt-toolbar', toolbar => {
+                toolbar.class(...this.toolbarClasses)
+                this.renderBreadcrumbs(toolbar)
+                this.renderCustomToolbar(toolbar)
+                if (this.hasToolbarFields) this.renderToolbarFields(toolbar)
+                if (this.hasActions('tertiary')) this.renderActions(toolbar, 'tertiary')
+            })
+
+            page.div('.lighting')
+            page.div('.full-width-page', conatiner => {
+                conatiner.div('.page-content', main => {
+                    this.renderContent(main)
+                    main.div('.page-actions', actions => {
+                        this.renderActions(actions, 'secondary', {iconColor: null, defaultClass: 'secondary'})
+                        this.renderActions(actions, 'primary', {iconColor: null, defaultClass: 'primary'})
+                    })
+                })
+            })
+        })
+    }
+
+    protected renderActions(parent: PartTag, level: ActionLevel, options?: RenderActionOptions) {
+        parent.div(`.${level}-actions`, actions => {
+            this.app.theme.renderActions(actions, this.getActions(level), options)
+        })
+    }
+
+    protected renderBreadcrumbs(parent: PartTag) {
+        if (!this._breadcrumbs.length && !this._title?.length) return
+
+        parent.h1('.breadcrumbs', h1 => {
+            const crumbs = Array.from(this._breadcrumbs)
+
+            // add a breadcrumb for the page title
+            if (this._title?.length) {
+                const titleCrumb: Action = {
+                    title: this._title,
+                    icon: this._icon || undefined,
+                }
+                if (this._titleHref) {
+                    titleCrumb.href = this._titleHref
+                }
+                if (this._titleClasses?.length) {
+                    titleCrumb.classes = this._titleClasses
+                }
+                crumbs.push(titleCrumb)
+            }
+
+            this.app.theme.renderActions(h1, crumbs)
+        })
+    }
+
+    protected renderCustomToolbar(_parent: PartTag): void {
+
+    }
+
+    protected renderToolbarFields(parent: PartTag) {
+        parent.div('.fields.tt-flex.align-center.small-gap', fields => {
+            for (const name of this._toolbarFieldsOrder) {
+                const def = this._toolbarFields[name]
+                if (!def) {
+                    log.warn(`No select def with name ${name} could be found!`)
+                    continue;
+                }
+
+                let field!: HtmlParentTag
+                if (def.type === 'select') {
+                    field = fields.select({name: def.name}, select => {
+                        optionsForSelect(select, def.options, def.defaultValue)
+                    })
+                } else {
+                    field = fields.input({name: def.name, type: def.type})
+                }
+
+                if (def.onChangeKey) field.emitChange(def.onChangeKey)
+                if (def.onInputKey) field.emitInput(def.onInputKey)
+                if (def.tooltip?.length) field.dataAttr('tooltip', def.tooltip)
+            }
+        })
+    }
+}

package/parts/panel-part.ts

@@ -0,0 +1,40 @@
+import ContentPart from "./content-part"
+import {PartTag} from "tuff-core/parts"
+import Fragments from "../fragments"
+
+/**
+ * A part that renders content inside a panel.
+ */
+export default abstract class PanelPart<TState> extends ContentPart<TState> {
+
+    getLoadingContainer() {
+        return this.element?.getElementsByClassName('tt-panel')[0]
+    }
+
+    protected get panelClasses(): string[] {
+        return []
+    }
+
+    render(parent: PartTag) {
+        parent.div('.tt-panel', panel => {
+            panel.class(...this.panelClasses)
+            if (this._title?.length || this.hasActions('tertiary')) {
+                panel.div('.panel-header', header => {
+                    header.h2(h2 => {
+                        if (this._icon) {
+                            this.app.theme.renderIcon(h2, this._icon, 'link')
+                        }
+                        h2.div('.title', {text: this._title || 'Call setTitle()'})
+                    })
+                    header.div('.tertiary-actions', actions => {
+                        this.theme.renderActions(actions, this.getActions('tertiary'))
+                    })
+                })
+            }
+            panel.div('.panel-content', content => {
+                this.renderContent(content)
+            })
+            Fragments.panelActions(panel, this.getAllActions(), this.theme)
+        })
+    }
+}

package/parts/terrier-form-part.ts

@@ -0,0 +1,20 @@
+import {FormPart, FormPartData} from "tuff-core/forms"
+import Theme from "../theme"
+import {TerrierApp} from "../app"
+
+export default abstract class TerrierFormPart<TState extends FormPartData> extends FormPart<TState> {
+
+
+    get app(): TerrierApp<any> {
+        return this.root as unknown as TerrierApp<any> // this should always be true
+    }
+
+    get theme(): Theme {
+        return this.app.theme
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['tt-form']
+    }
+}