Docker

Docker is a component to deal with multiple Popups. It acts as a dock, or taskbar, like you would find in an operating system. It displays one icon element per Popup. Grouped Popups will also display only one icon with a count overlay of the number of Popups grouped within that one Popup.

Stack

Extends

 Uxi, Touch

Requires

 Templater

Config

 {
       anim_show: 'fade slide',
       groups : {...}
 }

OML

Format

 {"selector:Docker":{CONFIG}}

Example

 {"#taskbar:Docker":{
       "groups":{
            "user":{   
                 "icon":{
                      "default": "/img/user.png",
                      "bind":{
                           "lookup": "Views.MyView",
                           "method": "getIcon",
                           "property": "icon" 
                      }
                 }
             }     
        }          
 }}

groups define each group that will be supported by the component. A group is defined per Popup. Popups with the same group can me merged into a single Popup.

In this example, we only support one group, users (but you could have as many groups as you desire). The default icon for this group is set to /img/user.png.

An icon can also be looked up by passing an object that will be present within the Popup. In this example, we lookup the icon in a view Views.MyView present within the Popup, that has a method getIcon that returns an object. We then use the property icon of this object to set the icon.

You can of course name your method as you please, as long as it returns an object.

Methods

Docker exposes some methods to control what to add/remove but they are already automatically handled when App triggers events related to grouping and ungrouping popups. They are here as reference, or if you want to add more items to the Docker, that would not be Popups.

Add Popup to the dock

 myDocker.addItem(_POPUP_, _OPTIONAL_ICON_);

Remove Popup from the dock

 myDocker.removeItem(_POPUP_ID_);

Find a docked item given an object class and an id that the item might have down its own tree

 myDocker.findItem(_CLASS_, _ID_);

Same as previous but reveals/shows the item after it has been found

 myDocker.findShow(_CLASS_, _ID_);

Events

 OGX.Docker.SHOW