2 Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
10 * Config is a utility used within an Object to allow the implementer to
11 * maintain a list of local configuration properties and listen for changes
12 * to those properties dynamically using CustomEvent. The initial values are
13 * also maintained so that the configuration can be reset at any given point
14 * to its initial state.
15 * @namespace YAHOO.util
18 * @param {Object} owner The owner Object to which this Config Object belongs
20 YAHOO.util.Config = function (owner) {
30 var Lang = YAHOO.lang,
31 CustomEvent = YAHOO.util.CustomEvent,
32 Config = YAHOO.util.Config;
36 * Constant representing the CustomEvent type for the config changed event.
37 * @property YAHOO.util.Config.CONFIG_CHANGED_EVENT
42 Config.CONFIG_CHANGED_EVENT = "configChanged";
45 * Constant representing the boolean type string
46 * @property YAHOO.util.Config.BOOLEAN_TYPE
51 Config.BOOLEAN_TYPE = "boolean";
56 * Object reference to the owner of this Config Object
63 * Boolean flag that specifies whether a queue is currently
65 * @property queueInProgress
68 queueInProgress: false,
71 * Maintains the local collection of configuration property objects and
72 * their specified values
80 * Maintains the local collection of configuration property objects as
81 * they were initially applied.
82 * This object is used when resetting a property.
83 * @property initialConfig
90 * Maintains the local, normalized CustomEvent queue
91 * @property eventQueue
98 * Custom Event, notifying subscribers when Config properties are set
99 * (setProperty is called without the silent flag
100 * @event configChangedEvent
102 configChangedEvent: null,
105 * Initializes the configuration Object and all of its local members.
107 * @param {Object} owner The owner Object to which this Config
110 init: function (owner) {
114 this.configChangedEvent =
115 this.createEvent(Config.CONFIG_CHANGED_EVENT);
117 this.configChangedEvent.signature = CustomEvent.LIST;
118 this.queueInProgress = false;
120 this.initialConfig = {};
121 this.eventQueue = [];
126 * Validates that the value passed in is a Boolean.
127 * @method checkBoolean
128 * @param {Object} val The value to validate
129 * @return {Boolean} true, if the value is valid
131 checkBoolean: function (val) {
132 return (typeof val == Config.BOOLEAN_TYPE);
136 * Validates that the value passed in is a number.
137 * @method checkNumber
138 * @param {Object} val The value to validate
139 * @return {Boolean} true, if the value is valid
141 checkNumber: function (val) {
142 return (!isNaN(val));
146 * Fires a configuration property event using the specified value.
149 * @param {String} key The configuration property's name
150 * @param {value} Object The value of the correct type for the property
152 fireEvent: function ( key, value ) {
153 var property = this.config[key];
155 if (property && property.event) {
156 property.event.fire(value);
161 * Adds a property to the Config Object's private config hash.
162 * @method addProperty
163 * @param {String} key The configuration property's name
164 * @param {Object} propertyObject The Object containing all of this
165 * property's arguments
167 addProperty: function ( key, propertyObject ) {
168 key = key.toLowerCase();
170 this.config[key] = propertyObject;
172 propertyObject.event = this.createEvent(key, { scope: this.owner });
173 propertyObject.event.signature = CustomEvent.LIST;
176 propertyObject.key = key;
178 if (propertyObject.handler) {
179 propertyObject.event.subscribe(propertyObject.handler,
183 this.setProperty(key, propertyObject.value, true);
185 if (! propertyObject.suppressEvent) {
186 this.queueProperty(key, propertyObject.value);
192 * Returns a key-value configuration map of the values currently set in
195 * @return {Object} The current config, represented in a key-value map
197 getConfig: function () {
200 currCfg = this.config,
204 for (prop in currCfg) {
205 if (Lang.hasOwnProperty(currCfg, prop)) {
206 property = currCfg[prop];
207 if (property && property.event) {
208 cfg[prop] = property.value;
217 * Returns the value of specified property.
218 * @method getProperty
219 * @param {String} key The name of the property
220 * @return {Object} The value of the specified property
222 getProperty: function (key) {
223 var property = this.config[key.toLowerCase()];
224 if (property && property.event) {
225 return property.value;
232 * Resets the specified property's value to its initial value.
233 * @method resetProperty
234 * @param {String} key The name of the property
235 * @return {Boolean} True is the property was reset, false if not
237 resetProperty: function (key) {
239 key = key.toLowerCase();
241 var property = this.config[key];
243 if (property && property.event) {
245 if (this.initialConfig[key] &&
246 !Lang.isUndefined(this.initialConfig[key])) {
248 this.setProperty(key, this.initialConfig[key]);
262 * Sets the value of a property. If the silent property is passed as
263 * true, the property's event will not be fired.
264 * @method setProperty
265 * @param {String} key The name of the property
266 * @param {String} value The value to set the property to
267 * @param {Boolean} silent Whether the value should be set silently,
268 * without firing the property event.
269 * @return {Boolean} True, if the set was successful, false if it failed.
271 setProperty: function (key, value, silent) {
275 key = key.toLowerCase();
277 if (this.queueInProgress && ! silent) {
278 // Currently running through a queue...
279 this.queueProperty(key,value);
283 property = this.config[key];
284 if (property && property.event) {
285 if (property.validator && !property.validator(value)) {
288 property.value = value;
290 this.fireEvent(key, value);
291 this.configChangedEvent.fire([key, value]);
302 * Sets the value of a property and queues its event to execute. If the
303 * event is already scheduled to execute, it is
304 * moved from its current position to the end of the queue.
305 * @method queueProperty
306 * @param {String} key The name of the property
307 * @param {String} value The value to set the property to
308 * @return {Boolean} true, if the set was successful, false if
311 queueProperty: function (key, value) {
313 key = key.toLowerCase();
315 var property = this.config[key],
316 foundDuplicate = false,
331 if (property && property.event) {
333 if (!Lang.isUndefined(value) && property.validator &&
334 !property.validator(value)) { // validator
338 if (!Lang.isUndefined(value)) {
339 property.value = value;
341 value = property.value;
344 foundDuplicate = false;
345 iLen = this.eventQueue.length;
347 for (i = 0; i < iLen; i++) {
348 queueItem = this.eventQueue[i];
351 queueItemKey = queueItem[0];
352 queueItemValue = queueItem[1];
354 if (queueItemKey == key) {
357 found a dupe... push to end of queue, null
358 current item, and break
361 this.eventQueue[i] = null;
363 this.eventQueue.push(
364 [key, (!Lang.isUndefined(value) ?
365 value : queueItemValue)]);
367 foundDuplicate = true;
373 // this is a refire, or a new property in the queue
375 if (! foundDuplicate && !Lang.isUndefined(value)) {
376 this.eventQueue.push([key, value]);
380 if (property.supercedes) {
382 sLen = property.supercedes.length;
384 for (s = 0; s < sLen; s++) {
386 supercedesCheck = property.supercedes[s];
387 qLen = this.eventQueue.length;
389 for (q = 0; q < qLen; q++) {
390 queueItemCheck = this.eventQueue[q];
392 if (queueItemCheck) {
393 queueItemCheckKey = queueItemCheck[0];
394 queueItemCheckValue = queueItemCheck[1];
396 if (queueItemCheckKey ==
397 supercedesCheck.toLowerCase() ) {
399 this.eventQueue.push([queueItemCheckKey,
400 queueItemCheckValue]);
402 this.eventQueue[q] = null;
419 * Fires the event for a property using the property's current value.
420 * @method refireEvent
421 * @param {String} key The name of the property
423 refireEvent: function (key) {
425 key = key.toLowerCase();
427 var property = this.config[key];
429 if (property && property.event &&
431 !Lang.isUndefined(property.value)) {
433 if (this.queueInProgress) {
435 this.queueProperty(key);
439 this.fireEvent(key, property.value);
447 * Applies a key-value Object literal to the configuration, replacing
448 * any existing values, and queueing the property events.
449 * Although the values will be set, fireQueue() must be called for their
450 * associated events to execute.
451 * @method applyConfig
452 * @param {Object} userConfig The configuration Object literal
453 * @param {Boolean} init When set to true, the initialConfig will
454 * be set to the userConfig passed in, so that calling a reset will
455 * reset the properties to the passed values.
457 applyConfig: function (userConfig, init) {
464 for (sKey in userConfig) {
465 if (Lang.hasOwnProperty(userConfig, sKey)) {
466 oConfig[sKey.toLowerCase()] = userConfig[sKey];
469 this.initialConfig = oConfig;
472 for (sKey in userConfig) {
473 if (Lang.hasOwnProperty(userConfig, sKey)) {
474 this.queueProperty(sKey, userConfig[sKey]);
480 * Refires the events for all configuration properties using their
484 refresh: function () {
488 for (prop in this.config) {
489 if (Lang.hasOwnProperty(this.config, prop)) {
490 this.refireEvent(prop);
496 * Fires the normalized list of queued property change events
499 fireQueue: function () {
507 this.queueInProgress = true;
508 for (i = 0;i < this.eventQueue.length; i++) {
509 queueItem = this.eventQueue[i];
513 value = queueItem[1];
514 property = this.config[key];
516 property.value = value;
518 // Clear out queue entry, to avoid it being
519 // re-added to the queue by any queueProperty/supercedes
520 // calls which are invoked during fireEvent
521 this.eventQueue[i] = null;
523 this.fireEvent(key,value);
527 this.queueInProgress = false;
528 this.eventQueue = [];
532 * Subscribes an external handler to the change event for any
534 * @method subscribeToConfigEvent
535 * @param {String} key The property name
536 * @param {Function} handler The handler function to use subscribe to
537 * the property's event
538 * @param {Object} obj The Object to use for scoping the event handler
539 * (see CustomEvent documentation)
540 * @param {Boolean} override Optional. If true, will override "this"
541 * within the handler to map to the scope Object passed into the method.
542 * @return {Boolean} True, if the subscription was successful,
545 subscribeToConfigEvent: function (key, handler, obj, override) {
547 var property = this.config[key.toLowerCase()];
549 if (property && property.event) {
550 if (!Config.alreadySubscribed(property.event, handler, obj)) {
551 property.event.subscribe(handler, obj, override);
561 * Unsubscribes an external handler from the change event for any
563 * @method unsubscribeFromConfigEvent
564 * @param {String} key The property name
565 * @param {Function} handler The handler function to use subscribe to
566 * the property's event
567 * @param {Object} obj The Object to use for scoping the event
568 * handler (see CustomEvent documentation)
569 * @return {Boolean} True, if the unsubscription was successful,
572 unsubscribeFromConfigEvent: function (key, handler, obj) {
573 var property = this.config[key.toLowerCase()];
574 if (property && property.event) {
575 return property.event.unsubscribe(handler, obj);
582 * Returns a string representation of the Config object
584 * @return {String} The Config object in string format.
586 toString: function () {
587 var output = "Config";
589 output += " [" + this.owner.toString() + "]";
595 * Returns a string representation of the Config object's current
597 * @method outputEventQueue
598 * @return {String} The string list of CustomEvents currently queued
601 outputEventQueue: function () {
606 nQueue = this.eventQueue.length;
608 for (q = 0; q < nQueue; q++) {
609 queueItem = this.eventQueue[q];
611 output += queueItem[0] + "=" + queueItem[1] + ", ";
618 * Sets all properties to null, unsubscribes all listeners from each
619 * property's change event and all listeners from the configChangedEvent.
622 destroy: function () {
624 var oConfig = this.config,
629 for (sProperty in oConfig) {
631 if (Lang.hasOwnProperty(oConfig, sProperty)) {
633 oProperty = oConfig[sProperty];
635 oProperty.event.unsubscribeAll();
636 oProperty.event = null;
642 this.configChangedEvent.unsubscribeAll();
644 this.configChangedEvent = null;
647 this.initialConfig = null;
648 this.eventQueue = null;
657 * Checks to determine if a particular function/Object pair are already
658 * subscribed to the specified CustomEvent
659 * @method YAHOO.util.Config.alreadySubscribed
661 * @param {YAHOO.util.CustomEvent} evt The CustomEvent for which to check
663 * @param {Function} fn The function to look for in the subscribers list
664 * @param {Object} obj The execution scope Object for the subscription
665 * @return {Boolean} true, if the function/Object pair is already subscribed
666 * to the CustomEvent passed in
668 Config.alreadySubscribed = function (evt, fn, obj) {
670 var nSubscribers = evt.subscribers.length,
674 if (nSubscribers > 0) {
675 i = nSubscribers - 1;
677 subsc = evt.subscribers[i];
678 if (subsc && subsc.obj == obj && subsc.fn == fn) {
689 YAHOO.lang.augmentProto(Config, YAHOO.util.EventProvider);
696 * The Container family of components is designed to enable developers to
697 * create different kinds of content-containing modules on the web. Module
698 * and Overlay are the most basic containers, and they can be used directly
699 * or extended to build custom containers. Also part of the Container family
700 * are four UI controls that extend Module and Overlay: Tooltip, Panel,
701 * Dialog, and SimpleDialog.
704 * @requires yahoo, dom, event
705 * @optional dragdrop, animation, button
709 * Module is a JavaScript representation of the Standard Module Format.
710 * Standard Module Format is a simple standard for markup containers where
711 * child nodes representing the header, body, and footer of the content are
712 * denoted using the CSS classes "hd", "bd", and "ft" respectively.
713 * Module is the base class for all other classes in the YUI
715 * @namespace YAHOO.widget
718 * @param {String} el The element ID representing the Module <em>OR</em>
719 * @param {HTMLElement} el The element representing the Module
720 * @param {Object} userConfig The configuration Object literal containing
721 * the configuration that should be set for this module. See configuration
722 * documentation for more details.
724 YAHOO.widget.Module = function (el, userConfig) {
726 this.init(el, userConfig);
731 var Dom = YAHOO.util.Dom,
732 Config = YAHOO.util.Config,
733 Event = YAHOO.util.Event,
734 CustomEvent = YAHOO.util.CustomEvent,
735 Module = YAHOO.widget.Module,
744 * Constant representing the name of the Module's events
745 * @property EVENT_TYPES
751 "BEFORE_INIT": "beforeInit",
754 "BEFORE_RENDER": "beforeRender",
756 "CHANGE_HEADER": "changeHeader",
757 "CHANGE_BODY": "changeBody",
758 "CHANGE_FOOTER": "changeFooter",
759 "CHANGE_CONTENT": "changeContent",
760 "DESTORY": "destroy",
761 "BEFORE_SHOW": "beforeShow",
763 "BEFORE_HIDE": "beforeHide",
768 * Constant representing the Module's configuration properties
769 * @property DEFAULT_CONFIG
779 validator: YAHOO.lang.isBoolean
785 supercedes: ["visible"]
789 key: "monitorresize",
793 "APPEND_TO_DOCUMENT_BODY": {
794 key: "appendtodocumentbody",
800 * Constant representing the prefix path to use for non-secure images
801 * @property YAHOO.widget.Module.IMG_ROOT
806 Module.IMG_ROOT = null;
809 * Constant representing the prefix path to use for securely served images
810 * @property YAHOO.widget.Module.IMG_ROOT_SSL
815 Module.IMG_ROOT_SSL = null;
818 * Constant for the default CSS class name that represents a Module
819 * @property YAHOO.widget.Module.CSS_MODULE
824 Module.CSS_MODULE = "yui-module";
827 * Constant representing the module header
828 * @property YAHOO.widget.Module.CSS_HEADER
833 Module.CSS_HEADER = "hd";
836 * Constant representing the module body
837 * @property YAHOO.widget.Module.CSS_BODY
842 Module.CSS_BODY = "bd";
845 * Constant representing the module footer
846 * @property YAHOO.widget.Module.CSS_FOOTER
851 Module.CSS_FOOTER = "ft";
854 * Constant representing the url for the "src" attribute of the iframe
855 * used to monitor changes to the browser's base font size
856 * @property YAHOO.widget.Module.RESIZE_MONITOR_SECURE_URL
861 Module.RESIZE_MONITOR_SECURE_URL = "javascript:false;";
864 * Constant representing the buffer amount (in pixels) to use when positioning
865 * the text resize monitor offscreen. The resize monitor is positioned
866 * offscreen by an amount eqaul to its offsetHeight + the buffer value.
868 * @property YAHOO.widget.Module.RESIZE_MONITOR_BUFFER
872 // Set to 1, to work around pixel offset in IE8, which increases when zoom is used
873 Module.RESIZE_MONITOR_BUFFER = 1;
876 * Singleton CustomEvent fired when the font size is changed in the browser.
877 * Opera's "zoom" functionality currently does not support text
879 * @event YAHOO.widget.Module.textResizeEvent
881 Module.textResizeEvent = new CustomEvent("textResize");
884 * Helper utility method, which forces a document level
885 * redraw for Opera, which can help remove repaint
886 * irregularities after applying DOM changes.
888 * @method YAHOO.widget.Module.forceDocumentRedraw
891 Module.forceDocumentRedraw = function() {
892 var docEl = document.documentElement;
894 docEl.className += " ";
895 docEl.className = YAHOO.lang.trim(docEl.className);
899 function createModuleTemplate() {
901 if (!m_oModuleTemplate) {
902 m_oModuleTemplate = document.createElement("div");
904 m_oModuleTemplate.innerHTML = ("<div class=\"" +
905 Module.CSS_HEADER + "\"></div>" + "<div class=\"" +
906 Module.CSS_BODY + "\"></div><div class=\"" +
907 Module.CSS_FOOTER + "\"></div>");
909 m_oHeaderTemplate = m_oModuleTemplate.firstChild;
910 m_oBodyTemplate = m_oHeaderTemplate.nextSibling;
911 m_oFooterTemplate = m_oBodyTemplate.nextSibling;
914 return m_oModuleTemplate;
917 function createHeader() {
918 if (!m_oHeaderTemplate) {
919 createModuleTemplate();
921 return (m_oHeaderTemplate.cloneNode(false));
924 function createBody() {
925 if (!m_oBodyTemplate) {
926 createModuleTemplate();
928 return (m_oBodyTemplate.cloneNode(false));
931 function createFooter() {
932 if (!m_oFooterTemplate) {
933 createModuleTemplate();
935 return (m_oFooterTemplate.cloneNode(false));
941 * The class's constructor function
942 * @property contructor
948 * The main module element that contains the header, body, and footer
955 * The header element, denoted with CSS class "hd"
962 * The body element, denoted with CSS class "bd"
969 * The footer element, denoted with CSS class "ft"
976 * The id of the element
983 * A string representing the root path for all images created by
985 * @deprecated It is recommend that any images for a Module be applied
986 * via CSS using the "background-image" property.
987 * @property imageRoot
990 imageRoot: Module.IMG_ROOT,
993 * Initializes the custom events for Module which are fired
994 * automatically at appropriate times by the Module class.
997 initEvents: function () {
999 var SIGNATURE = CustomEvent.LIST;
1002 * CustomEvent fired prior to class initalization.
1003 * @event beforeInitEvent
1004 * @param {class} classRef class reference of the initializing
1005 * class, such as this.beforeInitEvent.fire(Module)
1007 this.beforeInitEvent = this.createEvent(EVENT_TYPES.BEFORE_INIT);
1008 this.beforeInitEvent.signature = SIGNATURE;
1011 * CustomEvent fired after class initalization.
1013 * @param {class} classRef class reference of the initializing
1014 * class, such as this.beforeInitEvent.fire(Module)
1016 this.initEvent = this.createEvent(EVENT_TYPES.INIT);
1017 this.initEvent.signature = SIGNATURE;
1020 * CustomEvent fired when the Module is appended to the DOM
1021 * @event appendEvent
1023 this.appendEvent = this.createEvent(EVENT_TYPES.APPEND);
1024 this.appendEvent.signature = SIGNATURE;
1027 * CustomEvent fired before the Module is rendered
1028 * @event beforeRenderEvent
1030 this.beforeRenderEvent = this.createEvent(EVENT_TYPES.BEFORE_RENDER);
1031 this.beforeRenderEvent.signature = SIGNATURE;
1034 * CustomEvent fired after the Module is rendered
1035 * @event renderEvent
1037 this.renderEvent = this.createEvent(EVENT_TYPES.RENDER);
1038 this.renderEvent.signature = SIGNATURE;
1041 * CustomEvent fired when the header content of the Module
1043 * @event changeHeaderEvent
1044 * @param {String/HTMLElement} content String/element representing
1045 * the new header content
1047 this.changeHeaderEvent = this.createEvent(EVENT_TYPES.CHANGE_HEADER);
1048 this.changeHeaderEvent.signature = SIGNATURE;
1051 * CustomEvent fired when the body content of the Module is modified
1052 * @event changeBodyEvent
1053 * @param {String/HTMLElement} content String/element representing
1054 * the new body content
1056 this.changeBodyEvent = this.createEvent(EVENT_TYPES.CHANGE_BODY);
1057 this.changeBodyEvent.signature = SIGNATURE;
1060 * CustomEvent fired when the footer content of the Module
1062 * @event changeFooterEvent
1063 * @param {String/HTMLElement} content String/element representing
1064 * the new footer content
1066 this.changeFooterEvent = this.createEvent(EVENT_TYPES.CHANGE_FOOTER);
1067 this.changeFooterEvent.signature = SIGNATURE;
1070 * CustomEvent fired when the content of the Module is modified
1071 * @event changeContentEvent
1073 this.changeContentEvent = this.createEvent(EVENT_TYPES.CHANGE_CONTENT);
1074 this.changeContentEvent.signature = SIGNATURE;
1077 * CustomEvent fired when the Module is destroyed
1078 * @event destroyEvent
1080 this.destroyEvent = this.createEvent(EVENT_TYPES.DESTORY);
1081 this.destroyEvent.signature = SIGNATURE;
1084 * CustomEvent fired before the Module is shown
1085 * @event beforeShowEvent
1087 this.beforeShowEvent = this.createEvent(EVENT_TYPES.BEFORE_SHOW);
1088 this.beforeShowEvent.signature = SIGNATURE;
1091 * CustomEvent fired after the Module is shown
1094 this.showEvent = this.createEvent(EVENT_TYPES.SHOW);
1095 this.showEvent.signature = SIGNATURE;
1098 * CustomEvent fired before the Module is hidden
1099 * @event beforeHideEvent
1101 this.beforeHideEvent = this.createEvent(EVENT_TYPES.BEFORE_HIDE);
1102 this.beforeHideEvent.signature = SIGNATURE;
1105 * CustomEvent fired after the Module is hidden
1108 this.hideEvent = this.createEvent(EVENT_TYPES.HIDE);
1109 this.hideEvent.signature = SIGNATURE;
1113 * String representing the current user-agent platform
1114 * @property platform
1117 platform: function () {
1118 var ua = navigator.userAgent.toLowerCase();
1120 if (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1) {
1122 } else if (ua.indexOf("macintosh") != -1) {
1130 * String representing the user-agent of the browser
1131 * @deprecated Use YAHOO.env.ua
1135 browser: function () {
1136 var ua = navigator.userAgent.toLowerCase();
1138 Check Opera first in case of spoof and check Safari before
1139 Gecko since Safari's user agent string includes "like Gecko"
1141 if (ua.indexOf('opera') != -1) {
1143 } else if (ua.indexOf('msie 7') != -1) {
1145 } else if (ua.indexOf('msie') != -1) {
1147 } else if (ua.indexOf('safari') != -1) {
1149 } else if (ua.indexOf('gecko') != -1) {
1157 * Boolean representing whether or not the current browsing context is
1159 * @property isSecure
1162 isSecure: function () {
1163 if (window.location.href.toLowerCase().indexOf("https") === 0) {
1171 * Initializes the custom events for Module which are fired
1172 * automatically at appropriate times by the Module class.
1174 initDefaultConfig: function () {
1175 // Add properties //
1177 * Specifies whether the Module is visible on the page.
1182 this.cfg.addProperty(DEFAULT_CONFIG.VISIBLE.key, {
1183 handler: this.configVisible,
1184 value: DEFAULT_CONFIG.VISIBLE.value,
1185 validator: DEFAULT_CONFIG.VISIBLE.validator
1190 * Object or array of objects representing the ContainerEffect
1191 * classes that are active for animating the container.
1194 * <strong>NOTE:</strong> Although this configuration
1195 * property is introduced at the Module level, an out of the box
1196 * implementation is not shipped for the Module class so setting
1197 * the proroperty on the Module class has no effect. The Overlay
1198 * class is the first class to provide out of the box ContainerEffect
1205 this.cfg.addProperty(DEFAULT_CONFIG.EFFECT.key, {
1206 suppressEvent: DEFAULT_CONFIG.EFFECT.suppressEvent,
1207 supercedes: DEFAULT_CONFIG.EFFECT.supercedes
1211 * Specifies whether to create a special proxy iframe to monitor
1212 * for user font resizing in the document
1213 * @config monitorresize
1217 this.cfg.addProperty(DEFAULT_CONFIG.MONITOR_RESIZE.key, {
1218 handler: this.configMonitorResize,
1219 value: DEFAULT_CONFIG.MONITOR_RESIZE.value
1223 * Specifies if the module should be rendered as the first child
1224 * of document.body or appended as the last child when render is called
1225 * with document.body as the "appendToNode".
1227 * Appending to the body while the DOM is still being constructed can
1228 * lead to Operation Aborted errors in IE hence this flag is set to
1232 * @config appendtodocumentbody
1236 this.cfg.addProperty(DEFAULT_CONFIG.APPEND_TO_DOCUMENT_BODY.key, {
1237 value: DEFAULT_CONFIG.APPEND_TO_DOCUMENT_BODY.value
1242 * The Module class's initialization method, which is executed for
1243 * Module and all of its subclasses. This method is automatically
1244 * called by the constructor, and sets up all DOM references for
1245 * pre-existing markup, and creates required markup if it is not
1248 * If the element passed in does not have an id, one will be generated
1252 * @param {String} el The element ID representing the Module <em>OR</em>
1253 * @param {HTMLElement} el The element representing the Module
1254 * @param {Object} userConfig The configuration Object literal
1255 * containing the configuration that should be set for this module.
1256 * See configuration documentation for more details.
1258 init: function (el, userConfig) {
1263 this.beforeInitEvent.fire(Module);
1266 * The Module's Config object used for monitoring
1267 * configuration properties.
1269 * @type YAHOO.util.Config
1271 this.cfg = new Config(this);
1273 if (this.isSecure) {
1274 this.imageRoot = Module.IMG_ROOT_SSL;
1277 if (typeof el == "string") {
1279 el = document.getElementById(el);
1281 el = (createModuleTemplate()).cloneNode(false);
1286 this.id = Dom.generateId(el);
1289 child = this.element.firstChild;
1292 var fndHd = false, fndBd = false, fndFt = false;
1294 // We're looking for elements
1295 if (1 == child.nodeType) {
1296 if (!fndHd && Dom.hasClass(child, Module.CSS_HEADER)) {
1297 this.header = child;
1299 } else if (!fndBd && Dom.hasClass(child, Module.CSS_BODY)) {
1302 } else if (!fndFt && Dom.hasClass(child, Module.CSS_FOOTER)){
1303 this.footer = child;
1307 } while ((child = child.nextSibling));
1310 this.initDefaultConfig();
1312 Dom.addClass(this.element, Module.CSS_MODULE);
1315 this.cfg.applyConfig(userConfig, true);
1319 Subscribe to the fireQueue() method of Config so that any
1320 queued configuration changes are excecuted upon render of
1324 if (!Config.alreadySubscribed(this.renderEvent, this.cfg.fireQueue, this.cfg)) {
1325 this.renderEvent.subscribe(this.cfg.fireQueue, this.cfg, true);
1328 this.initEvent.fire(Module);
1332 * Initialize an empty IFRAME that is placed out of the visible area
1333 * that can be used to detect text resize.
1334 * @method initResizeMonitor
1336 initResizeMonitor: function () {
1338 var isGeckoWin = (UA.gecko && this.platform == "windows");
1340 // Help prevent spinning loading icon which
1341 // started with FireFox 2.0.0.8/Win
1343 setTimeout(function(){self._initResizeMonitor();}, 0);
1345 this._initResizeMonitor();
1350 * Create and initialize the text resize monitoring iframe.
1353 * @method _initResizeMonitor
1355 _initResizeMonitor : function() {
1361 function fireTextResize() {
1362 Module.textResizeEvent.fire();
1366 oIFrame = Dom.get("_yuiResizeMonitor");
1368 var supportsCWResize = this._supportsCWResize();
1371 oIFrame = document.createElement("iframe");
1373 if (this.isSecure && Module.RESIZE_MONITOR_SECURE_URL && UA.ie) {
1374 oIFrame.src = Module.RESIZE_MONITOR_SECURE_URL;
1377 if (!supportsCWResize) {
1378 // Can't monitor on contentWindow, so fire from inside iframe
1379 sHTML = ["<html><head><script ",
1380 "type=\"text/javascript\">",
1381 "window.onresize=function(){window.parent.",
1382 "YAHOO.widget.Module.textResizeEvent.",
1385 "<body></body></html>"].join('');
1387 oIFrame.src = "data:text/html;charset=utf-8," + encodeURIComponent(sHTML);
1390 oIFrame.id = "_yuiResizeMonitor";
1391 oIFrame.title = "Text Resize Monitor";
1393 Need to set "position" property before inserting the
1394 iframe into the document or Safari's status bar will
1395 forever indicate the iframe is loading
1396 (See SourceForge bug #1723064)
1398 oIFrame.style.position = "absolute";
1399 oIFrame.style.visibility = "hidden";
1401 var db = document.body,
1404 db.insertBefore(oIFrame, fc);
1406 db.appendChild(oIFrame);
1409 oIFrame.style.width = "2em";
1410 oIFrame.style.height = "2em";
1411 oIFrame.style.top = (-1 * (oIFrame.offsetHeight + Module.RESIZE_MONITOR_BUFFER)) + "px";
1412 oIFrame.style.left = "0";
1413 oIFrame.style.borderWidth = "0";
1414 oIFrame.style.visibility = "visible";
1417 Don't open/close the document for Gecko like we used to, since it
1418 leads to duplicate cookies. (See SourceForge bug #1721755)
1421 oDoc = oIFrame.contentWindow.document;
1427 if (oIFrame && oIFrame.contentWindow) {
1428 Module.textResizeEvent.subscribe(this.onDomResize, this, true);
1430 if (!Module.textResizeInitialized) {
1431 if (supportsCWResize) {
1432 if (!Event.on(oIFrame.contentWindow, "resize", fireTextResize)) {
1434 This will fail in IE if document.domain has
1435 changed, so we must change the listener to
1436 use the oIFrame element instead
1438 Event.on(oIFrame, "resize", fireTextResize);
1441 Module.textResizeInitialized = true;
1443 this.resizeMonitor = oIFrame;
1449 * Text resize monitor helper method.
1450 * Determines if the browser supports resize events on iframe content windows.
1453 * @method _supportsCWResize
1455 _supportsCWResize : function() {
1457 Gecko 1.8.0 (FF1.5), 1.8.1.0-5 (FF2) won't fire resize on contentWindow.
1458 Gecko 1.8.1.6+ (FF2.0.0.6+) and all other browsers will fire resize on contentWindow.
1460 We don't want to start sniffing for patch versions, so fire textResize the same
1461 way on all FF2 flavors
1463 var bSupported = true;
1464 if (UA.gecko && UA.gecko <= 1.8) {
1471 * Event handler fired when the resize monitor element is resized.
1472 * @method onDomResize
1473 * @param {DOMEvent} e The DOM resize event
1474 * @param {Object} obj The scope object passed to the handler
1476 onDomResize: function (e, obj) {
1478 var nTop = -1 * (this.resizeMonitor.offsetHeight + Module.RESIZE_MONITOR_BUFFER);
1480 this.resizeMonitor.style.top = nTop + "px";
1481 this.resizeMonitor.style.left = "0";
1485 * Sets the Module's header content to the string specified, or appends
1486 * the passed element to the header. If no header is present, one will
1487 * be automatically created. An empty string can be passed to the method
1488 * to clear the contents of the header.
1491 * @param {String} headerContent The string used to set the header.
1492 * As a convenience, non HTMLElement objects can also be passed into
1493 * the method, and will be treated as strings, with the header innerHTML
1494 * set to their default toString implementations.
1496 * @param {HTMLElement} headerContent The HTMLElement to append to
1498 * @param {DocumentFragment} headerContent The document fragment
1499 * containing elements which are to be added to the header
1501 setHeader: function (headerContent) {
1502 var oHeader = this.header || (this.header = createHeader());
1504 if (headerContent.nodeName) {
1505 oHeader.innerHTML = "";
1506 oHeader.appendChild(headerContent);
1508 oHeader.innerHTML = headerContent;
1511 this.changeHeaderEvent.fire(headerContent);
1512 this.changeContentEvent.fire();
1517 * Appends the passed element to the header. If no header is present,
1518 * one will be automatically created.
1519 * @method appendToHeader
1520 * @param {HTMLElement | DocumentFragment} element The element to
1521 * append to the header. In the case of a document fragment, the
1522 * children of the fragment will be appended to the header.
1524 appendToHeader: function (element) {
1525 var oHeader = this.header || (this.header = createHeader());
1527 oHeader.appendChild(element);
1529 this.changeHeaderEvent.fire(element);
1530 this.changeContentEvent.fire();
1535 * Sets the Module's body content to the HTML specified.
1537 * If no body is present, one will be automatically created.
1539 * An empty string can be passed to the method to clear the contents of the body.
1541 * @param {String} bodyContent The HTML used to set the body.
1542 * As a convenience, non HTMLElement objects can also be passed into
1543 * the method, and will be treated as strings, with the body innerHTML
1544 * set to their default toString implementations.
1546 * @param {HTMLElement} bodyContent The HTMLElement to add as the first and only
1547 * child of the body element.
1549 * @param {DocumentFragment} bodyContent The document fragment
1550 * containing elements which are to be added to the body
1552 setBody: function (bodyContent) {
1553 var oBody = this.body || (this.body = createBody());
1555 if (bodyContent.nodeName) {
1556 oBody.innerHTML = "";
1557 oBody.appendChild(bodyContent);
1559 oBody.innerHTML = bodyContent;
1562 this.changeBodyEvent.fire(bodyContent);
1563 this.changeContentEvent.fire();
1567 * Appends the passed element to the body. If no body is present, one
1568 * will be automatically created.
1569 * @method appendToBody
1570 * @param {HTMLElement | DocumentFragment} element The element to
1571 * append to the body. In the case of a document fragment, the
1572 * children of the fragment will be appended to the body.
1575 appendToBody: function (element) {
1576 var oBody = this.body || (this.body = createBody());
1578 oBody.appendChild(element);
1580 this.changeBodyEvent.fire(element);
1581 this.changeContentEvent.fire();
1586 * Sets the Module's footer content to the HTML specified, or appends
1587 * the passed element to the footer. If no footer is present, one will
1588 * be automatically created. An empty string can be passed to the method
1589 * to clear the contents of the footer.
1591 * @param {String} footerContent The HTML used to set the footer
1592 * As a convenience, non HTMLElement objects can also be passed into
1593 * the method, and will be treated as strings, with the footer innerHTML
1594 * set to their default toString implementations.
1596 * @param {HTMLElement} footerContent The HTMLElement to append to
1599 * @param {DocumentFragment} footerContent The document fragment containing
1600 * elements which are to be added to the footer
1602 setFooter: function (footerContent) {
1604 var oFooter = this.footer || (this.footer = createFooter());
1606 if (footerContent.nodeName) {
1607 oFooter.innerHTML = "";
1608 oFooter.appendChild(footerContent);
1610 oFooter.innerHTML = footerContent;
1613 this.changeFooterEvent.fire(footerContent);
1614 this.changeContentEvent.fire();
1618 * Appends the passed element to the footer. If no footer is present,
1619 * one will be automatically created.
1620 * @method appendToFooter
1621 * @param {HTMLElement | DocumentFragment} element The element to
1622 * append to the footer. In the case of a document fragment, the
1623 * children of the fragment will be appended to the footer
1625 appendToFooter: function (element) {
1627 var oFooter = this.footer || (this.footer = createFooter());
1629 oFooter.appendChild(element);
1631 this.changeFooterEvent.fire(element);
1632 this.changeContentEvent.fire();
1637 * Renders the Module by inserting the elements that are not already
1638 * in the main Module into their correct places. Optionally appends
1639 * the Module to the specified node prior to the render's execution.
1641 * For Modules without existing markup, the appendToNode argument
1642 * is REQUIRED. If this argument is ommitted and the current element is
1643 * not present in the document, the function will return false,
1644 * indicating that the render was a failure.
1647 * NOTE: As of 2.3.1, if the appendToNode is the document's body element
1648 * then the module is rendered as the first child of the body element,
1649 * and not appended to it, to avoid Operation Aborted errors in IE when
1650 * rendering the module before window's load event is fired. You can
1651 * use the appendtodocumentbody configuration property to change this
1652 * to append to document.body if required.
1655 * @param {String} appendToNode The element id to which the Module
1656 * should be appended to prior to rendering <em>OR</em>
1657 * @param {HTMLElement} appendToNode The element to which the Module
1658 * should be appended to prior to rendering
1659 * @param {HTMLElement} moduleElement OPTIONAL. The element that
1660 * represents the actual Standard Module container.
1661 * @return {Boolean} Success or failure of the render
1663 render: function (appendToNode, moduleElement) {
1668 function appendTo(parentNode) {
1669 if (typeof parentNode == "string") {
1670 parentNode = document.getElementById(parentNode);
1674 me._addToParent(parentNode, me.element);
1675 me.appendEvent.fire();
1679 this.beforeRenderEvent.fire();
1681 if (! moduleElement) {
1682 moduleElement = this.element;
1686 appendTo(appendToNode);
1688 // No node was passed in. If the element is not already in the Dom, this fails
1689 if (! Dom.inDocument(this.element)) {
1694 // Need to get everything into the DOM if it isn't already
1695 if (this.header && ! Dom.inDocument(this.header)) {
1696 // There is a header, but it's not in the DOM yet. Need to add it.
1697 firstChild = moduleElement.firstChild;
1699 moduleElement.insertBefore(this.header, firstChild);
1701 moduleElement.appendChild(this.header);
1705 if (this.body && ! Dom.inDocument(this.body)) {
1706 // There is a body, but it's not in the DOM yet. Need to add it.
1707 if (this.footer && Dom.isAncestor(this.moduleElement, this.footer)) {
1708 moduleElement.insertBefore(this.body, this.footer);
1710 moduleElement.appendChild(this.body);
1714 if (this.footer && ! Dom.inDocument(this.footer)) {
1715 // There is a footer, but it's not in the DOM yet. Need to add it.
1716 moduleElement.appendChild(this.footer);
1719 this.renderEvent.fire();
1724 * Removes the Module element from the DOM and sets all child elements
1728 destroy: function () {
1733 Event.purgeElement(this.element, true);
1734 parent = this.element.parentNode;
1738 parent.removeChild(this.element);
1741 this.element = null;
1746 Module.textResizeEvent.unsubscribe(this.onDomResize, this);
1751 this.destroyEvent.fire();
1755 * Shows the Module element by setting the visible configuration
1756 * property to true. Also fires two events: beforeShowEvent prior to
1757 * the visibility change, and showEvent after.
1761 this.cfg.setProperty("visible", true);
1765 * Hides the Module element by setting the visible configuration
1766 * property to false. Also fires two events: beforeHideEvent prior to
1767 * the visibility change, and hideEvent after.
1771 this.cfg.setProperty("visible", false);
1774 // BUILT-IN EVENT HANDLERS FOR MODULE //
1776 * Default event handler for changing the visibility property of a
1777 * Module. By default, this is achieved by switching the "display" style
1778 * between "block" and "none".
1779 * This method is responsible for firing showEvent and hideEvent.
1780 * @param {String} type The CustomEvent type (usually the property name)
1781 * @param {Object[]} args The CustomEvent arguments. For configuration
1782 * handlers, args[0] will equal the newly applied value for the property.
1783 * @param {Object} obj The scope object. For configuration handlers,
1784 * this will usually equal the owner.
1785 * @method configVisible
1787 configVisible: function (type, args, obj) {
1788 var visible = args[0];
1790 this.beforeShowEvent.fire();
1791 Dom.setStyle(this.element, "display", "block");
1792 this.showEvent.fire();
1794 this.beforeHideEvent.fire();
1795 Dom.setStyle(this.element, "display", "none");
1796 this.hideEvent.fire();
1801 * Default event handler for the "monitorresize" configuration property
1802 * @param {String} type The CustomEvent type (usually the property name)
1803 * @param {Object[]} args The CustomEvent arguments. For configuration
1804 * handlers, args[0] will equal the newly applied value for the property.
1805 * @param {Object} obj The scope object. For configuration handlers,
1806 * this will usually equal the owner.
1807 * @method configMonitorResize
1809 configMonitorResize: function (type, args, obj) {
1810 var monitor = args[0];
1812 this.initResizeMonitor();
1814 Module.textResizeEvent.unsubscribe(this.onDomResize, this, true);
1815 this.resizeMonitor = null;
1820 * This method is a protected helper, used when constructing the DOM structure for the module
1821 * to account for situations which may cause Operation Aborted errors in IE. It should not
1822 * be used for general DOM construction.
1824 * If the parentNode is not document.body, the element is appended as the last element.
1827 * If the parentNode is document.body the element is added as the first child to help
1828 * prevent Operation Aborted errors in IE.
1831 * @param {parentNode} The HTML element to which the element will be added
1832 * @param {element} The HTML element to be added to parentNode's children
1833 * @method _addToParent
1836 _addToParent: function(parentNode, element) {
1837 if (!this.cfg.getProperty("appendtodocumentbody") && parentNode === document.body && parentNode.firstChild) {
1838 parentNode.insertBefore(element, parentNode.firstChild);
1840 parentNode.appendChild(element);
1845 * Returns a String representation of the Object.
1847 * @return {String} The string representation of the Module
1849 toString: function () {
1850 return "Module " + this.id;
1854 YAHOO.lang.augmentProto(Module, YAHOO.util.EventProvider);
1861 * Overlay is a Module that is absolutely positioned above the page flow. It
1862 * has convenience methods for positioning and sizing, as well as options for
1863 * controlling zIndex and constraining the Overlay's position to the current
1864 * visible viewport. Overlay also contains a dynamicly generated IFRAME which
1865 * is placed beneath it for Internet Explorer 6 and 5.x so that it will be
1866 * properly rendered above SELECT elements.
1867 * @namespace YAHOO.widget
1869 * @extends YAHOO.widget.Module
1870 * @param {String} el The element ID representing the Overlay <em>OR</em>
1871 * @param {HTMLElement} el The element representing the Overlay
1872 * @param {Object} userConfig The configuration object literal containing
1873 * the configuration that should be set for this Overlay. See configuration
1874 * documentation for more details.
1877 YAHOO.widget.Overlay = function (el, userConfig) {
1878 YAHOO.widget.Overlay.superclass.constructor.call(this, el, userConfig);
1881 var Lang = YAHOO.lang,
1882 CustomEvent = YAHOO.util.CustomEvent,
1883 Module = YAHOO.widget.Module,
1884 Event = YAHOO.util.Event,
1885 Dom = YAHOO.util.Dom,
1886 Config = YAHOO.util.Config,
1888 Overlay = YAHOO.widget.Overlay,
1890 _SUBSCRIBE = "subscribe",
1891 _UNSUBSCRIBE = "unsubscribe",
1892 _CONTAINED = "contained",
1897 * Constant representing the name of the Overlay's events
1898 * @property EVENT_TYPES
1904 "BEFORE_MOVE": "beforeMove",
1909 * Constant representing the Overlay's configuration properties
1910 * @property DEFAULT_CONFIG
1919 validator: Lang.isNumber,
1920 suppressEvent: true,
1921 supercedes: ["iframe"]
1926 validator: Lang.isNumber,
1927 suppressEvent: true,
1928 supercedes: ["iframe"]
1933 suppressEvent: true,
1934 supercedes: ["iframe"]
1939 suppressEvent: true,
1940 supercedes: ["iframe"]
1946 supercedes: ["iframe", "visible"]
1951 suppressEvent: true,
1952 supercedes: ["context", "fixedcenter", "iframe"]
1957 suppressEvent: true,
1958 supercedes: ["context", "fixedcenter", "iframe"]
1961 "AUTO_FILL_HEIGHT" : {
1962 key: "autofillheight",
1963 supercedes: ["height"],
1972 "CONSTRAIN_TO_VIEWPORT": {
1973 key: "constraintoviewport",
1975 validator: Lang.isBoolean,
1976 supercedes: ["iframe", "x", "y", "xy"]
1981 value: (UA.ie == 6 ? true : false),
1982 validator: Lang.isBoolean,
1983 supercedes: ["zindex"]
1986 "PREVENT_CONTEXT_OVERLAP": {
1987 key: "preventcontextoverlap",
1989 validator: Lang.isBoolean,
1990 supercedes: ["constraintoviewport"]
1996 * The URL that will be placed in the iframe
1997 * @property YAHOO.widget.Overlay.IFRAME_SRC
2002 Overlay.IFRAME_SRC = "javascript:false;";
2005 * Number representing how much the iframe shim should be offset from each
2006 * side of an Overlay instance, in pixels.
2007 * @property YAHOO.widget.Overlay.IFRAME_SRC
2013 Overlay.IFRAME_OFFSET = 3;
2016 * Number representing the minimum distance an Overlay instance should be
2017 * positioned relative to the boundaries of the browser's viewport, in pixels.
2018 * @property YAHOO.widget.Overlay.VIEWPORT_OFFSET
2024 Overlay.VIEWPORT_OFFSET = 10;
2027 * Constant representing the top left corner of an element, used for
2028 * configuring the context element alignment
2029 * @property YAHOO.widget.Overlay.TOP_LEFT
2034 Overlay.TOP_LEFT = "tl";
2037 * Constant representing the top right corner of an element, used for
2038 * configuring the context element alignment
2039 * @property YAHOO.widget.Overlay.TOP_RIGHT
2044 Overlay.TOP_RIGHT = "tr";
2047 * Constant representing the top bottom left corner of an element, used for
2048 * configuring the context element alignment
2049 * @property YAHOO.widget.Overlay.BOTTOM_LEFT
2054 Overlay.BOTTOM_LEFT = "bl";
2057 * Constant representing the bottom right corner of an element, used for
2058 * configuring the context element alignment
2059 * @property YAHOO.widget.Overlay.BOTTOM_RIGHT
2064 Overlay.BOTTOM_RIGHT = "br";
2067 * Constant representing the default CSS class used for an Overlay
2068 * @property YAHOO.widget.Overlay.CSS_OVERLAY
2073 Overlay.CSS_OVERLAY = "yui-overlay";
2076 * Constant representing the names of the standard module elements
2077 * used in the overlay.
2078 * @property YAHOO.widget.Overlay.STD_MOD_RE
2083 Overlay.STD_MOD_RE = /^\s*?(body|footer|header)\s*?$/i;
2086 * A singleton CustomEvent used for reacting to the DOM event for
2088 * @event YAHOO.widget.Overlay.windowScrollEvent
2090 Overlay.windowScrollEvent = new CustomEvent("windowScroll");
2093 * A singleton CustomEvent used for reacting to the DOM event for
2095 * @event YAHOO.widget.Overlay.windowResizeEvent
2097 Overlay.windowResizeEvent = new CustomEvent("windowResize");
2100 * The DOM event handler used to fire the CustomEvent for window scroll
2101 * @method YAHOO.widget.Overlay.windowScrollHandler
2103 * @param {DOMEvent} e The DOM scroll event
2105 Overlay.windowScrollHandler = function (e) {
2106 var t = Event.getTarget(e);
2108 // - Webkit (Safari 2/3) and Opera 9.2x bubble scroll events from elements to window
2109 // - FF2/3 and IE6/7, Opera 9.5x don't bubble scroll events from elements to window
2110 // - IE doesn't recognize scroll registered on the document.
2112 // Also, when document view is scrolled, IE doesn't provide a target,
2113 // rest of the browsers set target to window.document, apart from opera
2114 // which sets target to window.
2115 if (!t || t === window || t === window.document) {
2118 if (! window.scrollEnd) {
2119 window.scrollEnd = -1;
2122 clearTimeout(window.scrollEnd);
2124 window.scrollEnd = setTimeout(function () {
2125 Overlay.windowScrollEvent.fire();
2129 Overlay.windowScrollEvent.fire();
2135 * The DOM event handler used to fire the CustomEvent for window resize
2136 * @method YAHOO.widget.Overlay.windowResizeHandler
2138 * @param {DOMEvent} e The DOM resize event
2140 Overlay.windowResizeHandler = function (e) {
2143 if (! window.resizeEnd) {
2144 window.resizeEnd = -1;
2147 clearTimeout(window.resizeEnd);
2149 window.resizeEnd = setTimeout(function () {
2150 Overlay.windowResizeEvent.fire();
2153 Overlay.windowResizeEvent.fire();
2158 * A boolean that indicated whether the window resize and scroll events have
2159 * already been subscribed to.
2160 * @property YAHOO.widget.Overlay._initialized
2164 Overlay._initialized = null;
2166 if (Overlay._initialized === null) {
2167 Event.on(window, "scroll", Overlay.windowScrollHandler);
2168 Event.on(window, "resize", Overlay.windowResizeHandler);
2169 Overlay._initialized = true;
2173 * Internal map of special event types, which are provided
2174 * by the instance. It maps the event type to the custom event
2175 * instance. Contains entries for the "windowScroll", "windowResize" and
2176 * "textResize" static container events.
2178 * @property YAHOO.widget.Overlay._TRIGGER_MAP
2183 Overlay._TRIGGER_MAP = {
2184 "windowScroll" : Overlay.windowScrollEvent,
2185 "windowResize" : Overlay.windowResizeEvent,
2186 "textResize" : Module.textResizeEvent
2189 YAHOO.extend(Overlay, Module, {
2193 * Array of default event types which will trigger
2194 * context alignment for the Overlay class.
2196 * <p>The array is empty by default for Overlay,
2197 * but maybe populated in future releases, so classes extending
2198 * Overlay which need to define their own set of CONTEXT_TRIGGERS
2199 * should concatenate their super class's prototype.CONTEXT_TRIGGERS
2200 * value with their own array of values.
2204 * <code>CustomOverlay.prototype.CONTEXT_TRIGGERS = YAHOO.widget.Overlay.prototype.CONTEXT_TRIGGERS.concat(["windowScroll"]);</code>
2207 * @property CONTEXT_TRIGGERS
2211 CONTEXT_TRIGGERS : [],
2214 * The Overlay initialization method, which is executed for Overlay and
2215 * all of its subclasses. This method is automatically called by the
2216 * constructor, and sets up all DOM references for pre-existing markup,
2217 * and creates required markup if it is not already present.
2219 * @param {String} el The element ID representing the Overlay <em>OR</em>
2220 * @param {HTMLElement} el The element representing the Overlay
2221 * @param {Object} userConfig The configuration object literal
2222 * containing the configuration that should be set for this Overlay.
2223 * See configuration documentation for more details.
2225 init: function (el, userConfig) {
2228 Note that we don't pass the user config in here yet because we
2229 only want it executed once, at the lowest subclass level
2232 Overlay.superclass.init.call(this, el/*, userConfig*/);
2234 this.beforeInitEvent.fire(Overlay);
2236 Dom.addClass(this.element, Overlay.CSS_OVERLAY);
2239 this.cfg.applyConfig(userConfig, true);
2242 if (this.platform == "mac" && UA.gecko) {
2244 if (! Config.alreadySubscribed(this.showEvent,
2245 this.showMacGeckoScrollbars, this)) {
2247 this.showEvent.subscribe(this.showMacGeckoScrollbars,
2252 if (! Config.alreadySubscribed(this.hideEvent,
2253 this.hideMacGeckoScrollbars, this)) {
2255 this.hideEvent.subscribe(this.hideMacGeckoScrollbars,
2261 this.initEvent.fire(Overlay);
2265 * Initializes the custom events for Overlay which are fired
2266 * automatically at appropriate times by the Overlay class.
2267 * @method initEvents
2269 initEvents: function () {
2271 Overlay.superclass.initEvents.call(this);
2273 var SIGNATURE = CustomEvent.LIST;
2276 * CustomEvent fired before the Overlay is moved.
2277 * @event beforeMoveEvent
2278 * @param {Number} x x coordinate
2279 * @param {Number} y y coordinate
2281 this.beforeMoveEvent = this.createEvent(EVENT_TYPES.BEFORE_MOVE);
2282 this.beforeMoveEvent.signature = SIGNATURE;
2285 * CustomEvent fired after the Overlay is moved.
2287 * @param {Number} x x coordinate
2288 * @param {Number} y y coordinate
2290 this.moveEvent = this.createEvent(EVENT_TYPES.MOVE);
2291 this.moveEvent.signature = SIGNATURE;
2296 * Initializes the class's configurable properties which can be changed
2297 * using the Overlay's Config object (cfg).
2298 * @method initDefaultConfig
2300 initDefaultConfig: function () {
2302 Overlay.superclass.initDefaultConfig.call(this);
2306 // Add overlay config properties //
2309 * The absolute x-coordinate position of the Overlay
2314 cfg.addProperty(DEFAULT_CONFIG.X.key, {
2316 handler: this.configX,
2317 validator: DEFAULT_CONFIG.X.validator,
2318 suppressEvent: DEFAULT_CONFIG.X.suppressEvent,
2319 supercedes: DEFAULT_CONFIG.X.supercedes
2324 * The absolute y-coordinate position of the Overlay
2329 cfg.addProperty(DEFAULT_CONFIG.Y.key, {
2331 handler: this.configY,
2332 validator: DEFAULT_CONFIG.Y.validator,
2333 suppressEvent: DEFAULT_CONFIG.Y.suppressEvent,
2334 supercedes: DEFAULT_CONFIG.Y.supercedes
2339 * An array with the absolute x and y positions of the Overlay
2344 cfg.addProperty(DEFAULT_CONFIG.XY.key, {
2345 handler: this.configXY,
2346 suppressEvent: DEFAULT_CONFIG.XY.suppressEvent,
2347 supercedes: DEFAULT_CONFIG.XY.supercedes
2352 * The array of context arguments for context-sensitive positioning.
2356 * The format of the array is: <code>[contextElementOrId, overlayCorner, contextCorner, arrayOfTriggerEvents (optional)]</code>, the
2357 * the 4 array elements described in detail below:
2361 * <dt>contextElementOrId <String|HTMLElement></dt>
2362 * <dd>A reference to the context element to which the overlay should be aligned (or it's id).</dd>
2363 * <dt>overlayCorner <String></dt>
2364 * <dd>The corner of the overlay which is to be used for alignment. This corner will be aligned to the
2365 * corner of the context element defined by the "contextCorner" entry which follows. Supported string values are:
2366 * "tr" (top right), "tl" (top left), "br" (bottom right), or "bl" (bottom left).</dd>
2367 * <dt>contextCorner <String></dt>
2368 * <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>
2369 * <dt>arrayOfTriggerEvents (optional) <Array[String|CustomEvent]></dt>
2372 * 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>
2373 * 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.
2374 * This is useful in situations where the layout of the document may change, resulting in the context element's position being modified.
2377 * The array can contain either event type strings for events the instance publishes (e.g. "beforeShow") or CustomEvent instances. Additionally the following
2378 * 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).
2384 * For example, setting this property to <code>["img1", "tl", "bl"]</code> will
2385 * align the Overlay's top left corner to the bottom left corner of the
2386 * context element with id "img1".
2389 * Adding the optional trigger values: <code>["img1", "tl", "bl", ["beforeShow", "windowResize"]]</code>,
2390 * will re-align the overlay position, whenever the "beforeShow" or "windowResize" events are fired.
2397 cfg.addProperty(DEFAULT_CONFIG.CONTEXT.key, {
2398 handler: this.configContext,
2399 suppressEvent: DEFAULT_CONFIG.CONTEXT.suppressEvent,
2400 supercedes: DEFAULT_CONFIG.CONTEXT.supercedes
2404 * Determines whether or not the Overlay should be anchored
2405 * to the center of the viewport.
2407 * <p>This property can be set to:</p>
2412 * To enable fixed center positioning
2414 * When enabled, the overlay will
2415 * be positioned in the center of viewport when initially displayed, and
2416 * will remain in the center of the viewport whenever the window is
2417 * scrolled or resized.
2420 * If the overlay is too big for the viewport,
2421 * it's top left corner will be aligned with the top left corner of the viewport.
2426 * To disable fixed center positioning.
2427 * <p>In this case the overlay can still be
2428 * centered as a one-off operation, by invoking the <code>center()</code> method,
2429 * however it will not remain centered when the window is scrolled/resized.
2431 * <dt>"contained"<dt>
2432 * <dd>To enable fixed center positioning, as with the <code>true</code> option.
2433 * <p>However, unlike setting the property to <code>true</code>,
2434 * when the property is set to <code>"contained"</code>, if the overlay is
2435 * too big for the viewport, it will not get automatically centered when the
2436 * user scrolls or resizes the window (until the window is large enough to contain the
2437 * overlay). This is useful in cases where the Overlay has both header and footer
2438 * UI controls which the user may need to access.
2443 * @config fixedcenter
2444 * @type Boolean | String
2447 cfg.addProperty(DEFAULT_CONFIG.FIXED_CENTER.key, {
2448 handler: this.configFixedCenter,
2449 value: DEFAULT_CONFIG.FIXED_CENTER.value,
2450 validator: DEFAULT_CONFIG.FIXED_CENTER.validator,
2451 supercedes: DEFAULT_CONFIG.FIXED_CENTER.supercedes
2455 * CSS width of the Overlay.
2460 cfg.addProperty(DEFAULT_CONFIG.WIDTH.key, {
2461 handler: this.configWidth,
2462 suppressEvent: DEFAULT_CONFIG.WIDTH.suppressEvent,
2463 supercedes: DEFAULT_CONFIG.WIDTH.supercedes
2467 * CSS height of the Overlay.
2472 cfg.addProperty(DEFAULT_CONFIG.HEIGHT.key, {
2473 handler: this.configHeight,
2474 suppressEvent: DEFAULT_CONFIG.HEIGHT.suppressEvent,
2475 supercedes: DEFAULT_CONFIG.HEIGHT.supercedes
2479 * Standard module element which should auto fill out the height of the Overlay if the height config property is set.
2480 * Supported values are "header", "body", "footer".
2482 * @config autofillheight
2486 cfg.addProperty(DEFAULT_CONFIG.AUTO_FILL_HEIGHT.key, {
2487 handler: this.configAutoFillHeight,
2488 value : DEFAULT_CONFIG.AUTO_FILL_HEIGHT.value,
2489 validator : this._validateAutoFill,
2490 supercedes: DEFAULT_CONFIG.AUTO_FILL_HEIGHT.supercedes
2494 * CSS z-index of the Overlay.
2499 cfg.addProperty(DEFAULT_CONFIG.ZINDEX.key, {
2500 handler: this.configzIndex,
2501 value: DEFAULT_CONFIG.ZINDEX.value
2505 * True if the Overlay should be prevented from being positioned
2506 * out of the viewport.
2507 * @config constraintoviewport
2511 cfg.addProperty(DEFAULT_CONFIG.CONSTRAIN_TO_VIEWPORT.key, {
2513 handler: this.configConstrainToViewport,
2514 value: DEFAULT_CONFIG.CONSTRAIN_TO_VIEWPORT.value,
2515 validator: DEFAULT_CONFIG.CONSTRAIN_TO_VIEWPORT.validator,
2516 supercedes: DEFAULT_CONFIG.CONSTRAIN_TO_VIEWPORT.supercedes
2522 * @description Boolean indicating whether or not the Overlay should
2523 * have an IFRAME shim; used to prevent SELECT elements from
2524 * poking through an Overlay instance in IE6. When set to "true",
2525 * the iframe shim is created when the Overlay instance is intially
2528 * @default true for IE6 and below, false for all other browsers.
2530 cfg.addProperty(DEFAULT_CONFIG.IFRAME.key, {
2532 handler: this.configIframe,
2533 value: DEFAULT_CONFIG.IFRAME.value,
2534 validator: DEFAULT_CONFIG.IFRAME.validator,
2535 supercedes: DEFAULT_CONFIG.IFRAME.supercedes
2540 * @config preventcontextoverlap
2541 * @description Boolean indicating whether or not the Overlay should overlap its
2542 * context element (defined using the "context" configuration property) when the
2543 * "constraintoviewport" configuration property is set to "true".
2547 cfg.addProperty(DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.key, {
2549 value: DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.value,
2550 validator: DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.validator,
2551 supercedes: DEFAULT_CONFIG.PREVENT_CONTEXT_OVERLAP.supercedes
2558 * Moves the Overlay to the specified position. This function is
2559 * identical to calling this.cfg.setProperty("xy", [x,y]);
2561 * @param {Number} x The Overlay's new x position
2562 * @param {Number} y The Overlay's new y position
2564 moveTo: function (x, y) {
2565 this.cfg.setProperty("xy", [x, y]);
2569 * Adds a CSS class ("hide-scrollbars") and removes a CSS class
2570 * ("show-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X
2571 * (https://bugzilla.mozilla.org/show_bug.cgi?id=187435)
2572 * @method hideMacGeckoScrollbars
2574 hideMacGeckoScrollbars: function () {
2575 Dom.replaceClass(this.element, "show-scrollbars", "hide-scrollbars");
2579 * Adds a CSS class ("show-scrollbars") and removes a CSS class
2580 * ("hide-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X
2581 * (https://bugzilla.mozilla.org/show_bug.cgi?id=187435)
2582 * @method showMacGeckoScrollbars
2584 showMacGeckoScrollbars: function () {
2585 Dom.replaceClass(this.element, "hide-scrollbars", "show-scrollbars");
2589 * Internal implementation to set the visibility of the overlay in the DOM.
2591 * @method _setDomVisibility
2592 * @param {boolean} visible Whether to show or hide the Overlay's outer element
2595 _setDomVisibility : function(show) {
2596 Dom.setStyle(this.element, "visibility", (show) ? "visible" : "hidden");
2599 Dom.removeClass(this.element, "yui-overlay-hidden");
2601 Dom.addClass(this.element, "yui-overlay-hidden");
2605 // BEGIN BUILT-IN PROPERTY EVENT HANDLERS //
2607 * The default event handler fired when the "visible" property is
2608 * changed. This method is responsible for firing showEvent
2610 * @method configVisible
2611 * @param {String} type The CustomEvent type (usually the property name)
2612 * @param {Object[]} args The CustomEvent arguments. For configuration
2613 * handlers, args[0] will equal the newly applied value for the property.
2614 * @param {Object} obj The scope object. For configuration handlers,
2615 * this will usually equal the owner.
2617 configVisible: function (type, args, obj) {
2619 var visible = args[0],
2620 currentVis = Dom.getStyle(this.element, "visibility"),
2621 effect = this.cfg.getProperty("effect"),
2622 effectInstances = [],
2623 isMacGecko = (this.platform == "mac" && UA.gecko),
2624 alreadySubscribed = Config.alreadySubscribed,
2625 eff, ei, e, i, j, k, h,
2629 if (currentVis == "inherit") {
2630 e = this.element.parentNode;
2632 while (e.nodeType != 9 && e.nodeType != 11) {
2633 currentVis = Dom.getStyle(e, "visibility");
2635 if (currentVis != "inherit") {
2642 if (currentVis == "inherit") {
2643 currentVis = "visible";
2648 if (effect instanceof Array) {
2649 nEffects = effect.length;
2651 for (i = 0; i < nEffects; i++) {
2653 effectInstances[effectInstances.length] =
2654 eff.effect(this, eff.duration);
2658 effectInstances[effectInstances.length] =
2659 effect.effect(this, effect.duration);
2663 if (visible) { // Show
2665 this.showMacGeckoScrollbars();
2668 if (effect) { // Animate in
2669 if (visible) { // Animate in if not showing
2670 if (currentVis != "visible" || currentVis === "") {
2671 this.beforeShowEvent.fire();
2672 nEffectInstances = effectInstances.length;
2674 for (j = 0; j < nEffectInstances; j++) {
2675 ei = effectInstances[j];
2676 if (j === 0 && !alreadySubscribed(
2677 ei.animateInCompleteEvent,
2678 this.showEvent.fire, this.showEvent)) {
2681 Delegate showEvent until end
2682 of animateInComplete
2685 ei.animateInCompleteEvent.subscribe(
2686 this.showEvent.fire, this.showEvent, true);
2693 if (currentVis != "visible" || currentVis === "") {
2694 this.beforeShowEvent.fire();
2696 this._setDomVisibility(true);
2698 this.cfg.refireEvent("iframe");
2699 this.showEvent.fire();
2701 this._setDomVisibility(true);
2707 this.hideMacGeckoScrollbars();
2710 if (effect) { // Animate out if showing
2711 if (currentVis == "visible") {
2712 this.beforeHideEvent.fire();
2714 nEffectInstances = effectInstances.length;
2715 for (k = 0; k < nEffectInstances; k++) {
2716 h = effectInstances[k];
2718 if (k === 0 && !alreadySubscribed(
2719 h.animateOutCompleteEvent, this.hideEvent.fire,
2723 Delegate hideEvent until end
2724 of animateOutComplete
2727 h.animateOutCompleteEvent.subscribe(
2728 this.hideEvent.fire, this.hideEvent, true);
2734 } else if (currentVis === "") {
2735 this._setDomVisibility(false);
2738 } else { // Simple hide
2740 if (currentVis == "visible" || currentVis === "") {
2741 this.beforeHideEvent.fire();
2742 this._setDomVisibility(false);
2743 this.hideEvent.fire();
2745 this._setDomVisibility(false);
2752 * Fixed center event handler used for centering on scroll/resize, but only if
2753 * the overlay is visible and, if "fixedcenter" is set to "contained", only if
2754 * the overlay fits within the viewport.
2756 * @method doCenterOnDOMEvent
2758 doCenterOnDOMEvent: function () {
2760 fc = cfg.getProperty("fixedcenter");
2762 if (cfg.getProperty("visible")) {
2763 if (fc && (fc !== _CONTAINED || this.fitsInViewport())) {
2770 * Determines if the Overlay (including the offset value defined by Overlay.VIEWPORT_OFFSET)
2771 * will fit entirely inside the viewport, in both dimensions - width and height.
2773 * @method fitsInViewport
2774 * @return boolean true if the Overlay will fit, false if not
2776 fitsInViewport : function() {
2777 var nViewportOffset = Overlay.VIEWPORT_OFFSET,
2778 element = this.element,
2779 elementWidth = element.offsetWidth,
2780 elementHeight = element.offsetHeight,
2781 viewportWidth = Dom.getViewportWidth(),
2782 viewportHeight = Dom.getViewportHeight();
2784 return ((elementWidth + nViewportOffset < viewportWidth) && (elementHeight + nViewportOffset < viewportHeight));
2788 * The default event handler fired when the "fixedcenter" property
2790 * @method configFixedCenter
2791 * @param {String} type The CustomEvent type (usually the property name)
2792 * @param {Object[]} args The CustomEvent arguments. For configuration
2793 * handlers, args[0] will equal the newly applied value for the property.
2794 * @param {Object} obj The scope object. For configuration handlers,
2795 * this will usually equal the owner.
2797 configFixedCenter: function (type, args, obj) {
2800 alreadySubscribed = Config.alreadySubscribed,
2801 windowResizeEvent = Overlay.windowResizeEvent,
2802 windowScrollEvent = Overlay.windowScrollEvent;
2807 if (!alreadySubscribed(this.beforeShowEvent, this.center)) {
2808 this.beforeShowEvent.subscribe(this.center);
2811 if (!alreadySubscribed(windowResizeEvent, this.doCenterOnDOMEvent, this)) {
2812 windowResizeEvent.subscribe(this.doCenterOnDOMEvent, this, true);
2815 if (!alreadySubscribed(windowScrollEvent, this.doCenterOnDOMEvent, this)) {
2816 windowScrollEvent.subscribe(this.doCenterOnDOMEvent, this, true);
2820 this.beforeShowEvent.unsubscribe(this.center);
2822 windowResizeEvent.unsubscribe(this.doCenterOnDOMEvent, this);
2823 windowScrollEvent.unsubscribe(this.doCenterOnDOMEvent, this);
2828 * The default event handler fired when the "height" property is changed.
2829 * @method configHeight
2830 * @param {String} type The CustomEvent type (usually the property name)
2831 * @param {Object[]} args The CustomEvent arguments. For configuration
2832 * handlers, args[0] will equal the newly applied value for the property.
2833 * @param {Object} obj The scope object. For configuration handlers,
2834 * this will usually equal the owner.
2836 configHeight: function (type, args, obj) {
2838 var height = args[0],
2841 Dom.setStyle(el, "height", height);
2842 this.cfg.refireEvent("iframe");
2846 * The default event handler fired when the "autofillheight" property is changed.
2847 * @method configAutoFillHeight
2849 * @param {String} type The CustomEvent type (usually the property name)
2850 * @param {Object[]} args The CustomEvent arguments. For configuration
2851 * handlers, args[0] will equal the newly applied value for the property.
2852 * @param {Object} obj The scope object. For configuration handlers,
2853 * this will usually equal the owner.
2855 configAutoFillHeight: function (type, args, obj) {
2856 var fillEl = args[0],
2858 autoFillHeight = "autofillheight",
2860 currEl = cfg.getProperty(autoFillHeight),
2861 autoFill = this._autoFillOnHeightChange;
2863 cfg.unsubscribeFromConfigEvent(height, autoFill);
2864 Module.textResizeEvent.unsubscribe(autoFill);
2865 this.changeContentEvent.unsubscribe(autoFill);
2867 if (currEl && fillEl !== currEl && this[currEl]) {
2868 Dom.setStyle(this[currEl], height, "");
2872 fillEl = Lang.trim(fillEl.toLowerCase());
2874 cfg.subscribeToConfigEvent(height, autoFill, this[fillEl], this);
2875 Module.textResizeEvent.subscribe(autoFill, this[fillEl], this);
2876 this.changeContentEvent.subscribe(autoFill, this[fillEl], this);
2878 cfg.setProperty(autoFillHeight, fillEl, true);
2883 * The default event handler fired when the "width" property is changed.
2884 * @method configWidth
2885 * @param {String} type The CustomEvent type (usually the property name)
2886 * @param {Object[]} args The CustomEvent arguments. For configuration
2887 * handlers, args[0] will equal the newly applied value for the property.
2888 * @param {Object} obj The scope object. For configuration handlers,
2889 * this will usually equal the owner.
2891 configWidth: function (type, args, obj) {
2893 var width = args[0],
2896 Dom.setStyle(el, "width", width);
2897 this.cfg.refireEvent("iframe");
2901 * The default event handler fired when the "zIndex" property is changed.
2902 * @method configzIndex
2903 * @param {String} type The CustomEvent type (usually the property name)
2904 * @param {Object[]} args The CustomEvent arguments. For configuration
2905 * handlers, args[0] will equal the newly applied value for the property.
2906 * @param {Object} obj The scope object. For configuration handlers,
2907 * this will usually equal the owner.
2909 configzIndex: function (type, args, obj) {
2911 var zIndex = args[0],
2915 zIndex = Dom.getStyle(el, "zIndex");
2916 if (! zIndex || isNaN(zIndex)) {
2921 if (this.iframe || this.cfg.getProperty("iframe") === true) {
2927 Dom.setStyle(el, "zIndex", zIndex);
2928 this.cfg.setProperty("zIndex", zIndex, true);
2936 * The default event handler fired when the "xy" property is changed.
2938 * @param {String} type The CustomEvent type (usually the property name)
2939 * @param {Object[]} args The CustomEvent arguments. For configuration
2940 * handlers, args[0] will equal the newly applied value for the property.
2941 * @param {Object} obj The scope object. For configuration handlers,
2942 * this will usually equal the owner.
2944 configXY: function (type, args, obj) {
2950 this.cfg.setProperty("x", x);
2951 this.cfg.setProperty("y", y);
2953 this.beforeMoveEvent.fire([x, y]);
2955 x = this.cfg.getProperty("x");
2956 y = this.cfg.getProperty("y");
2959 this.cfg.refireEvent("iframe");
2960 this.moveEvent.fire([x, y]);
2964 * The default event handler fired when the "x" property is changed.
2966 * @param {String} type The CustomEvent type (usually the property name)
2967 * @param {Object[]} args The CustomEvent arguments. For configuration
2968 * handlers, args[0] will equal the newly applied value for the property.
2969 * @param {Object} obj The scope object. For configuration handlers,
2970 * this will usually equal the owner.
2972 configX: function (type, args, obj) {
2975 y = this.cfg.getProperty("y");
2977 this.cfg.setProperty("x", x, true);
2978 this.cfg.setProperty("y", y, true);
2980 this.beforeMoveEvent.fire([x, y]);
2982 x = this.cfg.getProperty("x");
2983 y = this.cfg.getProperty("y");
2985 Dom.setX(this.element, x, true);
2987 this.cfg.setProperty("xy", [x, y], true);
2989 this.cfg.refireEvent("iframe");
2990 this.moveEvent.fire([x, y]);
2994 * The default event handler fired when the "y" property is changed.
2996 * @param {String} type The CustomEvent type (usually the property name)
2997 * @param {Object[]} args The CustomEvent arguments. For configuration
2998 * handlers, args[0] will equal the newly applied value for the property.
2999 * @param {Object} obj The scope object. For configuration handlers,
3000 * this will usually equal the owner.
3002 configY: function (type, args, obj) {
3004 var x = this.cfg.getProperty("x"),
3007 this.cfg.setProperty("x", x, true);
3008 this.cfg.setProperty("y", y, true);
3010 this.beforeMoveEvent.fire([x, y]);
3012 x = this.cfg.getProperty("x");
3013 y = this.cfg.getProperty("y");
3015 Dom.setY(this.element, y, true);
3017 this.cfg.setProperty("xy", [x, y], true);
3019 this.cfg.refireEvent("iframe");
3020 this.moveEvent.fire([x, y]);
3024 * Shows the iframe shim, if it has been enabled.
3025 * @method showIframe
3027 showIframe: function () {
3029 var oIFrame = this.iframe,
3033 oParentNode = this.element.parentNode;
3035 if (oParentNode != oIFrame.parentNode) {
3036 this._addToParent(oParentNode, oIFrame);
3038 oIFrame.style.display = "block";
3043 * Hides the iframe shim, if it has been enabled.
3044 * @method hideIframe
3046 hideIframe: function () {
3048 this.iframe.style.display = "none";
3053 * Syncronizes the size and position of iframe shim to that of its
3054 * corresponding Overlay instance.
3055 * @method syncIframe
3057 syncIframe: function () {
3059 var oIFrame = this.iframe,
3060 oElement = this.element,
3061 nOffset = Overlay.IFRAME_OFFSET,
3062 nDimensionOffset = (nOffset * 2),
3067 oIFrame.style.width = (oElement.offsetWidth + nDimensionOffset + "px");
3068 oIFrame.style.height = (oElement.offsetHeight + nDimensionOffset + "px");
3070 // Position <iframe>
3071 aXY = this.cfg.getProperty("xy");
3073 if (!Lang.isArray(aXY) || (isNaN(aXY[0]) || isNaN(aXY[1]))) {
3074 this.syncPosition();
3075 aXY = this.cfg.getProperty("xy");
3077 Dom.setXY(oIFrame, [(aXY[0] - nOffset), (aXY[1] - nOffset)]);
3082 * Sets the zindex of the iframe shim, if it exists, based on the zindex of
3083 * the Overlay element. The zindex of the iframe is set to be one less
3084 * than the Overlay element's zindex.
3086 * <p>NOTE: This method will not bump up the zindex of the Overlay element
3087 * to ensure that the iframe shim has a non-negative zindex.
3088 * If you require the iframe zindex to be 0 or higher, the zindex of
3089 * the Overlay element should be set to a value greater than 0, before
3090 * this method is called.
3092 * @method stackIframe
3094 stackIframe: function () {
3096 var overlayZ = Dom.getStyle(this.element, "zIndex");
3097 if (!YAHOO.lang.isUndefined(overlayZ) && !isNaN(overlayZ)) {
3098 Dom.setStyle(this.iframe, "zIndex", (overlayZ - 1));
3104 * The default event handler fired when the "iframe" property is changed.
3105 * @method configIframe
3106 * @param {String} type The CustomEvent type (usually the property name)
3107 * @param {Object[]} args The CustomEvent arguments. For configuration
3108 * handlers, args[0] will equal the newly applied value for the property.
3109 * @param {Object} obj The scope object. For configuration handlers,
3110 * this will usually equal the owner.
3112 configIframe: function (type, args, obj) {
3114 var bIFrame = args[0];
3116 function createIFrame() {
3118 var oIFrame = this.iframe,
3119 oElement = this.element,
3123 if (!m_oIFrameTemplate) {
3124 m_oIFrameTemplate = document.createElement("iframe");
3126 if (this.isSecure) {
3127 m_oIFrameTemplate.src = Overlay.IFRAME_SRC;
3131 Set the opacity of the <iframe> to 0 so that it
3132 doesn't modify the opacity of any transparent
3133 elements that may be on top of it (like a shadow).
3136 m_oIFrameTemplate.style.filter = "alpha(opacity=0)";
3138 Need to set the "frameBorder" property to 0
3139 supress the default <iframe> border in IE.
3140 Setting the CSS "border" property alone
3143 m_oIFrameTemplate.frameBorder = 0;
3146 m_oIFrameTemplate.style.opacity = "0";
3149 m_oIFrameTemplate.style.position = "absolute";
3150 m_oIFrameTemplate.style.border = "none";
3151 m_oIFrameTemplate.style.margin = "0";
3152 m_oIFrameTemplate.style.padding = "0";
3153 m_oIFrameTemplate.style.display = "none";
3154 m_oIFrameTemplate.tabIndex = -1;
3157 oIFrame = m_oIFrameTemplate.cloneNode(false);
3158 oParent = oElement.parentNode;
3160 var parentNode = oParent || document.body;
3162 this._addToParent(parentNode, oIFrame);
3163 this.iframe = oIFrame;
3167 Show the <iframe> before positioning it since the "setXY"
3168 method of DOM requires the element be in the document
3174 Syncronize the size and position of the <iframe> to that
3180 // Add event listeners to update the <iframe> when necessary
3181 if (!this._hasIframeEventListeners) {
3182 this.showEvent.subscribe(this.showIframe);
3183 this.hideEvent.subscribe(this.hideIframe);
3184 this.changeContentEvent.subscribe(this.syncIframe);
3186 this._hasIframeEventListeners = true;
3190 function onBeforeShow() {
3191 createIFrame.call(this);
3192 this.beforeShowEvent.unsubscribe(onBeforeShow);
3193 this._iframeDeferred = false;
3196 if (bIFrame) { // <iframe> shim is enabled
3198 if (this.cfg.getProperty("visible")) {
3199 createIFrame.call(this);
3201 if (!this._iframeDeferred) {
3202 this.beforeShowEvent.subscribe(onBeforeShow);
3203 this._iframeDeferred = true;
3207 } else { // <iframe> shim is disabled
3210 if (this._hasIframeEventListeners) {
3211 this.showEvent.unsubscribe(this.showIframe);
3212 this.hideEvent.unsubscribe(this.hideIframe);
3213 this.changeContentEvent.unsubscribe(this.syncIframe);
3215 this._hasIframeEventListeners = false;
3221 * Set's the container's XY value from DOM if not already set.
3223 * Differs from syncPosition, in that the XY value is only sync'd with DOM if
3224 * not already set. The method also refire's the XY config property event, so any
3225 * beforeMove, Move event listeners are invoked.
3227 * @method _primeXYFromDOM
3230 _primeXYFromDOM : function() {
3231 if (YAHOO.lang.isUndefined(this.cfg.getProperty("xy"))) {
3232 // Set CFG XY based on DOM XY
3233 this.syncPosition();
3234 // Account for XY being set silently in syncPosition (no moveTo fired/called)
3235 this.cfg.refireEvent("xy");
3236 this.beforeShowEvent.unsubscribe(this._primeXYFromDOM);
3241 * The default event handler fired when the "constraintoviewport"
3242 * property is changed.
3243 * @method configConstrainToViewport
3244 * @param {String} type The CustomEvent type (usually the property name)
3245 * @param {Object[]} args The CustomEvent arguments. For configuration
3246 * handlers, args[0] will equal the newly applied value for
3248 * @param {Object} obj The scope object. For configuration handlers,
3249 * this will usually equal the owner.
3251 configConstrainToViewport: function (type, args, obj) {
3255 if (! Config.alreadySubscribed(this.beforeMoveEvent, this.enforceConstraints, this)) {
3256 this.beforeMoveEvent.subscribe(this.enforceConstraints, this, true);
3258 if (! Config.alreadySubscribed(this.beforeShowEvent, this._primeXYFromDOM)) {
3259 this.beforeShowEvent.subscribe(this._primeXYFromDOM);
3262 this.beforeShowEvent.unsubscribe(this._primeXYFromDOM);
3263 this.beforeMoveEvent.unsubscribe(this.enforceConstraints, this);
3268 * The default event handler fired when the "context" property
3271 * @method configContext
3272 * @param {String} type The CustomEvent type (usually the property name)
3273 * @param {Object[]} args The CustomEvent arguments. For configuration
3274 * handlers, args[0] will equal the newly applied value for the property.
3275 * @param {Object} obj The scope object. For configuration handlers,
3276 * this will usually equal the owner.
3278 configContext: function (type, args, obj) {
3280 var contextArgs = args[0],
3282 elementMagnetCorner,
3283 contextMagnetCorner,
3285 defTriggers = this.CONTEXT_TRIGGERS;
3289 contextEl = contextArgs[0];
3290 elementMagnetCorner = contextArgs[1];
3291 contextMagnetCorner = contextArgs[2];
3292 triggers = contextArgs[3];
3294 if (defTriggers && defTriggers.length > 0) {
3295 triggers = (triggers || []).concat(defTriggers);
3299 if (typeof contextEl == "string") {
3300 this.cfg.setProperty("context", [
3301 document.getElementById(contextEl),
3302 elementMagnetCorner,
3303 contextMagnetCorner,
3308 if (elementMagnetCorner && contextMagnetCorner) {
3309 this.align(elementMagnetCorner, contextMagnetCorner);
3312 if (this._contextTriggers) {
3313 // Unsubscribe Old Set
3314 this._processTriggers(this._contextTriggers, _UNSUBSCRIBE, this._alignOnTrigger);
3318 // Subscribe New Set
3319 this._processTriggers(triggers, _SUBSCRIBE, this._alignOnTrigger);
3320 this._contextTriggers = triggers;
3327 * Custom Event handler for context alignment triggers. Invokes the align method
3329 * @method _alignOnTrigger
3332 * @param {String} type The event type (not used by the default implementation)
3333 * @param {Any[]} args The array of arguments for the trigger event (not used by the default implementation)
3335 _alignOnTrigger: function(type, args) {
3340 * Helper method to locate the custom event instance for the event name string
3341 * passed in. As a convenience measure, any custom events passed in are returned.
3343 * @method _findTriggerCE
3346 * @param {String|CustomEvent} t Either a CustomEvent, or event type (e.g. "windowScroll") for which a
3347 * custom event instance needs to be looked up from the Overlay._TRIGGER_MAP.
3349 _findTriggerCE : function(t) {
3351 if (t instanceof CustomEvent) {
3353 } else if (Overlay._TRIGGER_MAP[t]) {
3354 tce = Overlay._TRIGGER_MAP[t];
3360 * Utility method that subscribes or unsubscribes the given
3361 * function from the list of trigger events provided.
3363 * @method _processTriggers
3366 * @param {Array[String|CustomEvent]} triggers An array of either CustomEvents, event type strings
3367 * (e.g. "beforeShow", "windowScroll") to/from which the provided function should be
3368 * subscribed/unsubscribed respectively.
3370 * @param {String} mode Either "subscribe" or "unsubscribe", specifying whether or not
3371 * we are subscribing or unsubscribing trigger listeners
3373 * @param {Function} fn The function to be subscribed/unsubscribed to/from the trigger event.
3374 * Context is always set to the overlay instance, and no additional object argument
3375 * get passed to the subscribed function.
3377 _processTriggers : function(triggers, mode, fn) {
3380 for (var i = 0, l = triggers.length; i < l; ++i) {
3382 tce = this._findTriggerCE(t);
3384 tce[mode](fn, this, true);
3391 // END BUILT-IN PROPERTY EVENT HANDLERS //
3393 * Aligns the Overlay to its context element using the specified corner
3394 * points (represented by the constants TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT,
3397 * @param {String} elementAlign The String representing the corner of
3398 * the Overlay that should be aligned to the context element
3399 * @param {String} contextAlign The corner of the context element
3400 * that the elementAlign corner should stick to.
3402 align: function (elementAlign, contextAlign) {
3404 var contextArgs = this.cfg.getProperty("context"),
3410 function doAlign(v, h) {
3412 switch (elementAlign) {
3414 case Overlay.TOP_LEFT:
3418 case Overlay.TOP_RIGHT:
3419 me.moveTo((h - element.offsetWidth), v);
3422 case Overlay.BOTTOM_LEFT:
3423 me.moveTo(h, (v - element.offsetHeight));
3426 case Overlay.BOTTOM_RIGHT:
3427 me.moveTo((h - element.offsetWidth),
3428 (v - element.offsetHeight));
3436 context = contextArgs[0];
3437 element = this.element;
3440 if (! elementAlign) {
3441 elementAlign = contextArgs[1];
3444 if (! contextAlign) {
3445 contextAlign = contextArgs[2];
3448 if (element && context) {
3449 contextRegion = Dom.getRegion(context);
3451 switch (contextAlign) {
3453 case Overlay.TOP_LEFT:
3454 doAlign(contextRegion.top, contextRegion.left);
3457 case Overlay.TOP_RIGHT:
3458 doAlign(contextRegion.top, contextRegion.right);
3461 case Overlay.BOTTOM_LEFT:
3462 doAlign(contextRegion.bottom, contextRegion.left);
3465 case Overlay.BOTTOM_RIGHT:
3466 doAlign(contextRegion.bottom, contextRegion.right);
3477 * The default event handler executed when the moveEvent is fired, if the
3478 * "constraintoviewport" is set to true.
3479 * @method enforceConstraints
3480 * @param {String} type The CustomEvent type (usually the property name)
3481 * @param {Object[]} args The CustomEvent arguments. For configuration
3482 * handlers, args[0] will equal the newly applied value for the property.
3483 * @param {Object} obj The scope object. For configuration handlers,
3484 * this will usually equal the owner.
3486 enforceConstraints: function (type, args, obj) {
3489 var cXY = this.getConstrainedXY(pos[0], pos[1]);
3490 this.cfg.setProperty("x", cXY[0], true);
3491 this.cfg.setProperty("y", cXY[1], true);
3492 this.cfg.setProperty("xy", cXY, true);
3497 * Given x coordinate value, returns the calculated x coordinate required to
3498 * position the Overlay if it is to be constrained to the viewport, based on the
3499 * current element size, viewport dimensions and scroll values.
3501 * @param {Number} x The X coordinate value to be constrained
3502 * @return {Number} The constrained x coordinate
3504 getConstrainedX: function (x) {
3506 var oOverlay = this,
3507 oOverlayEl = oOverlay.element,
3508 nOverlayOffsetWidth = oOverlayEl.offsetWidth,
3510 nViewportOffset = Overlay.VIEWPORT_OFFSET,
3511 viewPortWidth = Dom.getViewportWidth(),
3512 scrollX = Dom.getDocumentScrollLeft(),
3514 bCanConstrain = (nOverlayOffsetWidth + nViewportOffset < viewPortWidth),
3516 aContext = this.cfg.getProperty("context"),
3526 leftConstraint = scrollX + nViewportOffset,
3527 rightConstraint = scrollX + viewPortWidth - nOverlayOffsetWidth - nViewportOffset,
3531 oOverlapPositions = {
3541 var flipHorizontal = function () {
3545 if ((oOverlay.cfg.getProperty("x") - scrollX) > nContextElX) {
3546 nNewX = (nContextElX - nOverlayOffsetWidth);
3549 nNewX = (nContextElX + nContextElWidth);
3553 oOverlay.cfg.setProperty("x", (nNewX + scrollX), true);
3562 Uses the context element's position to calculate the availble width
3563 to the right and left of it to display its corresponding Overlay.
3566 var getDisplayRegionWidth = function () {
3568 // The Overlay is to the right of the context element
3570 if ((oOverlay.cfg.getProperty("x") - scrollX) > nContextElX) {
3571 return (nRightRegionWidth - nViewportOffset);
3573 else { // The Overlay is to the left of the context element
3574 return (nLeftRegionWidth - nViewportOffset);
3581 Positions the Overlay to the left or right of the context element so that it remains
3582 inside the viewport.
3585 var setHorizontalPosition = function () {
3587 var nDisplayRegionWidth = getDisplayRegionWidth(),
3590 if (nOverlayOffsetWidth > nDisplayRegionWidth) {
3595 All possible positions and values have been
3596 tried, but none were successful, so fall back
3597 to the original size and position.
3609 fnReturnVal = setHorizontalPosition();
3619 // Determine if the current value for the Overlay's "x" configuration property will
3620 // result in the Overlay being positioned outside the boundaries of the viewport
3622 if (x < leftConstraint || x > rightConstraint) {
3624 // The current value for the Overlay's "x" configuration property WILL
3625 // result in the Overlay being positioned outside the boundaries of the viewport
3627 if (bCanConstrain) {
3629 // If the "preventcontextoverlap" configuration property is set to "true",
3630 // try to flip the Overlay to both keep it inside the boundaries of the
3631 // viewport AND from overlaping its context element.
3633 if (this.cfg.getProperty("preventcontextoverlap") && aContext &&
3634 oOverlapPositions[(aContext[1] + aContext[2])]) {
3636 oContextEl = aContext[0];
3637 nContextElX = Dom.getX(oContextEl) - scrollX;
3638 nContextElWidth = oContextEl.offsetWidth;
3639 nLeftRegionWidth = nContextElX;
3640 nRightRegionWidth = (viewPortWidth - (nContextElX + nContextElWidth));
3642 setHorizontalPosition();
3644 xNew = this.cfg.getProperty("x");
3649 if (x < leftConstraint) {
3650 xNew = leftConstraint;
3651 } else if (x > rightConstraint) {
3652 xNew = rightConstraint;
3658 // The "x" configuration property cannot be set to a value that will keep
3659 // entire Overlay inside the boundary of the viewport. Therefore, set
3660 // the "x" configuration property to scrollY to keep as much of the
3661 // Overlay inside the viewport as possible.
3662 xNew = nViewportOffset + scrollX;
3673 * Given y coordinate value, returns the calculated y coordinate required to
3674 * position the Overlay if it is to be constrained to the viewport, based on the
3675 * current element size, viewport dimensions and scroll values.
3677 * @param {Number} y The Y coordinate value to be constrained
3678 * @return {Number} The constrained y coordinate
3680 getConstrainedY: function (y) {
3682 var oOverlay = this,
3683 oOverlayEl = oOverlay.element,
3684 nOverlayOffsetHeight = oOverlayEl.offsetHeight,
3686 nViewportOffset = Overlay.VIEWPORT_OFFSET,
3687 viewPortHeight = Dom.getViewportHeight(),
3688 scrollY = Dom.getDocumentScrollTop(),
3690 bCanConstrain = (nOverlayOffsetHeight + nViewportOffset < viewPortHeight),
3692 aContext = this.cfg.getProperty("context"),
3700 nBottomRegionHeight,
3702 topConstraint = scrollY + nViewportOffset,
3703 bottomConstraint = scrollY + viewPortHeight - nOverlayOffsetHeight - nViewportOffset,
3707 oOverlapPositions = {
3715 var flipVertical = function () {
3719 // The Overlay is below the context element, flip it above
3720 if ((oOverlay.cfg.getProperty("y") - scrollY) > nContextElY) {
3721 nNewY = (nContextElY - nOverlayOffsetHeight);
3723 else { // The Overlay is above the context element, flip it below
3724 nNewY = (nContextElY + nContextElHeight);
3727 oOverlay.cfg.setProperty("y", (nNewY + scrollY), true);
3735 Uses the context element's position to calculate the availble height
3736 above and below it to display its corresponding Overlay.
3739 var getDisplayRegionHeight = function () {
3741 // The Overlay is below the context element
3742 if ((oOverlay.cfg.getProperty("y") - scrollY) > nContextElY) {
3743 return (nBottomRegionHeight - nViewportOffset);
3745 else { // The Overlay is above the context element
3746 return (nTopRegionHeight - nViewportOffset);
3753 Trys to place the Overlay in the best possible position (either above or
3754 below its corresponding context element).
3757 var setVerticalPosition = function () {
3759 var nDisplayRegionHeight = getDisplayRegionHeight(),
3763 if (nOverlayOffsetHeight > nDisplayRegionHeight) {
3768 All possible positions and values for the
3769 "maxheight" configuration property have been
3770 tried, but none were successful, so fall back
3771 to the original size and position.
3783 fnReturnVal = setVerticalPosition();
3794 // Determine if the current value for the Overlay's "y" configuration property will
3795 // result in the Overlay being positioned outside the boundaries of the viewport
3797 if (y < topConstraint || y > bottomConstraint) {
3799 // The current value for the Overlay's "y" configuration property WILL
3800 // result in the Overlay being positioned outside the boundaries of the viewport
3802 if (bCanConstrain) {
3804 // If the "preventcontextoverlap" configuration property is set to "true",
3805 // try to flip the Overlay to both keep it inside the boundaries of the
3806 // viewport AND from overlaping its context element.
3808 if (this.cfg.getProperty("preventcontextoverlap") && aContext &&
3809 oOverlapPositions[(aContext[1] + aContext[2])]) {
3811 oContextEl = aContext[0];
3812 nContextElHeight = oContextEl.offsetHeight;
3813 nContextElY = (Dom.getY(oContextEl) - scrollY);
3815 nTopRegionHeight = nContextElY;
3816 nBottomRegionHeight = (viewPortHeight - (nContextElY + nContextElHeight));
3818 setVerticalPosition();
3820 yNew = oOverlay.cfg.getProperty("y");
3825 if (y < topConstraint) {
3826 yNew = topConstraint;
3827 } else if (y > bottomConstraint) {
3828 yNew = bottomConstraint;
3836 // The "y" configuration property cannot be set to a value that will keep
3837 // entire Overlay inside the boundary of the viewport. Therefore, set
3838 // the "y" configuration property to scrollY to keep as much of the
3839 // Overlay inside the viewport as possible.
3841 yNew = nViewportOffset + scrollY;
3851 * Given x, y coordinate values, returns the calculated coordinates required to
3852 * position the Overlay if it is to be constrained to the viewport, based on the
3853 * current element size, viewport dimensions and scroll values.
3855 * @param {Number} x The X coordinate value to be constrained
3856 * @param {Number} y The Y coordinate value to be constrained
3857 * @return {Array} The constrained x and y coordinates at index 0 and 1 respectively;
3859 getConstrainedXY: function(x, y) {
3860 return [this.getConstrainedX(x), this.getConstrainedY(y)];
3864 * Centers the container in the viewport.
3867 center: function () {
3869 var nViewportOffset = Overlay.VIEWPORT_OFFSET,
3870 elementWidth = this.element.offsetWidth,
3871 elementHeight = this.element.offsetHeight,
3872 viewPortWidth = Dom.getViewportWidth(),
3873 viewPortHeight = Dom.getViewportHeight(),
3877 if (elementWidth < viewPortWidth) {
3878 x = (viewPortWidth / 2) - (elementWidth / 2) + Dom.getDocumentScrollLeft();
3880 x = nViewportOffset + Dom.getDocumentScrollLeft();
3883 if (elementHeight < viewPortHeight) {
3884 y = (viewPortHeight / 2) - (elementHeight / 2) + Dom.getDocumentScrollTop();
3886 y = nViewportOffset + Dom.getDocumentScrollTop();
3889 this.cfg.setProperty("xy", [parseInt(x, 10), parseInt(y, 10)]);
3890 this.cfg.refireEvent("iframe");
3893 this.forceContainerRedraw();
3898 * Synchronizes the Panel's "xy", "x", and "y" properties with the
3899 * Panel's position in the DOM. This is primarily used to update
3900 * position information during drag & drop.
3901 * @method syncPosition
3903 syncPosition: function () {
3905 var pos = Dom.getXY(this.element);
3907 this.cfg.setProperty("x", pos[0], true);
3908 this.cfg.setProperty("y", pos[1], true);
3909 this.cfg.setProperty("xy", pos, true);
3914 * Event handler fired when the resize monitor element is resized.
3915 * @method onDomResize
3916 * @param {DOMEvent} e The resize DOM event
3917 * @param {Object} obj The scope object
3919 onDomResize: function (e, obj) {
3923 Overlay.superclass.onDomResize.call(this, e, obj);
3925 setTimeout(function () {
3927 me.cfg.refireEvent("iframe");
3928 me.cfg.refireEvent("context");
3933 * Determines the content box height of the given element (height of the element, without padding or borders) in pixels.
3935 * @method _getComputedHeight
3937 * @param {HTMLElement} el The element for which the content height needs to be determined
3938 * @return {Number} The content box height of the given element, or null if it could not be determined.
3940 _getComputedHeight : (function() {
3942 if (document.defaultView && document.defaultView.getComputedStyle) {
3943 return function(el) {
3945 if (el.ownerDocument && el.ownerDocument.defaultView) {
3946 var computed = el.ownerDocument.defaultView.getComputedStyle(el, '');
3948 height = parseInt(computed.height, 10);
3951 return (Lang.isNumber(height)) ? height : null;
3954 return function(el) {
3956 if (el.style.pixelHeight) {
3957 height = el.style.pixelHeight;
3959 return (Lang.isNumber(height)) ? height : null;
3965 * autofillheight validator. Verifies that the autofill value is either null
3966 * or one of the strings : "body", "header" or "footer".
3968 * @method _validateAutoFillHeight
3970 * @param {String} val
3971 * @return true, if valid, false otherwise
3973 _validateAutoFillHeight : function(val) {
3974 return (!val) || (Lang.isString(val) && Overlay.STD_MOD_RE.test(val));
3978 * The default custom event handler executed when the overlay's height is changed,
3979 * if the autofillheight property has been set.
3981 * @method _autoFillOnHeightChange
3983 * @param {String} type The event type
3984 * @param {Array} args The array of arguments passed to event subscribers
3985 * @param {HTMLElement} el The header, body or footer element which is to be resized to fill
3986 * out the containers height
3988 _autoFillOnHeightChange : function(type, args, el) {
3989 var height = this.cfg.getProperty("height");
3990 if ((height && height !== "auto") || (height === 0)) {
3991 this.fillHeight(el);
3996 * Returns the sub-pixel height of the el, using getBoundingClientRect, if available,
3997 * otherwise returns the offsetHeight
3998 * @method _getPreciseHeight
4000 * @param {HTMLElement} el
4001 * @return {Float} The sub-pixel height if supported by the browser, else the rounded height.
4003 _getPreciseHeight : function(el) {
4004 var height = el.offsetHeight;
4006 if (el.getBoundingClientRect) {
4007 var rect = el.getBoundingClientRect();
4008 height = rect.bottom - rect.top;
4016 * Sets the height on the provided header, body or footer element to
4017 * fill out the height of the container. It determines the height of the
4018 * containers content box, based on it's configured height value, and
4019 * sets the height of the autofillheight element to fill out any
4020 * space remaining after the other standard module element heights
4021 * have been accounted for.
4023 * <p><strong>NOTE:</strong> This method is not designed to work if an explicit
4024 * height has not been set on the container, since for an "auto" height container,
4025 * the heights of the header/body/footer will drive the height of the container.</p>
4027 * @method fillHeight
4028 * @param {HTMLElement} el The element which should be resized to fill out the height
4029 * of the container element.
4031 fillHeight : function(el) {
4033 var container = this.innerElement || this.element,
4034 containerEls = [this.header, this.body, this.footer],
4041 for (var i = 0, l = containerEls.length; i < l; i++) {
4042 containerEl = containerEls[i];
4044 if (el !== containerEl) {
4045 filled += this._getPreciseHeight(containerEl);
4054 if (UA.ie || UA.opera) {
4055 // Need to set height to 0, to allow height to be reduced
4056 Dom.setStyle(el, 'height', 0 + 'px');
4059 total = this._getComputedHeight(container);
4061 // Fallback, if we can't get computed value for content height
4062 if (total === null) {
4063 Dom.addClass(container, "yui-override-padding");
4064 total = container.clientHeight; // Content, No Border, 0 Padding (set by yui-override-padding)
4065 Dom.removeClass(container, "yui-override-padding");
4068 remaining = Math.max(total - filled, 0);
4070 Dom.setStyle(el, "height", remaining + "px");
4072 // Re-adjust height if required, to account for el padding and border
4073 if (el.offsetHeight != remaining) {
4074 remaining = Math.max(remaining - (el.offsetHeight - remaining), 0);
4076 Dom.setStyle(el, "height", remaining + "px");
4082 * Places the Overlay on top of all other instances of
4083 * YAHOO.widget.Overlay.
4084 * @method bringToTop
4086 bringToTop: function () {
4089 oElement = this.element;
4091 function compareZIndexDesc(p_oOverlay1, p_oOverlay2) {
4093 var sZIndex1 = Dom.getStyle(p_oOverlay1, "zIndex"),
4094 sZIndex2 = Dom.getStyle(p_oOverlay2, "zIndex"),
4096 nZIndex1 = (!sZIndex1 || isNaN(sZIndex1)) ? 0 : parseInt(sZIndex1, 10),
4097 nZIndex2 = (!sZIndex2 || isNaN(sZIndex2)) ? 0 : parseInt(sZIndex2, 10);
4099 if (nZIndex1 > nZIndex2) {
4101 } else if (nZIndex1 < nZIndex2) {
4108 function isOverlayElement(p_oElement) {
4110 var isOverlay = Dom.hasClass(p_oElement, Overlay.CSS_OVERLAY),
4111 Panel = YAHOO.widget.Panel;
4113 if (isOverlay && !Dom.isAncestor(oElement, p_oElement)) {
4114 if (Panel && Dom.hasClass(p_oElement, Panel.CSS_PANEL)) {
4115 aOverlays[aOverlays.length] = p_oElement.parentNode;
4117 aOverlays[aOverlays.length] = p_oElement;
4122 Dom.getElementsBy(isOverlayElement, "DIV", document.body);
4124 aOverlays.sort(compareZIndexDesc);
4126 var oTopOverlay = aOverlays[0],
4130 nTopZIndex = Dom.getStyle(oTopOverlay, "zIndex");
4132 if (!isNaN(nTopZIndex)) {
4133 var bRequiresBump = false;
4135 if (oTopOverlay != oElement) {
4136 bRequiresBump = true;
4137 } else if (aOverlays.length > 1) {
4138 var nNextZIndex = Dom.getStyle(aOverlays[1], "zIndex");
4139 // Don't rely on DOM order to stack if 2 overlays are at the same zindex.
4140 if (!isNaN(nNextZIndex) && (nTopZIndex == nNextZIndex)) {
4141 bRequiresBump = true;
4144 if (bRequiresBump) {
4145 this.cfg.setProperty("zindex", (parseInt(nTopZIndex, 10) + 2));
4152 * Removes the Overlay element from the DOM and sets all child
4156 destroy: function () {
4159 this.iframe.parentNode.removeChild(this.iframe);
4164 Overlay.windowResizeEvent.unsubscribe(
4165 this.doCenterOnDOMEvent, this);
4167 Overlay.windowScrollEvent.unsubscribe(
4168 this.doCenterOnDOMEvent, this);
4170 Module.textResizeEvent.unsubscribe(this._autoFillOnHeightChange);
4172 Overlay.superclass.destroy.call(this);
4176 * Can be used to force the container to repaint/redraw it's contents.
4178 * By default applies and then removes a 1px bottom margin through the
4179 * application/removal of a "yui-force-redraw" class.
4182 * It is currently used by Overlay to force a repaint for webkit
4183 * browsers, when centering.
4185 * @method forceContainerRedraw
4187 forceContainerRedraw : function() {
4189 Dom.addClass(c.element, "yui-force-redraw");
4190 setTimeout(function() {
4191 Dom.removeClass(c.element, "yui-force-redraw");
4196 * Returns a String representation of the object.
4198 * @return {String} The string representation of the Overlay.
4200 toString: function () {
4201 return "Overlay " + this.id;
4210 * OverlayManager is used for maintaining the focus status of
4211 * multiple Overlays.
4212 * @namespace YAHOO.widget
4213 * @namespace YAHOO.widget
4214 * @class OverlayManager
4216 * @param {Array} overlays Optional. A collection of Overlays to register
4218 * @param {Object} userConfig The object literal representing the user
4219 * configuration of the OverlayManager
4221 YAHOO.widget.OverlayManager = function (userConfig) {
4222 this.init(userConfig);
4225 var Overlay = YAHOO.widget.Overlay,
4226 Event = YAHOO.util.Event,
4227 Dom = YAHOO.util.Dom,
4228 Config = YAHOO.util.Config,
4229 CustomEvent = YAHOO.util.CustomEvent,
4230 OverlayManager = YAHOO.widget.OverlayManager;
4233 * The CSS class representing a focused Overlay
4234 * @property OverlayManager.CSS_FOCUSED
4239 OverlayManager.CSS_FOCUSED = "focused";
4241 OverlayManager.prototype = {
4244 * The class's constructor function
4245 * @property contructor
4248 constructor: OverlayManager,
4251 * The array of Overlays that are currently registered
4252 * @property overlays
4253 * @type YAHOO.widget.Overlay[]
4258 * Initializes the default configuration of the OverlayManager
4259 * @method initDefaultConfig
4261 initDefaultConfig: function () {
4263 * The collection of registered Overlays in use by
4264 * the OverlayManager
4266 * @type YAHOO.widget.Overlay[]
4269 this.cfg.addProperty("overlays", { suppressEvent: true } );
4272 * The default DOM event that should be used to focus an Overlay
4273 * @config focusevent
4275 * @default "mousedown"
4277 this.cfg.addProperty("focusevent", { value: "mousedown" } );
4281 * Initializes the OverlayManager
4283 * @param {Overlay[]} overlays Optional. A collection of Overlays to
4284 * register with the manager.
4285 * @param {Object} userConfig The object literal representing the user
4286 * configuration of the OverlayManager
4288 init: function (userConfig) {
4291 * The OverlayManager's Config object used for monitoring
4292 * configuration properties.
4296 this.cfg = new Config(this);
4298 this.initDefaultConfig();
4301 this.cfg.applyConfig(userConfig, true);
4303 this.cfg.fireQueue();
4306 * The currently activated Overlay
4307 * @property activeOverlay
4309 * @type YAHOO.widget.Overlay
4311 var activeOverlay = null;
4314 * Returns the currently focused Overlay
4316 * @return {Overlay} The currently focused Overlay
4318 this.getActive = function () {
4319 return activeOverlay;
4323 * Focuses the specified Overlay
4325 * @param {Overlay} overlay The Overlay to focus
4326 * @param {String} overlay The id of the Overlay to focus
4328 this.focus = function (overlay) {
4329 var o = this.find(overlay);
4336 * Removes the specified Overlay from the manager
4338 * @param {Overlay} overlay The Overlay to remove
4339 * @param {String} overlay The id of the Overlay to remove
4341 this.remove = function (overlay) {
4343 var o = this.find(overlay),
4347 if (activeOverlay == o) {
4348 activeOverlay = null;
4351 var bDestroyed = (o.element === null && o.cfg === null) ? true : false;
4354 // Set it's zindex so that it's sorted to the end.
4355 originalZ = Dom.getStyle(o.element, "zIndex");
4356 o.cfg.setProperty("zIndex", -1000, true);
4359 this.overlays.sort(this.compareZIndexDesc);
4360 this.overlays = this.overlays.slice(0, (this.overlays.length - 1));
4362 o.hideEvent.unsubscribe(o.blur);
4363 o.destroyEvent.unsubscribe(this._onOverlayDestroy, o);
4364 o.focusEvent.unsubscribe(this._onOverlayFocusHandler, o);
4365 o.blurEvent.unsubscribe(this._onOverlayBlurHandler, o);
4368 Event.removeListener(o.element, this.cfg.getProperty("focusevent"), this._onOverlayElementFocus);
4369 o.cfg.setProperty("zIndex", originalZ, true);
4370 o.cfg.setProperty("manager", null);
4373 /* _managed Flag for custom or existing. Don't want to remove existing */
4374 if (o.focusEvent._managed) { o.focusEvent = null; }
4375 if (o.blurEvent._managed) { o.blurEvent = null; }
4377 if (o.focus._managed) { o.focus = null; }
4378 if (o.blur._managed) { o.blur = null; }
4383 * Removes focus from all registered Overlays in the manager
4386 this.blurAll = function () {
4388 var nOverlays = this.overlays.length,
4391 if (nOverlays > 0) {
4394 this.overlays[i].blur();
4401 * Updates the state of the OverlayManager and overlay, as a result of the overlay
4404 * @method _manageBlur
4405 * @param {Overlay} overlay The overlay instance which got blurred.
4408 this._manageBlur = function (overlay) {
4409 var changed = false;
4410 if (activeOverlay == overlay) {
4411 Dom.removeClass(activeOverlay.element, OverlayManager.CSS_FOCUSED);
4412 activeOverlay = null;
4419 * Updates the state of the OverlayManager and overlay, as a result of the overlay
4422 * @method _manageFocus
4423 * @param {Overlay} overlay The overlay instance which got focus.
4426 this._manageFocus = function(overlay) {
4427 var changed = false;
4428 if (activeOverlay != overlay) {
4429 if (activeOverlay) {
4430 activeOverlay.blur();
4432 activeOverlay = overlay;
4433 this.bringToTop(activeOverlay);
4434 Dom.addClass(activeOverlay.element, OverlayManager.CSS_FOCUSED);
4440 var overlays = this.cfg.getProperty("overlays");
4442 if (! this.overlays) {
4447 this.register(overlays);
4448 this.overlays.sort(this.compareZIndexDesc);
4453 * @method _onOverlayElementFocus
4454 * @description Event handler for the DOM event that is used to focus
4455 * the Overlay instance as specified by the "focusevent"
4456 * configuration property.
4458 * @param {Event} p_oEvent Object representing the DOM event
4459 * object passed back by the event utility (Event).
4461 _onOverlayElementFocus: function (p_oEvent) {
4463 var oTarget = Event.getTarget(p_oEvent),
4464 oClose = this.close;
4466 if (oClose && (oTarget == oClose || Dom.isAncestor(oClose, oTarget))) {
4474 * @method _onOverlayDestroy
4475 * @description "destroy" event handler for the Overlay.
4477 * @param {String} p_sType String representing the name of the event
4479 * @param {Array} p_aArgs Array of arguments sent when the event
4481 * @param {Overlay} p_oOverlay Object representing the overlay that
4484 _onOverlayDestroy: function (p_sType, p_aArgs, p_oOverlay) {
4485 this.remove(p_oOverlay);
4489 * @method _onOverlayFocusHandler
4491 * focusEvent Handler, used to delegate to _manageFocus with the
4492 * correct arguments.
4495 * @param {String} p_sType String representing the name of the event
4497 * @param {Array} p_aArgs Array of arguments sent when the event
4499 * @param {Overlay} p_oOverlay Object representing the overlay that
4502 _onOverlayFocusHandler: function(p_sType, p_aArgs, p_oOverlay) {
4503 this._manageFocus(p_oOverlay);
4507 * @method _onOverlayBlurHandler
4509 * blurEvent Handler, used to delegate to _manageBlur with the
4510 * correct arguments.
4513 * @param {String} p_sType String representing the name of the event
4515 * @param {Array} p_aArgs Array of arguments sent when the event
4517 * @param {Overlay} p_oOverlay Object representing the overlay that
4520 _onOverlayBlurHandler: function(p_sType, p_aArgs, p_oOverlay) {
4521 this._manageBlur(p_oOverlay);
4525 * Subscribes to the Overlay based instance focusEvent, to allow the OverlayManager to
4526 * monitor focus state.
4528 * If the instance already has a focusEvent (e.g. Menu), OverlayManager will subscribe
4529 * to the existing focusEvent, however if a focusEvent or focus method does not exist
4530 * on the instance, the _bindFocus method will add them, and the focus method will
4531 * update the OverlayManager's state directly.
4533 * @method _bindFocus
4534 * @param {Overlay} overlay The overlay for which focus needs to be managed
4537 _bindFocus : function(overlay) {
4540 if (!overlay.focusEvent) {
4541 overlay.focusEvent = overlay.createEvent("focus");
4542 overlay.focusEvent.signature = CustomEvent.LIST;
4543 overlay.focusEvent._managed = true;
4545 overlay.focusEvent.subscribe(mgr._onOverlayFocusHandler, overlay, mgr);
4548 if (!overlay.focus) {
4549 Event.on(overlay.element, mgr.cfg.getProperty("focusevent"), mgr._onOverlayElementFocus, null, overlay);
4550 overlay.focus = function () {
4551 if (mgr._manageFocus(this)) {
4553 if (this.cfg.getProperty("visible") && this.focusFirst) {
4556 this.focusEvent.fire();
4559 overlay.focus._managed = true;
4564 * Subscribes to the Overlay based instance's blurEvent to allow the OverlayManager to
4565 * monitor blur state.
4567 * If the instance already has a blurEvent (e.g. Menu), OverlayManager will subscribe
4568 * to the existing blurEvent, however if a blurEvent or blur method does not exist
4569 * on the instance, the _bindBlur method will add them, and the blur method
4570 * update the OverlayManager's state directly.
4573 * @param {Overlay} overlay The overlay for which blur needs to be managed
4576 _bindBlur : function(overlay) {
4579 if (!overlay.blurEvent) {
4580 overlay.blurEvent = overlay.createEvent("blur");
4581 overlay.blurEvent.signature = CustomEvent.LIST;
4582 overlay.focusEvent._managed = true;
4584 overlay.blurEvent.subscribe(mgr._onOverlayBlurHandler, overlay, mgr);
4587 if (!overlay.blur) {
4588 overlay.blur = function () {
4589 if (mgr._manageBlur(this)) {
4590 this.blurEvent.fire();
4593 overlay.blur._managed = true;
4596 overlay.hideEvent.subscribe(overlay.blur);
4600 * Subscribes to the Overlay based instance's destroyEvent, to allow the Overlay
4601 * to be removed for the OverlayManager when destroyed.
4603 * @method _bindDestroy
4604 * @param {Overlay} overlay The overlay instance being managed
4607 _bindDestroy : function(overlay) {
4609 overlay.destroyEvent.subscribe(mgr._onOverlayDestroy, overlay, mgr);
4613 * Ensures the zIndex configuration property on the managed overlay based instance
4614 * is set to the computed zIndex value from the DOM (with "auto" translating to 0).
4616 * @method _syncZIndex
4617 * @param {Overlay} overlay The overlay instance being managed
4620 _syncZIndex : function(overlay) {
4621 var zIndex = Dom.getStyle(overlay.element, "zIndex");
4622 if (!isNaN(zIndex)) {
4623 overlay.cfg.setProperty("zIndex", parseInt(zIndex, 10));
4625 overlay.cfg.setProperty("zIndex", 0);
4630 * Registers an Overlay or an array of Overlays with the manager. Upon
4631 * registration, the Overlay receives functions for focus and blur,
4632 * along with CustomEvents for each.
4635 * @param {Overlay} overlay An Overlay to register with the manager.
4636 * @param {Overlay[]} overlay An array of Overlays to register with
4638 * @return {boolean} true if any Overlays are registered.
4640 register: function (overlay) {
4642 var registered = false,
4646 if (overlay instanceof Overlay) {
4648 overlay.cfg.addProperty("manager", { value: this } );
4650 this._bindFocus(overlay);
4651 this._bindBlur(overlay);
4652 this._bindDestroy(overlay);
4653 this._syncZIndex(overlay);
4655 this.overlays.push(overlay);
4656 this.bringToTop(overlay);
4660 } else if (overlay instanceof Array) {
4662 for (i = 0, n = overlay.length; i < n; i++) {
4663 registered = this.register(overlay[i]) || registered;
4672 * Places the specified Overlay instance on top of all other
4673 * Overlay instances.
4674 * @method bringToTop
4675 * @param {YAHOO.widget.Overlay} p_oOverlay Object representing an
4677 * @param {String} p_oOverlay String representing the id of an
4680 bringToTop: function (p_oOverlay) {
4682 var oOverlay = this.find(p_oOverlay),
4689 aOverlays = this.overlays;
4690 aOverlays.sort(this.compareZIndexDesc);
4692 oTopOverlay = aOverlays[0];
4695 nTopZIndex = Dom.getStyle(oTopOverlay.element, "zIndex");
4697 if (!isNaN(nTopZIndex)) {
4699 var bRequiresBump = false;
4701 if (oTopOverlay !== oOverlay) {
4702 bRequiresBump = true;
4703 } else if (aOverlays.length > 1) {
4704 var nNextZIndex = Dom.getStyle(aOverlays[1].element, "zIndex");
4705 // Don't rely on DOM order to stack if 2 overlays are at the same zindex.
4706 if (!isNaN(nNextZIndex) && (nTopZIndex == nNextZIndex)) {
4707 bRequiresBump = true;
4711 if (bRequiresBump) {
4712 oOverlay.cfg.setProperty("zindex", (parseInt(nTopZIndex, 10) + 2));
4715 aOverlays.sort(this.compareZIndexDesc);
4721 * Attempts to locate an Overlay by instance or ID.
4723 * @param {Overlay} overlay An Overlay to locate within the manager
4724 * @param {String} overlay An Overlay id to locate within the manager
4725 * @return {Overlay} The requested Overlay, if found, or null if it
4726 * cannot be located.
4728 find: function (overlay) {
4730 var isInstance = overlay instanceof Overlay,
4731 overlays = this.overlays,
4732 n = overlays.length,
4737 if (isInstance || typeof overlay == "string") {
4738 for (i = n-1; i >= 0; i--) {
4740 if ((isInstance && (o === overlay)) || (o.id == overlay)) {
4751 * Used for sorting the manager's Overlays by z-index.
4752 * @method compareZIndexDesc
4754 * @return {Number} 0, 1, or -1, depending on where the Overlay should
4755 * fall in the stacking order.
4757 compareZIndexDesc: function (o1, o2) {
4759 var zIndex1 = (o1.cfg) ? o1.cfg.getProperty("zIndex") : null, // Sort invalid (destroyed)
4760 zIndex2 = (o2.cfg) ? o2.cfg.getProperty("zIndex") : null; // objects at bottom.
4762 if (zIndex1 === null && zIndex2 === null) {
4764 } else if (zIndex1 === null){
4766 } else if (zIndex2 === null) {
4768 } else if (zIndex1 > zIndex2) {
4770 } else if (zIndex1 < zIndex2) {
4778 * Shows all Overlays in the manager.
4781 showAll: function () {
4782 var overlays = this.overlays,
4783 n = overlays.length,
4786 for (i = n - 1; i >= 0; i--) {
4792 * Hides all Overlays in the manager.
4795 hideAll: function () {
4796 var overlays = this.overlays,
4797 n = overlays.length,
4800 for (i = n - 1; i >= 0; i--) {
4806 * Returns a string representation of the object.
4808 * @return {String} The string representation of the OverlayManager
4810 toString: function () {
4811 return "OverlayManager";
4819 * ContainerEffect encapsulates animation transitions that are executed when
4820 * an Overlay is shown or hidden.
4821 * @namespace YAHOO.widget
4822 * @class ContainerEffect
4824 * @param {YAHOO.widget.Overlay} overlay The Overlay that the animation
4825 * should be associated with
4826 * @param {Object} attrIn The object literal representing the animation
4827 * arguments to be used for the animate-in transition. The arguments for
4828 * this literal are: attributes(object, see YAHOO.util.Anim for description),
4829 * duration(Number), and method(i.e. Easing.easeIn).
4830 * @param {Object} attrOut The object literal representing the animation
4831 * arguments to be used for the animate-out transition. The arguments for
4832 * this literal are: attributes(object, see YAHOO.util.Anim for description),
4833 * duration(Number), and method(i.e. Easing.easeIn).
4834 * @param {HTMLElement} targetElement Optional. The target element that
4835 * should be animated during the transition. Defaults to overlay.element.
4836 * @param {class} Optional. The animation class to instantiate. Defaults to
4837 * YAHOO.util.Anim. Other options include YAHOO.util.Motion.
4839 YAHOO.widget.ContainerEffect = function (overlay, attrIn, attrOut, targetElement, animClass) {
4842 animClass = YAHOO.util.Anim;
4846 * The overlay to animate
4848 * @type YAHOO.widget.Overlay
4850 this.overlay = overlay;
4853 * The animation attributes to use when transitioning into view
4857 this.attrIn = attrIn;
4860 * The animation attributes to use when transitioning out of view
4864 this.attrOut = attrOut;
4867 * The target element to be animated
4868 * @property targetElement
4871 this.targetElement = targetElement || overlay.element;
4874 * The animation class to use for animating the overlay
4875 * @property animClass
4878 this.animClass = animClass;
4883 var Dom = YAHOO.util.Dom,
4884 CustomEvent = YAHOO.util.CustomEvent,
4885 ContainerEffect = YAHOO.widget.ContainerEffect;
4889 * A pre-configured ContainerEffect instance that can be used for fading
4890 * an overlay in and out.
4893 * @param {YAHOO.widget.Overlay} overlay The Overlay object to animate
4894 * @param {Number} dur The duration of the animation
4895 * @return {YAHOO.widget.ContainerEffect} The configured ContainerEffect object
4897 ContainerEffect.FADE = function (overlay, dur) {
4899 var Easing = YAHOO.util.Easing,
4901 attributes: {opacity:{from:0, to:1}},
4903 method: Easing.easeIn
4906 attributes: {opacity:{to:0}},
4908 method: Easing.easeOut
4910 fade = new ContainerEffect(overlay, fin, fout, overlay.element);
4912 fade.handleUnderlayStart = function() {
4913 var underlay = this.overlay.underlay;
4914 if (underlay && YAHOO.env.ua.ie) {
4915 var hasFilters = (underlay.filters && underlay.filters.length > 0);
4917 Dom.addClass(overlay.element, "yui-effect-fade");
4922 fade.handleUnderlayComplete = function() {
4923 var underlay = this.overlay.underlay;
4924 if (underlay && YAHOO.env.ua.ie) {
4925 Dom.removeClass(overlay.element, "yui-effect-fade");
4929 fade.handleStartAnimateIn = function (type, args, obj) {
4930 Dom.addClass(obj.overlay.element, "hide-select");
4932 if (!obj.overlay.underlay) {
4933 obj.overlay.cfg.refireEvent("underlay");
4936 obj.handleUnderlayStart();
4938 obj.overlay._setDomVisibility(true);
4939 Dom.setStyle(obj.overlay.element, "opacity", 0);
4942 fade.handleCompleteAnimateIn = function (type,args,obj) {
4943 Dom.removeClass(obj.overlay.element, "hide-select");
4945 if (obj.overlay.element.style.filter) {
4946 obj.overlay.element.style.filter = null;
4949 obj.handleUnderlayComplete();
4951 obj.overlay.cfg.refireEvent("iframe");
4952 obj.animateInCompleteEvent.fire();
4955 fade.handleStartAnimateOut = function (type, args, obj) {
4956 Dom.addClass(obj.overlay.element, "hide-select");
4957 obj.handleUnderlayStart();
4960 fade.handleCompleteAnimateOut = function (type, args, obj) {
4961 Dom.removeClass(obj.overlay.element, "hide-select");
4962 if (obj.overlay.element.style.filter) {
4963 obj.overlay.element.style.filter = null;
4965 obj.overlay._setDomVisibility(false);
4966 Dom.setStyle(obj.overlay.element, "opacity", 1);
4968 obj.handleUnderlayComplete();
4970 obj.overlay.cfg.refireEvent("iframe");
4971 obj.animateOutCompleteEvent.fire();
4980 * A pre-configured ContainerEffect instance that can be used for sliding an
4981 * overlay in and out.
4984 * @param {YAHOO.widget.Overlay} overlay The Overlay object to animate
4985 * @param {Number} dur The duration of the animation
4986 * @return {YAHOO.widget.ContainerEffect} The configured ContainerEffect object
4988 ContainerEffect.SLIDE = function (overlay, dur) {
4989 var Easing = YAHOO.util.Easing,
4991 x = overlay.cfg.getProperty("x") || Dom.getX(overlay.element),
4992 y = overlay.cfg.getProperty("y") || Dom.getY(overlay.element),
4993 clientWidth = Dom.getClientWidth(),
4994 offsetWidth = overlay.element.offsetWidth,
4997 attributes: { points: { to: [x, y] } },
4999 method: Easing.easeIn
5003 attributes: { points: { to: [(clientWidth + 25), y] } },
5005 method: Easing.easeOut
5008 slide = new ContainerEffect(overlay, sin, sout, overlay.element, YAHOO.util.Motion);
5010 slide.handleStartAnimateIn = function (type,args,obj) {
5011 obj.overlay.element.style.left = ((-25) - offsetWidth) + "px";
5012 obj.overlay.element.style.top = y + "px";
5015 slide.handleTweenAnimateIn = function (type, args, obj) {
5017 var pos = Dom.getXY(obj.overlay.element),
5021 if (Dom.getStyle(obj.overlay.element, "visibility") ==
5022 "hidden" && currentX < x) {
5024 obj.overlay._setDomVisibility(true);
5028 obj.overlay.cfg.setProperty("xy", [currentX, currentY], true);
5029 obj.overlay.cfg.refireEvent("iframe");
5032 slide.handleCompleteAnimateIn = function (type, args, obj) {
5033 obj.overlay.cfg.setProperty("xy", [x, y], true);
5036 obj.overlay.cfg.refireEvent("iframe");
5037 obj.animateInCompleteEvent.fire();
5040 slide.handleStartAnimateOut = function (type, args, obj) {
5042 var vw = Dom.getViewportWidth(),
5043 pos = Dom.getXY(obj.overlay.element),
5046 obj.animOut.attributes.points.to = [(vw + 25), yso];
5049 slide.handleTweenAnimateOut = function (type, args, obj) {
5051 var pos = Dom.getXY(obj.overlay.element),
5055 obj.overlay.cfg.setProperty("xy", [xto, yto], true);
5056 obj.overlay.cfg.refireEvent("iframe");
5059 slide.handleCompleteAnimateOut = function (type, args, obj) {
5060 obj.overlay._setDomVisibility(false);
5062 obj.overlay.cfg.setProperty("xy", [x, y]);
5063 obj.animateOutCompleteEvent.fire();
5070 ContainerEffect.prototype = {
5073 * Initializes the animation classes and events.
5078 this.beforeAnimateInEvent = this.createEvent("beforeAnimateIn");
5079 this.beforeAnimateInEvent.signature = CustomEvent.LIST;
5081 this.beforeAnimateOutEvent = this.createEvent("beforeAnimateOut");
5082 this.beforeAnimateOutEvent.signature = CustomEvent.LIST;
5084 this.animateInCompleteEvent = this.createEvent("animateInComplete");
5085 this.animateInCompleteEvent.signature = CustomEvent.LIST;
5087 this.animateOutCompleteEvent =
5088 this.createEvent("animateOutComplete");
5089 this.animateOutCompleteEvent.signature = CustomEvent.LIST;
5091 this.animIn = new this.animClass(this.targetElement,
5092 this.attrIn.attributes, this.attrIn.duration,
5093 this.attrIn.method);
5095 this.animIn.onStart.subscribe(this.handleStartAnimateIn, this);
5096 this.animIn.onTween.subscribe(this.handleTweenAnimateIn, this);
5098 this.animIn.onComplete.subscribe(this.handleCompleteAnimateIn,
5101 this.animOut = new this.animClass(this.targetElement,
5102 this.attrOut.attributes, this.attrOut.duration,
5103 this.attrOut.method);
5105 this.animOut.onStart.subscribe(this.handleStartAnimateOut, this);
5106 this.animOut.onTween.subscribe(this.handleTweenAnimateOut, this);
5107 this.animOut.onComplete.subscribe(this.handleCompleteAnimateOut,
5113 * Triggers the in-animation.
5116 animateIn: function () {
5117 this.beforeAnimateInEvent.fire();
5118 this.animIn.animate();
5122 * Triggers the out-animation.
5123 * @method animateOut
5125 animateOut: function () {
5126 this.beforeAnimateOutEvent.fire();
5127 this.animOut.animate();
5131 * The default onStart handler for the in-animation.
5132 * @method handleStartAnimateIn
5133 * @param {String} type The CustomEvent type
5134 * @param {Object[]} args The CustomEvent arguments
5135 * @param {Object} obj The scope object
5137 handleStartAnimateIn: function (type, args, obj) { },
5140 * The default onTween handler for the in-animation.
5141 * @method handleTweenAnimateIn
5142 * @param {String} type The CustomEvent type
5143 * @param {Object[]} args The CustomEvent arguments
5144 * @param {Object} obj The scope object
5146 handleTweenAnimateIn: function (type, args, obj) { },
5149 * The default onComplete handler for the in-animation.
5150 * @method handleCompleteAnimateIn
5151 * @param {String} type The CustomEvent type
5152 * @param {Object[]} args The CustomEvent arguments
5153 * @param {Object} obj The scope object
5155 handleCompleteAnimateIn: function (type, args, obj) { },
5158 * The default onStart handler for the out-animation.
5159 * @method handleStartAnimateOut
5160 * @param {String} type The CustomEvent type
5161 * @param {Object[]} args The CustomEvent arguments
5162 * @param {Object} obj The scope object
5164 handleStartAnimateOut: function (type, args, obj) { },
5167 * The default onTween handler for the out-animation.
5168 * @method handleTweenAnimateOut
5169 * @param {String} type The CustomEvent type
5170 * @param {Object[]} args The CustomEvent arguments
5171 * @param {Object} obj The scope object
5173 handleTweenAnimateOut: function (type, args, obj) { },
5176 * The default onComplete handler for the out-animation.
5177 * @method handleCompleteAnimateOut
5178 * @param {String} type The CustomEvent type
5179 * @param {Object[]} args The CustomEvent arguments
5180 * @param {Object} obj The scope object
5182 handleCompleteAnimateOut: function (type, args, obj) { },
5185 * Returns a string representation of the object.
5187 * @return {String} The string representation of the ContainerEffect
5189 toString: function () {
5190 var output = "ContainerEffect";
5192 output += " [" + this.overlay.toString() + "]";
5198 YAHOO.lang.augmentProto(ContainerEffect, YAHOO.util.EventProvider);
5202 YAHOO.register("containercore", YAHOO.widget.Module, {version: "2.7.0", build: "1799"});