1,273
edits
Changes
Created page with '{{draft}} == JEP 16 - SlideBar == * Champion: Edward Lee <edilee at mozilla dot com> * Status: Implementing * Type: API Track * Created: 17 June 2009 * Reference Implementation…'
{{draft}}
== 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")
* [[Labs/Jetpack/JEPs|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:
<code>jetpack.slideBar.append(options)</code>
Where <tt>options</tt> is a property hash:
* <tt>icon</tt> <i>uri</i> - icon to show in the SlideBar
* <tt>html</tt> <i>text/xml</i> - html content for the feature
* <tt>url</tt> <i>uri</i> - url to load content for the feature
* <tt>width</tt> <i>num</i> - width of the content area and selected slide size
* <tt>persist</tt> <i>bool</i> - default slide behavior when being selected
* <tt>autoReload</tt> <i>bool</i> - automatically reload content on select
* <tt>onClick</tt> <i>func</i> - callback when the icon is clicked
* <tt>onSelect</tt> <i>func</i> - callback when the feature is selected
* <tt>onReady</tt> <i>func</i> - callback when the feature is loaded
The callbacks are passed a property hash:
* <tt>icon</tt> - node representing the icon in the SlideBar
** <tt>icon.reload()</tt> - reload icon to original icon
* <tt>contentDocument</tt> - document element of the content area
** <tt>contentDocument.reload()</tt> - reload content to original url/html
* <tt>close()</tt> - slide close the SlideBar
* <tt>notify()</tt> - slide open (if necessary) and animate icon in the SlideBar
* <tt>slide(num, { persist: <i>bool</i> })</tt> - slide to the provided size and optionally persist the SlideBar
=== Example ===
Show mozilla.com in the SlideBar and change the icon when clicked.
<pre class="brush:js;toolbar:false;">
jetpack.slideBar.append({
url: "http://www.mozilla.com/",
width: 300,
onClick: function(slide) {
slide.icon.src = "chrome://branding/content/icon48.png";
}
});
</pre>
== 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")
* [[Labs/Jetpack/JEPs|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:
<code>jetpack.slideBar.append(options)</code>
Where <tt>options</tt> is a property hash:
* <tt>icon</tt> <i>uri</i> - icon to show in the SlideBar
* <tt>html</tt> <i>text/xml</i> - html content for the feature
* <tt>url</tt> <i>uri</i> - url to load content for the feature
* <tt>width</tt> <i>num</i> - width of the content area and selected slide size
* <tt>persist</tt> <i>bool</i> - default slide behavior when being selected
* <tt>autoReload</tt> <i>bool</i> - automatically reload content on select
* <tt>onClick</tt> <i>func</i> - callback when the icon is clicked
* <tt>onSelect</tt> <i>func</i> - callback when the feature is selected
* <tt>onReady</tt> <i>func</i> - callback when the feature is loaded
The callbacks are passed a property hash:
* <tt>icon</tt> - node representing the icon in the SlideBar
** <tt>icon.reload()</tt> - reload icon to original icon
* <tt>contentDocument</tt> - document element of the content area
** <tt>contentDocument.reload()</tt> - reload content to original url/html
* <tt>close()</tt> - slide close the SlideBar
* <tt>notify()</tt> - slide open (if necessary) and animate icon in the SlideBar
* <tt>slide(num, { persist: <i>bool</i> })</tt> - slide to the provided size and optionally persist the SlideBar
=== Example ===
Show mozilla.com in the SlideBar and change the icon when clicked.
<pre class="brush:js;toolbar:false;">
jetpack.slideBar.append({
url: "http://www.mozilla.com/",
width: 300,
onClick: function(slide) {
slide.icon.src = "chrome://branding/content/icon48.png";
}
});
</pre>
