highmark-cli 0.0.135 → 0.0.138
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/client.js +1376 -449
- package/lib/client.js +4 -6
- package/lib/constants.js +37 -25
- package/lib/customEventTypes.js +40 -4
- package/lib/mixins/touch.js +346 -71
- package/lib/position/relative.js +97 -0
- package/lib/position.js +8 -36
- package/lib/selectors.js +26 -0
- package/lib/style.js +13 -0
- package/lib/utilities/element.js +6 -3
- package/lib/utilities/positions.js +143 -0
- package/lib/view/div/leaf.js +20 -16
- package/lib/view/div/menu.js +238 -0
- package/lib/view.js +268 -68
- package/package.json +5 -5
- package/src/client.js +2 -6
- package/src/constants.js +11 -8
- package/src/customEventTypes.js +10 -1
- package/src/mixins/touch.js +556 -78
- package/src/position/relative.js +63 -0
- package/src/position.js +10 -48
- package/src/selectors.js +5 -0
- package/src/style.js +3 -0
- package/src/utilities/element.js +7 -2
- package/src/utilities/positions.js +127 -0
- package/src/view/div/leaf.js +23 -26
- package/src/view/div/menu.js +62 -0
- package/src/view.js +315 -76
- package/template/default.html +10 -4
- package/lib/mixins/event.js +0 -46
- package/lib/velocity.js +0 -82
- package/src/mixins/event.js +0 -56
- package/src/velocity.js +0 -45
package/src/view.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
import withStyle from "easy-with-style";
|
|
4
|
+
|
|
3
5
|
import { keyCodes } from "necessary";
|
|
4
6
|
import { Element, window } from "easy";
|
|
5
7
|
|
|
6
8
|
import LeafDiv from "./view/div/leaf";
|
|
9
|
+
import MenuDiv from "./view/div/menu";
|
|
10
|
+
import touchMixins from "./mixins/touch";
|
|
7
11
|
|
|
8
12
|
import { leafNodesFromNodeList } from "./utilities/tree";
|
|
9
13
|
import { elementsFromDOMElements } from "./utilities/element";
|
|
10
|
-
import {
|
|
14
|
+
import { VIEW_CHILD_DIVS_SELECTOR } from "./selectors";
|
|
15
|
+
import { SHOW_DELAY, ZOOM_RATIO, SCROLL_DELAY, UP_DIRECTION, DECELERATION, DOWN_DIRECTION, MENU_DIV_SWIPE_BOTTOM } from "./constants";
|
|
11
16
|
|
|
12
17
|
const { ENTER_KEY_CODE,
|
|
13
18
|
ESCAPE_KEY_CODE,
|
|
@@ -17,47 +22,136 @@ const { ENTER_KEY_CODE,
|
|
|
17
22
|
ARROW_LEFT_KEY_CODE,
|
|
18
23
|
ARROW_RIGHT_KEY_CODE } = keyCodes;
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
class View extends Element {
|
|
26
|
+
doubleTapCustomHandler = (event, element) => {
|
|
27
|
+
this.enableNativeGestures();
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
pinchStartCustomHandler = (event, element) => {
|
|
31
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
32
|
+
|
|
33
|
+
if (nativeGesturesEnabled) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const zoom = this.getZoom(),
|
|
38
|
+
startZoom = zoom; ///
|
|
39
|
+
|
|
40
|
+
this.setStartZoom(startZoom);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
pinchMoveCustomHandler = (event, element, ratio) => {
|
|
44
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
45
|
+
|
|
46
|
+
if (nativeGesturesEnabled) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const startZoom = this.getStartZoom(),
|
|
51
|
+
zoom = startZoom * Math.sqrt(ratio);
|
|
52
|
+
|
|
53
|
+
this.setZoom(zoom);
|
|
54
|
+
|
|
55
|
+
this.zoom(zoom);
|
|
56
|
+
}
|
|
57
|
+
|
|
21
58
|
swipeRightCustomHandler = (event, element) => {
|
|
22
|
-
const
|
|
59
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
23
60
|
|
|
24
|
-
if (
|
|
61
|
+
if (nativeGesturesEnabled) {
|
|
25
62
|
return;
|
|
26
63
|
}
|
|
27
64
|
|
|
28
|
-
this.disableSwipes();
|
|
29
65
|
this.showLeftLeafDiv();
|
|
30
|
-
this.waitToEnableSwipes();
|
|
31
66
|
}
|
|
32
67
|
|
|
33
68
|
swipeLeftCustomHandler = (event, element) => {
|
|
34
|
-
const
|
|
69
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
35
70
|
|
|
36
|
-
if (
|
|
71
|
+
if (nativeGesturesEnabled) {
|
|
37
72
|
return;
|
|
38
73
|
}
|
|
39
74
|
|
|
40
|
-
this.disableSwipes();
|
|
41
75
|
this.showRightLeftDiv();
|
|
42
|
-
this.waitToEnableSwipes();
|
|
43
76
|
}
|
|
44
77
|
|
|
45
|
-
|
|
46
|
-
|
|
78
|
+
swipeDownCustomHandler = (event, element, top, left, speed) => {
|
|
79
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
80
|
+
|
|
81
|
+
if (nativeGesturesEnabled) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
const direction = DOWN_DIRECTION;
|
|
86
|
+
|
|
87
|
+
this.scroll(speed, direction);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
swipeUpCustomHandler = (event, element, top, left, speed) => {
|
|
91
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
92
|
+
|
|
93
|
+
if (nativeGesturesEnabled) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const height = this.getHeight(),
|
|
98
|
+
bottom = height - top;
|
|
99
|
+
|
|
100
|
+
if (bottom < MENU_DIV_SWIPE_BOTTOM) {
|
|
101
|
+
this.showMenuDiv();
|
|
102
|
+
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
const direction = UP_DIRECTION;
|
|
107
|
+
|
|
108
|
+
this.scroll(speed, direction);
|
|
47
109
|
}
|
|
48
110
|
|
|
49
|
-
|
|
50
|
-
const
|
|
51
|
-
width = this.getWidth(),
|
|
52
|
-
clickWidthRatio = pageX / width;
|
|
111
|
+
dragStartCustomHandler = (event, element) => {
|
|
112
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
53
113
|
|
|
54
|
-
if (
|
|
55
|
-
|
|
114
|
+
if (nativeGesturesEnabled) {
|
|
115
|
+
return;
|
|
56
116
|
}
|
|
57
117
|
|
|
58
|
-
|
|
59
|
-
|
|
118
|
+
const scrollTop = this.getScrollTop(),
|
|
119
|
+
startScrollTop = scrollTop; ///
|
|
120
|
+
|
|
121
|
+
this.setStartScrollTop(startScrollTop);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
dragDownCustomHandler = (event, element, top, left) => {
|
|
125
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
126
|
+
|
|
127
|
+
if (nativeGesturesEnabled) {
|
|
128
|
+
return;
|
|
60
129
|
}
|
|
130
|
+
|
|
131
|
+
const startScrollTop = this.getStartScrollTop(),
|
|
132
|
+
scrollTop = startScrollTop - top;
|
|
133
|
+
|
|
134
|
+
this.setScrollTop(scrollTop);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
dragUpCustomHandler = (event, element, top, left) => {
|
|
138
|
+
const nativeGesturesEnabled = this.areNativeGesturesEnabled();
|
|
139
|
+
|
|
140
|
+
if (nativeGesturesEnabled) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
const startScrollTop = this.getStartScrollTop(),
|
|
145
|
+
scrollTop = startScrollTop - top;
|
|
146
|
+
|
|
147
|
+
this.setScrollTop(scrollTop);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
tapCustomHandler = (event, element) => {
|
|
151
|
+
|
|
152
|
+
alert("view tap...")
|
|
153
|
+
|
|
154
|
+
this.disableNativeGestures();
|
|
61
155
|
}
|
|
62
156
|
|
|
63
157
|
keyDownHandler = (event, element) => {
|
|
@@ -68,8 +162,6 @@ export default class View extends Element {
|
|
|
68
162
|
case ARROW_RIGHT_KEY_CODE: {
|
|
69
163
|
this.showRightLeftDiv();
|
|
70
164
|
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
|
|
73
165
|
break;
|
|
74
166
|
}
|
|
75
167
|
|
|
@@ -77,8 +169,6 @@ export default class View extends Element {
|
|
|
77
169
|
case ARROW_LEFT_KEY_CODE: {
|
|
78
170
|
this.showLeftLeafDiv();
|
|
79
171
|
|
|
80
|
-
event.preventDefault();
|
|
81
|
-
|
|
82
172
|
break;
|
|
83
173
|
}
|
|
84
174
|
|
|
@@ -91,25 +181,81 @@ export default class View extends Element {
|
|
|
91
181
|
case ARROW_UP_KEY_CODE: {
|
|
92
182
|
this.showFirstLeftDiv();
|
|
93
183
|
|
|
94
|
-
event.preventDefault();
|
|
95
|
-
|
|
96
184
|
break;
|
|
97
185
|
}
|
|
98
186
|
|
|
99
187
|
case ARROW_DOWN_KEY_CODE: {
|
|
100
188
|
this.showLastLeafDiv();
|
|
101
189
|
|
|
102
|
-
event.preventDefault();
|
|
103
|
-
|
|
104
190
|
break;
|
|
105
191
|
}
|
|
106
192
|
}
|
|
107
193
|
}
|
|
108
194
|
|
|
195
|
+
zoomOut() {
|
|
196
|
+
let zoom = this.getZoom();
|
|
197
|
+
|
|
198
|
+
zoom /= ZOOM_RATIO;
|
|
199
|
+
|
|
200
|
+
this.setZoom(zoom);
|
|
201
|
+
|
|
202
|
+
this.zoom(zoom);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
zoomIn() {
|
|
206
|
+
let zoom = this.getZoom();
|
|
207
|
+
|
|
208
|
+
zoom *= ZOOM_RATIO;
|
|
209
|
+
|
|
210
|
+
this.setZoom(zoom);
|
|
211
|
+
|
|
212
|
+
this.zoom(zoom);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
zoom(zoom) {
|
|
216
|
+
const displayedLeafDiv = this.findDisplayedLeafDiv();
|
|
217
|
+
|
|
218
|
+
displayedLeafDiv.zoom(zoom);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
scroll(speed, direction) {
|
|
222
|
+
let scrollTop = this.getScrollTop();
|
|
223
|
+
|
|
224
|
+
scrollTop += speed * SCROLL_DELAY;
|
|
225
|
+
|
|
226
|
+
this.setScrollTop(scrollTop);
|
|
227
|
+
|
|
228
|
+
let interval = this.getInterval();
|
|
229
|
+
|
|
230
|
+
if (interval !== null) {
|
|
231
|
+
clearInterval(interval);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
interval = setInterval(() => {
|
|
235
|
+
speed = speed - direction * DECELERATION;
|
|
236
|
+
|
|
237
|
+
if ((speed * direction) < 0) {
|
|
238
|
+
clearInterval(interval);
|
|
239
|
+
|
|
240
|
+
interval = null;
|
|
241
|
+
|
|
242
|
+
this.setInterval(interval);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
let scrollTop = this.getScrollTop();
|
|
246
|
+
|
|
247
|
+
scrollTop += speed * SCROLL_DELAY;
|
|
248
|
+
|
|
249
|
+
this.setScrollTop(scrollTop);
|
|
250
|
+
}, SCROLL_DELAY);
|
|
251
|
+
|
|
252
|
+
this.setInterval(interval);
|
|
253
|
+
}
|
|
254
|
+
|
|
109
255
|
showFirstLeftDiv() {
|
|
110
|
-
const
|
|
256
|
+
const displayedLeafDiv = this.findDisplayedLeafDiv(),
|
|
111
257
|
leafDivs = this.getLeafDivs(),
|
|
112
|
-
index = leafDivs.indexOf(
|
|
258
|
+
index = leafDivs.indexOf(displayedLeafDiv),
|
|
113
259
|
nextIndex = 0,
|
|
114
260
|
previousIndex = index; ///
|
|
115
261
|
|
|
@@ -117,9 +263,9 @@ export default class View extends Element {
|
|
|
117
263
|
}
|
|
118
264
|
|
|
119
265
|
showLeftLeafDiv() {
|
|
120
|
-
const
|
|
266
|
+
const displayedLeafDiv = this.findDisplayedLeafDiv(),
|
|
121
267
|
leafDivs = this.getLeafDivs(),
|
|
122
|
-
index = leafDivs.indexOf(
|
|
268
|
+
index = leafDivs.indexOf(displayedLeafDiv),
|
|
123
269
|
nextIndex = index - 1,
|
|
124
270
|
previousIndex = index; ///
|
|
125
271
|
|
|
@@ -127,9 +273,9 @@ export default class View extends Element {
|
|
|
127
273
|
}
|
|
128
274
|
|
|
129
275
|
showRightLeftDiv() {
|
|
130
|
-
const
|
|
276
|
+
const displayedLeafDiv = this.findDisplayedLeafDiv(),
|
|
131
277
|
leafDivs = this.getLeafDivs(),
|
|
132
|
-
index = leafDivs.indexOf(
|
|
278
|
+
index = leafDivs.indexOf(displayedLeafDiv),
|
|
133
279
|
nextIndex = index + 1,
|
|
134
280
|
previousIndex = index; ///
|
|
135
281
|
|
|
@@ -137,10 +283,11 @@ export default class View extends Element {
|
|
|
137
283
|
}
|
|
138
284
|
|
|
139
285
|
showLastLeafDiv() {
|
|
140
|
-
const
|
|
286
|
+
const displayedLeafDiv = this.findDisplayedLeafDiv(),
|
|
141
287
|
leafDivs = this.getLeafDivs(),
|
|
142
|
-
index = leafDivs.indexOf(
|
|
143
|
-
|
|
288
|
+
index = leafDivs.indexOf(displayedLeafDiv),
|
|
289
|
+
leafDivsLength = leafDivs.length,
|
|
290
|
+
nextIndex = leafDivsLength - 1,
|
|
144
291
|
previousIndex = index; ///
|
|
145
292
|
|
|
146
293
|
this.showNextLeafDiv(nextIndex, previousIndex);
|
|
@@ -152,16 +299,31 @@ export default class View extends Element {
|
|
|
152
299
|
previousLeafDiv = leafDivs[previousIndex];
|
|
153
300
|
|
|
154
301
|
if ((nextIndex === -1) || (nextIndex === previousIndex) || (nextIndex === leafDivsLength)) {
|
|
155
|
-
previousLeafDiv.wiggle();
|
|
156
|
-
|
|
157
302
|
return;
|
|
158
303
|
}
|
|
159
304
|
|
|
160
|
-
|
|
305
|
+
previousLeafDiv.hide();
|
|
306
|
+
|
|
307
|
+
const nextLeafDiv = leafDivs[nextIndex],
|
|
308
|
+
zoom = this.getZoom();
|
|
161
309
|
|
|
162
|
-
nextLeafDiv.
|
|
310
|
+
nextLeafDiv.zoom(zoom);
|
|
163
311
|
|
|
164
|
-
|
|
312
|
+
setTimeout(() => {
|
|
313
|
+
const scrollTop = 0;
|
|
314
|
+
|
|
315
|
+
nextLeafDiv.setScrollTop(scrollTop);
|
|
316
|
+
|
|
317
|
+
nextLeafDiv.show();
|
|
318
|
+
}, SHOW_DELAY);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
enableNativeGestures() {
|
|
322
|
+
this.addClass("native-gestures");
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
disableNativeGestures() {
|
|
326
|
+
this.removeClass("native-gestures");
|
|
165
327
|
}
|
|
166
328
|
|
|
167
329
|
forEachLeafDiv(callback) {
|
|
@@ -170,37 +332,37 @@ export default class View extends Element {
|
|
|
170
332
|
leafDivs.forEach(callback);
|
|
171
333
|
}
|
|
172
334
|
|
|
173
|
-
|
|
335
|
+
findDisplayedLeafDiv() {
|
|
174
336
|
const leafDivs = this.getLeafDivs(),
|
|
175
|
-
|
|
176
|
-
const
|
|
337
|
+
displayedLeafDiv = leafDivs.find((leafDiv) => {
|
|
338
|
+
const displayed = leafDiv.isDisplayed();
|
|
177
339
|
|
|
178
|
-
if (
|
|
340
|
+
if (displayed) {
|
|
179
341
|
return true;
|
|
180
342
|
}
|
|
181
343
|
});
|
|
182
344
|
|
|
183
|
-
return
|
|
345
|
+
return displayedLeafDiv;
|
|
184
346
|
}
|
|
185
347
|
|
|
186
|
-
|
|
187
|
-
const
|
|
348
|
+
retrieveLeafDivs() {
|
|
349
|
+
const viewChildDivDOMElementNodeList = document.querySelectorAll(VIEW_CHILD_DIVS_SELECTOR),
|
|
350
|
+
viewChildDivDOMElements = leafNodesFromNodeList(viewChildDivDOMElementNodeList), ///
|
|
351
|
+
leafDivs = elementsFromDOMElements(viewChildDivDOMElements, LeafDiv);
|
|
188
352
|
|
|
189
|
-
|
|
353
|
+
return leafDivs;
|
|
190
354
|
}
|
|
191
355
|
|
|
192
|
-
|
|
193
|
-
const
|
|
356
|
+
getZoom() {
|
|
357
|
+
const { zoom } = this.getState();
|
|
194
358
|
|
|
195
|
-
|
|
359
|
+
return zoom;
|
|
196
360
|
}
|
|
197
361
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
this.enableSwipes();
|
|
203
|
-
}, delay);
|
|
362
|
+
setZoom(zoom) {
|
|
363
|
+
this.updateState({
|
|
364
|
+
zoom
|
|
365
|
+
});
|
|
204
366
|
}
|
|
205
367
|
|
|
206
368
|
getLeafDivs() {
|
|
@@ -215,49 +377,111 @@ export default class View extends Element {
|
|
|
215
377
|
});
|
|
216
378
|
}
|
|
217
379
|
|
|
218
|
-
|
|
219
|
-
const {
|
|
380
|
+
getInterval() {
|
|
381
|
+
const { interval } = this.getState();
|
|
220
382
|
|
|
221
|
-
return
|
|
383
|
+
return interval;
|
|
222
384
|
}
|
|
223
385
|
|
|
224
|
-
|
|
386
|
+
setInterval(interval) {
|
|
225
387
|
this.updateState({
|
|
226
|
-
|
|
388
|
+
interval
|
|
227
389
|
});
|
|
228
390
|
}
|
|
229
391
|
|
|
230
|
-
|
|
231
|
-
const
|
|
232
|
-
|
|
233
|
-
|
|
392
|
+
getStartZoom() {
|
|
393
|
+
const { startZoom } = this.getState();
|
|
394
|
+
|
|
395
|
+
return startZoom;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
setStartZoom(startZoom) {
|
|
399
|
+
this.updateState({
|
|
400
|
+
startZoom
|
|
401
|
+
});
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
getStartScrollTop() {
|
|
405
|
+
const { startScrollTop } = this.getState();
|
|
406
|
+
|
|
407
|
+
return startScrollTop;
|
|
408
|
+
}
|
|
234
409
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
410
|
+
setStartScrollTop(startScrollTop) {
|
|
411
|
+
this.updateState({
|
|
412
|
+
startScrollTop
|
|
413
|
+
});
|
|
414
|
+
}
|
|
238
415
|
|
|
239
|
-
|
|
240
|
-
|
|
416
|
+
areNativeGesturesEnabled() {
|
|
417
|
+
const nativeGesturesEnabled = this.hasClass("native-gestures");
|
|
418
|
+
|
|
419
|
+
return nativeGesturesEnabled;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
setInitialState() {
|
|
423
|
+
const zoom = 1,
|
|
424
|
+
leafDivs = this.retrieveLeafDivs(),
|
|
425
|
+
interval = null,
|
|
426
|
+
startZoom = null,
|
|
427
|
+
startScrollTop = null;
|
|
241
428
|
|
|
242
429
|
this.setState({
|
|
430
|
+
zoom,
|
|
243
431
|
leafDivs,
|
|
244
|
-
|
|
432
|
+
interval,
|
|
433
|
+
startZoom,
|
|
434
|
+
startScrollTop
|
|
245
435
|
});
|
|
246
436
|
}
|
|
247
437
|
|
|
248
438
|
didMount() {
|
|
249
|
-
this.
|
|
439
|
+
this.enableTouch();
|
|
440
|
+
|
|
441
|
+
this.onCustomTap(this.tapCustomHandler);
|
|
442
|
+
this.onCustomDragUp(this.dragUpCustomHandler);
|
|
443
|
+
this.onCustomDragDown(this.dragDownCustomHandler);
|
|
444
|
+
this.onCustomDragStart(this.dragStartCustomHandler);
|
|
445
|
+
this.onCustomSwipeUp(this.swipeUpCustomHandler);
|
|
446
|
+
this.onCustomSwipeDown(this.swipeDownCustomHandler);
|
|
447
|
+
this.onCustomSwipeLeft(this.swipeLeftCustomHandler);
|
|
448
|
+
this.onCustomSwipeRight(this.swipeRightCustomHandler);
|
|
449
|
+
this.onCustomPinchMove(this.pinchMoveCustomHandler);
|
|
450
|
+
this.onCustomPinchStart(this.pinchStartCustomHandler);
|
|
451
|
+
this.onCustomDoubleTap(this.doubleTapCustomHandler);
|
|
250
452
|
|
|
251
453
|
window.onKeyDown(this.keyDownHandler);
|
|
252
454
|
}
|
|
253
455
|
|
|
254
456
|
willUnmount() {
|
|
255
|
-
this.
|
|
457
|
+
this.offCustomTap(this.tapCustomHandler);
|
|
458
|
+
this.offCustomDragUp(this.dragUpCustomHandler);
|
|
459
|
+
this.offCustomDragDown(this.dragDownCustomHandler);
|
|
460
|
+
this.offCustomDragStart(this.dragStartCustomHandler);
|
|
461
|
+
this.offCustomSwipeUp(this.swipeUpCustomHandler);
|
|
462
|
+
this.offCustomSwipeDown(this.swipeDownCustomHandler);
|
|
463
|
+
this.offCustomSwipeLeft(this.swipeLeftCustomHandler);
|
|
464
|
+
this.offCustomSwipeRight(this.swipeRightCustomHandler);
|
|
465
|
+
this.offCustomPinchMove(this.pinchMoveCustomHandler);
|
|
466
|
+
this.offCustomPinchStart(this.pinchStartCustomHandler);
|
|
467
|
+
this.offCustomDoubleTap(this.doubleTapCustomHandler);
|
|
468
|
+
|
|
469
|
+
this.disableTouch();
|
|
256
470
|
|
|
257
471
|
window.offKeyDown(this.keyDownHandler);
|
|
258
472
|
}
|
|
259
473
|
|
|
474
|
+
childElements() {
|
|
475
|
+
return (
|
|
476
|
+
|
|
477
|
+
<MenuDiv/>
|
|
478
|
+
|
|
479
|
+
);
|
|
480
|
+
}
|
|
481
|
+
|
|
260
482
|
initialise() {
|
|
483
|
+
this.assignContext();
|
|
484
|
+
|
|
261
485
|
this.setInitialState();
|
|
262
486
|
|
|
263
487
|
this.forEachLeafDiv((leafDiv, index) => {
|
|
@@ -273,3 +497,18 @@ export default class View extends Element {
|
|
|
273
497
|
className: "view"
|
|
274
498
|
};
|
|
275
499
|
}
|
|
500
|
+
|
|
501
|
+
Object.assign(View.prototype, touchMixins);
|
|
502
|
+
|
|
503
|
+
export default withStyle(View)`
|
|
504
|
+
|
|
505
|
+
width: 100%;
|
|
506
|
+
height: 100%;
|
|
507
|
+
overflow: hidden;
|
|
508
|
+
touch-action: none;
|
|
509
|
+
|
|
510
|
+
.native-gestures {
|
|
511
|
+
touch-action: auto;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
`;
|
package/template/default.html
CHANGED
|
@@ -30,10 +30,16 @@
|
|
|
30
30
|
*,
|
|
31
31
|
*::after,
|
|
32
32
|
*::before {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
border: 0;
|
|
34
|
+
margin: 0;
|
|
35
|
+
padding: 0;
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
html,
|
|
40
|
+
html > body {
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100%;
|
|
37
43
|
}
|
|
38
44
|
|
|
39
45
|
</style>
|
package/lib/mixins/event.js
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "default", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return _default;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
var _eventTypes = require("../eventTypes");
|
|
12
|
-
function onTouchStart(touchStartHandler) {
|
|
13
|
-
var eventType = _eventTypes.TOUCHSTART_EVENT_TYPE, handler = touchStartHandler; ///
|
|
14
|
-
this.onEvent(eventType, handler);
|
|
15
|
-
}
|
|
16
|
-
function offTouchStart(touchStartHandler) {
|
|
17
|
-
var eventType = _eventTypes.TOUCHSTART_EVENT_TYPE, handler = touchStartHandler; ///
|
|
18
|
-
this.offEvent(eventType, handler);
|
|
19
|
-
}
|
|
20
|
-
function onTouchMove(touchStartHandler) {
|
|
21
|
-
var eventType = _eventTypes.TOUCHMOVE_EVENT_TYPE, handler = touchStartHandler; ///
|
|
22
|
-
this.onEvent(eventType, handler);
|
|
23
|
-
}
|
|
24
|
-
function offTouchMove(touchStartHandler) {
|
|
25
|
-
var eventType = _eventTypes.TOUCHMOVE_EVENT_TYPE, handler = touchStartHandler; ///
|
|
26
|
-
this.offEvent(eventType, handler);
|
|
27
|
-
}
|
|
28
|
-
function onTouchEnd(touchStartHandler) {
|
|
29
|
-
var eventType = _eventTypes.TOUCHEND_EVENT_TYPE, handler = touchStartHandler; ///
|
|
30
|
-
this.onEvent(eventType, handler);
|
|
31
|
-
}
|
|
32
|
-
function offTouchEnd(touchStartHandler) {
|
|
33
|
-
var eventType = _eventTypes.TOUCHEND_EVENT_TYPE, handler = touchStartHandler; ///
|
|
34
|
-
this.offEvent(eventType, handler);
|
|
35
|
-
}
|
|
36
|
-
var eventMixins = {
|
|
37
|
-
onTouchStart: onTouchStart,
|
|
38
|
-
offTouchStart: offTouchStart,
|
|
39
|
-
onTouchMove: onTouchMove,
|
|
40
|
-
offTouchMove: offTouchMove,
|
|
41
|
-
onTouchEnd: onTouchEnd,
|
|
42
|
-
offTouchEnd: offTouchEnd
|
|
43
|
-
};
|
|
44
|
-
var _default = eventMixins;
|
|
45
|
-
|
|
46
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9taXhpbnMvZXZlbnQuanMiXSwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5cbmltcG9ydCB7IFRPVUNIU1RBUlRfRVZFTlRfVFlQRSwgVE9VQ0hNT1ZFX0VWRU5UX1RZUEUsIFRPVUNIRU5EX0VWRU5UX1RZUEUgfSBmcm9tIFwiLi4vZXZlbnRUeXBlc1wiO1xuXG5mdW5jdGlvbiBvblRvdWNoU3RhcnQodG91Y2hTdGFydEhhbmRsZXIpIHtcbiAgY29uc3QgZXZlbnRUeXBlID0gVE9VQ0hTVEFSVF9FVkVOVF9UWVBFLFxuICAgICAgICBoYW5kbGVyID0gdG91Y2hTdGFydEhhbmRsZXI7ICAvLy9cblxuICB0aGlzLm9uRXZlbnQoZXZlbnRUeXBlLCBoYW5kbGVyKTtcbn1cblxuZnVuY3Rpb24gb2ZmVG91Y2hTdGFydCh0b3VjaFN0YXJ0SGFuZGxlcikge1xuICBjb25zdCBldmVudFR5cGUgPSBUT1VDSFNUQVJUX0VWRU5UX1RZUEUsXG4gICAgICAgIGhhbmRsZXIgPSB0b3VjaFN0YXJ0SGFuZGxlcjsgIC8vL1xuXG4gIHRoaXMub2ZmRXZlbnQoZXZlbnRUeXBlLCBoYW5kbGVyKTtcbn1cblxuZnVuY3Rpb24gb25Ub3VjaE1vdmUodG91Y2hTdGFydEhhbmRsZXIpIHtcbiAgY29uc3QgZXZlbnRUeXBlID0gVE9VQ0hNT1ZFX0VWRU5UX1RZUEUsXG4gICAgICAgIGhhbmRsZXIgPSB0b3VjaFN0YXJ0SGFuZGxlcjsgIC8vL1xuXG4gIHRoaXMub25FdmVudChldmVudFR5cGUsIGhhbmRsZXIpO1xufVxuXG5mdW5jdGlvbiBvZmZUb3VjaE1vdmUodG91Y2hTdGFydEhhbmRsZXIpIHtcbiAgY29uc3QgZXZlbnRUeXBlID0gVE9VQ0hNT1ZFX0VWRU5UX1RZUEUsXG4gICAgICAgIGhhbmRsZXIgPSB0b3VjaFN0YXJ0SGFuZGxlcjsgIC8vL1xuXG4gIHRoaXMub2ZmRXZlbnQoZXZlbnRUeXBlLCBoYW5kbGVyKTtcbn1cblxuZnVuY3Rpb24gb25Ub3VjaEVuZCh0b3VjaFN0YXJ0SGFuZGxlcikge1xuICBjb25zdCBldmVudFR5cGUgPSBUT1VDSEVORF9FVkVOVF9UWVBFLFxuICAgICAgICBoYW5kbGVyID0gdG91Y2hTdGFydEhhbmRsZXI7ICAvLy9cblxuICB0aGlzLm9uRXZlbnQoZXZlbnRUeXBlLCBoYW5kbGVyKTtcbn1cblxuZnVuY3Rpb24gb2ZmVG91Y2hFbmQodG91Y2hTdGFydEhhbmRsZXIpIHtcbiAgY29uc3QgZXZlbnRUeXBlID0gVE9VQ0hFTkRfRVZFTlRfVFlQRSxcbiAgICAgICAgaGFuZGxlciA9IHRvdWNoU3RhcnRIYW5kbGVyOyAgLy8vXG5cbiAgdGhpcy5vZmZFdmVudChldmVudFR5cGUsIGhhbmRsZXIpO1xufVxuXG5jb25zdCBldmVudE1peGlucyA9IHtcbiAgb25Ub3VjaFN0YXJ0LFxuICBvZmZUb3VjaFN0YXJ0LFxuICBvblRvdWNoTW92ZSxcbiAgb2ZmVG91Y2hNb3ZlLFxuICBvblRvdWNoRW5kLFxuICBvZmZUb3VjaEVuZFxufTtcblxuZXhwb3J0IGRlZmF1bHQgZXZlbnRNaXhpbnM7XG4iXSwibmFtZXMiOlsib25Ub3VjaFN0YXJ0IiwidG91Y2hTdGFydEhhbmRsZXIiLCJldmVudFR5cGUiLCJUT1VDSFNUQVJUX0VWRU5UX1RZUEUiLCJoYW5kbGVyIiwib25FdmVudCIsIm9mZlRvdWNoU3RhcnQiLCJvZmZFdmVudCIsIm9uVG91Y2hNb3ZlIiwiVE9VQ0hNT1ZFX0VWRU5UX1RZUEUiLCJvZmZUb3VjaE1vdmUiLCJvblRvdWNoRW5kIiwiVE9VQ0hFTkRfRVZFTlRfVFlQRSIsIm9mZlRvdWNoRW5kIiwiZXZlbnRNaXhpbnMiXSwicmFuZ2VNYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsiLCJtYXBwaW5ncyI6IkFBQUE7Ozs7K0JBdURBOzs7ZUFBQTs7OzBCQXJEaUY7QUFFakYsU0FBU0EsYUFBYUMsaUJBQWlCO0lBQ3JDLElBQU1DLFlBQVlDLGlDQUFxQixFQUNqQ0MsVUFBVUgsbUJBQW9CLEdBQUc7SUFFdkMsSUFBSSxDQUFDSSxPQUFPLENBQUNILFdBQVdFO0FBQzFCO0FBRUEsU0FBU0UsY0FBY0wsaUJBQWlCO0lBQ3RDLElBQU1DLFlBQVlDLGlDQUFxQixFQUNqQ0MsVUFBVUgsbUJBQW9CLEdBQUc7SUFFdkMsSUFBSSxDQUFDTSxRQUFRLENBQUNMLFdBQVdFO0FBQzNCO0FBRUEsU0FBU0ksWUFBWVAsaUJBQWlCO0lBQ3BDLElBQU1DLFlBQVlPLGdDQUFvQixFQUNoQ0wsVUFBVUgsbUJBQW9CLEdBQUc7SUFFdkMsSUFBSSxDQUFDSSxPQUFPLENBQUNILFdBQVdFO0FBQzFCO0FBRUEsU0FBU00sYUFBYVQsaUJBQWlCO0lBQ3JDLElBQU1DLFlBQVlPLGdDQUFvQixFQUNoQ0wsVUFBVUgsbUJBQW9CLEdBQUc7SUFFdkMsSUFBSSxDQUFDTSxRQUFRLENBQUNMLFdBQVdFO0FBQzNCO0FBRUEsU0FBU08sV0FBV1YsaUJBQWlCO0lBQ25DLElBQU1DLFlBQVlVLCtCQUFtQixFQUMvQlIsVUFBVUgsbUJBQW9CLEdBQUc7SUFFdkMsSUFBSSxDQUFDSSxPQUFPLENBQUNILFdBQVdFO0FBQzFCO0FBRUEsU0FBU1MsWUFBWVosaUJBQWlCO0lBQ3BDLElBQU1DLFlBQVlVLCtCQUFtQixFQUMvQlIsVUFBVUgsbUJBQW9CLEdBQUc7SUFFdkMsSUFBSSxDQUFDTSxRQUFRLENBQUNMLFdBQVdFO0FBQzNCO0FBRUEsSUFBTVUsY0FBYztJQUNsQmQsY0FBQUE7SUFDQU0sZUFBQUE7SUFDQUUsYUFBQUE7SUFDQUUsY0FBQUE7SUFDQUMsWUFBQUE7SUFDQUUsYUFBQUE7QUFDRjtJQUVBLFdBQWVDIn0=
|