+ * This method is invoked after bindUI is invoked for the Widget class + * using YUI's aop infrastructure. + *
+ * @method _bindUIStack + * @protected + */ + _bindUIStack: function() { + this.after(ShimChange, this._afterShimChange); + this.after(ZIndexChange, this._afterZIndexChange); + }, + + /** + * Creates/Initializes the DOM to support stackability. + *+ * This method in invoked after renderUI is invoked for the Widget class + * using YUI's aop infrastructure. + *
+ * @method _renderUIStack + * @protected + */ + _renderUIStack: function() { + this._stackNode.addClass(Stack.STACKED_CLASS_NAME); + }, + + /** + * Default setter for zIndex attribute changes. Normalizes zIndex values to + * numbers, converting non-numerical values to 0. + * + * @method _setZIndex + * @protected + * @param {String | Number} zIndex + * @return {Number} Normalized zIndex + */ + _setZIndex: function(zIndex) { + if (L.isString(zIndex)) { + zIndex = parseInt(zIndex, 10); + } + if (!L.isNumber(zIndex)) { + zIndex = 0; + } + return zIndex; + }, + + /** + * Default attribute change listener for the shim attribute, responsible + * for updating the UI, in response to attribute changes. + * + * @method _afterShimChange + * @protected + * @param {EventFacade} e The event facade for the attribute change + */ + _afterShimChange : function(e) { + this._uiSetShim(e.newVal); + }, + + /** + * Default attribute change listener for the zIndex attribute, responsible + * for updating the UI, in response to attribute changes. + * + * @method _afterZIndexChange + * @protected + * @param {EventFacade} e The event facade for the attribute change + */ + _afterZIndexChange : function(e) { + this._uiSetZIndex(e.newVal); + }, + + /** + * Updates the UI to reflect the zIndex value passed in. + * + * @method _uiSetZIndex + * @protected + * @param {number} zIndex The zindex to be reflected in the UI + */ + _uiSetZIndex: function (zIndex) { + this._stackNode.setStyle(ZINDEX, zIndex); + }, + + /** + * Updates the UI to enable/disable the shim. If the widget is not currently visible, + * creation of the shim is deferred until it is made visible, for performance reasons. + * + * @method _uiSetShim + * @protected + * @param {boolean} enable If true, creates/renders the shim, if false, removes it. + */ + _uiSetShim: function (enable) { + if (enable) { + // Lazy creation + if (this.get(VISIBLE)) { + this._renderShim(); + } else { + this._renderShimDeferred(); + } + } else { + this._destroyShim(); + } + }, + + /** + * Sets up change handlers for the visible attribute, to defer shim creation/rendering + * until the Widget is made visible. + * + * @method _renderShimDeferred + * @private + */ + _renderShimDeferred : function() { + + this._stackHandles[SHIM_DEFERRED] = this._stackHandles[SHIM_DEFERRED] || []; + + var handles = this._stackHandles[SHIM_DEFERRED], + createBeforeVisible = function(e) { + if (e.newVal) { + this._renderShim(); + } + }; + + handles.push(this.on(VisibleChange, createBeforeVisible)); + }, + + /** + * Sets up event listeners to resize the shim when the size of the Widget changes. + *+ * NOTE: This method is only used for IE6 currently, since IE6 doesn't support a way to + * resize the shim purely through CSS, when the Widget does not have an explicit width/height + * set. + *
+ * @method _addShimResizeHandlers + * @private + */ + _addShimResizeHandlers : function() { + + this._stackHandles[SHIM_RESIZE] = this._stackHandles[SHIM_RESIZE] || []; + + var sizeShim = this.sizeShim, + handles = this._stackHandles[SHIM_RESIZE]; + + this.sizeShim(); + + handles.push(this.after(VisibleChange, sizeShim)); + handles.push(this.after(WidthChange, sizeShim)); + handles.push(this.after(HeightChange, sizeShim)); + handles.push(this.after(ContentUpdate, sizeShim)); + }, + + /** + * Detaches any handles stored for the provided key + * + * @method _detachStackHandles + * @param String handleKey The key defining the group of handles which should be detached + * @private + */ + _detachStackHandles : function(handleKey) { + var handles = this._stackHandles[handleKey], + handle; + + if (handles && handles.length > 0) { + while((handle = handles.pop())) { + handle.detach(); + } + } + }, + + /** + * Creates the shim element and adds it to the DOM + * + * @method _renderShim + * @private + */ + _renderShim : function() { + var shimEl = this._shimNode, + stackEl = this._stackNode; + + if (!shimEl) { + shimEl = this._shimNode = this._getShimTemplate(); + stackEl.insertBefore(shimEl, stackEl.get(FIRST_CHILD)); + + if (UA.ie == 6) { + this._addShimResizeHandlers(); + } + this._detachStackHandles(SHIM_DEFERRED); + } + }, + + /** + * Removes the shim from the DOM, and detaches any related event + * listeners. + * + * @method _destroyShim + * @private + */ + _destroyShim : function() { + if (this._shimNode) { + this._shimNode.get(PARENT_NODE).removeChild(this._shimNode); + this._shimNode = null; + + this._detachStackHandles(SHIM_DEFERRED); + this._detachStackHandles(SHIM_RESIZE); + } + }, + + + /** + * For IE6, synchronizes the size and position of iframe shim to that of + * Widget bounding box which it is protecting. For all other browsers, + * this method does not do anything. + * + * @method sizeShim + */ + sizeShim: function () { + var shim = this._shimNode, + node = this._stackNode; + + if (shim && UA.ie === 6 && this.get(VISIBLE)) { + shim.setStyle(WIDTH, node.get(OFFSET_WIDTH) + PX); + shim.setStyle(HEIGHT, node.get(OFFSET_HEIGHT) + PX); + } + }, + + /** + * Creates a cloned shim node, using the SHIM_TEMPLATE html template, for use on a new instance. + * + * @method _getShimTemplate + * @private + * @return {Node} node A new shim Node instance. + */ + _getShimTemplate : function() { + if (!Stack._SHIM_TEMPLATE) { + Stack._SHIM_TEMPLATE = Node.create(Stack.SHIM_TEMPLATE); + } + return Stack._SHIM_TEMPLATE.cloneNode(true); + } + }; + + Y.WidgetStack = Stack; + + + +}, '3.0.0b1' ,{requires:['widget']});