577
edits
Labs/Jetpack/Reboot/JEP/110: Difference between revisions
→Proposal
Dandonkulous (talk | contribs) |
|||
| Line 8: | Line 8: | ||
=== Proposal === | === Proposal === | ||
Tabs are a fundamental unit of the browser (for now). We need reasonable ways | |||
of interacting with them. | |||
Import lives in the "tabs" module. | |||
<pre class="brush:js"> | |||
/** | |||
/* tabs is an immutable array of Tab objects | |||
/** | |||
tabs = require("tabs"); | |||
/** | |||
/* These are global callbacks that come into affect when | |||
/* any of these happen to any tab. | |||
/* @param eventName {string} | |||
/* Is one of focus, blur, close, open, load, domready, mozafterpaint, | |||
/* move | |||
/* @param callback {function} | |||
/* The function gets passed an "event" object and the the "this" of | |||
/* that function is the tab in question. | |||
/** | |||
tabs.bind( eventName, callback ); | |||
/** | |||
/* Unbinds the event handler | |||
/* Without any arguments, all bound events are removed. You can also unbind | |||
/* custom events registered with bind. If the type is provided, all bound | |||
/* events of that type are removed. If the function that was passed to bind is | |||
/* provided as the second argument, only that specific event handler is | |||
/* removed. | |||
/* @param [eventName] {string} | |||
/* @param [func] {function} | |||
/** | |||
tabs.bind( eventName, func ); | |||
/** | |||
/* This causes an event to occur or a message to be sent to all tabs. | |||
/* @param eventName {string} | |||
/* The event to trigger. For now this is only "open" | |||
/* @param data {string|object} | |||
/* In the case of open this is the URL, if this is a dictionary | |||
/* then otherData won't be needed. | |||
/* @param [otherData] {object} | |||
/* Other data to be passed to the event handler. | |||
/** | |||
tabs.trigger( eventName, data, otherData ) | |||
// Get one of the tab objects | |||
var tab = tab[0]; | |||
/** | |||
/* Same as for tabs, but effects the particular tab in question. | |||
/** | |||
tab.bind( eventName, callback ) | |||
/** | |||
/* Same as for tabs, but effects the particular tab in question. | |||
/** | |||
tab.unbind( eventName, callback ) | |||
/** | |||
/* Mostly the same as for the tabs case, the only difference being: | |||
/* @param eventName {string} | |||
/* Is one of focus, close, load, move | |||
/** | |||
tab.trigger( eventName, data, otherData ) | |||
/** | |||
/* The properties for the tabs. | |||
/* @prop style {cssStyleString} | |||
/* The css style string for the tab. | |||
/* @prop index {integer} | |||
/* The index the tab is displayed at in its parent window | |||
/* @prop location {url} URL of the tab | |||
/* @prop title {string} The title of the page | |||
/* @prop favicon {url} URL of the displayed favicon | |||
/* @prop [window] {jetpack window} The window the tab belongs to | |||
/* @prop [thumbnail] {canvas} A thumbnail of the currently displayed page | |||
/** | |||
tab.property | |||
</pre> | |||
== Sugar Functions == | |||
<pre class="brush:js"> | |||
// Sugar for tabs.on functionality | |||
tabs.onFocus( function ) | |||
tabs.onBlur( function ) | |||
tabs.onClose( function ) | |||
tabs.onOpen( function ) | |||
tabs.onLoad( function ) | |||
tabs.onDomReady( function ) | |||
... | |||
// and the same for each Tab instance. | |||
// Sugar for tabs.trigger functionality | |||
tabs.open( url, options ) | |||
... | |||
// And the same for each Tab instance, plus | |||
tab.move( index, options ) | |||
// index = absolute index, "+3"/"-1" for relative | |||
// options for moving to other windows | |||
</pre> | |||
=== Difficulty === | |||
This is a medium difficulty to implement, but made easier by a pre-existing implementation. | |||
=== Key Issues === | === Key Issues === | ||