Client.js for Power-Up

client.js

/* global TrelloPowerUp */
/// <reference path="../types/trello.d.js" />
import Common from './common/common';
/** @type {TrelloPowerUp} */
const tpu = window.TrelloPowerUp;
tpu.initialize({
  'board-buttons': async (t) => await getBoardButton(t),
});
/**
 * Returns the board button
 * @param {TrelloObject} t 
 * @return {TrelloBoardButtonOption[]}
 */
const getBoardButton = async (t) => {
  /** @type {String} */
  const buttonName = await t.get("board", "private", "buttonName", "Hello World");
  /** @type {TrelloBoardButtonOption} */
  const boardButton = {
    text: buttonName,
    condition: "always",
    icon: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAF2SURBVDhPtZMxT8JQEMfb0pI2xMbA0JWyNXQEJLHO7VrmfgAHTfgMLMTo0FknDU0TNze+gCbOSmSBwU2hgxMlAevd8wV95GG6+Euu73/v/e/aXlPhX8myrIBBUy4iXRmCIDicTqeeqqoHmKdp+lir1YaDweCeGHZx1u/vHTnOpWEYqSiKGWyRQI17juNc9cFDzNvEUay2ms1bkJtCXjTBE0WRCprFc70TTdO4Rb8DPa7rnoL+odfr6bZtP4HkFm0HeJ+xBrQg4WU+n7eSJLFR5wH8dfC3UJMGy+WyDJNGmQvwC4vFooyaNFAUZVUo/Pm5GdBbLBZXqEkD2Bjpuv6BOg/olSRpRNNv2u32NSzcoW0HeG9gJZAnQOx6/cKsVmc03YlZNWfgPacpi+/7rmma7yC5d8azDnhAb2AmNx6PJ77fGWqaqsmyvF8qleB19c9KpfJqWdZdo9E4juP4gdoJ3J8J6Xa7BgzXQr1er1/CMHwjBwyC8AW6vpgYpmCzMQAAAABJRU5ErkJggg==`,
    callback: (tt) => { getBoardMenu(tt) },
  };
  // technically we send back an array with only one item
  return [boardButton];
}
/**
 * Gets the menu for the board button when the board button is clicked
 * @param {TrelloObject} t
 */
const getBoardMenu = (t) => {
    /** @type {TrelloPopupListOptions} */
    const boardMenuPopup = {
      title: "Hello World menu",
      items: [],
    };
    boardMenuPopup.items.push({
      text: "Settings",
      callback: (tt) => { return showSettings(tt) },
    });
    // show it
    t.popup(boardMenuPopup);
}
/**
 * Shows the settings form
 * @param {TrelloObject} t 
 */
const showSettings = (t) => {
  /** @type {TrelloPopupIFrameOptions} */
  const settingsIframeOptions = {
    title: "Settings",
    url: Common.detailsPage,
    args: { page: "settings" }
  }
  // show settings page
  t.popup(settingsIframeOptions);
}