Class CTag

This is the main class in Cardboard. Even though Cardboard is designed to not need to use this class directly, you can if you want.

CTag contains a reference to an HTMLElement, its parent, and provides a set of methods to interact with it.

Hierarchy

  • CTag

Constructors

Properties

_attachable: boolean = false

If set to true, it be appended to the attached tag

_cachedChildren: Node[] = []
_children: TagChild[] = []

Holds the list of all children, the ones that are currently in the DOM and those that are not

_destroyers: NoOp[] = []

Any function inside this array, will be called whenever the CTag is destroyed Used to remove HTML Event Listeners and Consumable listeners

_meta: {
    isHidden: boolean;
    nextSiblingID: null;
} = ...

Type declaration

  • isHidden: boolean
  • nextSiblingID: null
_observer: MutationObserver
_parent?: CTag

Param

Reference to the parent

el: HTMLElement & {
    remove: (() => any);
}

Reference to the HTMLElement that this

Type declaration

  • remove: (() => any)
      • (): any
      • Returns any

Accessors

  • get checked(): any
  • Returns any

  • get children(): Node[]
  • Returns Node[]

  • get classList(): DOMTokenList
  • Returns DOMTokenList

  • get className(): string
  • Returns string

  • get consumeValue(): any
  • Gets the value of the element and clears the value

    Returns any

  • get id(): string
  • Returns string

  • get parent(): undefined | CTag
  • Returns undefined | CTag

  • set parent(newParent): void
  • Parameters

    Returns void

  • get style(): CSSStyleDeclaration
  • Returns CSSStyleDeclaration

  • get value(): any
  • Returns any

Methods

  • Parameters

    • element: HTMLElement

    Returns void

  • Parameters

    • item: any

    Returns boolean

  • Parameters

    • element: HTMLElement

    Returns Node[]

  • Parameters

    Returns null | Node

  • Adds a single attribute to the element

    Parameters

    • key: string
    • value: string = ''

    Returns CTag

  • Add classes to the elements class list

    Parameters

    • Rest ...classes: string[]

    Returns CTag

  • Add a single style

    Type Parameters

    • K extends CssProperty

    Parameters

    • property: K
    • value: PickPropertyValues<K>

    Returns CTag

  • Add attribute to the element when the consumer is truthy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string. If {invert} is set to true, the condition will be inversed, but you can also use attrIfNot

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • attr: string
    • value: string | ((self) => string) = ''
    • invert: boolean = false

    Returns CTag

  • Add attribute to the element when the consumer is falsy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string. If {invert} is set to true, the condition will be inversed

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • attr: string
    • value: string | ((self) => string) = ''

    Returns CTag

  • Add a change event listener

    Parameters

    • fn: ((tag, evt) => void)
        • (tag, evt): void
        • Parameters

          • tag: CTag
          • evt: Event

          Returns void

    Returns CTag

  • Adds classes to the element when the consumer is truthy. Updates whenever the consumable changes. You can pass in an array of classes, or a function that returns a list of classes. If {invert} is set to true, the condition will be inversed, but you can also use classIfNot

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • classes: string[] | ((self) => string[])
    • invert: boolean = false

    Returns CTag

  • Adds classes to the element when the consumer is falsy. Updates whenever the consumable changes. You can pass in an array of classes, or a function that returns a list of classes. For the oposite you can also use classIf

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • classes: string[] | ((self) => string[])

    Returns CTag

  • Clears the value of the element. If you are getting the value and then clearing, consider using consumeValue

    Returns CTag

  • Add a click event listener

    Parameters

    • fn: ((tag, evt) => void)
        • (tag, evt): void
        • Parameters

          • tag: CTag
          • evt: MouseEvent

          Returns void

    Returns CTag

  • Configure the element in a single call by passing

    Parameters

    • c: TagConfig

      instead of having to call a method for each property you want to changes

    Returns CTag

  • Whenever the consumable changes, it will call the consumer

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • consumer: ((self, newValue?) => void)
        • (self, newValue?): void
        • Parameters

          • self: CTag
          • Optional newValue: T

          Returns void

    Returns CTag

  • Destroy the element, should not be used afterwards

    Returns void

  • Disable this element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use disableIfNot

    Type Parameters

    • T

    Parameters

    Returns CTag

  • Disable this element when the consumer is falsy. Updates whenever the consumable changes.

    Type Parameters

    • T

    Parameters

    Returns CTag

  • When the consumable changes, it will call {ifTrue} when the consumable is true. Or {ifFalse} when the consumable is false. If {invert} is set to true, the condition will be inversed, but you can also use doIfNot

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • ifTrue: ((value?) => void)
        • (value?): void
        • Parameters

          • Optional value: T

          Returns void

    • ifFalse: ((value?) => void)
        • (value?): void
        • Parameters

          • Optional value: T

          Returns void

    • invert: boolean = false

    Returns CTag

  • The oposite of {this.doIf} When the consumable changes, it will call {ifTrue} if the consumable is false. Or {ifFalse} if the consumable is true.

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • ifTrue: ((value) => void)
        • (value): void
        • Parameters

          • value: T

          Returns void

    • ifFalse: ((value) => void)
        • (value): void
        • Parameters

          • value: T

          Returns void

    Returns CTag

  • Find a child in this element (in the DOM or NOT)

    Parameters

    • predicate: ((el) => boolean)
        • (el): boolean
        • Parameters

          Returns boolean

    Returns undefined | string | Node | CTag | IConsumable<any>

  • Parameters

    • predicate: ((el) => boolean)
        • (el): boolean
        • Parameters

          Returns boolean

    Returns undefined | CTag

  • Get an attributes value

    Parameters

    • attr: string

    Returns any

  • Check if this element has attributes

    Parameters

    • Rest ...attr: string[]

    Returns boolean

  • Check if classes are present in this element

    Parameters

    • Rest ...classes: string[]

    Returns boolean

  • Check if this element has styles

    Type Parameters

    • K extends CssProperty

    Parameters

    • Rest ...styles: K[]

    Returns boolean

  • Hide this element (removed from DOM)

    Returns Promise<void>

  • Hide this element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use hideIfNot

    Type Parameters

    • T

    Parameters

    Returns CTag

  • Hide this element when the consumer is falsy. Updates whenever the consumable changes.

    Type Parameters

    • T

    Parameters

    Returns CTag

  • Add a keypress event listener

    Parameters

    • fn: ((tag, evt) => void)
        • (tag, evt): void
        • Parameters

          • tag: CTag
          • evt: KeyboardEvent

          Returns void

    • Optional key: string

    Returns CTag

  • Listen to an event on the element. Like addEventListener.

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • tag: CTag
    • evt: K
    • consumer: ((self, other, evt) => void)
        • (self, other, evt): void
        • Parameters

          • self: CTag
          • other: CTag
          • evt: HTMLElementEventMap[K]

          Returns void

    Returns CTag

  • Add an event listener for a particular event

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • evtName: string | K
    • fn: ((tag, evt) => void)
        • (tag, evt): void
        • Parameters

          • tag: CTag
          • evt: HTMLElementEventMap[K]

          Returns void

    Returns CTag

  • Add an event listener for a particular event that will only fire once

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • evtName: K & string
    • fn: ((tag, evt) => void)
        • (tag, evt): void
        • Parameters

          • tag: CTag
          • evt: HTMLElementEventMap[K]

          Returns void

    Returns CTag

  • Query a child in this element (in the DOM)

    Parameters

    • selector: any

    Returns undefined | CTag

  • Remove element from the DOM, but keep data as is. Can then be added again. To fully remove the element use destroy

    Returns Promise<CTag>

  • Replace a class with another

    Parameters

    • targetClass: string
    • replaceClass: string

    Returns CTag

  • Remove attributes from the element

    Parameters

    • Rest ...attrs: string[]

    Returns CTag

  • Remove classes from class list

    Parameters

    • Rest ...classes: string[]

    Returns CTag

  • Remove styles

    Parameters

    • Rest ...styleNames: string[]

    Returns CTag

  • Adds a set of attributes to the element

    Parameters

    • attrs: Record<string, undefined | string>

    Returns CTag

  • Parameters

    • checked: boolean

    Returns CTag

  • Set the elements class name

    Parameters

    • className: string

    Returns CTag

  • Set whether the element should be disabled or not

    Parameters

    • disabled: boolean

    Returns CTag

  • Parameters

    • newValue: string

    Returns CTag

  • If the element is currently hidden it will add this element to the page wherever it's supposed to be. I will be placed exactly in the correct position, even if there are other elements hidden.

    Returns Promise<boolean>

  • Add style to the element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use styleIfNot {value} can be a string or a function that returns a string.

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • style: string
    • value: string | ((self) => string) = ''
    • invert: boolean = false

    Returns CTag

  • Add style to the element when the consumer is falsy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string.

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • style: string
    • value: string | ((self) => string) = ''

    Returns CTag

  • Add multiple styles to the element when the consumer is truthy. Updates whenever the consumable changes. {styles} can be a StyleMap or a function that returns a StyleMap. If {invert} is set to true, the condition will be inversed, but you can also use stylesIfNot

    Type Parameters

    • T

    Parameters

    Returns CTag

  • Add multiple styles to the element when the consumer is falsy. Updates whenever the consumable changes. {styles} can be a StyleMap or a function that returns a StyleMap. For the oposite use stylesIf

    Type Parameters

    • T

    Parameters

    Returns CTag

  • Add a submit event listener

    Parameters

    • fn: ((tag, evt) => void)
        • (tag, evt): void
        • Parameters

          • tag: CTag
          • evt: SubmitEvent

          Returns void

    Returns CTag

  • If {newText} is provided, it sets the textContent of the element. If {newText} is provided, and a state is provided. It will use the {newText} as a template, that will be interpolated with the values in the state, each time the state changes. It acts like text

    If no argument is provided, it returns the textContent of the element.

    Type Parameters

    Parameters

    • Optional textTemplate: string
    • Optional obj: K | IConsumable<T>

    Returns J extends string
        ? CTag
        : string

  • Sets {text} when the consumer is true, and sets {elseText (default='')} when the consumer is false. Both {text} and {elseText} can be a string or a function that returns a string. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use textIfNot

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • text: string | ((self) => string)
    • elseText: string | ((self) => string) = ''
    • invert: boolean = false

    Returns CTag

  • Sets {text} when the consumer is falsy, and sets {elseText (default='')} when the consumer is truthy. Both {text} and {elseText} can be a string or a function that returns a string. Updates whenever the consumable changes.

    Type Parameters

    • T

    Parameters

    • consumable: IConsumable<T>
    • text: string | ((self) => string)
    • elseText: string | ((self) => string) = ''

    Returns CTag

  • Toggle a class. If it's present it's removed, if it's not present its added.

    Parameters

    • targetClass: string

    Returns CTag

  • Returns a IConsumable that fires when the Event evtName is fired in this element

    The return value of fn will be passed to the listeners of the IConsumable

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • evtName: string | K
    • fn: ((self, evt) => any)
        • (self, evt): any
        • Parameters

          • self: CTag
          • evt: HTMLElementEventMap[K]

          Returns any

    Returns IConsumable<any>

Generated using TypeDoc