Class RapidContext.Widget.Dialog

.Widget.Dialog(attrs, …childopt) → {Widget}

The dialog widget class. Used to provide a resizeable and moveable window within the current page. Internally it uses a number of <div> HTML elements.

Constructor Summary
Creates a new dialog widget.
Method Summary
Adds one or more children to this widget.
Adds a single child DOM node to this widget.
Adds the specified CSS class names to this HTML DOM node.
Performs a visual effect animation on this widget.
Blurs (unfocuses) this DOM node and all relevant child nodes.
The internal widget destructor function.
Disables this widget if it was previously enabled.
Dispatches a single event from this DOM node.
Enables this widget if it was previously disabled.
Returns an array with all child DOM nodes.
Checks if this HTML DOM node has the specified CSS class names.
Hides this widget node if it was previously visible.
Checks if this widget is disabled.
Checks if this widget node is hidden.
Moves the dialog to the specified position (relative to the parent DOM node).
Moves the dialog to the apparent center (relative to the parent DOM node).
Removes one or more previously attached event listeners.
Attaches a listener function for one or more events.
Attaches a single event listener function.
Removes all children to this widget.
Removes a single child DOM node from this widget.
Removes the specified CSS class names from this HTML DOM node.
Resets the scroll offsets for all child elements in the dialog.
Resizes the dialog to the specified size (in pixels).
Resizes the dialog to the optimal size for the current content.
Updates the dialog or HTML DOM node attributes.
Updates the CSS styles of this HTML DOM node.
Shows this widget node if it was previously hidden.
Toggles adding and removing the specified CSS class names to and from this HTML DOM node.
Returns the unique identifier for this DOM node.
Event Summary
Emitted when the dialog is hidden.
Emitted when the dialog is moved.
Emitted when the dialog is resized.
Emitted when the dialog is shown.

Constructor

new Dialog(attrs, …childopt) → {Widget}

Creates a new dialog widget.

Parameters:
Name Type Attributes Description
attrs {Object} the widget and node attributes
Properties
Name Type Attributes Description
title {string} <optional>
the dialog title, defaults to "Dialog"
modal {boolean} <optional>
the modal dialog flag, defaults to false
system {boolean} <optional>
the system dialog flag, implies modal, defaults to false
center {boolean} <optional>
the center dialog flag, defaults to true
closeable {boolean} <optional>
the closeable dialog flag, defaults to true
resizeable {boolean} <optional>
the resize dialog flag, defaults to true
hidden {boolean} <optional>
the hidden widget flag, defaults to true
child {Node|Widget|string} <optional>
<repeatable>
the child widgets or DOM nodes
Returns:
{Widget} the widget DOM node
Examples:

JavaScript

let h1 = MochiKit.DOM.H1({}, "Hello, world!");
let attrs = { title: "Hello", modal: true };
let helloDialog = RapidContext.Widget.Dialog(attrs, h1);
RapidContext.Util.registerSizeConstraints(helloDialog, "200", "75");

User Interface XML

<Dialog id="helloDialog" title="Hello" modal="true" w="200" h="75">
  <h1>Hello, world!</h1>
</Dialog>
Source:
RapidContext_Widget_Dialog.js, line 56

Extends

Methods

addAll(…child)

Adds one or more children to this widget. This method will flatten any arrays among the arguments and ignores any null or undefined arguments. Any DOM nodes or widgets will be added to the end, and other objects will be converted to a text node first. Subclasses should normally override the addChildNode() method instead of this one, since that is the basis for DOM node insertion.

Parameters:
Name Type Attributes Description
child {string|Node|Array} <repeatable>
the children to add
Inherited From:
RapidContext.Widget#addAll
Source:
RapidContext_Widget.js, line 581

addChildNode(child)

Adds a single child DOM node to this widget. This method is sometimes overridden by child widgets in order to hide or control intermediate DOM nodes required by the widget.

Parameters:
Name Type Description
child {Widget|Node} the DOM node to add
Inherited From:
RapidContext.Widget#addChildNode
Source:
RapidContext_Widget.js, line 545

addClass(…cls)

Adds the specified CSS class names to this HTML DOM node.

Parameters:
Name Type Attributes Description
cls {string|Array} <repeatable>
the CSS class names to add
Inherited From:
RapidContext.Widget#addClass
Source:
RapidContext_Widget.js, line 343

animate(opts)

Performs a visual effect animation on this widget. This is implemented using the MochiKit.Visual effect package. All options sent to this function will be passed on to the appropriate MochiKit.Visual function.

Parameters:
Name Type Description
opts {Object} the visual effect options
Properties
Name Type Description
effect {string} the MochiKit.Visual effect name
queue {string} the MochiKit.Visual queue handling, defaults to "replace" and a unique scope for each widget (see MochiKit.Visual for full options)
Inherited From:
RapidContext.Widget#animate
Deprecated:
Use CSS animations instead.
Example:
widget.animate({ effect: "fade", duration: 0.5 });
widget.animate({ effect: "Move", transition: "spring", y: 300 });
Source:
RapidContext_Widget.js, line 502

blurAll()

Blurs (unfocuses) this DOM node and all relevant child nodes. This function will recursively blur all <a>, <button>, <input>, <textarea> and <select> child nodes found.

Inherited From:
RapidContext.Widget#blurAll
Source:
RapidContext_Widget.js, line 521

destroy()

The internal widget destructor function. This method should only be called by destroyWidget() and may be overridden by subclasses. By default this method does nothing.

Inherited From:
RapidContext.Widget#destroy
Source:
RapidContext_Widget.js, line 198

disable()

Disables this widget if it was previously enabled. This method is equivalent to calling setAttrs({ disabled: true }).

Inherited From:
RapidContext.Widget#disable
Source:
RapidContext_Widget.js, line 434

emit(event, optsopt) → {boolean}

Dispatches a single event from this DOM node. Also creates a new CustomEvent instance if needed.

Parameters:
Name Type Attributes Description
event {string/Event} the event type name or instance
opts {Object} <optional>
the event options
Properties
Name Type Attributes Default Description
async {boolean} <optional>
true the async dispatch flag
bubbles {boolean} <optional>
the event bubbles flag
cancelable {boolean} <optional>
the cancellable event flag
detail {Object} <optional>
the additional event details
Returns:
{boolean} true if event was async or not cancelled
Inherited From:
RapidContext.UI.Event#emit
Source:
rapidcontext/ui/event.mjs, line 26

enable()

Enables this widget if it was previously disabled. This is equivalent to calling setAttrs({ disabled: false }).

Inherited From:
RapidContext.Widget#enable
Source:
RapidContext_Widget.js, line 426

getChildNodes() → {Array}

Returns an array with all child DOM nodes. Note that the array is a real JavaScript array, not a dynamic NodeList. This method is sometimes overridden by child widgets in order to hide intermediate DOM nodes required by the widget.

Returns:
{Array} the array of child DOM nodes
Inherited From:
RapidContext.Widget#getChildNodes
Source:
RapidContext_Widget.js, line 533

hasClass(…cls) → {boolean}

Checks if this HTML DOM node has the specified CSS class names. Note that more than one CSS class name may be checked, in which case all must be present.

Parameters:
Name Type Attributes Description
cls {string|Array} <repeatable>
the CSS class names to check
Returns:
{boolean} true if all CSS classes were present, or false otherwise
Inherited From:
RapidContext.Widget#hasClass
Source:
RapidContext_Widget.js, line 325

hide()

Hides this widget node if it was previously visible. This method is equivalent to calling setAttrs({ hidden: true }). It is safe for all types of widgets, since it only adds the widgetHidden CSS class instead of setting the display style property.

Inherited From:
RapidContext.Widget#hide
Source:
RapidContext_Widget.js, line 480

isDisabled() → {boolean}

Checks if this widget is disabled. This method checks both the "widgetDisabled" CSS class and the disabled property. Changes to the disabled status can be made with enable(), disable() or setAttrs().

Returns:
{boolean} true if the widget is disabled, or false otherwise
Inherited From:
RapidContext.Widget#isDisabled
Source:
RapidContext_Widget.js, line 405

isHidden() → {boolean}

Checks if this widget node is hidden. This method checks for the existence of the widgetHidden CSS class. It does NOT check the actual widget visibility (the display style property set by animations for example).

Returns:
{boolean} true if the widget is hidden, or false otherwise
Inherited From:
RapidContext.Widget#isHidden
Source:
RapidContext_Widget.js, line 447

moveTo(x, y)

Moves the dialog to the specified position (relative to the parent DOM node). The position will be restrained by the parent DOM node size.

Parameters:
Name Type Description
x {number} the horizontal position (in pixels)
y {number} the vertical position (in pixels)
Source:
RapidContext_Widget_Dialog.js, line 278

moveToCenter()

Moves the dialog to the apparent center (relative to the parent DOM node). The vertical position actually uses the golden ratio instead of the geometric center for improved visual alignment.

Source:
RapidContext_Widget_Dialog.js, line 301

off(eventopt, selectoropt, listeneropt) → {Node}

Removes one or more previously attached event listeners. If no event details or listeners are specified, all matching handlers are removed.

Parameters:
Name Type Attributes Description
event {string} <optional>
the event type name (or space separated names)
selector {string} <optional>
the CSS selector to match for event target
listener {function} <optional>
the event handler function (or false)
Returns:
{Node} the input DOM node (for chaining calls)
Inherited From:
RapidContext.UI.Event#off
Source:
rapidcontext/ui/event.mjs, line 77

on(event, selectoropt, listener, optsopt) → {Node}

Attaches a listener function for one or more events.

Parameters:
Name Type Attributes Description
event {string} the event type name (or space separated names)
selector {string} <optional>
the CSS selector to match for event target
listener {function} the event handler function (or false)
opts {Object} <optional>
the event listener options (see addEventListener)
Properties
Name Type Attributes Description
delay {number} <optional>
an inactivity delay before calling listener
Returns:
{Node} the input DOM node (for chaining calls)
Inherited From:
RapidContext.UI.Event#on
Source:
rapidcontext/ui/event.mjs, line 44

once(event, selectoropt, listener, optsopt) → {Node}

Attaches a single event listener function. The listener will be removed the first time an event is triggered.

Parameters:
Name Type Attributes Description
event {string} the event type name (or space separated names)
selector {string} <optional>
the CSS selector to match for event target
listener {function} the event handler function (or false)
opts {Object} <optional>
the event listener options (see addEventListener)
Properties
Name Type Attributes Description
delay {number} <optional>
an inactivity delay before calling listener
Returns:
{Node} the input DOM node (for chaining calls)
Inherited From:
RapidContext.UI.Event#once
Source:
rapidcontext/ui/event.mjs, line 60

removeAll()

Removes all children to this widget. This method will also destroy and child widgets and disconnect all signal listeners. This method uses the getChildNodes() and removeChildNode() methods to find and remove the individual child nodes.

Inherited From:
RapidContext.Widget#removeAll
Source:
RapidContext_Widget.js, line 593

removeChildNode(child)

Removes a single child DOM node from this widget. This method is sometimes overridden by child widgets in order to hide or control intermediate DOM nodes required by the widget.

Note that this method will NOT destroy the removed child widget, so care must be taken to ensure proper child widget destruction.

Parameters:
Name Type Description
child {Widget|Node} the DOM node to remove
Inherited From:
RapidContext.Widget#removeChildNode
Source:
RapidContext_Widget.js, line 564

removeClass(…cls)

Removes the specified CSS class names from this HTML DOM node. Note that this method will not remove any class starting with "widget".

Parameters:
Name Type Attributes Description
cls {string|Array} <repeatable>
the CSS class names to remove
Inherited From:
RapidContext.Widget#removeClass
Source:
RapidContext_Widget.js, line 363

resetScroll()

Resets the scroll offsets for all child elements in the dialog.

Source:
RapidContext_Widget_Dialog.js, line 371

resizeTo(w, h) → {Dimensions}

Resizes the dialog to the specified size (in pixels). The size will be restrained by the parent DOM node size.

Parameters:
Name Type Description
w {number} the width (in pixels)
h {number} the height (in pixels)
Returns:
{Dimensions} an object with "w" and "h" properties for the actual size used
Source:
RapidContext_Widget_Dialog.js, line 322

resizeToContent() → {Dimensions}

Resizes the dialog to the optimal size for the current content. Note that the size reported by the content may vary depending on if it has already been displayed, is absolutely positioned, etc. The size will be restrained by the parent DOM node size.

Returns:
{Dimensions} an object with "w" and "h" properties for the actual size used
Source:
RapidContext_Widget_Dialog.js, line 349

setAttrs(attrs)

Updates the dialog or HTML DOM node attributes.

Parameters:
Name Type Description
attrs {Object} the widget and node attributes to set
Properties
Name Type Attributes Description
title {string} <optional>
the dialog title
modal {boolean} <optional>
the modal dialog flag
system {boolean} <optional>
the system dialog flag, implies modal
center {boolean} <optional>
the center dialog flag
closeable {boolean} <optional>
the closeable dialog flag
resizeable {boolean} <optional>
the resize dialog flag
hidden {boolean} <optional>
the hidden widget flag
Overrides:
RapidContext.Widget#setAttrs
Source:
RapidContext_Widget_Dialog.js, line 203

setStyle(styles)

Updates the CSS styles of this HTML DOM node. This method is identical to MochiKit.Style.setStyle, but uses "this" as the first argument.

Parameters:
Name Type Description
styles {Object} an object with the styles to set
Inherited From:
RapidContext.Widget#setStyle
Example:
widget.setStyle({ "font-size": "bold", "color": "red" });
Source:
RapidContext_Widget.js, line 302

show()

Shows this widget node if it was previously hidden. This method is equivalent to calling setAttrs({ hidden: false }). It is safe for all types of widgets, since it only removes the widgetHidden CSS class instead of setting the display style property.

Inherited From:
RapidContext.Widget#show
Source:
RapidContext_Widget.js, line 470

toggleClass(…cls) → {boolean}

Toggles adding and removing the specified CSS class names to and from this HTML DOM node. If all the CSS classes are already set, they will be removed. Otherwise they will be added.

Parameters:
Name Type Attributes Description
cls {string|Array} <repeatable>
the CSS class names to remove
Returns:
{boolean} true if the CSS classes were added, or false otherwise
Inherited From:
RapidContext.Widget#toggleClass
Source:
RapidContext_Widget.js, line 386

uid() → {string}

Returns the unique identifier for this DOM node. If a node id has already been set, that id will be returned. Otherwise a new id will be generated and assigned to the widget DOM node.

Returns:
{string} the the unique DOM node identifier
Inherited From:
RapidContext.Widget#uid
Source:
RapidContext_Widget.js, line 186

Events

onhide

Emitted when the dialog is hidden.

Source:
RapidContext_Widget_Dialog.js, line 88

onmove

Emitted when the dialog is moved. The event will be sent repeatedly when moving with a mouse drag operation.

Source:
RapidContext_Widget_Dialog.js, line 95

onresize

Emitted when the dialog is resized. The event will be sent repeatedly when resizing with a mouse drag operation.

Source:
RapidContext_Widget_Dialog.js, line 103

onshow

Emitted when the dialog is shown.

Source:
RapidContext_Widget_Dialog.js, line 81