How to add event listeners to my plugin code?

Adobe XD UXP Plugin API
,
1

Here is the code of my development. It contains the panel UI of my plugin. Now as a beginner in Javascript I am stuck on how to add event listeners to my buttons.

main.js

let panel;

function create() {
  const HTML = `<style>
          .break {
              flex-wrap: wrap;
          }
          label.row > * {
              margin: auto;
              margin-bottom:10px;
          }
          label.row > span {
              color: #8E8E8E;
              width: auto;
              text-align: left;
              font-size: 9px;
          }
          label.row input {
              flex: 1 1 auto;
          }
          label.row input[type=number] {
              flex-basis: 32px;
          }

          label.row input[type=text] {
            flex-basis: 32px;
          }

          div input[type=checkbox] {
              flex: 0 0 20px;
          }
          form footer > * {
              position: relative;
              left: 8px;
          }
        </style>

        <form method="dialog" id="main">
        <label class="row" id="title">
            <span font-size="20px">Title</span>
            
        </label>
        </br>
        <div class="row break">
            <label class="row" id="bg">
            <span>Select Background</span>
            <button id="bg-b" type="submit" uxp-variant="cta">Select</button>
            </label>
        </br>
        <div class="row break">
            <label class="row" id="fg">
            <span>Select Foreground</span>
            <button id="fg-b" type="submit" uxp-variant="cta">Select</button>
            </label>
        </br>
        <div class="row break">
            <label class="row" id="txt">
            <span>Foreground Text</span>
            <input type="text" uxp-quiet="true" id="txt_bx" value="" placeholder=""/>
            </label>
        </br>    
        </div>
        </div>
        <footer><button id="ok" type="submit" uxp-variant="cta">Create</button>
        <button id="cancel" type="submit" uxp-variant="cta" background-color:"#E54C4C" >Cancel</button></footer>
        </form>
        `;

  panel = document.createElement("div");
  panel.innerHTML = HTML;

  return panel;
}

function show(event) {
  // create panel the first time it's shown
  if (!panel) {
    panel = create();
    event.node.appendChild(panel);
  }
}

function hide(event) {
  // in this example, we don't need to do anything when XD hides our panel
}

function update(selection, root) {
  console.log(selection.items);
}

module.exports = {
  panels: {
    Name: {
      show,
      hide,
      update
    }
  }
};

Those buttons are Select [ Which allows the user to select an image from his computer] and A text field [ Which gets inserted over the artboard ]

Now where should I include my event listeners and corresponding functions?

What are all the changes that I need to do in my module.exports{} ?

1 Like
2

This is very similar to a web browser, so you may want to look at some web development tutorials that show how to use addEventListener().

But essentially, you just need a reference to a specific DOM node in your UI (such as the <button> tag) to add a listener. There are different places in your code you could choose to do this. For example, any time after setting innerHTML you can call panel.querySelector("#ok") to get the “Create” button in your UI. Or, after calling event.node.appendChild() you could also use document.getElementById("ok") to achieve the same thing.

Once you have a reference to a specific DOM node like that, you can call addEventListener() to add listeners to it.

3 Likes
3

Thanks a lot! I wanna give hugs for your help :grin::v:

1 Like