Dialog

Overview

The Dialog extension provides the way to display a dialog. The easiest way to display it is using the message() method which does not require any preparation:

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );

ryuseiCode.on( 'focus', () => {
  ryuseiCode.Editor.invoke( 'Dialog', 'message', 'Welcome to RyuseiCode!' );
} );
JavaScript

const ryuseiCode = new RyuseiCode();
ryuseiCode.apply( 'textarea' );


ryuseiCode.on( 'focus', () => {
  ryuseiCode.Editor.invoke( 'Dialog', 'message', 'Welcome to RyuseiCode!' );
} );

You can also show a custom dialog by using register() method.

Usage

import { RyuseiCode, Dialog } from '@ryusei/code';

RyuseiCode.compose( { Dialog } );
JavaScript

import { RyuseiCode, Dialog } from '@ryusei/code';


RyuseiCode.compose( { Dialog } );

or import the file:

<script src="path-to-the-file/dialog.min.js"></script>
HTML

<script src="path-to-the-file/dialog.min.js"></script>

Options

Setting false to dialog disables the extension.

new RyuseiCode( { dialog: false } );
JavaScript

new RyuseiCode( { dialog: false } );

Methods

`createCloseButton()`

createCloseButton( attrs: Attributes ): HTMLButtonElement

Creates a close button. The wrapper element must exist and have an ID attribute before calling this method.

Params

`attrs`	Attributes for the button.

Return

A created button element.

`createButtons()`

createButtons<T>( settings: UIButtonSettings<T> | UIButtonSettings<T>[], parent: HTMLElement, component: T, classes?: string | string[] ): Record<string, HTMLButtonElement>

Creates buttons according to the settings.

Params

`settings`	A settings object.
`parent`	A parent element to append the button to.
`component`	A component instance.
`classes`	Additional classes for buttons.

Return

An object with created buttons.

`createField()`

createField( settings: UIFieldSettings, parent: HTMLElement ): HTMLInputElement

A utility function to create an input field.

Params

`settings`	A settings object.
`parent`	A parent element where the created input element will be appended.

Return

A created input element.

`isActive()`

isActive( group?: string ): boolean

Checks if the specified group is active or not. If omitted, this checks any group is active or not.

Params

`group`	Optional. A group ID to check.

`isFocused()`

isFocused(): boolean

Checks if one of the elements in the UI has focus or not.

Return

true if an element in the UI has focus, or otherwise false.

`register()`

register( group: string, elm: HTMLElement, title: string, buttons?: Array<string | UIButtonSettings<Dialog>> ): void

Registers a new dialog. Use message() instead just for showing a message.

const ryuseiCode = new RyuseiCode();
const Dialog     = ryuseiCode.Editor.require( 'Dialog' );

// The Dialog extension may not exist.
if ( Dialog ) {
  const body = document.createElement( 'p' );
  body.textContent = 'Hello!';
  Dialog.register( 'sample', body, 'Sample Dialog', [ 'confirm' ] );
  Dialog.show( 'sample' );
}
TypeScript

const ryuseiCode = new RyuseiCode();
const Dialog     = ryuseiCode.Editor.require( 'Dialog' );


// The Dialog extension may not exist.
if ( Dialog ) {
  const body = document.createElement( 'p' );
  body.textContent = 'Hello!';
  Dialog.register( 'sample', body, 'Sample Dialog', [ 'confirm' ] );
  Dialog.show( 'sample' );
}

If you want to add custom buttons, pass an array with button settings to the buttons.

const settings = [
  {
    id: 'myButton',
    html: 'Click Me',
    click() {
      console.log( 'Clicked!' );
    },
  }
];

Dialog.register( 'sample', body, 'Sample Dialog', settings );
TypeScript

const settings = [
  {
    id: 'myButton',
    html: 'Click Me',
    click() {
      console.log( 'Clicked!' );
    },
  }
];


Dialog.register( 'sample', body, 'Sample Dialog', settings );

Params

`group`	A group ID.
`elm`	An element to display as a dialog body.
`title`	A title of a dialog.
`buttons`	Optional. General button names, `'confirm'`, `'cancel'`, or objects with button settings.

`show()`

show( group: string ): void

Opens the specified dialog. The dialog must be registered by register() before opening it.

Params

`group`	A dialog ID to open.

`hide()`

hide(): void

Closes the dialog which is visible now. Nothing will happen when there is no shown dialog.

`message()`

message( message: string, title?: string ): void

Displays a message with a common dialog. No registration required.

Params

`message`	A message to display.
`title`	Optional. A title of a dialog. If omitted, uses the `notice` in the `i18n` collection.