Labs/Jetpack/JEP/16
From MozillaWiki
JEP 16 - SlideBar
- Champion: Edward Lee <edilee at mozilla dot com>
- Status: Implementing
- Type: API Track
- Created: 17 June 2009
- Reference Implementation: jetpack.future.import("slideBar")
- JEP Index
Introduction and Rationale
SlideBar is a reinvention of the old sidebar feature of browsers. They allow quick access to a wide range of both temporary and permanent information at the side of your browser window.
When a SlideBar feature is selected, its contents will be revealed from behind the current web page.
Proposal
Add new SlideBar features:
jetpack.slideBar.append(options)
Where options is a property hash:
- icon uri - icon to show in the SlideBar
- html text/xml - html content for the feature
- url uri - url to load content for the feature
- width num - width of the content area and selected slide size
- persist bool - default slide behavior when being selected
- autoReload bool - automatically reload content on select
- onClick func - callback when the icon is clicked
- onSelect func - callback when the feature is selected
- onReady func - callback when the feature is loaded
The callbacks are passed a property hash:
- icon - node representing the icon in the SlideBar
- icon.reload() - reload icon to original icon
- contentDocument - document element of the content area
- contentDocument.reload() - reload content to original url/html
- close() - slide close the SlideBar
- notify() - slide open (if necessary) and animate icon in the SlideBar
- slide(num, { persist: bool }) - slide to the provided size and optionally persist the SlideBar
Example
Show mozilla.com in the SlideBar and change the icon when clicked.
jetpack.slideBar.append({ url: "http://www.mozilla.com/", width: 300, onClick: function(slide) { slide.icon.src = "chrome://branding/content/icon48.png"; } });