From 427eb6383959f626808a7a76ef75d294dc83535c Mon Sep 17 00:00:00 2001 From: Paul Smith Date: Mon, 25 Jul 2016 15:31:58 +0100 Subject: [PATCH 1/3] shim for anchors with role="button" to trigger click on pressing space --- javascripts/govuk/anchor-buttons.js | 55 +++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 javascripts/govuk/anchor-buttons.js diff --git a/javascripts/govuk/anchor-buttons.js b/javascripts/govuk/anchor-buttons.js new file mode 100644 index 00000000..1da46229 --- /dev/null +++ b/javascripts/govuk/anchor-buttons.js @@ -0,0 +1,55 @@ +(function(global, customConfig) { + "use strict"; + + var $ = global.jQuery; + var GOVUK = global.GOVUK || {}; + + GOVUK.anchorButtons = { + + // default configuration that can be overridden by passing object as second parameter to module + config: $.extend({ + // setting to true will disable the init function upon execution + disableInit: false, + // the target element(s) to attach the shim event to + selector: 'a[role="button"]', + // array of keys to match against upon the keyup event + keycodes: [ + 32 // spacekey + ], + }, customConfig), + + // event behaviour (not a typical anonymous function for resuse if needed) + triggerClickOnTarget: function triggerClickOnTarget(event) { + var code = event.charCode || event.keyCode; + // if the keyCode/charCode from this event is in the keycodes array then + if ($.inArray(code, this.config.keycodes) !== -1) { + event.preventDefault(); + // trigger the target's click event + $(event.target).trigger("click"); + } + }, + + // init function (so it can be executed again if needed) + init: function init() { + var $elms = $(this.config.selector); + // if found elements that match the selector in config (or customConfig) then + if($elms.length > 0) { + // iterate them giving access to current scope + $elms.each(function(index, elm){ + // attach triggerClickOnTarget with current scope to the keyup event + $(elm).on('keyup', this.triggerClickOnTarget.bind(this)); + }.bind(this)); + } + } + + }; + + // if disbaleInit is not true then run the init method + if(!GOVUK.anchorButtons.config.disableInit) { + GOVUK.anchorButtons.init(); + } + + // hand back to global + global.GOVUK = GOVUK; + +})(window); \ No newline at end of file From 91d68417c610642708498966d05b34c01e0464d0 Mon Sep 17 00:00:00 2001 From: Paul Smith Date: Tue, 26 Jul 2016 07:35:06 +0100 Subject: [PATCH 2/3] updated comments --- javascripts/govuk/anchor-buttons.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/javascripts/govuk/anchor-buttons.js b/javascripts/govuk/anchor-buttons.js index 1da46229..04be7d47 100644 --- a/javascripts/govuk/anchor-buttons.js +++ b/javascripts/govuk/anchor-buttons.js @@ -1,4 +1,4 @@ -(function(global, customConfig) { +(function(global, settings) { "use strict"; var $ = global.jQuery; @@ -16,7 +16,7 @@ keycodes: [ 32 // spacekey ], - }, customConfig), + }, settings), // event behaviour (not a typical anonymous function for resuse if needed) triggerClickOnTarget: function triggerClickOnTarget(event) { @@ -32,7 +32,7 @@ // init function (so it can be executed again if needed) init: function init() { var $elms = $(this.config.selector); - // if found elements that match the selector in config (or customConfig) then + // if found elements that match the selector in config (or settings) then if($elms.length > 0) { // iterate them giving access to current scope $elms.each(function(index, elm){ From 5f8076deebd1015b80e85dd24ee3d8ee1c0863a3 Mon Sep 17 00:00:00 2001 From: Paul Smith Date: Thu, 28 Jul 2016 10:31:42 +0100 Subject: [PATCH 3/3] refactored after peer review: updates event listener, adds overview comment --- javascripts/govuk/anchor-buttons.js | 50 ++++++++++++++++------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/javascripts/govuk/anchor-buttons.js b/javascripts/govuk/anchor-buttons.js index 04be7d47..5d2e6fc1 100644 --- a/javascripts/govuk/anchor-buttons.js +++ b/javascripts/govuk/anchor-buttons.js @@ -1,4 +1,14 @@ -(function(global, settings) { +// javascript 'shim' to trigger the click event of element(s) +// when the space key is pressed. +// +// usage instructions: +// GOVUK.anchorButtons.init(); +// +// If you want to customise the shim you can pass in a custom configuration +// object with your own selector for the target elements and addional keyup +// codes if there becomes a need to do so. For example: +// GOVUK.anchorButtons.init({ selector: '[role="button"]' }); +(function(global) { "use strict"; var $ = global.jQuery; @@ -7,16 +17,14 @@ GOVUK.anchorButtons = { // default configuration that can be overridden by passing object as second parameter to module - config: $.extend({ - // setting to true will disable the init function upon execution - disableInit: false, + config: { // the target element(s) to attach the shim event to selector: 'a[role="button"]', // array of keys to match against upon the keyup event keycodes: [ 32 // spacekey ], - }, settings), + }, // event behaviour (not a typical anonymous function for resuse if needed) triggerClickOnTarget: function triggerClickOnTarget(event) { @@ -28,26 +36,24 @@ $(event.target).trigger("click"); } }, - - // init function (so it can be executed again if needed) - init: function init() { - var $elms = $(this.config.selector); - // if found elements that match the selector in config (or settings) then - if($elms.length > 0) { - // iterate them giving access to current scope - $elms.each(function(index, elm){ - // attach triggerClickOnTarget with current scope to the keyup event - $(elm).on('keyup', this.triggerClickOnTarget.bind(this)); - }.bind(this)); - } + + // By default this will find all anchors with role attribute set to + // 'button' and will trigger their click event when the spaceky (32) is pressed. + // @method init + // @param {Object} customConfig object to override default configuration + // {String} customConfig.selector a selector for the elements to be 'clicked' + // {Array} customConfig.keycodes an array of javascript keycode values to match against that when pressed will trigger the click + init: function init(customConfig) { + // extend the default config with any custom attributes passed in + this.config = $.extend(this.config, customConfig); + // if we have found elements then: + if($(this.config.selector).length > 0) { + // listen to 'document' for keyup event on the elements and fire the triggerClickOnTarget + $(document).on('keyup', this.config.selector, this.triggerClickOnTarget.bind(this)); + } } }; - - // if disbaleInit is not true then run the init method - if(!GOVUK.anchorButtons.config.disableInit) { - GOVUK.anchorButtons.init(); - } // hand back to global global.GOVUK = GOVUK;