Expand all

CodeMirrorCodex

Provides methods to create CSS-only Codex components.

Constructor

new CodeMirrorCodex() #

Source:

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'

Returns:

Type
HTMLButtonElement
Source:
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

Returns:

[HTMLSpanElement, HTMLInputElement]

Type
Array.<HTMLElement>
Source:
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

Returns:

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

getFormField(name, specifier) → {Array.<HTMLElement>} #

Generate a form field from a FormSpecifier.

Parameters:

Name Type Description
name string
specifier FormSpecifier

Returns:

Array of [wrapper, input] elements, where wrapper is an HTML element that wraps the input and its label, and input is the actual form control element (e.g. <input>, <select>, etc.) that can be listened to for changes.

Type
Array.<HTMLElement>
Source:
Generate a form field from a FormSpecifier.

getSelect(name, label, options, [selected]) → {Array.<HTMLElement>} #

Get a CSS-only Codex Select. This only supports a flat list of options, not optgroups.

Parameters:

Name Type Attributes Description
name string
label string
options Array

Array of [label, value] pairs.
selected string optional

Returns:

[HTMLDivElement, HTMLSelectElement]

Type
Array.<HTMLElement>
Source:
Get a CSS-only Codex Select.

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

Returns:

[HTMLDivElement, HTMLInputElement]

Type
Array.<HTMLElement>
Source:
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

Returns:

Type
HTMLButtonElement
Source:
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.

Returns:

Type
HTMLDivElement
Source:
Show a Codex Dialog.

Type Definitions

FormSpecifier #

Specifier for form elements, in particular for CodeMirrorPreferences, when the feature calls for a form element other than a simple checkbox.

Type:

Properties:

Name Type Attributes Default Description
type string optional
 'checkbox'

Currently supported include:

  • 'checkbox' (default)
  • 'text'
  • 'select'
label string optional

Key for an i18n message that labels the form element. Required for the 'checkbox' and 'select' types, ignored for 'text' type.
placeholder string optional

Key for an i18n message that serves as the placeholder text, for use by the 'text' type.
options Array optional

Array of [label, value] pairs, for use by the 'select' type. The label should be a message key.
default Mixed optional

The initial value of the field.
Source:

Specifier for form elements, in particular for CodeMirrorPreferences, when the feature calls for a form element other than a simple checkbox.