211 lines
13 KiB
JavaScript
211 lines
13 KiB
JavaScript
shadow$provide.module$node_modules$pixi_DOT_js$lib$accessibility$AccessibilitySystem = function(global, require, module, exports) {
|
|
var CanvasObserver = require("module$node_modules$pixi_DOT_js$lib$dom$CanvasObserver"), FederatedEvent = require("module$node_modules$pixi_DOT_js$lib$events$FederatedEvent");
|
|
global = require("module$node_modules$pixi_DOT_js$lib$extensions$Extensions");
|
|
var isMobile = require("module$node_modules$pixi_DOT_js$lib$utils$browser$isMobile"), removeItems = require("module$node_modules$pixi_DOT_js$lib$utils$data$removeItems");
|
|
"use strict";
|
|
const node_modules$pixi_DOT_js$lib$accessibility$AccessibilitySystem$classdecl$var4 = class {
|
|
constructor(renderer, _mobileInfo = isMobile.isMobile) {
|
|
this._mobileInfo = _mobileInfo;
|
|
this.debug = !1;
|
|
this._deactivateOnMouseMove = this._activateOnTab = !0;
|
|
this._isMobileAccessibility = this._isActive = !1;
|
|
this._div = null;
|
|
this._pools = {};
|
|
this._renderId = 0;
|
|
this._children = [];
|
|
this._androidUpdateCount = 0;
|
|
this._androidUpdateFrequency = 500;
|
|
this._isRunningTests = !1;
|
|
this._boundOnKeyDown = this._onKeyDown.bind(this);
|
|
this._boundOnMouseMove = this._onMouseMove.bind(this);
|
|
this._hookDiv = null;
|
|
(_mobileInfo.tablet || _mobileInfo.phone) && this._createTouchHook();
|
|
this._renderer = renderer;
|
|
}
|
|
get isActive() {
|
|
return this._isActive;
|
|
}
|
|
get isMobileAccessibility() {
|
|
return this._isMobileAccessibility;
|
|
}
|
|
get hookDiv() {
|
|
return this._hookDiv;
|
|
}
|
|
get div() {
|
|
return this._div;
|
|
}
|
|
_createTouchHook() {
|
|
const hookDiv = document.createElement("button");
|
|
hookDiv.style.width = "1px";
|
|
hookDiv.style.height = "1px";
|
|
hookDiv.style.position = "absolute";
|
|
hookDiv.style.top = "-1000px";
|
|
hookDiv.style.left = "-1000px";
|
|
hookDiv.style.zIndex = (2).toString();
|
|
hookDiv.style.backgroundColor = "#FF0000";
|
|
hookDiv.title = "select to enable accessibility for this content";
|
|
hookDiv.addEventListener("focus", () => {
|
|
this._isMobileAccessibility = !0;
|
|
this._activate();
|
|
this._destroyTouchHook();
|
|
});
|
|
document.body.appendChild(hookDiv);
|
|
this._hookDiv = hookDiv;
|
|
}
|
|
_destroyTouchHook() {
|
|
this._hookDiv && (document.body.removeChild(this._hookDiv), this._hookDiv = null);
|
|
}
|
|
_activate() {
|
|
if (!this._isActive) {
|
|
this._isActive = !0;
|
|
this._div || (this._div = document.createElement("div"), this._div.style.position = "absolute", this._div.style.top = "0px", this._div.style.left = "0px", this._div.style.pointerEvents = "none", this._div.style.zIndex = (2).toString(), this._canvasObserver = new CanvasObserver.CanvasObserver({domElement:this._div, renderer:this._renderer}));
|
|
this._activateOnTab && globalThis.addEventListener("keydown", this._boundOnKeyDown, !1);
|
|
this._deactivateOnMouseMove && globalThis.document.addEventListener("mousemove", this._boundOnMouseMove, !0);
|
|
var canvas = this._renderer.view.canvas;
|
|
if (canvas.parentNode) {
|
|
this._canvasObserver.ensureAttached(), this._initAccessibilitySetup();
|
|
} else {
|
|
const observer = new MutationObserver(() => {
|
|
canvas.parentNode && (observer.disconnect(), this._canvasObserver.ensureAttached(), this._initAccessibilitySetup());
|
|
});
|
|
observer.observe(document.body, {childList:!0, subtree:!0});
|
|
}
|
|
}
|
|
}
|
|
_initAccessibilitySetup() {
|
|
this._renderer.runners.postrender.add(this);
|
|
this._renderer.lastObjectRendered && this._updateAccessibleObjects(this._renderer.lastObjectRendered);
|
|
}
|
|
_deactivate() {
|
|
if (this._isActive && !this._isMobileAccessibility) {
|
|
this._isActive = !1;
|
|
globalThis.document.removeEventListener("mousemove", this._boundOnMouseMove, !0);
|
|
this._activateOnTab && globalThis.addEventListener("keydown", this._boundOnKeyDown, !1);
|
|
this._renderer.runners.postrender.remove(this);
|
|
for (const child of this._children) {
|
|
child._accessibleDiv?.parentNode && (child._accessibleDiv.parentNode.removeChild(child._accessibleDiv), child._accessibleDiv = null), child._accessibleActive = !1;
|
|
}
|
|
for (const accessibleType in this._pools) {
|
|
this._pools[accessibleType].forEach(div => {
|
|
div.parentNode && div.parentNode.removeChild(div);
|
|
}), delete this._pools[accessibleType];
|
|
}
|
|
this._div?.parentNode && this._div.parentNode.removeChild(this._div);
|
|
this._pools = {};
|
|
this._children = [];
|
|
}
|
|
}
|
|
_updateAccessibleObjects(container) {
|
|
if (container.visible && container.accessibleChildren && (container.accessible && (container._accessibleActive || this._addChild(container), container._renderId = this._renderId), container = container.children)) {
|
|
for (let i = 0; i < container.length; i++) {
|
|
this._updateAccessibleObjects(container[i]);
|
|
}
|
|
}
|
|
}
|
|
init(options) {
|
|
options = {...node_modules$pixi_DOT_js$lib$accessibility$AccessibilitySystem$classdecl$var4.defaultOptions, ...(options?.accessibilityOptions || {})};
|
|
this.debug = options.debug;
|
|
this._activateOnTab = options.activateOnTab;
|
|
this._deactivateOnMouseMove = options.deactivateOnMouseMove;
|
|
options.enabledByDefault && this._activate();
|
|
this._renderer.runners.postrender.remove(this);
|
|
}
|
|
postrender() {
|
|
var now = performance.now();
|
|
if (!(this._mobileInfo.android.device && now < this._androidUpdateCount) && (this._androidUpdateCount = now + this._androidUpdateFrequency, this._renderer.renderingToScreen && this._renderer.view.canvas || this._isRunningTests)) {
|
|
now = new Set();
|
|
if (this._renderer.lastObjectRendered) {
|
|
this._updateAccessibleObjects(this._renderer.lastObjectRendered);
|
|
for (var child of this._children) {
|
|
child._renderId === this._renderId && now.add(this._children.indexOf(child));
|
|
}
|
|
}
|
|
for (child = this._children.length - 1; 0 <= child; child--) {
|
|
var child$jscomp$0 = this._children[child];
|
|
now.has(child) || (child$jscomp$0._accessibleDiv && child$jscomp$0._accessibleDiv.parentNode && (child$jscomp$0._accessibleDiv.parentNode.removeChild(child$jscomp$0._accessibleDiv), this._getPool(child$jscomp$0.accessibleType).push(child$jscomp$0._accessibleDiv), child$jscomp$0._accessibleDiv = null), child$jscomp$0._accessibleActive = !1, removeItems.removeItems(this._children, child, 1));
|
|
}
|
|
this._renderer.renderingToScreen && this._canvasObserver.ensureAttached();
|
|
for (now = 0; now < this._children.length; now++) {
|
|
var child$jscomp$1 = this._children[now];
|
|
child$jscomp$1._accessibleActive && child$jscomp$1._accessibleDiv && (child = child$jscomp$1._accessibleDiv, child$jscomp$0 = child$jscomp$1.hitArea || child$jscomp$1.getBounds().rectangle, child$jscomp$1.hitArea ? (child$jscomp$1 = child$jscomp$1.worldTransform, child.style.left = `${child$jscomp$1.tx + child$jscomp$0.x * child$jscomp$1.a}px`, child.style.top = `${child$jscomp$1.ty + child$jscomp$0.y * child$jscomp$1.d}px`, child.style.width = `${child$jscomp$0.width * child$jscomp$1.a}px`,
|
|
child.style.height = `${child$jscomp$0.height * child$jscomp$1.d}px`) : (this._capHitArea(child$jscomp$0), child.style.left = `${child$jscomp$0.x}px`, child.style.top = `${child$jscomp$0.y}px`, child.style.width = `${child$jscomp$0.width}px`, child.style.height = `${child$jscomp$0.height}px`));
|
|
}
|
|
this._renderId++;
|
|
}
|
|
}
|
|
_updateDebugHTML(div) {
|
|
div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;
|
|
}
|
|
_capHitArea(hitArea) {
|
|
0 > hitArea.x && (hitArea.width += hitArea.x, hitArea.x = 0);
|
|
0 > hitArea.y && (hitArea.height += hitArea.y, hitArea.y = 0);
|
|
const {width:viewWidth, height:viewHeight} = this._renderer;
|
|
hitArea.x + hitArea.width > viewWidth && (hitArea.width = viewWidth - hitArea.x);
|
|
hitArea.y + hitArea.height > viewHeight && (hitArea.height = viewHeight - hitArea.y);
|
|
}
|
|
_addChild(container) {
|
|
let div = this._getPool(container.accessibleType).pop();
|
|
div ? (div.innerHTML = "", div.removeAttribute("title"), div.removeAttribute("aria-label"), div.tabIndex = 0) : ("button" === container.accessibleType ? div = document.createElement("button") : (div = document.createElement(container.accessibleType), div.style.cssText = "\n color: transparent;\n pointer-events: none;\n padding: 0;\n margin: 0;\n border: 0;\n outline: 0;\n background: transparent;\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n ",
|
|
container.accessibleText && (div.innerText = container.accessibleText)), div.style.width = "100px", div.style.height = "100px", div.style.backgroundColor = this.debug ? "rgba(255,255,255,0.5)" : "transparent", div.style.position = "absolute", div.style.zIndex = (2).toString(), div.style.borderStyle = "none", navigator.userAgent.toLowerCase().includes("chrome") ? div.setAttribute("aria-live", "off") : div.setAttribute("aria-live", "polite"), navigator.userAgent.match(/rv:.*Gecko\//) ? div.setAttribute("aria-relevant",
|
|
"additions") : div.setAttribute("aria-relevant", "text"), div.addEventListener("click", this._onClick.bind(this)), div.addEventListener("focus", this._onFocus.bind(this)), div.addEventListener("focusout", this._onFocusOut.bind(this)));
|
|
div.style.pointerEvents = container.accessiblePointerEvents;
|
|
div.type = container.accessibleType;
|
|
container.accessibleTitle && null !== container.accessibleTitle ? div.title = container.accessibleTitle : container.accessibleHint && null !== container.accessibleHint || (div.title = `container ${container.tabIndex}`);
|
|
container.accessibleHint && null !== container.accessibleHint && div.setAttribute("aria-label", container.accessibleHint);
|
|
div.tabIndex = container.interactive ? container.tabIndex : 0;
|
|
this.debug && this._updateDebugHTML(div);
|
|
container._accessibleActive = !0;
|
|
container._accessibleDiv = div;
|
|
div.container = container;
|
|
this._children.push(container);
|
|
this._div.appendChild(container._accessibleDiv);
|
|
}
|
|
_dispatchEvent(e, type) {
|
|
({container:e} = e.target);
|
|
const boundary = this._renderer.events.rootBoundary, event = Object.assign(new FederatedEvent.FederatedEvent(boundary), {target:e});
|
|
boundary.rootTarget = this._renderer.lastObjectRendered;
|
|
type.forEach(type2 => boundary.dispatchEvent(event, type2));
|
|
}
|
|
_onClick(e) {
|
|
this._dispatchEvent(e, ["click", "pointertap", "tap"]);
|
|
}
|
|
_onFocus(e) {
|
|
e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "assertive");
|
|
this._dispatchEvent(e, ["mouseover"]);
|
|
}
|
|
_onFocusOut(e) {
|
|
e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "polite");
|
|
this._dispatchEvent(e, ["mouseout"]);
|
|
}
|
|
_onKeyDown(e) {
|
|
9 === e.keyCode && this._activateOnTab && this._activate();
|
|
}
|
|
_onMouseMove(e) {
|
|
0 === e.movementX && 0 === e.movementY || this._deactivate();
|
|
}
|
|
destroy() {
|
|
this._deactivate();
|
|
this._destroyTouchHook();
|
|
this._canvasObserver?.destroy();
|
|
this._hookDiv = this._renderer = this._children = this._pools = this._div = this._canvasObserver = null;
|
|
globalThis.removeEventListener("keydown", this._boundOnKeyDown);
|
|
this._boundOnKeyDown = null;
|
|
globalThis.document.removeEventListener("mousemove", this._boundOnMouseMove, !0);
|
|
this._boundOnMouseMove = null;
|
|
}
|
|
setAccessibilityEnabled(enabled) {
|
|
enabled ? this._activate() : this._deactivate();
|
|
}
|
|
_getPool(accessibleType) {
|
|
this._pools[accessibleType] || (this._pools[accessibleType] = []);
|
|
return this._pools[accessibleType];
|
|
}
|
|
};
|
|
require = node_modules$pixi_DOT_js$lib$accessibility$AccessibilitySystem$classdecl$var4;
|
|
require.extension = {type:[global.ExtensionType.WebGLSystem, global.ExtensionType.WebGPUSystem], name:"accessibility"};
|
|
require.defaultOptions = {enabledByDefault:!1, debug:!1, activateOnTab:!0, deactivateOnMouseMove:!0};
|
|
exports.AccessibilitySystem = require;
|
|
};
|
|
|
|
//# sourceMappingURL=module$node_modules$pixi_DOT_js$lib$accessibility$AccessibilitySystem.js.map
|