1 - Description:

 

An element for docking windows, shortcuts, widgets, and menus, in order to manage increasingly busy application environments.

http://en.wikipedia.org/wiki/Taskbar

 

Currently utilizes ui.dialog with the addition of a minimize function for windowing. Windows have a 'handle' registered to the taskbar.

Utilizing a standard taskbar design, the current idea incorporates:

1) a 'Start' menu button which expands to display a div whose contents are currently outside of the scope of this plugin

2) a 'quicklaunch' area for shortcuts

3) a 'handlebar' for handles to windows. 

 

The specifics of what to add to the taskbar (shortcuts, task tray entries, menu, etc) are left to the developer, taskbar merely provides an interface for a developer to display them and provide a consolidated view and interaction point for the current environment of a web application. 

 

I do not have a firm grasp of MVC as an idea, so correct this if it is is wrong, but I'm thinking that ui.taskbar would effectively be implementing the View and Controller portions, leaving the models to vary and be defined by developers.

 

 

Taskbar basics

• Handlebar
  • Displays window handles.
    • Each open window maps to one window handle on the taskbar.
    • Window handles display the text name of their window and optionally an icon
    • When left-clicked, handles either moveToTop, minimize, or restore their window, dependent upon window state.
    • When right-clicked, handles display a context-menu (close, minimize, etc)
• Quicklaunch
  • Provides shortcuts to windows, widgets, etc.
  • User clicks on an "add quick-launch shortcut" interaction point (currently undefined)
    • Shortcut placed in quicklaunch area, simply an icon with a mouseover text.
    • User can then open the referenced item by clicking on the shortcut icon
    • Right clicking a shortcut opens a context menu for shortcut deletion, etc.
• Start menu
  • A button that opens a developer-defined area directly above the start menu button. This can be filled with any content, but most likely will be used for menus.
  •  

 

Dependencies

• Dialog
  • Windowing
• Core
  • Obvious
• Position
  • Position elements such as start menu and the taskbar itself
• Buttons
  • Standardized interaction element

 

Can include

• Toolbar
  • Taskbar should include the ability to dock toolbars to the taskbar.
• Menu
  • Optionally for the start menu 

 

Taskbar additions

• Task tray area for active background widgets such as instant messaging, notifications, etc.
• Toolbar - allow any toolbar to be docked to the taskbar
• Date / time (perhaps redundant )

 

Typical use cases - 

• A complex web application that requires a point to launch, manage, and monitor activities and tasks.
• Sub-taskbars could be utilized to provide miniature

 

Markup, style behavior notes

 

Example

 

---

 

2 - Visual Design:

 

 

 

---

 

 

3 - Functional Specifications/Requirements:

 

(Detailed descrition of how the script will be structured: defaults, options, architecture, extensibility, etc.)

status legends:

     âˆš - implemented

     Â± - partially implemented / still some bugs to solve

     Â¤ - currently under devellopment

    âˆ… - todo / not yet implemented

     x - still thinking / need discussion

 

Options:

• menuButtonText:
• zIndex
• openWindowFilter
• includeStartMenu
• includeQuickLaunch 
• includeWindowFilter
• dialogDefaults:

Callbacks :

• windowOpened
• windowClosed
• windowMinimized
• windowRestored
• handleClicked
• menuOpened
• menuClosed
• quicklaunchClicked
• quicklaunchAdded
• quicklaunchDeleted
• [ other callbacks? ] 

 

Methods:

• restoreWindow
• minimizeWindow
• addWindow
• removeWindow
• addQuicklaunch
• removeQuicklaunch
• destroy()
• [ other methods? ] 

 

Keyboard:

•  

 

Specificiations:

•  

 

---

 

4 - Markup & Style:

 

     4.1 Initial markup examples

 

     The most typical situation would be to transform a link or button element into a UI button but you should be able to call this on any element.

 

<div id="#taskbar">
<div class="ui-taskbar-startmenu-container"></div> [optional]
</div>

 

     4.2 Recommended transformed HTML markup

 

        Please recommend any changes.

 

<div id="#taskbar" class="ui-taskbar ui-widget ui-widget-header">     

<div class="ui-taskbar-startmenu">     
<div class="ui-taskbar-startmenu-button ui-state-default"></div>

<div class="ui-taskbar-startmenu-container ui-helper-hidden"></div>
</div>
<div class="ui-taskbar-quicklaunch">
<span class="ui-taskbar-quicklaunch-icon"></span>

<span class="ui-taskbar-quicklaunch-icon"></span>

</div>
<div class="ui-taskbar-handlebar">
<span class="ui-taskbar-handlebar-handle"></span>
</div>
</div>

     4.3 Accessibility recommendation

 

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

 

     4.4 CSS & Theme

 

•  Taskbar main element
  • Recommend ui-widget-header and ui-widget
    • ui-widget-header provides the most relevant taskbar background aesthetic 
    • Perhaps make a container for the ui-widget-header and make it the only child of #taskbar, with the other elements as children ?
  • Either perma-dock at bottom or allow for optional positioning at top ?
    • A vertical taskbar would require a little more effort but is possible.
  • What if a developer only wants to embed the taskbar into another element? 
    • For example, using the taskbar for the quicklaunch capability only
• Startmenu 
• Quicklaunch
  • Quicklaunch shortcuts

• Handlebar
• Handles

 

---

 

5 - Latest version of plugin:

 

coming soon

 

 

---

 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like features and options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 

---