1130 lines
45 KiB
Plaintext
1130 lines
45 KiB
Plaintext
Container Release Notes
|
|
|
|
*** version 2.6.0 ***
|
|
|
|
Changes:
|
|
--------
|
|
|
|
+ 1px rounded corners in Sam-Skin, added in 2.3.0, are no longer
|
|
rendered in IE6 or IE7.
|
|
|
|
hasLayout and relative positioning applied
|
|
to the header, body and footer elements to achieve the 1px
|
|
rounded corners had functional side effects (such as the inability
|
|
to shrink-wrap auto width containers, and the creation of invalid
|
|
stacking contexts)
|
|
|
|
1px rounded corners can be re-applied with a CSS patch if required,
|
|
as discussed on the container documentation web page.
|
|
|
|
+ We now attempt to focus the first focusable element inside a Panel,
|
|
when it is shown (as is done with Dialog).
|
|
|
|
+ Setting the "height" configuration property will now result in the
|
|
container's body element being resized to fill out any empty
|
|
vertical space. This behavior can be configured using the
|
|
"autofillheight" configuration property discussed below.
|
|
|
|
Added the following features:
|
|
-----------------------------
|
|
|
|
+ Added a new "preventcontextoverlap" configuration property used
|
|
to manage whether or not an Overlay instance should overlap its
|
|
context element (defined using the "context" configuration property)
|
|
when the "constraintoviewport" configuration property is set
|
|
to "true".
|
|
|
|
+ Added ability to specify event triggers when using the "context"
|
|
configuration property. The container wil re-align itself with
|
|
the context element in response to these trigger events.
|
|
|
|
See context configuration property documentation for usage details.
|
|
|
|
+ Added "autofillheight" configuration property, which is set to "body"
|
|
by default. This configuration property can be used to specify which
|
|
of the 3 container element - "header", "body", "footer" should be
|
|
resized to fill out any remaining vertical space when the container's
|
|
"height" configuration property is set.
|
|
|
|
The property can be set to false/null to disable the feature if
|
|
desired.
|
|
|
|
+ Panel now supports focusFirst and focusLast methods, as
|
|
well as tab, shift-tab looping when modal (similar to Dialog).
|
|
|
|
Fixed the following bugs:
|
|
-------------------------
|
|
|
|
+ Fixed issue with tooltip iframe remaining visible in situations
|
|
where the page was scrolled down.
|
|
|
|
+ Fixed OverlayManager.find to return null, if the Overlay cannot
|
|
be found.
|
|
|
|
+ OverlayManager no longer overwrites focus or blur methods on the
|
|
registered container, if they already exist (e.g. for Menu). Instead
|
|
it registers focus/blur event listeners to maintain OverlayManager
|
|
state in such situations.
|
|
|
|
+ Panels/Dialogs without a fixed width specified (auto width containers)
|
|
now shrink-wrap correctly in IE6, IE7 (see 1px rounded corner discussion
|
|
above)
|
|
|
|
+ Added text to the close icon, to enhance accessibility for screen
|
|
readers. Also changed the close icon element from a span, to an anchor
|
|
to facilate keyboard tab access.
|
|
|
|
+ Added title to text resize monitor iframe, to assist screen readers.
|
|
|
|
+ Fixed modal mask resizing when going from a larger to a smaller window
|
|
size.
|
|
|
|
+ hideMaskEvent is now fired after all modal mask relatd state changes
|
|
(including changes to the document.body) have taken place.
|
|
|
|
Originally it was fired before removing the "masked" class from
|
|
document.body.
|
|
|
|
+ Fixed Sam Skin look/feel for default Dialog buttons. Originally
|
|
disabled default buttons looked the same as enabled default buttons.
|
|
|
|
+ Fixed asynchronous Dialog submission failure for cases where the form
|
|
contained elements named "action" or "method".
|
|
|
|
+ Fixed Dialog button focus methods when using YUI Buttons.
|
|
|
|
+ Modal Dialogs buttons are now included in the tab, shift-tab flow.
|
|
Originally buttons in Modal dialogs were unreachable when tabbing.
|
|
|
|
+ Individual focus handlers attached to all non-container focusable
|
|
elements (used to enforce modality), resulted in poor performance
|
|
when showing/hiding modal Panels, especially in IE, on pages with
|
|
a large number of focusable elements.
|
|
|
|
Instead of individual listeners, Panel now registers a single
|
|
focus listener on the document to enforce modality, improving
|
|
performance and scalability for modal solutions.
|
|
|
|
+ Files for optional component dependencies (e.g. animation, dragdrop,
|
|
connection) can now be included after container's js files, without
|
|
breaking related functionality.
|
|
|
|
+ Fixed Config to remove (null out) current entry from the
|
|
config queue, before invoking fireEvent for the entry, to
|
|
keep it from being re-added to the end of the queue if
|
|
listeners were to set a property which superceded the entry.
|
|
|
|
*** version 2.5.2 ***
|
|
|
|
+ No change.
|
|
|
|
*** version 2.5.1 ***
|
|
|
|
Fixed the following bugs:
|
|
-------------------------
|
|
|
|
+ Module.setBody, setHeader and setFooter methods now accept
|
|
DocumentFragments. This feature was implicitly available
|
|
in versions prior to 2.5.0 and is now officially supported.
|
|
|
|
Changes:
|
|
--------
|
|
|
|
+ Optimized addition of Modality focus handlers on masked
|
|
elements (which are used to enforce modality) and added
|
|
ability to disable feature, to avoid timeout script errors
|
|
in IE if your page contains a very large number of focusable
|
|
elements.
|
|
|
|
Additionally changes to Event in 2.5.1 should allow
|
|
for increased scalability, when using Modal panels containing
|
|
large numbers of focusable elements on the page.
|
|
|
|
Added a YAHOO.widget.Panel.FOCUSABLE property, defining
|
|
the set of elements which should have focus handlers applied
|
|
when covered by the Modal mask.
|
|
|
|
If you wish to disable the addition of focus handlers to all
|
|
focusable elements on the page when a Modal Panel is displayed,
|
|
the property can be set to an empty array:
|
|
|
|
YAHOO.widget.Panel.FOCUSABLE = [];
|
|
|
|
NOTE: This will mean that elements under mask may still be
|
|
accessible using the keyboard, however the mask will still
|
|
prevent mouse access to elements.
|
|
|
|
*** version 2.5.0 ***
|
|
|
|
Fixed the following bugs:
|
|
-------------------------
|
|
|
|
+ We now add the text resize monitor iframe to the DOM in a timeout,
|
|
to help alleviate the perpetual loading indicator seen in
|
|
Firefox 2.0.0.8 (Gecko 1.8.1.8) and above on Windows.
|
|
|
|
+ Changed the closing script tag string used in the resize monitor, to
|
|
allow container-min.js, container_core-min.js content to be used inline.
|
|
|
|
+ Fixed problem with underlay size being too short in IE6 when setting up
|
|
an initially visible Dialog with buttons.
|
|
|
|
+ Removed overflow:auto applied to the modal mask for all browsers other
|
|
than gecko/MacOS to help avoid the "missing text cursor" Gecko bug.
|
|
Overflow:auto is still applied to for Gecko/MacOS to help avoid
|
|
scrollbar bleedthrough, another Gecko bug (discussed in Container's
|
|
known issues section).
|
|
|
|
Added the following features:
|
|
-----------------------------
|
|
|
|
+ Added a "hideaftersubmit" config property to Dialog, to allow the end
|
|
user to configure whether or not the Dialog should be hidden after
|
|
it has been submitted. By default it is set to false, to provide
|
|
backwards compatibility.
|
|
|
|
+ Added contextMouseOverEvent, contextMouseOutEvent and
|
|
contextTriggerEvent events to Tooltip, which provide access to the
|
|
context element when the user mouses over a context element, mouses
|
|
out of a context element, and before a tooltip is about to be
|
|
triggered (displayed) for a context element. See the API docs for
|
|
these events for futher details.
|
|
|
|
+ Added a "disabled" config property to Tooltip, to allow the user
|
|
to dynamically disable a tooltip.
|
|
|
|
Changes:
|
|
--------
|
|
|
|
+ Optimized constraintoviewport handling for Overlays which haven't
|
|
been specifically positioned, so that the constraint checks aren't
|
|
made before every show.
|
|
|
|
*** version 2.4.0 ***
|
|
|
|
Fixed the following bugs:
|
|
-------------------------
|
|
|
|
+ constraintoviewport and fixedcenter now handle Overlays which are
|
|
larger than the viewport. The Overlay will be positioned such that
|
|
it's top, left corner is in the viewport. Panel's draggable
|
|
behavior now also honors constraintoviewport, if the panel is
|
|
larger than the viewport.
|
|
|
|
+ constrainToViewport will now correctly constrain Overlays which
|
|
haven't been specifically positioned (don't have an XY value set).
|
|
|
|
+ Overlay/OverlayManager bringToTop methods will bring Overlays to
|
|
the top of the stack, even if their current zindex is the same as
|
|
other Overlays on the page.
|
|
|
|
+ Fixed double textResizeEvents fired on gecko based browsers (e.g
|
|
Firefox 2.x).
|
|
|
|
+ Panel underlay now resizes correctly in Safari 2.x, when the
|
|
content of the Panel is modified (e.g. when setBody() is called).
|
|
|
|
+ Tooltip "text" configuration property is no longer overridden by
|
|
the "title" attribute value on the context element if both are
|
|
set. The "text" configuration property takes precedence
|
|
(as indicated in the Tooltip documentation).
|
|
|
|
+ Transparent shadows no longer become opaque (black) in IE6/IE7
|
|
when a Panel with ContainerEffect.FADE is hidden and then
|
|
shown again. Also on IE6/IE7 transparent shadows no longer
|
|
appear opaque while animation is in progress.
|
|
|
|
+ An empty header is no longer created for non-draggable
|
|
Dialogs/SimpleDialogs which don't provide their own headers.
|
|
By design, an empty header is still created for draggable
|
|
Dialogs/SimpleDialogs which don't provide a header, in order
|
|
to provide a drag handle.
|
|
|
|
+ Select boxes inside Modal Panels on IE6 are no longer hidden.
|
|
|
|
+ In Sam Skin, Dialog/SimpleDialog default and non-default HTML
|
|
buttons (used when YUI Button is not included on the page) now
|
|
have a consistent look. Previously style properties intended
|
|
for default YUI Buttons, were being incorrectly applied to
|
|
default HTML buttons, giving them a look inconsistent with
|
|
non-default buttons.
|
|
|
|
Added the following features:
|
|
-----------------------------
|
|
|
|
+ Added "dragOnly" configuration property to Panel, to leverage
|
|
the "dragOnly" configuration property added to the DragDrop
|
|
utility for 2.4.0.
|
|
|
|
When the "dragOnly" configuration property is set to true,
|
|
the DD instance created for the Panel will not check for drop
|
|
targets on the page, improving performance during drag operations
|
|
which don't require drop target interaction.
|
|
|
|
The property is set to "false" by default to maintain backwards
|
|
compatibility with older 2.x releases, but should be set to "true"
|
|
if no drop targets for the Panel exist on the page.
|
|
|
|
See the DragDrop utilities 2.4.0 README for additional information.
|
|
|
|
*** version 2.3.1 ***
|
|
|
|
Fixed the following bugs:
|
|
-------------------------
|
|
|
|
+ To help reduce the occurrence of "Operation Aborted" errors in IE,
|
|
containers which are rendered to the document's BODY element (e.g.
|
|
myOverlay.render(document.body)) are now inserted before the first
|
|
child of the BODY element. This applies to both the container
|
|
element as well as the iframe shim if enabled.
|
|
|
|
Prior to 2.3.1, these two elements were appended as the last
|
|
children of the BODY element.
|
|
|
|
When rendering to any other element on the page, the behavior is
|
|
unchanged and both the container and shim are appended as the last
|
|
children of the element.
|
|
|
|
Upgrade Impact For Containers Rendered To Document.Body
|
|
-------------------------------------------------------
|
|
If you have an xy coordinate and non-zero z-index specified for
|
|
your container there should be no negative impact.
|
|
|
|
If you haven't specified an xy position, the fix could result
|
|
in a shift in your container position, depending on other elements
|
|
on the page.
|
|
|
|
If you haven't specified a z-index and are relying on DOM order to
|
|
stack the container, you may see a change in stacking order of
|
|
the container or iframe shim.
|
|
|
|
Both these changes can be resolved by setting a specific z-index
|
|
and position based on the layout of other elements on your page.
|
|
|
|
If you do need to revert to 2.3.0 behavior, a configuration property
|
|
"appendtodocumentbody" has been added to Module, which can be set to
|
|
true.
|
|
|
|
The change to stacking order is discussed in detail below in
|
|
relation to other z-index fixes made for 2.3.1.
|
|
|
|
+ Z-index is now applied correctly for Overlay/Panel elements, their
|
|
corresponding iframe shims, and modal masks (for Panels).
|
|
This fix applies to both the default z-index based on the CSS
|
|
for the Overlay/Panel and specific z-indices set using the
|
|
"zindex" configuration parameter.
|
|
|
|
Default z-index values are:
|
|
|
|
Overlay/Panel element: 2
|
|
Iframe shim: 1
|
|
Mask: 1
|
|
|
|
The iframe shim and modal mask z-index will always be set to one less
|
|
than the Overlay/Panel z-index.
|
|
|
|
PLEASE NOTE:
|
|
|
|
As a result of the fix to reduce "Operation Aborted" errors,
|
|
setting a z-index of 1 on an Overlay/Panel rendered to document.body
|
|
will result in its iframe shim and modal mask (which will have a
|
|
z-index of 0) being rendered behind other positioned elements in the
|
|
document.
|
|
|
|
This is because the Overlay/Panel, iframe shim and mask are
|
|
inserted as the first children of the BODY element and hence any
|
|
positioned elements with a z-index of 0 or auto which occur after
|
|
them in the document will be stacked on top of them as per W3C spec.
|
|
|
|
If you need to keep the Overlay/Panel above positioned elements on your
|
|
page, it's z-index needs to be set to 2 or more.
|
|
|
|
In general it's advisable to manage the z-index of positioned elements
|
|
on your page deliberately by setting a z-index, to avoid having their
|
|
order in the document define their stacking order.
|
|
|
|
For detailed stacking order information see:
|
|
- http://www.w3.org/TR/CSS21/visuren.html#layers
|
|
- http://developer.mozilla.org/en/docs/Understanding_CSS_z-index:The_st
|
|
acking_context
|
|
|
|
+ Module now correctly recognizes standard module header, body and footer
|
|
DIVs when they have extra CSS classes applied in addition to the
|
|
required hd, bd, and ft classes. e.g. <div class="bd news"></div>.
|
|
|
|
+ An empty header (set to $#160;) is created for draggable Panels which
|
|
don't have a header specified, to provide a drag handle. This fixes a
|
|
regression introduced in 2.3.0 so that 2.2.2 behavior is restored.
|
|
|
|
+ Dialog.destroy has been fixed to account for Dialog form elements which
|
|
may not be direct children of the standard module body ("bd") element.
|
|
|
|
+ SimpleDialog.destory now completes successfully if the optional
|
|
button-beta.js dependancy is not included on the page.
|
|
|
|
+ Destroying Overlays registered with the OverlayManager no longer results in a
|
|
JavaScript error. The Overlay is destroyed and removed from the
|
|
OverlayManager correctly.
|
|
|
|
+ Submitting a Dialog form directly (e.g. using a "submit" button, hitting
|
|
enter on a single text field form) no longer throws a JavaScript error.
|
|
|
|
Known Issues
|
|
------------
|
|
|
|
+ IE: Borders for tables with border-collapse:collapse remain visible
|
|
-------------------------------------------------------------------
|
|
If an Overlay, or any of its subclasses, contains a table with its
|
|
border-collapse CSS property set to "collapse" instead of the default
|
|
value of "separate", the borders of the table will remain visible, when
|
|
the Overlay is configured to be hidden initially. The table contents
|
|
will be hidden correctly.
|
|
|
|
This is due to an IE bug, reproducible by the basic test case below:
|
|
|
|
<style type="text/css">
|
|
.box {visibility:hidden;}
|
|
td {border:1px solid red;}
|
|
table {border-collapse:collapse;}
|
|
</style>
|
|
|
|
<div class="box">
|
|
<table>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>2</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
Setting the DIV elements "style.visibility" JS property fixes the
|
|
problem with the simple test case. NOTE: Setting the style in markup
|
|
using the DIV's style attribute does not.
|
|
|
|
Extending this to Container, the simplest workaround if you're not
|
|
using effects, is to use Overlay's hide() method to setup visibility.
|
|
This will set the Overlay's element "style.visibility" property. e.g.
|
|
|
|
// Start visible, then hide.
|
|
var ovr = YAHOO.widget.Overlay("ovr");
|
|
ovr.render();
|
|
ovr.hide();
|
|
|
|
You can also apply this workaround if you want to use effects by
|
|
setting the effect up after you hide. e.g.
|
|
|
|
// Start visible, but don't apply effects,
|
|
// to avoid initial animation.
|
|
var ovr = YAHOO.widget.Overlay("ovr");
|
|
ovr.render();
|
|
ovr.hide();
|
|
ovr.cfg.setProperty("effect", {effect:.....});
|
|
|
|
If initial flicker is a problem with the above, you can set the
|
|
visibility directly on the Overlay element after rendering e.g.
|
|
|
|
var ovr = YAHOO.widget.Overlay("ovr", {visible:false});
|
|
ovr.render();
|
|
YAHOO.util.Dom.setStyle(ovr.element, "visibility", "hidden");
|
|
|
|
but if possible one of the previous methods should be used since
|
|
they use the public API as opposed to manipulating the DOM directly.
|
|
|
|
*** version 2.3.0 ***
|
|
|
|
Fixed the following bugs:
|
|
-------------------------
|
|
|
|
+ Improved creation of the <iframe> element used to monitor changes to the
|
|
browser's font size so that:
|
|
|
|
- Safari's status bar no longer displays a "Loading..." message after the
|
|
page has loaded.
|
|
|
|
- Firefox no longer reports duplicate cookie information.
|
|
|
|
- The browser scrollbars no longer flash on and off in Firefox.
|
|
|
|
+ It is now possible to set the "button" configuration property of a
|
|
YAHOO.widget.Dialog instance after it has be rendered.
|
|
|
|
+ Form elements appended to a YAHOO.widget.Dialog instance via the "setBody"
|
|
method are now automatically registered using the "registerForm" method.
|
|
|
|
+ The "focusFirst" method of YAHOO.widget.Dialog will no longer result in a
|
|
JavaScript error in IE if the first element in the Dialog instance's form
|
|
is a radio button.
|
|
|
|
+ YAHOO.widget.Panel instances whose "draggable" property is set to "true" and
|
|
"width" property is set to "auto" are now able to be dragged in IE 6 (Quirks
|
|
and Strict Mode) and IE 7 Quirks Mode.
|
|
|
|
+ Updated focus methods of YAHOO.widget.Dialog to prevent JavaScript errors
|
|
that result from trying to set focus to elements that hidden or disabled.
|
|
|
|
+ Pressing the enter key will no longer result in a YAHOO.widget.Dialog
|
|
instance's "validate" method being called twice.
|
|
|
|
+ Pressing the enter key while focused on a form field inside a Dialog will no
|
|
longer trigger the "click" event handler defined by the Dialog's default
|
|
button in IE and Firefox.
|
|
|
|
+ Pressing the enter key when focused on a form field inside a
|
|
YAHOO.widget.Dialog instance with no buttons created via its "buttons"
|
|
configuration property will no longer result in a JavaScript error.
|
|
|
|
+ Aqua scrollbars will no longer bleed through Container widgets in Firefox
|
|
for Mac OS X.
|
|
|
|
+ The "width" and "height" configuration properties of YAHOO.widget.Overlay
|
|
now supersede the "fixedcenter" and "context" configuration properties to
|
|
ensure correct positioning of Overlay instances using the "fixedcenter"
|
|
and "context" configuration properties.
|
|
|
|
+ Calling the "destroy" method on a YAHOO.widget.Overlay instance no longer
|
|
results in a JavaScript error on the subsequent focus of another
|
|
Overlay instance.
|
|
|
|
+ YAHOO.widget.Tooltip instances without a value specified for the "width"
|
|
configuration property will be rendered at a width equal to the offsetWidth
|
|
of their root <DIV/> element to prevent their width from being clipped or
|
|
constrained by their parent HTML element.
|
|
|
|
|
|
Changes:
|
|
--------
|
|
|
|
+ Rendering of YAHOO.widget.Tooltip instances is now deferred using the
|
|
"onDOMReady" event handler of YAHOO.util.Event rather than waiting until
|
|
the "load" event of the Tooltip's parent window fires.
|
|
|
|
+ Deprecated "browser" property of YAHOO.widget.Module in favor
|
|
of YAHOO.env.ua.
|
|
|
|
+ The "moveEvent" of a YAHOO.widget.Panel instance now also fires with the
|
|
"endDrag" event of the its YAHOO.util.DD instance.
|
|
|
|
+ Updated modal functionality of YAHOO.widget.Panel:
|
|
|
|
- The creation of a Panel instance's modality mask is now deferred until it
|
|
is initially made visible.
|
|
|
|
- Showing a modal Panel instance will now result in the Panel and its
|
|
associated modality mask element having a higher z-index than all other
|
|
YAHOO.widget.Overlay instances and Overlay subclasses.
|
|
|
|
+ Updated the "underlay" configuration property of YAHOO.widget.Panel:
|
|
|
|
- The creation of the underlay element is deferred until the Panel
|
|
instance is initially made visible.
|
|
|
|
- For Gecko-based browsers on Mac OS X the underlay elment is always
|
|
created as it is used as a shim to prevent Aqua scrollbars below a Panel
|
|
instance from poking through it.
|
|
|
|
- For IE 7 (Quirks Mode) and IE 6 (Quirks Mode and Standard Mode) the
|
|
underlay element is resized in response to a change to a Panel instance's
|
|
"width" or "height" configuration properties, a change to the browser's
|
|
font size or the firing of the contentChangedEvent (triggered by use of
|
|
the "setHeader," "appendToHeader," "setBody," "appendToBody,"
|
|
"setFooter," or "appendToFooter" methods).
|
|
|
|
+ Updated the "iframe" configuration property of YAHOO.widget.Overlay:
|
|
|
|
- The creation of the <iframe> shim element is deferred until the Overlay
|
|
instance is initially made visible.
|
|
|
|
- The <iframe> shim element is resized when a change to an Overlay
|
|
instance's content is made at runtime via the "setHeader,"
|
|
"appendToHeader," "setBody," "appendToBody," "setFooter," or
|
|
"appendToFooter" methods.
|
|
|
|
+ Updated the "buttons" configuration property of YAHOO.widget.Dialog:
|
|
|
|
- YAHOO.widget.Button is now an optional dependancy, and if included, each
|
|
button in a Dialog will be an instance of Button.
|
|
|
|
- The "text" property of each button now accepts HTML
|
|
|
|
- The "handler" property of each button can now be set to:
|
|
|
|
+ A reference to a function that should fire when the button is
|
|
clicked. (In this case scope of this function is always its
|
|
Dialog instance.)
|
|
|
|
+ An object literal representing the code to be executed when the
|
|
button is clicked. The format is:
|
|
{
|
|
fn: Function (The handler to call when the event fires.),
|
|
obj: Object (An object to pass back to the handler.),
|
|
scope: Object (The object to use for the scope of the handler.)
|
|
}
|
|
|
|
|
|
Added the following features:
|
|
-----------------------------
|
|
|
|
+ Added ability for YAHOO.widget.Tooltip instances to have shadow:
|
|
|
|
- The shadow for a Tooltip is implemented by appending a new element as the
|
|
last child of its root <DIV/> element:
|
|
|
|
<DIV class="yui-tt">
|
|
<DIV class="bd"> ... </DIV>
|
|
<DIV class="yui-tt-shadow"/>
|
|
</DIV>
|
|
|
|
- The code that creates the shadow element resides inside the Tooltip's
|
|
public "onRender" prototype method. To disable the creation of a
|
|
Tooltip's shadow override the prototype of the "onRender" method:
|
|
|
|
YAHOO.widget.Tooltip.prototype.onRender = function () {};
|
|
|
|
- The actual creation of the shadow element is deferred until the Tooltip
|
|
is made visible for the first time.
|
|
|
|
- A Tooltip's shadow element can be styled via two CSS classes:
|
|
|
|
+ "yui-tt-shadow" - Applied to the shadow element when it is created.
|
|
+ "yui-tt-shadow-visible" - Applied to the shadow element when the
|
|
Tooltip is visible; it is removed the Tooltip is hidden.
|
|
|
|
- The shadow element is only styled when using the new "Sam" skin, for
|
|
the previous default skin its "display" property is set to "none."
|
|
|
|
+ Prototype of all classes (Module, Overlay, Panel, Dialog, SimpleDialog,
|
|
Tooltip, Config, and ContainerEffect) are augmented with
|
|
YAHOO.util.EventProvider, facilitating subscribing to an instance's
|
|
Custom Events by name via a "subscribe" method that is a direct member of
|
|
the class. For example:
|
|
|
|
var oOverlay = new YAHOO.widget.Overlay("myoverlay");
|
|
|
|
oOverlay.subscribe("show", onShow);
|
|
|
|
+ Added a new "bringToTop" method to YAHOO.widget.Overlay that places the
|
|
Overlay on top of all other Overlay instances.
|
|
|
|
+ Added a new "bringToTop" method to YAHOO.widget.OverlayManager that places
|
|
the specified Overlay instance on top of all other Overlay instances. This
|
|
method is called on each Overlay instance that is registered with an
|
|
OverlayManager instance.
|
|
|
|
+ Dialog instances are now able to upload files should the Dialog instance's
|
|
form contain <input type="file"/> elements. PLEASE NOTE: If a Dialog
|
|
instance will be handling asyncronous file uploads, its "callback" property
|
|
will need to be setup with an "upload" handler rather than the standard
|
|
"success" and, or "failure" handlers. For more information, see the
|
|
Connection Manager documenation on file uploads:
|
|
http://developer.yahoo.com/yui/connection/#file
|
|
|
|
+ Added a new "getButtons" method to YAHOO.widget.Dialog that returns an array
|
|
containing each of the Dialog's buttons; by default an array of HTML <BUTTON>
|
|
elements. If the Dialog's buttons were created using the
|
|
YAHOO.widget.Button class (via the inclusion of the optional Button
|
|
dependancy on the page), an array of YAHOO.widget.Button instances
|
|
is returned.
|
|
|
|
+ Added a "destroy" method to YAHOO.util.Config that sets all properties to
|
|
null, unsubscribes all listeners from each property's change event and all
|
|
listeners from the configChangedEvent. The "destroy" method of
|
|
YAHOO.widget.Module now automatically calls the "destroy" method of its
|
|
configuation object.
|
|
|
|
+ Added a "IFRAME_OFFSET" constant to YAHOO.widget.Overlay that controls how
|
|
much the <iframe> shim should be offset from each side of an
|
|
Overlay instance.
|
|
|
|
+ Added a new "syncIframe" method to YAHOO.widget.Overlay that syncronizes the
|
|
size and position of the <iframe> shim to that of the Overlay.
|
|
|
|
+ Added a "ICON_CSS_CLASSNAME" constant to YAHOO.widget.SimpleDialog that
|
|
represents the name of the CSS class applied to the element created by the
|
|
"icon" configuration property.
|
|
|
|
|
|
Known Issues
|
|
------------
|
|
|
|
+ "Sam" skin Panel missing left and right borders when declared with a height
|
|
---------------------------------------------------------------------------
|
|
If the height of a Panel instance exceeds the total height of its header,
|
|
body and footer elements, the space not filled with content will lack a left
|
|
and right border. Therefore, to set a Panel instance to a fixed height
|
|
when using the "Sam" skin, apply the desired height to the body element,
|
|
taking into account the height of the header and footer elements. To set the
|
|
height of a Panel instance's body via CSS:
|
|
|
|
#mypanel .bd {
|
|
height: 100px;
|
|
}
|
|
|
|
Or via JavaScript:
|
|
|
|
oMyPanel.body.style.height = "100px";
|
|
|
|
+ Elements with scrollbars poke through Overlay instances floating above them
|
|
---------------------------------------------------------------------------
|
|
There is a bug in Gecko-based browsers for Mac OS X where an element's
|
|
scrollbars will poke through absolutely positioned elements floating above
|
|
them. To fix this problem the "overflow" property of an Overlay instance's
|
|
root element is toggled between "hidden" and "auto" (through the application
|
|
and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes) as its
|
|
"visibility" configuration property is toggled between "false" and "true."
|
|
|
|
PLEASE NOTE:
|
|
|
|
1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are
|
|
applied only for Gecko on Mac OS X and are added/removed to/from the
|
|
Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and
|
|
"showMacGeckoScrollbars" methods of YAHOO.widget.Overlay.
|
|
|
|
2) For Panel (and its subclasses) it is the underlay element, not the root
|
|
element, whose "overflow" property is toggled between "hidden" and "auto."
|
|
The underlay element therefore acts as a shim to correct the
|
|
scrollbar problem.
|
|
|
|
3) For Tooltip instances using the "Sam" skin it is the shadow element, not
|
|
the root element, whose "overflow" property is toggled between "hidden"
|
|
and "auto." The shadow element therefore acts as a shim to correct the
|
|
scrollbar problem.
|
|
|
|
4) Once the fix is applied the bug will reappear if the window loses focus.
|
|
This can be remedied via Javascript by hiding and showing the Overlay
|
|
instance when the window receives focus:
|
|
|
|
YAHOO.util.Event.on(window, "focus", function () {
|
|
|
|
oMyOverlay.hide();
|
|
oMyOverlay.show();
|
|
|
|
});
|
|
|
|
** For more information see
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=187435
|
|
|
|
+ Scrollbars remain visible after an Overlay is hidden
|
|
----------------------------------------------------
|
|
There is a bug in Gecko-based browsers for Mac OS X where an element's
|
|
scrollbars and the scrollbars of its child nodes remain visible when its
|
|
"visibility" property property is set to "hidden." To fix this problem,
|
|
the "overflow" property of an Overlay instance's root element and child nodes
|
|
is toggled between "hidden" and "auto" (through the application and removal
|
|
of the "hide-scrollbars" and "show-scrollbars" CSS classes) as its
|
|
"visibility" configuration property is toggled between "false" and "true."
|
|
|
|
PLEASE NOTE:
|
|
|
|
1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are
|
|
applied only for Gecko on Mac OS X and are added/removed to/from the
|
|
Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and
|
|
"showMacGeckoScrollbars" methods of YAHOO.widget.Overlay.
|
|
|
|
2) There may be instances where the CSS for a web page or application
|
|
contains style rules whose specificity override the rules implemented by
|
|
the Container CSS files to fix this bug. In such cases, is necessary to
|
|
leverage the provided "hide-scrollbars" and "show-scrollbars" classes to
|
|
write custom style rules to guard against this bug. For example:
|
|
|
|
To fix the scrollbars issue for an Overlay instance with an id of
|
|
"myoverlay" whose body element has scrollbars applied by default:
|
|
|
|
#myoverlay .bd {
|
|
|
|
height: 100px;
|
|
|
|
/* Apply scrollbars for all browsers. */
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
#myoverlay.hide-scrollbars .bd {
|
|
|
|
/* Hide scrollbars by default for Gecko on OS X */
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
#myoverlay.show-scrollbars .bd {
|
|
|
|
/* Show scrollbars for Gecko on OS X when the Overlay is visible */
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
To fix the scrollbars issue for a Panel instance with an id of "mypanel"
|
|
whose body element has scrollbars applied by default:
|
|
|
|
#mypanel .bd {
|
|
|
|
height: 100px;
|
|
|
|
/* Apply scrollbars for all browsers. */
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
.yui-panel-container.hide-scrollbars #mypanel .bd {
|
|
|
|
/* Hide scrollbars by default for Gecko on OS X */
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.yui-panel-container.show-scrollbars #mypanel .bd {
|
|
|
|
/* Show scrollbars for Gecko on OS X when the Panel is visible */
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
** For more information see
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=187435
|
|
|
|
+ Flash Movies appear on top of Overlay instances
|
|
-----------------------------------------------
|
|
Flash movies can appear on top of Overlay instances in IE and Gecko-based
|
|
browsers. To fix this problem, set the "wmode" of the Flash movie to either
|
|
"transparent" or "opaque" as indicated below:
|
|
|
|
Via the <object> tag:
|
|
|
|
<object>
|
|
<param name="wmode" value="opaque">
|
|
</object>
|
|
|
|
<object>
|
|
<param name="wmode" value="transparent">
|
|
</object>
|
|
|
|
Via the <embed> tag:
|
|
|
|
<embed wmode="transparent"> ... </embed>
|
|
<embed wmode="opaque"> ... </embed>
|
|
|
|
** For more information see
|
|
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523
|
|
|
|
+ Overlay instances not rendered at correct z-index in IE
|
|
-------------------------------------------------------
|
|
In IE, when an Overlay instance is rendered inside a relatively positioned
|
|
element the z-index of the Overlay instance is now relative to its
|
|
relatively positioned parent element. This is not a bug in the
|
|
Overlay class, but rather a bug in IE where relatively positioned elements
|
|
establish a new stacking context for their child nodes. To avoid this
|
|
bug it is recommend that all Overlay instances that need to be able to float
|
|
above any other element in the document be made direct descendants of the
|
|
<body> element.
|
|
|
|
** For more information see
|
|
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
|
|
|
|
+ Header elements for Panel instances using "Sam" skin shrinkwrap in IE 7
|
|
-----------------------------------------------------------------------
|
|
In IE 7 (Standards Mode) if a Panel instance is created without specifying a
|
|
value for the "width" configuration property the width of the Panel's
|
|
header element will shrinkwrap to the width of its text node. To avoid
|
|
triggering this bug in IE always specify a value for the "width"
|
|
configuration property when using Panel.
|
|
|
|
+ Panel instances render at 100% of the browser viewport
|
|
------------------------------------------------------
|
|
In IE 7 (Quirks Mode) and IE 6 (Quirks Mode and Standards Mode) if any of the
|
|
child nodes of a Panel instance's root element have "layout"
|
|
(http://msdn2.microsoft.com/en-us/library/ms533776.aspx) and no value
|
|
has been specified for the "width" configuration property, the Panel will
|
|
render at 100% of the width of browser's viewport. This bug will manifest
|
|
when using the "Sam" skin as layout is applied to the header, body and
|
|
footer elements (by setting the CSS "zoom" property of the element to "1" )
|
|
in order to get the negative margins required for the rounded corners to
|
|
render correctly. To avoid triggering this bug in IE always specify a value
|
|
for the "width" configuration property when using Panel.
|
|
|
|
+ Panel instances render at 2px wider when using "Sam" skin
|
|
---------------------------------------------------------
|
|
For the "Sam" skin a Panel instance's rounded corners are created via the
|
|
application of negative 1px left and right margins on the header, body and
|
|
footer elements. These negative margins will cause a Panel instance to be
|
|
rendered at 2px wider than the value specified by the "width" configuration
|
|
property. Therefore, when using the "Sam" skin consider the negative left
|
|
and right margins and subtract 2 from the value passed to the "width"
|
|
configuration property in order to have the Panel render at the desired
|
|
width. For example, to render a Panel 300px wide, pass a value of "298px"
|
|
to the "width" configuration property.
|
|
|
|
|
|
*** version 2.2.2 ***
|
|
|
|
+ Clicking the close button of a Panel (or any instance of a Panel subclass)
|
|
registered with an OverlayManager will no longer result in the Panel
|
|
receiving focus.
|
|
|
|
+ Overlay instances registered with an OverlayManager will now correctly
|
|
blur themselves when hidden.
|
|
|
|
+ Calling the "destroy" method of an Overlay instance will now result in it
|
|
being removed from its OverlayManager instance(s).
|
|
|
|
+ The DOM event listener for the event defined by the "focusevent"
|
|
configuration property of an OverlayManager instance is now removed from each
|
|
Overlay instance when it is removed from its OverlayManager.
|
|
|
|
+ All subscribers for an Overlay instance's "focus" and "blur" events are
|
|
now unsubscribed when it is removed from its OverlayManager.
|
|
|
|
|
|
*** version 2.2.1 ***
|
|
|
|
+ Made the default scope for all Custom Events published by Module, Overlay,
|
|
Panel, Tooltip, Dialog and SimpleDialog the widget instance. Previously the
|
|
default scope for Custom Events was inconsistent across classes; the default
|
|
scope for Custom Events published by Overlay was always the Overlay instance
|
|
whereas the Custom Events published by all of the other classes had no
|
|
default scope.
|
|
|
|
+ Added default scope for CustomEvents published by YAHOO.util.Config:
|
|
- Default scope for the "configChangedEvent" is now the Config instance.
|
|
- Default scope for Config property events is now the Config's owner (widget).
|
|
|
|
+ Panel and Tooltip now always convert the value of a DOM element's "tagName"
|
|
property to uppercase before evaluating it. This improves
|
|
XHTML compatibility.
|
|
|
|
+ Pressing the enter key while focused on a form field inside a Dialog will
|
|
now trigger the "click" event handler defined by the Dialog's default
|
|
button in IE and Firefox. Previously, this behavior only worked in Safari
|
|
and Opera.
|
|
|
|
+ Added a "yui" prefix to the default CSS class name for Module to be
|
|
consistent with the other Container family widgets.
|
|
|
|
+ Container/Panel's underlay shadow is now defined as partially-transparent
|
|
black rather than gray. This prevents the shadow from lightening the
|
|
background color of elements beneath it.
|
|
|
|
+ Fixed memory leaks in Panel and Dialog.
|
|
|
|
+ The Drag and Drop library is now a truly optional dependency for Panel and its
|
|
subclasses.
|
|
|
|
+ Panel "focus" and "blur" events are now fired when Panels are focused and
|
|
blurred via the "focus" and "blurAll" methods of YAHOO.widget.OverlayManager.
|
|
|
|
+ Panel instances rendered without setting the value for the "width"
|
|
configuration property will now have their "width" configuration
|
|
property set to the value of the Panel's element's "offsetWidth" property
|
|
when rendered. This fixes an issue in IE 6 and 7 where Panels that are
|
|
rendered without setting the "width" configuration property will only be
|
|
draggable by mousing down on the text inside the header, rather than anywhere
|
|
inside the header.
|
|
|
|
+ Refactored the Container family including the Config class to improve
|
|
performance, especially when working with a large number of instances in IE6.
|
|
|
|
|
|
|
|
*** version 2.2.0 ***
|
|
|
|
Module
|
|
- Removed hardcoded file paths for image roots. Affected properties
|
|
include:
|
|
- YAHOO.widget.Module.IMG_ROOT
|
|
- YAHOO.widget.Module.IMG_ROOT_SSL
|
|
- HTML elements, created via createElement, now use lowercase.
|
|
|
|
Panel
|
|
- To shield against CSS class collision, the following references now
|
|
have a "yui-" prefix:
|
|
- YAHOO.widget.Panel.CSS_PANEL now references CSS class "yui-
|
|
panel".
|
|
- YAHOO.widget.Panel.CSS_PANEL_CONTAINER now references CSS class
|
|
"yui-panel-container".
|
|
- Close button can now be configured via the CSS class "container-
|
|
close".
|
|
- HTML elements, created via createElement, now use lowercase.
|
|
|
|
Dialog
|
|
- To shield against CSS class collision, the following references now
|
|
have a "yui-" prefix:
|
|
- YAHOO.widget.Dialog.CSS_DIALOG now references CSS class "yui-
|
|
dialog".
|
|
- HTML elements, created via createElement, now use lowercase.
|
|
|
|
SimpleDialog
|
|
- Removed hardcoded file paths for SimpleDialog icons, which are now
|
|
configurable in CSS:
|
|
- YAHOO.widget.SimpleDialog.ICON_BLOCK now references CSS class
|
|
"blckicon".
|
|
- YAHOO.widget.SimpleDialog.ICON_ALARM now references CSS class
|
|
"alrticon".
|
|
- YAHOO.widget.SimpleDialog.ICON_HELP now references CSS class
|
|
"hlpicon".
|
|
- YAHOO.widget.SimpleDialog.ICON_INFO now references CSS class
|
|
"infoicon".
|
|
- YAHOO.widget.SimpleDialog.ICON_WARN now references CSS class
|
|
"warnicon".
|
|
- YAHOO.widget.SimpleDialog.ICON_TIP now references CSS class
|
|
"tipicon".
|
|
- To provide shield against CSS class collision the following
|
|
references now have a "yui-" prefix:
|
|
- YAHOO.widget.SimpleDialog.CSS_SIMPLEDIALOG now references CSS
|
|
class "yui-simple-dialog";
|
|
|
|
Tooltip
|
|
- To shield against CSS class collision, the following references now
|
|
have a "yui-" prefix:
|
|
- YAHOO.widget.Tooltip.CSS_TOOLTIP now references CSS class "yui-
|
|
tipicon" "yui-tt";
|
|
|
|
*** version 0.12.2 ***
|
|
|
|
Module
|
|
- Corrected issue where listener was not properly removed from resize
|
|
monitor element when "monitorresize" is disabled
|
|
|
|
Panel
|
|
- Fixed issue that would sometimes prevent select lists from working
|
|
properly in Firefox
|
|
|
|
Dialog
|
|
- Fixed error that would occur when trying to create a Dialog where
|
|
the first form element is set to "disabled"
|
|
- Modified "close" property handler for Dialog/SimpleDialog to call
|
|
"cancel" instead of "hide"
|
|
|
|
*** version 0.12.1 ***
|
|
|
|
All Classes
|
|
- "monitorresize" property now functions in situations where
|
|
document.domain has been modified.
|
|
- YAHOO.widget.Module.textResizeEvent now fires when the font size is
|
|
changed (except for Opera, which uses "zoom" functionality that
|
|
prevents this)
|
|
- Event listeners attached to container elements are now properly
|
|
purged on destroy using YAHOO.util.Event.purgeElement
|
|
|
|
Panel
|
|
- Fixed issue where focus events were broken on the page when a modal
|
|
Panel was created
|
|
|
|
Dialog
|
|
- Fixed bug where hitting "enter" on a Dialog was forcing the default
|
|
submission behavior of the form's action to execute
|
|
- Dialog no longer tries to give focus to hidden form elements.
|
|
- Replaced references in Panel with   for XHTML
|
|
compliance.
|
|
- Fixed issue that was preventing Safari from successfully using the
|
|
getData() function
|
|
|
|
*** version 0.12 ***
|
|
|
|
All Classes
|
|
- New documentation format implemented, and removed unnecessary
|
|
prototype null references previously used for generating
|
|
documentation
|
|
|
|
Config
|
|
- Added 'undefined' check when reading initial properties for
|
|
.reset()
|
|
- Fixed Firefox warning on .resetProperty()
|
|
- Fixed issue preventing resetProperty() from resetting values
|
|
correctly
|
|
|
|
Module
|
|
- Removed unused "childNodesInDom" property
|
|
|
|
Overlay
|
|
- Converted center() to use Dom utility
|
|
- Fixed configVisible() to properly detect actual visible/hidden
|
|
status in Internet Explorer, which reports "inherit" for all elements
|
|
by default.
|
|
- Updated onDomResize to properly reapply "context" property
|
|
- Unified scroll/resize handlers so that they fire properly (when the
|
|
event has completed) as opposed to constantly (as seen in Mozilla-
|
|
based browsers)
|
|
|
|
Panel
|
|
- Modified modality mask to show before Panel is shown (prior to any
|
|
animation)
|
|
- Modified buildWrapper to eliminate cloning of the initial markup
|
|
module, which fixes issues with select options not maintaining their
|
|
default selections in IE
|
|
- Modality mask is now z-indexed properly so that the mask z-index is
|
|
always one less than the Panel z-index
|
|
|
|
Dialog
|
|
- Fixed Connection to get "action" attribute using getAttribute, to
|
|
allow for form fields named "action"
|
|
- Added support for "GET" by retrieving the form "method" rather than
|
|
always defaulting to "POST"
|
|
|
|
KeyListener
|
|
- Fixed to work properly with Safari 2.0 by matching against keyCode
|
|
or charCode
|
|
|
|
*** version 0.11.4 ***
|
|
|
|
- Panel: Modality mask is now properly removed from DOM on Panel
|
|
destroy.
|
|
|
|
*** version 0.11.3 ***
|
|
|
|
- Module: Fixed SSL warning issue in IE
|
|
- Overlay: Fixed memory leak related to iframe shim in IE
|
|
- Panel: No focusable elements under the mask can now be tabbed to
|
|
- Panel: Set Panel container overflow to hidden to fix scrolling issue
|
|
in Opera 9
|
|
|
|
*** version 0.11.2 ***
|
|
|
|
- All: JsLint optimization
|
|
- Overlay: Fixed SSL issues with monitorresize property
|
|
- OverlayManager: Fixed z-index incrementing issues
|
|
- Dialog: Form elements called "name" will now function properly
|
|
- Dialog: Removed unnecessary scope:this reference
|
|
|
|
*** version 0.11.1 ***
|
|
|
|
- Tooltip: Removed incorrect logger statement
|
|
- Dialog: Corrected logic that was causing browser lockup in IE for
|
|
SimpleDialog
|
|
- Dialog: Fixed "firstButtom" typo
|
|
|
|
*** version 0.11.0 ***
|
|
|
|
- toString function added to all classes for easy logging
|
|
- YAHOO.extend is now being used for inheritance on all container
|
|
classes
|
|
- Module: monitorresize feature now works on all browsers
|
|
- Module: Fixed bug with image root and isSecure
|
|
- Overlay: Fixed bugs related to IFRAME shim positioning
|
|
- Overlay: center() now works in quirks mode
|
|
- Overlay: Overlay now has a custom destroy() method that also removes
|
|
the IFRAME shim
|
|
- OverlayManager: Fixed bug in the prototype that was preventing
|
|
multiple Managers on one page
|
|
- OverlayManager: focusEvent now fires at all appropriate times
|
|
- Tooltip: context can now be specified as an array, so Tooltips can be
|
|
reused across multiple context elements
|
|
- Tooltip: preventoverlap now functions properly for large context
|
|
elements (i.e, images)
|
|
- Tooltip: fixed bugs regarding setTimeout
|
|
- Tooltip: added mousemove event to allow for more accurate Tooltip
|
|
positioning
|
|
- Panel: added dragEvent for monitoring all event handlers for drag and
|
|
drop
|
|
- Panel: modality mask is now resized on scroll
|
|
- Panel: KeyListeners are now properly destroyed when the Panel is
|
|
destroyed
|
|
- Panel: Header is now sized properly in quirks mode
|
|
- Dialog: Blinking cursor issue is fixed for Firefox
|
|
- Dialog: callback object for Connection is now public (this.callback)
|
|
- Dialog: onsuccess/onfailure properties removed (as a result of the
|
|
public callback object)
|
|
- Dialog: Dialog is now invisible by default
|
|
- Dialog: Buttons are now properly cleaned up on destroy
|
|
|
|
*** version 0.10.0 ***
|
|
|
|
* Initial release
|