CODEWITHSUNDEEP
javascripthtmlfirefoxfirefox-addonfirefox-addon-sdk
Mouna
Mouna

Reputation: 627

Add button to close panel

I would like to add a close button to close a panel that appears in the browser. For that I have a javascript file that launches the prompt.html file that is my panel.

var panel = require('sdk/panel').Panel({
    width  : 400,
    height : 400,
    contentURL : self.data.url('prompt.html')
});

Then in my prompt.html I have the following :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>MyPanel</title>
        <script type="text/javascript" src="util.js"></script>
        <script type="text/javascript">
    <body class="din">
        <h1>MyPanel</h1>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>

The script contains code to add nodes to the div and display a content. My question is : how can I add a button to close the panel ?

Upvotes: 2

Views: 2144

Answers (1)

nmaier
nmaier

Reputation: 33162

  1. Add a button to your panel.
  2. On click, self.port.emit some message telling your main.js code to hide the panel.
  3. Upon receiving the message, call panel.hide().

Working example

main.js

var self = require("sdk/self");

var panel = require('sdk/panel').Panel({
  width  : 400,
  height : 400,
  contentURL : self.data.url('prompt.html'),
  contentScriptFile: self.data.url('prompt.js')
});

// On "close" messages from the content script...
panel.port.on("close", function() {
  console.log("asked to close");
  // hide/close the panel.
  panel.hide();
});

// Initially show the panel for testing purposes.
panel.show();

prompt.html

<!doctype html>
<html>
  <head>
    <title>MyPanel</title>
  </head>
  <body>
    <div>
      <a id="close_button">close</a>
    </div>
    <h1>MyPanel</h1>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </body>
</html>

prompt.js

// Wire-up an on click event listener.
document.getElementById("close_button").addEventListener("click", function() {
  // Emit a "close" message to main.
  self.port.emit("close");
});

Upvotes: 3

Related Questions