diff --git a/README.md b/README.md index 1b29a8d8..cabca883 100644 --- a/README.md +++ b/README.md @@ -170,15 +170,19 @@ If necessary, the `create()` method also accepts the `targets` containers (the o ## Events -When shown, hidden and destroyed, the instance will emit certain events. It is possible to subscribe to these with the `on()` method which will receive the dialog DOM element, the [event target](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) (if any) and the [event current target](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget) (if any). +When shown, hidden and destroyed, the instance will emit certain events. It is possible to subscribe to these with the `on()` method which will receive the dialog DOM element and the [event object](https://developer.mozilla.org/en-US/docs/Web/API/Event) (if any). + +The event object can be used to know which trigger (opener / closer) has been used in case of a `show` or `hide` event. ```javascript -dialog.on('show', function (dialogEl, target, currentTarget) { +dialog.on('show', function (dialogEl, event) { // Do something when dialog gets shown + // Note: opener is `event.currentTarget` }); -dialog.on('hide', function (dialogEl, target, currentTarget) { +dialog.on('hide', function (dialogEl, event) { // Do something when dialog gets hidden + // Note: closer is `event.currentTarget` }); dialog.on('destroy', function (dialogEl) { diff --git a/a11y-dialog.js b/a11y-dialog.js index ef930b78..4bbe3515 100644 --- a/a11y-dialog.js +++ b/a11y-dialog.js @@ -227,8 +227,7 @@ /** * Iterate over all registered handlers for given type and call them all with - * the dialog element as first argument, event target as second argument, if - * any, actual trigger (opener / closer) as third argument, if any. + * the dialog element as first argument, event as second argument (if any). * * @access private * @param {string} type @@ -236,11 +235,9 @@ */ A11yDialog.prototype._fire = function (type, event) { var listeners = this._listeners[type] || []; - var target = event ? event.target : void 0; - var currentTarget = event ? event.currentTarget : void 0; listeners.forEach(function (listener) { - listener(this.node, target, currentTarget); + listener(this.node, event); }.bind(this)); }; diff --git a/a11y-dialog.min.js b/a11y-dialog.min.js index 4ac611f0..c9e5f840 100644 --- a/a11y-dialog.min.js +++ b/a11y-dialog.min.js @@ -1,2 +1,2 @@ -/*! a11y-dialog 3.1.0 — © Edenspiekermann */ -!function(t){"use strict";function e(t,e){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this.node=t,this._listeners={},this.create(e)}function i(t){return Array.prototype.slice.call(t)}function n(t,e){return i((e||document).querySelectorAll(t))}function s(t){return NodeList.prototype.isPrototypeOf(t)?i(t):Element.prototype.isPrototypeOf(t)?[t]:"string"==typeof t?n(t):void 0}function o(t){var e=r(t);e.length&&e[0].focus()}function r(t){return n(c.join(","),t).filter(function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)})}function h(t,e){var i=r(t),n=i.indexOf(document.activeElement);e.shiftKey&&0===n?(i[i.length-1].focus(),e.preventDefault()):e.shiftKey||n!==i.length-1||(i[0].focus(),e.preventDefault())}function d(t){var e=i(t.parentNode.childNodes),n=e.filter(function(t){return 1===t.nodeType});return n.splice(n.indexOf(t),1),n}var a,c=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'];e.prototype.create=function(t){return this._targets=this._targets||s(t)||d(this.node),this.node.setAttribute("aria-hidden",!0),this.shown=!1,this._openers=n('[data-a11y-dialog-show="'+this.node.id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=n("[data-a11y-dialog-hide]",this.node).concat(n('[data-a11y-dialog-hide="'+this.node.id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},e.prototype.show=function(t){return this.shown?this:(this.shown=!0,this.node.removeAttribute("aria-hidden"),this._targets.forEach(function(t){var e=t.getAttribute("aria-hidden");e&&t.setAttribute("data-a11y-dialog-original",e),t.setAttribute("aria-hidden","true")}),a=document.activeElement,o(this.node),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t),this)},e.prototype.hide=function(t){return this.shown?(this.shown=!1,this.node.setAttribute("aria-hidden","true"),this._targets.forEach(function(t){var e=t.getAttribute("data-a11y-dialog-original");e?(t.setAttribute("aria-hidden",e),t.removeAttribute("data-a11y-dialog-original")):t.removeAttribute("aria-hidden")}),a&&a.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},e.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},e.prototype.on=function(t,e){return void 0===this._listeners[t]&&(this._listeners[t]=[]),this._listeners[t].push(e),this},e.prototype.off=function(t,e){var i=this._listeners[t].indexOf(e);return i>-1&&this._listeners[t].splice(i,1),this},e.prototype._fire=function(t,e){var i=this._listeners[t]||[],n=e?e.target:void 0,s=e?e.currentTarget:void 0;i.forEach(function(t){t(this.node,n,s)}.bind(this))},e.prototype._bindKeypress=function(t){this.shown&&27===t.which&&(t.preventDefault(),this.hide()),this.shown&&9===t.which&&h(this.node,t)},e.prototype._maintainFocus=function(t){this.shown&&!this.node.contains(t.target)&&o(this.node)},"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:"function"==typeof define&&define.amd?define("A11yDialog",[],function(){return e}):"object"==typeof t&&(t.A11yDialog=e)}("undefined"!=typeof global?global:window); +/*! a11y-dialog 4.0.0 — © Edenspiekermann */ +!function(t){"use strict";function e(t,e){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this.node=t,this._listeners={},this.create(e)}function i(t){return Array.prototype.slice.call(t)}function n(t,e){return i((e||document).querySelectorAll(t))}function s(t){return NodeList.prototype.isPrototypeOf(t)?i(t):Element.prototype.isPrototypeOf(t)?[t]:"string"==typeof t?n(t):void 0}function o(t){var e=r(t);e.length&&e[0].focus()}function r(t){return n(c.join(","),t).filter(function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)})}function h(t,e){var i=r(t),n=i.indexOf(document.activeElement);e.shiftKey&&0===n?(i[i.length-1].focus(),e.preventDefault()):e.shiftKey||n!==i.length-1||(i[0].focus(),e.preventDefault())}function d(t){var e=i(t.parentNode.childNodes),n=e.filter(function(t){return 1===t.nodeType});return n.splice(n.indexOf(t),1),n}var a,c=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'];e.prototype.create=function(t){return this._targets=this._targets||s(t)||d(this.node),this.node.setAttribute("aria-hidden",!0),this.shown=!1,this._openers=n('[data-a11y-dialog-show="'+this.node.id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=n("[data-a11y-dialog-hide]",this.node).concat(n('[data-a11y-dialog-hide="'+this.node.id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},e.prototype.show=function(t){return this.shown?this:(this.shown=!0,this.node.removeAttribute("aria-hidden"),this._targets.forEach(function(t){var e=t.getAttribute("aria-hidden");e&&t.setAttribute("data-a11y-dialog-original",e),t.setAttribute("aria-hidden","true")}),a=document.activeElement,o(this.node),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t),this)},e.prototype.hide=function(t){return this.shown?(this.shown=!1,this.node.setAttribute("aria-hidden","true"),this._targets.forEach(function(t){var e=t.getAttribute("data-a11y-dialog-original");e?(t.setAttribute("aria-hidden",e),t.removeAttribute("data-a11y-dialog-original")):t.removeAttribute("aria-hidden")}),a&&a.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},e.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},e.prototype.on=function(t,e){return void 0===this._listeners[t]&&(this._listeners[t]=[]),this._listeners[t].push(e),this},e.prototype.off=function(t,e){var i=this._listeners[t].indexOf(e);return i>-1&&this._listeners[t].splice(i,1),this},e.prototype._fire=function(t,e){(this._listeners[t]||[]).forEach(function(t){t(this.node,e)}.bind(this))},e.prototype._bindKeypress=function(t){this.shown&&27===t.which&&(t.preventDefault(),this.hide()),this.shown&&9===t.which&&h(this.node,t)},e.prototype._maintainFocus=function(t){this.shown&&!this.node.contains(t.target)&&o(this.node)},"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:"function"==typeof define&&define.amd?define("A11yDialog",[],function(){return e}):"object"==typeof t&&(t.A11yDialog=e)}("undefined"!=typeof global?global:window); diff --git a/example/main.js b/example/main.js index ef930b78..4bbe3515 100644 --- a/example/main.js +++ b/example/main.js @@ -227,8 +227,7 @@ /** * Iterate over all registered handlers for given type and call them all with - * the dialog element as first argument, event target as second argument, if - * any, actual trigger (opener / closer) as third argument, if any. + * the dialog element as first argument, event as second argument (if any). * * @access private * @param {string} type @@ -236,11 +235,9 @@ */ A11yDialog.prototype._fire = function (type, event) { var listeners = this._listeners[type] || []; - var target = event ? event.target : void 0; - var currentTarget = event ? event.currentTarget : void 0; listeners.forEach(function (listener) { - listener(this.node, target, currentTarget); + listener(this.node, event); }.bind(this)); }; diff --git a/package.json b/package.json index 4d621529..aa392c6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "a11y-dialog", - "version": "3.1.0", + "version": "4.0.0", "description": "A tiny script to make dialog windows accessible to assistive technology users.", "homepage": "https://github.com/edenspiekermann/a11y-dialog", "main": "a11y-dialog.js",