Class Renderer

The default implementation of an IRenderer.

Implements

DirListing.IRenderer

Index

Constructors

constructor

new Renderer(): DirListing.Renderer
Returns DirListing.Renderer

Properties

`Protected`itemFactories

itemFactories: {
    date_created: () => HTMLSpanElement;
    file_size: () => HTMLSpanElement;
    is_selected: () => HTMLElement;
    last_modified: () => HTMLSpanElement;
    name: () => HTMLSpanElement;
} = ...

Factories for individual parts of the item.

Methods

createCheckboxWrapperNode

createCheckboxWrapperNode(
options?: { alwaysVisible: boolean; headerNode?: boolean },
): HTMLElement
Creates a node containing a checkbox.

We wrap the checkbox in a label element in order to increase its hit area. This is because the padding of the checkbox itself cannot be increased via CSS, as the CSS/form compatibility table at the following url from MDN shows: https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls#check_boxes_and_radio_buttons
Parameters
- Optionaloptions: { alwaysVisible: boolean; headerNode?: boolean }
Returns HTMLElement
A new DOM node that contains a checkbox.

Params
options.alwaysVisible Should the checkbox be visible even when not hovered?
- Defined in packages/filebrowser/src/listing.ts:3406

createDragImage

createDragImage(
    node: HTMLElement,
    count: number,
    trans: IRenderMime.TranslationBundle,
    fileType?: DocumentRegistry.IFileType,
): HTMLElement
Create a drag image for an item.
Parameters
- node: HTMLElement
  A node created by [[createItemNode]].
- count: number
  The number of items being dragged.
- trans: IRenderMime.TranslationBundle
- OptionalfileType: DocumentRegistry.IFileType
  The file type of the item, if applicable.
Returns HTMLElement
An element to use as the drag image.
Implementation of IRenderer.createDragImage
- Defined in packages/filebrowser/src/listing.ts:3794

`Protected`createHeaderItemNode

createHeaderItemNode(label: string): HTMLElement
Create a node for a header item.
Parameters
- label: string
Returns HTMLElement
- Defined in packages/filebrowser/src/listing.ts:3871

createItemNode

createItemNode(
    hiddenColumns?: Set<ToggleableColumn>,
    columnsSizes?: Record<
        "name"
        | "last_modified"
        | "is_selected"
        | "file_size"
        | "date_created",
        null | number,
    >,
): HTMLElement
Create a new item node for a dir listing.
Parameters
- OptionalhiddenColumns: Set<ToggleableColumn>
- OptionalcolumnsSizes: Record<
      "name"
      | "last_modified"
      | "is_selected"
      | "file_size"
      | "date_created",
      null | number,
  >
Returns HTMLElement
A new DOM node to use as a content item.
Implementation of IRenderer.createItemNode
- Defined in packages/filebrowser/src/listing.ts:3369

createNode

createNode(): HTMLElement
Create the DOM node for a dir listing.

Returns HTMLElement
Implementation of IRenderer.createNode
- Defined in packages/filebrowser/src/listing.ts:3212

getCheckboxNode

getCheckboxNode(node: HTMLElement): null | HTMLInputElement
Get the checkbox input element node.
Parameters
- node: HTMLElement
  A node created by [[createItemNode]] or [[createHeaderItemNode]]
Returns null | HTMLInputElement
The checkbox node.
Implementation of IRenderer.getCheckboxNode
- Defined in packages/filebrowser/src/listing.ts:3777

getNameNode

getNameNode(node: HTMLElement): HTMLElement
Get the node containing the file name.
Parameters
- node: HTMLElement
  A node created by [[createItemNode]].
Returns HTMLElement
The node containing the file name.
Implementation of IRenderer.getNameNode
- Defined in packages/filebrowser/src/listing.ts:3765

handleHeaderClick

handleHeaderClick(
node: HTMLElement,
event: MouseEvent,
): null | DirListing.ISortState
Handle a header click.
Parameters
- node: HTMLElement
  A node populated by [[populateHeaderNode]].
- event: MouseEvent
  A click event on the node.
Returns null | DirListing.ISortState
The sort state of the header after the click event.
Implementation of IRenderer.handleHeaderClick
- Defined in packages/filebrowser/src/listing.ts:3308

populateHeaderNode

populateHeaderNode(
    node: HTMLElement,
    translator?: ITranslator,
    hiddenColumns?: Set<ToggleableColumn>,
    columnsSizes?: Record<
        "name"
        | "last_modified"
        | "is_selected"
        | "file_size"
        | "date_created",
        null | number,
    >,
    sortState?: DirListing.ISortState,
): void
Populate and empty header node for a dir listing.
Parameters
- node: HTMLElement
  The header node to populate.
- Optionaltranslator: ITranslator
- OptionalhiddenColumns: Set<ToggleableColumn>
- OptionalcolumnsSizes: Record<
      "name"
      | "last_modified"
      | "is_selected"
      | "file_size"
      | "date_created",
      null | number,
  >
- OptionalsortState: DirListing.ISortState
Returns void
Implementation of IRenderer.populateHeaderNode
- Defined in packages/filebrowser/src/listing.ts:3232

updateItemCreated

updateItemCreated(
    created: HTMLElement,
    createdDate: string,
    createdStyle: RelativeTimeFormatStyle,
): void
Update an item's created date.
Parameters
- created: HTMLElement
  Element containing the file's created date.
- createdDate: string
  String representation of the created date.
- createdStyle: RelativeTimeFormatStyle
  The date style for the created column: narrow, short, or long
Returns void
Implementation of IRenderer.updateItemCreated
- Defined in packages/filebrowser/src/listing.ts:3469

updateItemModified

updateItemModified(
    modified: HTMLElement,
    modifiedDate: string,
    modifiedStyle: RelativeTimeFormatStyle,
): void
Update an item's last modified date.
Parameters
- modified: HTMLElement
  Element containing the file's last modified date.
- modifiedDate: string
  String representation of the last modified date.
- modifiedStyle: RelativeTimeFormatStyle
  The date style for the modified column: narrow, short, or long
Returns void
Implementation of IRenderer.updateItemModified
- Defined in packages/filebrowser/src/listing.ts:3447

updateItemNode

updateItemNode(
    node: HTMLElement,
    model: Contents.IModel,
    fileType?: DocumentRegistry.IFileType,
    translator?: ITranslator,
    hiddenColumns?: Set<ToggleableColumn>,
    selected?: boolean,
    modifiedStyle?: RelativeTimeFormatStyle,
    columnsSizes?: Record<
        "name"
        | "last_modified"
        | "is_selected"
        | "file_size"
        | "date_created",
        null | number,
    >,
    createdStyle?: RelativeTimeFormatStyle,
): void
Update an item node to reflect the current state of a model.
Parameters
- node: HTMLElement
  A node created by [[createItemNode]].
- model: Contents.IModel
  The model object to use for the item state.
- OptionalfileType: DocumentRegistry.IFileType
  The file type of the item, if applicable.
- Optionaltranslator: ITranslator
- OptionalhiddenColumns: Set<ToggleableColumn>
- Optionalselected: boolean
- OptionalmodifiedStyle: RelativeTimeFormatStyle
  The date style for the modified column: narrow, short, or long
- OptionalcolumnsSizes: Record<
      "name"
      | "last_modified"
      | "is_selected"
      | "file_size"
      | "date_created",
      null | number,
  >
- OptionalcreatedStyle: RelativeTimeFormatStyle
Returns void
Implementation of IRenderer.updateItemNode
- Defined in packages/filebrowser/src/listing.ts:3529

updateItemSize

updateItemSize(
    node: HTMLElement,
    model: Contents.IModel,
    modifiedStyle?: RelativeTimeFormatStyle,
    columnsSizes?: Record<
        "name"
        | "last_modified"
        | "is_selected"
        | "file_size"
        | "date_created",
        null | number,
    >,
    createdStyle?: RelativeTimeFormatStyle,
): void
Update size of item nodes, assuming that model has not changed.
Parameters
- node: HTMLElement
- model: Contents.IModel
- OptionalmodifiedStyle: RelativeTimeFormatStyle
- OptionalcolumnsSizes: Record<
      "name"
      | "last_modified"
      | "is_selected"
      | "file_size"
      | "date_created",
      null | number,
  >
- OptionalcreatedStyle: RelativeTimeFormatStyle
Returns void
Implementation of IRenderer.updateItemSize
- Defined in packages/filebrowser/src/listing.ts:3717

Class Renderer

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Returns DirListing.Renderer

Properties

ProtecteditemFactories

Methods

createCheckboxWrapperNode

Parameters

Returns HTMLElement

Params

createDragImage

Parameters

Returns HTMLElement

ProtectedcreateHeaderItemNode

Parameters

Returns HTMLElement

createItemNode

Parameters

Returns HTMLElement

createNode

Returns HTMLElement

getCheckboxNode

Parameters

Returns null | HTMLInputElement

getNameNode

Parameters

Returns HTMLElement

handleHeaderClick

Parameters

Returns null | DirListing.ISortState

populateHeaderNode

Parameters

Returns void

updateItemCreated

Parameters

Returns void

updateItemModified

Parameters

Returns void

updateItemNode

Parameters

Returns void

updateItemSize

Parameters

Returns void

Settings

On This Page

`Protected`itemFactories

`Protected`createHeaderItemNode