1,273
edits
Labs/Jetpack/JEP/23: Difference between revisions
no edit summary
Dandonkulous (talk | contribs) No edit summary |
|||
| (10 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{draft}} | {{draft}} | ||
'''CONSIDER THE FOLLOWING''': ''We could augment our implementation of this UI mechanism by including aspects of [http://www.clientcide.com/wiki/cnet-libraries/07-ui/07.5-stickywin.pointytip '''Clientcide's PointyTips''']. I believe it may help us cover a broader set of use-cases.'' | |||
DISCUSSION: Should we pursue an implementation that closely mirrors this existing venture into similar territory? - | |||
== JEP 23 - Panels == | == JEP 23 - Panels == | ||
| Line 21: | Line 27: | ||
=== Proposal === | === Proposal === | ||
Panel access will live at <code>jetpack.panel</code>. | |||
==== Panel overview ==== | ==== Panel overview ==== | ||
| Line 28: | Line 34: | ||
===== Opening a Panel ===== | ===== Opening a Panel ===== | ||
''CONSIDER: Here are some additional and alternate options from an existing implementation that is quite mature: [http://clientcide.com/docs/UI/StickyWin '''StickyWin Documentation''']'' | |||
<pre class="brush:js;toolbar:false;"> | <pre class="brush:js;toolbar:false;"> | ||
| Line 44: | Line 52: | ||
* '''align''': Where and how to locate the panel. This is a string that consists of a description of the placement. For example, "bottom left with anchor top left". The string is always of the form "bottom/top/middle left/right/center with anchor bottom/top/middle left/right/center". Other offsets are handled via margin/padding in the style option. To have a centered panel in the middle of the screen, you'd <code>{anchor: null, align: "middle center with anchor middle center"}</code>. | * '''align''': Where and how to locate the panel. This is a string that consists of a description of the placement. For example, "bottom left with anchor top left". The string is always of the form "bottom/top/middle left/right/center with anchor bottom/top/middle left/right/center". Other offsets are handled via margin/padding in the style option. To have a centered panel in the middle of the screen, you'd <code>{anchor: null, align: "middle center with anchor middle center"}</code>. | ||
http://img.skitch.com/20090825- | http://img.skitch.com/20090825-1cjrtq1ppxc3gpgxh3u637ebjf.jpg | ||
===== The Panel Object ===== | ===== The Panel Object ===== | ||
| Line 64: | Line 72: | ||
* <code>myPanel.contentDocument</code>: A pointer to the content document of the rich data window being displayed in the panel. | * <code>myPanel.contentDocument</code>: A pointer to the content document of the rich data window being displayed in the panel. | ||
* <code>myPanel.contentWindow</code>: A pointer to the containing window of the document being displayed by the panel. | * <code>myPanel.contentWindow</code>: A pointer to the containing window of the document being displayed by the panel. | ||
===== Examples ===== | |||
This is an example extension to load the mobile version of Reddit in a panel, when a statusbar icon is clicked. | |||
<pre class="brush:js;"> | |||
function openRedditPanel( anchor ){ | |||
jetpack.panels.open({ | |||
url: "http://m.reddit.com", | |||
anchor: anchor, | |||
align: "bottom right with anchor top right" | |||
}); | |||
} | |||
jetpack.statusBar.append({ | |||
html: "Reddit", | |||
onReady: function(widget) { | |||
$(widget).click(function(){ | |||
openRedditPanel(widget); | |||
}); | |||
}, | |||
}); | |||
</pre> | |||
==== Reference Material ==== | ==== Reference Material ==== | ||