hof 20.3.7-beta-gtm → 20.3.7-timeout-beta

package/frontend/themes/gov-uk/client-js/dialog/index.js

@@ -0,0 +1,361 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
+'use strict';
+
+require('./utils');
+
+const aria = window.aria || {};
+
+aria.Utils = aria.Utils || {};
+
+/**
+ * @description
+ *  Key code constants
+ */
+aria.KeyCode = {
+  BACKSPACE: 8,
+  TAB: 9,
+  RETURN: 13,
+  SHIFT: 16,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+  DELETE: 46
+};
+
+(function () {
+  // eslint-disable-next-line no-console
+  console.log('TEST DIALOG.js', aria);
+  /*
+   * When util functions move focus around, set this true so the focus listener
+   * can ignore the events.
+   */
+  aria.Utils.IgnoreUtilFocusChanges = false;
+
+  aria.Utils.dialogOpenClass = 'has-dialog';
+
+  /**
+   * @description Set focus on descendant nodes until the first focusable element is
+   *       found.
+   * @param element
+   *          DOM node for which to find the first focusable descendant.
+   * @returns {boolean}
+   *  true if a focusable element is found and focus is set.
+   */
+  aria.Utils.focusFirstDescendant = function (element) {
+    for (let i = 0; i < element.childNodes.length; i++) {
+      const child = element.childNodes[i];
+      if (
+        aria.Utils.attemptFocus(child) ||
+        aria.Utils.focusFirstDescendant(child)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }; // end focusFirstDescendant
+
+  /**
+   * @description Find the last descendant node that is focusable.
+   * @param element
+   *          DOM node for which to find the last focusable descendant.
+   * @returns {boolean}
+   *  true if a focusable element is found and focus is set.
+   */
+  aria.Utils.focusLastDescendant = function (element) {
+    for (let i = element.childNodes.length - 1; i >= 0; i--) {
+      const child = element.childNodes[i];
+      if (
+        aria.Utils.attemptFocus(child) ||
+        aria.Utils.focusLastDescendant(child)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }; // end focusLastDescendant
+
+  /**
+   * @description Set Attempt to set focus on the current node.
+   * @param element
+   *          The node to attempt to focus on.
+   * @returns {boolean}
+   *  true if element is focused.
+   */
+  aria.Utils.attemptFocus = function (element) {
+    if (!aria.Utils.isFocusable(element)) {
+      return false;
+    }
+
+    aria.Utils.IgnoreUtilFocusChanges = true;
+    try {
+      element.focus();
+    } catch (e) {
+      // continue regardless of error
+    }
+    aria.Utils.IgnoreUtilFocusChanges = false;
+    return document.activeElement === element;
+  }; // end attemptFocus
+
+  /* Modals can open modals. Keep track of them with this array. */
+  aria.OpenDialogList = aria.OpenDialogList || new Array(0);
+
+  /**
+   * @returns {object} the last opened dialog (the current dialog)
+   */
+  aria.getCurrentDialog = function () {
+    if (aria.OpenDialogList && aria.OpenDialogList.length) {
+      return aria.OpenDialogList[aria.OpenDialogList.length - 1];
+    }
+    return null;
+  };
+
+  aria.closeCurrentDialog = function () {
+    const currentDialog = aria.getCurrentDialog();
+    if (currentDialog) {
+      currentDialog.close();
+      return true;
+    }
+
+    return false;
+  };
+
+  aria.handleEscape = function (event) {
+    const key = event.which || event.keyCode;
+
+    if (key === aria.KeyCode.ESC && aria.closeCurrentDialog()) {
+      event.stopPropagation();
+    }
+  };
+
+  document.addEventListener('keyup', aria.handleEscape);
+
+  /**
+   * @class
+   * @description Dialog object providing modal focus management.
+   *
+   * Assumptions: The element serving as the dialog container is present in the
+   * DOM and hidden. The dialog container has role='dialog'.
+   * @param dialogId
+   *          The ID of the element serving as the dialog container.
+   * @param focusAfterClosed
+   *          Either the DOM node or the ID of the DOM node to focus when the
+   *          dialog closes.
+   * @param focusFirst
+   *          Optional parameter containing either the DOM node or the ID of the
+   *          DOM node to focus when the dialog opens. If not specified, the
+   *          first focusable element in the dialog will receive focus.
+   */
+  aria.Dialog = function (dialogId, focusAfterClosed, focusFirst) {
+    this.dialogNode = document.getElementById(dialogId);
+    if (this.dialogNode === null) {
+      throw new Error('No element found with id="' + dialogId + '".');
+    }
+
+    const validRoles = ['dialog', 'alertdialog'];
+    const isDialog = (this.dialogNode.getAttribute('role') || '')
+      .trim()
+      .split(/\s+/g)
+      .some(function (token) {
+        return validRoles.some(function (role) {
+          return token === role;
+        });
+      });
+    if (!isDialog) {
+      throw new Error(
+        'Dialog() requires a DOM element with ARIA role of dialog or alertdialog.'
+      );
+    }
+
+    // Wrap in an individual backdrop element if one doesn't exist
+    // Native <dialog> elements use the ::backdrop pseudo-element, which
+    // works similarly.
+    const backdropClass = 'dialog-backdrop';
+    if (this.dialogNode.parentNode.classList.contains(backdropClass)) {
+      this.backdropNode = this.dialogNode.parentNode;
+    } else {
+      this.backdropNode = document.createElement('div');
+      this.backdropNode.className = backdropClass;
+      this.dialogNode.parentNode.insertBefore(
+        this.backdropNode,
+        this.dialogNode
+      );
+      this.backdropNode.appendChild(this.dialogNode);
+    }
+    this.backdropNode.classList.add('active');
+
+    // Disable scroll on the body element
+    document.body.classList.add(aria.Utils.dialogOpenClass);
+
+    if (typeof focusAfterClosed === 'string') {
+      this.focusAfterClosed = document.getElementById(focusAfterClosed);
+    } else if (typeof focusAfterClosed === 'object') {
+      this.focusAfterClosed = focusAfterClosed;
+    } else {
+      throw new Error(
+        'the focusAfterClosed parameter is required for the aria.Dialog constructor.'
+      );
+    }
+
+    if (typeof focusFirst === 'string') {
+      this.focusFirst = document.getElementById(focusFirst);
+    } else if (typeof focusFirst === 'object') {
+      this.focusFirst = focusFirst;
+    } else {
+      this.focusFirst = null;
+    }
+
+    // Bracket the dialog node with two invisible, focusable nodes.
+    // While this dialog is open, we use these to make sure that focus never
+    // leaves the document even if dialogNode is the first or last node.
+    const preDiv = document.createElement('div');
+    this.preNode = this.dialogNode.parentNode.insertBefore(
+      preDiv,
+      this.dialogNode
+    );
+    this.preNode.tabIndex = 0;
+    const postDiv = document.createElement('div');
+    this.postNode = this.dialogNode.parentNode.insertBefore(
+      postDiv,
+      this.dialogNode.nextSibling
+    );
+    this.postNode.tabIndex = 0;
+
+    // If this modal is opening on top of one that is already open,
+    // get rid of the document focus listener of the open dialog.
+    if (aria.OpenDialogList.length > 0) {
+      aria.getCurrentDialog().removeListeners();
+    }
+
+    this.addListeners();
+    aria.OpenDialogList.push(this);
+    this.clearDialog();
+    this.dialogNode.className = 'default_dialog'; // make visible
+
+    if (this.focusFirst) {
+      this.focusFirst.focus();
+    } else {
+      aria.Utils.focusFirstDescendant(this.dialogNode);
+    }
+
+    this.lastFocus = document.activeElement;
+  }; // end Dialog constructor
+
+  aria.Dialog.prototype.clearDialog = function () {
+    Array.prototype.map.call(
+      this.dialogNode.querySelectorAll('input'),
+      function (input) {
+        input.value = '';
+      }
+    );
+  };
+
+  /**
+   * @description
+   *  Hides the current top dialog,
+   *  removes listeners of the top dialog,
+   *  restore listeners of a parent dialog if one was open under the one that just closed,
+   *  and sets focus on the element specified for focusAfterClosed.
+   */
+  aria.Dialog.prototype.close = function () {
+    aria.OpenDialogList.pop();
+    this.removeListeners();
+    aria.Utils.remove(this.preNode);
+    aria.Utils.remove(this.postNode);
+    this.dialogNode.className = 'hidden';
+    this.backdropNode.classList.remove('active');
+    this.focusAfterClosed.focus();
+
+    // If a dialog was open underneath this one, restore its listeners.
+    if (aria.OpenDialogList.length > 0) {
+      aria.getCurrentDialog().addListeners();
+    } else {
+      document.body.classList.remove(aria.Utils.dialogOpenClass);
+    }
+  }; // end close
+
+  /**
+   * @description
+   *  Hides the current dialog and replaces it with another.
+   * @param newDialogId
+   *  ID of the dialog that will replace the currently open top dialog.
+   * @param newFocusAfterClosed
+   *  Optional ID or DOM node specifying where to place focus when the new dialog closes.
+   *  If not specified, focus will be placed on the element specified by the dialog being replaced.
+   * @param newFocusFirst
+   *  Optional ID or DOM node specifying where to place focus in the new dialog when it opens.
+   *  If not specified, the first focusable element will receive focus.
+   */
+  aria.Dialog.prototype.replace = function (
+    newDialogId,
+    newFocusAfterClosed,
+    newFocusFirst
+  ) {
+    aria.OpenDialogList.pop();
+    this.removeListeners();
+    aria.Utils.remove(this.preNode);
+    aria.Utils.remove(this.postNode);
+    this.dialogNode.className = 'hidden';
+    this.backdropNode.classList.remove('active');
+
+    const focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed;
+    // eslint-disable-next-line no-new
+    new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst);
+  }; // end replace
+
+  aria.Dialog.prototype.addListeners = function () {
+    document.addEventListener('focus', this.trapFocus, true);
+  }; // end addListeners
+
+  aria.Dialog.prototype.removeListeners = function () {
+    document.removeEventListener('focus', this.trapFocus, true);
+  }; // end removeListeners
+
+  aria.Dialog.prototype.trapFocus = function (event) {
+    if (aria.Utils.IgnoreUtilFocusChanges) {
+      return;
+    }
+    const currentDialog = aria.getCurrentDialog();
+    if (currentDialog.dialogNode.contains(event.target)) {
+      currentDialog.lastFocus = event.target;
+    } else {
+      aria.Utils.focusFirstDescendant(currentDialog.dialogNode);
+      if (currentDialog.lastFocus === document.activeElement) {
+        aria.Utils.focusLastDescendant(currentDialog.dialogNode);
+      }
+      currentDialog.lastFocus = document.activeElement;
+    }
+  }; // end trapFocus
+
+  window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
+    // eslint-disable-next-line no-new
+    new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
+  };
+
+  window.closeDialog = function (closeButton) {
+    const topDialog = aria.getCurrentDialog();
+    if (topDialog.dialogNode.contains(closeButton)) {
+      topDialog.close();
+    }
+  }; // end closeDialog
+
+  window.replaceDialog = function (
+    newDialogId,
+    newFocusAfterClosed,
+    newFocusFirst
+  ) {
+    const topDialog = aria.getCurrentDialog();
+    if (topDialog.dialogNode.contains(document.activeElement)) {
+      topDialog.replace(newDialogId, newFocusAfterClosed, newFocusFirst);
+    }
+  }; // end replaceDialog
+})();

package/frontend/themes/gov-uk/client-js/dialog/utils.js

@@ -0,0 +1,114 @@
+'use strict';
+/**
+ * @namespace aria
+ */
+
+window.aria = window.aria || {};
+
+(function () {
+  // eslint-disable-next-line no-console
+  // console.log('TEST UTILS.js', aria);
+})();
+
+window.aria.Utils = window.aria.Utils || {};
+
+// Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+window.aria.Utils.matches = function (element, selector) {
+  if (!Element.prototype.matches) {
+    Element.prototype.matches =
+      Element.prototype.matchesSelector ||
+      Element.prototype.mozMatchesSelector ||
+      Element.prototype.msMatchesSelector ||
+      Element.prototype.oMatchesSelector ||
+      Element.prototype.webkitMatchesSelector ||
+      function (s) {
+        const matches = element.parentNode.querySelectorAll(s);
+        let i = matches.length;
+        while (--i >= 0 && matches.item(i) !== this) {
+          // empty
+        }
+        return i > -1;
+      };
+  }
+
+  return element.matches(selector);
+};
+
+window.aria.Utils.remove = function (item) {
+  if (item.remove && typeof item.remove === 'function') {
+    return item.remove();
+  }
+  if (
+    item.parentNode &&
+    item.parentNode.removeChild &&
+    typeof item.parentNode.removeChild === 'function'
+  ) {
+    return item.parentNode.removeChild(item);
+  }
+  return false;
+};
+
+window.aria.Utils.isFocusable = function (element) {
+  if (element.tabIndex < 0) {
+    return false;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+};
+
+window.aria.Utils.getAncestorBySelector = function (element, selector) {
+  if (!window.aria.Utils.matches(element, selector + ' ' + element.tagName)) {
+    // Element is not inside an element that matches selector
+    return null;
+  }
+
+  // Move up the DOM tree until a parent matching the selector is found
+  let currentNode = element;
+  let ancestor = null;
+  while (ancestor === null) {
+    if (window.aria.Utils.matches(currentNode.parentNode, selector)) {
+      ancestor = currentNode.parentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return ancestor;
+};
+
+window.aria.Utils.hasClass = function (element, className) {
+  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
+};
+
+window.aria.Utils.addClass = function (element, className) {
+  if (!window.aria.Utils.hasClass(element, className)) {
+    element.className += ' ' + className;
+  }
+};
+
+window.aria.Utils.removeClass = function (element, className) {
+  const classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
+  element.className = element.className.replace(classRegex, ' ').trim();
+};
+
+window.aria.Utils.bindMethods = function (object /* , ...methodNames */) {
+  const methodNames = Array.prototype.slice.call(arguments, 1);
+  methodNames.forEach(function (method) {
+    object[method] = object[method].bind(object);
+  });
+};

package/frontend/themes/gov-uk/client-js/index.js

@@ -11,6 +11,7 @@ var validation = toolkit.validation;
 var GOVUK = require('govuk-frontend');
 GOVUK.initAll();
 window.GOVUK = GOVUK;
+var dialog = require('./dialog');
 var skipToMain = require('./skip-to-main');
 var cookie = require('./govuk-cookies');
 var cookieSettings = require('./cookieSettings');

package/lib/ga-tag.js

@@ -52,12 +52,11 @@ const setupPageMap = routes => {
 module.exports = (app, config) => {
   const gaTagId = config.gaTagId;
   const ga4TagId = config.ga4TagId;
-  const gtmTagId = config.gtmTagId;
-  const environmentType = config.environmentType ? config.environmentType : 'dev';
+  const gtm = config.gtm;
   const gaCrossDomainTrackingTagId = config.gaCrossDomainTrackingTagId;
   const routes = config.routes;
 
-  if (gaTagId || ga4TagId || gtmTagId) {
+  if (gaTagId || ga4TagId || gtm.tagId) {
     const pageMap = setupPageMap(routes);
 
     app.use((req, res, next) => {
@@ -74,17 +73,13 @@ module.exports = (app, config) => {
       };
 
       // Adding extra properties if a GTM TAG is available
-      if (gtmTagId) {
+      if (gtm.tagId) {
+        gtm.config.pageName = gtm.composePageName(page, convertToGTMPage);
         Object.assign(properties, {
-          gtmTagId: gtmTagId,
-          'gtm-page': convertToGTMPage(page),
-          pageEvent: 'pageLoad',
-          pageName: `ETA | Customer Contact Webform | ${convertToGTMPage(page)}`,
-          applicationType: 'ETA | Customer Contact',
-          environmentType: environmentType
+          gtmConfig: JSON.stringify(gtm.config),
+          gtmTagId: gtm.tagId
         });
       }
-
       res.locals = Object.assign(res.locals, properties);
       next();
     });

package/middleware/session-timeout.js

@@ -0,0 +1,23 @@
+'use strict';
+
+module.exports = (options, timers) => {
+  return (req, res, next) => {
+    // eslint-disable-next-line no-console
+    console.log(req.url, 'SESSION TIMOUT:', options.session);
+    if (timers.length >= 2) {
+      // eslint-disable-next-line no-console
+      console.log(timers);
+      for (const t of timers) {
+        clearTimeout(t);
+      }
+    }
+    timers.push(setTimeout(() => {
+      // eslint-disable-next-line no-console,no-alert
+      console.log(req.originalUrl);
+      const err = new Error('Session will expire soon');
+      err.code = 'SESSION_TIMEOUT_WARNING';
+      return next(err);
+    }, 1000 * 10));
+    next();
+  };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.3.7-beta-gtm",
+  "version": "20.3.7-timeout-beta",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",

package/sandbox/apps/sandbox/behaviours/extend-session.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = SuperClass => class extends SuperClass {
+  getValues(req, res, next) {
+    // eslint-disable-next-line no-console
+    console.log(req.sessionModel);
+    next();
+  }
+};

package/sandbox/assets/scss/app.scss

@@ -7,7 +7,7 @@
     border: 1px solid #ccc;
     width: 65%;
   }
-  
+
 .tt-suggestion {
   padding: 0.5em;
 
@@ -25,3 +25,117 @@
 .twitter-typeahead {
   width: 100%;
 }
+
+.hidden {
+  display: none;
+}
+
+[role="dialog"] {
+  box-sizing: border-box;
+  padding: 15px;
+  border: 1px solid #000;
+  background-color: #fff;
+  min-height: 100vh;
+}
+
+@media screen and (min-width: 640px) {
+  [role="dialog"] {
+    position: absolute;
+    top: 25vh;
+    left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
+    transform: translateX(
+        -50%
+    ); /* move backwards 50% of this element's width */
+    min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
+    min-height: auto;
+    box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);
+  }
+}
+
+.dialog_form {
+  margin: 15px;
+}
+
+.dialog_form .label_text {
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  display: inline-block;
+  font-size: 16px;
+  font-weight: bold;
+  width: 30%;
+  text-align: right;
+}
+
+.dialog_form .label_info {
+  box-sizing: border-box;
+  padding-right: 0.5em;
+  font-size: 12px;
+  width: 30%;
+  text-align: right;
+  display: inline-block;
+}
+
+.dialog_form_item {
+  margin: 10px 0;
+  font-size: 0;
+}
+
+.dialog_form_item .wide_input {
+  box-sizing: border-box;
+  max-width: 70%;
+  width: 27em;
+}
+
+.dialog_form_actions {
+  text-align: right;
+  padding: 0 20px 20px;
+}
+
+.dialog_close_button {
+  float: right;
+  position: absolute;
+  top: 10px;
+  left: 92%;
+  height: 25px;
+}
+
+.dialog_close_button img {
+  border: 0;
+}
+
+.dialog_desc {
+  padding: 10px 20px;
+}
+
+/* native <dialog> element uses the ::backdrop pseudo-element */
+
+/* dialog::backdrop, */
+.dialog-backdrop {
+  display: none;
+  position: fixed;
+  overflow-y: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+
+@media screen and (min-width: 640px) {
+  .dialog-backdrop {
+    background: rgb(0 0 0 / 30%);
+  }
+}
+
+.dialog-backdrop.active {
+  display: block;
+}
+
+.no-scroll {
+  overflow-y: auto !important;
+}
+
+/* this is added to the body when a dialog is open */
+.has-dialog {
+  overflow: hidden;
+}

package/sandbox/package.json

@@ -16,7 +16,7 @@
   "author": "",
   "dependencies": {
     "govuk-frontend": "3.14",
-    "jquery": "^3.6.0",
+    "jquery": "^3.6.1",
     "sass": "^1.53.0",
     "typeahead-aria": "^1.0.4"
   },