highmark-cli 0.0.139 → 0.0.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/constants.js +4 -2
- package/bin/importer.js +7 -4
- package/bin/operation/markdownHTML.js +31 -9
- package/bin/operation/markdownStylesCSS.js +17 -10
- package/client.js +549 -710
- package/lib/client.js +32 -5
- package/lib/constants.js +5 -9
- package/lib/createMethods.js +35 -17
- package/lib/localStorage.js +6 -5
- package/lib/mixins/fullsrean.js +3 -5
- package/lib/selectors.js +2 -6
- package/lib/state.js +62 -44
- package/lib/utilities/element.js +11 -11
- package/lib/view/div/buttons.js +4 -6
- package/lib/view/div/checkbox/{restoreNativeGestures.js → fullScreen.js} +23 -16
- package/lib/view/div/checkbox/invertColours.js +9 -6
- package/lib/view/div/checkbox/nativeGestures.js +154 -0
- package/lib/view/div/checkboxes.js +5 -3
- package/lib/view/div/menu.js +11 -43
- package/lib/view/div/overlay.js +115 -157
- package/lib/view/{div/leaf.js → div.js} +21 -16
- package/lib/view.js +24 -6
- package/package.json +3 -2
- package/src/client.js +10 -5
- package/src/constants.js +1 -2
- package/src/createMethods.js +52 -16
- package/src/localStorage.js +9 -6
- package/src/mixins/fullsrean.js +3 -4
- package/src/selectors.js +1 -2
- package/src/state.js +66 -48
- package/src/utilities/element.js +18 -15
- package/src/view/div/buttons.js +4 -6
- package/src/view/div/checkbox/fullScreen.js +38 -0
- package/src/view/div/checkbox/invertColours.js +7 -3
- package/src/view/div/checkbox/nativeGestures.js +38 -0
- package/src/view/div/checkboxes.js +4 -2
- package/src/view/div/menu.js +13 -45
- package/src/view/div/overlay.js +132 -186
- package/src/view/{div/leaf.js → div.js} +15 -10
- package/src/view.js +19 -5
- package/lib/utilities/tree.js +0 -55
- package/lib/view/button/fullScreen.js +0 -121
- package/lib/view/svg/fullScreen.js +0 -138
- package/src/utilities/tree.js +0 -29
- package/src/view/button/fullScreen.js +0 -16
- package/src/view/div/checkbox/restoreNativeGestures.js +0 -29
- package/src/view/svg/fullScreen.js +0 -19
package/src/view/div/overlay.js
CHANGED
|
@@ -3,21 +3,20 @@
|
|
|
3
3
|
import withStyle from "easy-with-style"; ///
|
|
4
4
|
|
|
5
5
|
import { window } from "easy";
|
|
6
|
-
import { keyCodes } from "necessary";
|
|
6
|
+
import { keyCodes, arrayUtilities } from "necessary";
|
|
7
7
|
|
|
8
|
+
import Div from "../div";
|
|
8
9
|
import Element from "../element";
|
|
9
|
-
import LeafDiv from "../div/leaf";
|
|
10
10
|
import touchMixins from "../../mixins/touch";
|
|
11
11
|
import fullScreenMixins from "../../mixins/fullsrean";
|
|
12
12
|
|
|
13
13
|
import { isFullScreen } from "../../utilities/fullScreen";
|
|
14
|
-
import { DIVS_SELECTOR } from "../../selectors";
|
|
15
|
-
import { leafNodesFromNodeList } from "../../utilities/tree";
|
|
16
14
|
import { elementsFromDOMElements } from "../../utilities/element";
|
|
15
|
+
import { getOverlayZoom as getZoom, areColoursInverted, areNativeGesturesRestored } from "../../state";
|
|
17
16
|
import { SCROLL_DELAY, UP_DIRECTION, DECELERATION, DOWN_DIRECTION, OPEN_MENU_TAP_AREA_HEIGHT } from "../../constants";
|
|
18
|
-
import { getViewZoom as getZoom, setViewZoom as setZoom, setColoursInverted, areColoursInverted } from "../../state";
|
|
19
17
|
|
|
20
|
-
const {
|
|
18
|
+
const { first } = arrayUtilities,
|
|
19
|
+
{ ENTER_KEY_CODE,
|
|
21
20
|
ESCAPE_KEY_CODE,
|
|
22
21
|
BACKSPACE_KEY_CODE,
|
|
23
22
|
ARROW_UP_KEY_CODE,
|
|
@@ -29,21 +28,15 @@ class OverlayDiv extends Element {
|
|
|
29
28
|
fullScreenChangeCustomHandler = (event, element) => {
|
|
30
29
|
controller.closeMenu();
|
|
31
30
|
|
|
32
|
-
this.
|
|
31
|
+
this.updateOverlayZoom();
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
doubleTapCustomHandler = (event, element, top, left) => {
|
|
36
35
|
const fullScreen = isFullScreen();
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
controller.exitFullScreen()
|
|
40
|
-
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
this.restoreNativeGestures();
|
|
45
|
-
|
|
46
|
-
controller.checkRestoreNativeGesturesCheckbox();
|
|
37
|
+
fullScreen ?
|
|
38
|
+
controller.exitFullScreen() :
|
|
39
|
+
controller.enterFullScreen();
|
|
47
40
|
}
|
|
48
41
|
|
|
49
42
|
pinchStartCustomHandler = (event, element) => {
|
|
@@ -55,19 +48,17 @@ class OverlayDiv extends Element {
|
|
|
55
48
|
|
|
56
49
|
pinchMoveCustomHandler = (event, element, ratio) => {
|
|
57
50
|
const startZoom = this.getStartZoom(),
|
|
58
|
-
|
|
51
|
+
overlayZoom = startZoom * Math.sqrt(ratio); ///
|
|
59
52
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
this.updateZoom();
|
|
53
|
+
controller.zoomOverlay(overlayZoom);
|
|
63
54
|
}
|
|
64
55
|
|
|
65
56
|
swipeRightCustomHandler = (event, element) => {
|
|
66
|
-
this.
|
|
57
|
+
this.showLeftDiv();
|
|
67
58
|
}
|
|
68
59
|
|
|
69
60
|
swipeLeftCustomHandler = (event, element) => {
|
|
70
|
-
this.
|
|
61
|
+
this.showRightDiv();
|
|
71
62
|
}
|
|
72
63
|
|
|
73
64
|
swipeDownCustomHandler = (event, element, top, left, speed) => {
|
|
@@ -114,22 +105,20 @@ class OverlayDiv extends Element {
|
|
|
114
105
|
}
|
|
115
106
|
|
|
116
107
|
tapCustomHandler = (event, element, top, left) => {
|
|
117
|
-
const
|
|
108
|
+
const height = this.getHeight(),
|
|
109
|
+
bottom = height - top;
|
|
118
110
|
|
|
119
|
-
if (
|
|
120
|
-
|
|
121
|
-
bottom = height - top;
|
|
111
|
+
if (bottom < OPEN_MENU_TAP_AREA_HEIGHT) {
|
|
112
|
+
controller.openMenu();
|
|
122
113
|
|
|
123
|
-
|
|
124
|
-
controller.openMenu();
|
|
125
|
-
|
|
126
|
-
return;
|
|
127
|
-
}
|
|
114
|
+
return;
|
|
128
115
|
}
|
|
129
116
|
|
|
130
|
-
|
|
117
|
+
const nativeGesturesRestored = areNativeGesturesRestored();
|
|
131
118
|
|
|
132
|
-
|
|
119
|
+
nativeGesturesRestored ?
|
|
120
|
+
controller.suppressNativeGestures() :
|
|
121
|
+
controller.restoreNativeGestures();
|
|
133
122
|
}
|
|
134
123
|
|
|
135
124
|
keyDownHandler = (event, element) => {
|
|
@@ -138,55 +127,38 @@ class OverlayDiv extends Element {
|
|
|
138
127
|
switch (keyCode) {
|
|
139
128
|
case ENTER_KEY_CODE:
|
|
140
129
|
case ARROW_RIGHT_KEY_CODE: {
|
|
141
|
-
this.
|
|
130
|
+
this.showRightDiv();
|
|
142
131
|
|
|
143
132
|
break;
|
|
144
133
|
}
|
|
145
134
|
|
|
146
135
|
case BACKSPACE_KEY_CODE:
|
|
147
136
|
case ARROW_LEFT_KEY_CODE: {
|
|
148
|
-
this.
|
|
137
|
+
this.showLeftDiv();
|
|
149
138
|
|
|
150
139
|
break;
|
|
151
140
|
}
|
|
152
141
|
|
|
153
142
|
case ESCAPE_KEY_CODE: {
|
|
154
|
-
|
|
143
|
+
controller.exitFullScreen();
|
|
155
144
|
|
|
156
145
|
break;
|
|
157
146
|
}
|
|
158
147
|
|
|
159
148
|
case ARROW_UP_KEY_CODE: {
|
|
160
|
-
this.
|
|
149
|
+
this.showFirstDiv();
|
|
161
150
|
|
|
162
151
|
break;
|
|
163
152
|
}
|
|
164
153
|
|
|
165
154
|
case ARROW_DOWN_KEY_CODE: {
|
|
166
|
-
this.
|
|
155
|
+
this.showLastDiv();
|
|
167
156
|
|
|
168
157
|
break;
|
|
169
158
|
}
|
|
170
159
|
}
|
|
171
160
|
}
|
|
172
161
|
|
|
173
|
-
updateColours() {
|
|
174
|
-
const coloursInverted = areColoursInverted();
|
|
175
|
-
|
|
176
|
-
coloursInverted ?
|
|
177
|
-
this.addClass("inverted-colours") :
|
|
178
|
-
this.removeClass("inverted-colours");
|
|
179
|
-
|
|
180
|
-
this.updateZoom();
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
updateZoom() {
|
|
184
|
-
const zoom = getZoom(),
|
|
185
|
-
displayedLeafDiv = this.findDisplayedLeafDiv();
|
|
186
|
-
|
|
187
|
-
displayedLeafDiv.zoom(zoom);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
162
|
scrollToTop() {
|
|
191
163
|
const scrollTop = 0;
|
|
192
164
|
|
|
@@ -239,117 +211,124 @@ class OverlayDiv extends Element {
|
|
|
239
211
|
this.setInterval(interval);
|
|
240
212
|
}
|
|
241
213
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
setColoursInverted(coloursInverted);
|
|
246
|
-
|
|
247
|
-
this.updateColours();
|
|
214
|
+
enterFullScreen(callback) {
|
|
215
|
+
this.requestFullScreen(callback);
|
|
248
216
|
}
|
|
249
217
|
|
|
250
|
-
|
|
251
|
-
const
|
|
252
|
-
|
|
253
|
-
setColoursInverted(coloursInverted);
|
|
218
|
+
updateOverlayZoom() {
|
|
219
|
+
const div = this.findDiv(),
|
|
220
|
+
zoom = getZoom();
|
|
254
221
|
|
|
255
|
-
|
|
222
|
+
div.zoom(zoom);
|
|
256
223
|
}
|
|
257
224
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
}
|
|
225
|
+
updateOverlayColours() {
|
|
226
|
+
const coloursInverted = areColoursInverted();
|
|
261
227
|
|
|
262
|
-
|
|
263
|
-
|
|
228
|
+
coloursInverted ?
|
|
229
|
+
this.addClass("inverted-colours") :
|
|
230
|
+
this.removeClass("inverted-colours");
|
|
264
231
|
|
|
265
|
-
this.
|
|
232
|
+
this.updateOverlayZoom();
|
|
266
233
|
}
|
|
267
234
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
235
|
+
updateNativeGestures() {
|
|
236
|
+
// const nativeGesturesRestored = areNativeGesturesRestored();
|
|
237
|
+
//
|
|
238
|
+
// nativeGesturesRestored ?
|
|
239
|
+
// this.addClass("native-gestures") :
|
|
240
|
+
// this.removeClass("native-gestures");
|
|
241
|
+
//
|
|
242
|
+
// nativeGesturesRestored ?
|
|
243
|
+
// this.disableCustomGestures() :
|
|
244
|
+
// this.enableCustomGestures();
|
|
272
245
|
}
|
|
273
246
|
|
|
274
|
-
|
|
275
|
-
const
|
|
276
|
-
leafDivs = this.getLeafDivs(),
|
|
277
|
-
index = leafDivs.indexOf(displayedLeafDiv),
|
|
278
|
-
nextIndex = 0,
|
|
279
|
-
previousIndex = (index === -1) ?
|
|
280
|
-
nextIndex : ///
|
|
281
|
-
index; ///
|
|
247
|
+
areNativeGesturesRestored() {
|
|
248
|
+
const nativeGesturesRestored = this.hasClass("native-gestures");
|
|
282
249
|
|
|
283
|
-
|
|
250
|
+
return nativeGesturesRestored;
|
|
284
251
|
}
|
|
285
252
|
|
|
286
|
-
|
|
287
|
-
const
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
253
|
+
showRightDiv() {
|
|
254
|
+
const div = this.findDiv(),
|
|
255
|
+
divs = this.getDivs(),
|
|
256
|
+
divsLength = divs.length,
|
|
257
|
+
index = divs.indexOf(div),
|
|
258
|
+
nextIndex = index + 1,
|
|
291
259
|
previousIndex = index; ///
|
|
292
260
|
|
|
293
|
-
if (nextIndex ===
|
|
261
|
+
if (nextIndex === divsLength) {
|
|
294
262
|
return;
|
|
295
263
|
}
|
|
296
264
|
|
|
297
|
-
this.
|
|
265
|
+
this.showNextDiv(nextIndex, previousIndex);
|
|
298
266
|
}
|
|
299
267
|
|
|
300
|
-
|
|
301
|
-
const
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
nextIndex = index + 1,
|
|
268
|
+
showLeftDiv() {
|
|
269
|
+
const div = this.findDiv(),
|
|
270
|
+
divs = this.getDivs(),
|
|
271
|
+
index = divs.indexOf(div),
|
|
272
|
+
nextIndex = index - 1,
|
|
306
273
|
previousIndex = index; ///
|
|
307
274
|
|
|
308
|
-
if (nextIndex ===
|
|
275
|
+
if (nextIndex === -1) {
|
|
309
276
|
return;
|
|
310
277
|
}
|
|
311
278
|
|
|
312
|
-
this.
|
|
279
|
+
this.showNextDiv(nextIndex, previousIndex);
|
|
313
280
|
}
|
|
314
281
|
|
|
315
|
-
|
|
316
|
-
const
|
|
317
|
-
|
|
318
|
-
index =
|
|
319
|
-
|
|
320
|
-
nextIndex =
|
|
282
|
+
showLastDiv() {
|
|
283
|
+
const div = this.findDiv(),
|
|
284
|
+
divs = this.getDivs(),
|
|
285
|
+
index = divs.indexOf(div),
|
|
286
|
+
divsLength = divs.length,
|
|
287
|
+
nextIndex = divsLength - 1,
|
|
321
288
|
previousIndex = (index === -1) ?
|
|
322
289
|
nextIndex : ///
|
|
323
290
|
index; ///
|
|
324
291
|
|
|
325
|
-
this.
|
|
292
|
+
this.showNextDiv(nextIndex, previousIndex);
|
|
326
293
|
}
|
|
327
294
|
|
|
328
|
-
|
|
329
|
-
const
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
295
|
+
showNextDiv(nextIndex, previousIndex) {
|
|
296
|
+
const zoom = getZoom(),
|
|
297
|
+
divs = this.getDivs(),
|
|
298
|
+
nextDiv = divs[nextIndex],
|
|
299
|
+
previousDiv = divs[previousIndex];
|
|
333
300
|
|
|
334
|
-
|
|
301
|
+
this.stopScrolling();
|
|
335
302
|
|
|
336
|
-
|
|
303
|
+
this.scrollToTop();
|
|
337
304
|
|
|
338
|
-
|
|
305
|
+
this.remove(previousDiv);
|
|
339
306
|
|
|
340
|
-
|
|
307
|
+
this.add(nextDiv);
|
|
341
308
|
|
|
342
|
-
|
|
309
|
+
nextDiv.zoom(zoom);
|
|
343
310
|
|
|
344
|
-
|
|
311
|
+
setTimeout(() => {
|
|
312
|
+
const backgroundColour = nextDiv.getBackgroundColour();
|
|
345
313
|
|
|
346
|
-
|
|
314
|
+
this.setBackgroundColour(backgroundColour);
|
|
315
|
+
}, 0);
|
|
316
|
+
}
|
|
347
317
|
|
|
348
|
-
|
|
318
|
+
showFirstDiv() {
|
|
319
|
+
const zoom = getZoom(),
|
|
320
|
+
divs = this.getDivs(),
|
|
321
|
+
firstDiv = first(divs);
|
|
349
322
|
|
|
350
|
-
this.
|
|
323
|
+
this.add(firstDiv);
|
|
324
|
+
|
|
325
|
+
firstDiv.zoom(zoom);
|
|
351
326
|
|
|
352
|
-
|
|
327
|
+
setTimeout(() => {
|
|
328
|
+
const backgroundColour = firstDiv.getBackgroundColour();
|
|
329
|
+
|
|
330
|
+
this.setBackgroundColour(backgroundColour);
|
|
331
|
+
}, 0);
|
|
353
332
|
}
|
|
354
333
|
|
|
355
334
|
setBackgroundColour(backgroundColour) {
|
|
@@ -361,49 +340,28 @@ class OverlayDiv extends Element {
|
|
|
361
340
|
this.css(css);
|
|
362
341
|
}
|
|
363
342
|
|
|
364
|
-
|
|
365
|
-
this.
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
findDisplayedLeafDiv() {
|
|
371
|
-
const leafDivs = this.getLeafDivs(),
|
|
372
|
-
displayedLeafDiv = leafDivs.find((leafDiv) => {
|
|
373
|
-
const displayed = leafDiv.isDisplayed();
|
|
343
|
+
findDiv() {
|
|
344
|
+
const divs = this.getDivs(),
|
|
345
|
+
div = divs.find((div) => {
|
|
346
|
+
const added = div.isAdded();
|
|
374
347
|
|
|
375
|
-
if (
|
|
348
|
+
if (added) {
|
|
376
349
|
return true;
|
|
377
350
|
}
|
|
378
351
|
});
|
|
379
352
|
|
|
380
|
-
return
|
|
353
|
+
return div;
|
|
381
354
|
}
|
|
382
355
|
|
|
383
|
-
|
|
384
|
-
const
|
|
385
|
-
divNodeList = domElement.querySelectorAll(DIVS_SELECTOR),
|
|
386
|
-
leafDivNodes = leafNodesFromNodeList(divNodeList), ///
|
|
387
|
-
leafDivs = elementsFromDOMElements(leafDivNodes, LeafDiv);
|
|
356
|
+
getDivs() {
|
|
357
|
+
const { divs } = this.getState();
|
|
388
358
|
|
|
389
|
-
return
|
|
359
|
+
return divs;
|
|
390
360
|
}
|
|
391
361
|
|
|
392
|
-
|
|
393
|
-
const leafDivs = this.getLeafDivs();
|
|
394
|
-
|
|
395
|
-
leafDivs.forEach(callback);
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
getLeafDivs() {
|
|
399
|
-
const { leafDivs } = this.getState();
|
|
400
|
-
|
|
401
|
-
return leafDivs;
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
setLeftDivs(leafDivs) {
|
|
362
|
+
setDivs(divs) {
|
|
405
363
|
this.updateState({
|
|
406
|
-
|
|
364
|
+
divs
|
|
407
365
|
});
|
|
408
366
|
}
|
|
409
367
|
|
|
@@ -444,26 +402,19 @@ class OverlayDiv extends Element {
|
|
|
444
402
|
}
|
|
445
403
|
|
|
446
404
|
setInitialState() {
|
|
447
|
-
const
|
|
405
|
+
const divs = this.createDivs(),
|
|
448
406
|
interval = null,
|
|
449
407
|
startZoom = null,
|
|
450
408
|
startScrollTop = null;
|
|
451
409
|
|
|
452
410
|
this.setState({
|
|
453
|
-
|
|
411
|
+
divs,
|
|
454
412
|
interval,
|
|
455
413
|
startZoom,
|
|
456
414
|
startScrollTop
|
|
457
415
|
});
|
|
458
416
|
}
|
|
459
417
|
|
|
460
|
-
appendDivDOMElement() {
|
|
461
|
-
const { divDOMElement } = this.properties,
|
|
462
|
-
domElement = this.getDOMElement();
|
|
463
|
-
|
|
464
|
-
domElement.append(divDOMElement);
|
|
465
|
-
}
|
|
466
|
-
|
|
467
418
|
didMount() {
|
|
468
419
|
window.onKeyDown(this.keyDownHandler);
|
|
469
420
|
|
|
@@ -482,17 +433,13 @@ class OverlayDiv extends Element {
|
|
|
482
433
|
this.onCustomFullScreenChange(this.fullScreenChangeCustomHandler);
|
|
483
434
|
|
|
484
435
|
this.enableFullScreen();
|
|
485
|
-
this.enableTouch();
|
|
486
|
-
|
|
487
|
-
this.showFirstLeafDiv();
|
|
488
436
|
|
|
489
|
-
this.
|
|
490
|
-
|
|
491
|
-
this.updateZoom();
|
|
437
|
+
this.enableTouch();
|
|
492
438
|
}
|
|
493
439
|
|
|
494
440
|
willUnmount() {
|
|
495
441
|
this.disableTouch();
|
|
442
|
+
|
|
496
443
|
this.disableFullScreen();
|
|
497
444
|
|
|
498
445
|
this.offCustomTap(this.tapCustomHandler);
|
|
@@ -512,42 +459,41 @@ class OverlayDiv extends Element {
|
|
|
512
459
|
window.offKeyDown(this.keyDownHandler);
|
|
513
460
|
}
|
|
514
461
|
|
|
462
|
+
createDivs() {
|
|
463
|
+
const { divDOMElements } = this.properties,
|
|
464
|
+
divs = elementsFromDOMElements(divDOMElements, Div);
|
|
465
|
+
|
|
466
|
+
return divs;
|
|
467
|
+
}
|
|
468
|
+
|
|
515
469
|
parentContext() {
|
|
516
|
-
const
|
|
517
|
-
revertColours = this.revertColours.bind(this),
|
|
518
|
-
exitFullScreen = this.exitFullScreen.bind(this),
|
|
470
|
+
const exitFullScreen = this.exitFullScreen.bind(this),
|
|
519
471
|
enterFullScreen = this.enterFullScreen.bind(this),
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
472
|
+
updateOverlayZoom = this.updateOverlayZoom.bind(this),
|
|
473
|
+
updateOverlayColours = this.updateOverlayColours.bind(this),
|
|
474
|
+
updateNativeGestures = this.updateNativeGestures.bind(this);
|
|
523
475
|
|
|
524
476
|
return ({
|
|
525
|
-
invertColours,
|
|
526
|
-
revertColours,
|
|
527
477
|
exitFullScreen,
|
|
528
478
|
enterFullScreen,
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
479
|
+
updateOverlayZoom,
|
|
480
|
+
updateOverlayColours,
|
|
481
|
+
updateNativeGestures
|
|
532
482
|
});
|
|
533
483
|
}
|
|
534
484
|
|
|
535
485
|
initialise() {
|
|
536
486
|
this.assignContext();
|
|
537
487
|
|
|
538
|
-
this.appendDivDOMElement();
|
|
539
|
-
|
|
540
488
|
this.setInitialState();
|
|
541
489
|
|
|
542
|
-
this.
|
|
543
|
-
|
|
544
|
-
this.hideAllLeafDivs();
|
|
490
|
+
this.showFirstDiv();
|
|
545
491
|
}
|
|
546
492
|
|
|
547
493
|
static tagName = "div";
|
|
548
494
|
|
|
549
495
|
static ignoredProperties = [
|
|
550
|
-
"
|
|
496
|
+
"divDOMElements"
|
|
551
497
|
];
|
|
552
498
|
|
|
553
499
|
static defaultProperties = {
|
|
@@ -4,21 +4,32 @@ import withStyle from "easy-with-style"; ///
|
|
|
4
4
|
|
|
5
5
|
import { Element } from "easy";
|
|
6
6
|
|
|
7
|
-
import { BACKGROUND_COLOUR } from "
|
|
7
|
+
import { BACKGROUND_COLOUR } from "../constants";
|
|
8
8
|
|
|
9
|
-
class
|
|
9
|
+
class Div extends Element {
|
|
10
10
|
getBackgroundColour() {
|
|
11
11
|
const backgroundColour = this.css(BACKGROUND_COLOUR) || null;
|
|
12
12
|
|
|
13
13
|
return backgroundColour;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
isAdded() {
|
|
17
|
+
const domElement = this.getDOMElement(),
|
|
18
|
+
{ parentNode } = domElement,
|
|
19
|
+
added = (parentNode !== null);
|
|
20
|
+
|
|
21
|
+
return added;
|
|
22
|
+
}
|
|
23
|
+
|
|
16
24
|
zoom(zoom) {
|
|
17
|
-
const
|
|
25
|
+
const zoomRatio = 100 / zoom,
|
|
26
|
+
width = `${zoomRatio}%`,
|
|
27
|
+
minHeight = `${zoomRatio}%`,
|
|
18
28
|
transform = `scale(${zoom})`;
|
|
19
29
|
|
|
20
30
|
const css = {
|
|
21
31
|
width,
|
|
32
|
+
minHeight,
|
|
22
33
|
transform
|
|
23
34
|
};
|
|
24
35
|
|
|
@@ -26,17 +37,11 @@ class LeafDiv extends Element {
|
|
|
26
37
|
}
|
|
27
38
|
|
|
28
39
|
static tagName = "div";
|
|
29
|
-
|
|
30
|
-
static defaultProperties = {
|
|
31
|
-
className: "leaf"
|
|
32
|
-
};
|
|
33
40
|
}
|
|
34
41
|
|
|
35
|
-
export default withStyle(
|
|
42
|
+
export default withStyle(Div)`
|
|
36
43
|
|
|
37
44
|
width: 100%;
|
|
38
|
-
min-height: 100%;
|
|
39
|
-
pointer-events: none;
|
|
40
45
|
transform-origin: top left;
|
|
41
46
|
|
|
42
47
|
`;
|
package/src/view.js
CHANGED
|
@@ -9,17 +9,31 @@ import PreloaderDiv from "./view/div/preloader";
|
|
|
9
9
|
|
|
10
10
|
class View extends Element {
|
|
11
11
|
updateZoom() {
|
|
12
|
-
this.
|
|
13
|
-
this.
|
|
12
|
+
this.updateMenuZoom();
|
|
13
|
+
this.updateOverlayZoom();
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
didMount() {
|
|
17
|
+
this.updateMenuZoom();
|
|
18
|
+
this.updateOverlayZoom();
|
|
19
|
+
this.updateOverlayColours();
|
|
20
|
+
this.updateNativeGestures();
|
|
21
|
+
this.updateFullScreenCheckboxDiv();
|
|
22
|
+
this.updateInvertColoursCheckboxDiv();
|
|
23
|
+
this.updateNativeGesturesCheckboxDiv();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
willUnmount() {
|
|
27
|
+
///
|
|
14
28
|
}
|
|
15
29
|
|
|
16
30
|
childElements() {
|
|
17
|
-
const {
|
|
31
|
+
const { divDOMElements } = this.properties;
|
|
18
32
|
|
|
19
33
|
return ([
|
|
20
34
|
|
|
21
35
|
<PreloaderDiv/>,
|
|
22
|
-
<OverlayDiv
|
|
36
|
+
<OverlayDiv divDOMElements={divDOMElements} />,
|
|
23
37
|
<MenuDiv/>
|
|
24
38
|
|
|
25
39
|
]);
|
|
@@ -34,7 +48,7 @@ class View extends Element {
|
|
|
34
48
|
static tagName = "div";
|
|
35
49
|
|
|
36
50
|
static ignoredProperties = [
|
|
37
|
-
"
|
|
51
|
+
"divDOMElements"
|
|
38
52
|
];
|
|
39
53
|
|
|
40
54
|
static defaultProperties = {
|
package/lib/utilities/tree.js
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "leafNodesFromNodeList", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return leafNodesFromNodeList;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
var _necessary = require("necessary");
|
|
12
|
-
function _array_like_to_array(arr, len) {
|
|
13
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
14
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
15
|
-
return arr2;
|
|
16
|
-
}
|
|
17
|
-
function _array_without_holes(arr) {
|
|
18
|
-
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
19
|
-
}
|
|
20
|
-
function _iterable_to_array(iter) {
|
|
21
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
22
|
-
}
|
|
23
|
-
function _non_iterable_spread() {
|
|
24
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
25
|
-
}
|
|
26
|
-
function _to_consumable_array(arr) {
|
|
27
|
-
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
28
|
-
}
|
|
29
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
30
|
-
if (!o) return;
|
|
31
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
32
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
33
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
34
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
35
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
36
|
-
}
|
|
37
|
-
var filter = _necessary.arrayUtilities.filter;
|
|
38
|
-
function leafNodesFromNodeList(nodeList) {
|
|
39
|
-
var nodes = _to_consumable_array(nodeList);
|
|
40
|
-
filter(nodes, function(node) {
|
|
41
|
-
var childNodeList = node.childNodes, childNodes = _to_consumable_array(childNodeList), childNodesIncludesNodes = nodes.some(function(node) {
|
|
42
|
-
var childNodesIncludesNode = childNodes.includes(node);
|
|
43
|
-
if (childNodesIncludesNode) {
|
|
44
|
-
return true;
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
if (!childNodesIncludesNodes) {
|
|
48
|
-
return true;
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
var leafNodes = nodes; ///
|
|
52
|
-
return leafNodes;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlsaXRpZXMvdHJlZS5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IHsgYXJyYXlVdGlsaXRpZXMgfSBmcm9tIFwibmVjZXNzYXJ5XCI7XG5cbmNvbnN0IHsgZmlsdGVyIH0gPSBhcnJheVV0aWxpdGllcztcblxuZXhwb3J0IGZ1bmN0aW9uIGxlYWZOb2Rlc0Zyb21Ob2RlTGlzdChub2RlTGlzdCkge1xuICBjb25zdCBub2RlcyA9IFsgLi4ubm9kZUxpc3QgXTtcblxuICBmaWx0ZXIobm9kZXMsIChub2RlKSA9PiB7XG4gICAgY29uc3QgeyBjaGlsZE5vZGVzOiBjaGlsZE5vZGVMaXN0IH0gPSBub2RlLFxuICAgICAgICAgIGNoaWxkTm9kZXMgPSBbIC4uLmNoaWxkTm9kZUxpc3QgXSxcbiAgICAgICAgICBjaGlsZE5vZGVzSW5jbHVkZXNOb2RlcyA9IG5vZGVzLnNvbWUoKG5vZGUpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGNoaWxkTm9kZXNJbmNsdWRlc05vZGUgPSBjaGlsZE5vZGVzLmluY2x1ZGVzKG5vZGUpO1xuXG4gICAgICAgICAgICBpZiAoY2hpbGROb2Rlc0luY2x1ZGVzTm9kZSkge1xuICAgICAgICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9KTtcblxuICAgIGlmICghY2hpbGROb2Rlc0luY2x1ZGVzTm9kZXMpIHtcbiAgICAgIHJldHVybiB0cnVlO1xuICAgIH1cbiAgfSk7XG5cbiAgY29uc3QgbGVhZk5vZGVzID0gbm9kZXM7ICAvLy9cblxuICByZXR1cm4gbGVhZk5vZGVzO1xufVxuIl0sIm5hbWVzIjpbImxlYWZOb2Rlc0Zyb21Ob2RlTGlzdCIsImZpbHRlciIsImFycmF5VXRpbGl0aWVzIiwibm9kZUxpc3QiLCJub2RlcyIsIm5vZGUiLCJjaGlsZE5vZGVzIiwiY2hpbGROb2RlTGlzdCIsImNoaWxkTm9kZXNJbmNsdWRlc05vZGVzIiwic29tZSIsImNoaWxkTm9kZXNJbmNsdWRlc05vZGUiLCJpbmNsdWRlcyIsImxlYWZOb2RlcyJdLCJyYW5nZU1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyIsIm1hcHBpbmdzIjoiQUFBQTs7OzsrQkFNZ0JBOzs7ZUFBQUE7Ozt5QkFKZTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFL0IsSUFBTSxBQUFFQyxTQUFXQyx5QkFBYyxDQUF6QkQ7QUFFRCxTQUFTRCxzQkFBc0JHLFFBQVE7SUFDNUMsSUFBTUMsUUFBVSxxQkFBR0Q7SUFFbkJGLE9BQU9HLE9BQU8sU0FBQ0M7UUFDYixJQUFRQyxBQUFZQyxnQkFBa0JGLEtBQTlCQyxZQUNGQSxhQUFlLHFCQUFHQyxnQkFDbEJDLDBCQUEwQkosTUFBTUssSUFBSSxDQUFDLFNBQUNKO1lBQ3BDLElBQU1LLHlCQUF5QkosV0FBV0ssUUFBUSxDQUFDTjtZQUVuRCxJQUFJSyx3QkFBd0I7Z0JBQzFCLE9BQU87WUFDVDtRQUNGO1FBRU4sSUFBSSxDQUFDRix5QkFBeUI7WUFDNUIsT0FBTztRQUNUO0lBQ0Y7SUFFQSxJQUFNSSxZQUFZUixPQUFRLEdBQUc7SUFFN0IsT0FBT1E7QUFDVCJ9
|