@eva/plugin-a11y 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/plugin-a11y.cjs.prod.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/plugin-renderer"),n=require("@eva/inspector-decorator"),r=function(t,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},r(t,e)};function i(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var o=function(){return o=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},o.apply(this,arguments)};function a(t,e,n,r){var i,o=arguments.length,a=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(o<3?i(a):o>3?i(e,n,a):i(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a}function s(t,e,n,r){return new(n||(n=Promise))((function(i,o){function a(t){try{c(r.next(t))}catch(t){o(t)}}function s(t){try{c(r.throw(t))}catch(t){o(t)}}function c(t){t.done?i(t.value):new n((function(e){e(t.value)})).then(a,s)}c((r=r.apply(t,e||[])).next())}))}function c(t,e){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=e.call(t,a)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}}function h(t){var e="function"==typeof Symbol&&t[Symbol.iterator],n=0;return e?e.call(t):{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}}}var p,u,v,l,d=function(t,e){var n=e.width,r=e.height,i=e.position,o=e.left,a=void 0===o?0:o,s=e.top,c=void 0===s?0:s,h=e.zIndex,p=e.pointerEvents,u=e.background;t.style.width=n+"px",t.style.height=r+"px",t.style.position=i,t.style.left=""+a,t.style.top=""+c,t.style.zIndex=""+h,t.style.pointerEvents=p,t.style.background=u,t.style.border="none",t.style.overflow="hidden"},f=function(t){function e(e){var n=t.call(this)||this;Object.assign(n,e);var r=e.hint,i=void 0===r?"":r,o=e.event,a=e.delay,s=void 0===a?0:a,c=e.attr,h=void 0===c?{}:c,p=e.role,u=void 0===p?"":p,v=e.props,l=void 0===v?{}:v,d=e.state,f=void 0===d?{}:d;return n.hint=i,n.event=o,n.delay=s,n.attr=h,n.role=u,n.props=l,n.state=f,n.a11yId="_"+function(t){for(var e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),n=[],r=e.length,i=0;i<t;i++)n[i]=e[0|Math.random()*r];return n.join("")}(6),n}return i(e,t),e.componentName="A11y",a([n.type("boolean")],e.prototype,"interactive",void 0),a([n.type("string")],e.prototype,"hint",void 0),a([n.type("number"),n.step(1)],e.prototype,"delay",void 0),a([n.type("string")],e.prototype,"role",void 0),a([n.type("string")],e.prototype,"a11yId",void 0),e}(t.Component),y=f,g="absolute";exports.A11yActivate=void 0,(p=exports.A11yActivate||(exports.A11yActivate={}))[p.ENABLE=0]="ENABLE",p[p.DISABLE=1]="DISABLE",p[p.CHECK=2]="CHECK",function(t){t.NONE="none",t.AUTO="auto"}(u||(u={})),function(t){t.DEBUG="rgba(255,0,0,0.5)",t.NONE="transparent"}(v||(v={})),function(t){t.BUTTON="button",t.DIV="div"}(l||(l={}));var m=["hint","event","delay","attr","role","props","state","a11yId","name"],b=function(t,e,n){var r=this;["touchstart","touchend","tap"].forEach((function(i){t.emit(i,{stopPropagation:function(){return n.stopPropagation()},data:{position:r.eventPosition},gameObject:e})}))},E=function(n){function r(t){var e=n.call(this,t)||this;return e.cache=new Map,e.eventCache=new Map,e.zIndex=3,e}return i(r,n),Object.defineProperty(r.prototype,"ratioX",{get:function(){return this._ratioX||this.setRatio()?this._ratioX:0},enumerable:!1,configurable:!0}),Object.defineProperty(r.prototype,"ratioY",{get:function(){return this._ratioY||this.setRatio()?this._ratioY:0},enumerable:!1,configurable:!0}),r.prototype.init=function(t){return void 0===t&&(t={}),s(this,void 0,void 0,(function(){var e,n,r,i,o,a,s,h,p;return c(this,(function(c){switch(c.label){case 0:switch(e=t.activate,n=void 0===e?exports.A11yActivate.CHECK:e,r=t.delay,i=void 0===r?100:r,o=t.checkA11yOpen,a=void 0===o?function(){return Promise.resolve(!1)}:o,s=t.zIndex,this.delay=i,this.zIndex=s||this.zIndex,n){case exports.A11yActivate.CHECK:return[3,1];case exports.A11yActivate.DISABLE:return[3,5];case exports.A11yActivate.ENABLE:return[3,6]}return[3,7];case 1:return c.trys.push([1,3,,4]),h=this,[4,a()];case 2:return h.activate=c.sent(),[3,4];case 3:return c.sent(),this.activate=!1,[3,4];case 4:return[3,7];case 5:return this.activate=!1,[3,7];case 6:return this.activate=!0,[3,7];case 7:return this.debug=t.debug||!1,this.debug&&(this.activate=!0),this.activate?(p=document.createElement("div"),this.div=p,this.game.canvas.parentNode&&this.game.canvas.parentNode.insertBefore(this.div,this.game.canvas),[2]):[2]}}))}))},r.prototype.setRatio=function(){var t=this.getCanvasBoundingClientRect(),e=t.width,n=t.height,r=this.getRenderRect(),i=r.renderWidth,o=r.renderHeight;return this._ratioX=e/i,this._ratioY=n/o,!(!e&&!n)&&(this.initDiv(),!0)},r.prototype.getRenderRect=function(){var t=this.game.getSystem(e.RendererSystem).params,n=void 0===t?{width:300,height:300}:t,r=n.height;return{renderWidth:n.width,renderHeight:r}},r.prototype.getCanvasBoundingClientRect=function(){var t=this.game.canvas.getBoundingClientRect();return{width:t.width,height:t.height,left:t.left,top:t.top}},r.prototype.initDiv=function(){var t=this,e=window.pageXOffset,n=window.pageYOffset,r=this.getCanvasBoundingClientRect(),i={width:r.width,height:r.height,left:r.left+e+"px",top:r.top+n+"px",position:g,zIndex:this.zIndex,pointerEvents:u.NONE,background:v.NONE};d(this.div,i),this.div.addEventListener("click",(function(e){var n=e.currentTarget.getBoundingClientRect(),r=n.left,i=n.top,o=(e.pageX-r)/t.ratioX,a=(e.pageY-i)/t.ratioY;t.eventPosition={x:o,y:a}}),!0)},r.prototype.update=function(){return s(this,void 0,void 0,(function(){var e,n,r,i,o,a;return c(this,(function(s){if(e=this.componentObserver.clear(),!this.activate)return[2];try{for(n=h(e),r=n.next();!r.done;r=n.next())switch((i=r.value).type){case t.OBSERVER_TYPE.ADD:"Event"===i.componentName&&this.addEvent(i.gameObject),"A11y"===i.componentName&&this.add(i);break;case t.OBSERVER_TYPE.CHANGE:"Transform"===i.componentName&&this.transformChange(i),"A11y"===i.componentName&&this.change(i);break;case t.OBSERVER_TYPE.REMOVE:"Event"===i.componentName&&this.removeEvent(i),"A11y"===i.componentName&&this.remove(i)}}catch(t){o={error:t}}finally{try{r&&!r.done&&(a=n.return)&&a.call(n)}finally{if(o)throw o.error}}return[2]}))}))},r.prototype.change=function(t){var e=t.component;if("hint"===t.prop.prop[0]){var n=this.cache.get(e.a11yId);null==n||n.setAttribute("aria-label",e.hint),n&&this.setPosition(n,t.gameObject.transform)}},r.prototype.remove=function(t){var e=t.component;if(e){var n=e.a11yId,r=this.div.querySelector("#"+n);r&&this.div.removeChild(r),this.cache.delete(n)}},r.prototype.add=function(t){var e=this;if(this.activate){var n=t.component,r=t.gameObject,i=n.delay,o=n.a11yId,a=n.event;if(r){var s=r.transform;if(s){var c=document.createElement("div");this.cache.set(o,c),a||(a=r.getComponent("Event")),setTimeout((function(){e.setPosition(c,s),e.setA11yAttr(c,n),a&&e.addEvent(r),r.scene&&e.div.appendChild(c)}),i||this.delay)}}}},r.prototype.transformChange=function(t){var e=t.component,n=t.gameObject.getComponent(y);if(n){var r=n.a11yId;if(e.inScene){if(this.cache.has(r)){var i=this.cache.get(r);i&&this.div.appendChild(i)}}else{var o=this.div.querySelector("#"+r);o&&this.div.removeChild(o)}}},r.prototype.setEvent=function(t,e,n,r){if(e){var i=b.bind(this,e,n);this.eventCache.set(r,i),t.addEventListener("click",i)}},r.prototype.addEvent=function(t){var e=t.getComponent(y);if(e){var n=t.getComponent("Event");if(n){var r=this.cache.get(e.a11yId);r&&this.setEvent(r,n,t,e.a11yId)}}},r.prototype.removeEvent=function(t){var e=t.gameObject.getComponent(y);if(e&&t.component){var n=e.a11yId,r=this.eventCache.get(n),i=this.cache.get(n);i&&i.removeEventListener("click",r)}},r.prototype.setA11yAttr=function(t,e){var n,r,i,o,a,s,c=e.hint,p=e.props,u=void 0===p?{}:p,v=e.state,l=void 0===v?{}:v,d=e.role,f=e.a11yId,y=d||"text";t.setAttribute("role",y),t.setAttribute("aria-label",c),t.id=f;var g=Object.keys(u);try{for(var b=h(g),E=b.next();!E.done;E=b.next()){var x=E.value;t.setAttribute(x,u[x])}}catch(t){n={error:t}}finally{try{E&&!E.done&&(r=b.return)&&r.call(b)}finally{if(n)throw n.error}}var A=Object.keys(l);try{for(var O=h(A),w=O.next();!w.done;w=O.next()){x=w.value;t.setAttribute(x,l[x])}}catch(t){i={error:t}}finally{try{w&&!w.done&&(o=O.return)&&o.call(O)}finally{if(i)throw i.error}}try{for(var C=h(Object.keys(e)),I=C.next();!I.done;I=C.next()){"string"==typeof e[x=I.value]&&-1===m.indexOf(x)&&1!==x.indexOf("_")&&t.setAttribute(x,e[x])}}catch(t){a={error:t}}finally{try{I&&!I.done&&(s=C.return)&&s.call(C)}finally{if(a)throw a.error}}},r.prototype.setPosition=function(t,e){var n=e.size,r=n.width,i=n.height,a={width:0===r?1:r*this.ratioX,height:0===i?1:i*this.ratioY,position:g,zIndex:this.zIndex,pointerEvents:u.AUTO,background:this.debug?v.DEBUG:v.NONE},s=o({},e);d(t,a),function(t,e,n,r){var i=e.worldTransform,o="matrix("+i.a+", "+i.b+", "+i.c+", "+i.d+", "+i.tx*n+", "+i.ty*r+")";t.style.transform=""+o,t.style.webkitTransform=""+o,t.style.transformOrigin="left top",t.style.webkitTransformOrigin="left top"}(t,s,this.ratioX,this.ratioY)},r.prototype.onDestroy=function(){this.div.parentElement.removeChild(this.div),this.cache=null,this.eventCache=null,this.div=null},r.systemName="A11ySystem",r=a([t.decorators.componentObserver({A11y:["hint"],Transform:["inScene"],Event:[]})],r)}(t.System);exports.A11y=y,exports.A11ySystem=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/plugin-renderer"),i=require("@eva/inspector-decorator");
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+function n(t,e,i,n){var s,o=arguments.length,r=o<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(o<3?s(r):o>3?s(e,i,r):s(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r}function s(t,e,i,n){return new(i||(i=Promise))((function(s,o){function r(t){try{c(n.next(t))}catch(t){o(t)}}function a(t){try{c(n.throw(t))}catch(t){o(t)}}function c(t){t.done?s(t.value):new i((function(e){e(t.value)})).then(r,a)}c((n=n.apply(t,e||[])).next())}))}const o=(t,e)=>{const{width:i,height:n,position:s,left:o=0,top:r=0,zIndex:a,pointerEvents:c,background:h}=e;t.style.width=`${i}px`,t.style.height=`${n}px`,t.style.position=s,t.style.left=`${o}`,t.style.top=`${r}`,t.style.zIndex=`${a}`,t.style.pointerEvents=c,t.style.background=h,t.style.border="none",t.style.overflow="hidden"};class r extends t.Component{constructor(t){super(),Object.assign(this,t);const{hint:e="",event:i,delay:n=0,attr:s={},role:o="",props:r={},state:a={}}=t;this.hint=e,this.event=i,this.delay=n,this.attr=s,this.role=o,this.props=r,this.state=a,this.a11yId=`_${function(t){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""),i=[],n=e.length;for(let s=0;s<t;s++)i[s]=e[0|Math.random()*n];return i.join("")}(6)}`}}r.componentName="A11y",n([i.type("boolean")],r.prototype,"interactive",void 0),n([i.type("string")],r.prototype,"hint",void 0),n([i.type("number"),i.step(1)],r.prototype,"delay",void 0),n([i.type("string")],r.prototype,"role",void 0),n([i.type("string")],r.prototype,"a11yId",void 0);const a="absolute";var c,h,d,p;exports.A11yActivate=void 0,(c=exports.A11yActivate||(exports.A11yActivate={}))[c.ENABLE=0]="ENABLE",c[c.DISABLE=1]="DISABLE",c[c.CHECK=2]="CHECK",function(t){t.NONE="none",t.AUTO="auto"}(h||(h={})),function(t){t.DEBUG="rgba(255,0,0,0.5)",t.NONE="transparent"}(d||(d={})),function(t){t.BUTTON="button",t.DIV="div"}(p||(p={}));const v=["hint","event","delay","attr","role","props","state","a11yId","name"],l=function(t,e,i){["touchstart","touchend","tap"].forEach((n=>{t.emit(n,{stopPropagation:()=>i.stopPropagation(),data:{position:this.eventPosition},gameObject:e})}))};let u=class extends t.System{constructor(t){super(t),this.cache=new Map,this.eventCache=new Map,this.zIndex=3}get ratioX(){if(this._ratioX)return this._ratioX;return this.setRatio()?this._ratioX:0}get ratioY(){if(this._ratioY)return this._ratioY;return this.setRatio()?this._ratioY:0}init(t={}){return s(this,void 0,void 0,(function*(){const{activate:e=exports.A11yActivate.CHECK,delay:i=100,checkA11yOpen:n=()=>Promise.resolve(!1),zIndex:s}=t;switch(this.delay=i,this.zIndex=s||this.zIndex,e){case exports.A11yActivate.CHECK:try{this.activate=yield n()}catch(t){this.activate=!1}break;case exports.A11yActivate.DISABLE:this.activate=!1;break;case exports.A11yActivate.ENABLE:this.activate=!0}if(this.debug=t.debug||!1,this.debug&&(this.activate=!0),!this.activate)return;const o=document.createElement("div");this.div=o,this.game.canvas.parentNode&&this.game.canvas.parentNode.insertBefore(this.div,this.game.canvas)}))}setRatio(){const{width:t,height:e}=this.getCanvasBoundingClientRect(),{renderWidth:i,renderHeight:n}=this.getRenderRect();return this._ratioX=t/i,this._ratioY=e/n,!(!t&&!e)&&(this.initDiv(),!0)}getRenderRect(){const{params:t={width:300,height:300}}=this.game.getSystem(e.RendererSystem),{height:i,width:n}=t;return{renderWidth:n,renderHeight:i}}getCanvasBoundingClientRect(){const{width:t,height:e,left:i,top:n}=this.game.canvas.getBoundingClientRect();return{width:t,height:e,left:i,top:n}}initDiv(){const{pageXOffset:t,pageYOffset:e}=window,{width:i,height:n,left:s,top:r}=this.getCanvasBoundingClientRect(),c={width:i,height:n,left:`${s+t}px`,top:`${r+e}px`,position:a,zIndex:this.zIndex,pointerEvents:h.NONE,background:d.NONE};o(this.div,c),this.div.addEventListener("click",(t=>{const e=t.currentTarget,{left:i,top:n}=e.getBoundingClientRect(),s=(t.pageX-i)/this.ratioX,o=(t.pageY-n)/this.ratioY;this.eventPosition={x:s,y:o}}),!0)}update(){return s(this,void 0,void 0,(function*(){const e=this.componentObserver.clear();if(this.activate)for(const i of e)switch(i.type){case t.OBSERVER_TYPE.ADD:"Event"===i.componentName&&this.addEvent(i.gameObject),"A11y"===i.componentName&&this.add(i);break;case t.OBSERVER_TYPE.CHANGE:"Transform"===i.componentName&&this.transformChange(i),"A11y"===i.componentName&&this.change(i);break;case t.OBSERVER_TYPE.REMOVE:"Event"===i.componentName&&this.removeEvent(i),"A11y"===i.componentName&&this.remove(i)}}))}change(t){const e=t.component;if("hint"===t.prop.prop[0]){const i=this.cache.get(e.a11yId);null==i||i.setAttribute("aria-label",e.hint),i&&this.setPosition(i,t.gameObject.transform)}}remove(t){const e=t.component;if(!e)return;const{a11yId:i}=e,n=this.div.querySelector(`#${i}`);n&&this.div.removeChild(n),this.cache.delete(i)}add(t){if(!this.activate)return;const e=t.component,{gameObject:i}=t,{delay:n,a11yId:s}=e;let{event:o}=e;if(!i)return;const{transform:r}=i;if(!r)return;const a=document.createElement("div");this.cache.set(s,a),o||(o=i.getComponent("Event")),setTimeout((()=>{this.setPosition(a,r),this.setA11yAttr(a,e),o&&this.addEvent(i),i.scene&&this.div.appendChild(a)}),n||this.delay)}transformChange(t){const e=t.component,{gameObject:i}=t,n=i.getComponent(r);if(!n)return;const{a11yId:s}=n;if(e.inScene){if(this.cache.has(s)){const t=this.cache.get(s);t&&this.div.appendChild(t)}}else{const t=this.div.querySelector(`#${s}`);t&&this.div.removeChild(t)}}setEvent(t,e,i,n){if(!e)return;const s=l.bind(this,e,i);this.eventCache.set(n,s),t.addEventListener("click",s)}addEvent(t){const e=t.getComponent(r);if(!e)return;const i=t.getComponent("Event");if(!i)return;const n=this.cache.get(e.a11yId);n&&this.setEvent(n,i,t,e.a11yId)}removeEvent(t){const{gameObject:e}=t,i=e.getComponent(r);if(!i)return;if(!t.component)return;const{a11yId:n}=i,s=this.eventCache.get(n),o=this.cache.get(n);o&&o.removeEventListener("click",s)}setA11yAttr(t,e){const{hint:i,props:n={},state:s={},role:o,a11yId:r}=e,a=o||"text";t.setAttribute("role",a),t.setAttribute("aria-label",i),t.id=r;const c=Object.keys(n);for(const e of c)t.setAttribute(e,n[e]);const h=Object.keys(s);for(const e of h)t.setAttribute(e,s[e]);for(const i of Object.keys(e))"string"==typeof e[i]&&-1===v.indexOf(i)&&1!==i.indexOf("_")&&t.setAttribute(i,e[i])}setPosition(t,e){const{width:i,height:n}=e.size,s={width:0===i?1:i*this.ratioX,height:0===n?1:n*this.ratioY,position:a,zIndex:this.zIndex,pointerEvents:h.AUTO,background:this.debug?d.DEBUG:d.NONE},r=Object.assign({},e);o(t,s),((t,e,i,n)=>{const{worldTransform:s}=e,{a:o,b:r,c:a,d:c,tx:h,ty:d}=s,p=`matrix(${o}, ${r}, ${a}, ${c}, ${h*i}, ${d*n})`;t.style.transform=`${p}`,t.style.webkitTransform=`${p}`,t.style.transformOrigin="left top",t.style.webkitTransformOrigin="left top"})(t,r,this.ratioX,this.ratioY)}onDestroy(){this.div.parentElement.removeChild(this.div),this.cache=null,this.eventCache=null,this.div=null}};u.systemName="A11ySystem",u=n([t.decorators.componentObserver({A11y:["hint"],Transform:["inScene"],Event:[]})],u);var y=u;exports.A11y=r,exports.A11ySystem=y;