Project

General

Profile

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

haketilo / html / options.html @ cad85119

1
<!doctype html>
2
<!--
3
    Copyright (C) 2021 Wojtek Kosior
4

    
5
    This code is dual-licensed under:
6
    - Asshole license 1.0,
7
    - GPLv3 or (at your option) any later version
8

    
9
    "dual-licensed" means you can choose the license you prefer.
10

    
11
    This code is released under a permissive license because I disapprove of
12
    copyright and wouldn't be willing to sue a violator. Despite not putting
13
    this code under copyleft (which is also kind of copyright), I do not want
14
    it to be made proprietary. Hence, the permissive alternative to GPL is the
15
    Asshole license 1.0 that allows me to call you an asshole if you use it.
16
    This means you're legally ok regardless of how you utilize this code but if
17
    you make it into something nonfree, you're an asshole.
18

    
19
    You should have received a copy of both GPLv3 and Asshole license 1.0
20
    together with this code. If not, please see:
21
    - https://www.gnu.org/licenses/gpl-3.0.en.html
22
    - https://koszko.org/asshole-license.txt
23
  -->
24
<html>
25
  <head>
26
    <meta charset="utf-8"/>
27
    <title>Myext options</title>
28
    <style>
29
      input[type="checkbox"], input[type="radio"], .hide, .popup.hide {
30
	  display: none;
31
      }
32

    
33
      /* pages list */
34
      #page_components_ul {
35
	  max-height: 80vh;
36
	  overflow-y: auto;
37
      }
38
      #page_components_ul li.dragover_li {
39
	  border-top: 2px solid blue;
40
      }
41
      #page_components_ul li {
42
	  border-top: 2px solid white;
43
      }
44
      li[draggable=true] * {
45
	  pointer-events: none;
46
      }
47
      li[draggable=true] label,
48
      li[draggable=true] button {
49
	  pointer-events: auto;
50
      }
51

    
52
      /* tabbed view */
53
      #show_pages:not(:checked) ~ #pages,
54
      #show_bags:not(:checked) ~ #bags,
55
      #show_scripts:not(:checked) ~ #scripts {
56
	  display: none;
57
      }
58

    
59
      #show_pages:checked ~ #pages_lbl,
60
      #show_bags:checked ~ #bags_lbl,
61
      #show_scripts:checked ~ #scripts_lbl {
62
	  background: #4CAF50;
63
          color: white;
64
      }
65

    
66
      body > div {
67
	  border-top: 6px solid #4CAF50;
68
      }
69

    
70
      .tab_head {
71
	  display: inline-block;
72
      }
73

    
74
      /* popup window with list of selectable components */
75
      .popup {
76
	  position: fixed;
77
	  width: 100vw;
78
	  height: 100vh;
79
	  left: 0;
80
	  top: 0;
81
	  background-color: rgba(0,0,0,0.4);
82
	  z-index: 1;
83
	  overflow: auto;
84
	  vertical-align: center;
85
	  horizontal-align: center;
86
      }
87

    
88
      .popup_frame {
89
	  background-color: white;
90
	  width: 50vw;
91
      }
92

    
93
      input[type="radio"]:not(:checked)+.import_window_content {
94
	  display: none;
95
      }
96

    
97
      /* buttons */
98
      button {
99
          background-color: #4CAF50;
100
          border: none;
101
          border-radius: 8px;
102
          color: white;
103
          padding: 6px 12px;
104
          text-align: center;
105
          text-decoration: none;
106
          display: inline-block;
107
          margin: 2px 0px;
108
      }
109

    
110
    button:hover {
111
        box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
112
    }
113
    </style>
114
  </head>
115
  <body>
116
    <!-- The invisible div below is for elements that will be cloned. -->
117
    <div class="hide">
118
      <li id="item_li_template">
119
	<span></span>
120
	<button> Edit </button>
121
	<button> Remove </button>
122
	<button> Export </button>
123
      </li>
124
      <li id="bag_component_li_template">
125
	<span></span>
126
	<button> Remove </button>
127
      </li>
128
      <li id="chbx_component_li_template">
129
	<input type="checkbox" style="display: inline;"></input>
130
	<span></span>
131
      </li>
132
      <li id="radio_component_li_template">
133
	<input type="radio" style="display: inline;" name="page_components"></input>
134
	<span></span>
135
      </li>
136
      <li id="import_li_template">
137
	<span></span>
138
	<input type="checkbox" style="display: inline;" checked></input>
139
	<span></span>
140
      </li>
141
    </div>
142

    
143
    <input type="radio" name="tabs" id="show_pages" checked></input>
144
    <input type="radio" name="tabs" id="show_bags"></input>
145
    <input type="radio" name="tabs" id="show_scripts"></input>
146
    <label for="show_pages" id="pages_lbl"
147
	   class="tab_head"> Pages </label>
148
    <label for="show_bags" id="bags_lbl"
149
	   class="tab_head"> Bags </label>
150
    <label for="show_scripts" id="scripts_lbl"
151
	   class="tab_head"> Scripts </label>
152

    
153
    <div id="pages">
154
      <ul id="pages_ul">
155
	<li id="work_page_li" class="hide">
156
	  <label for="page_url_field">URL: </label>
157
	  <input id="page_url_field"></input>
158
	  <br/>
159
	  <label>Payload: </label>
160
	  <span id="page_payload"></span>
161
	  <button id="select_page_components_but">
162
	    Choose payload
163
	  </button>
164
	  <br/>
165
	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
166
	  <label for="page_allow_chbx">Allow native scripts</label>
167
	  <br/>
168
	  <button id="save_page_but" type="button"> Save </button>
169
	  <button id="discard_page_but" type="button"> Cancel </button>
170
	</li>
171
      </ul>
172
      <button id="add_page_but" type="button"> Add page </button>
173
    </div>
174

    
175
    <div id="bags">
176
      <ul id="bags_ul">
177
	<li id="work_bag_li" class="hide">
178
	  <label for="bag_name_field"> Name: </label>
179
	  <input id="bag_name_field"></input>
180
	  <ul id="bag_components_ul">
181
	    <li id="empty_bag_component_li" class="hide"></li>
182
	  </ul>
183
	  <button id="select_bag_components_but">
184
	    Add scripts
185
	  </button>
186
	  <br/>
187
	  <button id="save_bag_but"> Save </button>
188
	  <button id="discard_bag_but"> Cancel </button>
189
	</li>
190
      </ul>
191
      <button id="add_bag_but" type="button"> Add bag </button>
192
    </div>
193

    
194
    <div id="scripts">
195
      <ul id="scripts_ul">
196
	<li id="work_script_li" class="hide">
197
	  <label for="script_name_field"> Name: </label>
198
	  <input id="script_name_field"></input>
199
	  <br/>
200
	  <label for="script_url_field"> URL: </label>
201
	  <input id="script_url_field"></input>
202
	  <br/>
203
	  <label for="script_sha256_field"> sha256: </label>
204
	  <input id="script_sha256_field"></input>
205
	  <br/>
206
	  <label for="script_contents_field"> contents: </label>
207
	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
208
	  <br/>
209
	  <button id="save_script_but"> Save </button>
210
	  <button id="discard_script_but"> Cancel </button>
211
	</li>
212
      </ul>
213
      <button id="add_script_but" type="button"> Add script </button>
214
    </div>
215

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

    
218
    <div id="chbx_components_window" class="hide popup" position="absolute">
219
      <div class="popup_frame">
220
	<ul id="chbx_components_ul">
221

    
222
	</ul>
223
	<button id="commit_bag_components_but"> Add </button>
224
	<button id="cancel_bag_components_but"> Cancel </button>
225
      </div>
226
    </div>
227

    
228
    <div id="radio_components_window" class="hide popup" position="absolute">
229
      <div class="popup_frame">
230
	<ul id="radio_components_ul">
231

    
232
	  <li id="radio_component_none_li">
233
	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
234
	    <span>(None)</span>
235
	  </li>
236
	</ul>
237
	<button id="commit_page_components_but"> Choose </button>
238
	<button id="cancel_page_components_but"> Cancel </button>
239
      </div>
240
    </div>
241

    
242
    <div id="import_window" class="hide popup" position="absolute">
243
      <div class="popup_frame">
244
	<h2> Settings import </h2>
245
	<input id="import_loading_radio" type="radio" name="import_window_content"></input>
246
	<span class="import_window_content"> Loading... </span>
247
	<input id="import_failed_radio" type="radio" name="import_window_content"></input>
248
	<div class="import_window_content">
249
	  <span> Bad file :( </span>
250
	  <pre id="bad_file_errormsg"></pre>
251
	  <button id="import_failok_but"> OK </button>
252
	</div>
253
	<input id="import_selection_radio" type="radio" name="import_window_content"></input>
254
	<div class="import_window_content">
255
	  <button id="check_all_import_but"> Check all </button>
256
	  <button id="uncheck_all_import_but"> Uncheck all </button>
257
	  <button id="uncheck_colliding_import_but"> Uncheck existing </button>
258
	  <ul id="import_ul">
259
	  </ul>
260
	  <button id="commit_import_but"> OK </button>
261
	  <button id="cancel_import_but"> Cancel </button>
262
	</div>
263
      </div>
264
    </div>
265

    
266
    <a id="file_downloader" class="hide"></a>
267
    <form id="file_opener_form" style="visibility: hidden;">
268
      <input type="file" id="file_opener"></input>
269
    </form>
270

    
271
    <script src="/common/connection_types.js"></script>
272
    <script src="/common/stored_types.js"></script>
273
    <script src="/common/once.js"></script>
274
    <script src="/common/browser.js"></script>
275
    <script src="/common/storage_client.js"></script>
276
    <script src="./options_main.js"></script>
277
  </body>
278
</html>
(3-3/4)