hof 20.3.8-beta-gtm → 20.3.8-timeout-beta

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/frontend/themes/gov-uk/styles/govuk.scss

@@ -33,6 +33,7 @@ $path: "/public/images/" !default;
 @import "modules/buttons";
 @import "modules/lists";
 @import "modules/alerts";
+@import "modules/dialogs";
 @import "modules/character-count";
 
 // Pages

package/frontend/themes/gov-uk/styles/modules/_dialogs.scss

@@ -0,0 +1,113 @@
+.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/frontend/toolkit/assets/stylesheets/app.scss

@@ -25,6 +25,7 @@
 @import "modules/buttons";
 @import "modules/lists";
 @import "modules/alerts";
+@import "modules/dialogs";
 
 // Pages
 @import "modules/confirm-page";

package/frontend/toolkit/assets/stylesheets/modules/_dialogs.scss

@@ -0,0 +1,113 @@
+.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/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.8-beta-gtm",
+  "version": "20.3.8-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;
 

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"
   },

package/sandbox/public/css/app.css

@@ -9318,6 +9318,115 @@ fieldset + .reveal {
   margin-top: 0;
 }
 
+.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: 610px; /* == breakpoint - left+right margin */
+    min-height: auto;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 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: rgba(0, 0, 0, 0.3);
+  }
+}
+.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;
+}
+
 .maxlength-hint {
   margin-top: 2px;
   padding-top: 2px;