I am trying to make some headway positioning my panel in an Add-on make with the new SDK.
I see that the documentation shows only one way to control the position of a panel, and that is by passing an anchor when you show()
it:
show(anchor)
Displays the panel. [ anchor : handle ]
A handle to a DOM node in a page to which the panel should appear to be anchored. If not given, the panel is centered inside the most recent browser window. Note that it is not currently possible to anchor panels in this way using only the high level APIs.
Ideally, I'd like the anchor to be the widget that the panel appears anchored to when that widget is clicked, but the widget is not a DOM node in a page
so I guess not...
I can probably work around this, but I can't even find a working example of how to anchor the panel to a DOM node. When I pass back a DOM node in a contentScript
through port
like this:
lib/main.js
var scraper = pageMod.PageMod({
include: ['*'],
contentScriptWhen: 'ready',
contentScriptFile: [data.url('jquery-1.6.2.min.js'), data.url('scraper.js')],
onAttach: function(worker){
worker.port.on('pageLoaded', function(page){
widget.panel.show(page.anchor);
});
}
data/scraper.js
$('body').append('
<div id="anchor-to-me" style="position:fixed; bottom: 0; right: 0;">.</div>
');
var anchor = $('#anchor-to-me').get();
self.port.emit('pageLoaded', { anchor : anchor });
I get the following console error:
error: An exception occurred.
Traceback (most recent call last):
File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 147, in show
let document = getWindow(anchor).document;
File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 345, in getWindow
let anchorWindow = anchor.ownerDocument.defaultView.top;
TypeError: anchor.ownerDocument is undefined
Any info to help me successfully anchor to a DOM element, or find some other way to position the panel would be great.
Thanks.
const panel = require("panel").Panel({
width: 240,
height: 320,
contentURL: data.url("foo.html"),
contentScriptFile: [data.url("jquery-1.4.4.min.js"),
data.url("panel.js")]
});
const widget = widgets.Widget({
id: "some-id",
label: "Some label",
contentURL: data.url("icon.png"),
//panel: panel,
onClick: function(view) { /* cool stuff */
view.panel = panel;
}
});
Instead of using mainPanel.show()
, use view.panel = mainPanel;
. It will solve the problem bcz I did the same.
When you define your widget, you can add a panel property that is the instance of your panel:
[ panel : Panel ]
An optional panel to open when the user clicks on the widget. Note: If you also register a "click" listener, it will be called instead of the panel being opened. However, you can show the panel from the listener by calling this.panel.show().
Here's an example ( unfortunately there isn't an example of this in the docs ):
const panel = require("panel").Panel({
width: 240,
height: 320,
contentURL: data.url("foo.html"),
contentScriptFile: [data.url("jquery-1.4.4.min.js"),
data.url("panel.js")]
});
const widget = widgets.Widget({
id: "some-id",
label: "Some label",
contentURL: data.url("icon.png"),
panel: panel,
onClick: function() { /* cool stuff */ }
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With