Parley
view release on metacpan or search on metacpan
root/static/yui/container/container_core.js view on Meta::CPAN
Overlay.IFRAME_OFFSET = 3;
/**
* Number representing the minimum distance an Overlay instance should be
* positioned relative to the boundaries of the browser's viewport, in pixels.
* @property YAHOO.widget.Overlay.VIEWPORT_OFFSET
* @default 10
* @static
* @final
* @type Number
*/
Overlay.VIEWPORT_OFFSET = 10;
/**
* Constant representing the top left corner of an element, used for
* configuring the context element alignment
* @property YAHOO.widget.Overlay.TOP_LEFT
* @static
* @final
* @type String
*/
Overlay.TOP_LEFT = "tl";
/**
* Constant representing the top right corner of an element, used for
* configuring the context element alignment
* @property YAHOO.widget.Overlay.TOP_RIGHT
* @static
* @final
* @type String
*/
Overlay.TOP_RIGHT = "tr";
/**
* Constant representing the top bottom left corner of an element, used for
* configuring the context element alignment
* @property YAHOO.widget.Overlay.BOTTOM_LEFT
* @static
* @final
* @type String
*/
Overlay.BOTTOM_LEFT = "bl";
/**
* Constant representing the bottom right corner of an element, used for
* configuring the context element alignment
* @property YAHOO.widget.Overlay.BOTTOM_RIGHT
* @static
* @final
* @type String
*/
Overlay.BOTTOM_RIGHT = "br";
/**
* Constant representing the default CSS class used for an Overlay
* @property YAHOO.widget.Overlay.CSS_OVERLAY
* @static
* @final
* @type String
*/
Overlay.CSS_OVERLAY = "yui-overlay";
/**
* Constant representing the names of the standard module elements
* used in the overlay.
* @property YAHOO.widget.Overlay.STD_MOD_RE
* @static
* @final
* @type RegExp
*/
Overlay.STD_MOD_RE = /^\s*?(body|footer|header)\s*?$/i;
/**
* A singleton CustomEvent used for reacting to the DOM event for
* window scroll
* @event YAHOO.widget.Overlay.windowScrollEvent
*/
Overlay.windowScrollEvent = new CustomEvent("windowScroll");
/**
* A singleton CustomEvent used for reacting to the DOM event for
* window resize
* @event YAHOO.widget.Overlay.windowResizeEvent
*/
Overlay.windowResizeEvent = new CustomEvent("windowResize");
/**
* The DOM event handler used to fire the CustomEvent for window scroll
* @method YAHOO.widget.Overlay.windowScrollHandler
* @static
* @param {DOMEvent} e The DOM scroll event
*/
Overlay.windowScrollHandler = function (e) {
var t = Event.getTarget(e);
// - Webkit (Safari 2/3) and Opera 9.2x bubble scroll events from elements to window
// - FF2/3 and IE6/7, Opera 9.5x don't bubble scroll events from elements to window
// - IE doesn't recognize scroll registered on the document.
//
// Also, when document view is scrolled, IE doesn't provide a target,
// rest of the browsers set target to window.document, apart from opera
// which sets target to window.
if (!t || t === window || t === window.document) {
if (UA.ie) {
if (! window.scrollEnd) {
window.scrollEnd = -1;
}
clearTimeout(window.scrollEnd);
window.scrollEnd = setTimeout(function () {
Overlay.windowScrollEvent.fire();
}, 1);
} else {
Overlay.windowScrollEvent.fire();
}
}
};
/**
* The DOM event handler used to fire the CustomEvent for window resize
* @method YAHOO.widget.Overlay.windowResizeHandler
* @static
root/static/yui/container/container_core.js view on Meta::CPAN
this.showEvent.subscribe(this.showMacGeckoScrollbars,
this, true);
}
if (! Config.alreadySubscribed(this.hideEvent,
this.hideMacGeckoScrollbars, this)) {
this.hideEvent.subscribe(this.hideMacGeckoScrollbars,
this, true);
}
}
this.initEvent.fire(Overlay);
},
/**
* Initializes the custom events for Overlay which are fired
* automatically at appropriate times by the Overlay class.
* @method initEvents
*/
initEvents: function () {
Overlay.superclass.initEvents.call(this);
var SIGNATURE = CustomEvent.LIST;
/**
* CustomEvent fired before the Overlay is moved.
* @event beforeMoveEvent
* @param {Number} x x coordinate
* @param {Number} y y coordinate
*/
this.beforeMoveEvent = this.createEvent(EVENT_TYPES.BEFORE_MOVE);
this.beforeMoveEvent.signature = SIGNATURE;
/**
* CustomEvent fired after the Overlay is moved.
* @event moveEvent
* @param {Number} x x coordinate
* @param {Number} y y coordinate
*/
this.moveEvent = this.createEvent(EVENT_TYPES.MOVE);
this.moveEvent.signature = SIGNATURE;
},
/**
* Initializes the class's configurable properties which can be changed
* using the Overlay's Config object (cfg).
* @method initDefaultConfig
*/
initDefaultConfig: function () {
Overlay.superclass.initDefaultConfig.call(this);
var cfg = this.cfg;
// Add overlay config properties //
/**
* The absolute x-coordinate position of the Overlay
* @config x
* @type Number
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.X.key, {
handler: this.configX,
validator: DEFAULT_CONFIG.X.validator,
suppressEvent: DEFAULT_CONFIG.X.suppressEvent,
supercedes: DEFAULT_CONFIG.X.supercedes
});
/**
* The absolute y-coordinate position of the Overlay
* @config y
* @type Number
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.Y.key, {
handler: this.configY,
validator: DEFAULT_CONFIG.Y.validator,
suppressEvent: DEFAULT_CONFIG.Y.suppressEvent,
supercedes: DEFAULT_CONFIG.Y.supercedes
});
/**
* An array with the absolute x and y positions of the Overlay
* @config xy
* @type Number[]
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.XY.key, {
handler: this.configXY,
suppressEvent: DEFAULT_CONFIG.XY.suppressEvent,
supercedes: DEFAULT_CONFIG.XY.supercedes
});
/**
* <p>
* The array of context arguments for context-sensitive positioning.
* </p>
*
* <p>
* The format of the array is: <code>[contextElementOrId, overlayCorner, contextCorner, arrayOfTriggerEvents (optional)]</code>, the
* the 4 array elements described in detail below:
* </p>
*
* <dl>
* <dt>contextElementOrId <String|HTMLElement></dt>
* <dd>A reference to the context element to which the overlay should be aligned (or it's id).</dd>
* <dt>overlayCorner <String></dt>
* <dd>The corner of the overlay which is to be used for alignment. This corner will be aligned to the
* corner of the context element defined by the "contextCorner" entry which follows. Supported string values are:
* "tr" (top right), "tl" (top left), "br" (bottom right), or "bl" (bottom left).</dd>
* <dt>contextCorner <String></dt>
* <dd>The corner of the context element which is to be used for alignment. Supported string values are the same ones listed for the "overlayCorner" entry above.</dd>
* <dt>arrayOfTriggerEvents (optional) <Array[String|CustomEvent]></dt>
* <dd>
* <p>
* By default, context alignment is a one time operation, aligning the Overlay to the context element when context configuration property is set, or when the <a href="#method_align">align</a>
* method is invoked. However, you can use the optional "arrayOfTriggerEvents" entry to define the list of events which should force the overlay to re-align itself with the context element.
* This is useful in situations where the layout of the document may change, resulting in the context element's position being modified.
* </p>
* <p>
* The array can contain either event type strings for events the instance publishes (e.g. "beforeShow") or CustomEvent instances. Additionally the following
* 3 static container event types are also currently supported : <code>"windowResize", "windowScroll", "textResize"</code> (defined in <a href="#property__TRIGGER_MAP">_TRIGGER_MAP</a> private property).
* </p>
* </dd>
* </dl>
*
* <p>
* For example, setting this property to <code>["img1", "tl", "bl"]</code> will
* align the Overlay's top left corner to the bottom left corner of the
* context element with id "img1".
* </p>
* <p>
* Adding the optional trigger values: <code>["img1", "tl", "bl", ["beforeShow", "windowResize"]]</code>,
* will re-align the overlay position, whenever the "beforeShow" or "windowResize" events are fired.
* </p>
*
* @config context
* @type Array
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.CONTEXT.key, {
handler: this.configContext,
suppressEvent: DEFAULT_CONFIG.CONTEXT.suppressEvent,
supercedes: DEFAULT_CONFIG.CONTEXT.supercedes
});
/**
* Determines whether or not the Overlay should be anchored
* to the center of the viewport.
*
* <p>This property can be set to:</p>
*
* <dl>
* <dt>true</dt>
* <dd>
* To enable fixed center positioning
* <p>
* When enabled, the overlay will
* be positioned in the center of viewport when initially displayed, and
* will remain in the center of the viewport whenever the window is
* scrolled or resized.
* </p>
* <p>
* If the overlay is too big for the viewport,
* it's top left corner will be aligned with the top left corner of the viewport.
* </p>
* </dd>
* <dt>false</dt>
* <dd>
* To disable fixed center positioning.
* <p>In this case the overlay can still be
* centered as a one-off operation, by invoking the <code>center()</code> method,
* however it will not remain centered when the window is scrolled/resized.
* </dd>
* <dt>"contained"<dt>
* <dd>To enable fixed center positioning, as with the <code>true</code> option.
* <p>However, unlike setting the property to <code>true</code>,
* when the property is set to <code>"contained"</code>, if the overlay is
* too big for the viewport, it will not get automatically centered when the
* user scrolls or resizes the window (until the window is large enough to contain the
* overlay). This is useful in cases where the Overlay has both header and footer
* UI controls which the user may need to access.
* </p>
* </dd>
* </dl>
*
* @config fixedcenter
* @type Boolean | String
* @default false
*/
cfg.addProperty(DEFAULT_CONFIG.FIXED_CENTER.key, {
handler: this.configFixedCenter,
value: DEFAULT_CONFIG.FIXED_CENTER.value,
validator: DEFAULT_CONFIG.FIXED_CENTER.validator,
supercedes: DEFAULT_CONFIG.FIXED_CENTER.supercedes
});
/**
* CSS width of the Overlay.
* @config width
* @type String
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.WIDTH.key, {
handler: this.configWidth,
suppressEvent: DEFAULT_CONFIG.WIDTH.suppressEvent,
supercedes: DEFAULT_CONFIG.WIDTH.supercedes
});
/**
* CSS height of the Overlay.
* @config height
* @type String
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.HEIGHT.key, {
handler: this.configHeight,
suppressEvent: DEFAULT_CONFIG.HEIGHT.suppressEvent,
supercedes: DEFAULT_CONFIG.HEIGHT.supercedes
});
/**
* Standard module element which should auto fill out the height of the Overlay if the height config property is set.
* Supported values are "header", "body", "footer".
*
* @config autofillheight
* @type String
* @default null
*/
cfg.addProperty(DEFAULT_CONFIG.AUTO_FILL_HEIGHT.key, {
handler: this.configAutoFillHeight,
value : DEFAULT_CONFIG.AUTO_FILL_HEIGHT.value,
validator : this._validateAutoFill,
supercedes: DEFAULT_CONFIG.AUTO_FILL_HEIGHT.supercedes
});
/**
* CSS z-index of the Overlay.
* @config zIndex
* @type Number
* @default null
root/static/yui/container/container_core.js view on Meta::CPAN
*/
cfg.addProperty(DEFAULT_CONFIG.IFRAME.key, {
handler: this.configIframe,
value: DEFAULT_CONFIG.IFRAME.value,
validator: DEFAULT_CONFIG.IFRAME.validator,
supercedes: DEFAULT_CONFIG.IFRAME.supercedes
});
/**
* @config preventcontextoverlap
* @description Boolean indicating whether or not the Overlay should overlap its
* context element (defined using the "context" configuration property) when the
* "constraintoviewport" configuration property is set to "true".
* @type Boolean
* @default false
*/
cfg.addProperty(DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.key, {
value: DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.value,
validator: DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.validator,
supercedes: DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.supercedes
});
},
/**
* Moves the Overlay to the specified position. This function is
* identical to calling this.cfg.setProperty("xy", [x,y]);
* @method moveTo
* @param {Number} x The Overlay's new x position
* @param {Number} y The Overlay's new y position
*/
moveTo: function (x, y) {
this.cfg.setProperty("xy", [x, y]);
},
/**
* Adds a CSS class ("hide-scrollbars") and removes a CSS class
* ("show-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X
* (https://bugzilla.mozilla.org/show_bug.cgi?id=187435)
* @method hideMacGeckoScrollbars
*/
hideMacGeckoScrollbars: function () {
Dom.replaceClass(this.element, "show-scrollbars", "hide-scrollbars");
},
/**
* Adds a CSS class ("show-scrollbars") and removes a CSS class
* ("hide-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X
* (https://bugzilla.mozilla.org/show_bug.cgi?id=187435)
* @method showMacGeckoScrollbars
*/
showMacGeckoScrollbars: function () {
Dom.replaceClass(this.element, "hide-scrollbars", "show-scrollbars");
},
/**
* Internal implementation to set the visibility of the overlay in the DOM.
*
* @method _setDomVisibility
* @param {boolean} visible Whether to show or hide the Overlay's outer element
* @protected
*/
_setDomVisibility : function(show) {
Dom.setStyle(this.element, "visibility", (show) ? "visible" : "hidden");
if (show) {
Dom.removeClass(this.element, "yui-overlay-hidden");
} else {
Dom.addClass(this.element, "yui-overlay-hidden");
}
},
// BEGIN BUILT-IN PROPERTY EVENT HANDLERS //
/**
* The default event handler fired when the "visible" property is
* changed. This method is responsible for firing showEvent
* and hideEvent.
* @method configVisible
* @param {String} type The CustomEvent type (usually the property name)
* @param {Object[]} args The CustomEvent arguments. For configuration
* handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers,
* this will usually equal the owner.
*/
configVisible: function (type, args, obj) {
var visible = args[0],
currentVis = Dom.getStyle(this.element, "visibility"),
effect = this.cfg.getProperty("effect"),
effectInstances = [],
isMacGecko = (this.platform == "mac" && UA.gecko),
alreadySubscribed = Config.alreadySubscribed,
eff, ei, e, i, j, k, h,
nEffects,
nEffectInstances;
if (currentVis == "inherit") {
e = this.element.parentNode;
while (e.nodeType != 9 && e.nodeType != 11) {
currentVis = Dom.getStyle(e, "visibility");
if (currentVis != "inherit") {
break;
}
e = e.parentNode;
}
if (currentVis == "inherit") {
currentVis = "visible";
}
}
if (effect) {
if (effect instanceof Array) {
nEffects = effect.length;
for (i = 0; i < nEffects; i++) {
eff = effect[i];
effectInstances[effectInstances.length] =
eff.effect(this, eff.duration);
}
} else {
effectInstances[effectInstances.length] =
effect.effect(this, effect.duration);
}
}
root/static/yui/container/container_core.js view on Meta::CPAN
if (currentVis != "visible" || currentVis === "") {
this.beforeShowEvent.fire();
this._setDomVisibility(true);
this.cfg.refireEvent("iframe");
this.showEvent.fire();
} else {
this._setDomVisibility(true);
}
}
} else { // Hide
if (isMacGecko) {
this.hideMacGeckoScrollbars();
}
if (effect) { // Animate out if showing
if (currentVis == "visible") {
this.beforeHideEvent.fire();
nEffectInstances = effectInstances.length;
for (k = 0; k < nEffectInstances; k++) {
h = effectInstances[k];
if (k === 0 && !alreadySubscribed(
h.animateOutCompleteEvent, this.hideEvent.fire,
this.hideEvent)) {
/*
Delegate hideEvent until end
of animateOutComplete
*/
h.animateOutCompleteEvent.subscribe(
this.hideEvent.fire, this.hideEvent, true);
}
h.animateOut();
}
} else if (currentVis === "") {
this._setDomVisibility(false);
}
} else { // Simple hide
if (currentVis == "visible" || currentVis === "") {
this.beforeHideEvent.fire();
this._setDomVisibility(false);
this.hideEvent.fire();
} else {
this._setDomVisibility(false);
}
}
}
},
/**
* Fixed center event handler used for centering on scroll/resize, but only if
* the overlay is visible and, if "fixedcenter" is set to "contained", only if
* the overlay fits within the viewport.
*
* @method doCenterOnDOMEvent
*/
doCenterOnDOMEvent: function () {
var cfg = this.cfg,
fc = cfg.getProperty("fixedcenter");
if (cfg.getProperty("visible")) {
if (fc && (fc !== _CONTAINED || this.fitsInViewport())) {
this.center();
}
}
},
/**
* Determines if the Overlay (including the offset value defined by Overlay.VIEWPORT_OFFSET)
* will fit entirely inside the viewport, in both dimensions - width and height.
*
* @method fitsInViewport
* @return boolean true if the Overlay will fit, false if not
*/
fitsInViewport : function() {
var nViewportOffset = Overlay.VIEWPORT_OFFSET,
element = this.element,
elementWidth = element.offsetWidth,
elementHeight = element.offsetHeight,
viewportWidth = Dom.getViewportWidth(),
viewportHeight = Dom.getViewportHeight();
return ((elementWidth + nViewportOffset < viewportWidth) && (elementHeight + nViewportOffset < viewportHeight));
},
/**
* The default event handler fired when the "fixedcenter" property
* is changed.
* @method configFixedCenter
* @param {String} type The CustomEvent type (usually the property name)
* @param {Object[]} args The CustomEvent arguments. For configuration
* handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers,
* this will usually equal the owner.
*/
configFixedCenter: function (type, args, obj) {
var val = args[0],
alreadySubscribed = Config.alreadySubscribed,
windowResizeEvent = Overlay.windowResizeEvent,
windowScrollEvent = Overlay.windowScrollEvent;
if (val) {
this.center();
if (!alreadySubscribed(this.beforeShowEvent, this.center)) {
this.beforeShowEvent.subscribe(this.center);
}
if (!alreadySubscribed(windowResizeEvent, this.doCenterOnDOMEvent, this)) {
windowResizeEvent.subscribe(this.doCenterOnDOMEvent, this, true);
}
root/static/yui/container/container_core.js view on Meta::CPAN
this._addToParent(oParentNode, oIFrame);
}
oIFrame.style.display = "block";
}
},
/**
* Hides the iframe shim, if it has been enabled.
* @method hideIframe
*/
hideIframe: function () {
if (this.iframe) {
this.iframe.style.display = "none";
}
},
/**
* Syncronizes the size and position of iframe shim to that of its
* corresponding Overlay instance.
* @method syncIframe
*/
syncIframe: function () {
var oIFrame = this.iframe,
oElement = this.element,
nOffset = Overlay.IFRAME_OFFSET,
nDimensionOffset = (nOffset * 2),
aXY;
if (oIFrame) {
// Size <iframe>
oIFrame.style.width = (oElement.offsetWidth + nDimensionOffset + "px");
oIFrame.style.height = (oElement.offsetHeight + nDimensionOffset + "px");
// Position <iframe>
aXY = this.cfg.getProperty("xy");
if (!Lang.isArray(aXY) || (isNaN(aXY[0]) || isNaN(aXY[1]))) {
this.syncPosition();
aXY = this.cfg.getProperty("xy");
}
Dom.setXY(oIFrame, [(aXY[0] - nOffset), (aXY[1] - nOffset)]);
}
},
/**
* Sets the zindex of the iframe shim, if it exists, based on the zindex of
* the Overlay element. The zindex of the iframe is set to be one less
* than the Overlay element's zindex.
*
* <p>NOTE: This method will not bump up the zindex of the Overlay element
* to ensure that the iframe shim has a non-negative zindex.
* If you require the iframe zindex to be 0 or higher, the zindex of
* the Overlay element should be set to a value greater than 0, before
* this method is called.
* </p>
* @method stackIframe
*/
stackIframe: function () {
if (this.iframe) {
var overlayZ = Dom.getStyle(this.element, "zIndex");
if (!YAHOO.lang.isUndefined(overlayZ) && !isNaN(overlayZ)) {
Dom.setStyle(this.iframe, "zIndex", (overlayZ - 1));
}
}
},
/**
* The default event handler fired when the "iframe" property is changed.
* @method configIframe
* @param {String} type The CustomEvent type (usually the property name)
* @param {Object[]} args The CustomEvent arguments. For configuration
* handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers,
* this will usually equal the owner.
*/
configIframe: function (type, args, obj) {
var bIFrame = args[0];
function createIFrame() {
var oIFrame = this.iframe,
oElement = this.element,
oParent;
if (!oIFrame) {
if (!m_oIFrameTemplate) {
m_oIFrameTemplate = document.createElement("iframe");
if (this.isSecure) {
m_oIFrameTemplate.src = Overlay.IFRAME_SRC;
}
/*
Set the opacity of the <iframe> to 0 so that it
doesn't modify the opacity of any transparent
elements that may be on top of it (like a shadow).
*/
if (UA.ie) {
m_oIFrameTemplate.style.filter = "alpha(opacity=0)";
/*
Need to set the "frameBorder" property to 0
supress the default <iframe> border in IE.
Setting the CSS "border" property alone
doesn't supress it.
*/
m_oIFrameTemplate.frameBorder = 0;
}
else {
m_oIFrameTemplate.style.opacity = "0";
}
m_oIFrameTemplate.style.position = "absolute";
m_oIFrameTemplate.style.border = "none";
m_oIFrameTemplate.style.margin = "0";
m_oIFrameTemplate.style.padding = "0";
m_oIFrameTemplate.style.display = "none";
m_oIFrameTemplate.tabIndex = -1;
}
oIFrame = m_oIFrameTemplate.cloneNode(false);
oParent = oElement.parentNode;
root/static/yui/container/container_core.js view on Meta::CPAN
this._processTriggers(this._contextTriggers, _UNSUBSCRIBE, this._alignOnTrigger);
}
if (triggers) {
// Subscribe New Set
this._processTriggers(triggers, _SUBSCRIBE, this._alignOnTrigger);
this._contextTriggers = triggers;
}
}
}
},
/**
* Custom Event handler for context alignment triggers. Invokes the align method
*
* @method _alignOnTrigger
* @protected
*
* @param {String} type The event type (not used by the default implementation)
* @param {Any[]} args The array of arguments for the trigger event (not used by the default implementation)
*/
_alignOnTrigger: function(type, args) {
this.align();
},
/**
* Helper method to locate the custom event instance for the event name string
* passed in. As a convenience measure, any custom events passed in are returned.
*
* @method _findTriggerCE
* @private
*
* @param {String|CustomEvent} t Either a CustomEvent, or event type (e.g. "windowScroll") for which a
* custom event instance needs to be looked up from the Overlay._TRIGGER_MAP.
*/
_findTriggerCE : function(t) {
var tce = null;
if (t instanceof CustomEvent) {
tce = t;
} else if (Overlay._TRIGGER_MAP[t]) {
tce = Overlay._TRIGGER_MAP[t];
}
return tce;
},
/**
* Utility method that subscribes or unsubscribes the given
* function from the list of trigger events provided.
*
* @method _processTriggers
* @protected
*
* @param {Array[String|CustomEvent]} triggers An array of either CustomEvents, event type strings
* (e.g. "beforeShow", "windowScroll") to/from which the provided function should be
* subscribed/unsubscribed respectively.
*
* @param {String} mode Either "subscribe" or "unsubscribe", specifying whether or not
* we are subscribing or unsubscribing trigger listeners
*
* @param {Function} fn The function to be subscribed/unsubscribed to/from the trigger event.
* Context is always set to the overlay instance, and no additional object argument
* get passed to the subscribed function.
*/
_processTriggers : function(triggers, mode, fn) {
var t, tce;
for (var i = 0, l = triggers.length; i < l; ++i) {
t = triggers[i];
tce = this._findTriggerCE(t);
if (tce) {
tce[mode](fn, this, true);
} else {
this[mode](t, fn);
}
}
},
// END BUILT-IN PROPERTY EVENT HANDLERS //
/**
* Aligns the Overlay to its context element using the specified corner
* points (represented by the constants TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT,
* and BOTTOM_RIGHT.
* @method align
* @param {String} elementAlign The String representing the corner of
* the Overlay that should be aligned to the context element
* @param {String} contextAlign The corner of the context element
* that the elementAlign corner should stick to.
*/
align: function (elementAlign, contextAlign) {
var contextArgs = this.cfg.getProperty("context"),
me = this,
context,
element,
contextRegion;
function doAlign(v, h) {
switch (elementAlign) {
case Overlay.TOP_LEFT:
me.moveTo(h, v);
break;
case Overlay.TOP_RIGHT:
me.moveTo((h - element.offsetWidth), v);
break;
case Overlay.BOTTOM_LEFT:
me.moveTo(h, (v - element.offsetHeight));
break;
case Overlay.BOTTOM_RIGHT:
me.moveTo((h - element.offsetWidth),
(v - element.offsetHeight));
break;
}
}
if (contextArgs) {
root/static/yui/container/container_core.js view on Meta::CPAN
*/
onDomResize: function (e, obj) {
var me = this;
Overlay.superclass.onDomResize.call(this, e, obj);
setTimeout(function () {
me.syncPosition();
me.cfg.refireEvent("iframe");
me.cfg.refireEvent("context");
}, 0);
},
/**
* Determines the content box height of the given element (height of the element, without padding or borders) in pixels.
*
* @method _getComputedHeight
* @private
* @param {HTMLElement} el The element for which the content height needs to be determined
* @return {Number} The content box height of the given element, or null if it could not be determined.
*/
_getComputedHeight : (function() {
if (document.defaultView && document.defaultView.getComputedStyle) {
return function(el) {
var height = null;
if (el.ownerDocument && el.ownerDocument.defaultView) {
var computed = el.ownerDocument.defaultView.getComputedStyle(el, '');
if (computed) {
height = parseInt(computed.height, 10);
}
}
return (Lang.isNumber(height)) ? height : null;
};
} else {
return function(el) {
var height = null;
if (el.style.pixelHeight) {
height = el.style.pixelHeight;
}
return (Lang.isNumber(height)) ? height : null;
};
}
})(),
/**
* autofillheight validator. Verifies that the autofill value is either null
* or one of the strings : "body", "header" or "footer".
*
* @method _validateAutoFillHeight
* @protected
* @param {String} val
* @return true, if valid, false otherwise
*/
_validateAutoFillHeight : function(val) {
return (!val) || (Lang.isString(val) && Overlay.STD_MOD_RE.test(val));
},
/**
* The default custom event handler executed when the overlay's height is changed,
* if the autofillheight property has been set.
*
* @method _autoFillOnHeightChange
* @protected
* @param {String} type The event type
* @param {Array} args The array of arguments passed to event subscribers
* @param {HTMLElement} el The header, body or footer element which is to be resized to fill
* out the containers height
*/
_autoFillOnHeightChange : function(type, args, el) {
var height = this.cfg.getProperty("height");
if ((height && height !== "auto") || (height === 0)) {
this.fillHeight(el);
}
},
/**
* Returns the sub-pixel height of the el, using getBoundingClientRect, if available,
* otherwise returns the offsetHeight
* @method _getPreciseHeight
* @private
* @param {HTMLElement} el
* @return {Float} The sub-pixel height if supported by the browser, else the rounded height.
*/
_getPreciseHeight : function(el) {
var height = el.offsetHeight;
if (el.getBoundingClientRect) {
var rect = el.getBoundingClientRect();
height = rect.bottom - rect.top;
}
return height;
},
/**
* <p>
* Sets the height on the provided header, body or footer element to
* fill out the height of the container. It determines the height of the
* containers content box, based on it's configured height value, and
* sets the height of the autofillheight element to fill out any
* space remaining after the other standard module element heights
* have been accounted for.
* </p>
* <p><strong>NOTE:</strong> This method is not designed to work if an explicit
* height has not been set on the container, since for an "auto" height container,
* the heights of the header/body/footer will drive the height of the container.</p>
*
* @method fillHeight
* @param {HTMLElement} el The element which should be resized to fill out the height
* of the container element.
*/
fillHeight : function(el) {
if (el) {
var container = this.innerElement || this.element,
containerEls = [this.header, this.body, this.footer],
containerEl,
total = 0,
filled = 0,
remaining = 0,
root/static/yui/container/container_core.js view on Meta::CPAN
},
/**
* Places the Overlay on top of all other instances of
* YAHOO.widget.Overlay.
* @method bringToTop
*/
bringToTop: function () {
var aOverlays = [],
oElement = this.element;
function compareZIndexDesc(p_oOverlay1, p_oOverlay2) {
var sZIndex1 = Dom.getStyle(p_oOverlay1, "zIndex"),
sZIndex2 = Dom.getStyle(p_oOverlay2, "zIndex"),
nZIndex1 = (!sZIndex1 || isNaN(sZIndex1)) ? 0 : parseInt(sZIndex1, 10),
nZIndex2 = (!sZIndex2 || isNaN(sZIndex2)) ? 0 : parseInt(sZIndex2, 10);
if (nZIndex1 > nZIndex2) {
return -1;
} else if (nZIndex1 < nZIndex2) {
return 1;
} else {
return 0;
}
}
function isOverlayElement(p_oElement) {
var isOverlay = Dom.hasClass(p_oElement, Overlay.CSS_OVERLAY),
Panel = YAHOO.widget.Panel;
if (isOverlay && !Dom.isAncestor(oElement, p_oElement)) {
if (Panel && Dom.hasClass(p_oElement, Panel.CSS_PANEL)) {
aOverlays[aOverlays.length] = p_oElement.parentNode;
} else {
aOverlays[aOverlays.length] = p_oElement;
}
}
}
Dom.getElementsBy(isOverlayElement, "DIV", document.body);
aOverlays.sort(compareZIndexDesc);
var oTopOverlay = aOverlays[0],
nTopZIndex;
if (oTopOverlay) {
nTopZIndex = Dom.getStyle(oTopOverlay, "zIndex");
if (!isNaN(nTopZIndex)) {
var bRequiresBump = false;
if (oTopOverlay != oElement) {
bRequiresBump = true;
} else if (aOverlays.length > 1) {
var nNextZIndex = Dom.getStyle(aOverlays[1], "zIndex");
// Don't rely on DOM order to stack if 2 overlays are at the same zindex.
if (!isNaN(nNextZIndex) && (nTopZIndex == nNextZIndex)) {
bRequiresBump = true;
}
}
if (bRequiresBump) {
this.cfg.setProperty("zindex", (parseInt(nTopZIndex, 10) + 2));
}
}
}
},
/**
* Removes the Overlay element from the DOM and sets all child
* elements to null.
* @method destroy
*/
destroy: function () {
if (this.iframe) {
this.iframe.parentNode.removeChild(this.iframe);
}
this.iframe = null;
Overlay.windowResizeEvent.unsubscribe(
this.doCenterOnDOMEvent, this);
Overlay.windowScrollEvent.unsubscribe(
this.doCenterOnDOMEvent, this);
Module.textResizeEvent.unsubscribe(this._autoFillOnHeightChange);
Overlay.superclass.destroy.call(this);
},
/**
* Can be used to force the container to repaint/redraw it's contents.
* <p>
* By default applies and then removes a 1px bottom margin through the
* application/removal of a "yui-force-redraw" class.
* </p>
* <p>
* It is currently used by Overlay to force a repaint for webkit
* browsers, when centering.
* </p>
* @method forceContainerRedraw
*/
forceContainerRedraw : function() {
var c = this;
Dom.addClass(c.element, "yui-force-redraw");
setTimeout(function() {
Dom.removeClass(c.element, "yui-force-redraw");
}, 0);
},
/**
* Returns a String representation of the object.
* @method toString
* @return {String} The string representation of the Overlay.
*/
toString: function () {
return "Overlay " + this.id;
}
});
}());
(function () {
/**
* OverlayManager is used for maintaining the focus status of
* multiple Overlays.
* @namespace YAHOO.widget
* @namespace YAHOO.widget
* @class OverlayManager
* @constructor
* @param {Array} overlays Optional. A collection of Overlays to register
* with the manager.
* @param {Object} userConfig The object literal representing the user
* configuration of the OverlayManager
*/
YAHOO.widget.OverlayManager = function (userConfig) {
this.init(userConfig);
};
var Overlay = YAHOO.widget.Overlay,
Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
Config = YAHOO.util.Config,
CustomEvent = YAHOO.util.CustomEvent,
OverlayManager = YAHOO.widget.OverlayManager;
/**
* The CSS class representing a focused Overlay
* @property OverlayManager.CSS_FOCUSED
* @static
* @final
* @type String
*/
OverlayManager.CSS_FOCUSED = "focused";
OverlayManager.prototype = {
/**
* The class's constructor function
* @property contructor
* @type Function
*/
constructor: OverlayManager,
/**
* The array of Overlays that are currently registered
* @property overlays
* @type YAHOO.widget.Overlay[]
*/
overlays: null,
/**
* Initializes the default configuration of the OverlayManager
* @method initDefaultConfig
*/
initDefaultConfig: function () {
/**
* The collection of registered Overlays in use by
* the OverlayManager
* @config overlays
* @type YAHOO.widget.Overlay[]
* @default null
*/
this.cfg.addProperty("overlays", { suppressEvent: true } );
/**
* The default DOM event that should be used to focus an Overlay
* @config focusevent
* @type String
* @default "mousedown"
*/
this.cfg.addProperty("focusevent", { value: "mousedown" } );
},
/**
* Initializes the OverlayManager
* @method init
* @param {Overlay[]} overlays Optional. A collection of Overlays to
* register with the manager.
* @param {Object} userConfig The object literal representing the user
* configuration of the OverlayManager
*/
init: function (userConfig) {
/**
* The OverlayManager's Config object used for monitoring
* configuration properties.
* @property cfg
* @type Config
*/
this.cfg = new Config(this);
this.initDefaultConfig();
if (userConfig) {
this.cfg.applyConfig(userConfig, true);
}
this.cfg.fireQueue();
/**
* The currently activated Overlay
* @property activeOverlay
* @private
* @type YAHOO.widget.Overlay
*/
var activeOverlay = null;
/**
* Returns the currently focused Overlay
* @method getActive
* @return {Overlay} The currently focused Overlay
*/
this.getActive = function () {
return activeOverlay;
};
/**
* Focuses the specified Overlay
* @method focus
* @param {Overlay} overlay The Overlay to focus
* @param {String} overlay The id of the Overlay to focus
*/
this.focus = function (overlay) {
var o = this.find(overlay);
if (o) {
o.focus();
}
};
/**
* Removes the specified Overlay from the manager
* @method remove
* @param {Overlay} overlay The Overlay to remove
* @param {String} overlay The id of the Overlay to remove
*/
this.remove = function (overlay) {
var o = this.find(overlay),
originalZ;
if (o) {
if (activeOverlay == o) {
activeOverlay = null;
}
var bDestroyed = (o.element === null && o.cfg === null) ? true : false;
if (!bDestroyed) {
// Set it's zindex so that it's sorted to the end.
originalZ = Dom.getStyle(o.element, "zIndex");
o.cfg.setProperty("zIndex", -1000, true);
}
this.overlays.sort(this.compareZIndexDesc);
this.overlays = this.overlays.slice(0, (this.overlays.length - 1));
o.hideEvent.unsubscribe(o.blur);
o.destroyEvent.unsubscribe(this._onOverlayDestroy, o);
o.focusEvent.unsubscribe(this._onOverlayFocusHandler, o);
o.blurEvent.unsubscribe(this._onOverlayBlurHandler, o);
if (!bDestroyed) {
Event.removeListener(o.element, this.cfg.getProperty("focusevent"), this._onOverlayElementFocus);
o.cfg.setProperty("zIndex", originalZ, true);
o.cfg.setProperty("manager", null);
}
/* _managed Flag for custom or existing. Don't want to remove existing */
if (o.focusEvent._managed) { o.focusEvent = null; }
if (o.blurEvent._managed) { o.blurEvent = null; }
if (o.focus._managed) { o.focus = null; }
if (o.blur._managed) { o.blur = null; }
}
};
/**
* Removes focus from all registered Overlays in the manager
* @method blurAll
*/
this.blurAll = function () {
var nOverlays = this.overlays.length,
i;
if (nOverlays > 0) {
i = nOverlays - 1;
do {
this.overlays[i].blur();
}
while(i--);
}
};
/**
* Updates the state of the OverlayManager and overlay, as a result of the overlay
* being blurred.
*
* @method _manageBlur
* @param {Overlay} overlay The overlay instance which got blurred.
* @protected
*/
this._manageBlur = function (overlay) {
var changed = false;
if (activeOverlay == overlay) {
Dom.removeClass(activeOverlay.element, OverlayManager.CSS_FOCUSED);
activeOverlay = null;
changed = true;
}
return changed;
};
/**
* Updates the state of the OverlayManager and overlay, as a result of the overlay
* receiving focus.
*
* @method _manageFocus
* @param {Overlay} overlay The overlay instance which got focus.
* @protected
*/
this._manageFocus = function(overlay) {
var changed = false;
if (activeOverlay != overlay) {
if (activeOverlay) {
activeOverlay.blur();
}
activeOverlay = overlay;
this.bringToTop(activeOverlay);
Dom.addClass(activeOverlay.element, OverlayManager.CSS_FOCUSED);
changed = true;
}
return changed;
};
var overlays = this.cfg.getProperty("overlays");
if (! this.overlays) {
this.overlays = [];
}
if (overlays) {
this.register(overlays);
this.overlays.sort(this.compareZIndexDesc);
}
},
/**
* @method _onOverlayElementFocus
* @description Event handler for the DOM event that is used to focus
* the Overlay instance as specified by the "focusevent"
* configuration property.
* @private
* @param {Event} p_oEvent Object representing the DOM event
* object passed back by the event utility (Event).
*/
_onOverlayElementFocus: function (p_oEvent) {
var oTarget = Event.getTarget(p_oEvent),
oClose = this.close;
if (oClose && (oTarget == oClose || Dom.isAncestor(oClose, oTarget))) {
this.blur();
} else {
this.focus();
}
},
/**
* @method _onOverlayDestroy
* @description "destroy" event handler for the Overlay.
* @private
* @param {String} p_sType String representing the name of the event
* that was fired.
* @param {Array} p_aArgs Array of arguments sent when the event
* was fired.
* @param {Overlay} p_oOverlay Object representing the overlay that
* fired the event.
*/
_onOverlayDestroy: function (p_sType, p_aArgs, p_oOverlay) {
this.remove(p_oOverlay);
},
/**
* @method _onOverlayFocusHandler
*
* focusEvent Handler, used to delegate to _manageFocus with the
* correct arguments.
*
* @private
* @param {String} p_sType String representing the name of the event
* that was fired.
* @param {Array} p_aArgs Array of arguments sent when the event
* was fired.
* @param {Overlay} p_oOverlay Object representing the overlay that
* fired the event.
*/
_onOverlayFocusHandler: function(p_sType, p_aArgs, p_oOverlay) {
this._manageFocus(p_oOverlay);
},
/**
* @method _onOverlayBlurHandler
*
* blurEvent Handler, used to delegate to _manageBlur with the
* correct arguments.
*
* @private
* @param {String} p_sType String representing the name of the event
* that was fired.
* @param {Array} p_aArgs Array of arguments sent when the event
* was fired.
* @param {Overlay} p_oOverlay Object representing the overlay that
* fired the event.
*/
_onOverlayBlurHandler: function(p_sType, p_aArgs, p_oOverlay) {
this._manageBlur(p_oOverlay);
},
/**
* Subscribes to the Overlay based instance focusEvent, to allow the OverlayManager to
* monitor focus state.
*
* If the instance already has a focusEvent (e.g. Menu), OverlayManager will subscribe
* to the existing focusEvent, however if a focusEvent or focus method does not exist
* on the instance, the _bindFocus method will add them, and the focus method will
* update the OverlayManager's state directly.
*
* @method _bindFocus
* @param {Overlay} overlay The overlay for which focus needs to be managed
* @protected
*/
_bindFocus : function(overlay) {
var mgr = this;
if (!overlay.focusEvent) {
overlay.focusEvent = overlay.createEvent("focus");
overlay.focusEvent.signature = CustomEvent.LIST;
overlay.focusEvent._managed = true;
} else {
overlay.focusEvent.subscribe(mgr._onOverlayFocusHandler, overlay, mgr);
}
if (!overlay.focus) {
Event.on(overlay.element, mgr.cfg.getProperty("focusevent"), mgr._onOverlayElementFocus, null, overlay);
overlay.focus = function () {
if (mgr._manageFocus(this)) {
// For Panel/Dialog
if (this.cfg.getProperty("visible") && this.focusFirst) {
this.focusFirst();
}
this.focusEvent.fire();
}
};
overlay.focus._managed = true;
}
},
/**
* Subscribes to the Overlay based instance's blurEvent to allow the OverlayManager to
* monitor blur state.
*
* If the instance already has a blurEvent (e.g. Menu), OverlayManager will subscribe
* to the existing blurEvent, however if a blurEvent or blur method does not exist
* on the instance, the _bindBlur method will add them, and the blur method
* update the OverlayManager's state directly.
*
* @method _bindBlur
* @param {Overlay} overlay The overlay for which blur needs to be managed
* @protected
*/
_bindBlur : function(overlay) {
var mgr = this;
if (!overlay.blurEvent) {
overlay.blurEvent = overlay.createEvent("blur");
overlay.blurEvent.signature = CustomEvent.LIST;
overlay.focusEvent._managed = true;
} else {
overlay.blurEvent.subscribe(mgr._onOverlayBlurHandler, overlay, mgr);
}
if (!overlay.blur) {
overlay.blur = function () {
if (mgr._manageBlur(this)) {
this.blurEvent.fire();
}
};
overlay.blur._managed = true;
}
overlay.hideEvent.subscribe(overlay.blur);
},
/**
* Subscribes to the Overlay based instance's destroyEvent, to allow the Overlay
* to be removed for the OverlayManager when destroyed.
*
* @method _bindDestroy
* @param {Overlay} overlay The overlay instance being managed
* @protected
*/
_bindDestroy : function(overlay) {
var mgr = this;
overlay.destroyEvent.subscribe(mgr._onOverlayDestroy, overlay, mgr);
},
/**
* Ensures the zIndex configuration property on the managed overlay based instance
* is set to the computed zIndex value from the DOM (with "auto" translating to 0).
*
* @method _syncZIndex
* @param {Overlay} overlay The overlay instance being managed
* @protected
*/
_syncZIndex : function(overlay) {
var zIndex = Dom.getStyle(overlay.element, "zIndex");
if (!isNaN(zIndex)) {
overlay.cfg.setProperty("zIndex", parseInt(zIndex, 10));
} else {
overlay.cfg.setProperty("zIndex", 0);
}
},
/**
* Registers an Overlay or an array of Overlays with the manager. Upon
* registration, the Overlay receives functions for focus and blur,
* along with CustomEvents for each.
*
* @method register
* @param {Overlay} overlay An Overlay to register with the manager.
* @param {Overlay[]} overlay An array of Overlays to register with
* the manager.
* @return {boolean} true if any Overlays are registered.
*/
register: function (overlay) {
var registered = false,
i,
n;
if (overlay instanceof Overlay) {
overlay.cfg.addProperty("manager", { value: this } );
this._bindFocus(overlay);
this._bindBlur(overlay);
this._bindDestroy(overlay);
this._syncZIndex(overlay);
this.overlays.push(overlay);
this.bringToTop(overlay);
registered = true;
} else if (overlay instanceof Array) {
for (i = 0, n = overlay.length; i < n; i++) {
registered = this.register(overlay[i]) || registered;
}
}
return registered;
},
/**
* Places the specified Overlay instance on top of all other
* Overlay instances.
* @method bringToTop
* @param {YAHOO.widget.Overlay} p_oOverlay Object representing an
* Overlay instance.
* @param {String} p_oOverlay String representing the id of an
* Overlay instance.
*/
bringToTop: function (p_oOverlay) {
var oOverlay = this.find(p_oOverlay),
nTopZIndex,
oTopOverlay,
aOverlays;
if (oOverlay) {
aOverlays = this.overlays;
aOverlays.sort(this.compareZIndexDesc);
oTopOverlay = aOverlays[0];
if (oTopOverlay) {
nTopZIndex = Dom.getStyle(oTopOverlay.element, "zIndex");
if (!isNaN(nTopZIndex)) {
var bRequiresBump = false;
if (oTopOverlay !== oOverlay) {
bRequiresBump = true;
} else if (aOverlays.length > 1) {
var nNextZIndex = Dom.getStyle(aOverlays[1].element, "zIndex");
// Don't rely on DOM order to stack if 2 overlays are at the same zindex.
if (!isNaN(nNextZIndex) && (nTopZIndex == nNextZIndex)) {
bRequiresBump = true;
}
}
if (bRequiresBump) {
oOverlay.cfg.setProperty("zindex", (parseInt(nTopZIndex, 10) + 2));
}
}
aOverlays.sort(this.compareZIndexDesc);
}
}
},
/**
* Attempts to locate an Overlay by instance or ID.
* @method find
* @param {Overlay} overlay An Overlay to locate within the manager
* @param {String} overlay An Overlay id to locate within the manager
* @return {Overlay} The requested Overlay, if found, or null if it
* cannot be located.
*/
find: function (overlay) {
var isInstance = overlay instanceof Overlay,
overlays = this.overlays,
n = overlays.length,
found = null,
o,
i;
if (isInstance || typeof overlay == "string") {
for (i = n-1; i >= 0; i--) {
o = overlays[i];
if ((isInstance && (o === overlay)) || (o.id == overlay)) {
found = o;
break;
}
}
}
return found;
},
/**
* Used for sorting the manager's Overlays by z-index.
* @method compareZIndexDesc
* @private
* @return {Number} 0, 1, or -1, depending on where the Overlay should
* fall in the stacking order.
*/
compareZIndexDesc: function (o1, o2) {
var zIndex1 = (o1.cfg) ? o1.cfg.getProperty("zIndex") : null, // Sort invalid (destroyed)
zIndex2 = (o2.cfg) ? o2.cfg.getProperty("zIndex") : null; // objects at bottom.
if (zIndex1 === null && zIndex2 === null) {
return 0;
} else if (zIndex1 === null){
return 1;
} else if (zIndex2 === null) {
return -1;
} else if (zIndex1 > zIndex2) {
return -1;
} else if (zIndex1 < zIndex2) {
return 1;
} else {
return 0;
}
},
/**
* Shows all Overlays in the manager.
* @method showAll
*/
showAll: function () {
var overlays = this.overlays,
n = overlays.length,
i;
for (i = n - 1; i >= 0; i--) {
overlays[i].show();
}
},
/**
* Hides all Overlays in the manager.
* @method hideAll
*/
hideAll: function () {
var overlays = this.overlays,
n = overlays.length,
i;
for (i = n - 1; i >= 0; i--) {
overlays[i].hide();
}
},
/**
* Returns a string representation of the object.
* @method toString
* @return {String} The string representation of the OverlayManager
*/
toString: function () {
return "OverlayManager";
}
};
}());
(function () {
/**
* ContainerEffect encapsulates animation transitions that are executed when
* an Overlay is shown or hidden.
* @namespace YAHOO.widget
* @class ContainerEffect
* @constructor
* @param {YAHOO.widget.Overlay} overlay The Overlay that the animation
* should be associated with
* @param {Object} attrIn The object literal representing the animation
* arguments to be used for the animate-in transition. The arguments for
* this literal are: attributes(object, see YAHOO.util.Anim for description),
* duration(Number), and method(i.e. Easing.easeIn).
* @param {Object} attrOut The object literal representing the animation
* arguments to be used for the animate-out transition. The arguments for
* this literal are: attributes(object, see YAHOO.util.Anim for description),
* duration(Number), and method(i.e. Easing.easeIn).
* @param {HTMLElement} targetElement Optional. The target element that
* should be animated during the transition. Defaults to overlay.element.
* @param {class} Optional. The animation class to instantiate. Defaults to
* YAHOO.util.Anim. Other options include YAHOO.util.Motion.
*/
YAHOO.widget.ContainerEffect = function (overlay, attrIn, attrOut, targetElement, animClass) {
if (!animClass) {
animClass = YAHOO.util.Anim;
}
/**
* The overlay to animate
* @property overlay
* @type YAHOO.widget.Overlay
*/
this.overlay = overlay;
/**
* The animation attributes to use when transitioning into view
* @property attrIn
* @type Object
*/
this.attrIn = attrIn;
/**
* The animation attributes to use when transitioning out of view
* @property attrOut
* @type Object
*/
this.attrOut = attrOut;
/**
* The target element to be animated
* @property targetElement
* @type HTMLElement
*/
this.targetElement = targetElement || overlay.element;
/**
* The animation class to use for animating the overlay
* @property animClass
* @type class
*/
this.animClass = animClass;
};
var Dom = YAHOO.util.Dom,
CustomEvent = YAHOO.util.CustomEvent,
ContainerEffect = YAHOO.widget.ContainerEffect;
/**
* A pre-configured ContainerEffect instance that can be used for fading
* an overlay in and out.
* @method FADE
* @static
* @param {YAHOO.widget.Overlay} overlay The Overlay object to animate
* @param {Number} dur The duration of the animation
* @return {YAHOO.widget.ContainerEffect} The configured ContainerEffect object
*/
ContainerEffect.FADE = function (overlay, dur) {
var Easing = YAHOO.util.Easing,
fin = {
attributes: {opacity:{from:0, to:1}},
duration: dur,
method: Easing.easeIn
},
fout = {
attributes: {opacity:{to:0}},
duration: dur,
method: Easing.easeOut
},
fade = new ContainerEffect(overlay, fin, fout, overlay.element);
fade.handleUnderlayStart = function() {
var underlay = this.overlay.underlay;
if (underlay && YAHOO.env.ua.ie) {
var hasFilters = (underlay.filters && underlay.filters.length > 0);
if(hasFilters) {
Dom.addClass(overlay.element, "yui-effect-fade");
}
}
};
fade.handleUnderlayComplete = function() {
var underlay = this.overlay.underlay;
if (underlay && YAHOO.env.ua.ie) {
Dom.removeClass(overlay.element, "yui-effect-fade");
}
};
fade.handleStartAnimateIn = function (type, args, obj) {
Dom.addClass(obj.overlay.element, "hide-select");
if (!obj.overlay.underlay) {
obj.overlay.cfg.refireEvent("underlay");
}
obj.handleUnderlayStart();
obj.overlay._setDomVisibility(true);
Dom.setStyle(obj.overlay.element, "opacity", 0);
};
fade.handleCompleteAnimateIn = function (type,args,obj) {
Dom.removeClass(obj.overlay.element, "hide-select");
if (obj.overlay.element.style.filter) {
obj.overlay.element.style.filter = null;
}
obj.handleUnderlayComplete();
obj.overlay.cfg.refireEvent("iframe");
obj.animateInCompleteEvent.fire();
};
fade.handleStartAnimateOut = function (type, args, obj) {
Dom.addClass(obj.overlay.element, "hide-select");
obj.handleUnderlayStart();
};
fade.handleCompleteAnimateOut = function (type, args, obj) {
Dom.removeClass(obj.overlay.element, "hide-select");
if (obj.overlay.element.style.filter) {
obj.overlay.element.style.filter = null;
}
obj.overlay._setDomVisibility(false);
Dom.setStyle(obj.overlay.element, "opacity", 1);
obj.handleUnderlayComplete();
obj.overlay.cfg.refireEvent("iframe");
obj.animateOutCompleteEvent.fire();
};
fade.init();
return fade;
};
/**
* A pre-configured ContainerEffect instance that can be used for sliding an
* overlay in and out.
* @method SLIDE
* @static
* @param {YAHOO.widget.Overlay} overlay The Overlay object to animate
* @param {Number} dur The duration of the animation
* @return {YAHOO.widget.ContainerEffect} The configured ContainerEffect object
*/
ContainerEffect.SLIDE = function (overlay, dur) {
var Easing = YAHOO.util.Easing,
x = overlay.cfg.getProperty("x") || Dom.getX(overlay.element),
y = overlay.cfg.getProperty("y") || Dom.getY(overlay.element),
clientWidth = Dom.getClientWidth(),
offsetWidth = overlay.element.offsetWidth,
sin = {
attributes: { points: { to: [x, y] } },
duration: dur,
method: Easing.easeIn
},
sout = {
attributes: { points: { to: [(clientWidth + 25), y] } },
duration: dur,
method: Easing.easeOut
},
slide = new ContainerEffect(overlay, sin, sout, overlay.element, YAHOO.util.Motion);
slide.handleStartAnimateIn = function (type,args,obj) {
obj.overlay.element.style.left = ((-25) - offsetWidth) + "px";
obj.overlay.element.style.top = y + "px";
};
slide.handleTweenAnimateIn = function (type, args, obj) {
var pos = Dom.getXY(obj.overlay.element),
currentX = pos[0],
currentY = pos[1];
if (Dom.getStyle(obj.overlay.element, "visibility") ==
"hidden" && currentX < x) {
obj.overlay._setDomVisibility(true);
}
obj.overlay.cfg.setProperty("xy", [currentX, currentY], true);
obj.overlay.cfg.refireEvent("iframe");
};
slide.handleCompleteAnimateIn = function (type, args, obj) {
obj.overlay.cfg.setProperty("xy", [x, y], true);
obj.startX = x;
obj.startY = y;
obj.overlay.cfg.refireEvent("iframe");
obj.animateInCompleteEvent.fire();
};
slide.handleStartAnimateOut = function (type, args, obj) {
var vw = Dom.getViewportWidth(),
pos = Dom.getXY(obj.overlay.element),
yso = pos[1];
obj.animOut.attributes.points.to = [(vw + 25), yso];
};
slide.handleTweenAnimateOut = function (type, args, obj) {
var pos = Dom.getXY(obj.overlay.element),
xto = pos[0],
yto = pos[1];
obj.overlay.cfg.setProperty("xy", [xto, yto], true);
obj.overlay.cfg.refireEvent("iframe");
};
slide.handleCompleteAnimateOut = function (type, args, obj) {
obj.overlay._setDomVisibility(false);
obj.overlay.cfg.setProperty("xy", [x, y]);
obj.animateOutCompleteEvent.fire();
};
slide.init();
return slide;
};
ContainerEffect.prototype = {
/**
* Initializes the animation classes and events.
* @method init
*/
init: function () {
this.beforeAnimateInEvent = this.createEvent("beforeAnimateIn");
this.beforeAnimateInEvent.signature = CustomEvent.LIST;
this.beforeAnimateOutEvent = this.createEvent("beforeAnimateOut");
this.beforeAnimateOutEvent.signature = CustomEvent.LIST;
this.animateInCompleteEvent = this.createEvent("animateInComplete");
this.animateInCompleteEvent.signature = CustomEvent.LIST;
this.animateOutCompleteEvent =
this.createEvent("animateOutComplete");
this.animateOutCompleteEvent.signature = CustomEvent.LIST;
this.animIn = new this.animClass(this.targetElement,
this.attrIn.attributes, this.attrIn.duration,
this.attrIn.method);
this.animIn.onStart.subscribe(this.handleStartAnimateIn, this);
this.animIn.onTween.subscribe(this.handleTweenAnimateIn, this);
this.animIn.onComplete.subscribe(this.handleCompleteAnimateIn,
this);
this.animOut = new this.animClass(this.targetElement,
this.attrOut.attributes, this.attrOut.duration,
this.attrOut.method);
this.animOut.onStart.subscribe(this.handleStartAnimateOut, this);
this.animOut.onTween.subscribe(this.handleTweenAnimateOut, this);
this.animOut.onComplete.subscribe(this.handleCompleteAnimateOut,
this);
},
/**
* Triggers the in-animation.
* @method animateIn
*/
animateIn: function () {
this.beforeAnimateInEvent.fire();
this.animIn.animate();
},
/**
* Triggers the out-animation.
root/static/yui/container/container_core.js view on Meta::CPAN
* The default onStart handler for the in-animation.
* @method handleStartAnimateIn
* @param {String} type The CustomEvent type
* @param {Object[]} args The CustomEvent arguments
* @param {Object} obj The scope object
*/
handleStartAnimateIn: function (type, args, obj) { },
/**
* The default onTween handler for the in-animation.
* @method handleTweenAnimateIn
* @param {String} type The CustomEvent type
* @param {Object[]} args The CustomEvent arguments
* @param {Object} obj The scope object
*/
handleTweenAnimateIn: function (type, args, obj) { },
/**
* The default onComplete handler for the in-animation.
* @method handleCompleteAnimateIn
* @param {String} type The CustomEvent type
* @param {Object[]} args The CustomEvent arguments
* @param {Object} obj The scope object
*/
handleCompleteAnimateIn: function (type, args, obj) { },
/**
* The default onStart handler for the out-animation.
* @method handleStartAnimateOut
* @param {String} type The CustomEvent type
* @param {Object[]} args The CustomEvent arguments
* @param {Object} obj The scope object
*/
handleStartAnimateOut: function (type, args, obj) { },
/**
* The default onTween handler for the out-animation.
* @method handleTweenAnimateOut
* @param {String} type The CustomEvent type
* @param {Object[]} args The CustomEvent arguments
* @param {Object} obj The scope object
*/
handleTweenAnimateOut: function (type, args, obj) { },
/**
* The default onComplete handler for the out-animation.
* @method handleCompleteAnimateOut
* @param {String} type The CustomEvent type
* @param {Object[]} args The CustomEvent arguments
* @param {Object} obj The scope object
*/
handleCompleteAnimateOut: function (type, args, obj) { },
/**
* Returns a string representation of the object.
* @method toString
* @return {String} The string representation of the ContainerEffect
*/
toString: function () {
var output = "ContainerEffect";
if (this.overlay) {
output += " [" + this.overlay.toString() + "]";
}
return output;
}
};
YAHOO.lang.augmentProto(ContainerEffect, YAHOO.util.EventProvider);
})();
YAHOO.register("containercore", YAHOO.widget.Module, {version: "2.7.0", build: "1799"});
( run in 1.486 second using v1.01-cache-2.11-cpan-39bf76dae61 )