How to know if panel i showing - firefox

So. I'm having some issues where my panel is not always displaying (though it seems the rest of the add-on is still working). I'm trying to write some logs to find out why this is happening, but there are some things I don't really understand.
To experiment I made a simple add-on as such
// main.js
const panels = require("panel");
const {Cc, Ci} = require("chrome");
const widgets = require("widget");
var my_widget = widgets.Widget({
id: "google-link",
label: "Click me",
contentURL: "http://google.com/favicon.ico",
width: 20,
height: 20,
panel: my_panel,
onClick: function() {
my_panel.show();
console.log('Panel displaying? ' + my_panel.isShowing);
}
});
var my_panel = panels.Panel({
width: 500,
height: 500,
contentURL: "http://google.com",
});
my_panel.port.on("show", function() {
console.log('Panel emitted show');
});
What happens is firstly: the isShowing is always false, even when I clearly see the panel. And the show event never seems to get triggered (I'm really looking to catch the error event, but this is just to find events in the first place).
The fine print: This is using SDK 1.6.1 and Firefox 10ESR. Perhaps this is something that is solved in later versions, I don't know. Either way I'd like to know if I'm thinking right here.

Your code is not quite right, see this variation:
// main.js
const panels = require("panel");
const {Cc, Ci} = require("chrome");
const widgets = require("widget");
var my_widget = widgets.Widget({
id: "google-link",
label: "Click me",
contentURL: "http://google.com/favicon.ico",
width: 20,
height: 20,
panel: my_panel,
onClick: function() {
my_panel.show();
// this is false because the panel is shown asynchronously
console.log('Panel displaying? ' + my_panel.isShowing);
}
});
var my_panel = panels.Panel({
width: 500,
height: 500,
contentURL: "http://google.com",
});
// there is no port property on panel
my_panel.on("show", function() {
console.log('Panel emitted show');
// this is true...
console.log('Panel displaying? ' + my_panel.isShowing);
});
The code is here:
https://builder.addons.mozilla.org/package/161691/latest/

Related

adding event to image in EaselJS

I was hoping that I could get a little help with something I'm trying to do. I'm learning EaselJS, Extjs but still a little new. I'm trying to create an extJS window, inside the window I added a canvas which I use easelJS to manipulate. On a button1 I added an event handler that will overlay an image... what I am trying to do is make that overlayed image have events. In the long run I'd like to be able to highlight that image, and store the number of overlayed images from mouseclick onto that image.
here is my code
var stage;
var overlay;
var overImage;
var myImage;
var bgrd;
Ext.onDocumentReady( function () {
//var myImage = new createjs.Bitmap("dbz.jpg");
//stage.addChild(myImage);
//stage.update();
function setBG(){
myImage = new Image();
myImage.src = "dbz.jpg";
bg();
}
function bg(){
bgrd = new createjs.Bitmap(myImage);
stage.addChild(bgrd);
stage.update();
}
Ext.define('EaselWindow', {
width: 1000,
height: 750,
extend: 'Ext.Window',
html: '<canvas id="demoCanvas" width="1000" height="750">'
+ 'alternate content'
+ '</canvas>',
afterRender: function() {
this.callParent(arguments);
stage = new createjs.Stage("demoCanvas");
stage.onload = setBG();
}, // end after render func
listeners: {
click: {
element: 'body',
fn: function(){
var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = stage.mouseX-10 ;
seed.y = stage.mouseY-10 ;
stage.addChild(seed);
stage.update();
} //end addeventlistener
}
},
items:[{
itemId: 'button1',
xtype: 'button',
text: 'click the button',
visible: true,
enableToggle: true,
toggleHandler:
function(button, pressed){
if(button.pressed==true){
overImage = new Image();
overImage.src = "stuff.jpg";
overlay = new createjs.Bitmap(overImage);
stage.addChild(overlay);
stage.update();
}
else
{stage.removeChild(overlay);
stage.update();
}
}// end func
},{
itemId: 'button2',
xtype: 'button',
text: 'button2'
}]
}); // end define
Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true,
}); //end easelwindow
overImage.addEventListener("mouseover", function(){
overlay.alpha=0.7;
}); // this function isn't working
});
edit to add: itemId: 'button2',
xtype: 'button',
text: 'addSeed',
enableToggle: true,
handler: function(button, pressed){
if(button.pressed==true){
bgrd.addEventListener('click', function(){
seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = stage.mouseX-10 ;
seed.y = stage.mouseY-10 ;
storex= seed.x;
storey= seed.y;
console.log(storex +","+ storey);
stage.addChild(seed);
stage.update();
})
}
} //end addeventlistener
but but once the button is pressed the ability to click remains on if w/ the if statement condition I don't understand why, is there a way to say else ( turn off)
You can add EventListeners in EaselJS as follows:
function bg(){
bgrd = new createjs.Bitmap(myImage);
bgrd.addEventListener('click', onClick);
stage.addChild(bgrd);
stage.update();
}
function onClick() {
console.log('bgrd was clicked.');
}
This is btw. very well documented in the EaselJS-docs: http://www.createjs.com/Docs/EaselJS/classes/EventDispatcher.html and there are tons of examples for this and most other cases you are looking for on Github at:
https://github.com/CreateJS/EaselJS/tree/master/examples
and
https://github.com/CreateJS/sandbox

Firefox Addon SDK: is it possible to show another panel from another .js

I'm showing a panel from main.js
btn.addEventListener('click', function() {
var panel = require("sdk/panel").Panel({
width: 570,
height: 230,
contentURL: require("sdk/self").data.url("content.html")
});
panel.show();
}, true)
Now, I want to show another panel from another.js
function myFunction(){
setTimeout(function(){
var data = require('self').data;
var reminder_panel = require("sdk/panel").Panel({
width: 570,
height: 230,
contentURL:"http://www.google.com"
});
reminder_panel.show();
},4000);
}
But it's not working. I'm newbie in Firefox addon development. Any help would be great for me. Thanks.
In the Add-on SDK 'main.js' is the only script that is run by default. If you want to run code in other scripts in the add-on's lib directory you would need to require the other script:
'another.js':
function myFunction(){
setTimeout(function(){
var data = require('self').data;
var reminder_panel = require("sdk/panel").Panel({
width: 570,
height: 230,
contentURL:"http://www.google.com"
});
reminder_panel.show();
},4000);
}
exports.myFunction = myFunction; // export the function
'main.js':
var another = require('another');
another.myFunction(); // the panel will show.
Please see the docs for more background information on how CommonJS modules are used in the Add-on SDK:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/guides/modules.html

How can i anchor a panel to a widget (Firefox Addon-SDK)

Helo, i try to develop a (my first) firefox add-on. It should show a panel at several defined url with some content. This works if i click on widget-symbol fine. Now i want, that the panel is displayed if the user loads the page.
panel.show(); displays the panel centered. I would like to map/anchor the panel to the widget, so that the panel ist displayed in the rigth bottom corner.
The solutions https://gist.github.com/azu/4413137 and Mozilla "Jetpack" Add-On: Anchor Panel to Widget did'nt work for me. (SDK 1.13.2 with Add-On Builder)
My code:
thePanel = panel.Panel({
width: 320,
height: 170,
contentScriptFile: [self.data.url('jquery.js'), self.data.url('panel.js')],
contentScriptWhen: "ready",
contentScript: "SOMESCRIPT",
contentURL: self.data.url('thecontent.html'),
onMessage: function (item) {
console.log('message : "' + item + '"');
tabs.open(item);
}
});
var widget = widgets.Widget({
id: "my-id",
label: ".de",
panel: thePanel,
contentURL: self.data.url("favicon.ico"),
onClick: function() {
/*blabla*/
}
});
tabs.on('ready', function(tab) {
check_content(); // loads thecontent.html for panel content
thePanel.show(); // Shows panel at center
});
Someone can help me?
thePanel = panel.Panel({
width: 320,
height: 170,
contentScriptFile: [self.data.url('jquery.js'), self.data.url('panel.js')],
contentScriptWhen: "ready",
contentScript: "SOMESCRIPT",
contentURL: self.data.url('thecontent.html'),
onMessage: function (item) {
console.log('message : "' + item + '"');
tabs.open(item);
}
});
var widget = widgets.Widget({
id: "my-id",
label: ".de",
//panel: thePanel,
contentURL: self.data.url("favicon.ico"),
onClick: function(view) {
/*This will work*/
view.panel = thePanel;
/*This will work*/
}
});
Instead of using panel.show(), use view.panel = thePanel;

Ext Js Tooltip to stay when hover over

I have a button at which when the user hovers over I display a tooltip.
function createTooltp(toolTipId) {
tooTip = new Ext.ToolTip({
target: toolTipId, //The button
anchor: 'left',
autoWidth: true,
autoHeight: true,
closable: false,
autoHide: true,
autoHeight : true,
closable: false,
contentEl: 'content-tip'
});
tooTip.show();
}
Now when the user hovers away obviously it would hide since I mentioned autoHide:true,.
But when the user hovers to the actual tooltip which is displayed. I want that tooltip to be there till the mouse is on top of it and hide when the mouse is not on the target(button) or on the actual tooltip. How could this be achieved?
Don't rely on Ext to hide the tooltip for you (autoHide: false). Instead, start a delayed hide using window.setTimeout when you leave the tooltip target and when you leave the tooltip, but cancel the hide if you hover back over the tooltip. That way, it will only hide when you're not on the tooltip after 500ms.
var toolTip = Ext.create('Ext.tip.ToolTip', {
target: targetId,
html: 'ToolTip',
anchor: 'left',
dismissDelay: 0,
showDelay: 0,
autoHide: false
});
toolTip.on('show', function(){
var timeout;
toolTip.getEl().on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
toolTip.getEl().on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
});
My two cents: I had task to add same behavior for tooltips inside grid panel columns, and it doesn't have way to pass config or tooltips inside it (or maybe I missed it in the docs and while reading sources, please comment if I had). So I solved it by adding small override to my app
Ext.define('App.overrides.ToolTip', {
override: 'Ext.tip.ToolTip',
dismissDelay: 0
});
Try this:
function createTooltp(toolTipId) {
var tooTip = new Ext.ToolTip({
target: toolTipId, // The button
anchor: 'left',
showDelay: 0,
hideDelay: 0,
trackMouse: true
});
tooTip.show();
}
Learn more from this reference: ToolTip
I did it with a work around (jQuery). And used Span and CSS to create my own tooltip.

Mootools 1.3 Fx.Morph 'opacity' not working in IE8

http://jsfiddle.net/hL6rT/1/
I've created div with a absolute positioned image inside it the idea is to fade the image in and out like a pulse. All went well until IE8 showed up.
See the link for code. Works fine in FF, that is to say the div fades in and out in a continuous loop. But in IE8 it fades in and out once and then stops.
Works fine in FF & IE8 with mootools 1.2.5, but not 1.3 or 1.3 Compatibility Mode.
For some bizarre reason if the alert after 'fadeIn' is included in the onComplete the function will display the alert and the second alert in the 'fadeOut' onComplete, but still NOT fade the div.
Help?
it is probably easier to do just the tween on the element via the oncomplete to make a blink effect:
http://jsfiddle.net/hL6rT/2/
var fadeImg = document.id('lucy');
fadeImg.set("tween", {
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
this.element.fade(this.element.getStyle("opacity") == 0 ? 1 : 0);
}
}).fade(0);
// how you can cancel it
document.id("stop").addEvent("click", function(e) {
e.stop();
fadeImg.get("tween").cancel(); // this cancels it.
});
to fix your version:
http://jsfiddle.net/hL6rT/4/
works fine if you set the initial value of opacity to 0
var fadeImg = document.id('lucy').setStyle("opacity", 0);
var fadeIn = function() {
var inDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
fadeOut();
//alert('FadeIn Complete');
}
}).start({
'opacity': ['0', '1']
});
};
var fadeOut = function() {
var outDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeOut,
onComplete: function() {
fadeIn();
//alert(FadeOut Complete!');
}
}).start({
'opacity': ['1', '0']
});
};
fadeIn();
update IE does not seem to consistently like this particular transition being chained. you may need to remove it and use the default one.

Resources