MozillaWiki

Labs/Jetpack/JEP/33: Difference between revisions

Page Discussion

Labs/Jetpack/JEP/33 (view source)

Revision as of 22:16, 4 December 2009

235 bytes added ,  4 December 2009
→‎JEP 33 - Window
(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…')
 
Line 3: Line 3:
== JEP 16 - SlideBar ==
== JEP 16 - SlideBar ==


* Champion: Edward Lee <edilee at mozilla dot com>
* Champion: Daniel Buchner <daniel@mozilla.com>
* Status: Implementing
* Status: Concept
* Type: API Track
* Type: API Track
* Created: 17 June 2009
* Created: 2 Dec 2009
* Reference Implementation: jetpack.future.import("slideBar")
* Reference Implementation: jetpack.addElement('window')
* [[Labs/Jetpack/JEPs|JEP Index]]
* [[Labs/Jetpack/JEPs|JEP Index]]


=== Introduction and Rationale ===
=== 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.
Window for Jetpack is a crucial API enhancement that allows developers using the Jetpack extension development platform to extend both functional and presentational capabilities of their Jetpacks. Window abilities are the gateway to a large, uncharted mass of applications that can be developed in concert with the other useful tools provided by Jetpack.
 
When a SlideBar feature is selected, its contents will be revealed from behind the current web page.


=== Proposal ===
=== Proposal ===


Add new SlideBar features:
A new Window instantiation:
<code>jetpack.slideBar.append(options)</code>
<code>jetpack.addElement('window', {options})</code>


Where <tt>options</tt> is a property hash:
Where <tt>options</tt> is a property hash:
* <tt>icon</tt> <i>uri</i> - icon to show in the SlideBar
* <tt>icon</tt> <i>uri</i> - icon to show in the Title section of the window
* <tt>html</tt> <i>text/xml</i> - html content for the feature
* <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>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>width</tt> <i>num</i> - initial width of the Window (320 - standard smartphone width resolution)
* <tt>persist</tt> <i>bool</i> - default slide behavior when being selected
* <tt>height</tt> <i>num</i> - initial height of the Window (480 - standard smartphone height resolution)
* <tt>autoReload</tt> <i>bool</i> - automatically reload content on select
* <tt>persist</tt> <i>bool</i> - will the Window stay open when a user closes the browser instance?
* <tt>onClick</tt> <i>func</i> - callback when the icon is clicked
* <tt>onFocus</tt> <i>func</i> - event triggered when the Window is focused
* <tt>onSelect</tt> <i>func</i> - callback when the feature is selected
* <tt>onBlur</tt> <i>func</i> - event triggered when the Window losses focus
* <tt>onReady</tt> <i>func</i> - callback when the feature is loaded
* <tt>onReady</tt> <i>func</i> - event triggered when the Window's content is loaded and ready for manipulation.


The callbacks are passed a property hash:
All events are passed the following property hash:
* <tt>icon</tt> - node representing the icon in the SlideBar
* <tt>icon</tt> - node representing the icon in the SlideBar
** <tt>icon.reload()</tt> - reload icon to original icon
** <tt>icon.default()</tt> - reload icon to original icon
* <tt>contentDocument</tt> - document element of the content area
* <tt>contentDocument</tt> - document element of the content area
** <tt>contentDocument.reload()</tt> - reload content to original url/html
* <tt>position</tt> - an object that includes the Window's position on the screen: {x: 400, y: 500}
* <tt>close()</tt> - slide close the SlideBar
* <tt>location</tt> - the URL of the window, http://, chrome://
* <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 ===
=== Example ===


Show mozilla.com in the SlideBar and change the icon when clicked.
Show mozilla.com in a Window and change the background color of the document when clicked.
 
<pre class="brush:js;toolbar:false;">
<pre class="brush:js;toolbar:false;">
jetpack.slideBar.append({
jetpack.addElement('window',
  url: "http://www.mozilla.com/",
    url: "http://www.mozilla.com/",
  width: 300,
    width: 300,
  onClick: function(slide) {
    onFocus: function(window) {
    slide.icon.src = "chrome://branding/content/icon48.png";
        window.contentDocument.documentElement.style.background = '#ffffff';
  }
    },
    onBlur: function(){
        window.contentDocument.documentElement.style.background = '#ff0000';
    }
});
});
</pre>
</pre>
Dandonkulous
1,273

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/187827"