this repo has no description
Update index.html
+1568
-1340
+1568
-1340
public/index.html
+1568
-1340
public/index.html
···
1
1
<!DOCTYPE html>
2
2
<html>
3
-
<head>
4
-
<title>Kinklist</title>
5
-
<meta charset="UTF-8">
6
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
8
-
<script src="//cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
9
-
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMjEvMTV5ehY1AAAAZElEQVQ4jaWTwQ3AIAwDbcT+I9f9hjYQA/mAkO7igKAACWdFAF0A2gb0hP0uCyTATyAJSoaK5xGyEmTC9lktmORUdAQvBQ5cJshktoDk0HkmKRNUEmuE6ztYVXe7bT+jW7z9zi8qYiodCjCHKgAAAABJRU5ErkJggg==">
10
-
<style>
11
-
body {
12
-
font-family: 'Verdana', 'Arial';
13
-
font-size: 12px;
14
-
}
15
-
h2 {
16
-
padding: 0;
17
-
margin: 0;
18
-
margin-top: 10px;
19
-
margin-bottom: 5px;
20
-
font-size: 18px;
21
-
}
22
-
table {
23
-
border-collapse: collapse;
24
-
margin-bottom: 10px;
25
-
width: 100%;
26
-
}
27
-
th {
28
-
border: solid #999 1px;
29
-
border-right: none;
30
-
margin: 0px;
31
-
padding: 4px;
32
-
background-color: #666;
33
-
color: #FFF;
34
-
}
35
-
th.choicesCol {
36
-
box-sizing: border-box;
37
-
width: 146px;
38
-
}
39
-
th + th {
40
-
border-left: none;
41
-
}
42
-
th:last-child {
43
-
border-right: solid #999 1px;
44
-
}
3
+
4
+
<head>
5
+
<title>Kinklist</title>
6
+
<meta charset="UTF-8">
7
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
9
+
<script src="//cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
10
+
<link rel="icon" type="image/x-icon"
11
+
href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMjEvMTV5ehY1AAAAZElEQVQ4jaWTwQ3AIAwDbcT+I9f9hjYQA/mAkO7igKAACWdFAF0A2gb0hP0uCyTATyAJSoaK5xGyEmTC9lktmORUdAQvBQ5cJshktoDk0HkmKRNUEmuE6ztYVXe7bT+jW7z9zi8qYiodCjCHKgAAAABJRU5ErkJggg==">
12
+
<style>
13
+
body {
14
+
font-family: 'Verdana', 'Arial';
15
+
font-size: 12px;
16
+
}
17
+
18
+
h2 {
19
+
padding: 0;
20
+
margin: 0;
21
+
margin-top: 10px;
22
+
margin-bottom: 5px;
23
+
font-size: 18px;
24
+
}
25
+
26
+
table {
27
+
border-collapse: collapse;
28
+
margin-bottom: 10px;
29
+
width: 100%;
30
+
}
31
+
32
+
th {
33
+
border: solid #999 1px;
34
+
border-right: none;
35
+
margin: 0px;
36
+
padding: 4px;
37
+
background-color: #666;
38
+
color: #FFF;
39
+
}
40
+
41
+
th.choicesCol {
42
+
box-sizing: border-box;
43
+
width: 146px;
44
+
}
45
+
46
+
th+th {
47
+
border-left: none;
48
+
}
49
+
50
+
th:last-child {
51
+
border-right: solid #999 1px;
52
+
}
53
+
54
+
td {
55
+
border-left: solid #999 1px;
56
+
border-bottom: solid #999 1px;
57
+
border-right: solid #999 1px;
58
+
margin: 0px;
59
+
padding: 4px;
60
+
padding-right: 2px;
61
+
}
62
+
63
+
@-moz-document url-prefix() {
45
64
td {
46
-
border-left: solid #999 1px;
47
-
border-bottom: solid #999 1px;
48
-
border-right: solid #999 1px;
49
-
margin: 0px;
50
-
padding: 4px;
51
-
padding-right: 2px;
65
+
padding: 3.3px;
52
66
}
53
-
@-moz-document url-prefix() {
54
-
td {
55
-
padding: 3.3px;
56
-
}
57
-
}
58
-
td + td {
59
-
border-left-style: none;
60
-
}
61
-
.choice {
62
-
box-sizing: border-box;
63
-
width: 15px;
64
-
height: 15px;
65
-
opacity: 0.35;
66
-
overflow: hidden;
67
-
text-indent: 100px;
68
-
border: solid #000 1px;
69
-
border-radius: 50%;
70
-
outline-style: none!important;
71
-
vertical-align: middle;
72
-
display: inline-block;
73
-
cursor: pointer;
74
-
font-size: 0;
75
-
padding: 0;
76
-
}
77
-
.choices .choice {
78
-
transition: all 0.3s ease-in-out;
79
-
}
80
-
.choice + .choice {
81
-
margin-left: 5px;
82
-
}
83
-
.choices .choice:hover {
84
-
opacity: 0.75;
85
-
}
86
-
.choice.selected, .selected > .choice {
87
-
opacity: 1;
88
-
border-width: 2px;
89
-
}
90
-
67
+
}
68
+
69
+
td+td {
70
+
border-left-style: none;
71
+
}
72
+
73
+
.choice {
74
+
box-sizing: border-box;
75
+
width: 15px;
76
+
height: 15px;
77
+
opacity: 0.35;
78
+
overflow: hidden;
79
+
text-indent: 100px;
80
+
border: solid #000 1px;
81
+
border-radius: 50%;
82
+
outline-style: none !important;
83
+
vertical-align: middle;
84
+
display: inline-block;
85
+
cursor: pointer;
86
+
font-size: 0;
87
+
padding: 0;
88
+
}
89
+
90
+
.choices .choice {
91
+
transition: all 0.3s ease-in-out;
92
+
}
93
+
94
+
.choice+.choice {
95
+
margin-left: 5px;
96
+
}
97
+
98
+
.choices .choice:hover {
99
+
opacity: 0.75;
100
+
}
101
+
102
+
.choice.selected,
103
+
.selected>.choice {
104
+
opacity: 1;
105
+
border-width: 2px;
106
+
}
107
+
108
+
.legend {
109
+
vertical-align: middle;
110
+
font-size: 14px;
111
+
}
112
+
113
+
.legend div {
114
+
display: inline-block;
115
+
}
116
+
117
+
.legend .choice {
118
+
opacity: 1;
119
+
cursor: default;
120
+
}
121
+
122
+
.legend-text {
123
+
vertical-align: middle;
124
+
}
125
+
126
+
#ExportWrapper {
127
+
width: 460px;
128
+
height: 36px;
129
+
}
130
+
131
+
#URL {
132
+
display: none;
133
+
position: absolute;
134
+
top: 3px;
135
+
box-sizing: border-box;
136
+
width: 300px;
137
+
height: 30px;
138
+
border-radius: 4px;
139
+
border: solid #CCC 1px;
140
+
font-size: 16px;
141
+
padding: 10px;
142
+
text-align: center;
143
+
color: #666;
144
+
font-weight: bold;
145
+
}
146
+
147
+
#Export {
148
+
position: absolute;
149
+
left: 310px;
150
+
box-sizing: border-box;
151
+
color: #FFF;
152
+
text-transform: uppercase;
153
+
background-color: #4980ae;
154
+
font-size: 18px;
155
+
width: 150px;
156
+
height: 36px;
157
+
border-style: none;
158
+
border-radius: 4px;
159
+
cursor: pointer;
160
+
transition: all 0.3s ease-in-out;
161
+
}
162
+
163
+
#Export:hover {
164
+
opacity: 0.85;
165
+
}
166
+
167
+
#Loading {
168
+
display: none;
169
+
overflow: visible;
170
+
line-height: 26px;
171
+
font-size: 16px;
172
+
color: #999;
173
+
font-weight: bold;
174
+
position: absolute;
175
+
top: 4px;
176
+
left: 220px;
177
+
}
178
+
179
+
#Loading:before {
180
+
content: '';
181
+
position: absolute;
182
+
box-sizing: border-box;
183
+
width: 26px;
184
+
height: 26px;
185
+
border-radius: 50%;
186
+
border: solid #999 2px;
187
+
border-top-color: transparent;
188
+
border-left-color: #CCC;
189
+
border-right-color: #666;
190
+
animation: spin .5s infinite linear;
191
+
margin-left: -40px;
192
+
}
193
+
194
+
@media (min-width: 1700px) {
91
195
.legend {
92
-
vertical-align: middle;
93
-
font-size: 14px;
196
+
position: absolute;
197
+
top: 7px;
198
+
left: 160px;
94
199
}
200
+
95
201
.legend div {
96
-
display: inline-block;
202
+
width: 130px;
97
203
}
98
-
.legend .choice {
99
-
opacity: 1;
100
-
cursor: default;
101
-
}
102
-
.legend-text {
103
-
vertical-align: middle;
104
-
}
105
-
204
+
106
205
#ExportWrapper {
107
-
width: 460px;
108
-
height: 36px;
109
-
}
110
-
#URL {
111
-
display: none;
112
206
position: absolute;
113
-
top: 3px;
114
-
box-sizing: border-box;
115
-
width: 300px;
116
-
height: 30px;
117
-
border-radius: 4px;
118
-
border: solid #CCC 1px;
119
-
font-size: 16px;
120
-
padding: 10px;
121
-
text-align: center;
122
-
color: #666;
123
-
font-weight: bold;
207
+
top: -3px;
208
+
right: 46px;
124
209
}
125
-
#Export {
126
-
position: absolute;
127
-
left: 310px;
128
-
box-sizing: border-box;
129
-
color: #FFF;
130
-
text-transform: uppercase;
131
-
background-color: #4980ae;
132
-
font-size: 18px;
133
-
width: 150px;
134
-
height: 36px;
135
-
border-style: none;
136
-
border-radius: 4px;
137
-
cursor: pointer;
138
-
transition: all 0.3s ease-in-out;
210
+
211
+
h1 {
212
+
margin-bottom: 0;
139
213
}
140
-
#Export:hover {
141
-
opacity: 0.85;
214
+
}
215
+
216
+
@media (max-width: 1700px) and (min-width: 800px) {
217
+
.legend div {
218
+
width: 130px;
219
+
padding-bottom: 10px;
142
220
}
143
-
#Loading {
144
-
display: none;
145
-
overflow: visible;
146
-
line-height: 26px;
147
-
font-size: 16px;
148
-
color: #999;
149
-
font-weight: bold;
221
+
222
+
#ExportWrapper {
150
223
position: absolute;
151
-
top: 4px;
152
-
left: 220px;
224
+
top: -3px;
225
+
right: 46px;
153
226
}
154
-
#Loading:before {
155
-
content: '';
156
-
position: absolute;
157
-
box-sizing: border-box;
158
-
width: 26px;
159
-
height: 26px;
160
-
border-radius: 50%;
161
-
border: solid #999 2px;
162
-
border-top-color: transparent;
163
-
border-left-color: #CCC;
164
-
border-right-color: #666;
165
-
animation: spin .5s infinite linear;
166
-
margin-left: -40px;
167
-
}
168
-
@media (min-width: 1700px) {
169
-
.legend {
170
-
position: absolute;
171
-
top: 7px;
172
-
left: 160px;
173
-
}
174
-
.legend div {
175
-
width: 130px;
176
-
}
177
-
#ExportWrapper {
178
-
position: absolute;
179
-
top: -3px;
180
-
right: 46px;
181
-
}
182
-
h1 {
183
-
margin-bottom: 0;
184
-
}
185
-
}
186
-
@media (max-width: 1700px) and (min-width: 800px) {
187
-
.legend div {
188
-
width: 130px;
189
-
padding-bottom: 10px;
190
-
}
191
-
#ExportWrapper {
192
-
position: absolute;
193
-
top: -3px;
194
-
right: 46px;
195
-
}
196
-
}
197
-
@media (max-width: 800px) and (min-width: 598px) {
198
-
.legend div {
199
-
width: 180px;
200
-
padding-bottom: 10px;
201
-
padding-left: 10px;
202
-
}
203
-
#ExportWrapper {
204
-
position: relative;
205
-
margin-top: 10px;
206
-
margin-left: 5px;
207
-
}
208
-
#URL {
209
-
left: 155px;
210
-
width: 190px;
211
-
font-size: 10px;
212
-
}
213
-
#Export {
214
-
left: 0px;
215
-
}
216
-
#Loading {
217
-
left: 230px;
218
-
}
219
-
}
220
-
@media (max-width: 597px) {
221
-
body {
222
-
font-size: 10px;
223
-
}
224
-
table {
225
-
min-width: 345px;
226
-
}
227
-
.legend div {
228
-
width: 150px;
229
-
padding-bottom: 10px;
230
-
padding-left: 10px;
231
-
}
232
-
#ExportWrapper {
233
-
position: relative;
234
-
margin-top: 10px;
235
-
margin-left: 0px;
236
-
width: 345px;
237
-
}
238
-
#URL {
239
-
left: 155px;
240
-
width: 190px;
241
-
font-size: 10px;
242
-
}
243
-
#Export {
244
-
left: 0px;
245
-
}
246
-
#Loading {
247
-
left: 230px;
248
-
}
249
-
}
250
-
@keyframes spin {
251
-
0% {transform: rotate(0deg);}
252
-
100% {transform: rotate(-360deg);}
227
+
}
228
+
229
+
@media (max-width: 800px) and (min-width: 598px) {
230
+
.legend div {
231
+
width: 180px;
232
+
padding-bottom: 10px;
233
+
padding-left: 10px;
253
234
}
254
-
255
-
#ExportWrapper :last-child:after {
256
-
content: '';
257
-
display: block;
258
-
clear: both;
259
-
}
260
-
.kinkCategory {
261
-
262
-
}
263
-
.col {
264
-
float: left;
265
-
box-sizing: border-box;
266
-
margin: 0;
267
-
padding: 5px;
268
-
}
269
-
.col.col25 { width: 25%; }
270
-
.col.col33 { width: 33.33333%; }
271
-
.col.col50 { width: 50%; }
272
-
.col.col100 { width: 100%; padding: 0px; }
273
-
.widthWrapper {
274
-
max-width: 1700px;
275
-
margin-left: auto;
276
-
margin-right: auto;
235
+
236
+
#ExportWrapper {
277
237
position: relative;
238
+
margin-top: 10px;
239
+
margin-left: 5px;
278
240
}
279
-
#Edit {
280
-
width: 18px;
281
-
height: 18px;
282
-
background-color: transparent;
283
-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTIvMTUsb8MLAAABaElEQVQ4jZWUvY3jMBCF390mzpQ6I1wBS5A6oDuQOxi4Ap4rUAlqwR1M7IhQBYRCR1To7G1giJBkes/7gElGg4/zK7AgVaWI0FpLAIwxlsJWwtbRdR0BrKzruvw9pUTnHEMIP4NCCC8gay2991TVnGVVVSvYCyil9AJ6Z0sY5nJCCEwp5Rc/NefcE6Sqb4OMMRQRigiNMcWSU0pPkIgUIW3b5gmqKkmybdtVzOwnSZRKMcaQJOu6zr66rklylZn3PoO+7vf7P2x0Op2w2+1wuVyybxxHNE0DALjdbgCAaZrweDyw3+/xN8aIvu9hrd3y/qthGHA+n3E4HJDH773/dWnLpmfQdnqfNHs2EeEfkpymCU3TYBiGVerGGByPRwDA9XrFOI7FElX1WZpz7ldLOO9PCCHfIeb7qqrqY9C8hEvlHi1h1lqqKr33xZPZXv4KNMOcc6sX+77/8bdSBJUUY8xZisjqLJb6Bpjss/W5PAkOAAAAAElFTkSuQmCC');
284
-
background-repeat: no-repeat;
285
-
float: left;
286
-
border-style: none;
287
-
outline-style: none!important;
288
-
margin-top: 6px;
289
-
margin-right: 4px;
290
-
opacity: 0.5;
291
-
cursor: pointer;
241
+
242
+
#URL {
243
+
left: 155px;
244
+
width: 190px;
245
+
font-size: 10px;
292
246
}
293
-
#Edit:hover {
294
-
opacity: 1;
247
+
248
+
#Export {
249
+
left: 0px;
295
250
}
296
-
297
-
.overlay {
298
-
position: fixed;
299
-
top: 0;
300
-
left: 0;
301
-
right: 0;
302
-
bottom: 0;
303
-
background-color: rgba(0, 0, 0, 0.8);
304
-
display: none;
251
+
252
+
#Loading {
253
+
left: 230px;
305
254
}
306
-
#EditOverlay #Kinks {
307
-
box-sizing: border-box;
308
-
position: absolute;
309
-
top: 10px;
310
-
bottom: 50px;
311
-
width: 330px;
312
-
left: 50%;
313
-
margin-left: -165px;
314
-
resize: none;
315
-
padding: 10px;
316
-
border-radius: 5px;
317
-
font-family: monospace, 'Courier new', Courier;
255
+
}
256
+
257
+
@media (max-width: 597px) {
258
+
body {
259
+
font-size: 10px;
318
260
}
319
-
#EditOverlay #KinksOK {
320
-
box-sizing: border-box;
321
-
position: absolute;
322
-
bottom: 10px;
323
-
width: 330px;
324
-
height: 30px;
325
-
left: 50%;
326
-
margin-left: -165px;
327
-
color: #FFF;
328
-
text-transform: uppercase;
329
-
background-color: #4980ae;
330
-
font-size: 18px;
331
-
border-style: none;
332
-
border-radius: 5px;
333
-
cursor: pointer;
261
+
262
+
table {
263
+
min-width: 345px;
334
264
}
335
-
336
-
#InputOverlay {
337
-
text-align: center;
338
-
white-space: nowrap;
339
-
}
340
-
#InputOverlay:before {
341
-
content: '';
342
-
display: inline-block;
343
-
height: 100%;
344
-
vertical-align: middle;
345
-
margin-right: -0.25em;
346
-
}
347
-
#InputOverlay .widthWrapper {
348
-
display: inline-block;
349
-
vertical-align: middle;
350
-
width: 400px;
351
-
text-align: left;
352
-
max-width: 100%;
265
+
266
+
.legend div {
267
+
width: 150px;
268
+
padding-bottom: 10px;
269
+
padding-left: 10px;
353
270
}
354
-
#InputOverlay .widthWrapper #InputCurrent, #InputOverlay .widthWrapper .kink-simple {
355
-
display: block;
356
-
box-sizing: border-box;
357
-
padding: 10px;
358
-
background-color: #EEE;
359
-
}
360
-
#InputOverlay .widthWrapper .kink-simple {
271
+
272
+
#ExportWrapper {
361
273
position: relative;
362
-
height: 40px;
363
-
line-height: 20px;
364
-
cursor: pointer;
274
+
margin-top: 10px;
275
+
margin-left: 0px;
276
+
width: 345px;
365
277
}
366
-
#InputOverlay .widthWrapper .kink-simple .choice {
367
-
margin-right: 5px;
368
-
}
369
-
#InputOverlay .widthWrapper .kink-simple .txt-category {
370
-
position: absolute;
371
-
right: 5px;
372
-
top: 5px;
373
-
text-transform: uppercase;
374
-
font-size: 90%;
375
-
font-weight: bold;
376
-
opacity: 0.6;
377
-
line-height: 1em;
378
-
}
379
-
#InputOverlay .widthWrapper .kink-simple .txt-field, #InputOverlay .widthWrapper .kink-simple .txt-kink {
380
-
vertical-align: middle;
381
-
}
382
-
#InputOverlay .widthWrapper .kink-simple .txt-field:empty {
383
-
display: none;
384
-
}
385
-
#InputOverlay .widthWrapper .kink-simple .txt-field:before {
386
-
content: '(';
387
-
}
388
-
#InputOverlay .widthWrapper .kink-simple .txt-field:after {
389
-
content: ') ';
390
-
}
391
-
392
-
#InputOverlay .widthWrapper #InputPrevious .kink-simple:first-child,
393
-
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(3) {
394
-
background-color: #BBB;
278
+
279
+
#URL {
280
+
left: 155px;
281
+
width: 190px;
395
282
font-size: 10px;
396
-
margin-left: 12px;
397
-
margin-right: 12px;
398
-
height: 33px;
399
283
}
400
-
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(2),
401
-
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(2) {
402
-
background-color: #CCC;
403
-
font-size: 11px;
404
-
margin-left: 6px;
405
-
margin-right: 6px;
406
-
height: 37px;
284
+
285
+
#Export {
286
+
left: 0px;
407
287
}
408
-
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(3),
409
-
#InputOverlay .widthWrapper #InputNext .kink-simple:first-child {
410
-
background-color: #DDD;
411
-
margin-left: 3px;
412
-
margin-right: 3px;
288
+
289
+
#Loading {
290
+
left: 230px;
413
291
}
414
-
#InputOverlay .widthWrapper #InputPrevious .kink-simple:first-child {
415
-
padding-bottom: 4px;
416
-
padding-top: 7px;
292
+
}
293
+
294
+
@keyframes spin {
295
+
0% {
296
+
transform: rotate(0deg);
417
297
}
418
-
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(3) {
419
-
padding-top: 4px;
298
+
299
+
100% {
300
+
transform: rotate(-360deg);
420
301
}
421
-
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(2) {
422
-
padding-bottom: 7px;
423
-
padding-top: 9px;
302
+
}
303
+
304
+
#ExportWrapper :last-child:after {
305
+
content: '';
306
+
display: block;
307
+
clear: both;
308
+
}
309
+
310
+
.kinkCategory {}
311
+
312
+
.col {
313
+
float: left;
314
+
box-sizing: border-box;
315
+
margin: 0;
316
+
padding: 5px;
317
+
}
318
+
319
+
.col.col25 {
320
+
width: 25%;
321
+
}
322
+
323
+
.col.col33 {
324
+
width: 33.33333%;
325
+
}
326
+
327
+
.col.col50 {
328
+
width: 50%;
329
+
}
330
+
331
+
.col.col100 {
332
+
width: 100%;
333
+
padding: 0px;
334
+
}
335
+
336
+
.widthWrapper {
337
+
max-width: 1700px;
338
+
margin-left: auto;
339
+
margin-right: auto;
340
+
position: relative;
341
+
}
342
+
343
+
#Edit {
344
+
width: 18px;
345
+
height: 18px;
346
+
background-color: transparent;
347
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTIvMTUsb8MLAAABaElEQVQ4jZWUvY3jMBCF390mzpQ6I1wBS5A6oDuQOxi4Ap4rUAlqwR1M7IhQBYRCR1To7G1giJBkes/7gElGg4/zK7AgVaWI0FpLAIwxlsJWwtbRdR0BrKzruvw9pUTnHEMIP4NCCC8gay2991TVnGVVVSvYCyil9AJ6Z0sY5nJCCEwp5Rc/NefcE6Sqb4OMMRQRigiNMcWSU0pPkIgUIW3b5gmqKkmybdtVzOwnSZRKMcaQJOu6zr66rklylZn3PoO+7vf7P2x0Op2w2+1wuVyybxxHNE0DALjdbgCAaZrweDyw3+/xN8aIvu9hrd3y/qthGHA+n3E4HJDH773/dWnLpmfQdnqfNHs2EeEfkpymCU3TYBiGVerGGByPRwDA9XrFOI7FElX1WZpz7ldLOO9PCCHfIeb7qqrqY9C8hEvlHi1h1lqqKr33xZPZXv4KNMOcc6sX+77/8bdSBJUUY8xZisjqLJb6Bpjss/W5PAkOAAAAAElFTkSuQmCC');
348
+
background-repeat: no-repeat;
349
+
float: left;
350
+
border-style: none;
351
+
outline-style: none !important;
352
+
margin-top: 6px;
353
+
margin-right: 4px;
354
+
opacity: 0.5;
355
+
cursor: pointer;
356
+
}
357
+
358
+
#Edit:hover {
359
+
opacity: 1;
360
+
}
361
+
362
+
.overlay {
363
+
position: fixed;
364
+
top: 0;
365
+
left: 0;
366
+
right: 0;
367
+
bottom: 0;
368
+
background-color: rgba(0, 0, 0, 0.8);
369
+
display: none;
370
+
}
371
+
372
+
#EditOverlay #Kinks {
373
+
box-sizing: border-box;
374
+
position: absolute;
375
+
top: 10px;
376
+
bottom: 50px;
377
+
width: 330px;
378
+
left: 50%;
379
+
margin-left: -165px;
380
+
resize: none;
381
+
padding: 10px;
382
+
border-radius: 5px;
383
+
font-family: monospace, 'Courier new', Courier;
384
+
}
385
+
386
+
#EditOverlay #KinksOK {
387
+
box-sizing: border-box;
388
+
position: absolute;
389
+
bottom: 10px;
390
+
width: 330px;
391
+
height: 30px;
392
+
left: 50%;
393
+
margin-left: -165px;
394
+
color: #FFF;
395
+
text-transform: uppercase;
396
+
background-color: #4980ae;
397
+
font-size: 18px;
398
+
border-style: none;
399
+
border-radius: 5px;
400
+
cursor: pointer;
401
+
}
402
+
403
+
#InputOverlay {
404
+
text-align: center;
405
+
white-space: nowrap;
406
+
}
407
+
408
+
#InputOverlay:before {
409
+
content: '';
410
+
display: inline-block;
411
+
height: 100%;
412
+
vertical-align: middle;
413
+
margin-right: -0.25em;
414
+
}
415
+
416
+
#InputOverlay .widthWrapper {
417
+
display: inline-block;
418
+
vertical-align: middle;
419
+
width: 400px;
420
+
text-align: left;
421
+
max-width: 100%;
422
+
}
423
+
424
+
#InputOverlay .widthWrapper #InputCurrent,
425
+
#InputOverlay .widthWrapper .kink-simple {
426
+
display: block;
427
+
box-sizing: border-box;
428
+
padding: 10px;
429
+
background-color: #EEE;
430
+
}
431
+
432
+
#InputOverlay .widthWrapper .kink-simple {
433
+
position: relative;
434
+
height: 40px;
435
+
line-height: 20px;
436
+
cursor: pointer;
437
+
}
438
+
439
+
#InputOverlay .widthWrapper .kink-simple .choice {
440
+
margin-right: 5px;
441
+
}
442
+
443
+
#InputOverlay .widthWrapper .kink-simple .txt-category {
444
+
position: absolute;
445
+
right: 5px;
446
+
top: 5px;
447
+
text-transform: uppercase;
448
+
font-size: 90%;
449
+
font-weight: bold;
450
+
opacity: 0.6;
451
+
line-height: 1em;
452
+
}
453
+
454
+
#InputOverlay .widthWrapper .kink-simple .txt-field,
455
+
#InputOverlay .widthWrapper .kink-simple .txt-kink {
456
+
vertical-align: middle;
457
+
}
458
+
459
+
#InputOverlay .widthWrapper .kink-simple .txt-field:empty {
460
+
display: none;
461
+
}
462
+
463
+
#InputOverlay .widthWrapper .kink-simple .txt-field:before {
464
+
content: '(';
465
+
}
466
+
467
+
#InputOverlay .widthWrapper .kink-simple .txt-field:after {
468
+
content: ') ';
469
+
}
470
+
471
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:first-child,
472
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(3) {
473
+
background-color: #BBB;
474
+
font-size: 10px;
475
+
margin-left: 12px;
476
+
margin-right: 12px;
477
+
height: 33px;
478
+
}
479
+
480
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(2),
481
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(2) {
482
+
background-color: #CCC;
483
+
font-size: 11px;
484
+
margin-left: 6px;
485
+
margin-right: 6px;
486
+
height: 37px;
487
+
}
488
+
489
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(3),
490
+
#InputOverlay .widthWrapper #InputNext .kink-simple:first-child {
491
+
background-color: #DDD;
492
+
margin-left: 3px;
493
+
margin-right: 3px;
494
+
}
495
+
496
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:first-child {
497
+
padding-bottom: 4px;
498
+
padding-top: 7px;
499
+
}
500
+
501
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(3) {
502
+
padding-top: 4px;
503
+
}
504
+
505
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(2) {
506
+
padding-bottom: 7px;
507
+
padding-top: 9px;
508
+
}
509
+
510
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(2) {
511
+
padding-top: 7px;
512
+
}
513
+
514
+
#InputPrevious .kink-simple {
515
+
border-top-left-radius: 2px;
516
+
border-top-right-radius: 2px;
517
+
}
518
+
519
+
#InputNext .kink-simple {
520
+
border-bottom-left-radius: 2px;
521
+
border-bottom-right-radius: 2px;
522
+
}
523
+
524
+
#InputOverlay .widthWrapper #InputCurrent {
525
+
position: relative;
526
+
}
527
+
528
+
#InputOverlay .widthWrapper #InputCurrent .closePopup {
529
+
position: absolute;
530
+
top: 0;
531
+
right: 5px;
532
+
border-style: none;
533
+
background-color: transparent;
534
+
font-size: 30px;
535
+
cursor: pointer;
536
+
outline-style: none !important;
537
+
opacity: 0.65;
538
+
}
539
+
540
+
#InputOverlay .widthWrapper #InputCurrent .closePopup:hover {
541
+
opacity: 1;
542
+
}
543
+
544
+
#InputOverlay .widthWrapper #InputCurrent h2 {
545
+
text-transform: uppercase;
546
+
opacity: 0.6;
547
+
margin: 0;
548
+
}
549
+
550
+
#InputOverlay .widthWrapper #InputCurrent h3 {
551
+
margin-top: 3px;
552
+
margin-bottom: 0;
553
+
font-size: 14px;
554
+
}
555
+
556
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice {
557
+
padding: 10px;
558
+
background-color: rgba(255, 255, 255, 0.75);
559
+
border-radius: 4px;
560
+
margin-top: 5px;
561
+
cursor: pointer;
562
+
}
563
+
564
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice.selected {
565
+
font-weight: bold;
566
+
}
567
+
568
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice.selected .choice {
569
+
opacity: 1;
570
+
}
571
+
572
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice:hover {
573
+
padding: 8px;
574
+
border: solid #999 2px;
575
+
background-color: rgba(255, 255, 255, 1);
576
+
}
577
+
578
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice .btn-num-text {
579
+
float: right;
580
+
display: inline-block;
581
+
border: solid #CCC 1px;
582
+
text-align: center;
583
+
width: 16px;
584
+
border-radius: 3px;
585
+
}
586
+
587
+
#StartBtn {
588
+
position: absolute;
589
+
top: -3px;
590
+
right: 5px;
591
+
box-sizing: border-box;
592
+
width: 36px;
593
+
height: 36px;
594
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTUvMTWxuPuyAAACcElEQVRYhe3X30tTYRzH8fdz3FYTd1xamAuTLDbM3EwqNMnoQgxydVH0A6Ks/oG6Mvp1n1flVUJE3pjUTVPCCJxmEKTWRAuCApujkmhJoZu57ZwuwsCaOx7nbBf73D2H7/PldfjCc54j6CxXSaNI/xvwdzIgrWRAWsmAtJJ2IIOe4iLzejoqmym1lDAZ+UFEicatC8Vm6A++5Jb/Pm+nxlIHatl2keo8FwJBriGHREe8U7bjyrWz7/m51IHq1lWjqire4AAvJkf5qczGrduUvYHTRQdxyQ5dGN0gg8hCBc4MXyUQnliwbqO5kOO2/ZzyXQagONvGcO0DLrxp5m7As3ygxUZB4aTvEt1fnuGSHQgEnoleKnIdEEi8NymQ6h7555nocvJt9jsPJ3o4XFhHq/MaAkFF/xE+hD5p9kwKJLqccZ+HYjMcs9XTXnkdSUi0BToXhYEUnUM7rFvnYRqHryx6b1Ig1T2C6h4h0uDjqK0eSUi4ZAc9VbeRhMS76XFdGFjmkblkB3277yAbc3g/PY7D69bdc9lGNoexGi10fOzG7nWTb7KuLCh8YJAyy2YEgqE997AaLbQFOjnxqom1JiueXTd190xqZOZHOwFoLDrEVCxMm9/D+dfNSELiSVUrpZaSlQXNpTc4wJrHNX/W+SYr5bKdqBr/45soSxqZQWTNW/tDn+etV0umpbT93VtP8awSwZhl4EZZE/7wwgddsdmGJAQxRUktyPt1gIaCvTQU1Ca8eghAVVX6goO6QULPn2vBqnyatpylJm87RrHwu0TVKE+DQ7SMtSe8FSQNWomk3Z06A9JKBqSVDEgraQf6BTg8uT5wSV/pAAAAAElFTkSuQmCC');
595
+
border-style: none;
596
+
border-radius: 4px;
597
+
cursor: pointer;
598
+
}
599
+
600
+
#StartBtn:hover {
601
+
opacity: 0.8;
602
+
}
603
+
604
+
@media (max-height: 500px) {
605
+
606
+
#InputPrevious,
607
+
#InputNext {
608
+
display: none;
424
609
}
425
-
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(2) {
426
-
padding-top: 7px;
610
+
}
611
+
612
+
/* added */
613
+
614
+
@media (orientation: portrait) {
615
+
.kinkGroup th:last-child {
616
+
display: none;
427
617
}
428
-
429
-
#InputPrevious .kink-simple {
430
-
border-top-left-radius: 2px;
431
-
border-top-right-radius: 2px;
618
+
619
+
.choice {
620
+
width: 30px;
621
+
height: 30px;
432
622
}
433
-
#InputNext .kink-simple {
434
-
border-bottom-left-radius: 2px;
435
-
border-bottom-right-radius: 2px;
623
+
624
+
.kinkRow td {
625
+
text-align: center;
626
+
font-size: 200%;
436
627
}
437
-
438
-
#InputOverlay .widthWrapper #InputCurrent {
439
-
position: relative;
628
+
629
+
.kinkGroup {
630
+
display: flex;
631
+
flex-flow: row wrap;
440
632
}
441
-
#InputOverlay .widthWrapper #InputCurrent .closePopup {
442
-
position: absolute;
443
-
top: 0;
444
-
right: 5px;
445
-
border-style: none;
446
-
background-color: transparent;
447
-
font-size: 30px;
448
-
cursor: pointer;
449
-
outline-style: none!important;
450
-
opacity: 0.65;
633
+
634
+
.kinkGroup thead {
635
+
flex: 1 100%;
636
+
display: flex;
451
637
}
452
-
#InputOverlay .widthWrapper #InputCurrent .closePopup:hover {
453
-
opacity: 1;
638
+
639
+
.kinkGroup th {
640
+
flex: 1 50%;
641
+
display: inline-block;
454
642
}
455
-
#InputOverlay .widthWrapper #InputCurrent h2 {
456
-
text-transform: uppercase;
457
-
opacity: 0.6;
458
-
margin: 0;
643
+
644
+
.kinkGroup tbody {
645
+
flex: 1 100%;
459
646
}
460
-
#InputOverlay .widthWrapper #InputCurrent h3 {
461
-
margin-top: 3px;
462
-
margin-bottom: 0;
463
-
font-size: 14px;
647
+
648
+
.kinkRow {
649
+
flex: 1 100%;
650
+
display: flex;
651
+
flex-flow: row wrap;
464
652
}
465
-
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice {
466
-
padding: 10px;
467
-
background-color: rgba(255,255,255,0.75);
468
-
border-radius: 4px;
469
-
margin-top: 5px;
470
-
cursor: pointer;
653
+
654
+
.kinkRow td {
655
+
padding: 5px;
656
+
padding-top: 5px;
657
+
border: none;
471
658
}
472
-
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice.selected {
473
-
font-weight: bold;
659
+
660
+
.kinkRow td:not(:last-child) {
661
+
flex: 1 50%;
474
662
}
475
-
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice.selected .choice {
476
-
opacity: 1;
663
+
664
+
.kinkRow td:last-child {
665
+
flex: 1 51%;
666
+
border-bottom: solid #999 1px;
477
667
}
478
-
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice:hover {
479
-
padding: 8px;
480
-
border: solid #999 2px;
481
-
background-color: rgba(255,255,255,1);
668
+
669
+
/* two items */
670
+
.kinkRow td:first-child:nth-last-child(2),
671
+
.kinkRow td:first-child:nth-last-child(2) ~ td {
672
+
border-left: solid #999 1px;
673
+
border-right: solid #999 1px;
482
674
}
483
-
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice .btn-num-text {
484
-
float: right;
485
-
display: inline-block;
486
-
border: solid #CCC 1px;
487
-
text-align: center;
488
-
width: 16px;
489
-
border-radius: 3px;
675
+
676
+
677
+
/* three items */
678
+
.kinkRow td:first-child:nth-last-child(3) {
679
+
border-left: solid #999 1px;
680
+
border-right: dashed #999 1px;
490
681
}
491
-
#StartBtn {
492
-
position: absolute;
493
-
top: -3px;
494
-
right: 5px;
495
-
box-sizing: border-box;
496
-
width: 36px;
497
-
height: 36px;
498
-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTUvMTWxuPuyAAACcElEQVRYhe3X30tTYRzH8fdz3FYTd1xamAuTLDbM3EwqNMnoQgxydVH0A6Ks/oG6Mvp1n1flVUJE3pjUTVPCCJxmEKTWRAuCApujkmhJoZu57ZwuwsCaOx7nbBf73D2H7/PldfjCc54j6CxXSaNI/xvwdzIgrWRAWsmAtJJ2IIOe4iLzejoqmym1lDAZ+UFEicatC8Vm6A++5Jb/Pm+nxlIHatl2keo8FwJBriGHREe8U7bjyrWz7/m51IHq1lWjqire4AAvJkf5qczGrduUvYHTRQdxyQ5dGN0gg8hCBc4MXyUQnliwbqO5kOO2/ZzyXQagONvGcO0DLrxp5m7As3ygxUZB4aTvEt1fnuGSHQgEnoleKnIdEEi8NymQ6h7555nocvJt9jsPJ3o4XFhHq/MaAkFF/xE+hD5p9kwKJLqccZ+HYjMcs9XTXnkdSUi0BToXhYEUnUM7rFvnYRqHryx6b1Ig1T2C6h4h0uDjqK0eSUi4ZAc9VbeRhMS76XFdGFjmkblkB3277yAbc3g/PY7D69bdc9lGNoexGi10fOzG7nWTb7KuLCh8YJAyy2YEgqE997AaLbQFOjnxqom1JiueXTd190xqZOZHOwFoLDrEVCxMm9/D+dfNSELiSVUrpZaSlQXNpTc4wJrHNX/W+SYr5bKdqBr/45soSxqZQWTNW/tDn+etV0umpbT93VtP8awSwZhl4EZZE/7wwgddsdmGJAQxRUktyPt1gIaCvTQU1Ca8eghAVVX6goO6QULPn2vBqnyatpylJm87RrHwu0TVKE+DQ7SMtSe8FSQNWomk3Z06A9JKBqSVDEgraQf6BTg8uT5wSV/pAAAAAElFTkSuQmCC');
499
-
border-style: none;
500
-
border-radius: 4px;
501
-
cursor: pointer;
682
+
.kinkRow td:first-child:nth-last-child(3) ~ td {
683
+
border-right: solid #999 1px;
502
684
}
503
-
#StartBtn:hover {
504
-
opacity: 0.8;
685
+
.kinkRow td:first-child:nth-last-child(3) ~ td:last-child {
686
+
border-left: solid #999 1px;
505
687
}
506
-
@media (max-height: 500px) {
507
-
#InputPrevious, #InputNext {
508
-
display: none;
509
-
}
688
+
.kinkRow td:first-child:nth-last-child(3):not(:last-child),
689
+
.kinkRow td:first-child:nth-last-child(3):not(:last-child) ~ td:not(:last-child) {
690
+
flex: 1 35%;
510
691
}
511
-
</style>
512
-
</head>
513
-
<body>
514
-
<div class="widthWrapper">
515
-
<button id="Edit"></button>
516
-
<h1>Kink list</h1>
517
-
<div class="legend">
518
-
<div><span data-color="#FFFFFF" class="choice notEntered"></span> <span class="legend-text">Not Entered</span></div>
519
-
<div><span data-color="#6DB5FE" class="choice favorite"></span> <span class="legend-text">Favorite</span></div>
520
-
<div><span data-color="#23FD22" class="choice like"></span> <span class="legend-text">Like</span></div>
521
-
<div><span data-color="#FDFD6B" class="choice okay"></span> <span class="legend-text">Okay</span></div>
522
-
<div><span data-color="#DB6C00" class="choice maybe"></span> <span class="legend-text">Maybe</span></div>
523
-
<div><span data-color="#920000" class="choice no"></span> <span class="legend-text">No</span></div>
524
-
<div><span data-color="pattern" class="choice try"></span> <span class="legend-text">Want To Try</span></div>
525
-
</div>
526
-
<div id="ExportWrapper">
527
-
<input type="text" id="URL">
528
-
<button id="Export">Export</button>
529
-
<div id="Loading">Loading</div>
530
-
</div>
531
-
<button id="StartBtn"></button>
532
-
<div id="InputList"></div>
692
+
}
693
+
</style>
694
+
</head>
695
+
696
+
<body>
697
+
<div class="widthWrapper">
698
+
<button id="Edit"></button>
699
+
<h1>Kink list</h1>
700
+
<div class="legend">
701
+
<div><span data-color="#FFFFFF" class="choice notEntered"></span> <span class="legend-text">Not Entered</span></div>
702
+
<div><span data-color="#6DB5FE" class="choice favorite"></span> <span class="legend-text">Favorite</span></div>
703
+
<div><span data-color="#23FD22" class="choice like"></span> <span class="legend-text">Like</span></div>
704
+
<div><span data-color="#FDFD6B" class="choice okay"></span> <span class="legend-text">Okay</span></div>
705
+
<div><span data-color="#DB6C00" class="choice maybe"></span> <span class="legend-text">Maybe</span></div>
706
+
<div><span data-color="#920000" class="choice no"></span> <span class="legend-text">No</span></div>
707
+
<div><span data-color="pattern" class="choice try"></span> <span class="legend-text">Want To Try</span></div>
708
+
<input type="checkbox" name="UpdateHashEnabled" id="UpdateHashEnabled"><label for="UpdateHashEnabled">Autosave</label>
709
+
</div>
710
+
<div id="ExportWrapper">
711
+
<input type="text" id="URL">
712
+
<button id="Export">Export</button>
713
+
<div id="Loading">Loading</div>
533
714
</div>
534
-
<div id="EditOverlay" class="overlay">
535
-
<textarea id="Kinks">
715
+
<button id="StartBtn"></button>
716
+
<div id="InputList"></div>
717
+
</div>
718
+
<div id="EditOverlay" class="overlay">
719
+
<textarea id="Kinks">
536
720
#Bodies
537
721
(General)
538
722
* Skinny
···
722
906
* Hot Wax
723
907
* Scratching
724
908
* Biting
725
-
* Cutting
909
+
* Cutting
726
910
</textarea>
727
-
<button id="KinksOK">Accept</button>
728
-
</div>
729
-
<div id="InputOverlay" class="overlay">
730
-
<div class="widthWrapper">
731
-
<div id="InputPrevious"></div>
732
-
<div id="InputCurrent">
733
-
<h2 id="InputCategory"></h2>
734
-
<h3 id="InputField"></h3>
735
-
<button class="closePopup">×</button>
736
-
<div id="InputValues"></div>
737
-
</div>
738
-
<div id="InputNext"></div>
911
+
<button id="KinksOK">Accept</button>
912
+
</div>
913
+
<div id="InputOverlay" class="overlay">
914
+
<div class="widthWrapper">
915
+
<div id="InputPrevious"></div>
916
+
<div id="InputCurrent">
917
+
<h2 id="InputCategory"></h2>
918
+
<h3 id="InputField"></h3>
919
+
<button class="closePopup">×</button>
920
+
<div id="InputValues"></div>
739
921
</div>
922
+
<div id="InputNext"></div>
740
923
</div>
741
-
<script>
742
-
var log = function(val, base) {
743
-
return Math.log(val) / Math.log(base);
744
-
};
745
-
var strToClass = function(str){
746
-
var className = "";
747
-
str = str.toLowerCase();
748
-
var validChars = 'abcdefghijklmnopqrstuvwxyz';
749
-
var newWord = false;
750
-
for(var i = 0; i < str.length; i++) {
751
-
var chr = str[i];
752
-
if(validChars.indexOf(chr) >= 0) {
753
-
if(newWord) chr = chr.toUpperCase();
754
-
className += chr;
755
-
newWord = false;
756
-
}
757
-
else {
758
-
newWord = true;
759
-
}
924
+
</div>
925
+
<script type="text/javascript">
926
+
function isMobile() {
927
+
let check = false;
928
+
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
929
+
return check;
930
+
}
931
+
932
+
function log(val, base) {
933
+
return Math.log(val) / Math.log(base);
934
+
}
935
+
function strToClass(str) {
936
+
var className = "";
937
+
str = str.toLowerCase();
938
+
var validChars = 'abcdefghijklmnopqrstuvwxyz';
939
+
var newWord = false;
940
+
for (var i = 0; i < str.length; i++) {
941
+
var chr = str[i];
942
+
if (validChars.indexOf(chr) >= 0) {
943
+
if (newWord) chr = chr.toUpperCase();
944
+
className += chr;
945
+
newWord = false;
760
946
}
761
-
return className;
762
-
};
763
-
var addCssRule = function(selector, rules){
764
-
var sheet = document.styleSheets[0];
765
-
if("insertRule" in sheet) {
766
-
sheet.insertRule(selector + "{" + rules + "}", 0);
947
+
else {
948
+
newWord = true;
767
949
}
768
-
else if("addRule" in sheet) {
769
-
sheet.addRule(selector, rules, 0);
770
-
}
771
-
};
772
-
773
-
var kinks = {};
774
-
var inputKinks = {};
775
-
var colors = {};
776
-
var level = {};
777
-
778
-
var hatchPattern = function(patCanvas, x1, y1, dx, dy, delta){
779
-
var patContext = patCanvas.getContext('2d');
780
-
patContext.rect(x1, y1, dx, dy);
781
-
patContext.save();
782
-
patContext.clip();
783
-
var majorAxe = _.max([dx, dy]);
784
-
patContext.strokeStyle = 'rgba(0, 0, 0, 0.5)';
785
-
786
-
_.each(_.range(-1*(majorAxe) , majorAxe, delta), function(n, i){
787
-
950
+
}
951
+
return className;
952
+
}
953
+
function addCssRule(selector, rules) {
954
+
var sheet = document.styleSheets[0];
955
+
if ("insertRule" in sheet) {
956
+
sheet.insertRule(selector + "{" + rules + "}", 0);
957
+
}
958
+
else if ("addRule" in sheet) {
959
+
sheet.addRule(selector, rules, 0);
960
+
}
961
+
}
962
+
963
+
var kinks = {};
964
+
var inputKinks = {};
965
+
var colors = {};
966
+
var level = {};
967
+
968
+
function hatchPattern(patCanvas, x1, y1, dx, dy, delta) {
969
+
var patContext = patCanvas.getContext('2d');
970
+
patContext.rect(x1, y1, dx, dy);
971
+
patContext.save();
972
+
patContext.clip();
973
+
var majorAxe = _.max([dx, dy]);
974
+
patContext.strokeStyle = 'rgba(0, 0, 0, 0.5)';
975
+
976
+
_.each(_.range(-1 * (majorAxe), majorAxe, delta), function(n, i) {
788
977
patContext.beginPath();
789
-
patContext.moveTo(dy - n + x1 , y1);
790
-
patContext.lineTo(-n + x1, y1+ dy);
978
+
patContext.moveTo(dy - n + x1, y1);
979
+
patContext.lineTo(-n + x1, y1 + dy);
791
980
patContext.stroke();
792
-
})
793
-
patContext.restore();
794
-
};
795
-
796
-
$(function(){
797
-
798
-
var imgurClientId = '9db53e5936cd02f';
799
-
800
-
inputKinks = {
801
-
$columns: [],
802
-
createCategory: function(name, fields){
803
-
var $category = $('<div class="kinkCategory">')
804
-
.addClass('cat-' + strToClass(name))
805
-
.data('category', name)
806
-
.append($('<h2>')
807
-
.text(name));
808
-
809
-
var $table = $('<table class="kinkGroup">').data('fields', fields);
810
-
var $thead = $('<thead>').appendTo($table);
811
-
for(var i = 0; i < fields.length; i++) {
812
-
$('<th>').addClass('choicesCol').text(fields[i]).appendTo($thead);
813
-
}
814
-
$('<th>').appendTo($thead);
815
-
$('<tbody>').appendTo($table);
816
-
$category.append($table);
817
-
818
-
return $category;
819
-
},
820
-
createChoice: function(){
821
-
var $container = $('<div>').addClass('choices');
822
-
var levels = Object.keys(level);
823
-
for(var i = 0; i < levels.length; i++) {
824
-
$('<button>')
825
-
.addClass('choice')
826
-
.addClass(level[levels[i]])
827
-
.data('level', levels[i])
828
-
.data('levelInt', i)
829
-
.attr('title', levels[i])
830
-
.appendTo($container)
831
-
.on('click', function(){
832
-
$container.find('button').removeClass('selected');
833
-
$(this).addClass('selected');
834
-
});
835
-
}
836
-
return $container;
837
-
},
838
-
createKink: function(fields, name){
839
-
var $row = $('<tr>').data('kink', name).addClass('kinkRow');
840
-
for(var i = 0; i < fields.length; i++) {
841
-
var $choices = inputKinks.createChoice();
842
-
$choices.data('field', fields[i]);
843
-
$choices.addClass('choice-' + strToClass(fields[i]));
844
-
$('<td>').append($choices).appendTo($row);
845
-
}
846
-
$('<td>').text(name).appendTo($row);
847
-
$row.addClass('kink-' + strToClass(name));
848
-
return $row;
849
-
},
850
-
createColumns: function(){
851
-
var colClasses = ['100', '50', '33', '25'];
852
-
853
-
var numCols = Math.floor((document.body.scrollWidth - 20) / 400);
854
-
if(!numCols) numCols = 1;
855
-
if(numCols > 4) numCols = 4;
856
-
var colClass = 'col' + colClasses[numCols - 1];
857
-
858
-
inputKinks.$columns = [];
859
-
for(var i = 0; i < numCols; i++){
860
-
inputKinks.$columns.push($('<div>').addClass('col ' + colClass).appendTo($('#InputList')));
861
-
}
862
-
},
863
-
placeCategories: function($categories){
864
-
var $body = $('body');
865
-
var totalHeight = 0;
866
-
for(var i = 0; i < $categories.length; i++) {
867
-
var $clone = $categories[i].clone().appendTo($body);
868
-
var height = $clone.height();;
869
-
totalHeight += height;
870
-
$clone.remove();
871
-
}
872
-
873
-
var colHeight = totalHeight / (inputKinks.$columns.length);
874
-
var colIndex = 0;
875
-
for(var i = 0; i < $categories.length; i++) {
876
-
var curHeight = inputKinks.$columns[colIndex].height();
877
-
var catHeight = $categories[i].height();
878
-
if(curHeight + (catHeight / 2) > colHeight) colIndex++;
879
-
while(colIndex >= inputKinks.$columns.length) {
880
-
colIndex--;
881
-
}
882
-
inputKinks.$columns[colIndex].append($categories[i]);
981
+
})
982
+
patContext.restore();
983
+
}
984
+
985
+
$(function() {
986
+
987
+
var imgurClientId = '9db53e5936cd02f';
988
+
989
+
inputKinks = {
990
+
$columns: [],
991
+
createCategory(name, fields) {
992
+
var $category = $('<div class="kinkCategory">')
993
+
.addClass('cat-' + strToClass(name))
994
+
.data('category', name)
995
+
.append($('<h2>')
996
+
.text(name));
997
+
998
+
var $table = $('<table class="kinkGroup">').data('fields', fields);
999
+
var $thead = $('<thead>').appendTo($table);
1000
+
for (var i = 0; i < fields.length; i++) {
1001
+
$('<th>').addClass('choicesCol').text(fields[i]).appendTo($thead);
1002
+
}
1003
+
$('<th>').appendTo($thead);
1004
+
$('<tbody>').appendTo($table);
1005
+
$category.append($table);
1006
+
1007
+
return $category;
1008
+
},
1009
+
createChoice() {
1010
+
var $container = $('<div>').addClass('choices');
1011
+
var levels = Object.keys(level);
1012
+
for (var i = 0; i < levels.length; i++) {
1013
+
$('<button>')
1014
+
.addClass('choice')
1015
+
.addClass(level[levels[i]])
1016
+
.data('level', levels[i])
1017
+
.data('levelInt', i)
1018
+
.attr('title', levels[i])
1019
+
.appendTo($container)
1020
+
.on('click', function() {
1021
+
$container.find('button').removeClass('selected');
1022
+
$(this).addClass('selected');
1023
+
});
1024
+
}
1025
+
return $container;
1026
+
},
1027
+
createKink(fields, name) {
1028
+
var $row = $('<tr>').data('kink', name).addClass('kinkRow');
1029
+
for (var i = 0; i < fields.length; i++) {
1030
+
var $choices = inputKinks.createChoice();
1031
+
$choices.data('field', fields[i]);
1032
+
$choices.addClass('choice-' + strToClass(fields[i]));
1033
+
$('<td>').append($choices).appendTo($row);
1034
+
}
1035
+
$('<td>').text(name).appendTo($row);
1036
+
$row.addClass('kink-' + strToClass(name));
1037
+
return $row;
1038
+
},
1039
+
createColumns() {
1040
+
var colClasses = ['100', '50', '33', '25'];
1041
+
1042
+
var numCols = Math.floor((document.body.scrollWidth - 20) / 400);
1043
+
if (!numCols) numCols = 1;
1044
+
if (numCols > 4) numCols = 4;
1045
+
var colClass = 'col' + colClasses[numCols - 1];
1046
+
1047
+
inputKinks.$columns = [];
1048
+
for (var i = 0; i < numCols; i++) {
1049
+
inputKinks.$columns.push($('<div>').addClass('col ' + colClass).appendTo($('#InputList')));
1050
+
}
1051
+
},
1052
+
placeCategories($categories) {
1053
+
var $body = $('body');
1054
+
var totalHeight = 0;
1055
+
for (var i = 0; i < $categories.length; i++) {
1056
+
var $clone = $categories[i].clone().appendTo($body);
1057
+
var height = $clone.height();;
1058
+
totalHeight += height;
1059
+
$clone.remove();
1060
+
}
1061
+
1062
+
var colHeight = totalHeight / (inputKinks.$columns.length);
1063
+
var colIndex = 0;
1064
+
for (var i = 0; i < $categories.length; i++) {
1065
+
var curHeight = inputKinks.$columns[colIndex].height();
1066
+
var catHeight = $categories[i].height();
1067
+
if (curHeight + (catHeight / 2) > colHeight) colIndex++;
1068
+
while (colIndex >= inputKinks.$columns.length) {
1069
+
colIndex--;
883
1070
}
884
-
},
885
-
fillInputList: function(){
886
-
$('#InputList').empty();
887
-
inputKinks.createColumns();
888
-
889
-
var $categories = [];
890
-
var kinkCats = Object.keys(kinks);
891
-
for(var i = 0; i < kinkCats.length; i++) {
892
-
var catName = kinkCats[i];
893
-
var category = kinks[catName];
894
-
var fields = category.fields;
895
-
var kinkArr = category.kinks;
896
-
897
-
var $category = inputKinks.createCategory(catName, fields);
898
-
var $tbody = $category.find('tbody');
899
-
for(var k = 0; k < kinkArr.length; k++) {
900
-
$tbody.append(inputKinks.createKink(fields, kinkArr[k]));
901
-
}
902
-
903
-
$categories.push($category);
1071
+
inputKinks.$columns[colIndex].append($categories[i]);
1072
+
}
1073
+
},
1074
+
fillInputList() {
1075
+
$('#InputList').empty();
1076
+
inputKinks.createColumns();
1077
+
1078
+
var $categories = [];
1079
+
var kinkCats = Object.keys(kinks);
1080
+
for (var i = 0; i < kinkCats.length; i++) {
1081
+
var catName = kinkCats[i];
1082
+
var category = kinks[catName];
1083
+
var fields = category.fields;
1084
+
var kinkArr = category.kinks;
1085
+
1086
+
var $category = inputKinks.createCategory(catName, fields);
1087
+
var $tbody = $category.find('tbody');
1088
+
for (var k = 0; k < kinkArr.length; k++) {
1089
+
$tbody.append(inputKinks.createKink(fields, kinkArr[k]));
904
1090
}
905
-
inputKinks.placeCategories($categories);
906
-
907
-
// Make things update hash
908
-
$('#InputList').find('button.choice').on('click', function(){
1091
+
1092
+
$categories.push($category);
1093
+
}
1094
+
inputKinks.placeCategories($categories);
1095
+
1096
+
// Make things update hash
1097
+
$('#InputList').find('button.choice').on('click', function() {
1098
+
if ($('#UpdateHashEnabled').is(':checked')) {
909
1099
location.hash = inputKinks.updateHash();
910
-
});
911
-
},
912
-
init: function(){
913
-
// Set up DOM
914
-
inputKinks.fillInputList();
915
-
916
-
// Read hash
917
-
inputKinks.parseHash();
918
-
919
-
var patCanvas = document.createElement('canvas');
920
-
patCanvas.height = 30;
921
-
patCanvas.width = 30;
922
-
hatchPattern(patCanvas, 0,0,30,30,5);
923
-
patCanvas.toBlob(function(blob) {
924
-
var patternImg = document.createElement('img');
925
-
patternImg.crossOrigin = 'Anonymous';
926
-
var url = URL.createObjectURL(blob);
1100
+
}
1101
+
});
1102
+
},
1103
+
init() {
1104
+
// Set up DOM
1105
+
inputKinks.fillInputList();
1106
+
1107
+
// Read hash
1108
+
inputKinks.parseHash();
927
1109
928
-
patternImg.onload = function() {
1110
+
var patCanvas = document.createElement('canvas');
1111
+
patCanvas.height = 30;
1112
+
patCanvas.width = 30;
1113
+
hatchPattern(patCanvas, 0, 0, 30, 30, 5);
1114
+
patCanvas.toBlob(function (blob) {
1115
+
var patternImg = document.createElement('img');
1116
+
patternImg.crossOrigin = 'Anonymous';
1117
+
var url = URL.createObjectURL(blob);
1118
+
1119
+
patternImg.onload = function() {
929
1120
// no longer need to read the blob so it's revoked
930
1121
URL.revokeObjectURL(url);
931
-
};
1122
+
};
1123
+
1124
+
patternImg.src = url;
1125
+
patternImg.setAttribute('id', 'patternImg');
1126
+
patternImg.setAttribute('hidden', 'true');
1127
+
// var body = document.getElementsByTagName('body')[0]
1128
+
document.body.appendChild(patternImg);
1129
+
}, 'image/png');
1130
+
1131
+
1132
+
// Make export button work
1133
+
$('#Export').on('click', inputKinks.export);
1134
+
$('#URL').on('click', function() { this.select() });
1135
+
1136
+
// On resize, redo columns
1137
+
(function() {
932
1138
933
-
patternImg.src = url;
934
-
patternImg.setAttribute('id', 'patternImg');
935
-
patternImg.setAttribute('hidden','true');
936
-
// var body = document.getElementsByTagName('body')[0]
937
-
document.body.appendChild(patternImg);
938
-
},'image/png');
1139
+
var lastResize = 0;
1140
+
$(window).on('resize', function() {
1141
+
var curTime = (new Date()).getTime();
1142
+
lastResize = curTime;
1143
+
setTimeout(function() {
1144
+
if (lastResize === curTime) {
1145
+
inputKinks.fillInputList();
1146
+
inputKinks.parseHash();
1147
+
}
1148
+
}, 500);
1149
+
});
1150
+
1151
+
})();
1152
+
},
1153
+
hashChars: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.=+*^!@",
1154
+
maxPow(base, maxVal) {
1155
+
var maxPow = 1;
1156
+
for (var pow = 1; Math.pow(base, pow) <= maxVal; pow++) {
1157
+
maxPow = pow;
1158
+
}
1159
+
return maxPow;
1160
+
},
1161
+
prefix(input, len, char) {
1162
+
while (input.length < len) {
1163
+
input = char + input;
1164
+
}
1165
+
return input;
1166
+
},
1167
+
drawLegend(context) {
1168
+
context.font = "bold 13px Arial";
1169
+
context.fillStyle = '#000000';
939
1170
940
-
941
-
// Make export button work
942
-
$('#Export').on('click', inputKinks.export);
943
-
$('#URL').on('click', function(){ this.select(); });
944
-
945
-
// On resize, redo columns
946
-
(function(){
947
-
948
-
var lastResize = 0;
949
-
$(window).on('resize', function(){
950
-
var curTime = (new Date()).getTime();
951
-
lastResize = curTime;
952
-
setTimeout(function(){
953
-
if(lastResize === curTime) {
954
-
inputKinks.fillInputList();
955
-
inputKinks.parseHash();
956
-
}
957
-
}, 500);
958
-
});
959
-
960
-
})();
961
-
},
962
-
hashChars: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.=+*^!@",
963
-
maxPow: function(base, maxVal) {
964
-
var maxPow = 1;
965
-
for(var pow = 1; Math.pow(base, pow) <= maxVal; pow++){
966
-
maxPow = pow;
1171
+
var levels = Object.keys(colors);
1172
+
var x = context.canvas.width - 15 - (120 * levels.length);
1173
+
var patternImg = document.getElementById('patternImg');
1174
+
var pattern = context.createPattern(patternImg, 'repeat');
1175
+
for (var i = 0; i < levels.length; i++) {
1176
+
context.beginPath();
1177
+
context.arc(x + (120 * i), 17, 8, 0, 2 * Math.PI, false);
1178
+
if (colors[levels[i]] != 'pattern') {
1179
+
context.fillStyle = colors[levels[i]];
967
1180
}
968
-
return maxPow;
1181
+
else {
1182
+
context.fillStyle = pattern;
1183
+
}
1184
+
context.fill();
1185
+
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
1186
+
context.lineWidth = 1;
1187
+
context.stroke();
1188
+
1189
+
context.fillStyle = '#000000';
1190
+
context.fillText(levels[i], x + 15 + (i * 120), 22);
1191
+
}
1192
+
},
1193
+
setupCanvas(width, height, username) {
1194
+
$('#mainCanvas').remove();
1195
+
var canvas = document.createElement('canvas');
1196
+
canvas.setAttribute('id', 'mainCanvas');
1197
+
canvas.width = width;
1198
+
canvas.height = height;
1199
+
1200
+
var $canvas = $('#mainCanvas');
1201
+
$canvas.css({
1202
+
width: width,
1203
+
height: height
1204
+
});
1205
+
// $canvas.insertBefore($('#InputList'));
1206
+
1207
+
var context = canvas.getContext('2d');
1208
+
context.fillStyle = '#FFFFFF';
1209
+
context.fillRect(0, 0, canvas.width, canvas.height);
1210
+
1211
+
context.font = "bold 24px Arial";
1212
+
context.fillStyle = '#000000';
1213
+
context.fillText('Kinklist ' + username, 5, 25);
1214
+
1215
+
inputKinks.drawLegend(context);
1216
+
return { context: context, canvas: canvas };
1217
+
},
1218
+
drawCallHandlers: {
1219
+
simpleTitle(context, drawCall) {
1220
+
context.fillStyle = '#000000';
1221
+
context.font = "bold 18px Arial";
1222
+
context.fillText(drawCall.data, drawCall.x, drawCall.y + 5);
969
1223
},
970
-
prefix: function(input, len, char){
971
-
while(input.length < len) {
972
-
input = char + input;
973
-
}
974
-
return input;
1224
+
titleSubtitle(context, drawCall) {
1225
+
context.fillStyle = '#000000';
1226
+
context.font = "bold 18px Arial";
1227
+
context.fillText(drawCall.data.category, drawCall.x, drawCall.y + 5);
1228
+
1229
+
var fieldsStr = drawCall.data.fields.join(', ');
1230
+
context.font = "italic 12px Arial";
1231
+
context.fillText(fieldsStr, drawCall.x, drawCall.y + 20);
975
1232
},
976
-
drawLegend: function(context){
977
-
context.font = "bold 13px Arial";
1233
+
kinkRow(context, drawCall) {
978
1234
context.fillStyle = '#000000';
979
-
980
-
var levels = Object.keys(colors);
981
-
var x = context.canvas.width - 15 - (120 * levels.length);
1235
+
context.font = "12px Arial";
1236
+
1237
+
var x = drawCall.x + 5 + (drawCall.data.choices.length * 20);
1238
+
var y = drawCall.y - 6;
1239
+
context.fillText(drawCall.data.text, x, y);
982
1240
var patternImg = document.getElementById('patternImg');
983
-
var pattern = context.createPattern(patternImg,'repeat');
984
-
for(var i = 0; i < levels.length; i++) {
1241
+
var pattern = context.createPattern(patternImg, 'repeat');
1242
+
// Circles
1243
+
for (var i = 0; i < drawCall.data.choices.length; i++) {
1244
+
var choice = drawCall.data.choices[i];
1245
+
var color = colors[choice];
1246
+
1247
+
var x = 10 + drawCall.x + (i * 20);
1248
+
var y = drawCall.y - 10;
1249
+
985
1250
context.beginPath();
986
-
context.arc(x + (120 * i), 17, 8, 0, 2 * Math.PI, false);
987
-
if (colors[levels[i]] != 'pattern') {
988
-
context.fillStyle = colors[levels[i]];
989
-
}
990
-
else {
1251
+
context.arc(x, y, 8, 0, 2 * Math.PI, false);
1252
+
if (color != 'pattern') {
1253
+
context.fillStyle = color;
1254
+
} else {
991
1255
context.fillStyle = pattern;
992
1256
}
993
1257
context.fill();
994
1258
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
995
1259
context.lineWidth = 1;
996
1260
context.stroke();
997
-
998
-
context.fillStyle = '#000000';
999
-
context.fillText(levels[i], x + 15 + (i * 120), 22);
1000
1261
}
1001
-
},
1002
-
setupCanvas: function(width, height, username){
1003
-
$('#mainCanvas').remove();
1004
-
var canvas = document.createElement('canvas');
1005
-
canvas.setAttribute('id', 'mainCanvas');
1006
-
canvas.width = width;
1007
-
canvas.height = height;
1008
-
1009
-
var $canvas = $('#mainCanvas');
1010
-
$canvas.css({
1011
-
width: width,
1012
-
height: height
1013
-
});
1014
-
// $canvas.insertBefore($('#InputList'));
1015
-
1016
-
var context = canvas.getContext('2d');
1017
-
context.fillStyle = '#FFFFFF';
1018
-
context.fillRect(0, 0, canvas.width, canvas.height);
1019
-
1020
-
context.font = "bold 24px Arial";
1021
-
context.fillStyle = '#000000';
1022
-
context.fillText('Kinklist ' + username, 5, 25);
1023
-
1024
-
inputKinks.drawLegend(context);
1025
-
return { context: context, canvas: canvas };
1026
-
},
1027
-
drawCallHandlers: {
1028
-
simpleTitle: function(context, drawCall){
1029
-
context.fillStyle = '#000000';
1030
-
context.font = "bold 18px Arial";
1031
-
context.fillText(drawCall.data, drawCall.x, drawCall.y + 5);
1032
-
},
1033
-
titleSubtitle: function(context, drawCall){
1034
-
context.fillStyle = '#000000';
1035
-
context.font = "bold 18px Arial";
1036
-
context.fillText(drawCall.data.category, drawCall.x, drawCall.y + 5);
1037
-
1038
-
var fieldsStr = drawCall.data.fields.join(', ');
1039
-
context.font = "italic 12px Arial";
1040
-
context.fillText(fieldsStr, drawCall.x, drawCall.y + 20);
1041
-
},
1042
-
kinkRow: function(context, drawCall){
1043
-
context.fillStyle = '#000000';
1044
-
context.font = "12px Arial";
1045
-
1046
-
var x = drawCall.x + 5 + (drawCall.data.choices.length * 20);
1047
-
var y = drawCall.y - 6;
1048
-
context.fillText(drawCall.data.text, x, y);
1049
-
var patternImg = document.getElementById('patternImg');
1050
-
var pattern = context.createPattern(patternImg,'repeat');
1051
-
// Circles
1052
-
for(var i = 0; i < drawCall.data.choices.length; i++){
1053
-
var choice = drawCall.data.choices[i];
1054
-
var color = colors[choice];
1055
-
1056
-
var x = 10 + drawCall.x + (i * 20);
1057
-
var y = drawCall.y - 10;
1058
-
1059
-
context.beginPath();
1060
-
context.arc(x, y, 8, 0, 2 * Math.PI, false);
1061
-
if (color != 'pattern') {
1062
-
context.fillStyle = color;
1063
-
}
1064
-
else {
1065
-
context.fillStyle = pattern;
1066
-
}
1067
-
context.fill();
1068
-
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
1069
-
context.lineWidth = 1;
1070
-
context.stroke();
1071
-
}
1072
-
1262
+
1263
+
}
1264
+
},
1265
+
export() {
1266
+
var username = prompt("Please enter your name");
1267
+
if (typeof username !== 'string') return;
1268
+
else if (username.length) username = '(' + username + ')';
1269
+
1270
+
$('#Loading').fadeIn();
1271
+
$('#URL').fadeOut();
1272
+
1273
+
// Constants
1274
+
var numCols = 6;
1275
+
var columnWidth = 250;
1276
+
var simpleTitleHeight = 35;
1277
+
var titleSubtitleHeight = 50;
1278
+
var rowHeight = 25;
1279
+
var offsets = {
1280
+
left: 10,
1281
+
right: 10,
1282
+
top: 50,
1283
+
bottom: 10
1284
+
};
1285
+
1286
+
// Find out how many we have of everything
1287
+
var numCats = $('.kinkCategory').length;
1288
+
var dualCats = $('.kinkCategory th + th + th').length;
1289
+
var simpleCats = numCats - dualCats;
1290
+
var numKinks = $('.kinkRow').length;
1291
+
1292
+
// Determine the height required for all categories and kinks
1293
+
var totalHeight = (
1294
+
(numKinks * rowHeight) +
1295
+
(dualCats * titleSubtitleHeight) +
1296
+
(simpleCats * simpleTitleHeight)
1297
+
);
1298
+
1299
+
// Initialize columns and drawStacks
1300
+
var columns = [];
1301
+
for (var i = 0; i < numCols; i++) {
1302
+
columns.push({ height: 0, drawStack: [] });
1303
+
}
1304
+
1305
+
// Create drawcalls and place them in the drawStack
1306
+
// for the appropriate column
1307
+
var avgColHeight = totalHeight / numCols;
1308
+
var columnIndex = 0;
1309
+
$('.kinkCategory').each(function() {
1310
+
var $cat = $(this);
1311
+
var catName = $cat.data('category');
1312
+
var category = kinks[catName];
1313
+
var fields = category.fields;
1314
+
var catKinks = category.kinks;
1315
+
1316
+
var catHeight = 0;
1317
+
catHeight += (fields.length === 1) ? simpleTitleHeight : titleSubtitleHeight;
1318
+
catHeight += (catKinks.length * rowHeight);
1319
+
1320
+
// Determine which column to place this category in
1321
+
if ((columns[columnIndex].height + (catHeight / 2)) > avgColHeight) columnIndex++;
1322
+
while (columnIndex >= numCols) columnIndex--;
1323
+
var column = columns[columnIndex];
1324
+
1325
+
// Drawcall for title
1326
+
var drawCall = { y: column.height };
1327
+
column.drawStack.push(drawCall);
1328
+
if (fields.length < 2) {
1329
+
column.height += simpleTitleHeight;
1330
+
drawCall.type = 'simpleTitle';
1331
+
drawCall.data = catName;
1073
1332
}
1074
-
},
1075
-
export: function(){
1076
-
var username = prompt("Please enter your name");
1077
-
if(typeof username !== 'string') return;
1078
-
else if (username.length ) username = '(' + username + ')';
1079
-
1080
-
$('#Loading').fadeIn();
1081
-
$('#URL').fadeOut();
1082
-
1083
-
// Constants
1084
-
var numCols = 6;
1085
-
var columnWidth = 250;
1086
-
var simpleTitleHeight = 35;
1087
-
var titleSubtitleHeight = 50;
1088
-
var rowHeight = 25;
1089
-
var offsets = {
1090
-
left: 10,
1091
-
right: 10,
1092
-
top: 50,
1093
-
bottom: 10
1094
-
};
1095
-
1096
-
// Find out how many we have of everything
1097
-
var numCats = $('.kinkCategory').length;
1098
-
var dualCats = $('.kinkCategory th + th + th').length;
1099
-
var simpleCats = numCats - dualCats;
1100
-
var numKinks = $('.kinkRow').length;
1101
-
1102
-
// Determine the height required for all categories and kinks
1103
-
var totalHeight = (
1104
-
(numKinks * rowHeight) +
1105
-
(dualCats * titleSubtitleHeight) +
1106
-
(simpleCats * simpleTitleHeight)
1107
-
);
1108
-
1109
-
// Initialize columns and drawStacks
1110
-
var columns = [];
1111
-
for(var i = 0; i < numCols; i++){
1112
-
columns.push({ height: 0, drawStack: []});
1333
+
else {
1334
+
column.height += titleSubtitleHeight;
1335
+
drawCall.type = 'titleSubtitle';
1336
+
drawCall.data = {
1337
+
category: catName,
1338
+
fields: fields
1339
+
};
1113
1340
}
1114
-
1115
-
// Create drawcalls and place them in the drawStack
1116
-
// for the appropriate column
1117
-
var avgColHeight = totalHeight / numCols;
1118
-
var columnIndex = 0;
1119
-
$('.kinkCategory').each(function(){
1120
-
var $cat = $(this);
1121
-
var catName = $cat.data('category');
1122
-
var category = kinks[catName];
1123
-
var fields = category.fields;
1124
-
var catKinks = category.kinks;
1125
-
1126
-
var catHeight = 0;
1127
-
catHeight += (fields.length === 1) ? simpleTitleHeight : titleSubtitleHeight;
1128
-
catHeight += (catKinks.length * rowHeight);
1129
-
1130
-
// Determine which column to place this category in
1131
-
if((columns[columnIndex].height + (catHeight / 2)) > avgColHeight) columnIndex++;
1132
-
while(columnIndex >= numCols) columnIndex--;
1133
-
var column = columns[columnIndex];
1134
-
1135
-
// Drawcall for title
1136
-
var drawCall = { y: column.height };
1341
+
1342
+
// Drawcalls for kinks
1343
+
$cat.find('.kinkRow').each(function() {
1344
+
var $kinkRow = $(this);
1345
+
var drawCall = {
1346
+
y: column.height, type: 'kinkRow', data: {
1347
+
choices: [],
1348
+
text: $kinkRow.data('kink')
1349
+
}
1350
+
};
1137
1351
column.drawStack.push(drawCall);
1138
-
if(fields.length < 2) {
1139
-
column.height += simpleTitleHeight;
1140
-
drawCall.type = 'simpleTitle';
1141
-
drawCall.data = catName;
1142
-
}
1143
-
else {
1144
-
column.height += titleSubtitleHeight;
1145
-
drawCall.type = 'titleSubtitle';
1146
-
drawCall.data = {
1147
-
category: catName,
1148
-
fields: fields
1149
-
};
1150
-
}
1151
-
1152
-
// Drawcalls for kinks
1153
-
$cat.find('.kinkRow').each(function(){
1154
-
var $kinkRow = $(this);
1155
-
var drawCall = { y: column.height, type: 'kinkRow', data: {
1156
-
choices: [],
1157
-
text: $kinkRow.data('kink')
1158
-
}};
1159
-
column.drawStack.push(drawCall);
1160
-
column.height += rowHeight;
1161
-
1162
-
// Add choices
1163
-
$kinkRow.find('.choices').each(function(){
1164
-
var $selection = $(this).find('.choice.selected');
1165
-
var selection = ($selection.length > 0)
1166
-
? $selection.data('level')
1167
-
: Object.keys(level)[0];
1168
-
1169
-
drawCall.data.choices.push(selection);
1170
-
});
1352
+
column.height += rowHeight;
1353
+
1354
+
// Add choices
1355
+
$kinkRow.find('.choices').each(function() {
1356
+
var $selection = $(this).find('.choice.selected');
1357
+
var selection = ($selection.length > 0)
1358
+
? $selection.data('level')
1359
+
: Object.keys(level)[0];
1360
+
1361
+
drawCall.data.choices.push(selection);
1171
1362
});
1172
1363
});
1173
-
1174
-
var tallestColumnHeight = 0;
1175
-
for(var i = 0; i < columns.length; i++){
1176
-
if(tallestColumnHeight < columns[i].height) {
1177
-
tallestColumnHeight = columns[i].height;
1178
-
}
1364
+
});
1365
+
1366
+
var tallestColumnHeight = 0;
1367
+
for (var i = 0; i < columns.length; i++) {
1368
+
if (tallestColumnHeight < columns[i].height) {
1369
+
tallestColumnHeight = columns[i].height;
1179
1370
}
1180
-
1181
-
var canvasWidth = offsets.left + offsets.right + (columnWidth * numCols);
1182
-
var canvasHeight = offsets.top + offsets.bottom + tallestColumnHeight;
1183
-
var setup = inputKinks.setupCanvas(canvasWidth, canvasHeight, username);
1184
-
var context = setup.context;
1185
-
var canvas = setup.canvas;
1186
-
1187
-
for(var i = 0; i < columns.length; i++) {
1188
-
var column = columns[i];
1189
-
var drawStack = column.drawStack;
1190
-
1191
-
var drawX = offsets.left + (columnWidth * i);
1192
-
for(var j = 0; j < drawStack.length; j++){
1193
-
var drawCall = drawStack[j];
1194
-
drawCall.x = drawX;
1195
-
drawCall.y += offsets.top;
1196
-
inputKinks.drawCallHandlers[drawCall.type](context, drawCall);
1197
-
}
1371
+
}
1372
+
1373
+
var canvasWidth = offsets.left + offsets.right + (columnWidth * numCols);
1374
+
var canvasHeight = offsets.top + offsets.bottom + tallestColumnHeight;
1375
+
var setup = inputKinks.setupCanvas(canvasWidth, canvasHeight, username);
1376
+
var context = setup.context;
1377
+
var canvas = setup.canvas;
1378
+
1379
+
for (var i = 0; i < columns.length; i++) {
1380
+
var column = columns[i];
1381
+
var drawStack = column.drawStack;
1382
+
1383
+
var drawX = offsets.left + (columnWidth * i);
1384
+
for (var j = 0; j < drawStack.length; j++) {
1385
+
var drawCall = drawStack[j];
1386
+
drawCall.x = drawX;
1387
+
drawCall.y += offsets.top;
1388
+
inputKinks.drawCallHandlers[drawCall.type](context, drawCall);
1198
1389
}
1199
-
1200
-
// return $(canvas).insertBefore($('#InputList'));
1201
-
1202
-
// Send canvas to imgur
1203
-
$.ajax({
1204
-
url: 'https://api.imgur.com/3/image',
1205
-
type: 'POST',
1206
-
headers: {
1207
-
// Your application gets an imgurClientId from Imgur
1208
-
Authorization: 'Client-ID ' + imgurClientId,
1209
-
Accept: 'application/json'
1210
-
},
1211
-
data: {
1212
-
// convert the image data to base64
1213
-
image: canvas.toDataURL().split(',')[1],
1214
-
type: 'base64'
1215
-
},
1216
-
success: function(result) {
1217
-
$('#Loading').hide();
1218
-
var url = 'https://i.imgur.com/' + result.data.id + '.png';
1219
-
$('#URL').val(url).fadeIn();
1220
-
},
1221
-
fail: function(){
1222
-
$('#Loading').hide();
1223
-
alert('Failed to upload to imgur, could not connect');
1224
-
}
1225
-
});
1226
-
},
1227
-
encode: function(base, input){
1228
-
var hashBase = inputKinks.hashChars.length;
1229
-
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1230
-
var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
1231
-
1232
-
var output = "";
1233
-
var numChunks = Math.ceil(input.length / inputPow);
1234
-
var inputIndex = 0;
1235
-
for(var chunkId = 0; chunkId < numChunks; chunkId++) {
1236
-
var inputIntValue = 0;
1237
-
for(var pow = 0; pow < inputPow; pow++) {
1238
-
var inputVal = input[inputIndex++];
1239
-
if(typeof inputVal === "undefined") break;
1240
-
var val = inputVal * Math.pow(base, pow);
1241
-
inputIntValue += val;
1242
-
}
1243
-
1244
-
var outputCharValue = "";
1245
-
while(inputIntValue > 0) {
1246
-
var maxPow = Math.floor(log(inputIntValue, hashBase));
1247
-
var powVal = Math.pow(hashBase, maxPow);
1248
-
var charInt = Math.floor(inputIntValue / powVal);
1249
-
var subtract = charInt * powVal;
1250
-
var char = inputKinks.hashChars[charInt];
1251
-
outputCharValue += char;
1252
-
inputIntValue -= subtract;
1253
-
}
1254
-
var chunk = inputKinks.prefix(outputCharValue, outputPow, inputKinks.hashChars[0]);
1255
-
output += chunk;
1390
+
}
1391
+
1392
+
// return $(canvas).insertBefore($('#InputList'));
1393
+
1394
+
// Send canvas to imgur
1395
+
$.ajax({
1396
+
url: 'https://api.imgur.com/3/image',
1397
+
type: 'POST',
1398
+
headers: {
1399
+
// Your application gets an imgurClientId from Imgur
1400
+
Authorization: 'Client-ID ' + imgurClientId,
1401
+
Accept: 'application/json'
1402
+
},
1403
+
data: {
1404
+
// convert the image data to base64
1405
+
image: canvas.toDataURL().split(',')[1],
1406
+
type: 'base64'
1407
+
},
1408
+
success(result) {
1409
+
$('#Loading').hide();
1410
+
var url = 'https://i.imgur.com/' + result.data.id + '.png';
1411
+
$('#URL').val(url).fadeIn();
1412
+
},
1413
+
fail() {
1414
+
$('#Loading').hide();
1415
+
alert('Failed to upload to imgur, could not connect');
1256
1416
}
1257
-
return output;
1258
-
},
1259
-
decode: function(base, output){
1260
-
var hashBase = inputKinks.hashChars.length;
1261
-
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1262
-
1263
-
var values = [];
1264
-
var numChunks = Math.max(output.length / outputPow)
1265
-
for(var i = 0; i < numChunks; i++){
1266
-
var chunk = output.substring(i * outputPow, (i + 1) * outputPow);
1267
-
var chunkValues = inputKinks.decodeChunk(base, chunk);
1268
-
for(var j = 0; j < chunkValues.length; j++) {
1269
-
values.push(chunkValues[j]);
1270
-
}
1417
+
});
1418
+
},
1419
+
encode(base, input) {
1420
+
var hashBase = inputKinks.hashChars.length;
1421
+
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1422
+
var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
1423
+
1424
+
var output = "";
1425
+
var numChunks = Math.ceil(input.length / inputPow);
1426
+
var inputIndex = 0;
1427
+
for (var chunkId = 0; chunkId < numChunks; chunkId++) {
1428
+
var inputIntValue = 0;
1429
+
for (var pow = 0; pow < inputPow; pow++) {
1430
+
var inputVal = input[inputIndex++];
1431
+
if (typeof inputVal === "undefined") break;
1432
+
var val = inputVal * Math.pow(base, pow);
1433
+
inputIntValue += val;
1271
1434
}
1272
-
return values;
1273
-
},
1274
-
decodeChunk: function(base, chunk){
1275
-
var hashBase = inputKinks.hashChars.length;
1276
-
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1277
-
var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
1278
-
1279
-
var chunkInt = 0;
1280
-
for(var i = 0; i < chunk.length; i++) {
1281
-
var char = chunk[i];
1282
-
var charInt = inputKinks.hashChars.indexOf(char);
1283
-
var pow = chunk.length - 1 - i;
1284
-
var intVal = Math.pow(hashBase, pow) * charInt;
1285
-
chunkInt += intVal;
1435
+
1436
+
var outputCharValue = "";
1437
+
while (inputIntValue > 0) {
1438
+
var maxPow = Math.floor(log(inputIntValue, hashBase));
1439
+
var powVal = Math.pow(hashBase, maxPow);
1440
+
var charInt = Math.floor(inputIntValue / powVal);
1441
+
var subtract = charInt * powVal;
1442
+
var char = inputKinks.hashChars[charInt];
1443
+
outputCharValue += char;
1444
+
inputIntValue -= subtract;
1286
1445
}
1287
-
var chunkIntCopy = chunkInt;
1288
-
1289
-
var output = [];
1290
-
for(var pow = inputPow - 1; pow >= 0; pow--) {
1291
-
var posBase = Math.floor(Math.pow(base, pow));
1292
-
var posVal = Math.floor(chunkInt / posBase);
1293
-
var subtract = posBase * posVal;
1294
-
output.push(posVal);
1295
-
chunkInt -= subtract;
1446
+
var chunk = inputKinks.prefix(outputCharValue, outputPow, inputKinks.hashChars[0]);
1447
+
output += chunk;
1448
+
}
1449
+
return output;
1450
+
},
1451
+
decode: function (base, output) {
1452
+
var hashBase = inputKinks.hashChars.length;
1453
+
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1454
+
1455
+
var values = [];
1456
+
var numChunks = Math.max(output.length / outputPow)
1457
+
for (var i = 0; i < numChunks; i++) {
1458
+
var chunk = output.substring(i * outputPow, (i + 1) * outputPow);
1459
+
var chunkValues = inputKinks.decodeChunk(base, chunk);
1460
+
for (var j = 0; j < chunkValues.length; j++) {
1461
+
values.push(chunkValues[j]);
1296
1462
}
1297
-
output.reverse();
1298
-
return output;
1299
-
},
1300
-
updateHash: function(){
1301
-
var hashValues = [];
1302
-
$('#InputList .choices').each(function(){
1303
-
var $this = $(this);
1304
-
var lvlInt = $this.find('.selected').data('levelInt');
1305
-
if(!lvlInt) lvlInt = 0;
1306
-
hashValues.push(lvlInt);
1307
-
});
1308
-
return inputKinks.encode(Object.keys(colors).length, hashValues);
1309
-
},
1310
-
parseHash: function(){
1311
-
var hash = location.hash.substring(1);
1312
-
if(hash.length < 10) return;
1313
-
1314
-
var values = inputKinks.decode(Object.keys(colors).length, hash);
1315
-
var valueIndex = 0;
1316
-
$('#InputList .choices').each(function(){
1317
-
var $this = $(this);
1318
-
var value = values[valueIndex++];
1319
-
$this.children().eq(value).addClass('selected');
1320
-
});
1321
-
},
1322
-
saveSelection: function(){
1323
-
var selection = [];
1324
-
$('.choice.selected').each(function(){
1325
-
// .choice selector
1326
-
var selector = '.' + this.className.replace(/ /g, '.');
1327
-
// .choices selector
1328
-
selector = '.' + $(this).closest('.choices')[0].className.replace(/ /g, '.') + ' ' + selector;
1329
-
// .kinkRow selector
1330
-
selector = '.' + $(this).closest('tr.kinkRow')[0].className.replace(/ /g, '.') + ' ' + selector;
1331
-
// .kinkCategory selector
1332
-
selector = '.' + $(this).closest('.kinkCategory')[0].className.replace(/ /g, '.') + ' ' + selector;
1333
-
selector = selector.replace('.selected', '');
1334
-
selection.push(selector);
1335
-
});
1336
-
return selection;
1337
-
},
1338
-
inputListToText: function(){
1339
-
var KinksText = "";
1340
-
var kinkCats = Object.keys(kinks);
1341
-
for(var i = 0; i < kinkCats.length; i++){
1342
-
var catName = kinkCats[i];
1343
-
var catFields = kinks[catName].fields;
1344
-
var catKinks = kinks[catName].kinks;
1345
-
KinksText += '#' + catName + "\r\n";
1346
-
KinksText += '(' + catFields.join(', ') + ")\r\n";
1347
-
for(var j = 0; j < catKinks.length; j++){
1348
-
KinksText += '* ' + catKinks[j] + "\r\n";
1349
-
}
1350
-
KinksText += "\r\n";
1463
+
}
1464
+
return values;
1465
+
},
1466
+
decodeChunk: function (base, chunk) {
1467
+
var hashBase = inputKinks.hashChars.length;
1468
+
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1469
+
var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
1470
+
1471
+
var chunkInt = 0;
1472
+
for (var i = 0; i < chunk.length; i++) {
1473
+
var char = chunk[i];
1474
+
var charInt = inputKinks.hashChars.indexOf(char);
1475
+
var pow = chunk.length - 1 - i;
1476
+
var intVal = Math.pow(hashBase, pow) * charInt;
1477
+
chunkInt += intVal;
1478
+
}
1479
+
var chunkIntCopy = chunkInt;
1480
+
1481
+
var output = [];
1482
+
for (var pow = inputPow - 1; pow >= 0; pow--) {
1483
+
var posBase = Math.floor(Math.pow(base, pow));
1484
+
var posVal = Math.floor(chunkInt / posBase);
1485
+
var subtract = posBase * posVal;
1486
+
output.push(posVal);
1487
+
chunkInt -= subtract;
1488
+
}
1489
+
output.reverse();
1490
+
return output;
1491
+
},
1492
+
updateHash() {
1493
+
var hashValues = [];
1494
+
$('#InputList .choices').each(function() {
1495
+
var $this = $(this);
1496
+
var lvlInt = $this.find('.selected').data('levelInt');
1497
+
if (!lvlInt) lvlInt = 0;
1498
+
hashValues.push(lvlInt);
1499
+
});
1500
+
return inputKinks.encode(Object.keys(colors).length, hashValues);
1501
+
},
1502
+
parseHash() {
1503
+
var hash = location.hash.substring(1);
1504
+
if (hash.length < 10) return;
1505
+
1506
+
var values = inputKinks.decode(Object.keys(colors).length, hash);
1507
+
var valueIndex = 0;
1508
+
$('#InputList .choices').each(function() {
1509
+
var $this = $(this);
1510
+
var value = values[valueIndex++];
1511
+
$this.children().eq(value).addClass('selected');
1512
+
});
1513
+
},
1514
+
saveSelection() {
1515
+
var selection = [];
1516
+
$('.choice.selected').each(function() {
1517
+
// .choice selector
1518
+
var selector = '.' + this.className.replace(/ /g, '.');
1519
+
// .choices selector
1520
+
selector = '.' + $(this).closest('.choices')[0].className.replace(/ /g, '.') + ' ' + selector;
1521
+
// .kinkRow selector
1522
+
selector = '.' + $(this).closest('tr.kinkRow')[0].className.replace(/ /g, '.') + ' ' + selector;
1523
+
// .kinkCategory selector
1524
+
selector = '.' + $(this).closest('.kinkCategory')[0].className.replace(/ /g, '.') + ' ' + selector;
1525
+
selector = selector.replace('.selected', '');
1526
+
selection.push(selector);
1527
+
});
1528
+
return selection;
1529
+
},
1530
+
inputListToText() {
1531
+
var KinksText = "";
1532
+
var kinkCats = Object.keys(kinks);
1533
+
for (var i = 0; i < kinkCats.length; i++) {
1534
+
var catName = kinkCats[i];
1535
+
var catFields = kinks[catName].fields;
1536
+
var catKinks = kinks[catName].kinks;
1537
+
KinksText += '#' + catName + "\r\n";
1538
+
KinksText += '(' + catFields.join(', ') + ")\r\n";
1539
+
for (var j = 0; j < catKinks.length; j++) {
1540
+
KinksText += '* ' + catKinks[j] + "\r\n";
1351
1541
}
1352
-
return KinksText;
1353
-
},
1354
-
restoreSavedSelection: function(selection){
1355
-
setTimeout(function(){
1356
-
for(var i = 0; i < selection.length; i++){
1357
-
var selector = selection[i];
1358
-
$(selector).addClass('selected');
1359
-
}
1360
-
location.hash = inputKinks.updateHash();
1361
-
}, 300);
1362
-
},
1363
-
parseKinksText: function(kinksText){
1364
-
var newKinks = {};
1365
-
var lines = kinksText.replace(/\r/g, '').split("\n");
1542
+
KinksText += "\r\n";
1543
+
}
1544
+
return KinksText;
1545
+
},
1546
+
restoreSavedSelection(selection) {
1547
+
setTimeout(function() {
1548
+
for (var i = 0; i < selection.length; i++) {
1549
+
var selector = selection[i];
1550
+
$(selector).addClass('selected');
1551
+
}
1552
+
location.hash = inputKinks.updateHash();
1553
+
}, 300);
1554
+
},
1555
+
parseKinksText(kinksText) {
1556
+
var newKinks = {};
1557
+
var lines = kinksText.replace(/\r/g, '').split("\n");
1366
1558
1367
-
var cat = null;
1368
-
var catName = null;
1369
-
for(var i = 0; i < lines.length; i++){
1370
-
var line = lines[i];
1371
-
if(!line.length) continue;
1559
+
var cat = null;
1560
+
var catName = null;
1561
+
for (var i = 0; i < lines.length; i++) {
1562
+
var line = lines[i];
1563
+
if (!line.length) continue;
1372
1564
1373
-
if(line[0] === '#') {
1374
-
if(catName){
1375
-
if(!(cat.fields instanceof Array) || cat.fields.length < 1){
1376
-
alert(catName + ' does not have any fields defined!');
1377
-
return;
1378
-
}
1379
-
if(!(cat.kinks instanceof Array) || cat.kinks.length < 1){
1380
-
alert(catName + ' does not have any kinks listed!');
1381
-
return;
1382
-
}
1383
-
newKinks[catName] = cat;
1565
+
if (line[0] === '#') {
1566
+
if (catName) {
1567
+
if (!(cat.fields instanceof Array) || cat.fields.length < 1) {
1568
+
alert(catName + ' does not have any fields defined!');
1569
+
return;
1384
1570
}
1385
-
catName = line.substring(1).trim();
1386
-
cat = { kinks: [] };
1387
-
}
1388
-
if(!catName) continue;
1389
-
if(line[0] === '(') {
1390
-
cat.fields = line.substring(1, line.length - 1).trim().split(',');
1391
-
for(var j = 0; j < cat.fields.length; j++){
1392
-
cat.fields[j] = cat.fields[j].trim();
1571
+
if (!(cat.kinks instanceof Array) || cat.kinks.length < 1) {
1572
+
alert(catName + ' does not have any kinks listed!');
1573
+
return;
1393
1574
}
1575
+
newKinks[catName] = cat;
1394
1576
}
1395
-
if(line[0] === '*'){
1396
-
var kink = line.substring(1).trim();
1397
-
cat.kinks.push(kink);
1577
+
catName = line.substring(1).trim();
1578
+
cat = { kinks: [] };
1579
+
}
1580
+
if (!catName) continue;
1581
+
if (line[0] === '(') {
1582
+
cat.fields = line.substring(1, line.length - 1).trim().split(',');
1583
+
for (var j = 0; j < cat.fields.length; j++) {
1584
+
cat.fields[j] = cat.fields[j].trim();
1398
1585
}
1399
1586
}
1400
-
if(catName && !newKinks[catName]){
1401
-
if(!(cat.fields instanceof Array) || cat.fields.length < 1){
1402
-
alert(catName + ' does not have any fields defined!');
1403
-
return;
1404
-
}
1405
-
if(!(cat.kinks instanceof Array) || cat.kinks.length < 1){
1406
-
alert(catName + ' does not have any kinks listed!');
1407
-
return;
1408
-
}
1409
-
newKinks[catName] = cat;
1587
+
if (line[0] === '*') {
1588
+
var kink = line.substring(1).trim();
1589
+
cat.kinks.push(kink);
1410
1590
}
1411
-
return newKinks;
1412
1591
}
1413
-
};
1414
-
1415
-
$('#Edit').on('click', function(){
1416
-
var KinksText = inputKinks.inputListToText();
1417
-
$('#Kinks').val(KinksText.trim());
1418
-
$('#EditOverlay').fadeIn();
1419
-
});
1420
-
$('#EditOverlay').on('click', function(){
1421
-
$(this).fadeOut();
1422
-
});
1423
-
$('#KinksOK').on('click', function(){
1424
-
var selection = inputKinks.saveSelection();
1425
-
try {
1426
-
var kinksText = $('#Kinks').val();
1427
-
kinks = inputKinks.parseKinksText(kinksText);
1428
-
inputKinks.fillInputList();
1429
-
}
1430
-
catch(e){
1431
-
alert('An error occured trying to parse the text entered, please correct it and try again');
1432
-
return;
1433
-
}
1434
-
inputKinks.restoreSavedSelection(selection);
1435
-
$('#EditOverlay').fadeOut();
1436
-
});
1437
-
$('.overlay > *').on('click', function(e){
1438
-
e.stopPropagation();
1439
-
});
1440
-
1441
-
var stylesheet = document.styleSheets[0];
1442
-
$('.legend .choice').each(function(){
1443
-
var $choice = $(this);
1444
-
var $parent = $choice.parent();
1445
-
var text = $parent.text().trim();
1446
-
var color = $choice.data('color');
1447
-
var cssClass = this.className.replace('choice ', '').trim();
1448
-
1449
-
if (color != 'pattern') {
1450
-
addCssRule('.choice.' + cssClass, 'background-color: ' + color + ';');
1451
-
colors[text] = color;
1592
+
if (catName && !newKinks[catName]) {
1593
+
if (!(cat.fields instanceof Array) || cat.fields.length < 1) {
1594
+
alert(catName + ' does not have any fields defined!');
1595
+
return;
1596
+
}
1597
+
if (!(cat.kinks instanceof Array) || cat.kinks.length < 1) {
1598
+
alert(catName + ' does not have any kinks listed!');
1599
+
return;
1600
+
}
1601
+
newKinks[catName] = cat;
1452
1602
}
1453
-
else {
1603
+
return newKinks;
1604
+
}
1605
+
};
1606
+
1607
+
$('#Edit').on('click', function() {
1608
+
var KinksText = inputKinks.inputListToText();
1609
+
$('#Kinks').val(KinksText.trim());
1610
+
$('#EditOverlay').fadeIn();
1611
+
});
1612
+
$('#EditOverlay').on('click', function() {
1613
+
$(this).fadeOut();
1614
+
});
1615
+
$('#KinksOK').on('click', function() {
1616
+
var selection = inputKinks.saveSelection();
1617
+
try {
1618
+
var kinksText = $('#Kinks').val();
1619
+
kinks = inputKinks.parseKinksText(kinksText);
1620
+
inputKinks.fillInputList();
1621
+
}
1622
+
catch (e) {
1623
+
alert('An error occured trying to parse the text entered, please correct it and try again');
1624
+
return;
1625
+
}
1626
+
inputKinks.restoreSavedSelection(selection);
1627
+
$('#EditOverlay').fadeOut();
1628
+
});
1629
+
$('.overlay > *').on('click', e => {
1630
+
e.stopPropagation();
1631
+
});
1632
+
1633
+
var stylesheet = document.styleSheets[0];
1634
+
$('.legend .choice').each(function() {
1635
+
var $choice = $(this);
1636
+
var $parent = $choice.parent();
1637
+
var text = $parent.text().trim();
1638
+
var color = $choice.data('color');
1639
+
var cssClass = this.className.replace('choice ', '').trim();
1640
+
1641
+
if (color != 'pattern') {
1642
+
addCssRule('.choice.' + cssClass, 'background-color: ' + color + ';');
1643
+
colors[text] = color;
1644
+
}
1645
+
else {
1454
1646
addCssRule('.choice.' + cssClass, 'background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNScgaGVpZ2h0PScxNSc+CiAgPHJlY3Qgd2lkdGg9JzE1JyBoZWlnaHQ9JzE1JyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsNSBsMTUsLTE1CiAgICAgICAgICAgTTAsMTAgbDE1LC0xNQogICAgICAgICAgIE0wLDE1IGwxNSwtMTUKICAgICAgICAgICBNMCwyMCBsMTUsLTE1CiAgICAgICAgICAgTTAsMjUgbDE1LC0xNQogICAgICAgICAgIE0xNCwxNiBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo="); background-repeat: repeat');
1455
-
1456
-
colors[text] = 'pattern';
1457
-
}
1458
-
level[text] = cssClass;
1459
-
});
1460
-
1461
-
kinks = inputKinks.parseKinksText($('#Kinks').text().trim());
1462
-
inputKinks.init();
1463
-
1464
-
(function(){
1465
-
var $popup = $('#InputOverlay');
1466
-
var $previous = $('#InputPrevious');
1467
-
var $next = $('#InputNext');
1647
+
1648
+
colors[text] = 'pattern';
1649
+
}
1650
+
level[text] = cssClass;
1651
+
});
1652
+
1653
+
kinks = inputKinks.parseKinksText($('#Kinks').text().trim());
1654
+
inputKinks.init();
1655
+
1656
+
(function() {
1657
+
var $popup = $('#InputOverlay');
1658
+
var $previous = $('#InputPrevious');
1659
+
var $next = $('#InputNext');
1468
1660
1469
-
// current
1470
-
var $category = $('#InputCategory');
1471
-
var $field = $('#InputField');
1472
-
var $options = $('#InputValues');
1661
+
// current
1662
+
var $category = $('#InputCategory');
1663
+
var $field = $('#InputField');
1664
+
var $options = $('#InputValues');
1473
1665
1474
-
function getChoiceValue($choices){
1475
-
var $selected = $choices.find('.choice.selected');
1476
-
return $selected.data('level');
1477
-
}
1666
+
function getChoiceValue($choices) {
1667
+
var $selected = $choices.find('.choice.selected');
1668
+
return $selected.data('level');
1669
+
}
1478
1670
1479
-
function getChoicesElement(category, kink, field){
1480
-
var selector = '.cat-' + strToClass(category);
1481
-
selector += ' .kink-' + strToClass(kink);
1482
-
selector += ' .choice-' + strToClass(field);
1671
+
function getChoicesElement(category, kink, field) {
1672
+
var selector = '.cat-' + strToClass(category);
1673
+
selector += ' .kink-' + strToClass(kink);
1674
+
selector += ' .choice-' + strToClass(field);
1483
1675
1484
-
var $choices = $(selector);
1485
-
return $choices;
1486
-
}
1676
+
var $choices = $(selector);
1677
+
return $choices;
1678
+
}
1487
1679
1488
-
inputKinks.getAllKinks = function(){
1489
-
var list = [];
1680
+
inputKinks.getAllKinks = function() {
1681
+
var list = [];
1490
1682
1491
-
var categories = Object.keys(kinks);
1492
-
for(var i = 0; i < categories.length; i++){
1493
-
var category = categories[i];
1494
-
var fields = kinks[category].fields;
1495
-
var kinkArr = kinks[category].kinks;
1683
+
var categories = Object.keys(kinks);
1684
+
for (var i = 0; i < categories.length; i++) {
1685
+
var category = categories[i];
1686
+
var fields = kinks[category].fields;
1687
+
var kinkArr = kinks[category].kinks;
1496
1688
1497
-
for(var j = 0; j < fields.length; j++) {
1498
-
var field = fields[j];
1499
-
for(var k = 0; k < kinkArr.length; k++){
1500
-
var kink = kinkArr[k];
1501
-
var $choices = getChoicesElement(category, kink, field);
1502
-
var value = getChoiceValue($choices);
1503
-
var obj = { category: category, kink: kink, field: field, value: value, $choices: $choices, showField: (fields.length >= 2)};
1504
-
list.push(obj);
1505
-
}
1689
+
for (var j = 0; j < fields.length; j++) {
1690
+
var field = fields[j];
1691
+
for (var k = 0; k < kinkArr.length; k++) {
1692
+
var kink = kinkArr[k];
1693
+
var $choices = getChoicesElement(category, kink, field);
1694
+
var value = getChoiceValue($choices);
1695
+
var obj = { category: category, kink: kink, field: field, value: value, $choices: $choices, showField: (fields.length >= 2) };
1696
+
list.push(obj);
1506
1697
}
1507
-
1508
1698
}
1509
-
return list;
1510
-
};
1511
1699
1512
-
inputKinks.inputPopup = {
1513
-
numPrev: 3,
1514
-
numNext: 3,
1515
-
allKinks: [],
1516
-
kinkByIndex: function(i){
1517
-
var numKinks = inputKinks.inputPopup.allKinks.length;
1518
-
i = (numKinks + i) % numKinks;
1519
-
return inputKinks.inputPopup.allKinks[i];
1520
-
},
1521
-
generatePrimary: function(kink){
1522
-
var $container = $('<div>');
1523
-
var btnIndex = 0;
1524
-
$('.legend > div').each(function(){
1525
-
var $btn = $(this).clone();
1526
-
$btn.addClass('big-choice');
1527
-
$btn.appendTo($container);
1700
+
}
1701
+
return list;
1702
+
};
1528
1703
1529
-
$('<span>')
1530
-
.addClass('btn-num-text')
1531
-
.text(btnIndex++)
1532
-
.appendTo($btn)
1704
+
inputKinks.inputPopup = {
1705
+
numPrev: 3,
1706
+
numNext: 3,
1707
+
allKinks: [],
1708
+
kinkByIndex(i) {
1709
+
var numKinks = inputKinks.inputPopup.allKinks.length;
1710
+
i = (numKinks + i) % numKinks;
1711
+
return inputKinks.inputPopup.allKinks[i];
1712
+
},
1713
+
generatePrimary(kink) {
1714
+
var $container = $('<div>');
1715
+
var btnIndex = 0;
1716
+
$('.legend > div').each(function() {
1717
+
var $btn = $(this).clone();
1718
+
$btn.addClass('big-choice');
1719
+
$btn.appendTo($container);
1533
1720
1534
-
var text = $btn.text().trim().replace(/[0-9]/g, '');
1535
-
if(kink.value === text) {
1536
-
$btn.addClass('selected');
1537
-
}
1721
+
$('<span>')
1722
+
.addClass('btn-num-text')
1723
+
.text(btnIndex++)
1724
+
.appendTo($btn)
1538
1725
1539
-
$btn.on('click', function(){
1540
-
$container.find('.big-choice').removeClass('selected');
1541
-
$btn.addClass('selected');
1542
-
kink.value = text;
1543
-
$options.fadeOut(200, function(){
1544
-
$options.show();
1545
-
inputKinks.inputPopup.showNext();
1546
-
});
1547
-
var choiceClass = strToClass(text);
1548
-
kink.$choices.find('.' + choiceClass).click();
1726
+
var text = $btn.text().trim().replace(/[0-9]/g, '');
1727
+
if (kink.value === text) {
1728
+
$btn.addClass('selected');
1729
+
}
1730
+
1731
+
$btn.on('click', function() {
1732
+
$container.find('.big-choice').removeClass('selected');
1733
+
$btn.addClass('selected');
1734
+
kink.value = text;
1735
+
$options.fadeOut(200, function() {
1736
+
$options.show();
1737
+
inputKinks.inputPopup.showNext();
1549
1738
});
1739
+
var choiceClass = strToClass(text);
1740
+
kink.$choices.find('.' + choiceClass).click();
1550
1741
});
1551
-
return $container;
1552
-
},
1553
-
generateSecondary: function(kink){
1554
-
var $container = $('<div class="kink-simple">');
1555
-
$('<span class="choice">').addClass(level[kink.value]).appendTo($container);
1556
-
$('<span class="txt-category">').text(kink.category).appendTo($container);
1557
-
if(kink.showField){
1558
-
$('<span class="txt-field">').text(kink.field).appendTo($container);
1559
-
}
1560
-
$('<span class="txt-kink">').text(kink.kink).appendTo($container);
1561
-
return $container;
1562
-
},
1563
-
showIndex: function(index){
1564
-
$previous.html('');
1565
-
$next.html('');
1566
-
$options.html('');
1567
-
$popup.data('index', index);
1742
+
});
1743
+
return $container;
1744
+
},
1745
+
generateSecondary(kink) {
1746
+
var $container = $('<div class="kink-simple">');
1747
+
$('<span class="choice">').addClass(level[kink.value]).appendTo($container);
1748
+
$('<span class="txt-category">').text(kink.category).appendTo($container);
1749
+
if (kink.showField) {
1750
+
$('<span class="txt-field">').text(kink.field).appendTo($container);
1751
+
}
1752
+
$('<span class="txt-kink">').text(kink.kink).appendTo($container);
1753
+
return $container;
1754
+
},
1755
+
showIndex(index) {
1756
+
$previous.html('');
1757
+
$next.html('');
1758
+
$options.html('');
1759
+
$popup.data('index', index);
1568
1760
1569
-
// Current
1570
-
var currentKink = inputKinks.inputPopup.kinkByIndex(index);
1571
-
var $currentKink = inputKinks.inputPopup.generatePrimary(currentKink);
1572
-
$options.append($currentKink);
1573
-
$category.text(currentKink.category);
1574
-
$field.text((currentKink.showField ? '(' + currentKink.field + ') ' : '') + currentKink.kink);
1575
-
$options.append($currentKink);
1761
+
// Current
1762
+
var currentKink = inputKinks.inputPopup.kinkByIndex(index);
1763
+
var $currentKink = inputKinks.inputPopup.generatePrimary(currentKink);
1764
+
$options.append($currentKink);
1765
+
$category.text(currentKink.category);
1766
+
$field.text((currentKink.showField ? '(' + currentKink.field + ') ' : '') + currentKink.kink);
1767
+
$options.append($currentKink);
1576
1768
1577
-
// Prev
1578
-
for(var i = inputKinks.inputPopup.numPrev; i > 0; i--){
1579
-
var prevKink = inputKinks.inputPopup.kinkByIndex(index - i);
1580
-
var $prevKink = inputKinks.inputPopup.generateSecondary(prevKink);
1581
-
$previous.append($prevKink);
1582
-
(function(skip){
1583
-
$prevKink.on('click', function(){
1584
-
inputKinks.inputPopup.showPrev(skip);
1585
-
});
1586
-
})(i);
1587
-
}
1588
-
// Next
1589
-
for(var i = 1; i <= inputKinks.inputPopup.numNext; i++){
1590
-
var nextKink = inputKinks.inputPopup.kinkByIndex(index + i);
1591
-
var $nextKink = inputKinks.inputPopup.generateSecondary(nextKink);
1592
-
$next.append($nextKink);
1593
-
(function(skip){
1594
-
$nextKink.on('click', function(){
1595
-
inputKinks.inputPopup.showNext(skip);
1596
-
});
1597
-
})(i);
1598
-
}
1599
-
},
1600
-
showPrev: function(skip){
1601
-
if(typeof skip !== "number") skip = 1;
1602
-
var index = $popup.data('index') - skip;
1603
-
var numKinks = inputKinks.inputPopup.allKinks.length;
1604
-
index = (numKinks + index) % numKinks;
1605
-
inputKinks.inputPopup.showIndex(index);
1606
-
},
1607
-
showNext: function(skip){
1608
-
if(typeof skip !== "number") skip = 1;
1609
-
var index = $popup.data('index') + skip;
1610
-
var numKinks = inputKinks.inputPopup.allKinks.length;
1611
-
index = (numKinks + index) % numKinks;
1612
-
inputKinks.inputPopup.showIndex(index);
1613
-
},
1614
-
show: function(){
1615
-
inputKinks.inputPopup.allKinks = inputKinks.getAllKinks();
1616
-
inputKinks.inputPopup.showIndex(0);
1617
-
$popup.fadeIn();
1769
+
// Prev
1770
+
for (var i = inputKinks.inputPopup.numPrev; i > 0; i--) {
1771
+
var prevKink = inputKinks.inputPopup.kinkByIndex(index - i);
1772
+
var $prevKink = inputKinks.inputPopup.generateSecondary(prevKink);
1773
+
$previous.append($prevKink);
1774
+
(skip => {
1775
+
$prevKink.on('click', function() {
1776
+
inputKinks.inputPopup.showPrev(skip);
1777
+
});
1778
+
})(i);
1779
+
}
1780
+
// Next
1781
+
for (var i = 1; i <= inputKinks.inputPopup.numNext; i++) {
1782
+
var nextKink = inputKinks.inputPopup.kinkByIndex(index + i);
1783
+
var $nextKink = inputKinks.inputPopup.generateSecondary(nextKink);
1784
+
$next.append($nextKink);
1785
+
(skip => {
1786
+
$nextKink.on('click', function() {
1787
+
inputKinks.inputPopup.showNext(skip);
1788
+
});
1789
+
})(i);
1618
1790
}
1619
-
};
1791
+
},
1792
+
showPrev(skip) {
1793
+
if (typeof skip !== "number") skip = 1;
1794
+
var index = $popup.data('index') - skip;
1795
+
var numKinks = inputKinks.inputPopup.allKinks.length;
1796
+
index = (numKinks + index) % numKinks;
1797
+
inputKinks.inputPopup.showIndex(index);
1798
+
},
1799
+
showNext(skip) {
1800
+
if (typeof skip !== "number") skip = 1;
1801
+
var index = $popup.data('index') + skip;
1802
+
var numKinks = inputKinks.inputPopup.allKinks.length;
1803
+
index = (numKinks + index) % numKinks;
1804
+
inputKinks.inputPopup.showIndex(index);
1805
+
},
1806
+
show() {
1807
+
inputKinks.inputPopup.allKinks = inputKinks.getAllKinks();
1808
+
inputKinks.inputPopup.showIndex(0);
1809
+
$popup.fadeIn();
1810
+
}
1811
+
};
1812
+
1813
+
$(window).on('keydown', function (e) {
1814
+
if (e.altKey || e.shiftKey || e.ctrlKey) return;
1815
+
if (!$popup.is(':visible')) return;
1620
1816
1621
-
$(window).on('keydown', function(e){
1622
-
if(e.altKey || e.shiftKey || e.ctrlKey) return;
1623
-
if(!$popup.is(':visible')) return;
1817
+
let btn = -1;
1624
1818
1625
-
if(e.keyCode === 38) {
1819
+
switch (e.code) {
1820
+
case 'ArrowUp':
1626
1821
inputKinks.inputPopup.showPrev();
1627
1822
e.preventDefault();
1628
1823
e.stopPropagation();
1629
-
}
1630
-
if(e.keyCode === 40) {
1824
+
return;
1825
+
case 'ArrowDown':
1631
1826
inputKinks.inputPopup.showNext();
1632
1827
e.preventDefault();
1633
1828
e.stopPropagation();
1634
-
}
1635
-
1636
-
var btn = -1;
1637
-
if(e.keyCode >= 96 && e.keyCode <= 101) {
1638
-
btn = e.keyCode - 96;
1639
-
}
1640
-
else if(e.keyCode >= 48 && e.keyCode <= 53) {
1641
-
btn = e.keyCode - 48;
1642
-
}
1643
-
else {
1644
1829
return;
1645
-
}
1830
+
case 'Numpad0':
1831
+
case 'Digit0':
1832
+
btn = 0;
1833
+
break;
1834
+
case 'Numpad1':
1835
+
case 'Digit1':
1836
+
btn = 1;
1837
+
break;
1838
+
case 'Numpad2':
1839
+
case 'Digit2':
1840
+
btn = 2;
1841
+
break;
1842
+
case 'Numpad3':
1843
+
case 'Digit3':
1844
+
btn = 3;
1845
+
break;
1846
+
case 'Numpad4':
1847
+
case 'Digit4':
1848
+
btn = 4;
1849
+
break;
1850
+
case 'Numpad5':
1851
+
case 'Digit5':
1852
+
btn = 5;
1853
+
break;
1854
+
case 'Numpad6':
1855
+
case 'Digit6':
1856
+
btn = 6;
1857
+
break;
1858
+
case 'Numpad7':
1859
+
case 'Digit7':
1860
+
btn = 7;
1861
+
break;
1862
+
case 'Numpad8':
1863
+
case 'Digit8':
1864
+
btn = 8;
1865
+
break;
1866
+
case 'Numpad9':
1867
+
case 'Digit9':
1868
+
btn = 9;
1869
+
break;
1870
+
default:
1871
+
return;
1872
+
}
1646
1873
1647
-
var $btn = $options.find('.big-choice').eq(btn);
1648
-
$btn.click();
1649
-
});
1650
-
$('#StartBtn').on('click', inputKinks.inputPopup.show);
1651
-
$('#InputCurrent .closePopup, #InputOverlay').on('click', function(){
1652
-
$popup.fadeOut();
1653
-
});
1654
-
})();
1655
-
});
1656
-
</script>
1657
-
</body>
1658
-
</html>
1874
+
var $btn = $options.find('.big-choice').eq(btn);
1875
+
$btn.click();
1876
+
});
1877
+
$('#StartBtn').on('click', inputKinks.inputPopup.show);
1878
+
$('#InputCurrent .closePopup, #InputOverlay').on('click', function() {
1879
+
$popup.fadeOut();
1880
+
});
1881
+
})();
1882
+
});
1883
+
</script>
1884
+
</body>
1885
+
1886
+
</html>