Expand all

CodeMirrorCodex

Provides methods to create CSS-only Codex components.

Constructor

new CodeMirrorCodex() #

Source:
To do:
  • Move HTML generation to Mustache templates.

Properties

dialog :HTMLDivElement|null #

Type:

Source:

focusedElement :HTMLElement|null #

Type:

Source:

Methods

animateDialog(open)protected #

Fade the dialog in or out, adjusting for scrollbar widths to prevent shifting of content. This almost fully mimics the way the Codex handles its Dialog component, with the exception that we don't force a focus trap, nor do we set aria-hidden on other elements in the DOM. This is to keep our implementation simple until something like T382532 is realized.

Parameters:

Name Type Default Description
open boolean false
Source:
Fade the dialog in or out, adjusting for scrollbar widths to prevent shifting of content.

getButton(label, [opts]) → {HTMLButtonElement} #

Get a CSS-only Codex Button.

Parameters:

Name Type Attributes Description
label string
opts Object optional
Properties:
Name Type Attributes Default Description
icon string | null optional
 null
iconOnly boolean optional
 false
action string optional
 'default'
weight string optional
 'normal'
Source:

Returns:

Type
HTMLButtonElement
Get a CSS-only Codex Button.

getCheckbox(name, label, [checked]) → {Array.<HTMLElement>} #

Get a CSS-only Codex Checkbox.

Parameters:

Name Type Attributes Default Description
name string
label string
checked boolean optional
 false
Source:

Returns:

[HTMLSpanElement, HTMLInputElement]

Type
Array.<HTMLElement>
Get a CSS-only Codex Checkbox.

getFieldset(legendText, …fields) → {HTMLFieldSetElement} #

Get a CSS-only Codex fieldset with a legend.

Parameters:

Name Type Attributes Description
legendText string | HTMLElement
fields Array.<HTMLElement> repeatable
Source:

Returns:

Type
HTMLFieldSetElement
Get a CSS-only Codex fieldset with a legend.

getTextInput(name, [value], placeholder) → {Array.<HTMLElement>} #

Get a CSS-only Codex TextInput.

Parameters:

Name Type Attributes Default Description
name string
value string optional
 ''
placeholder string
Source:

Returns:

[HTMLDivElement, HTMLInputElement]

Type
Array.<HTMLElement>
Get a CSS-only Codex TextInput.

getToggleButton(name, label, icon, [checked]) → {HTMLButtonElement} #

Get a CSS-only Codex ToggleButton.

Parameters:

Name Type Attributes Default Description
name string
label string
icon string
checked boolean optional
 false
Source:

Returns:

Type
HTMLButtonElement
Get a CSS-only Codex ToggleButton.

showDialog(title, name, contents, [actions]) → {HTMLDivElement} #

Show a Codex Dialog.

This implements a vanilla JS port of the Codex Dialog component. See https://w.wiki/CcWY

Parameters:

Name Type Attributes Description
title string
name string

Constructed into the CSS class cm-mw-${name}-dialog
contents HTMLElement | Array.<HTMLElement>
actions HTMLElement | Array.<HTMLElement> optional

Buttons or other actions to show in the footer.
Source:

Returns:

Type
HTMLDivElement
Show a Codex Dialog.