javascript - How to show/hide sidebar from panel -


how can show sidebar ui component of addon clicking on 'show-sidebar' li in panel ui component? tried following:

panel.html

<body>     <ul>         <li onclick="addon.port.emit ('login')">login</li>         <li onclick="addon.port.emit ('show-sidebar')">show sidebar</li>     </ul> </body> 

main.js

var sidebar = require("sdk/ui/sidebar").sidebar ({...}); var panel = require("sdk/panel").panel ( {     height: 59,     width: 120,     contenturl: self.data.url("panel.html"),     contentscriptwhen: "ready",     onattach: function()     {                panel.port.on ("login", function (data)         {             tabs.open ("login-page-url");             panel.hide();         });          panel.port.on ("show-sidebar", function (data)         {             sidebar.show();             panel.hide();         });     } }); 

but it's giving me error:

console.error: my-addon:   message: typeerror: sidebar.show not function 

the inline javascript not allowed in embedded html. should use property contentscriptfile of panel.

i post example using code.

data/panel.html

<body>     <ul>         <li id="login">login</li>         <li id="sidebar">show sidebar</li>     </ul> </body> 

data/script.js

document.getelementbyid("login").onclick = function(){     document.getelementbyid("login").innerhtml = "pouet"; }  document.getelementbyid("sidebar").onclick = function(){     self.port.emit("show-sidebar"); } 

lib/main.js

var sidebar = require("sdk/ui/sidebar").sidebar ({     id: 'my-sidebar',     title: 'my sidebar',     url: require("sdk/self").data.url("panel.html") }); var panel = require("sdk/panel").panel ( {     height: 150,     width: 150,     contenturl: require("sdk/self").data.url("panel.html"),     contentscriptfile: require("sdk/self").data.url("script.js"),     contentscriptwhen: "end" });  panel.port.on("login", function (data) {     console.log("event login");     panel.hide(); });  panel.port.on("show-sidebar", function (data) {     console.log("event show-sidebar");     sidebar.show();     panel.hide(); });  panel.show(); 

you can use trigger event when loading js file see here. hope example can you.


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -