true give stacking habilities to the Dialog.
*
@@ -373,11 +360,11 @@ A.mix(
* @type boolean
*/
stack: {
- value: true,
setter: function(v) {
return this._setStack(v);
},
- validator: isBoolean
+ validator: isBoolean,
+ value: true
},
/**
@@ -391,7 +378,16 @@ A.mix(
close: 'Close dialog'
}
}
- }
+ },
+
+ /**
+ * Static property provides a string to identify the class.
+ *
+ * @property Dialog.NAME
+ * @type String
+ * @static
+ */
+ NAME: DIALOG
}
);
@@ -407,9 +403,9 @@ Dialog.prototype = {
initializer: function(config) {
var instance = this;
- var icons = instance.get(ICONS);
- var close = instance.get(CLOSE);
var buttons = instance.get(BUTTONS);
+ var close = instance.get(CLOSE);
+ var icons = instance.get(ICONS);
if (buttons && buttons.length && !instance.get(FOOTER_CONTENT)) {
instance.set(FOOTER_CONTENT, NODE_BLANK_TEXT);
@@ -419,12 +415,12 @@ Dialog.prototype = {
var closeId = A.guid();
var closeConfig = {
- icon: CLOSETHICK,
- id: closeId,
handler: {
- fn: instance.close,
- context: instance
+ context: instance,
+ fn: instance.close
},
+ icon: CLOSETHICK,
+ id: closeId,
title: instance.get('strings').close
};
@@ -464,8 +460,8 @@ Dialog.prototype = {
bindUI: function() {
var instance = this;
- if (instance.get('modal')) {
- instance.after("focusOnChange", instance._afterFocusOnChange());
+ if (instance.get(MODAL)) {
+ instance.after('focusOnChange', instance._afterFocusOnChange());
}
instance._bindLazyComponents();
@@ -482,16 +478,19 @@ Dialog.prototype = {
var instance = this;
if (instance.get(USE_ARIA)) {
- instance.plug(A.Plugin.Aria, {
- attributes: {
- visible: {
- ariaName: 'hidden',
- format: function(value) {
- return !value;
+ instance.plug(
+ A.Plugin.Aria,
+ {
+ attributes: {
+ visible: {
+ ariaName: 'hidden',
+ format: function(value) {
+ return !value;
+ }
}
}
}
- });
+ );
}
},
@@ -505,9 +504,8 @@ Dialog.prototype = {
destructor: function() {
var instance = this;
- var boundingBox = instance.get(BOUNDING_BOX);
+ A.Event.purgeElement(instance.get(BOUNDING_BOX), true);
- A.Event.purgeElement(boundingBox, true);
A.DialogManager.remove(instance);
},
@@ -523,24 +521,10 @@ Dialog.prototype = {
var viewportRegion = A.getDoc().get(VIEWPORT_REGION);
- instance.move([ viewportRegion.left + toInt(offsetLeft), viewportRegion.top + toInt(offsetTop) ]);
- },
-
- /**
- * Bind a mouseenter listener to the boundingBox
- * to invoke the
- * _initLazyComponents.
- * Performance reasons.
- *
- * @method _bindLazyComponents
- * @private
- */
- _bindLazyComponents: function() {
- var instance = this;
-
- var boundingBox = instance.get(BOUNDING_BOX);
+ var viewportLeft = viewportRegion.left + toInt(offsetLeft);
+ var viewportTop = viewportRegion.top + toInt(offsetTop);
- boundingBox.on('mouseenter', A.bind(instance._initLazyComponents, instance));
+ instance.move([viewportLeft, viewportTop]);
},
/**
@@ -555,423 +539,448 @@ Dialog.prototype = {
},
/**
- * Fires after the render phase. Invoke
- * _initButtons.
+ * Fires after the value of the
+ * constrain2view attribute change.
*
- * @method _afterRenderer
+ * @method _afterConstrain2viewChange
* @param {EventFacade} event
* @protected
*/
- _afterRenderer: function(event) {
+ _afterConstrain2viewChange: function(event) {
var instance = this;
- instance._initButtons();
-
- // forcing lazyAdd:true attrs call the setter
- instance.get(STACK);
- instance.get(IO);
+ instance._updateDDConstrain2view(
+ instance.get(DRAG_INSTANCE)
+ );
},
/**
- * Handles the close event logic.
+ * Fires after the value of the
+ * draggable attribute change.
*
- * @method _handleEvent
- * @param {EventFacade} event close event facade
+ * @method _afterDraggableChange
+ * @param {EventFacade} event
* @protected
*/
- _close: function() {
+ _afterDraggableChange: function(event) {
var instance = this;
- if (instance.get(DESTROY_ON_CLOSE)) {
- instance.destroy();
- }
- else {
- instance.hide();
- }
+ instance.set(DRAG_INSTANCE, null);
},
/**
- * Render the buttons on the footer of the Dialog.
+ * Fires after the value of the
+ * dragInstance attribute change.
*
- * @method _initButtons
+ * @method _afterDragInstanceChange
+ * @param {EventFacade} event
* @protected
*/
- _initButtons: function() {
+ _afterDragInstanceChange: function(event) {
var instance = this;
- var buttons = instance.get(BUTTONS);
-
- if (buttons.length) {
- var footerButtons = new A.Toolbar(
- {
- children: buttons
- }
- );
-
- footerButtons._DEFAULT_CONTEXT = instance;
-
- footerButtons.render(instance.footerNode);
-
- instance.fire('contentUpdate');
+ var prevVal = event.prevVal;
- instance.buttons = footerButtons;
+ if (prevVal) {
+ prevVal.destroy();
}
},
/**
- * Forces lazyAdd:true attributtes invoke the setter methods.
+ * Handles the drag start event
+ * If "constrain2view" property is set to false this function will constrain the dialog to a region
+ * in order to prevent moving it to unreachable position
*
- * @method _initLazyComponents
- * @private
+ * @method _afterDragStart
+ * @param {EventFacade} event
+ * @protected
*/
- _initLazyComponents: function() {
+ _afterDragStart: function(event) {
var instance = this;
- // forcing lazyAdd:true attrs call the setter
- instance.get(DRAG_INSTANCE);
- instance.get(RESIZABLE_INSTANCE);
- },
+ var constrain2view = instance.get(CONSTRAIN_TO_VIEWPORT);
- /**
- * Set default ARIA roles and attributes.
- * @method _setDefaultARIAValues
- * @protected
- */
- _setDefaultARIAValues: function() {
- var instance = this;
+ if (!constrain2view) {
+ var dragInstance = instance.get(DRAG_INSTANCE);
- var icons = instance.icons;
+ var dragNode = dragInstance.get('dragNode');
- if (!instance.get(USE_ARIA)) {
- return;
- }
+ var dragNodeRegion = dragNode.get('region');
+ var viewportRegion = dragNode.get('viewportRegion');
- instance.aria.setRole('dialog', instance.get(BOUNDING_BOX));
+ var defaultOffset = [0, 0];
- if (icons) {
- var closeThick = icons.item(instance._closeId) || null;
+ var deltaXY = dragInstance.deltaXY || defaultOffset;
+ var mouseXY = dragInstance.mouseXY || defaultOffset;
- if (closeThick){
- instance.aria.setAttribute('controls', instance.get('id'), closeThick.get(BOUNDING_BOX));
- }
+ dragInstance.plug(
+ A.Plugin.DDConstrained,
+ {
+ constrain: {
+ bottom: viewportRegion.bottom + (dragNodeRegion.height - deltaXY[1]) - DRAG_GUTTER,
+ left: viewportRegion.left - deltaXY[0] + DRAG_GUTTER,
+ right: viewportRegion.right + (dragNodeRegion.right - mouseXY[0]) + DRAG_GUTTER,
+ top: viewportRegion.top - deltaXY[1] + DRAG_GUTTER
+ }
+ }
+ );
}
},
/**
- * Setter for the draggable attribute.
+ * Default function called when focusOn Attribute is changed. Remove existing listeners and create new listeners.
*
- * @method _setDragInstance
- * @param {boolean} value
- * @protected
- * @return {boolean}
+ * @method _afterFocusOnChange
*/
- _setDragInstance: function(val) {
+ _afterFocusOnChange : function(event) {
var instance = this;
- if (instance.get(DRAGGABLE)) {
- val = new A.DD.Drag(
- instance.get(DRAG_CONFIG)
- );
+ instance._detachUIHandlesModal();
- instance._updateDDConstrain2view(val);
+ if (instance.get(VISIBLE)) {
+ instance._attachUIHandlesModal();
}
-
- return val;
},
/**
- * Setter for the resizable attribute.
+ * Fires after the render phase. Invoke
+ * _initButtons.
*
- * @method _setResizableInstance
- * @param {boolean} value
+ * @method _afterRenderer
+ * @param {EventFacade} event
* @protected
- * @return {boolean}
*/
- _setResizableInstance: function(val) {
+ _afterRenderer: function(event) {
var instance = this;
- if (instance.get(RESIZABLE)) {
- val = new A.Resize(
- instance.get(RESIZABLE_CONFIG)
- );
- }
+ instance._initButtons();
- return val;
+ // forcing lazyAdd:true attrs call the setter
+ instance.get(STACK);
+ instance.get(IO);
},
/**
- * Setter for the stack
- * attribute.
+ * Fires after the value of the
+ * resizable attribute change.
*
- * @method _setStack
- * @param {boolean} value
+ * @method _afterResizableChange
+ * @param {EventFacade} event
* @protected
- * @return {boolean}
*/
- _setStack: function(value) {
+ _afterResizableChange: function(event) {
var instance = this;
- if (value) {
- A.DialogManager.register(instance);
- }
- else {
- A.DialogManager.remove(instance);
- }
-
- return value;
+ instance.set(RESIZABLE_INSTANCE, null);
},
/**
- * Sync dialog dimentions based on resizable end and resize events.
+ * Fires after the value of the
+ * resizableInstance attribute change.
*
- * @method _syncResizableDimentions
- * @param {EventFacade} Resizable event
+ * @method _afterResizableInstanceChange
+ * @param {EventFacade} event
* @protected
*/
- _syncResizableDimentions: function(event) {
+ _afterResizableInstanceChange: function(event) {
var instance = this;
- var type = event.type;
- var info = event.info;
+ var prevVal = event.prevVal;
- if ((type === EV_RESIZE_END) ||
- ((type === EV_RESIZE) && !event.currentTarget.get(PROXY))) {
- instance.set(HEIGHT, info.offsetHeight);
- instance.set(WIDTH, info.offsetWidth);
+ if (prevVal) {
+ prevVal.destroy();
}
},
/**
- * Set A.Plugin.DDConstrained constrain2view property to false or true
- * depending on the value of constrain2view attribute.
+ * Attaches UI Listeners for "clickoutside" and "focusoutside" on the widget. When these events occur, and the widget is modal, focus is shifted back onto the widget.
*
- * @param {A.DD.Drag} dragInstance
- * @protected
+ * @method _attachUIHandlesModal
*/
- _updateDDConstrain2view: function(dragInstance) {
+ _attachUIHandlesModal: function() {
var instance = this;
- dragInstance.plug(
- A.Plugin.DDConstrained,
- {
- constrain2view: instance.get(CONSTRAIN_TO_VIEWPORT)
+ var boundingBox = instance.get(BOUNDING_BOX);
+ var focusOn = instance.get('focusOn');
+ var maskNode = instance.get('maskNode');
+
+ var focus = A.bind(instance._focus, instance);
+
+ var uiHandles = [];
+
+ for (var i = 0; i < focusOn.length; i++) {
+ var ev = focusOn[i].eventName;
+ var keyCode = focusOn[i].keyCode;
+ var node = focusOn[i].node;
+
+ //no keycode or node defined
+ if (!node && !keyCode && ev) {
+ uiHandles.push(boundingBox.on(ev, focus));
}
- );
+
+ //node defined, no keycode (not a keypress)
+ else if (node && !keyCode && ev) {
+ uiHandles.push(node.on(ev, focus));
+ }
+
+ //node defined, keycode defined, event defined (its a key press)
+ else if (node && keyCode && ev) {
+ uiHandles.push(node.on(ev, focus, keyCode));
+ }
+
+ else {
+ A.log('focusOn ATTR Error: The event with name "' + ev + '" could not be attached.');
+ }
+ }
+
+ instance._uiHandlesModal = uiHandles;
},
/**
- * Fires after the value of the
- * constrain2view attribute change.
+ * Bind a mouseenter listener to the boundingBox
+ * to invoke the
+ * _initLazyComponents.
+ * Performance reasons.
*
- * @method _afterConstrain2viewChange
- * @param {EventFacade} event
- * @protected
+ * @method _bindLazyComponents
+ * @private
*/
- _afterConstrain2viewChange: function(event) {
+ _bindLazyComponents: function() {
var instance = this;
- instance._updateDDConstrain2view(
- instance.get(DRAG_INSTANCE)
- );
+ var boundingBox = instance.get(BOUNDING_BOX);
+
+ boundingBox.on('mouseenter', A.bind(instance._initLazyComponents, instance));
},
/**
- * Fires after the value of the
- * draggable attribute change.
+ * Handles the close event logic.
*
- * @method _afterDraggableChange
- * @param {EventFacade} event
+ * @method _handleEvent
+ * @param {EventFacade} event close event facade
* @protected
*/
- _afterDraggableChange: function(event) {
+ _close: function() {
var instance = this;
- instance.set(DRAG_INSTANCE, null);
+ if (instance.get(DESTROY_ON_CLOSE)) {
+ instance.destroy();
+ }
+ else {
+ instance.hide();
+ }
},
/**
- * Fires after the value of the
- * dragInstance attribute change.
+ * Detaches all UI Listeners that were set in _attachUIHandlesModal from the widget.
*
- * @method _afterDragInstanceChange
- * @param {EventFacade} event
- * @protected
+ * @method _detachUIHandlesModal
*/
- _afterDragInstanceChange: function(event) {
+ _detachUIHandlesModal: function() {
var instance = this;
- if (event.prevVal) {
- event.prevVal.destroy();
- }
+ A.each(
+ instance._uiHandlesModal,
+ function(h) {
+ h.detach();
+ }
+ );
+
+ instance._uiHandlesModal = null;
},
/**
- * Handles the drag start event
- * If "constrain2view" property is set to false this function will constrain the dialog to a region
- * in order to prevent moving it to unreachable position
+ * Provides mouse and tab focus to the widget's bounding box.
*
- * @method _afterDragStart
- * @param {EventFacade} event
- * @protected
+ * @method _focus
*/
- _afterDragStart: function(event) {
+ _focus: function(event) {
var instance = this;
- var constrain2view = instance.get(CONSTRAIN_TO_VIEWPORT);
-
- if (!constrain2view) {
- var dragInstance = instance.get(DRAG_INSTANCE);
-
- var dragNode = dragInstance.get('dragNode');
+ var boundingBox = instance.get(BOUNDING_BOX);
- var viewportRegion = dragNode.get('viewportRegion');
+ var oldTI = boundingBox.get('tabIndex');
- var dragNodeRegion = dragNode.get('region');
+ boundingBox.set('tabIndex', oldTI >= 0 ? oldTI : 0);
- var defaultOffset = [0, 0];
+ instance.focus();
+ },
- var deltaXY = dragInstance.deltaXY || defaultOffset;
+ /**
+ * Render the buttons on the footer of the Dialog.
+ *
+ * @method _initButtons
+ * @protected
+ */
+ _initButtons: function() {
+ var instance = this;
- var mouseXY = dragInstance.mouseXY || defaultOffset;
+ var buttons = instance.get(BUTTONS);
- dragInstance.plug(
- A.Plugin.DDConstrained,
+ if (buttons.length) {
+ var footerButtons = new A.Toolbar(
{
- constrain: {
- bottom: viewportRegion.bottom + (dragNodeRegion.height - deltaXY[1]) - DRAG_GUTTER,
- left: viewportRegion.left - deltaXY[0] + DRAG_GUTTER,
- right: viewportRegion.right + (dragNodeRegion.right - mouseXY[0]) + DRAG_GUTTER,
- top: viewportRegion.top - deltaXY[1] + DRAG_GUTTER
- }
+ children: buttons
}
);
+
+ footerButtons._DEFAULT_CONTEXT = instance;
+
+ footerButtons.render(instance.footerNode);
+
+ instance.fire('contentUpdate');
+
+ instance.buttons = footerButtons;
}
},
/**
- * Default function called when focusOn Attribute is changed. Remove existing listeners and create new listeners.
+ * Forces lazyAdd:true attributtes invoke the setter methods.
*
- * @method _afterFocusOnChange
+ * @method _initLazyComponents
+ * @private
*/
- _afterFocusOnChange : function(event) {
+ _initLazyComponents: function() {
var instance = this;
- instance._detachUIHandlesModal();
-
- if (instance.get(VISIBLE)) {
- instance._attachUIHandlesModal();
- }
+ // forcing lazyAdd:true attrs call the setter
+ instance.get(DRAG_INSTANCE);
+ instance.get(RESIZABLE_INSTANCE);
},
/**
- * Fires after the value of the
- * resizable attribute change.
- *
- * @method _afterResizableChange
- * @param {EventFacade} event
+ * Set default ARIA roles and attributes.
+ * @method _setDefaultARIAValues
* @protected
*/
- _afterResizableChange: function(event) {
+ _setDefaultARIAValues: function() {
var instance = this;
- instance.set(RESIZABLE_INSTANCE, null);
+ var icons = instance.icons;
+
+ if (!instance.get(USE_ARIA)) {
+ return;
+ }
+
+ instance.aria.setRole('dialog', instance.get(BOUNDING_BOX));
+
+ if (icons) {
+ var closeThick = icons.item(instance._closeId) || null;
+
+ if (closeThick) {
+ instance.aria.setAttribute('controls', instance.get('id'), closeThick.get(BOUNDING_BOX));
+ }
+ }
},
/**
- * Fires after the value of the
- * resizableInstance attribute change.
+ * Setter for the draggable attribute.
*
- * @method _afterResizableInstanceChange
- * @param {EventFacade} event
+ * @method _setDragInstance
+ * @param {boolean} value
* @protected
+ * @return {boolean}
*/
- _afterResizableInstanceChange: function(event) {
+ _setDragInstance: function(val) {
var instance = this;
- if (event.prevVal) {
- event.prevVal.destroy();
+ if (instance.get(DRAGGABLE)) {
+ val = new A.DD.Drag(
+ instance.get(DRAG_CONFIG)
+ );
+
+ instance._updateDDConstrain2view(val);
}
+
+ return val;
},
/**
- * Attaches UI Listeners for "clickoutside" and "focusoutside" on the widget. When these events occur, and the widget is modal, focus is shifted back onto the widget.
+ * Setter for the resizable attribute.
*
- * @method _attachUIHandlesModal
+ * @method _setResizableInstance
+ * @param {boolean} value
+ * @protected
+ * @return {boolean}
*/
- _attachUIHandlesModal : function () {
+ _setResizableInstance: function(val) {
var instance = this;
- var bb = instance.get(BOUNDING_BOX),
- maskNode = instance.get('maskNode'),
- focusOn = instance.get('focusOn'),
- focus = A.bind(instance._focus, instance),
- uiHandles = [],
- i, len, o;
-
- for (i = 0, len = focusOn.length; i < len; i++) {
- o = {};
- o.node = focusOn[i].node;
- o.ev = focusOn[i].eventName;
- o.keyCode = focusOn[i].keyCode;
-
- //no keycode or node defined
- if (!o.node && !o.keyCode && o.ev) {
- uiHandles.push(bb.on(o.ev, focus));
- }
+ if (instance.get(RESIZABLE)) {
+ val = new A.Resize(
+ instance.get(RESIZABLE_CONFIG)
+ );
+ }
- //node defined, no keycode (not a keypress)
- else if (o.node && !o.keyCode && o.ev) {
- uiHandles.push(o.node.on(o.ev, focus));
- }
+ return val;
+ },
- //node defined, keycode defined, event defined (its a key press)
- else if (o.node && o.keyCode && o.ev) {
- uiHandles.push(o.node.on(o.ev, focus, o.keyCode));
- }
+ /**
+ * Setter for the stack
+ * attribute.
+ *
+ * @method _setStack
+ * @param {boolean} value
+ * @protected
+ * @return {boolean}
+ */
+ _setStack: function(value) {
+ var instance = this;
- else {
- Y.Log('focusOn ATTR Error: The event with name "'+o.ev+'" could not be attached.');
- }
+ if (value) {
+ A.DialogManager.register(instance);
+ }
+ else {
+ A.DialogManager.remove(instance);
}
- instance._uiHandlesModal = uiHandles;
+ return value;
},
/**
- * Detaches all UI Listeners that were set in _attachUIHandlesModal from the widget.
+ * Sync dialog dimentions based on resizable end and resize events.
*
- * @method _detachUIHandlesModal
+ * @method _syncResizableDimentions
+ * @param {EventFacade} Resizable event
+ * @protected
*/
- _detachUIHandlesModal : function () {
+ _syncResizableDimentions: function(event) {
var instance = this;
- A.each(instance._uiHandlesModal, function(h){
- h.detach();
- });
- instance._uiHandlesModal = null;
+ var info = event.info;
+ var type = event.type;
+
+ if ((type === EV_RESIZE_END) ||
+ ((type === EV_RESIZE) && !event.currentTarget.get(PROXY))) {
+ instance.set(HEIGHT, info.offsetHeight);
+ instance.set(WIDTH, info.offsetWidth);
+ }
},
/**
- * Provides mouse and tab focus to the widget's bounding box.
+ * Set A.Plugin.DDConstrained constrain2view property to false or true
+ * depending on the value of constrain2view attribute.
*
- * @method _focus
+ * @param {A.DD.Drag} dragInstance
+ * @protected
*/
- _focus : function (event) {
+ _updateDDConstrain2view: function(dragInstance) {
var instance = this;
- var bb = instance.get(BOUNDING_BOX),
- oldTI = bb.get('tabIndex');
-
- bb.set('tabIndex', oldTI >= 0 ? oldTI : 0);
- instance.focus();
+ dragInstance.plug(
+ A.Plugin.DDConstrained,
+ {
+ constrain2view: instance.get(CONSTRAIN_TO_VIEWPORT)
+ }
+ );
}
};
A.Dialog = A.Component.create(
{
- NAME: DIALOG,
+ AUGMENTS: [Dialog, A.WidgetPosition, A.WidgetStack, A.WidgetPositionAlign, A.WidgetPositionConstrain],
EXTENDS: A.Panel,
- AUGMENTS: [Dialog, A.WidgetPosition, A.WidgetStack, A.WidgetPositionAlign, A.WidgetPositionConstrain]
+ NAME: DIALOG
}
);
@@ -1027,21 +1036,6 @@ DialogManager.after(
A.mix(
DialogManager,
{
- /**
- * Find the Widget instance based on a child
- * element.
- *
- * @method findByChild
- * @for DialogManager
- * @param {Node | String} child Child node of the Dialog.
- * @return {Widget}
- */
- findByChild: function(child) {
- return A.Widget.getByNode(
- A.one(child).ancestor(DOT + CSS_DIALOG, true)
- );
- },
-
/**
* Invoke the close method from
* the Dialog which contains the child element.
Invoke the start method * from the IOPlugin plugged on this Dialog