The focus for this component should be a panel with the sliding in/out behaviors that you can nest other components inside (ace:menu, etc).

r51582: added initial version of ace:drawerPanel component

r51591: added ability to specify the position of the drawer (top, right, bottom, left); added options to show the bars icon to open and close the drawer; added option to specify a different container to display the drawer instead of the window; made various other corrections

r51592: added overview demo to showcase

r51594: fix to only set position:fixed; when the container is the window; fix to avoid applying any collision detection when positioning the panel in a container to ensure that it's actually displayed inside the container even if the container is out of scroll

Currently, the only supported effect is slide. Of the available effects in jQueryUI, I think the following could be suitable/feasible for the drawer panel: slide, fold, fade, drop, clip, and blind.

From jQuery UI mobile, we could possibly port the reveal and push effects, which can be seen here:

https://api.jquerymobile.com/panel/

For this initial implementation of this component I think we could restrict the effect choices to slide (default), fade, and drop.

Showcase Demo Review Notes

• More whitespace between config options border and top of show/hide buttons.
• Show/Hide buttons could be one button that toggles between states.
• Default slide delay should be much shorter, the effect is taking too long to complete.
• The div at the bottom is far too long. Just make it slightly longer than the height of the panel contents.
• How does the handle button work in terms of how where it gets rendered? I don't see it being rendered inside the div for the open, for example. Very likely the developer would want to place it themselves. Perhaps we need a separate child subcomponent for the handle that they can place where they want and bind to the drawer component?

r51641: added effect attribute with support for drop, fade, and slide; reduced effect duration to 500ms

r51642: added more whitespace between config options border and top of show/hide buttons; modified Show/Hide buttons to toggles between states; made div container shorter and improved its styling; specified literal client ids instead of using component binding; added HTML opening handles for the div container to illustrate how they can be added and custom styled

Copying explanation sent to Liana, regarding why the opening handle is not supported when the container isn't the whole window:

That behaviour is mentioned in the TLD documentation. The handle is only applicable when the drawer is set for the whole viewport. This is so, because it's easy to position the handles in that case, since they all have a fixed position. When applying the drawer to a specific div, we could run into all kinds of issues. First of all, we would have to dynamically add the handle markup inside the div, which is something very unorthodox, and we would have to remove that code when unrendering/updating the component. That container div would also have to be absolute or relative positioned for this to work. Another option would be to require that the component be nested inside the div or the component where it should be displayed, but if the drawer is nested inside a component, it would be hard to determine the actual HTML node the drawer should be applied to, as the immediate parent could just be a span or an inline element, and, again, the element would have to be relative or absolute positioned. The easiest thing would be to simply create a handle with pure HTML/CSS, which is very easy to do. We could illustrate this in another demo.

Looks good.

However, having the Show/Hide button toggle now raises an issue where it can go out of sync if the user opens the drawerPanel with the Show button, and closes it with the handle. The component should emit a show and and a hide client event, which the demo can register for to keep the Show/Hide toggle button in sync. Of course, these events would also be useful for applications.

r51667: added open and close ajax events
r51668: modified demo to use open and close ajax events
r51559: fixes to synchronize with the state of the Open/Close button

Once this is finished for EE 4.2 it needs to be backported to the EE 3.3 maintenance branch for P05 and the requesting customer.

Verified functionality of showcase ace:drawerPanel demo, ICEfaces 4 trunk r51673, Tomcat 8, MS Edge, IE 11, 10, 9, 8, FF 47, Chrome 59.

r51579: added 'closeOnOutsideClick' attribute to enable closing the drawer when clicking or touching anywhere on the page outside the drawer; changed API and documentation to use the 'open' and 'close' commands instead of 'show' and 'hide' to better reflect the drawer analogy
r51680: modified demo to use new API names

Tested showcase ace:drawerPanel demo using ICEfaces 4 trunk r51682, Tomcat 8, IE 11, FF 47, Chrome 59.
After deselecting 'Show handle to close', then pressing 'Open' button the drawer does not open and a console error is seen:

VM177:184 Uncaught TypeError: this.jq.parent(...).children(...).close is not a function
    at new ice.ace.DrawerPanel (eval at window.ice.icefaces.window.ice.globalEval (coalesced.js.jsf?ln=ice.core&dgst=m2ofw5:13576), <anonymous>:184:58)
    at Object.ice.ace.create (coalesced.js.jsf?ln=ice.core&dgst=m2ofw5:14032)
    at Object.ice.ace.lazy (coalesced.js.jsf?ln=ice.core&dgst=m2ofw5:14030)
    at ice.ace.lazy.registry.form:drawer (<anonymous>:1:67)
    at Object.ice.ace.instance (coalesced.js.jsf?ln=ice.core&dgst=m2ofw5:14029)
    at HTMLButtonElement.onclick (VM192 showcase.jsf?grp=ace:drawerPanel:1)

r51688: fixed function name; made correction in TLD documentation

This fixes issue above.

r51692: added entries for ace:drawerPanel in AceSymbolicResourceHandler.java and resource-dependency.xml

r51693: backported ace:drawerPanel component to the EE 3.3 maintenance branch

Verified console error resolved ICEfaces 4 trunk r51694, Tomcat 8, IE 11, FF 47, Chrome 59. There is no content for the wiki at: http://www.icesoft.org/wiki/display/ICE/DrawerPanel

r51740: added wiki page and committed various corrections to the documentation and other settings
r51741: added comments to the demo to explain how to code opening handles

backport showcase example from 4.x trunk to 3.3 maintenance and 3.3.0_P05-Beta

rev 51762 on ossrepo/icefaces-ee/tags/icefaces-ee-3.3.0.GA_P05-BETA backports the examples from ICEfaces 4 showcase for drawerPanel.
Note the js errors for ice.ace.instance. Looked in the Meta file and no widgetVar attribute.

r51763: fixed namespace, widgetvar and path errors in the demos (ossrepo/icefaces-ee/tags/icefaces-ee-3.3.0.GA_P05-BETA)

backport showcase demo to 3.3.0 maintenance branch

rev 51781 for 3.3.0 maintenance branch backport to showcase example app

Verified ICEfaces EE-3.3.0 maintenance branch r51820, Tomcat 8, MS Edge, IE 11, 10, 9, 8, 7, FF 55, Chrome 60.

The left menu is labeled incorrectly as Configuration instead of Overview. See screenshot drawer.png

for subtitle fix in menu from Configuration to Overview

rev 51821

Verified ICEfaces EE-3.3.0 maintenance branch r51826