1,273
edits
Dandonkulous (talk | contribs) No edit summary |
Dandonkulous (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
{{draft}} | {{draft}} | ||
== JEP 33 - | == JEP 33 - Gadget == | ||
* Champion: Daniel Buchner <daniel@mozilla.com> | * Champion: Daniel Buchner <daniel@mozilla.com> | ||
| Line 7: | Line 7: | ||
* Type: API Track | * Type: API Track | ||
* Created: 2 Dec 2009 | * Created: 2 Dec 2009 | ||
* Reference Implementation: new | * Reference Implementation: new Gadget({options}) | ||
* [[Labs/Jetpack/JEPs|JEP Index]] | * [[Labs/Jetpack/JEPs|JEP Index]] | ||
=== Introduction and Rationale === | === Introduction and Rationale === | ||
Gadget 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. Gadget 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. | |||
=== Proposal === | === Proposal === | ||
A new | A new Gadget instantiation: | ||
<code>new | <code>new Gadget({options})</code> | ||
Where <tt>options</tt> is an object: | Where <tt>options</tt> is an object: | ||
Properties | Properties | ||
* <tt>icon</tt> <i>uri</i> - icon to show in the title bar section of the | * <tt>icon</tt> <i>uri</i> - icon to show in the title bar section of the Gadget | ||
* <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> - initial width of the | * <tt>width</tt> <i>num</i> - initial width of the Gadget (defaults: 320px - standard smartphone width resolution) | ||
* <tt>height</tt> <i>num</i> - initial height of the | * <tt>height</tt> <i>num</i> - initial height of the Gadget (defaults: 480px - standard smartphone height resolution) | ||
* <tt>allowMaximize</tt> <i>bool</i> - specifies whether or not a Gadget will have the ability to maximize | |||
* <tt>allowMaximize</tt> <i>bool</i> - specifies whether or not a | * <tt>allowResize</tt> <i>bool</i> - specifies whether or not a user can resize a Gadget | ||
* <tt>allowResize</tt> <i>bool</i> - specifies whether or not a user can resize a | |||
Events | Events | ||
* <tt>onFocus</tt> <i>func</i> - event triggered when the | * <tt>onFocus</tt> <i>func</i> - event triggered when the Gadget is focused | ||
* <tt>onBlur</tt> <i>func</i> - event triggered when the | * <tt>onBlur</tt> <i>func</i> - event triggered when the Gadget losses focus | ||
* <tt>onReady</tt> <i>func</i> - event triggered when the | * <tt>onReady</tt> <i>func</i> - event triggered when the Gadget's content is loaded and ready for manipulation | ||
* <tt>onMinimize</tt> <i>func</i> - event triggered when the | * <tt>onMinimize</tt> <i>func</i> - event triggered when the Gadget is minimized to the task bar | ||
* <tt>onMaximize</tt> <i>func</i> - event triggered when the | * <tt>onMaximize</tt> <i>func</i> - event triggered when the Gadget is maximized | ||
* <tt>onRestore</tt> <i>func</i> - event triggered when the | * <tt>onRestore</tt> <i>func</i> - event triggered when the Gadget is restored from the task bar | ||
All events are passed the following property hash: | All events are passed the following property hash: | ||
* <tt>icon</tt> - a pointer to the icon used in the | * <tt>icon</tt> - a pointer to the icon used in the Gadget title bar. | ||
** <tt>icon.toDefault()</tt> - reload icon to original icon | ** <tt>icon.toDefault()</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>position</tt> - an object that includes the | * <tt>position</tt> - an object that includes the Gadget's position on the screen: {x: 400, y: 500} | ||
* <tt>location</tt> - the URL of the window, http://, chrome:// | * <tt>location</tt> - the URL of the Gadget's window object, http://, chrome:// | ||
=== Example === | === Example === | ||
Show mozilla.com in a | Show mozilla.com in a Gadget and change the background color of the document when clicked. | ||
<pre class="brush:js;toolbar:false;"> | <pre class="brush:js;toolbar:false;"> | ||
new | new Gadget({, | ||
url: "http://www.mozilla.com/", | url: "http://www.mozilla.com/", | ||
width: 300, | width: 300, | ||
onFocus: function( | onFocus: function(gadget) { | ||
gadget.contentWindow.document.body.style.background = '#ffffff'; | |||
}, | }, | ||
onBlur: function(){ | onBlur: function(gadget){ | ||
gadget.contentWindow.document.body.style.background = '#ff0000'; | |||
} | } | ||
}); | }); | ||
</pre> | </pre> | ||
edits