Lurch web app user interface

Class

Dialog

This class makes it easier to create and use TinyMCE dialogs that have components that work well with Lurch. It handles a lot of the boilerplate code that TinyMCE demands and it allows us to work in a more object-oriented way, rather than passing around large pieces of JSON and writing all of a dialog's code in one big function call.

Constructor

new Dialog(title, editor)

Create (but do not yet show) a dialog box associated with a given editor.

Parameters

  • title string

    the title to display at the top of the dialog

  • editor tinymce.Editor

    the editor in which to create the dialog

Source

Classes

Dialog

Methods

addItem(item, tabTitle)

Add an item to the dialog. There is not a specific class defined for dialog items, because they need provide only a .json() method that creates the JSON code for all the body components the item adds to the dialog. However, items can optionally also provide .onAction() and .onShow() event handlers, as well as a .get() event that can be more flexible than dialog.getData()['arg'].

Parameters

  • item Object

    the item to add, any object that has a .json() method that creates JSON code appropriate for TinyMCE dialogs

  • tabTitle string null

    the tab into which to insert the item, if the dialog is split into tabs; leave this blank if it is not

See

Source

close()

Close this dialog box and resolve any open promise with a "false" argument, as if the user had canceled the dialog.

Source

currentTabTitle() → {string}

If you have split your dialog into tabs using the setTabs() function, and shown your dialog, this function will report the title shown on the top of the currently visible tab.

See

Returns

  • string

    the title of the currently shown tab

Source

get(key) → {any}

This is similar to TinyMCE's dialog.getData()[key] syntax, but more flexible in that before resorting to that fallback method, it first asks each item in the dialog if it wants to return a value for the given key. This lets those items behave in a more sophisticated and flexible manner if they choose to. If none of them returns a value different from undefined, then we fall back on the standard TinyMCE method shown above. If the dialog is not shown, this returns undefined.

Parameters

  • key string

    the key whose value should be looked up

Returns

  • any

    the corresponding value

Source

querySelector(selector) → {HTMLElement}

Behaves exactly like document.querySelector(), except that it is run on just the element representing this dialog box, and thus will return only an element that appears in this dialog. Or, if this dialog has no element matching the given selector, it returns undefined.

Parameters

  • selector string

    the CSS selector to use for the query

See

Returns

  • HTMLElement

    the first element that matches the selector

Source

querySelectorAll(selector) → {NodeList}

Behaves exactly like document.querySelectorAll(), except that it is run on just the element representing this dialog box, and thus will return only elements that appear in this dialog. Or, if this dialog has no element matching the given selector, it returns an empty node list.

Parameters

  • selector string

    the CSS selector to use for the query

See

Returns

  • NodeList

    the list of elements that match the selector

Source

reload()

Ask TinyMCE to regenerate the dialog's content from its JSON encoding.

Source

removeButton(text)

Remove one of the buttons in this dialog. Especially useful if the dialog is for informational purposes only, and doesn't need a "cancel" button. You could call myDialog.removeButton( 'Cancel' ).

Parameters

  • text string

    the text shown on the button to be removed

See

Source

removeItem(index)

Remove an item from the dialog, and also remove from the dialog's internal JSON data structure any JSON items created from the item that is being removed.

Parameters

  • index integer

    the index of the item to remove

See

Source

removeTabs()

This is the reverse operation of setTabs(). It removes all tabs, thus collapsing all items onto one pane of the dialog. This is almost never needed, because you typically set up a dialog once, then use it, and don't need to change its structure in this way.

See

Source

setButtons(…buttons)

TinyMCE dialogs allow you to specify any set of buttons for the dialog's footer. By default, every dialog this class displays will have an OK button for submitting the dialog and a Cancel button for canceling it. You can replace those buttons by calling this function, passing an array of JSON objects, one for each button you wish to define.

For example, to use just an OK button, you might do the following (although you could accomplish it more easily with removeButton() instead).

myDialog.setButtons( [
    { text : 'OK', type : 'submit', buttonType : 'primary' }
] )

Parameters

  • buttons Array.<any> <repeatable>

    the JSON code for the buttons in the dialog's footer

See

Source

setDefaultFocus(name)

Specify which control should receive focus when the dialog is first shown. You can pass null to clear this setting.

Parameters

  • name string

    the name of the control to focus when the dialog is shown

Source

setInitialData(data)

Any TinyMCE dialog can have an object mapping control IDs to values, to fill the dialog's input controls with their initial values. To specify that mapping, use this function. Its keys should be the names of any input controls you've added to this dialog using addItem().

Parameters

  • data Object

    the mapping from control names to values

Source

setOK(text)

If you want to keep a submit button but not have it named with its default text of "OK" you can use this function to rename that default button. It will still function as a submit button.

Parameters

  • text string

    the new text to use in place of "OK"

Source

setTabs(…titles)

Dialogs are not, by default, split into tabs, but are just one large panel of controls. You can split them into a set of tabs by calling this function and providing the names of the tabs you want created.

Parameters

  • titles Array.<string> <repeatable>

    the titles of the tabs

See

Source

show() → {Promise}

Show the dialog, run any .onShow() event handlers in any items in the dialog, and return a promise. That promise resolves when the user submits or cancels the dialog, and returns true if it was a submit and false if it was a cancel.

Returns

  • Promise

    a promise that resolves when the dialog closes or encounters an error

Source

showTab(title)

If you have split your dialog into tabs using the setTabs() function, and shown your dialog, you can call this function to change which tab is visible, specifying the new one to show by its title.

Parameters

  • title string

    the title of the tab you want to switch to

Source

static

areYouSure(editor, text) → {Promise}

A static method that creates a dialog entitled "Are you sure?" and prompting the user with a warning containing the given text. The return value is a promise that resolves with a boolean argument indicating whether the user clicked yes/I'm sure (true) or no/Cancel (false).

Parameters

  • editor tinymce.Editor

    the editor over which to show the dialog

  • text string

    the question to be displayed

See

Returns

  • Promise

    a promise that resolves when the dialog closes, the result of a call to show()

Source

static

failure(editor, text, titleopt) → {Promise}

A static method that creates a dialog with just an OK button and a failure message in it. This is a convenience method that makes it possible to show a failure message in a modal dialog using just one line of code.

Parameters

  • editor tinymce.Editor

    the editor over which to show the dialog

  • text string

    the failure message to be displayed

  • title string <optional>
     "Failure"

    an optional title for the dialog

See

Returns

  • Promise

    a promise that resolves when the dialog closes, the result of a call to show()

Source

static

getTopDialogElement() → {HTMLDivElement}

TinyMCE may have open zero or more dialog boxes at any given time. This method returns the HTML element (a DIV) corresponding to the topmost dialog box, or undefined if there are no open dialogs.

Whenever an instance of this class is placed on screen using its show() method, this method is used to notice which DOM element represents that dialog, and it is stored in the dialog's element field for later use by functions like querySelector() and querySelectorAll().

Returns

  • HTMLDivElement

    the DIV element in the DOM representing the topmost TinyMCE dialog

Source

static

meaningOfAtom(atom)

Show the meaning of any atom in the editor in a dialog, as long as the atom has a meaning as a LogicConcept. This will use the representations defined in syntaxTreeHTML() and putdownHTML(), each in a separate tab of the dialog.

Parameters

  • atom Atom

    the Atom whose meaning should be shown

Source

static

notify(editor, type, text, timeout)

Pop up a notification over the editor. This can be done with TinyMCE's NotificationManager class, but this function just makes it slightly more convenient, because the parameters are named, and one does not need to remember the JSON encoding of them.

Parameters

  • editor tinymce.Editor

    the editor in which to show the notification

  • type string

    the type of notification to show, which TinyMCE requires must be one of "success", "info", "warning", or "error"

  • text string

    the content of the notification

  • timeout integer

    how long (in ms) until the notification disappears (optional; defaults to 2000 for success notifications and no timeout for everything else)

Source

static

success(editor, text, titleopt) → {Promise}

A static method that creates a dialog with just an OK button and a success message in it. This is a convenience method that makes it possible to show a success message in a modal dialog using just one line of code.

Parameters

  • editor tinymce.Editor

    the editor over which to show the dialog

  • text string

    the success message to be displayed

  • title string <optional>
     "Success"

    an optional title for the dialog

See

Returns

  • Promise

    a promise that resolves when the dialog closes, the result of a call to show()

Source