ReadEasy/Dialog.html at Main · BeritCheema/ReadEasy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  </head>
  <body>
    <form id="alt-text-form" onsubmit="onTextSave(); return false;">
      <? for (var i = 0; i < imageAlt.length; i++) { ?>
        <div class="block" id="dialog-elements">
          <input type="hidden" id="image-url-<?= i ?>">
          <label for="alt-text-<?= i ?>">
            Set Image #<?= i + 1 ?> Description
          </label>
          <input class="width-100" id="alt-text-<?= i ?>" type="text" value="<?= imageAlt[i] ?>">
        </div>
      <? } ?>
      <div class="block" id="dialog-button-bar">
        <button type="submit" id="dialog-save-button">Save</button>
        <button type="button" id="dialog-cancel-button" onclick="google.script.host.close()">Cancel</button>
      </div>
      <div id="dialog-status"></div>
    </form>
    <?!= HtmlService.createHtmlOutputFromFile('DialogJavaScript').getContent(); ?>
    <script>
    // Submit button functionality
      function onTextSave() {
        document.getElementById('dialog-save-button').disabled = true;
        var altTextData = [];
        for (var i = 0; i < <?= imageAlt.length ?>; i++) {
          altTextData.push({
            altText: document.getElementById('alt-text-' + i).value
          });
        }

        console.log(altTextData);
        // Send the array of alt texts with URLs to the server
        google.script.run
            .withSuccessHandler(function(msg) {
                document.getElementById('dialog-status').innerText = 'Image Descriptions saved.';
                document.getElementById('dialog-save-button').disabled = false;
                google.script.host.close();
            })
            .withFailureHandler(function(msg) {
                document.getElementById('dialog-status').innerText = 'Could not save Descriptions: ' + msg;
                document.getElementById('dialog-save-button').disabled = false;
            })
            .setAltText(altTextData);
      }
    </script>
  </body>
</html>