ui.html

<!--
  styles
-->
<style>
    html, body {
      font-family: Inter, sans-serif;
      padding: 0;
      margin: 0;
      background-color: #CCCCCC;
      font-size: 11pt;
      overflow: hidden;
      height: 100%;
    }
    div, p {
      padding: 0;
      margin: 0;
    }
    button {
      background-color: rgba(255, 255, 255, .5);
      border: none;
      outline: none;
      margin: 0;
      padding: .3rem .6rem;
      border-radius: .3rem;
      color: black;
      font-family: inherit;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      vertical-align: middle;
    }
    button:hover {
      background-color: rgba(255, 255, 255, .9);
    }
    button.text {
      color: rgba(0, 0, 0, .7);
      background: none;
    }
    button.text:hover {
      color: black;
      background-color: rgba(0, 0, 0, .1);
    }
    button.red {
      width: 100%;
      margin: 1rem 0 1rem;
      background-color: rgba(0, 0, 0, .1);
      color: rgba(0, 0, 0, .5);
    }
    button.red:hover {
      background-color: rgba(0, 0, 0, .2);
      color: black;
    }
    button.action {
      background-color: black;
      color: white;
      padding: .3rem 1.2rem;
    }
    button.action:hover {
      background: white;
      color: black;
    }
    button.icon {
      margin: 0 .6rem 0 0;
      padding: .2rem 0 0;
      background: none;
      color: rgba(0, 0, 0, .5);
      font-size: 1.5rem;
      font-weight: normal;
      font-family: sans-serif;
      vertical-align: middle;
    }
    button.icon:hover {
      color: black;
    }
    button.icon-delete {
      margin: 0;
      padding: 0;
      font-size: 2rem;
      background: none;
      color: rgba(0, 0, 0, .5);
      vertical-align: middle;
    }
    button.icon-delete:hover {
      color: black;
    }
    table {
      padding: 0;
      margin: 0;
      border: none;
      width: 100%;
    }
    tr {
      margin: 0 0 .5rem 0;
    }
    td {
      font-size: 1rem;
    }
    .node-title {
      display: inline;
      vertical-align: middle;
      line-height: 1.1rem;
      margin: 0 0 0 .5rem;
    }
    .node-title-container {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: .5rem 0 0;
      height: 30px;
      padding: .2rem 0 0 .2rem;
      max-width: 255px;
    }
    .list {
      padding: .5rem 1rem 0;
      height: calc(100% - 91px);
      overflow: auto;
      scroll-behavior: smooth;
      display: block;
    }
    .list::-webkit-scrollbar {
      display: none;
    }
    .list {
      -ms-overflow-style: none;
    }
    .walkthrough-list {
      padding: .5rem 1rem 0;
      height: calc(100% - 55px);
      overflow: auto;
      scroll-behavior: smooth;
      display: block;
    }
    .walkthrough-list::-webkit-scrollbar {
      display: none;
    }
    .walkthrough-list {
      -ms-overflow-style: none;
    }
    .placeholder {
        color: rgba(0, 0, 0, .5);
        font-weight: bold;
        text-align: center;
        width: 50%;
        margin: 25%;
    }
    .toolbar {
      background-color: rgba(0, 0, 0, .2);
      padding: .3rem .4rem .4rem;
      height: 40px;
    }
    .table-right {
      right: 0;
      text-align: right;
      width: 150px;
    }
    .table-left {
      width: 250px;
    }
    input {
      font-family: inherit;
      outline: none;
      border: none;
      padding: .3rem .5rem;
      border-radius: .3rem;
      background-color: rgba(255, 255, 255, .5);
      font-size: 1rem;
      width: 281.5px;
    }
    .footer {
      background-color: rgba(0, 0, 0, .1);
      position: fixed;
      height: 40px;
      bottom: 0;
      left: 0;
      right: 0;
      padding: .2rem .5rem;
    }
    .note {
      background-color: rgba(255, 255, 255, .8);
      padding: 1rem;
      margin: 1rem 0 1rem;
      border-radius: .3rem;
      border: none;
      display: block;
      white-space: pre-wrap;
    }
    textarea {
      font-family: inherit;
      outline: none;
      border: none;
      font-size: 1rem;
    }
    .editing-note {
      border: none;
      background-color: white;
      padding: 1rem;
      margin: 1rem;
      border-radius: .3rem;
    }
    .layer-title {
      margin: 1rem 0;
      display: inline;
    }
    .layer-title-container {
      margin: .5rem 0 0;
    }
    .pos {
      color: rgba(0, 0, 0, .8);
      background: none;
      background-color: rgba(255, 255, 255, .8);
      width: 25px;
      height: 25px;
      border-radius: 12.5px;
      margin: 0 0 .05rem -.2rem;
      padding: 0 0 0 0;
      display: inline-block;
      vertical-align: middle;
    }
    .pos-inner {
      position: relative;
      top: 4px;
      left: 0.5px;
      font-size: .8rem;
      width: 100%;
      height: 100%;
      vertical-align: middle;
      text-align: center;
    }
    .settings-container {
        padding: 1rem;
    }
    .settings-input {
        width: 100%;
    }
    .settings-label {
        margin-bottom: .5rem;
    }
    .settings-error {
        margin-top: .5rem;
        color: red;
    }
</style>
<!--
  interface
-->
<html>
  <!--State: home-->
  <div id="home_state" style="display:block">
    <table class="toolbar">
      <tr>
        <td>
          <button id="state_settings" class="text">Settings</button>
        </td>
        <td class="table-right">
          <button id="new_walkthrough" class="action">+ Create</button>
        </td>
      </tr>
    </table>
    <div id="walkthrough_list" class="walkthrough-list">
      <p class="placeholder">Loading...</p>
    </div>
  </div>

  <!--State: settings-->
  <div id="settings_state" style="display:block">
    <table class="toolbar">
      <tr>
        <td>
          <button id="exit_settings" class="text">✕ Cancel</button>
        </td>
        <td class="table-right">
          <button id="settings_save" class="action">Save</button>
        </td>
      </tr>
    </table>
    <div id="settings" class="settings-container">
        <div class="settings-label">Theme color 🌈</div>
        <input id="settings_color" class="settings-input" placeholder="Hex code e.g. #CCCCCC"></input>
        <div id="settings_error" class="settings-error"></div>
    </div>
  </div>

  <!--State: editing-->
  <div id="editing_state" style="display:none">
    <table class="toolbar">
      <tr>
        <td>
          <button id="exit_new" class="text">✕ Cancel</button>
        </td>
        <td class="table-right">
          <button id="add_nodes">+ Add selected</button>
        </td>
      </tr>
    </table>
    <div id="nodes_list" class="list">
      <p class="placeholder">Select some elements and + Add selected</p>
    </div>
    <table class="footer">
      <tr>
        <td>
          <input id="walkthrough_name"></input>
        </td>
        <td class="table-right">
          <button id="save_walkthrough" class="action">✔ Save</button>
        </td>
      </tr>
    </table>
  </div>

  <!--State: walking-->
  <div id="walking_state" style="display:none">
    <table class="toolbar" id="toolbar">
      <tr>
        <td class="table-left">
          <button id="exit_walking" class="text">✕ Exit</button>
        </td>
        <td class="table-right">
          <button id="edit_note">✎ Edit note</button>
        </td>
      </tr>
    </table>
    <div class="list" id="list">
      <div class="layer-title-container">
        <div class="pos"><div id="selected_node_position" class="pos-inner"></div></div>
        <div id="selected_node" class="layer-title"></div>
      </div>
      <div id="note"></div>
    </div>
    <table class="footer">
      <tr>
        <td>
          <button id="previous">← Previous</button>
        </td>
        <td>
          <button id="minimize" class="display:block">↑</button>
          <button id="maximize" style="display:none">↓</button>
        </td>
        <td class="table-right">
          <button id="next" class="action">Next →</button>
        </td>
      </tr>
    </table>
  </div>

  <!--State: noting-->
  <div id="noting_state">
    <table class="toolbar">
      <tr>
        <td>
          <button id="exit_noting" class="text">← Back</button>
        </td>
      </tr>
    </table>
    <div class="list">
      <div class="layer-title-container">
        <div class="pos"><div id="editing_node_position" class="pos-inner"></div></div>
        <div id="editing_node" class="layer-title"></div>
      </div>
      <textarea id="noting" rows="10" cols="36" class="note" wrap="soft"></textarea>
    </div>
    <table class="footer">
      <tr>
        <td class="table-right">
          <button id="save_note" class="action">✔ Save</button>
        </td>
      </tr>
    </table>
  </div>

  <script>
  onmessage = (event) => {
    const message = event.data.pluginMessage;
    switch (message.type) {
      case 'state':
        const state = message.state;
        document.getElementById('home_state').style.display = (state == 'home') ? ("block") : ("none");
        document.getElementById('walking_state').style.display = (state == 'walking') ? ("block") : ("none");
        document.getElementById('editing_state').style.display = (state == 'editing' | state == 'new') ? ("block") : ("none");
        document.getElementById('noting_state').style.display = (state == 'note') ? ("block") : ("none");
        document.getElementById('settings_state').style.display = (state == 'settings') ? ("block") : ("none");
        break;
      case 'walkthrough_list':
        const walkthroughs = message.walkthroughs;
        let walkthroughListContents = '<p class="placeholder">Create a Walkthrough to get started</p>';
        if (walkthroughs.length > 0) {
          walkthroughListContents = '<table>';
          walkthroughs.forEach(walkthrough => {
            const name = walkthrough.name;
            const id = walkthrough.id;
            walkthroughListContents += '<tr><td>' + name + '</td>';
            walkthroughListContents += '<td class="table-right">';
            walkthroughListContents += getButton(id, 'edit');
            walkthroughListContents += getButton(id, 'start');
            walkthroughListContents += '</td></tr>';
          });
          walkthroughListContents += '</table>';
        }
        document.getElementById("walkthrough_list").innerHTML = walkthroughListContents;
        if (walkthroughs.length > 0) {
          walkthroughs.forEach(walkthrough => {
            const id = walkthrough.id;
            addWalkthroughListener('start', id + '_wts');
            addWalkthroughListener('edit', id + '_wte');
          });
        }
        break;
      case 'editing_update':
        const newOrEditing = message.state;
        const name = message.walkthrough.name;
        const walkthroughID = message.walkthrough.id;
        const nodes = message.walkthrough.nodes;
        const existingName = document.getElementById('walkthrough_name').value;
        document.getElementById('walkthrough_name').value = existingName ? existingName : name;
        let nodeListContents = '<p class="placeholder">Select some elements and + Add selected</p>';
        if (nodes.length > 0) {
          nodeListContents = '<table>';
            nodes.forEach((node, index) => {
              const name = node.name;
              const id = node.id;
              const pos = index + 1;
              const posElm = '<div class="pos"><div class="pos-inner">' + pos + '</div></div>';
              nodeListContents += '<tr><td><div class="node-title-container">' + posElm;
              nodeListContents += '<div class="node-title">' + name + '</div>';
              nodeListContents += '</div></td>';
              nodeListContents += '<td class="table-right">';
              nodeListContents +=  getButton(id, 'note');
              nodeListContents +=  getButton(id, 'up');
              nodeListContents +=  getButton(id, 'down');
              nodeListContents +=  getButton(id, 'remove');
              nodeListContents += '</td></tr>';
          });
          nodeListContents += '</table>';
          if (newOrEditing == 'editing') {
            nodeListContents += getButton(walkthroughID, 'delete')
          }
        }
        document.getElementById('nodes_list').innerHTML = nodeListContents;
        if (nodes.length > 0) {
          nodes.forEach(node => {
            const id = node.id;
            addWalkthroughListener('note', id + '_nno');
            addWalkthroughListener('up', id + '_nup');
            addWalkthroughListener('down', id + '_ndn');
            addWalkthroughListener('remove', id + '_nrm');
          });
        }
        if (newOrEditing == 'editing') {
          addWalkthroughListener('delete', walkthroughID + '_wtd');
        }
        if (message.scroll) {
          const y = (nodes.length * 99) + ((newOrEditing == 'editing') ? 71 : 0);
          document.getElementById('nodes_list').scrollTo(0, y);
        }
        break;
      case 'editing_clear':
        document.getElementById('walkthrough_name').value = null;
        document.getElementById("nodes_list").innerHTML = null;
        break;
      case 'note':
        document.getElementById('selected_node').innerHTML = message.name;
        document.getElementById('selected_node_position').innerHTML = message.position;
        document.getElementById('note').innerHTML = message.note;
        document.getElementById('note').className = (message.note.length > 0) ? 'note' : null;
        document.getElementById('edit_note').innerHTML = (message.note.length > 0) ? '✎ Edit note' : '+ Add note';
        document.getElementById('edit_note').onclick = () => {
          parent.postMessage({pluginMessage: {
            type: 'note',
            value: message.id + '_nno'
          }},'*');
        }
        break;
      case 'noting':
        document.getElementById('editing_node_position').innerHTML = message.position;
        document.getElementById('editing_node').innerHTML = message.name;
        document.getElementById('noting').value = message.note;
        break;
      case 'settings_save':
        let desiredColor = document.getElementById('settings_color').value;
        if (desiredColor.match(/^#[a-f0-9]{6}$/gi)) {
            document.body.style.backgroundColor = desiredColor;
            document.getElementById('settings_error').innerHTML = null;
            document.getElementById('settings_color').value = null;
            parent.postMessage({ pluginMessage: { type: 'save_settings', color: desiredColor} }, '*');
            parent.postMessage({ pluginMessage: { type: 'exit_settings'} }, '*');
        } else {
            document.getElementById('settings_error').innerHTML = 'Invalid Hex code';
        }
        break;
      case 'settings_load':
        document.body.style.backgroundColor = message.color;
        break;
      default:
        console.error('No UI message handler.');
        return;
    }
  }
  // creating walkthrough
  document.getElementById('state_settings').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'state_settings'} }, '*');
  }
  document.getElementById('exit_settings').onclick = () => {
    document.getElementById('settings_color').value = null;
    parent.postMessage({ pluginMessage: { type: 'exit_settings'} }, '*');
  }
  document.getElementById('settings_save').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'settings_save'} }, '*');
  }
  document.getElementById('new_walkthrough').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'state_new'} }, '*');
  }
  document.getElementById('add_nodes').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'add_nodes' }}, '*');
  }
  document.getElementById('save_walkthrough').onclick = () => {
    const name = document.getElementById('walkthrough_name').value;
    parent.postMessage({ pluginMessage: { type: 'save_walkthrough', value: name }}, '*');
  }
  document.getElementById('exit_new').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'state_home'}}, '*');
  }
  // walking through
  document.getElementById('next').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'next' } }, '*');
  }
  document.getElementById('previous').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'previous' } }, '*');
  }
  document.getElementById('save_note').onclick = () => {
    let note = document.getElementById('noting').value;
    parent.postMessage({ pluginMessage: { type: 'save_note', value: note } }, '*');
  }
  document.getElementById('exit_walking').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'state_home'}}, '*');
  }
  document.getElementById('exit_noting').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'exit_noting'}}, '*');
  }
  document.getElementById('minimize').onclick = () => {
    document.getElementById('toolbar').style.display = ("none");
    document.getElementById('list').style.display = ("none");
    document.getElementById('minimize').style.display = ("none");
    document.getElementById('maximize').style.display = ("block");
    parent.postMessage({ pluginMessage: { type: 'minimize'}}, '*');
  }
  document.getElementById('maximize').onclick = () => {
    parent.postMessage({ pluginMessage: { type: 'maximize'}}, '*');
    document.getElementById('toolbar').style.display = ("block");
    document.getElementById('list').style.display = ("block");
    document.getElementById('minimize').style.display = ("block");
    document.getElementById('maximize').style.display = ("none");
  }
  // helper functions
  function getButton(id, type) {
    let label = null;
    let buttonId = null;
    let styles = null;
    switch(type) {
      case 'start':
        label = 'Start →';
        buttonId = id + '_wts';
        styles = null;
        break;
      case 'edit':
        label = '⋯';
        buttonId = id + '_wte';
        styles = 'icon';
        break;
      case 'delete':
        label = 'Delete Walkthrough';
        buttonId = id + '_wtd';
        styles = 'red';
        break;
      case 'note':
        label = '✎';
        buttonId = id + '_nno';
        styles = 'icon';
        break;
      case 'up':
        label = '↑';
        buttonId = id + '_nup';
        styles = 'icon';
        break;
      case 'down':
        label = '↓';
        buttonId = id + '_ndn';
        styles = 'icon';
        break;
      case 'remove':
        label = '✕';
        buttonId = id + '_nrm';
        styles = 'icon-delete';
        break;
      default:
        console.error('No button type.');
    }
    return '<button id="' + buttonId + '" class="' + styles + '">' + label + '</button>';
  }
  function addWalkthroughListener(type, id) {
    document.getElementById(id).onclick = () => {
      parent.postMessage({ pluginMessage: { type: type, value: id } }, '*');
    }
  }
  function isTooDark(colour) {
    const c = colour.substring(1);      // strip #
    const rgb = parseInt(c, 16);   // convert rrggbb to decimal
    const r = (rgb >> 16) & 0xff;  // extract red
    const g = (rgb >>  8) & 0xff;  // extract green
    const b = (rgb >>  0) & 0xff;  // extract blue
    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
    if (luma < 150) {
      return true;
    }
    else {
      return false;
    }
  }
  function getRandomLightColour() {
    let bgcolor = getRandomColour();
    while (isTooDark(bgcolor)) {
      bgcolor = getRandomColour();
    }
    return bgcolor;
  }
  function getRandomColour() {
    const letters = '0123456789ABCDEF';
    let bgcolor = '#';
    for (var i = 0; i < 6; i++) {
      bgcolor += letters[Math.floor(Math.random() * 16)];
    }
    return bgcolor;
  }
  </script>
</html>