diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 1cd0f23..0ee06a9 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -3,13 +3,7 @@ // add some extra variables to the container.. Object.assign( core.DisplayObject.prototype, - { - accessible:false, - accessibleTitle:null, - tabIndex:0, - _accessibleActive:false, - _accessibleDiv:false - } + require('./accessibleTarget') ); @@ -84,7 +78,7 @@ * pre bind the functions.. */ this._onKeyDown = this._onKeyDown.bind(this); - this._onMouseMove = this._onMouseMove.bind(this) + this._onMouseMove = this._onMouseMove.bind(this); /** * stores the state of the manager. If there are no accessible objects or the mouse is moving the will be false. @@ -109,7 +103,11 @@ */ AccessibilityManager.prototype.activate = function() { - if(this.isActive)return; + if(this.isActive) + { + return; + } + this.isActive = true; window.document.addEventListener('mousemove', this._onMouseMove, true); @@ -118,7 +116,7 @@ this.renderer.on('postrender', this.update, this); this.renderer.view.parentNode.appendChild(this.div); -} +}; /** * Deactivating will cause the Accessibility layer to be hidden. This is called when a user moves the mouse @@ -126,7 +124,11 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive)return; + if(!this.isActive) + { + return; + } + this.isActive = false; window.document.removeEventListener('mousemove', this._onMouseMove); @@ -136,7 +138,7 @@ this.div.parentNode.removeChild(this.div); -} +}; /** * This recursive function will run throught he scene graph and add any new accessible objects to the DOM layer. @@ -145,7 +147,10 @@ */ AccessibilityManager.prototype.updateAccessibleObjects = function(DisplayObject) { - if(!DisplayObject.visible)return; + if(!DisplayObject.visible) + { + return; + } if(DisplayObject.accessible) { @@ -161,9 +166,9 @@ for (var i = children.length - 1; i >= 0; i--) { - this.updateAccessibleObjects(children[i]) - }; -} + this.updateAccessibleObjects(children[i]); + } +}; /** @@ -177,8 +182,8 @@ this.updateAccessibleObjects(this.renderer._lastObjectRendered); var rect = this.renderer.view.getBoundingClientRect(); - var sx = rect.width / this.renderer.width ; - var sy = rect.height / this.renderer.height ; + var sx = rect.width / this.renderer.width; + var sy = rect.height / this.renderer.height; var div = this.div; @@ -192,7 +197,7 @@ var child = this.children[i]; - if(child.renderId != this.renderId) + if(child.renderId !== this.renderId) { child._accessibleActive = false; @@ -211,8 +216,8 @@ else { // map div to display.. - var div = child._accessibleDiv; - var hitArea = child.hitArea + div = child._accessibleDiv; + var hitArea = child.hitArea; var wt = child.worldTransform; if(child.hitArea) @@ -237,11 +242,11 @@ div.style.height = (hitArea.height * sy) + 'px'; } } - }; + } // increment the render id.. this.renderId++; -} +}; AccessibilityManager.prototype.capHitArea = function (hitArea) { @@ -285,21 +290,21 @@ div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; - div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent' + div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent'; div.style.position = 'absolute'; div.style.zIndex = 2; div.style.borderStyle = 'none'; - div.addEventListener('click', this._onClick.bind(this)) - div.addEventListener('focus', this._onFocus.bind(this)) - div.addEventListener('focusout', this._onFocusOut.bind(this)) + div.addEventListener('click', this._onClick.bind(this)); + div.addEventListener('focus', this._onFocus.bind(this)); + div.addEventListener('focusout', this._onFocusOut.bind(this)); } - div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex + div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex; // @@ -311,7 +316,7 @@ this.children.push(displayObject); this.div.appendChild( displayObject._accessibleDiv ); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; -} +}; /** @@ -322,7 +327,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseover) @@ -332,7 +337,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseout) @@ -342,7 +347,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); -} +}; /** * Is called when a key is pressed @@ -351,9 +356,13 @@ */ AccessibilityManager.prototype._onKeyDown = function(e) { - if(e.keyCode !== 9)return; + if(e.keyCode !== 9) + { + return; + } + this.activate(); -} +}; /** * Is called when the mouse moves across the renderer element @@ -363,7 +372,7 @@ AccessibilityManager.prototype._onMouseMove = function() { this.deactivate(); -} +}; /** @@ -387,7 +396,7 @@ this.children = null; this.renderer = null; -} +}; core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 1cd0f23..0ee06a9 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -3,13 +3,7 @@ // add some extra variables to the container.. Object.assign( core.DisplayObject.prototype, - { - accessible:false, - accessibleTitle:null, - tabIndex:0, - _accessibleActive:false, - _accessibleDiv:false - } + require('./accessibleTarget') ); @@ -84,7 +78,7 @@ * pre bind the functions.. */ this._onKeyDown = this._onKeyDown.bind(this); - this._onMouseMove = this._onMouseMove.bind(this) + this._onMouseMove = this._onMouseMove.bind(this); /** * stores the state of the manager. If there are no accessible objects or the mouse is moving the will be false. @@ -109,7 +103,11 @@ */ AccessibilityManager.prototype.activate = function() { - if(this.isActive)return; + if(this.isActive) + { + return; + } + this.isActive = true; window.document.addEventListener('mousemove', this._onMouseMove, true); @@ -118,7 +116,7 @@ this.renderer.on('postrender', this.update, this); this.renderer.view.parentNode.appendChild(this.div); -} +}; /** * Deactivating will cause the Accessibility layer to be hidden. This is called when a user moves the mouse @@ -126,7 +124,11 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive)return; + if(!this.isActive) + { + return; + } + this.isActive = false; window.document.removeEventListener('mousemove', this._onMouseMove); @@ -136,7 +138,7 @@ this.div.parentNode.removeChild(this.div); -} +}; /** * This recursive function will run throught he scene graph and add any new accessible objects to the DOM layer. @@ -145,7 +147,10 @@ */ AccessibilityManager.prototype.updateAccessibleObjects = function(DisplayObject) { - if(!DisplayObject.visible)return; + if(!DisplayObject.visible) + { + return; + } if(DisplayObject.accessible) { @@ -161,9 +166,9 @@ for (var i = children.length - 1; i >= 0; i--) { - this.updateAccessibleObjects(children[i]) - }; -} + this.updateAccessibleObjects(children[i]); + } +}; /** @@ -177,8 +182,8 @@ this.updateAccessibleObjects(this.renderer._lastObjectRendered); var rect = this.renderer.view.getBoundingClientRect(); - var sx = rect.width / this.renderer.width ; - var sy = rect.height / this.renderer.height ; + var sx = rect.width / this.renderer.width; + var sy = rect.height / this.renderer.height; var div = this.div; @@ -192,7 +197,7 @@ var child = this.children[i]; - if(child.renderId != this.renderId) + if(child.renderId !== this.renderId) { child._accessibleActive = false; @@ -211,8 +216,8 @@ else { // map div to display.. - var div = child._accessibleDiv; - var hitArea = child.hitArea + div = child._accessibleDiv; + var hitArea = child.hitArea; var wt = child.worldTransform; if(child.hitArea) @@ -237,11 +242,11 @@ div.style.height = (hitArea.height * sy) + 'px'; } } - }; + } // increment the render id.. this.renderId++; -} +}; AccessibilityManager.prototype.capHitArea = function (hitArea) { @@ -285,21 +290,21 @@ div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; - div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent' + div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent'; div.style.position = 'absolute'; div.style.zIndex = 2; div.style.borderStyle = 'none'; - div.addEventListener('click', this._onClick.bind(this)) - div.addEventListener('focus', this._onFocus.bind(this)) - div.addEventListener('focusout', this._onFocusOut.bind(this)) + div.addEventListener('click', this._onClick.bind(this)); + div.addEventListener('focus', this._onFocus.bind(this)); + div.addEventListener('focusout', this._onFocusOut.bind(this)); } - div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex + div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex; // @@ -311,7 +316,7 @@ this.children.push(displayObject); this.div.appendChild( displayObject._accessibleDiv ); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; -} +}; /** @@ -322,7 +327,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseover) @@ -332,7 +337,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseout) @@ -342,7 +347,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); -} +}; /** * Is called when a key is pressed @@ -351,9 +356,13 @@ */ AccessibilityManager.prototype._onKeyDown = function(e) { - if(e.keyCode !== 9)return; + if(e.keyCode !== 9) + { + return; + } + this.activate(); -} +}; /** * Is called when the mouse moves across the renderer element @@ -363,7 +372,7 @@ AccessibilityManager.prototype._onMouseMove = function() { this.deactivate(); -} +}; /** @@ -387,7 +396,7 @@ this.children = null; this.renderer = null; -} +}; core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js new file mode 100644 index 0000000..070b753 --- /dev/null +++ b/src/accessibility/accessibleTarget.js @@ -0,0 +1,44 @@ +/** + * Default property values of accessible objects + * used by {@link PIXI.accessibility.AccessibilityManager}. + * + * @mixin + * @memberof PIXI + * @example + * function MyObject() {} + * + * Object.assign( + * MyObject.prototype, + * PIXI.accessibility.accessibleTarget + * ); + */ +var accessibleTarget = { + + /** + * @todo Needs docs. + */ + accessible:false, + + /** + * @todo Needs docs. + */ + accessibleTitle:null, + + /** + * @todo Needs docs. + */ + tabIndex:0, + + /** + * @todo Needs docs. + */ + _accessibleActive:false, + + /** + * @todo Needs docs. + */ + _accessibleDiv:false + +}; + +module.exports = accessibleTarget; diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 1cd0f23..0ee06a9 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -3,13 +3,7 @@ // add some extra variables to the container.. Object.assign( core.DisplayObject.prototype, - { - accessible:false, - accessibleTitle:null, - tabIndex:0, - _accessibleActive:false, - _accessibleDiv:false - } + require('./accessibleTarget') ); @@ -84,7 +78,7 @@ * pre bind the functions.. */ this._onKeyDown = this._onKeyDown.bind(this); - this._onMouseMove = this._onMouseMove.bind(this) + this._onMouseMove = this._onMouseMove.bind(this); /** * stores the state of the manager. If there are no accessible objects or the mouse is moving the will be false. @@ -109,7 +103,11 @@ */ AccessibilityManager.prototype.activate = function() { - if(this.isActive)return; + if(this.isActive) + { + return; + } + this.isActive = true; window.document.addEventListener('mousemove', this._onMouseMove, true); @@ -118,7 +116,7 @@ this.renderer.on('postrender', this.update, this); this.renderer.view.parentNode.appendChild(this.div); -} +}; /** * Deactivating will cause the Accessibility layer to be hidden. This is called when a user moves the mouse @@ -126,7 +124,11 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive)return; + if(!this.isActive) + { + return; + } + this.isActive = false; window.document.removeEventListener('mousemove', this._onMouseMove); @@ -136,7 +138,7 @@ this.div.parentNode.removeChild(this.div); -} +}; /** * This recursive function will run throught he scene graph and add any new accessible objects to the DOM layer. @@ -145,7 +147,10 @@ */ AccessibilityManager.prototype.updateAccessibleObjects = function(DisplayObject) { - if(!DisplayObject.visible)return; + if(!DisplayObject.visible) + { + return; + } if(DisplayObject.accessible) { @@ -161,9 +166,9 @@ for (var i = children.length - 1; i >= 0; i--) { - this.updateAccessibleObjects(children[i]) - }; -} + this.updateAccessibleObjects(children[i]); + } +}; /** @@ -177,8 +182,8 @@ this.updateAccessibleObjects(this.renderer._lastObjectRendered); var rect = this.renderer.view.getBoundingClientRect(); - var sx = rect.width / this.renderer.width ; - var sy = rect.height / this.renderer.height ; + var sx = rect.width / this.renderer.width; + var sy = rect.height / this.renderer.height; var div = this.div; @@ -192,7 +197,7 @@ var child = this.children[i]; - if(child.renderId != this.renderId) + if(child.renderId !== this.renderId) { child._accessibleActive = false; @@ -211,8 +216,8 @@ else { // map div to display.. - var div = child._accessibleDiv; - var hitArea = child.hitArea + div = child._accessibleDiv; + var hitArea = child.hitArea; var wt = child.worldTransform; if(child.hitArea) @@ -237,11 +242,11 @@ div.style.height = (hitArea.height * sy) + 'px'; } } - }; + } // increment the render id.. this.renderId++; -} +}; AccessibilityManager.prototype.capHitArea = function (hitArea) { @@ -285,21 +290,21 @@ div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; - div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent' + div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent'; div.style.position = 'absolute'; div.style.zIndex = 2; div.style.borderStyle = 'none'; - div.addEventListener('click', this._onClick.bind(this)) - div.addEventListener('focus', this._onFocus.bind(this)) - div.addEventListener('focusout', this._onFocusOut.bind(this)) + div.addEventListener('click', this._onClick.bind(this)); + div.addEventListener('focus', this._onFocus.bind(this)); + div.addEventListener('focusout', this._onFocusOut.bind(this)); } - div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex + div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex; // @@ -311,7 +316,7 @@ this.children.push(displayObject); this.div.appendChild( displayObject._accessibleDiv ); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; -} +}; /** @@ -322,7 +327,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseover) @@ -332,7 +337,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseout) @@ -342,7 +347,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); -} +}; /** * Is called when a key is pressed @@ -351,9 +356,13 @@ */ AccessibilityManager.prototype._onKeyDown = function(e) { - if(e.keyCode !== 9)return; + if(e.keyCode !== 9) + { + return; + } + this.activate(); -} +}; /** * Is called when the mouse moves across the renderer element @@ -363,7 +372,7 @@ AccessibilityManager.prototype._onMouseMove = function() { this.deactivate(); -} +}; /** @@ -387,7 +396,7 @@ this.children = null; this.renderer = null; -} +}; core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js new file mode 100644 index 0000000..070b753 --- /dev/null +++ b/src/accessibility/accessibleTarget.js @@ -0,0 +1,44 @@ +/** + * Default property values of accessible objects + * used by {@link PIXI.accessibility.AccessibilityManager}. + * + * @mixin + * @memberof PIXI + * @example + * function MyObject() {} + * + * Object.assign( + * MyObject.prototype, + * PIXI.accessibility.accessibleTarget + * ); + */ +var accessibleTarget = { + + /** + * @todo Needs docs. + */ + accessible:false, + + /** + * @todo Needs docs. + */ + accessibleTitle:null, + + /** + * @todo Needs docs. + */ + tabIndex:0, + + /** + * @todo Needs docs. + */ + _accessibleActive:false, + + /** + * @todo Needs docs. + */ + _accessibleDiv:false + +}; + +module.exports = accessibleTarget; diff --git a/src/accessibility/index.js b/src/accessibility/index.js new file mode 100644 index 0000000..4dd63ff --- /dev/null +++ b/src/accessibility/index.js @@ -0,0 +1,14 @@ +/** + * @file Main export of the PIXI accessibility library + * @author Mat Groves + * @copyright 2013-2015 GoodBoyDigital + * @license {@link https://github.com/pixijs/pixi.js/blob/master/LICENSE|MIT License} + */ + +/** + * @namespace PIXI.interaction + */ +module.exports = { + accessibleTarget: require('./accessibleTarget'), + AccessibilityManager: require('./AccessibilityManager') +}; diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 1cd0f23..0ee06a9 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -3,13 +3,7 @@ // add some extra variables to the container.. Object.assign( core.DisplayObject.prototype, - { - accessible:false, - accessibleTitle:null, - tabIndex:0, - _accessibleActive:false, - _accessibleDiv:false - } + require('./accessibleTarget') ); @@ -84,7 +78,7 @@ * pre bind the functions.. */ this._onKeyDown = this._onKeyDown.bind(this); - this._onMouseMove = this._onMouseMove.bind(this) + this._onMouseMove = this._onMouseMove.bind(this); /** * stores the state of the manager. If there are no accessible objects or the mouse is moving the will be false. @@ -109,7 +103,11 @@ */ AccessibilityManager.prototype.activate = function() { - if(this.isActive)return; + if(this.isActive) + { + return; + } + this.isActive = true; window.document.addEventListener('mousemove', this._onMouseMove, true); @@ -118,7 +116,7 @@ this.renderer.on('postrender', this.update, this); this.renderer.view.parentNode.appendChild(this.div); -} +}; /** * Deactivating will cause the Accessibility layer to be hidden. This is called when a user moves the mouse @@ -126,7 +124,11 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive)return; + if(!this.isActive) + { + return; + } + this.isActive = false; window.document.removeEventListener('mousemove', this._onMouseMove); @@ -136,7 +138,7 @@ this.div.parentNode.removeChild(this.div); -} +}; /** * This recursive function will run throught he scene graph and add any new accessible objects to the DOM layer. @@ -145,7 +147,10 @@ */ AccessibilityManager.prototype.updateAccessibleObjects = function(DisplayObject) { - if(!DisplayObject.visible)return; + if(!DisplayObject.visible) + { + return; + } if(DisplayObject.accessible) { @@ -161,9 +166,9 @@ for (var i = children.length - 1; i >= 0; i--) { - this.updateAccessibleObjects(children[i]) - }; -} + this.updateAccessibleObjects(children[i]); + } +}; /** @@ -177,8 +182,8 @@ this.updateAccessibleObjects(this.renderer._lastObjectRendered); var rect = this.renderer.view.getBoundingClientRect(); - var sx = rect.width / this.renderer.width ; - var sy = rect.height / this.renderer.height ; + var sx = rect.width / this.renderer.width; + var sy = rect.height / this.renderer.height; var div = this.div; @@ -192,7 +197,7 @@ var child = this.children[i]; - if(child.renderId != this.renderId) + if(child.renderId !== this.renderId) { child._accessibleActive = false; @@ -211,8 +216,8 @@ else { // map div to display.. - var div = child._accessibleDiv; - var hitArea = child.hitArea + div = child._accessibleDiv; + var hitArea = child.hitArea; var wt = child.worldTransform; if(child.hitArea) @@ -237,11 +242,11 @@ div.style.height = (hitArea.height * sy) + 'px'; } } - }; + } // increment the render id.. this.renderId++; -} +}; AccessibilityManager.prototype.capHitArea = function (hitArea) { @@ -285,21 +290,21 @@ div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; - div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent' + div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent'; div.style.position = 'absolute'; div.style.zIndex = 2; div.style.borderStyle = 'none'; - div.addEventListener('click', this._onClick.bind(this)) - div.addEventListener('focus', this._onFocus.bind(this)) - div.addEventListener('focusout', this._onFocusOut.bind(this)) + div.addEventListener('click', this._onClick.bind(this)); + div.addEventListener('focus', this._onFocus.bind(this)); + div.addEventListener('focusout', this._onFocusOut.bind(this)); } - div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex + div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex; // @@ -311,7 +316,7 @@ this.children.push(displayObject); this.div.appendChild( displayObject._accessibleDiv ); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; -} +}; /** @@ -322,7 +327,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseover) @@ -332,7 +337,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseout) @@ -342,7 +347,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); -} +}; /** * Is called when a key is pressed @@ -351,9 +356,13 @@ */ AccessibilityManager.prototype._onKeyDown = function(e) { - if(e.keyCode !== 9)return; + if(e.keyCode !== 9) + { + return; + } + this.activate(); -} +}; /** * Is called when the mouse moves across the renderer element @@ -363,7 +372,7 @@ AccessibilityManager.prototype._onMouseMove = function() { this.deactivate(); -} +}; /** @@ -387,7 +396,7 @@ this.children = null; this.renderer = null; -} +}; core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js new file mode 100644 index 0000000..070b753 --- /dev/null +++ b/src/accessibility/accessibleTarget.js @@ -0,0 +1,44 @@ +/** + * Default property values of accessible objects + * used by {@link PIXI.accessibility.AccessibilityManager}. + * + * @mixin + * @memberof PIXI + * @example + * function MyObject() {} + * + * Object.assign( + * MyObject.prototype, + * PIXI.accessibility.accessibleTarget + * ); + */ +var accessibleTarget = { + + /** + * @todo Needs docs. + */ + accessible:false, + + /** + * @todo Needs docs. + */ + accessibleTitle:null, + + /** + * @todo Needs docs. + */ + tabIndex:0, + + /** + * @todo Needs docs. + */ + _accessibleActive:false, + + /** + * @todo Needs docs. + */ + _accessibleDiv:false + +}; + +module.exports = accessibleTarget; diff --git a/src/accessibility/index.js b/src/accessibility/index.js new file mode 100644 index 0000000..4dd63ff --- /dev/null +++ b/src/accessibility/index.js @@ -0,0 +1,14 @@ +/** + * @file Main export of the PIXI accessibility library + * @author Mat Groves + * @copyright 2013-2015 GoodBoyDigital + * @license {@link https://github.com/pixijs/pixi.js/blob/master/LICENSE|MIT License} + */ + +/** + * @namespace PIXI.interaction + */ +module.exports = { + accessibleTarget: require('./accessibleTarget'), + AccessibilityManager: require('./AccessibilityManager') +}; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index d1dd171..75ed244 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -517,6 +517,7 @@ * @param [y=0] {number} The Y position * @param [scaleX=1] {number} The X scale value * @param [scaleY=1] {number} The Y scale value + * @param [rotation=0] {number} The rotation * @param [skewX=0] {number} The X skew value * @param [skewY=0] {number} The Y skew value * @param [pivotX=0] {number} The X pivot value diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 1cd0f23..0ee06a9 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -3,13 +3,7 @@ // add some extra variables to the container.. Object.assign( core.DisplayObject.prototype, - { - accessible:false, - accessibleTitle:null, - tabIndex:0, - _accessibleActive:false, - _accessibleDiv:false - } + require('./accessibleTarget') ); @@ -84,7 +78,7 @@ * pre bind the functions.. */ this._onKeyDown = this._onKeyDown.bind(this); - this._onMouseMove = this._onMouseMove.bind(this) + this._onMouseMove = this._onMouseMove.bind(this); /** * stores the state of the manager. If there are no accessible objects or the mouse is moving the will be false. @@ -109,7 +103,11 @@ */ AccessibilityManager.prototype.activate = function() { - if(this.isActive)return; + if(this.isActive) + { + return; + } + this.isActive = true; window.document.addEventListener('mousemove', this._onMouseMove, true); @@ -118,7 +116,7 @@ this.renderer.on('postrender', this.update, this); this.renderer.view.parentNode.appendChild(this.div); -} +}; /** * Deactivating will cause the Accessibility layer to be hidden. This is called when a user moves the mouse @@ -126,7 +124,11 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive)return; + if(!this.isActive) + { + return; + } + this.isActive = false; window.document.removeEventListener('mousemove', this._onMouseMove); @@ -136,7 +138,7 @@ this.div.parentNode.removeChild(this.div); -} +}; /** * This recursive function will run throught he scene graph and add any new accessible objects to the DOM layer. @@ -145,7 +147,10 @@ */ AccessibilityManager.prototype.updateAccessibleObjects = function(DisplayObject) { - if(!DisplayObject.visible)return; + if(!DisplayObject.visible) + { + return; + } if(DisplayObject.accessible) { @@ -161,9 +166,9 @@ for (var i = children.length - 1; i >= 0; i--) { - this.updateAccessibleObjects(children[i]) - }; -} + this.updateAccessibleObjects(children[i]); + } +}; /** @@ -177,8 +182,8 @@ this.updateAccessibleObjects(this.renderer._lastObjectRendered); var rect = this.renderer.view.getBoundingClientRect(); - var sx = rect.width / this.renderer.width ; - var sy = rect.height / this.renderer.height ; + var sx = rect.width / this.renderer.width; + var sy = rect.height / this.renderer.height; var div = this.div; @@ -192,7 +197,7 @@ var child = this.children[i]; - if(child.renderId != this.renderId) + if(child.renderId !== this.renderId) { child._accessibleActive = false; @@ -211,8 +216,8 @@ else { // map div to display.. - var div = child._accessibleDiv; - var hitArea = child.hitArea + div = child._accessibleDiv; + var hitArea = child.hitArea; var wt = child.worldTransform; if(child.hitArea) @@ -237,11 +242,11 @@ div.style.height = (hitArea.height * sy) + 'px'; } } - }; + } // increment the render id.. this.renderId++; -} +}; AccessibilityManager.prototype.capHitArea = function (hitArea) { @@ -285,21 +290,21 @@ div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; - div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent' + div.style.backgroundColor = this.debug ? 'rgba(255,0,0,0.5)' : 'transparent'; div.style.position = 'absolute'; div.style.zIndex = 2; div.style.borderStyle = 'none'; - div.addEventListener('click', this._onClick.bind(this)) - div.addEventListener('focus', this._onFocus.bind(this)) - div.addEventListener('focusout', this._onFocusOut.bind(this)) + div.addEventListener('click', this._onClick.bind(this)); + div.addEventListener('focus', this._onFocus.bind(this)); + div.addEventListener('focusout', this._onFocusOut.bind(this)); } - div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex + div.title = displayObject.accessibleTitle || 'displayObject ' + this.tabIndex; // @@ -311,7 +316,7 @@ this.children.push(displayObject); this.div.appendChild( displayObject._accessibleDiv ); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; -} +}; /** @@ -322,7 +327,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseover) @@ -332,7 +337,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); -} +}; /** * Maps the div focus events to pixis InteractionManager (mouseout) @@ -342,7 +347,7 @@ { var interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); -} +}; /** * Is called when a key is pressed @@ -351,9 +356,13 @@ */ AccessibilityManager.prototype._onKeyDown = function(e) { - if(e.keyCode !== 9)return; + if(e.keyCode !== 9) + { + return; + } + this.activate(); -} +}; /** * Is called when the mouse moves across the renderer element @@ -363,7 +372,7 @@ AccessibilityManager.prototype._onMouseMove = function() { this.deactivate(); -} +}; /** @@ -387,7 +396,7 @@ this.children = null; this.renderer = null; -} +}; core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js new file mode 100644 index 0000000..070b753 --- /dev/null +++ b/src/accessibility/accessibleTarget.js @@ -0,0 +1,44 @@ +/** + * Default property values of accessible objects + * used by {@link PIXI.accessibility.AccessibilityManager}. + * + * @mixin + * @memberof PIXI + * @example + * function MyObject() {} + * + * Object.assign( + * MyObject.prototype, + * PIXI.accessibility.accessibleTarget + * ); + */ +var accessibleTarget = { + + /** + * @todo Needs docs. + */ + accessible:false, + + /** + * @todo Needs docs. + */ + accessibleTitle:null, + + /** + * @todo Needs docs. + */ + tabIndex:0, + + /** + * @todo Needs docs. + */ + _accessibleActive:false, + + /** + * @todo Needs docs. + */ + _accessibleDiv:false + +}; + +module.exports = accessibleTarget; diff --git a/src/accessibility/index.js b/src/accessibility/index.js new file mode 100644 index 0000000..4dd63ff --- /dev/null +++ b/src/accessibility/index.js @@ -0,0 +1,14 @@ +/** + * @file Main export of the PIXI accessibility library + * @author Mat Groves + * @copyright 2013-2015 GoodBoyDigital + * @license {@link https://github.com/pixijs/pixi.js/blob/master/LICENSE|MIT License} + */ + +/** + * @namespace PIXI.interaction + */ +module.exports = { + accessibleTarget: require('./accessibleTarget'), + AccessibilityManager: require('./AccessibilityManager') +}; diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index d1dd171..75ed244 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -517,6 +517,7 @@ * @param [y=0] {number} The Y position * @param [scaleX=1] {number} The X scale value * @param [scaleY=1] {number} The Y scale value + * @param [rotation=0] {number} The rotation * @param [skewX=0] {number} The X skew value * @param [skewY=0] {number} The Y skew value * @param [pivotX=0] {number} The X pivot value diff --git a/src/index.js b/src/index.js index 3d92b5d..aa515c8 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,7 @@ core.interaction = require('./interaction'); core.loaders = require('./loaders'); core.mesh = require('./mesh'); -core.accessibility = require('./accessibility/AccessibilityManager'); +core.accessibility = require('./accessibility'); // export a premade loader instance /**