boffo/fields-form.html at main · caltechlibrary/boffo · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
  <!--
    @file    fields-form.html
    @brief   HTML + JS code to let the user select the item record fields shown
    @created 2023-08-01
    @license Please see the file named LICENSE in the project directory
    @website https://github.com/caltechlibrary/boffo
  -->
  <head>
    <base target="_top" />
    <title>Select desired item record fields</title>
    <meta charset="utf-8" />
    <?!= include('stylesheet.css'); ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <?!= include('form-utilities.js'); ?>
    <script>
     const gs = google.script;

     function success(value) {
       delayedClose();
     }

     function failure(error) {
       log('got an error: ' + error);
       delayedClose();
     }

     // Invoked when the user clicks either "submit" or "cancel" on the form,
     // and calls saveSelectedFields(...) if the choice was "submit".
     function submitForm(which) {
       log(`user clicked ${which} on form`);
       if (which == "Cancel") {
         delayedClose();
         return;
       }

       // We can't close the dialog until we're done with saveFieldSelections
       // because then GAS will not execute the function, but the execution
       // loop takes several seconds, and leaving the dialog visible without
       // any indication of what's happening is confusing to the user. The
       // following hides the dialog content and shows a message + spinner.
       document.getElementById('dialog').style.display = 'none';
       document.getElementById('message').style.display = 'inherit';

       let selectionElements = document.getElementsByName("selections");
       let selections = new Array(selectionElements.length);
       for (let i = 0; i < selectionElements.length; i++) {
         selections[i] = selectionElements[i].checked;
       }
       gs.run
         .withSuccessHandler(success)
         .withFailureHandler(failure)
         .saveFieldSelections(selections);
     }

     function selectAllCheckboxes() {
       const checkboxes = document.querySelectorAll('input[type=checkbox]');
       checkboxes.forEach(checkbox => { checkbox.checked = true; });
     }

     function deselectAllCheckboxes() {
       const checkboxes = document.querySelectorAll('input[type=checkbox]');
       checkboxes.forEach(checkbox => {
         if (!checkbox.hasAttribute('readonly')) {
           checkbox.checked = false;
         }
       });
     }

     jQuery(document).on('click', function(e) {
       if (e.target.type == 'checkbox') {
         var el = jQuery(e.target);
         if (el.prop('readonly')) {
           e.preventDefault();
         }
       }
     });
    </script>
  </head>
  <body>
    <div id="dialog">
      <div class="explanatory-text">
        <p>Select the record fields to be shown for each
          item in the output.</p>
        <p>
          <input type="submit" onClick="selectAllCheckboxes();"
                 class="checkbox" value="Select all"/>
          &nbsp;
          <input type="submit" onClick="deselectAllCheckboxes();"
                 class ="checkbox" value="Deselect all"/>
        </p>
      </div>
      <div class="form">
        <form id="form" onsubmit="submitForm(this.submitted); return false;">
          <fieldset style="height: 310px">
            <?!= checkboxes ?>
          </fieldset>
          <input type="submit" class="button" value="Submit"
                 onclick="this.form.submitted=this.value"/>
          <input type="submit" class="button cancel" value="Cancel"
                 onclick="this.form.submitted=this.value"/>
        </form>
      </div>
    </div>
    <div id="message" class="explanatory-text"
         style="display: none; margin-top: 15em">
      <p>Saving preferences &nbsp; <svg width="24" height="24" viewBox="0 -5 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(0.36,.6,.31,1) infinite}.spinner_fVhf{animation-delay:-.5s}.spinner_piVe{animation-delay:-1s}.spinner_MSNs{animation-delay:-1.5s}@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}100%{r:0;cx:20px}}</style><circle class="spinner_nOfF" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_fVhf" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_piVe" cx="4" cy="12" r="3"/><circle class="spinner_nOfF spinner_MSNs" cx="4" cy="12" r="3"/></svg></p>
    </div>
  </body>
</html>