hof 22.8.4 → 22.9.0-beta

package/package/frontend/toolkit/assets/javascript/character-count.js

@@ -0,0 +1,99 @@
+/* eslint-disable max-len, no-var, no-use-before-define, no-param-reassign, vars-on-top, radix */
+'use strict';
+
+var helpers = require('./helpers');
+
+CharacterCount.prototype.updateCount = function () {
+  var currentLength = this.$textarea.value.length;
+  var characterNoun = ' characters';
+  var remainderSuffix = ' remaining';
+
+  if (this.maxLength - currentLength === 1 || currentLength - this.maxLength === 1) {
+    characterNoun = ' character';
+  }
+
+  if (this.maxLength - currentLength < 0) {
+    remainderSuffix = ' too many';
+  }
+
+  function addCommas(numString) {
+    var rgx = /(\d+)(\d{3})/;
+    while (rgx.test(numString)) {
+      numString = numString.replace(rgx, '$1' + ',' + '$2');
+    }
+    return numString;
+  }
+
+  // format the number with commas separating thousands, so screen readers do not read them as a year
+  var number = addCommas(Math.abs(this.maxLength - currentLength).toString());
+
+  this.$maxlengthHint.innerHTML = 'You have ' + number + characterNoun + remainderSuffix;
+
+  if (currentLength >= this.maxLength + 1) {
+    helpers.removeClass(this.$maxlengthHint, 'govuk-hint');
+    helpers.addClass(this.$maxlengthHint, 'govuk-error-message');
+    helpers.addClass(this.$textarea, 'textarea-error');
+  } else {
+    helpers.addClass(this.$maxlengthHint, 'govuk-hint');
+    helpers.removeClass(this.$maxlengthHint, 'govuk-error-message');
+    helpers.removeClass(this.$textarea, 'textarea-error');
+  }
+};
+
+CharacterCount.prototype.checkIfLengthChanged = function () {
+  if (this.$textarea.length !== this.oldLength) {
+    this.updateCount();
+    this.oldLength = this.$textarea.value.length;
+  }
+};
+
+CharacterCount.prototype.handleFocus = function () {
+  this.lengthChecker = setInterval(this.checkIfLengthChanged.bind(this), 1000);
+};
+
+CharacterCount.prototype.handleBlur = function () {
+  clearInterval(this.lengthChecker);
+};
+
+CharacterCount.prototype.init = function () {
+  // Updates hint to js-enabled message
+  this.updateCount();
+
+  // remove maxLength restriction on element
+  this.$textarea.removeAttribute('maxlength');
+
+  // set change event on textarea
+  helpers.addEvent(this.$textarea, 'input', this.updateCount.bind(this));
+  // some assistive technologies do not trigger input events when entering text into fields
+  // add polling functions to check if input length has changed in these circumstances
+  helpers.addEvent(this.$textarea, 'focus', this.handleFocus.bind(this));
+  helpers.addEvent(this.$textarea, 'blur', this.handleBlur.bind(this));
+};
+
+function CharacterCount($textarea) {
+  // passes in textarea and attaches to object
+  this.$textarea = $textarea;
+
+  // attaches hint to object
+  this.$maxlengthHint = document.querySelector('[id=' + this.$textarea.id + '-maxlength-hint]');
+
+  // set maxlength to variable
+  this.maxLength = parseInt(this.$textarea.getAttribute('maxlength'));
+
+  // save old length for polling comparison
+  this.oldLength = 0;
+}
+
+function characterCountAll() {
+  // find all textareas
+  var $allTextAreas = document.getElementsByTagName('textarea');
+
+  // for each textarea if it has maxlength create new characterCount object
+  for (var i = 0; i < $allTextAreas.length; i++) {
+    if ($allTextAreas[i].hasAttribute('maxlength')) {
+      new CharacterCount($allTextAreas[i]).init();
+    }
+  }
+}
+
+module.exports = characterCountAll;

package/package/frontend/toolkit/assets/javascript/form-focus.js

@@ -0,0 +1,101 @@
+/* eslint-disable max-len, no-var, no-param-reassign, vars-on-top */
+/**
+ * This module adds the yellow focus border to:
+ *   * labels with class block-label that are the parent element of radio buttons
+ *   * labels with class block-label that are the parent element of check boxes
+ *   * details elements
+ *
+ */
+
+'use strict';
+
+var each = require('lodash').forEach;
+var groupBy = require('lodash').groupBy;
+
+var NAME = 'form-focus';
+
+var helpers = require('./helpers');
+var groups;
+var blockLabelClass = 'block-label';
+var focussedClass = 'focused';
+var selectedClass = 'selected';
+
+function focussed(e) {
+  helpers.addClass(helpers.target(e).parentNode, focussedClass);
+}
+
+function blurred(e) {
+  helpers.removeClass(helpers.target(e).parentNode, focussedClass);
+}
+
+function clicked(e, target) {
+  target = target || helpers.target(e);
+  each(groups[target.name], function (input) {
+    if (input.checked) {
+      helpers.addClass(input.parentNode, selectedClass);
+    } else {
+      helpers.removeClass(input.parentNode, selectedClass);
+    }
+  });
+}
+
+function bindInputEvents(label) {
+  if (helpers.hasClass(label, blockLabelClass)) {
+    var input = label.getElementsByTagName('input')[0];
+
+    if (input && input.type && input.type.match(/radio|checkbox/)) {
+      helpers.addEvent(input, 'focus', focussed);
+      helpers.addEvent(input, 'blur', blurred);
+      helpers.addEvent(input, 'click', clicked);
+      clicked(null, input);
+    }
+  }
+}
+
+function bindSummaryEvents(summary) {
+  helpers.addEvent(summary, 'focus', focussed);
+  helpers.addEvent(summary, 'blur', blurred);
+}
+
+function setupLabels(labels) {
+  groups = groupBy(document.getElementsByTagName('input'), 'name');
+  for (var i = 0, len = labels.length; i < len; i++) {
+    helpers.once(labels[i], NAME, bindInputEvents);
+  }
+}
+
+function formFocus() {
+  var forms = document.getElementsByTagName('form');
+  var getElementFromSummaryLink = window.location.hash.replace(/^#/, '');
+  var getEditPath = window.location.pathname.split('/').pop();
+  var labels;
+  var summaries;
+
+  var editMode = getElementFromSummaryLink && getEditPath === 'edit';
+
+  if (getElementFromSummaryLink && document.getElementById(getElementFromSummaryLink) && editMode) {
+    document.getElementById(getElementFromSummaryLink).focus();
+  }
+
+  if (getElementFromSummaryLink && document.getElementById(getElementFromSummaryLink + '-group') && editMode) {
+    document.getElementById(getElementFromSummaryLink + '-group').scrollIntoView();
+  }
+
+  if (document.getElementById(getElementFromSummaryLink + '-day') && forms.length === 1 && editMode) {
+    document.getElementById(getElementFromSummaryLink + '-day').focus();
+  }
+
+  if (forms.length > 0) {
+    labels = document.getElementsByTagName('label');
+    if (labels) {
+      setupLabels(labels);
+    }
+  }
+
+  summaries = document.getElementsByTagName('summary');
+  for (var i = 0, len = summaries.length; i < len; i++) {
+    helpers.once(summaries[i], NAME, bindSummaryEvents);
+  }
+}
+
+module.exports = formFocus;

package/package/frontend/toolkit/assets/javascript/helpers.js

@@ -0,0 +1,177 @@
+/* eslint-disable max-len, no-var, no-param-reassign, vars-on-top, no-extend-native */
+'use strict';
+
+var each = require('lodash').forEach;
+
+var DESKTOP_WIDTH = 769;
+
+var helpers = {};
+
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function (obj, start) {
+    for (var i = (start || 0), j = this.length; i < j; i++) {
+      if (this[i] === obj) { return i; }
+    }
+    return -1;
+  };
+}
+
+helpers.documentReady = function (callback) {
+  this.addEvent(document, 'DOMContentLoaded', callback);
+  this.addEvent(window, 'load', callback);
+};
+
+helpers.addEvent = function (el, type, callback) {
+  if (el.addEventListener) {
+    el.addEventListener(type, callback, false);
+  } else if (el.attachEvent) {
+    el.attachEvent('on' + type, callback);
+  }
+};
+
+helpers.removeEvent = function (el, type, callback) {
+  if (el.removeEventListener) {
+    el.removeEventListener(type, callback, false);
+  } else if (el.detachEvent) {
+    el.detachEvent('on' + type, callback);
+  }
+};
+
+helpers.target = function (e) {
+  return e.target || e.srcElement;
+};
+
+/**
+ * Cross-browser trigger event method
+ */
+helpers.triggerEvent = function (el, type) {
+  var evt;
+
+  if (document.createEvent) {
+    evt = new Event(type);
+    el.dispatchEvent(evt);
+  } else {
+    evt = document.createEventObject();
+    el.fireEvent('on' + type, evt);
+  }
+};
+
+helpers.preventDefault = function (e) {
+  e.preventDefault ? e.preventDefault() : event.returnValue = false;
+};
+
+/*
+** Check if an element has a class name
+***/
+helpers.hasClass = function (el, className) {
+  if (el.className.split(/\s/).indexOf(className) !== -1) {
+    return true;
+  }
+  return false;
+};
+
+helpers.addClass = function (el, className) {
+  var current = el.className;
+
+  if (current === '') {
+    el.className = className;
+  } else {
+    current = current.split(' ');
+
+    if (current.indexOf(className) !== -1) {
+      this.stripClasses(current, className);
+    }
+
+    current.push(className);
+    el.className = current.join(' ');
+  }
+};
+
+helpers.addClasses = function (el, classNames) {
+  each(classNames, function (className) {
+    helpers.addClass(el, className);
+  });
+};
+
+/*
+** Strips all class names with name className from array
+***/
+helpers.stripClasses = function (arr, className) {
+  for (var i = 0; i < arr.length; i++) {
+    if(arr[i] === className) {
+      arr.splice(i, 1);
+      --i;
+    }
+  }
+};
+
+helpers.removeClass = function (el, className) {
+  var current = el.className;
+
+  if (current !== '') {
+    current = current.split(' ');
+    this.stripClasses(current, className);
+    el.className = current.join(' ');
+  }
+};
+
+helpers.getElementsByClass = function (parent, tag, className) {
+  if (parent.getElementsByClassName) {
+    return parent.getElementsByClassName(className);
+  }
+  var elems = [];
+  each(parent.getElementsByTagName(tag), function (t) {
+    if (helpers.hasClass(t, className)) {
+      elems.push(t);
+    }
+  });
+  return elems;
+};
+
+helpers.once = function (elem, key, callback) {
+  if (!elem) { return; }
+  elem.started = elem.started || {};
+  if (!elem.started[key]) {
+    elem.started[key] = true;
+    callback(elem);
+  }
+};
+
+helpers.viewportWidth = function () {
+  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+};
+
+helpers.scrollY = function () {
+  return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+};
+
+helpers.isDesktop = function () {
+  return helpers.viewportWidth() >= DESKTOP_WIDTH;
+};
+
+helpers.isJSWindow = function () {
+  return window.opener !== null;
+};
+
+helpers.getStyle = function (elem, prop) {
+  var val = '';
+  if (document.defaultView && document.defaultView.getComputedStyle) {
+    val = document.defaultView.getComputedStyle(elem, '').getPropertyValue(prop);
+  } else if (elem.currentStyle) {
+    prop = prop.replace(/\-(\w)/g, function (match, c) {
+      return c.toUpperCase();
+    });
+    val = elem.currentStyle[prop];
+  }
+  return val;
+};
+
+helpers.pagehide = function (func) {
+  if ('onpagehide' in window) {
+    helpers.addEvent(window, 'pagehide', func);
+  } else {
+    helpers.addEvent(window, 'unload', func);
+  }
+};
+
+module.exports = helpers;

package/package/frontend/toolkit/assets/javascript/progressive-reveal.js

@@ -0,0 +1,72 @@
+/* eslint-disable max-len, no-var, no-param-reassign, vars-on-top */
+'use strict';
+
+var each = require('lodash').forEach;
+var groupBy = require('lodash').groupBy;
+
+var helpers = require('./helpers');
+var inputs; var groups;
+var toggleAttr = 'data-toggle';
+var checkboxHiddenClass = 'govuk-checkboxes__conditional--hidden';
+var radioHiddenClass = 'govuk-radios__conditional--hidden';
+
+function inputClicked(e, target) {
+  target = target || helpers.target(e);
+  var shown;
+  each(groups[target.name], function (input) {
+    var hiddenClass = (input.type.match(/checkbox/)) ? checkboxHiddenClass : radioHiddenClass;
+    var id = input.getAttribute('aria-controls');
+    var toggle = document.getElementById(id);
+    if (toggle) {
+      if (input.checked) {
+        toggle.setAttribute('aria-hidden', 'false');
+        helpers.removeClass(toggle, hiddenClass);
+        shown = toggle.id;
+        var elementToFocus = toggle.querySelectorAll('input,textarea')[0];
+        if ((input === target) && elementToFocus) {
+          elementToFocus.focus();
+        }
+      } else {
+        if (shown !== toggle.id) {
+          toggle.setAttribute('aria-hidden', 'true');
+          helpers.addClass(toggle, hiddenClass);
+        }
+      }
+    }
+  });
+}
+
+function setupReveal(input) {
+  var element = input.getAttribute(toggleAttr);
+  // check if the element supplied is part of an {id}-panel
+  // if so then toggle this parent element to also toggle
+  // associated labels and legends
+  var toggleId = document.getElementById(element + '-panel')
+    ? element + '-panel'
+    : element;
+  var toggle = document.getElementById(toggleId);
+
+  if (toggle) {
+    input.setAttribute('aria-controls', toggleId);
+    inputClicked(null, input);
+  }
+  helpers.addEvent(input, 'click', inputClicked);
+}
+
+function progressiveReveal() {
+  var forms = document.getElementsByTagName('form');
+  var input;
+
+  if (forms.length > 0) {
+    inputs = document.querySelectorAll('input,textarea');
+    groups = groupBy(inputs, 'name');
+    for (var i = 0, num = inputs.length; i < num; i++) {
+      input = inputs[i];
+      if (input.type.match(/radio|checkbox/)) {
+        helpers.once(input, 'progressive-reveal', setupReveal);
+      }
+    }
+  }
+}
+
+module.exports = progressiveReveal;

package/package/frontend/toolkit/assets/javascript/validation.js

@@ -0,0 +1,71 @@
+/* eslint-disable max-len, no-var, no-shadow, vars-on-top */
+var each = require('lodash').forEach;
+
+var helpers = require('./helpers');
+
+var NAME = 'VALIDATION';
+
+var summary;
+
+function clicked(e) {
+  var elem = helpers.target(e);
+
+  var groupId = elem.getAttribute('href').replace(/^#/, '');
+  var group = document.getElementById(groupId + '-group') || document.getElementById(groupId);
+  var inputs;
+
+  if (group) {
+    if (group.getElementsByTagName('input').length) {
+      inputs = group.getElementsByTagName('input');
+    } else if (group.getElementsByTagName('textarea').length) {
+      inputs = group.getElementsByTagName('textarea');
+    } else if (group.getElementsByTagName('select').length) {
+      inputs = group.getElementsByTagName('select');
+    }
+
+    if (inputs) {
+      if (inputs[0].getAttribute('type') === 'hidden') {
+        var getVisibleElements = group.querySelectorAll('input[type=text]');
+        getVisibleElements[0].focus();
+      } else {
+        inputs[0].focus();
+      }
+    }
+  }
+}
+
+function pressed(e) {
+  // Allow the spacebar to trigger the same behaviour
+  if(e.keyCode === 32) {
+    clicked(e);
+  }
+}
+
+function setup(summary) {
+  summary.focus();
+
+  var errors = summary.getElementsByTagName('a');
+
+  each(errors, function (error) {
+    helpers.addEvent(error, 'click', clicked);
+    helpers.addEvent(error, 'keydown', pressed);
+  });
+}
+
+function validation() {
+  var summaries = [];
+
+  if (document.getElementById('content')) {
+    summaries = helpers.getElementsByClass(document.getElementById('content'), 'div', 'validation-summary');
+  }
+
+  if (summaries.length) {
+    summary = summaries[0];
+
+    helpers.once(summary, NAME, function (summary) {
+      setup(summary);
+    });
+  }
+}
+
+module.exports = validation;