@eva/plugin-a11y 2.0.0-beta.1 → 2.0.0-beta.3
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/dist/EVA.plugin.a11y.js +314 -516
- package/dist/EVA.plugin.a11y.min.js +1 -1
- package/dist/plugin-a11y.cjs.js +239 -385
- package/dist/plugin-a11y.cjs.prod.js +16 -1
- package/dist/plugin-a11y.esm.js +240 -386
- package/package.json +3 -3
package/dist/plugin-a11y.cjs.js
CHANGED
|
@@ -20,31 +20,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
20
20
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
21
21
|
and limitations under the License.
|
|
22
22
|
***************************************************************************** */
|
|
23
|
-
/* global Reflect, Promise */
|
|
24
|
-
|
|
25
|
-
var extendStatics = function(d, b) {
|
|
26
|
-
extendStatics = Object.setPrototypeOf ||
|
|
27
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
28
|
-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
29
|
-
return extendStatics(d, b);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
function __extends(d, b) {
|
|
33
|
-
extendStatics(d, b);
|
|
34
|
-
function __() { this.constructor = d; }
|
|
35
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
var __assign = function() {
|
|
39
|
-
__assign = Object.assign || function __assign(t) {
|
|
40
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
41
|
-
s = arguments[i];
|
|
42
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
43
|
-
}
|
|
44
|
-
return t;
|
|
45
|
-
};
|
|
46
|
-
return __assign.apply(this, arguments);
|
|
47
|
-
};
|
|
48
23
|
|
|
49
24
|
function __decorate(decorators, target, key, desc) {
|
|
50
25
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -60,117 +35,74 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
60
35
|
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
|
|
61
36
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
62
37
|
});
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function __generator(thisArg, body) {
|
|
66
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
67
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
68
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
69
|
-
function step(op) {
|
|
70
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
71
|
-
while (_) try {
|
|
72
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
73
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
74
|
-
switch (op[0]) {
|
|
75
|
-
case 0: case 1: t = op; break;
|
|
76
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
77
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
78
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
79
|
-
default:
|
|
80
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
81
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
82
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
83
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
84
|
-
if (t[2]) _.ops.pop();
|
|
85
|
-
_.trys.pop(); continue;
|
|
86
|
-
}
|
|
87
|
-
op = body.call(thisArg, _);
|
|
88
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
89
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
function __values(o) {
|
|
94
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
|
|
95
|
-
if (m) return m.call(o);
|
|
96
|
-
return {
|
|
97
|
-
next: function () {
|
|
98
|
-
if (o && i >= o.length) o = void 0;
|
|
99
|
-
return { value: o && o[i++], done: !o };
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
38
|
}
|
|
103
39
|
|
|
104
40
|
function uuid(len) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
for (
|
|
41
|
+
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
|
42
|
+
let uuid = [];
|
|
43
|
+
let radix = chars.length;
|
|
44
|
+
for (let i = 0; i < len; i++)
|
|
109
45
|
uuid[i] = chars[0 | (Math.random() * radix)];
|
|
110
46
|
return uuid.join('');
|
|
111
47
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
element.style.width = width
|
|
115
|
-
element.style.height = height
|
|
48
|
+
const setStyle = (element, style) => {
|
|
49
|
+
const { width, height, position, left = 0, top = 0, zIndex, pointerEvents, background } = style;
|
|
50
|
+
element.style.width = `${width}px`;
|
|
51
|
+
element.style.height = `${height}px`;
|
|
116
52
|
element.style.position = position;
|
|
117
|
-
element.style.left =
|
|
118
|
-
element.style.top =
|
|
119
|
-
element.style.zIndex =
|
|
53
|
+
element.style.left = `${left}`;
|
|
54
|
+
element.style.top = `${top}`;
|
|
55
|
+
element.style.zIndex = `${zIndex}`;
|
|
120
56
|
element.style.pointerEvents = pointerEvents;
|
|
121
57
|
element.style.background = background;
|
|
122
58
|
element.style.border = 'none';
|
|
123
59
|
element.style.overflow = 'hidden';
|
|
124
60
|
};
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
element.style.transform =
|
|
130
|
-
element.style.webkitTransform =
|
|
61
|
+
const setTransform = (element, transform, ratioX, ratioY) => {
|
|
62
|
+
const { worldTransform } = transform;
|
|
63
|
+
const { a, b, c, d, tx, ty } = worldTransform;
|
|
64
|
+
const matrix = `matrix(${a}, ${b}, ${c}, ${d}, ${tx * ratioX}, ${ty * ratioY})`;
|
|
65
|
+
element.style.transform = `${matrix}`;
|
|
66
|
+
element.style.webkitTransform = `${matrix}`;
|
|
131
67
|
element.style.transformOrigin = 'left top';
|
|
132
68
|
element.style.webkitTransformOrigin = 'left top';
|
|
133
69
|
};
|
|
134
70
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
_this.a11yId = "_" + uuid(6);
|
|
149
|
-
return _this;
|
|
71
|
+
class A11y extends eva_js.Component {
|
|
72
|
+
constructor(param) {
|
|
73
|
+
super();
|
|
74
|
+
Object.assign(this, param);
|
|
75
|
+
const { hint = '', event, delay = 0, attr = {}, role = '', props = {}, state = {} } = param;
|
|
76
|
+
this.hint = hint;
|
|
77
|
+
this.event = event;
|
|
78
|
+
this.delay = delay;
|
|
79
|
+
this.attr = attr;
|
|
80
|
+
this.role = role;
|
|
81
|
+
this.props = props;
|
|
82
|
+
this.state = state;
|
|
83
|
+
this.a11yId = `_${uuid(6)}`;
|
|
150
84
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}(eva_js.Component));
|
|
170
|
-
var A11y$1 = A11y;
|
|
85
|
+
}
|
|
86
|
+
A11y.componentName = 'A11y';
|
|
87
|
+
__decorate([
|
|
88
|
+
inspectorDecorator.type('boolean')
|
|
89
|
+
], A11y.prototype, "interactive", void 0);
|
|
90
|
+
__decorate([
|
|
91
|
+
inspectorDecorator.type('string')
|
|
92
|
+
], A11y.prototype, "hint", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
inspectorDecorator.type('number'),
|
|
95
|
+
inspectorDecorator.step(1)
|
|
96
|
+
], A11y.prototype, "delay", void 0);
|
|
97
|
+
__decorate([
|
|
98
|
+
inspectorDecorator.type('string')
|
|
99
|
+
], A11y.prototype, "role", void 0);
|
|
100
|
+
__decorate([
|
|
101
|
+
inspectorDecorator.type('string')
|
|
102
|
+
], A11y.prototype, "a11yId", void 0);
|
|
171
103
|
|
|
172
|
-
|
|
173
|
-
|
|
104
|
+
const POSITION = 'absolute';
|
|
105
|
+
const ZINDEX = 3;
|
|
174
106
|
exports.A11yActivate = void 0;
|
|
175
107
|
(function (A11yActivate) {
|
|
176
108
|
A11yActivate[A11yActivate["ENABLE"] = 0] = "ENABLE";
|
|
@@ -193,119 +125,90 @@ var ElementType;
|
|
|
193
125
|
ElementType["DIV"] = "div";
|
|
194
126
|
})(ElementType || (ElementType = {}));
|
|
195
127
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
['touchstart', 'touchend', 'tap'].forEach(function (name) {
|
|
128
|
+
const notAttr = ['hint', 'event', 'delay', 'attr', 'role', 'props', 'state', 'a11yId', 'name'];
|
|
129
|
+
const getEventFunc = function (event, gameObject, e) {
|
|
130
|
+
['touchstart', 'touchend', 'tap'].forEach(name => {
|
|
200
131
|
event.emit(name, {
|
|
201
|
-
stopPropagation:
|
|
132
|
+
stopPropagation: () => e.stopPropagation(),
|
|
202
133
|
data: {
|
|
203
|
-
position:
|
|
134
|
+
position: this.eventPosition,
|
|
204
135
|
},
|
|
205
|
-
gameObject
|
|
136
|
+
gameObject,
|
|
206
137
|
});
|
|
207
138
|
});
|
|
208
139
|
};
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
_this.zIndex = ZINDEX;
|
|
216
|
-
return _this;
|
|
140
|
+
let A11ySystem = class A11ySystem extends eva_js.System {
|
|
141
|
+
constructor(opt) {
|
|
142
|
+
super(opt);
|
|
143
|
+
this.cache = new Map();
|
|
144
|
+
this.eventCache = new Map();
|
|
145
|
+
this.zIndex = ZINDEX;
|
|
217
146
|
}
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
147
|
+
get ratioX() {
|
|
148
|
+
if (this._ratioX) {
|
|
149
|
+
return this._ratioX;
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
const success = this.setRatio();
|
|
153
|
+
if (success) {
|
|
221
154
|
return this._ratioX;
|
|
222
155
|
}
|
|
223
156
|
else {
|
|
224
|
-
|
|
225
|
-
if (success) {
|
|
226
|
-
return this._ratioX;
|
|
227
|
-
}
|
|
228
|
-
else {
|
|
229
|
-
return 0;
|
|
230
|
-
}
|
|
157
|
+
return 0;
|
|
231
158
|
}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
get ratioY() {
|
|
162
|
+
if (this._ratioY) {
|
|
163
|
+
return this._ratioY;
|
|
164
|
+
}
|
|
165
|
+
else {
|
|
166
|
+
const success = this.setRatio();
|
|
167
|
+
if (success) {
|
|
239
168
|
return this._ratioY;
|
|
240
169
|
}
|
|
241
170
|
else {
|
|
242
|
-
|
|
243
|
-
if (success) {
|
|
244
|
-
return this._ratioY;
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
return 0;
|
|
248
|
-
}
|
|
171
|
+
return 0;
|
|
249
172
|
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
this.zIndex = zIndex || this.zIndex;
|
|
264
|
-
_d = activate;
|
|
265
|
-
switch (_d) {
|
|
266
|
-
case exports.A11yActivate.CHECK: return [3, 1];
|
|
267
|
-
case exports.A11yActivate.DISABLE: return [3, 5];
|
|
268
|
-
case exports.A11yActivate.ENABLE: return [3, 6];
|
|
269
|
-
}
|
|
270
|
-
return [3, 7];
|
|
271
|
-
case 1:
|
|
272
|
-
_f.trys.push([1, 3, , 4]);
|
|
273
|
-
_e = this;
|
|
274
|
-
return [4, checkA11yOpen()];
|
|
275
|
-
case 2:
|
|
276
|
-
_e.activate = _f.sent();
|
|
277
|
-
return [3, 4];
|
|
278
|
-
case 3:
|
|
279
|
-
_f.sent();
|
|
280
|
-
this.activate = false;
|
|
281
|
-
return [3, 4];
|
|
282
|
-
case 4: return [3, 7];
|
|
283
|
-
case 5:
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
init(opt = {}) {
|
|
176
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
177
|
+
const { activate = exports.A11yActivate.CHECK, delay = 100, checkA11yOpen = () => Promise.resolve(false), zIndex } = opt;
|
|
178
|
+
this.delay = delay;
|
|
179
|
+
this.zIndex = zIndex || this.zIndex;
|
|
180
|
+
switch (activate) {
|
|
181
|
+
case exports.A11yActivate.CHECK:
|
|
182
|
+
try {
|
|
183
|
+
this.activate = yield checkA11yOpen();
|
|
184
|
+
}
|
|
185
|
+
catch (error) {
|
|
284
186
|
this.activate = false;
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
187
|
+
}
|
|
188
|
+
break;
|
|
189
|
+
case exports.A11yActivate.DISABLE:
|
|
190
|
+
this.activate = false;
|
|
191
|
+
break;
|
|
192
|
+
case exports.A11yActivate.ENABLE:
|
|
193
|
+
this.activate = true;
|
|
194
|
+
break;
|
|
195
|
+
}
|
|
196
|
+
this.debug = opt.debug || false;
|
|
197
|
+
if (this.debug) {
|
|
198
|
+
this.activate = true;
|
|
199
|
+
}
|
|
200
|
+
if (!this.activate)
|
|
201
|
+
return;
|
|
202
|
+
const div = document.createElement('div');
|
|
203
|
+
this.div = div;
|
|
204
|
+
if (this.game.canvas.parentNode) {
|
|
205
|
+
this.game.canvas.parentNode.insertBefore(this.div, this.game.canvas);
|
|
206
|
+
}
|
|
304
207
|
});
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
208
|
+
}
|
|
209
|
+
setRatio() {
|
|
210
|
+
const { width, height } = this.getCanvasBoundingClientRect();
|
|
211
|
+
const { renderWidth, renderHeight } = this.getRenderRect();
|
|
309
212
|
this._ratioX = width / renderWidth;
|
|
310
213
|
this._ratioY = height / renderHeight;
|
|
311
214
|
if (width || height) {
|
|
@@ -315,226 +218,178 @@ var A11ySystem = (function (_super) {
|
|
|
315
218
|
else {
|
|
316
219
|
return false;
|
|
317
220
|
}
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
return { renderWidth
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
return { width
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
top: top + pageYOffset + "px",
|
|
221
|
+
}
|
|
222
|
+
getRenderRect() {
|
|
223
|
+
const { params = { width: 300, height: 300 } } = this.game.getSystem(pluginRenderer.RendererSystem);
|
|
224
|
+
const { height: renderHeight, width: renderWidth } = params;
|
|
225
|
+
return { renderWidth, renderHeight };
|
|
226
|
+
}
|
|
227
|
+
getCanvasBoundingClientRect() {
|
|
228
|
+
const { width, height, left, top } = this.game.canvas.getBoundingClientRect();
|
|
229
|
+
return { width, height, left, top };
|
|
230
|
+
}
|
|
231
|
+
initDiv() {
|
|
232
|
+
const { pageXOffset, pageYOffset } = window;
|
|
233
|
+
const { width, height, left, top } = this.getCanvasBoundingClientRect();
|
|
234
|
+
const style = {
|
|
235
|
+
width,
|
|
236
|
+
height,
|
|
237
|
+
left: `${left + pageXOffset}px`,
|
|
238
|
+
top: `${top + pageYOffset}px`,
|
|
337
239
|
position: POSITION,
|
|
338
240
|
zIndex: this.zIndex,
|
|
339
241
|
pointerEvents: PointerEvents.NONE,
|
|
340
242
|
background: MaskBackground.NONE,
|
|
341
243
|
};
|
|
342
244
|
setStyle(this.div, style);
|
|
343
|
-
this.div.addEventListener('click',
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
245
|
+
this.div.addEventListener('click', e => {
|
|
246
|
+
const currentTarget = e.currentTarget;
|
|
247
|
+
const { left, top } = currentTarget.getBoundingClientRect();
|
|
248
|
+
const x = (e.pageX - left) / this.ratioX;
|
|
249
|
+
const y = (e.pageY - top) / this.ratioY;
|
|
250
|
+
this.eventPosition = { x, y };
|
|
349
251
|
}, true);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
changed.componentName === 'A11y' && this.change(changed);
|
|
371
|
-
break;
|
|
372
|
-
case eva_js.OBSERVER_TYPE.REMOVE:
|
|
373
|
-
changed.componentName === 'Event' && this.removeEvent(changed);
|
|
374
|
-
changed.componentName === 'A11y' && this.remove(changed);
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
379
|
-
finally {
|
|
380
|
-
try {
|
|
381
|
-
if (changes_1_1 && !changes_1_1.done && (_a = changes_1.return)) _a.call(changes_1);
|
|
382
|
-
}
|
|
383
|
-
finally { if (e_1) throw e_1.error; }
|
|
252
|
+
}
|
|
253
|
+
update() {
|
|
254
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
255
|
+
const changes = this.componentObserver.clear();
|
|
256
|
+
if (!this.activate) {
|
|
257
|
+
return;
|
|
258
|
+
}
|
|
259
|
+
for (const changed of changes) {
|
|
260
|
+
switch (changed.type) {
|
|
261
|
+
case eva_js.OBSERVER_TYPE.ADD:
|
|
262
|
+
changed.componentName === 'Event' && this.addEvent(changed.gameObject);
|
|
263
|
+
changed.componentName === 'A11y' && this.add(changed);
|
|
264
|
+
break;
|
|
265
|
+
case eva_js.OBSERVER_TYPE.CHANGE:
|
|
266
|
+
changed.componentName === 'Transform' && this.transformChange(changed);
|
|
267
|
+
changed.componentName === 'A11y' && this.change(changed);
|
|
268
|
+
break;
|
|
269
|
+
case eva_js.OBSERVER_TYPE.REMOVE:
|
|
270
|
+
changed.componentName === 'Event' && this.removeEvent(changed);
|
|
271
|
+
changed.componentName === 'A11y' && this.remove(changed);
|
|
384
272
|
}
|
|
385
|
-
|
|
386
|
-
});
|
|
273
|
+
}
|
|
387
274
|
});
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
|
|
275
|
+
}
|
|
276
|
+
change(changed) {
|
|
277
|
+
const component = changed.component;
|
|
391
278
|
if (changed.prop.prop[0] === 'hint') {
|
|
392
|
-
|
|
279
|
+
const dom = this.cache.get(component.a11yId);
|
|
393
280
|
dom === null || dom === void 0 ? void 0 : dom.setAttribute('aria-label', component.hint);
|
|
394
281
|
dom && this.setPosition(dom, changed.gameObject.transform);
|
|
395
282
|
}
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
|
|
283
|
+
}
|
|
284
|
+
remove(changed) {
|
|
285
|
+
const component = changed.component;
|
|
399
286
|
if (!component)
|
|
400
287
|
return;
|
|
401
|
-
|
|
402
|
-
|
|
288
|
+
const { a11yId } = component;
|
|
289
|
+
const element = this.div.querySelector(`#${a11yId}`);
|
|
403
290
|
element && this.div.removeChild(element);
|
|
404
291
|
this.cache.delete(a11yId);
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
var _this = this;
|
|
292
|
+
}
|
|
293
|
+
add(changed) {
|
|
408
294
|
if (!this.activate)
|
|
409
295
|
return;
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
296
|
+
const component = changed.component;
|
|
297
|
+
const { gameObject } = changed;
|
|
298
|
+
const { delay, a11yId: id } = component;
|
|
299
|
+
let { event } = component;
|
|
414
300
|
if (!gameObject)
|
|
415
301
|
return;
|
|
416
|
-
|
|
302
|
+
const { transform } = gameObject;
|
|
417
303
|
if (!transform)
|
|
418
304
|
return;
|
|
419
|
-
|
|
305
|
+
const element = document.createElement('div');
|
|
420
306
|
this.cache.set(id, element);
|
|
421
307
|
if (!event) {
|
|
422
308
|
event = gameObject.getComponent('Event');
|
|
423
309
|
}
|
|
424
|
-
setTimeout(
|
|
425
|
-
|
|
426
|
-
|
|
310
|
+
setTimeout(() => {
|
|
311
|
+
this.setPosition(element, transform);
|
|
312
|
+
this.setA11yAttr(element, component);
|
|
427
313
|
if (event) {
|
|
428
|
-
|
|
314
|
+
this.addEvent(gameObject);
|
|
429
315
|
}
|
|
430
316
|
if (gameObject.scene) {
|
|
431
|
-
|
|
317
|
+
this.div.appendChild(element);
|
|
432
318
|
}
|
|
433
319
|
}, delay || this.delay);
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
320
|
+
}
|
|
321
|
+
transformChange(changed) {
|
|
322
|
+
const component = changed.component;
|
|
323
|
+
const { gameObject } = changed;
|
|
324
|
+
const a11yComponent = gameObject.getComponent(A11y);
|
|
439
325
|
if (!a11yComponent)
|
|
440
326
|
return;
|
|
441
|
-
|
|
327
|
+
const { a11yId } = a11yComponent;
|
|
442
328
|
if (!component.inScene) {
|
|
443
|
-
|
|
329
|
+
const dom = this.div.querySelector(`#${a11yId}`);
|
|
444
330
|
dom && this.div.removeChild(dom);
|
|
445
331
|
}
|
|
446
332
|
else {
|
|
447
333
|
if (this.cache.has(a11yId)) {
|
|
448
|
-
|
|
334
|
+
const addDom = this.cache.get(a11yId);
|
|
449
335
|
addDom && this.div.appendChild(addDom);
|
|
450
336
|
}
|
|
451
337
|
}
|
|
452
|
-
}
|
|
453
|
-
|
|
338
|
+
}
|
|
339
|
+
setEvent(element, event, gameObject, id) {
|
|
454
340
|
if (!event) {
|
|
455
341
|
return;
|
|
456
342
|
}
|
|
457
|
-
|
|
343
|
+
const func = getEventFunc.bind(this, event, gameObject);
|
|
458
344
|
this.eventCache.set(id, func);
|
|
459
345
|
element.addEventListener('click', func);
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
|
|
346
|
+
}
|
|
347
|
+
addEvent(gameObject) {
|
|
348
|
+
const a11y = gameObject.getComponent(A11y);
|
|
463
349
|
if (!a11y)
|
|
464
350
|
return;
|
|
465
|
-
|
|
351
|
+
const event = gameObject.getComponent('Event');
|
|
466
352
|
if (!event)
|
|
467
353
|
return;
|
|
468
|
-
|
|
354
|
+
const element = this.cache.get(a11y.a11yId);
|
|
469
355
|
element && this.setEvent(element, event, gameObject, a11y.a11yId);
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
356
|
+
}
|
|
357
|
+
removeEvent(changed) {
|
|
358
|
+
const { gameObject } = changed;
|
|
359
|
+
const a11y = gameObject.getComponent(A11y);
|
|
474
360
|
if (!a11y)
|
|
475
361
|
return;
|
|
476
|
-
|
|
362
|
+
const event = changed.component;
|
|
477
363
|
if (!event)
|
|
478
364
|
return;
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
365
|
+
const { a11yId } = a11y;
|
|
366
|
+
const func = this.eventCache.get(a11yId);
|
|
367
|
+
const element = this.cache.get(a11yId);
|
|
482
368
|
element && element.removeEventListener('click', func);
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
var realRole = role || 'text';
|
|
369
|
+
}
|
|
370
|
+
setA11yAttr(element, component) {
|
|
371
|
+
const { hint, props = {}, state = {}, role, a11yId: id } = component;
|
|
372
|
+
const realRole = role || 'text';
|
|
488
373
|
element.setAttribute('role', realRole);
|
|
489
374
|
element.setAttribute('aria-label', hint);
|
|
490
375
|
element.id = id;
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
var key = ariaProps_1_1.value;
|
|
495
|
-
element.setAttribute(key, props[key]);
|
|
496
|
-
}
|
|
376
|
+
const ariaProps = Object.keys(props);
|
|
377
|
+
for (const key of ariaProps) {
|
|
378
|
+
element.setAttribute(key, props[key]);
|
|
497
379
|
}
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
if (ariaProps_1_1 && !ariaProps_1_1.done && (_a = ariaProps_1.return)) _a.call(ariaProps_1);
|
|
502
|
-
}
|
|
503
|
-
finally { if (e_2) throw e_2.error; }
|
|
504
|
-
}
|
|
505
|
-
var ariaState = Object.keys(state);
|
|
506
|
-
try {
|
|
507
|
-
for (var ariaState_1 = __values(ariaState), ariaState_1_1 = ariaState_1.next(); !ariaState_1_1.done; ariaState_1_1 = ariaState_1.next()) {
|
|
508
|
-
var key = ariaState_1_1.value;
|
|
509
|
-
element.setAttribute(key, state[key]);
|
|
510
|
-
}
|
|
380
|
+
const ariaState = Object.keys(state);
|
|
381
|
+
for (const key of ariaState) {
|
|
382
|
+
element.setAttribute(key, state[key]);
|
|
511
383
|
}
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
if (ariaState_1_1 && !ariaState_1_1.done && (_b = ariaState_1.return)) _b.call(ariaState_1);
|
|
384
|
+
for (const key of Object.keys(component)) {
|
|
385
|
+
if (typeof component[key] === 'string' && notAttr.indexOf(key) === -1 && key.indexOf('_') !== 1) {
|
|
386
|
+
element.setAttribute(key, component[key]);
|
|
516
387
|
}
|
|
517
|
-
finally { if (e_3) throw e_3.error; }
|
|
518
388
|
}
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
element.setAttribute(key, component[key]);
|
|
524
|
-
}
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
528
|
-
finally {
|
|
529
|
-
try {
|
|
530
|
-
if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
|
|
531
|
-
}
|
|
532
|
-
finally { if (e_4) throw e_4.error; }
|
|
533
|
-
}
|
|
534
|
-
};
|
|
535
|
-
A11ySystem.prototype.setPosition = function (element, transform) {
|
|
536
|
-
var _a = transform.size, width = _a.width, height = _a.height;
|
|
537
|
-
var style = {
|
|
389
|
+
}
|
|
390
|
+
setPosition(element, transform) {
|
|
391
|
+
const { width, height } = transform.size;
|
|
392
|
+
const style = {
|
|
538
393
|
width: width === 0 ? 1 : width * this.ratioX,
|
|
539
394
|
height: height === 0 ? 1 : height * this.ratioY,
|
|
540
395
|
position: POSITION,
|
|
@@ -542,27 +397,26 @@ var A11ySystem = (function (_super) {
|
|
|
542
397
|
pointerEvents: PointerEvents.AUTO,
|
|
543
398
|
background: this.debug ? MaskBackground.DEBUG : MaskBackground.NONE,
|
|
544
399
|
};
|
|
545
|
-
|
|
400
|
+
const transformProps = Object.assign({}, transform);
|
|
546
401
|
setStyle(element, style);
|
|
547
402
|
setTransform(element, transformProps, this.ratioX, this.ratioY);
|
|
548
|
-
}
|
|
549
|
-
|
|
403
|
+
}
|
|
404
|
+
onDestroy() {
|
|
550
405
|
this.div.parentElement.removeChild(this.div);
|
|
551
406
|
this.cache = null;
|
|
552
407
|
this.eventCache = null;
|
|
553
408
|
this.div = null;
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
}(eva_js.System));
|
|
409
|
+
}
|
|
410
|
+
};
|
|
411
|
+
A11ySystem.systemName = 'A11ySystem';
|
|
412
|
+
A11ySystem = __decorate([
|
|
413
|
+
eva_js.decorators.componentObserver({
|
|
414
|
+
A11y: ['hint'],
|
|
415
|
+
Transform: ['inScene'],
|
|
416
|
+
Event: [],
|
|
417
|
+
})
|
|
418
|
+
], A11ySystem);
|
|
565
419
|
var A11ySystem$1 = A11ySystem;
|
|
566
420
|
|
|
567
|
-
exports.A11y = A11y
|
|
421
|
+
exports.A11y = A11y;
|
|
568
422
|
exports.A11ySystem = A11ySystem$1;
|