Project

General

Profile

Download (7.26 KB) Statistics
| Branch: | Tag: | Revision:

haketilo / html / options.html @ 6b12a034

1
<!doctype html>
2
<!--
3
    Copyright (C) 2021 Wojtek Kosior
4
    Copyright (C) 2021 Nicholas Johnson
5
    Redistribution terms are gathered in the `copyright' file.
6
  -->
7
<html>
8
  <head>
9
    <meta charset="utf-8"/>
10
    <title>Hachette options</title>
11
    <style>
12
      input[type="checkbox"], input[type="radio"], .hide, .popup.hide {
13
	  display: none;
14
      }
15

    
16
      /* pages list */
17
      #page_components_ul {
18
	  max-height: 80vh;
19
	  overflow-y: auto;
20
      }
21
      #page_components_ul li.dragover_li {
22
	  border-top: 2px solid blue;
23
      }
24
      #page_components_ul li {
25
	  border-top: 2px solid white;
26
      }
27
      li[draggable=true] * {
28
	  pointer-events: none;
29
      }
30
      li[draggable=true] label,
31
      li[draggable=true] button {
32
	  pointer-events: auto;
33
      }
34

    
35
      /* tabbed view */
36
      #show_pages:not(:checked) ~ #pages,
37
      #show_bags:not(:checked) ~ #bags,
38
      #show_scripts:not(:checked) ~ #scripts {
39
	  display: none;
40
      }
41

    
42
      #show_pages:checked ~ #pages_lbl,
43
      #show_bags:checked ~ #bags_lbl,
44
      #show_scripts:checked ~ #scripts_lbl {
45
	  background: #4CAF50;
46
          color: white;
47
      }
48

    
49
      body > div {
50
	  border-top: 6px solid #4CAF50;
51
      }
52

    
53
      .tab_head {
54
	  display: inline-block;
55
      }
56

    
57
      /* popup window with list of selectable components */
58
      .popup {
59
	  position: fixed;
60
	  width: 100vw;
61
	  height: 100vh;
62
	  left: 0;
63
	  top: 0;
64
	  background-color: rgba(0,0,0,0.4);
65
	  z-index: 1;
66
	  overflow: auto;
67
	  vertical-align: center;
68
	  horizontal-align: center;
69
      }
70

    
71
      .popup_frame {
72
	  background-color: white;
73
	  width: 50vw;
74
      }
75

    
76
      input[type="radio"]:not(:checked)+.import_window_content {
77
	  display: none;
78
      }
79

    
80
      /* buttons */
81
      button {
82
          background-color: #4CAF50;
83
          border: none;
84
          border-radius: 8px;
85
          color: white;
86
          padding: 6px 12px;
87
          text-align: center;
88
          text-decoration: none;
89
          display: inline-block;
90
          margin: 2px 0px;
91
      }
92

    
93
    button:hover {
94
        box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
95
    }
96
    </style>
97
  </head>
98
  <body>
99
    <!-- The invisible div below is for elements that will be cloned. -->
100
    <div class="hide">
101
      <li id="item_li_template">
102
	<span></span>
103
	<button> Edit </button>
104
	<button> Remove </button>
105
	<button> Export </button>
106
      </li>
107
      <li id="bag_component_li_template">
108
	<span></span>
109
	<button> Remove </button>
110
      </li>
111
      <li id="chbx_component_li_template">
112
	<input type="checkbox" style="display: inline;"></input>
113
	<span></span>
114
      </li>
115
      <li id="radio_component_li_template">
116
	<input type="radio" style="display: inline;" name="page_components"></input>
117
	<span></span>
118
      </li>
119
      <li id="import_li_template">
120
	<span></span>
121
	<input type="checkbox" style="display: inline;" checked></input>
122
	<span></span>
123
      </li>
124
    </div>
125

    
126
    <!-- Mind the show_*s ids below - their format is assumed in js code -->
127
    <input type="radio" name="tabs" id="show_pages" checked></input>
128
    <input type="radio" name="tabs" id="show_bags"></input>
129
    <input type="radio" name="tabs" id="show_scripts"></input>
130
    <label for="show_pages" id="pages_lbl"
131
	   class="tab_head"> Pages </label>
132
    <label for="show_bags" id="bags_lbl"
133
	   class="tab_head"> Bags </label>
134
    <label for="show_scripts" id="scripts_lbl"
135
	   class="tab_head"> Scripts </label>
136

    
137
    <div id="pages">
138
      <ul id="pages_ul">
139
	<li id="work_page_li" class="hide">
140
	  <label for="page_url_field">URL: </label>
141
	  <input id="page_url_field"></input>
142
	  <br/>
143
	  <label>Payload: </label>
144
	  <span id="page_payload"></span>
145
	  <button id="select_page_components_but">
146
	    Choose payload
147
	  </button>
148
	  <br/>
149
	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
150
	  <label for="page_allow_chbx">Allow native scripts</label>
151
	  <br/>
152
	  <button id="save_page_but" type="button"> Save </button>
153
	  <button id="discard_page_but" type="button"> Cancel </button>
154
	</li>
155
      </ul>
156
      <button id="add_page_but" type="button"> Add page </button>
157
    </div>
158

    
159
    <div id="bags">
160
      <ul id="bags_ul">
161
	<li id="work_bag_li" class="hide">
162
	  <label for="bag_name_field"> Name: </label>
163
	  <input id="bag_name_field"></input>
164
	  <ul id="bag_components_ul">
165
	    <li id="empty_bag_component_li" class="hide"></li>
166
	  </ul>
167
	  <button id="select_bag_components_but">
168
	    Add scripts
169
	  </button>
170
	  <br/>
171
	  <button id="save_bag_but"> Save </button>
172
	  <button id="discard_bag_but"> Cancel </button>
173
	</li>
174
      </ul>
175
      <button id="add_bag_but" type="button"> Add bag </button>
176
    </div>
177

    
178
    <div id="scripts">
179
      <ul id="scripts_ul">
180
	<li id="work_script_li" class="hide">
181
	  <label for="script_name_field"> Name: </label>
182
	  <input id="script_name_field"></input>
183
	  <br/>
184
	  <label for="script_url_field"> URL: </label>
185
	  <input id="script_url_field"></input>
186
	  <br/>
187
	  <label for="script_sha256_field"> sha256: </label>
188
	  <input id="script_sha256_field"></input>
189
	  <br/>
190
	  <label for="script_contents_field"> contents: </label>
191
	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
192
	  <br/>
193
	  <button id="save_script_but"> Save </button>
194
	  <button id="discard_script_but"> Cancel </button>
195
	</li>
196
      </ul>
197
      <button id="add_script_but" type="button"> Add script </button>
198
    </div>
199

    
200
    <button id="import_but" style="margin-top: 40px;"> Import </button>
201

    
202
    <div id="chbx_components_window" class="hide popup" position="absolute">
203
      <div class="popup_frame">
204
	<ul id="chbx_components_ul">
205

    
206
	</ul>
207
	<button id="commit_bag_components_but"> Add </button>
208
	<button id="cancel_bag_components_but"> Cancel </button>
209
      </div>
210
    </div>
211

    
212
    <div id="radio_components_window" class="hide popup" position="absolute">
213
      <div class="popup_frame">
214
	<ul id="radio_components_ul">
215

    
216
	  <li id="radio_component_none_li">
217
	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
218
	    <span>(None)</span>
219
	  </li>
220
	</ul>
221
	<button id="commit_page_components_but"> Choose </button>
222
	<button id="cancel_page_components_but"> Cancel </button>
223
      </div>
224
    </div>
225

    
226
    <div id="import_window" class="hide popup" position="absolute">
227
      <div class="popup_frame">
228
	<h2> Settings import </h2>
229
	<input id="import_loading_radio" type="radio" name="import_window_content"></input>
230
	<span class="import_window_content"> Loading... </span>
231
	<input id="import_failed_radio" type="radio" name="import_window_content"></input>
232
	<div class="import_window_content">
233
	  <span> Bad file :( </span>
234
	  <pre id="bad_file_errormsg"></pre>
235
	  <button id="import_failok_but"> OK </button>
236
	</div>
237
	<input id="import_selection_radio" type="radio" name="import_window_content"></input>
238
	<div class="import_window_content">
239
	  <button id="check_all_import_but"> Check all </button>
240
	  <button id="uncheck_all_import_but"> Uncheck all </button>
241
	  <button id="uncheck_colliding_import_but"> Uncheck existing </button>
242
	  <ul id="import_ul">
243
	  </ul>
244
	  <button id="commit_import_but"> OK </button>
245
	  <button id="cancel_import_but"> Cancel </button>
246
	</div>
247
      </div>
248
    </div>
249

    
250
    <a id="file_downloader" class="hide"></a>
251
    <form id="file_opener_form" style="visibility: hidden;">
252
      <input type="file" id="file_opener"></input>
253
    </form>_OPTIONSSCRIPTS_
254
  </body>
255
</html>
(3-3/4)