Socket
Socket
Sign inDemoInstall

@pixi/accessibility

Package Overview
Dependencies
Maintainers
1
Versions
122
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pixi/accessibility - npm Package Compare versions

Comparing version 5.2.1 to 5.2.2

44

dist/accessibility.js
/*!
* @pixi/accessibility - v5.2.1
* Compiled Tue, 28 Jan 2020 23:33:11 UTC
* @pixi/accessibility - v5.2.2
* Compiled Tue, 21 Apr 2020 03:53:51 UTC
*

@@ -234,2 +234,15 @@ * @pixi/accessibility is licensed under the MIT License.

/**
* count to throttle div updates on android devices
* @type number
* @private
*/
this.androidUpdateCount = 0;
/**
* the frequency to update the div elements ()
* @private
*/
this.androidUpdateFrequency = 500; // 2fps
// let listen for tab.. once pressed we can fire up and show the accessibility layer

@@ -257,3 +270,3 @@ window.addEventListener('keydown', this._onKeyDown, false);

hookDiv.style.backgroundColor = '#FF0000';
hookDiv.title = 'HOOK DIV';
hookDiv.title = 'select to enable accessability for this content';

@@ -375,2 +388,15 @@ hookDiv.addEventListener('focus', function () {

{
/* On Android default web browser, tab order seems to be calculated by position rather than tabIndex,
* moving buttons can cause focus to flicker between two buttons making it hard/impossible to navigate,
* so I am just running update every half a second, seems to fix it.
*/
var now = performance.now();
if (utils.isMobile.android.device && now < this.androidUpdateCount)
{
return;
}
this.androidUpdateCount = now + this.androidUpdateFrequency;
if (!this.renderer.renderingToScreen)

@@ -385,5 +411,8 @@ {

var rect = this.renderer.view.getBoundingClientRect();
var sx = rect.width / this.renderer.width;
var sy = rect.height / this.renderer.height;
var resolution = this.renderer.resolution;
var sx = (rect.width / this.renderer.width) * resolution;
var sy = (rect.height / this.renderer.height) * resolution;
var div = this.div;

@@ -410,7 +439,2 @@

i--;
if (this.children.length === 0)
{
this.deactivate();
}
}

@@ -417,0 +441,0 @@ else

/*!
* @pixi/accessibility - v5.2.1
* Compiled Tue, 28 Jan 2020 23:33:11 UTC
* @pixi/accessibility - v5.2.2
* Compiled Tue, 21 Apr 2020 03:53:51 UTC
*

@@ -8,3 +8,3 @@ * @pixi/accessibility is licensed under the MIT License.

*/
this.PIXI=this.PIXI||{},this.PIXI.accessibility=this.PIXI.accessibility||{};var _pixi_accessibility=function(e,t,i){"use strict";var s={accessible:!1,accessibleTitle:null,accessibleHint:null,tabIndex:0,_accessibleActive:!1,_accessibleDiv:!1,accessibleType:"button",accessiblePointerEvents:"auto",accessibleChildren:!0};PIXI.DisplayObject.mixin(s);var n=function(e){this._hookDiv=null,(t.isMobile.tablet||t.isMobile.phone)&&this.createTouchHook();var i=document.createElement("div");i.style.width="100px",i.style.height="100px",i.style.position="absolute",i.style.top="0px",i.style.left="0px",i.style.zIndex=2,this.div=i,this.pool=[],this.renderId=0,this.debug=!1,this.renderer=e,this.children=[],this._onKeyDown=this._onKeyDown.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this.isActive=!1,this.isMobileAccessibility=!1,window.addEventListener("keydown",this._onKeyDown,!1)};return n.prototype.createTouchHook=function(){var e=this,t=document.createElement("button");t.style.width="1px",t.style.height="1px",t.style.position="absolute",t.style.top="-1000px",t.style.left="-1000px",t.style.zIndex=2,t.style.backgroundColor="#FF0000",t.title="HOOK DIV",t.addEventListener("focus",function(){e.isMobileAccessibility=!0,e.activate(),e.destroyTouchHook()}),document.body.appendChild(t),this._hookDiv=t},n.prototype.destroyTouchHook=function(){this._hookDiv&&(document.body.removeChild(this._hookDiv),this._hookDiv=null)},n.prototype.activate=function(){this.isActive||(this.isActive=!0,window.document.addEventListener("mousemove",this._onMouseMove,!0),window.removeEventListener("keydown",this._onKeyDown,!1),this.renderer.on("postrender",this.update,this),this.renderer.view.parentNode&&this.renderer.view.parentNode.appendChild(this.div))},n.prototype.deactivate=function(){this.isActive&&!this.isMobileAccessibility&&(this.isActive=!1,window.document.removeEventListener("mousemove",this._onMouseMove,!0),window.addEventListener("keydown",this._onKeyDown,!1),this.renderer.off("postrender",this.update),this.div.parentNode&&this.div.parentNode.removeChild(this.div))},n.prototype.updateAccessibleObjects=function(e){if(e.visible&&e.accessibleChildren){e.accessible&&e.interactive&&(e._accessibleActive||this.addChild(e),e.renderId=this.renderId);for(var t=e.children,i=0;i<t.length;i++)this.updateAccessibleObjects(t[i])}},n.prototype.update=function(){if(this.renderer.renderingToScreen){this.updateAccessibleObjects(this.renderer._lastObjectRendered);var e=this.renderer.view.getBoundingClientRect(),i=e.width/this.renderer.width,s=e.height/this.renderer.height,n=this.div;n.style.left=e.left+"px",n.style.top=e.top+"px",n.style.width=this.renderer.width+"px",n.style.height=this.renderer.height+"px";for(var o=0;o<this.children.length;o++){var r=this.children[o];if(r.renderId!==this.renderId)r._accessibleActive=!1,t.removeItems(this.children,o,1),this.div.removeChild(r._accessibleDiv),this.pool.push(r._accessibleDiv),r._accessibleDiv=null,o--,0===this.children.length&&this.deactivate();else{n=r._accessibleDiv;var l=r.hitArea,a=r.worldTransform;r.hitArea?(n.style.left=(a.tx+l.x*a.a)*i+"px",n.style.top=(a.ty+l.y*a.d)*s+"px",n.style.width=l.width*a.a*i+"px",n.style.height=l.height*a.d*s+"px"):(l=r.getBounds(),this.capHitArea(l),n.style.left=l.x*i+"px",n.style.top=l.y*s+"px",n.style.width=l.width*i+"px",n.style.height=l.height*s+"px",n.title!==r.accessibleTitle&&null!==r.accessibleTitle&&(n.title=r.accessibleTitle),n.getAttribute("aria-label")!==r.accessibleHint&&null!==r.accessibleHint&&n.setAttribute("aria-label",r.accessibleHint)),r.accessibleTitle===n.title&&r.tabIndex===n.tabIndex||(n.title=r.accessibleTitle,n.tabIndex=r.tabIndex,this.debug&&this.updateDebugHTML(n))}}this.renderId++}},n.prototype.updateDebugHTML=function(e){e.innerHTML="type: "+e.type+"</br> title : "+e.title+"</br> tabIndex: "+e.tabIndex},n.prototype.capHitArea=function(e){e.x<0&&(e.width+=e.x,e.x=0),e.y<0&&(e.height+=e.y,e.y=0),e.x+e.width>this.renderer.width&&(e.width=this.renderer.width-e.x),e.y+e.height>this.renderer.height&&(e.height=this.renderer.height-e.y)},n.prototype.addChild=function(e){var t=this.pool.pop();t||((t=document.createElement("button")).style.width="100px",t.style.height="100px",t.style.backgroundColor=this.debug?"rgba(255,255,255,0.5)":"transparent",t.style.position="absolute",t.style.zIndex=2,t.style.borderStyle="none",navigator.userAgent.toLowerCase().indexOf("chrome")>-1?t.setAttribute("aria-live","off"):t.setAttribute("aria-live","polite"),navigator.userAgent.match(/rv:.*Gecko\//)?t.setAttribute("aria-relevant","additions"):t.setAttribute("aria-relevant","text"),t.addEventListener("click",this._onClick.bind(this)),t.addEventListener("focus",this._onFocus.bind(this)),t.addEventListener("focusout",this._onFocusOut.bind(this))),t.style.pointerEvents=e.accessiblePointerEvents,t.type=e.accessibleType,e.accessibleTitle&&null!==e.accessibleTitle?t.title=e.accessibleTitle:e.accessibleHint&&null!==e.accessibleHint||(t.title="displayObject "+e.tabIndex),e.accessibleHint&&null!==e.accessibleHint&&t.setAttribute("aria-label",e.accessibleHint),this.debug&&this.updateDebugHTML(t),e._accessibleActive=!0,e._accessibleDiv=t,t.displayObject=e,this.children.push(e),this.div.appendChild(e._accessibleDiv),e._accessibleDiv.tabIndex=e.tabIndex},n.prototype._onClick=function(e){var t=this.renderer.plugins.interaction;t.dispatchEvent(e.target.displayObject,"click",t.eventData),t.dispatchEvent(e.target.displayObject,"pointertap",t.eventData),t.dispatchEvent(e.target.displayObject,"tap",t.eventData)},n.prototype._onFocus=function(e){e.target.getAttribute("aria-live","off")||e.target.setAttribute("aria-live","assertive");var t=this.renderer.plugins.interaction;t.dispatchEvent(e.target.displayObject,"mouseover",t.eventData)},n.prototype._onFocusOut=function(e){e.target.getAttribute("aria-live","off")||e.target.setAttribute("aria-live","polite");var t=this.renderer.plugins.interaction;t.dispatchEvent(e.target.displayObject,"mouseout",t.eventData)},n.prototype._onKeyDown=function(e){9===e.keyCode&&this.activate()},n.prototype._onMouseMove=function(e){0===e.movementX&&0===e.movementY||this.deactivate()},n.prototype.destroy=function(){this.destroyTouchHook(),this.div=null;for(var e=0;e<this.children.length;e++)this.children[e].div=null;window.document.removeEventListener("mousemove",this._onMouseMove,!0),window.removeEventListener("keydown",this._onKeyDown),this.pool=null,this.children=null,this.renderer=null},e.AccessibilityManager=n,e.accessibleTarget=s,e}({},PIXI.utils);Object.assign(this.PIXI.accessibility,_pixi_accessibility);
this.PIXI=this.PIXI||{},this.PIXI.accessibility=this.PIXI.accessibility||{};var _pixi_accessibility=function(e,t,i){"use strict";var s={accessible:!1,accessibleTitle:null,accessibleHint:null,tabIndex:0,_accessibleActive:!1,_accessibleDiv:!1,accessibleType:"button",accessiblePointerEvents:"auto",accessibleChildren:!0};PIXI.DisplayObject.mixin(s);var n=function(e){this._hookDiv=null,(t.isMobile.tablet||t.isMobile.phone)&&this.createTouchHook();var i=document.createElement("div");i.style.width="100px",i.style.height="100px",i.style.position="absolute",i.style.top="0px",i.style.left="0px",i.style.zIndex=2,this.div=i,this.pool=[],this.renderId=0,this.debug=!1,this.renderer=e,this.children=[],this._onKeyDown=this._onKeyDown.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this.isActive=!1,this.isMobileAccessibility=!1,this.androidUpdateCount=0,this.androidUpdateFrequency=500,window.addEventListener("keydown",this._onKeyDown,!1)};return n.prototype.createTouchHook=function(){var e=this,t=document.createElement("button");t.style.width="1px",t.style.height="1px",t.style.position="absolute",t.style.top="-1000px",t.style.left="-1000px",t.style.zIndex=2,t.style.backgroundColor="#FF0000",t.title="select to enable accessability for this content",t.addEventListener("focus",function(){e.isMobileAccessibility=!0,e.activate(),e.destroyTouchHook()}),document.body.appendChild(t),this._hookDiv=t},n.prototype.destroyTouchHook=function(){this._hookDiv&&(document.body.removeChild(this._hookDiv),this._hookDiv=null)},n.prototype.activate=function(){this.isActive||(this.isActive=!0,window.document.addEventListener("mousemove",this._onMouseMove,!0),window.removeEventListener("keydown",this._onKeyDown,!1),this.renderer.on("postrender",this.update,this),this.renderer.view.parentNode&&this.renderer.view.parentNode.appendChild(this.div))},n.prototype.deactivate=function(){this.isActive&&!this.isMobileAccessibility&&(this.isActive=!1,window.document.removeEventListener("mousemove",this._onMouseMove,!0),window.addEventListener("keydown",this._onKeyDown,!1),this.renderer.off("postrender",this.update),this.div.parentNode&&this.div.parentNode.removeChild(this.div))},n.prototype.updateAccessibleObjects=function(e){if(e.visible&&e.accessibleChildren){e.accessible&&e.interactive&&(e._accessibleActive||this.addChild(e),e.renderId=this.renderId);for(var t=e.children,i=0;i<t.length;i++)this.updateAccessibleObjects(t[i])}},n.prototype.update=function(){var e=performance.now();if(!(t.isMobile.android.device&&e<this.androidUpdateCount)&&(this.androidUpdateCount=e+this.androidUpdateFrequency,this.renderer.renderingToScreen)){this.updateAccessibleObjects(this.renderer._lastObjectRendered);var i=this.renderer.view.getBoundingClientRect(),s=this.renderer.resolution,n=i.width/this.renderer.width*s,o=i.height/this.renderer.height*s,r=this.div;r.style.left=i.left+"px",r.style.top=i.top+"px",r.style.width=this.renderer.width+"px",r.style.height=this.renderer.height+"px";for(var a=0;a<this.children.length;a++){var l=this.children[a];if(l.renderId!==this.renderId)l._accessibleActive=!1,t.removeItems(this.children,a,1),this.div.removeChild(l._accessibleDiv),this.pool.push(l._accessibleDiv),l._accessibleDiv=null,a--;else{r=l._accessibleDiv;var c=l.hitArea,d=l.worldTransform;l.hitArea?(r.style.left=(d.tx+c.x*d.a)*n+"px",r.style.top=(d.ty+c.y*d.d)*o+"px",r.style.width=c.width*d.a*n+"px",r.style.height=c.height*d.d*o+"px"):(c=l.getBounds(),this.capHitArea(c),r.style.left=c.x*n+"px",r.style.top=c.y*o+"px",r.style.width=c.width*n+"px",r.style.height=c.height*o+"px",r.title!==l.accessibleTitle&&null!==l.accessibleTitle&&(r.title=l.accessibleTitle),r.getAttribute("aria-label")!==l.accessibleHint&&null!==l.accessibleHint&&r.setAttribute("aria-label",l.accessibleHint)),l.accessibleTitle===r.title&&l.tabIndex===r.tabIndex||(r.title=l.accessibleTitle,r.tabIndex=l.tabIndex,this.debug&&this.updateDebugHTML(r))}}this.renderId++}},n.prototype.updateDebugHTML=function(e){e.innerHTML="type: "+e.type+"</br> title : "+e.title+"</br> tabIndex: "+e.tabIndex},n.prototype.capHitArea=function(e){e.x<0&&(e.width+=e.x,e.x=0),e.y<0&&(e.height+=e.y,e.y=0),e.x+e.width>this.renderer.width&&(e.width=this.renderer.width-e.x),e.y+e.height>this.renderer.height&&(e.height=this.renderer.height-e.y)},n.prototype.addChild=function(e){var t=this.pool.pop();t||((t=document.createElement("button")).style.width="100px",t.style.height="100px",t.style.backgroundColor=this.debug?"rgba(255,255,255,0.5)":"transparent",t.style.position="absolute",t.style.zIndex=2,t.style.borderStyle="none",navigator.userAgent.toLowerCase().indexOf("chrome")>-1?t.setAttribute("aria-live","off"):t.setAttribute("aria-live","polite"),navigator.userAgent.match(/rv:.*Gecko\//)?t.setAttribute("aria-relevant","additions"):t.setAttribute("aria-relevant","text"),t.addEventListener("click",this._onClick.bind(this)),t.addEventListener("focus",this._onFocus.bind(this)),t.addEventListener("focusout",this._onFocusOut.bind(this))),t.style.pointerEvents=e.accessiblePointerEvents,t.type=e.accessibleType,e.accessibleTitle&&null!==e.accessibleTitle?t.title=e.accessibleTitle:e.accessibleHint&&null!==e.accessibleHint||(t.title="displayObject "+e.tabIndex),e.accessibleHint&&null!==e.accessibleHint&&t.setAttribute("aria-label",e.accessibleHint),this.debug&&this.updateDebugHTML(t),e._accessibleActive=!0,e._accessibleDiv=t,t.displayObject=e,this.children.push(e),this.div.appendChild(e._accessibleDiv),e._accessibleDiv.tabIndex=e.tabIndex},n.prototype._onClick=function(e){var t=this.renderer.plugins.interaction;t.dispatchEvent(e.target.displayObject,"click",t.eventData),t.dispatchEvent(e.target.displayObject,"pointertap",t.eventData),t.dispatchEvent(e.target.displayObject,"tap",t.eventData)},n.prototype._onFocus=function(e){e.target.getAttribute("aria-live","off")||e.target.setAttribute("aria-live","assertive");var t=this.renderer.plugins.interaction;t.dispatchEvent(e.target.displayObject,"mouseover",t.eventData)},n.prototype._onFocusOut=function(e){e.target.getAttribute("aria-live","off")||e.target.setAttribute("aria-live","polite");var t=this.renderer.plugins.interaction;t.dispatchEvent(e.target.displayObject,"mouseout",t.eventData)},n.prototype._onKeyDown=function(e){9===e.keyCode&&this.activate()},n.prototype._onMouseMove=function(e){0===e.movementX&&0===e.movementY||this.deactivate()},n.prototype.destroy=function(){this.destroyTouchHook(),this.div=null;for(var e=0;e<this.children.length;e++)this.children[e].div=null;window.document.removeEventListener("mousemove",this._onMouseMove,!0),window.removeEventListener("keydown",this._onKeyDown),this.pool=null,this.children=null,this.renderer=null},e.AccessibilityManager=n,e.accessibleTarget=s,e}({},PIXI.utils);Object.assign(this.PIXI.accessibility,_pixi_accessibility);
//# sourceMappingURL=accessibility.min.js.map
/*!
* @pixi/accessibility - v5.2.1
* Compiled Tue, 28 Jan 2020 23:33:11 UTC
* @pixi/accessibility - v5.2.2
* Compiled Tue, 21 Apr 2020 03:53:51 UTC
*

@@ -232,2 +232,15 @@ * @pixi/accessibility is licensed under the MIT License.

/**
* count to throttle div updates on android devices
* @type number
* @private
*/
this.androidUpdateCount = 0;
/**
* the frequency to update the div elements ()
* @private
*/
this.androidUpdateFrequency = 500; // 2fps
// let listen for tab.. once pressed we can fire up and show the accessibility layer

@@ -255,3 +268,3 @@ window.addEventListener('keydown', this._onKeyDown, false);

hookDiv.style.backgroundColor = '#FF0000';
hookDiv.title = 'HOOK DIV';
hookDiv.title = 'select to enable accessability for this content';

@@ -373,2 +386,15 @@ hookDiv.addEventListener('focus', function () {

{
/* On Android default web browser, tab order seems to be calculated by position rather than tabIndex,
* moving buttons can cause focus to flicker between two buttons making it hard/impossible to navigate,
* so I am just running update every half a second, seems to fix it.
*/
var now = performance.now();
if (isMobile.android.device && now < this.androidUpdateCount)
{
return;
}
this.androidUpdateCount = now + this.androidUpdateFrequency;
if (!this.renderer.renderingToScreen)

@@ -383,5 +409,8 @@ {

var rect = this.renderer.view.getBoundingClientRect();
var sx = rect.width / this.renderer.width;
var sy = rect.height / this.renderer.height;
var resolution = this.renderer.resolution;
var sx = (rect.width / this.renderer.width) * resolution;
var sy = (rect.height / this.renderer.height) * resolution;
var div = this.div;

@@ -408,7 +437,2 @@

i--;
if (this.children.length === 0)
{
this.deactivate();
}
}

@@ -415,0 +439,0 @@ else

/*!
* @pixi/accessibility - v5.2.1
* Compiled Tue, 28 Jan 2020 23:33:11 UTC
* @pixi/accessibility - v5.2.2
* Compiled Tue, 21 Apr 2020 03:53:51 UTC
*

@@ -236,2 +236,15 @@ * @pixi/accessibility is licensed under the MIT License.

/**
* count to throttle div updates on android devices
* @type number
* @private
*/
this.androidUpdateCount = 0;
/**
* the frequency to update the div elements ()
* @private
*/
this.androidUpdateFrequency = 500; // 2fps
// let listen for tab.. once pressed we can fire up and show the accessibility layer

@@ -259,3 +272,3 @@ window.addEventListener('keydown', this._onKeyDown, false);

hookDiv.style.backgroundColor = '#FF0000';
hookDiv.title = 'HOOK DIV';
hookDiv.title = 'select to enable accessability for this content';

@@ -377,2 +390,15 @@ hookDiv.addEventListener('focus', function () {

{
/* On Android default web browser, tab order seems to be calculated by position rather than tabIndex,
* moving buttons can cause focus to flicker between two buttons making it hard/impossible to navigate,
* so I am just running update every half a second, seems to fix it.
*/
var now = performance.now();
if (utils.isMobile.android.device && now < this.androidUpdateCount)
{
return;
}
this.androidUpdateCount = now + this.androidUpdateFrequency;
if (!this.renderer.renderingToScreen)

@@ -387,5 +413,8 @@ {

var rect = this.renderer.view.getBoundingClientRect();
var sx = rect.width / this.renderer.width;
var sy = rect.height / this.renderer.height;
var resolution = this.renderer.resolution;
var sx = (rect.width / this.renderer.width) * resolution;
var sy = (rect.height / this.renderer.height) * resolution;
var div = this.div;

@@ -412,7 +441,2 @@

i--;
if (this.children.length === 0)
{
this.deactivate();
}
}

@@ -419,0 +443,0 @@ else

{
"name": "@pixi/accessibility",
"version": "5.2.1",
"version": "5.2.2",
"main": "lib/accessibility.js",

@@ -28,10 +28,10 @@ "module": "lib/accessibility.es.js",

"dependencies": {
"@pixi/core": "5.2.1",
"@pixi/display": "5.2.1",
"@pixi/utils": "5.2.1"
"@pixi/core": "5.2.2",
"@pixi/display": "5.2.2",
"@pixi/utils": "5.2.2"
},
"devDependencies": {
"@pixi/canvas-renderer": "5.2.1"
"@pixi/canvas-renderer": "5.2.2"
},
"gitHead": "b56b4fca1c169f0e6d2a0472251ba1f7399bb4a3"
"gitHead": "c163c466c20f2286b6e41ab90d68a03aad2051d4"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc