gradum-kit - v0.1.0
    Preparing search index...

    Class GradumDrawer<ViewType, DataType, ModelType, EMitterType>

    Type Parameters

    Hierarchy (View Summary)

    Index
    constructor
    properties resizeObserver transition defaultProperties onAttach onDetach onAdopt tagName initialized defaultFeedforwardProperties view model emitter data dataId dataIndex dataSize operators handlers interactors tools constrainers unsetDefaultClasses shadowDOM defaultClasses
    panelContainer thumb panel icon hideOverflow attachSideToIconName rotateIconBasedOnSide side offset isVertical open
    initialize setupUIElements setupUILayout setupUIListeners getOppositeSide getAdjacentSide refresh enableTransition setupResizeObserver create customCreate setupChangedCallbacks connectedCallback disconnectedCallback adoptedCallback destroy feedforward clone
    properties: GradumDrawerProperties
    resizeObserver: ResizeObserver

    Watches the panel while the drawer is open, so the drawer follows its content when that content changes size.

    transition: Reifect
    defaultProperties: GradumElementProperties = ...

    Default properties assigned to a new instance.

    onAttach: Delegate<() => void> = ...

    Delegate fired when the element is attached to DOM.

    onDetach: Delegate<() => void> = ...

    Delegate fired when the element is detached from the DOM.

    onAdopt: Delegate<() => void> = ...

    Delegate fired when the element is adopted by a new parent in the DOM.

    tagName: string
    initialized: boolean

    Whether the element was initialized already or not.

    defaultFeedforwardProperties: GradumElementProperties

    The properties passed on to children created through feedforward, letting a parent seed its descendants with shared defaults.

    view: ViewType

    The view (if any) of the element.

    model: ModelType

    The model (if any) of the element.

    emitter: GradumEmitter

    The emitter (if any) of the element.

    data: DataType

    The main data block (if any) attached to the element, taken from its model (if any).

    dataId: string

    The ID of the main data block (if any) of the element, taken from its model (if any).

    dataIndex: number

    The numerical index of the main data block (if any) of the element, taken from its model (if any).

    dataSize: number

    The size (number) of the main data block (if any) of the element, taken from its model (if any).

    operators: GradumOperator<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The operators (if any) attached to the element's MVC structure.

    handlers: GradumHandler<GradumModel<any, any, any, any, any>>[]

    The handlers (if any) attached to the element's model. Returns an empty array if no model is set.

    interactors: GradumInteractor<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The interactors (if any) attached to the element's MVC structure.

    tools: GradumTool<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The tools (if any) attached to the element's MVC structure.

    constrainers: GradumConstrainer<
        object,
        GradumView<
            any,
            any,
            GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
        >,
        GradumModel<any, any, any, any, any>,
        GradumEmitter<GradumModel<any, any, any, any, any>, KeyType>,
    >[]

    The constrainers (if any) attached to the element's MVC structure.

    unsetDefaultClasses: boolean

    Whether to set the default CSS classes defined in the static config on the element or not. Setting it will accordingly add/remove the CSS classes from the element.

    shadowDOM: boolean

    Whether the element renders its children into a shadow root. Assigning true attaches one if the element does not already have it.

    defaultClasses: string | string[]

    The CSS classes applied to every instance of this element class. Assigning a new value swaps the previous classes out for the new ones, unless unsetDefaultClasses is set.

    • get panelContainer(): HTMLElement

      Returns HTMLElement

      The element wrapping the panel. It is the one that resizes as the drawer opens and closes; the panel itself keeps its natural size.

    • get thumb(): HTMLElement

      Returns HTMLElement

    • set thumb(value: HTMLElement | GradumProperties): void

      Parameters

      Returns void

      The handle used to open and close the drawer. Assign an element to use it directly, or properties to build one. Clicking it toggles the drawer; dragging it moves the drawer with the pointer.

    • get panel(): HTMLElement

      Returns HTMLElement

    • set panel(value: HTMLElement | GradumProperties): void

      Parameters

      Returns void

      The drawer's content panel. Assign an element to use it directly, or properties to build one. Any children already on the drawer are moved into it when the layout is set up.

    • set hideOverflow(value: boolean): void

      Parameters

      • value: boolean

      Returns void

      Whether content overflowing the panel is clipped rather than spilling out of the drawer.

    • set attachSideToIconName(value: boolean): void

      Parameters

      • value: boolean

      Returns void

      Whether the drawer's side is appended to the icon's name, so a different icon file is loaded per side. Turning this on turns GradumDrawer.rotateIconBasedOnSide off.

    • set rotateIconBasedOnSide(value: boolean): void

      Parameters

      • value: boolean

      Returns void

      Whether one icon is rotated to suit the drawer's side instead of swapping files. Turning this on turns GradumDrawer.attachSideToIconName off.

    • set side(value: Side): void

      Parameters

      Returns void

      The edge the drawer is attached to. Assigning it swaps the matching CSS class and refreshes the drawer's position.

    • get offset(): PartialRecord<Open, number>

      Returns PartialRecord<Open, number>

    • set offset(value: number | PartialRecord<Open, number>): void

      Parameters

      Returns void

      How far the drawer sits from its edge, in pixels, given separately for its open and closed states. Assign a single number to use it for both.

    • get isVertical(): boolean

      Returns boolean

      Whether the drawer opens along the vertical axis, i.e. it is attached to the top or bottom edge.

    • set open(value: boolean): void

      Parameters

      • value: boolean

      Returns void

      Whether the drawer is open. Assigning it animates the drawer to its new position.

    • Function

      initialize

      Returns void

      Set the drawer up and settle it into its closed position without animating, then enable transitions on the next frame so later changes animate normally.

    • Function

      setupUIElements

      Returns void

      Setup method intended to initialize all direct sub-elements attached to this element, and store them in fields. Called on initialize().

    • Function

      setupUILayout

      Returns void

      Setup method to create the layout structure of the element by adding all created sub-elements to this element's child tree. Called on initialize().

    • Function

      setupUIListeners

      Returns void

      Setup method to initialize and define all input/DOM event listeners of the element. Called on initialize().

    • Function

      getOppositeSide

      Parameters

      • Optionalside: Side = ...

        The side to invert. Defaults to the drawer's own side.

      Returns Side

      The opposite side.

      Get the side facing the given one — top against bottom, left against right.

    • Function

      getAdjacentSide

      Parameters

      • Optionalside: Side = ...

        The side to rotate from. Defaults to the drawer's own side.

      Returns Side

      The adjacent side.

      Get the side a quarter-turn from the given one, used to rotate the thumb's icon.

    • Function

      refresh

      Returns void

      Re-measure the panel and move the drawer to the position its current state calls for. Call it after changing the panel's contents outside the drawer's own observers.

    • Protected Function

      enableTransition

      Parameters

      • b: boolean

        Whether the transition is enabled.

      Returns void

      Turn the drawer's open/close animation on or off, to move it instantly while dragging.

    • Protected Function

      setupResizeObserver

      Returns void

      Start following the panel's size while the drawer is open, so the drawer grows and shrinks with its content. Resizes are ignored mid-transition and mid-drag, where the size is already being driven deliberately.

    • Function

      create

      Type Parameters

      Parameters

      • this: This
      • Optionalproperties: This["prototype"]["properties"] & ElementTagDefinition<"div"> & Omit<
            HTMLElementMutableFields<"div">,
            "tag" | "namespace",
        > & {
            id?: string;
            classes?: string | string[];
            style?: string;
            stylesheet?: string;
            shadowDOM?: boolean;
            parent?: Element;
            children?: Element | Element[];
            text?: string;
            listeners?: Record<
                string,
                (e: Event, el: ValidElement<Tag>) => boolean | any,
            >;
            onClick?: (e: Event, el: HTMLDivElement) => any;
            onDrag?: (e: Event, el: HTMLDivElement) => any;
            out?: string | Node;
            [key: string]: any;
        } & MvcProperties<ViewType, ModelType, EmitterType> & {
            data?: DataType;
            initialize?: boolean;
        } & { out?: string
        | Node; [key: string]: any } & {
            unsetDefaultClasses?: boolean;
            shadowDOM?: boolean;
            defaultSelectedClasses?: string | string[];
            defaultClasses?: string | string[];
        }

        Properties to set on the new instance.

      Returns This["prototype"] & GradumElement<ViewType, DataType, ModelType, EmitterType>

      The created instance, typed as the class this was called on.

      Instantiate this class with the given properties. Defaults declared by every class in the inheritance chain are applied first, nearest ancestor last, so a subclass' defaultProperties win over its parent's. The return type follows the class it is called on, and the MVC type parameters are read back off the properties — passing model: MyModel types .model as MyModel without a cast.

      Note: the callee is read through this["prototype"] rather than InstanceType<this>, because the latter instantiates a generic class' parameters with their constraints instead of their defaults, which is what forced casts at call sites.

    • Protected Function

      Parameters

      • properties: object

        Properties to set on the new instance, defaults already merged in.

      Returns object

      The created instance.

      customCreate

      The construction step behind create. Override it to change how instances of a class are built — to route through a factory, or to wrap the instance — while keeping the default-merging that create performs.

    • Protected Function

      setupChangedCallbacks

      Returns void

      Setup method intended to initialize change listeners and callbacks. Called on initialize().

    • Function

      connectedCallback

      Returns void

      function called when the element is attached to the DOM.

    • Function

      disconnectedCallback

      Returns void

      function called when the element is detached from the DOM.

    • Function

      adoptedCallback

      Returns void

      function called when the element is adopted by a new parent in the DOM.

    • Function

      destroy

      Returns this

      Itself, allowing for method chaining.

      Destroys the node by removing it from the document and removing all its bound listeners.

    • Function

      feedforward

      Parameters

      • Optionalproperties: FeedforwardProperties

        Properties to feed forward. Defaults to defaultFeedforwardProperties.

      Returns this

      Itself, allowing for method chaining.

      Push this element's feedforward properties down to its children, so newly added descendants pick up the same defaults.

    • Function

      clone

      Parameters

      Returns this

      The cloned element.

      Create a copy of this element. By default the copy carries the same properties and children but none of the bound listeners.

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods