@ministryofjustice/frontend 3.4.0 → 3.6.0

package/moj/components/multi-file-upload/multi-file-upload.mjs

@@ -0,0 +1,219 @@
+import { dragAndDropSupported, formDataSupported, fileApiSupported } from '../../helpers.mjs';
+
+function MultiFileUpload(params) {
+  if (!(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
+    return
+  }
+
+  this.defaultParams = {
+    uploadFileEntryHook: window.jQuery.noop,
+    uploadFileExitHook: window.jQuery.noop,
+    uploadFileErrorHook: window.jQuery.noop,
+    fileDeleteHook: window.jQuery.noop,
+    uploadStatusText: 'Uploading files, please wait',
+    dropzoneHintText: 'Drag and drop files here or',
+    dropzoneButtonText: 'Choose files'
+  };
+
+  this.params = window.jQuery.extend({}, this.defaultParams, params);
+  this.container = window.jQuery(this.params.container);
+
+  this.container.addClass('moj-multi-file-upload--enhanced');
+
+  this.feedbackContainer = this.container.find(
+    '.moj-multi-file__uploaded-files'
+  );
+  this.setupFileInput();
+  this.setupDropzone();
+  this.setupLabel();
+  this.setupStatusBox();
+  this.container.on(
+    'click',
+    '.moj-multi-file-upload__delete',
+    window.jQuery.proxy(this, 'onFileDeleteClick')
+  );
+}
+
+MultiFileUpload.prototype.setupDropzone = function () {
+  this.fileInput.wrap('<div class="moj-multi-file-upload__dropzone" />');
+  this.dropzone = this.container.find('.moj-multi-file-upload__dropzone');
+  this.dropzone.on('dragover', window.jQuery.proxy(this, 'onDragOver'));
+  this.dropzone.on('dragleave', window.jQuery.proxy(this, 'onDragLeave'));
+  this.dropzone.on('drop', window.jQuery.proxy(this, 'onDrop'));
+};
+
+MultiFileUpload.prototype.setupLabel = function () {
+  this.label = window.jQuery(
+    `<label for="${this.fileInput[0].id}" class="govuk-button govuk-button--secondary">${this.params.dropzoneButtonText}</label>`
+  );
+  this.dropzone.append(
+    `<p class="govuk-body">${this.params.dropzoneHintText}</p>`
+  );
+  this.dropzone.append(this.label);
+};
+
+MultiFileUpload.prototype.setupFileInput = function () {
+  this.fileInput = this.container.find('.moj-multi-file-upload__input');
+  this.fileInput.on('change', window.jQuery.proxy(this, 'onFileChange'));
+  this.fileInput.on('focus', window.jQuery.proxy(this, 'onFileFocus'));
+  this.fileInput.on('blur', window.jQuery.proxy(this, 'onFileBlur'));
+};
+
+MultiFileUpload.prototype.setupStatusBox = function () {
+  this.status = window.jQuery(
+    '<div aria-live="polite" role="status" class="govuk-visually-hidden" />'
+  );
+  this.dropzone.append(this.status);
+};
+
+MultiFileUpload.prototype.onDragOver = function (e) {
+  e.preventDefault();
+  this.dropzone.addClass('moj-multi-file-upload--dragover');
+};
+
+MultiFileUpload.prototype.onDragLeave = function () {
+  this.dropzone.removeClass('moj-multi-file-upload--dragover');
+};
+
+MultiFileUpload.prototype.onDrop = function (e) {
+  e.preventDefault();
+  this.dropzone.removeClass('moj-multi-file-upload--dragover');
+  this.feedbackContainer.removeClass('moj-hidden');
+  this.status.html(this.params.uploadStatusText);
+  this.uploadFiles(e.originalEvent.dataTransfer.files);
+};
+
+MultiFileUpload.prototype.uploadFiles = function (files) {
+  for (let i = 0; i < files.length; i++) {
+    this.uploadFile(files[i]);
+  }
+};
+
+MultiFileUpload.prototype.onFileChange = function (e) {
+  this.feedbackContainer.removeClass('moj-hidden');
+  this.status.html(this.params.uploadStatusText);
+  this.uploadFiles(e.currentTarget.files);
+  this.fileInput.replaceWith(window.jQuery(e.currentTarget).val('').clone(true));
+  this.setupFileInput();
+  this.fileInput.get(0).focus();
+};
+
+MultiFileUpload.prototype.onFileFocus = function (e) {
+  this.label.addClass('moj-multi-file-upload--focused');
+};
+
+MultiFileUpload.prototype.onFileBlur = function (e) {
+  this.label.removeClass('moj-multi-file-upload--focused');
+};
+
+MultiFileUpload.prototype.getSuccessHtml = function (success) {
+  return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`
+};
+
+MultiFileUpload.prototype.getErrorHtml = function (error) {
+  return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`
+};
+
+MultiFileUpload.prototype.getFileRowHtml = function (file) {
+  const html = `
+    <div class="govuk-summary-list__row moj-multi-file-upload__row">;
+      <div class="govuk-summary-list__value moj-multi-file-upload__message">;
+    <span class="moj-multi-file-upload__filename">${file.name}</span>;
+    <span class="moj-multi-file-upload__progress">0%</span>;
+      </div>';
+      <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>;
+    </div>`;
+  return html
+};
+
+MultiFileUpload.prototype.getDeleteButtonHtml = function (file) {
+  return `<button class="moj-multi-file-upload__delete govuk-button govuk-button--secondary govuk-!-margin-bottom-0" type="button" name="delete" value="${file.filename}">
+      Delete <span class="govuk-visually-hidden">${file.originalname}</span>
+    </button>`
+};
+
+MultiFileUpload.prototype.uploadFile = function (file) {
+  this.params.uploadFileEntryHook(this, file);
+  const item = window.jQuery(this.getFileRowHtml(file));
+  const formData = new FormData();
+  formData.append('documents', file);
+  this.feedbackContainer.find('.moj-multi-file-upload__list').append(item);
+
+  window.jQuery.ajax({
+    url: this.params.uploadUrl,
+    type: 'post',
+    data: formData,
+    processData: false,
+    contentType: false,
+    success: window.jQuery.proxy(function (response) {
+      if (response.error) {
+        item
+          .find('.moj-multi-file-upload__message')
+          .html(this.getErrorHtml(response.error));
+        this.status.html(response.error.message);
+      } else {
+        item
+          .find('.moj-multi-file-upload__message')
+          .html(this.getSuccessHtml(response.success));
+        this.status.html(response.success.messageText);
+      }
+      item
+        .find('.moj-multi-file-upload__actions')
+        .append(this.getDeleteButtonHtml(response.file));
+      this.params.uploadFileExitHook(this, file, response);
+    }, this),
+    error: window.jQuery.proxy(function (jqXHR, textStatus, errorThrown) {
+      this.params.uploadFileErrorHook(
+        this,
+        file,
+        jqXHR,
+        textStatus,
+        errorThrown
+      );
+    }, this),
+    xhr: function () {
+      const xhr = new XMLHttpRequest();
+      xhr.upload.addEventListener(
+        'progress',
+        function (e) {
+          if (e.lengthComputable) {
+            let percentComplete = e.loaded / e.total;
+            percentComplete = parseInt(percentComplete * 100, 10);
+            item
+              .find('.moj-multi-file-upload__progress')
+              .text(` ${percentComplete}%`);
+          }
+        },
+        false
+      );
+      return xhr
+    }
+  });
+};
+
+MultiFileUpload.prototype.onFileDeleteClick = function (e) {
+  e.preventDefault(); // if user refreshes page and then deletes
+  const button = window.jQuery(e.currentTarget);
+  const data = {};
+  data[button[0].name] = button[0].value;
+  window.jQuery.ajax({
+    url: this.params.deleteUrl,
+    type: 'post',
+    dataType: 'json',
+    data,
+    success: window.jQuery.proxy(function (response) {
+      if (response.error) ; else {
+        button.parents('.moj-multi-file-upload__row').remove();
+        if (
+          this.feedbackContainer.find('.moj-multi-file-upload__row').length ===
+          0
+        ) {
+          this.feedbackContainer.addClass('moj-hidden');
+        }
+      }
+      this.params.fileDeleteHook(this, response);
+    }, this)
+  });
+};
+
+export { MultiFileUpload };

package/moj/components/multi-select/multi-select.js

@@ -1,75 +1,85 @@
-MOJFrontend.MultiSelect = function (options) {
-  this.container = $(options.container)
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
 
-  if (this.container.data('moj-multi-select-initialised')) {
-    return
-  }
-
-  this.container.data('moj-multi-select-initialised', true)
+  function MultiSelect(options) {
+    this.container = window.jQuery(options.container);
 
-  const idPrefix = options.id_prefix
-  let allId = 'checkboxes-all'
-  if (typeof idPrefix !== 'undefined') {
-    allId = `${idPrefix}checkboxes-all`
-  }
+    if (this.container.data('moj-multi-select-initialised')) {
+      return
+    }
 
-  this.toggle = $(this.getToggleHtml(allId))
-  this.toggleButton = this.toggle.find('input')
-  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'))
-  this.container.append(this.toggle)
-  this.checkboxes = $(options.checkboxes)
-  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'))
-  this.checked = options.checked || false
-}
+    this.container.data('moj-multi-select-initialised', true);
 
-MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
-  let html = ''
-  html +=
-    '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">'
-  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`
-  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`
-  html += '    <span class="govuk-visually-hidden">Select all</span>'
-  html += '  </label>'
-  html += '</div>'
-  return html
-}
+    const idPrefix = options.id_prefix;
+    let allId = 'checkboxes-all';
+    if (typeof idPrefix !== 'undefined') {
+      allId = `${idPrefix}checkboxes-all`;
+    }
 
-MOJFrontend.MultiSelect.prototype.onButtonClick = function (e) {
-  if (this.checked) {
-    this.uncheckAll()
-    this.toggleButton[0].checked = false
-  } else {
-    this.checkAll()
-    this.toggleButton[0].checked = true
+    this.toggle = window.jQuery(this.getToggleHtml(allId));
+    this.toggleButton = this.toggle.find('input');
+    this.toggleButton.on('click', window.jQuery.proxy(this, 'onButtonClick'));
+    this.container.append(this.toggle);
+    this.checkboxes = window.jQuery(options.checkboxes);
+    this.checkboxes.on('click', window.jQuery.proxy(this, 'onCheckboxClick'));
+    this.checked = options.checked || false;
   }
-}
 
-MOJFrontend.MultiSelect.prototype.checkAll = function () {
-  this.checkboxes.each(
-    $.proxy(function (index, el) {
-      el.checked = true
-    }, this)
-  )
-  this.checked = true
-}
+  MultiSelect.prototype.getToggleHtml = function (allId) {
+    let html = '';
+    html +=
+      '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
+    html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
+    html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
+    html += '    <span class="govuk-visually-hidden">Select all</span>';
+    html += '  </label>';
+    html += '</div>';
+    return html
+  };
 
-MOJFrontend.MultiSelect.prototype.uncheckAll = function () {
-  this.checkboxes.each(
-    $.proxy(function (index, el) {
-      el.checked = false
-    }, this)
-  )
-  this.checked = false
-}
+  MultiSelect.prototype.onButtonClick = function (e) {
+    if (this.checked) {
+      this.uncheckAll();
+      this.toggleButton[0].checked = false;
+    } else {
+      this.checkAll();
+      this.toggleButton[0].checked = true;
+    }
+  };
 
-MOJFrontend.MultiSelect.prototype.onCheckboxClick = function (e) {
-  if (!e.target.checked) {
-    this.toggleButton[0].checked = false
-    this.checked = false
-  } else {
-    if (this.checkboxes.filter(':checked').length === this.checkboxes.length) {
-      this.toggleButton[0].checked = true
-      this.checked = true
+  MultiSelect.prototype.checkAll = function () {
+    this.checkboxes.each(
+      window.jQuery.proxy(function (index, el) {
+        el.checked = true;
+      }, this)
+    );
+    this.checked = true;
+  };
+
+  MultiSelect.prototype.uncheckAll = function () {
+    this.checkboxes.each(
+      window.jQuery.proxy(function (index, el) {
+        el.checked = false;
+      }, this)
+    );
+    this.checked = false;
+  };
+
+  MultiSelect.prototype.onCheckboxClick = function (e) {
+    if (!e.target.checked) {
+      this.toggleButton[0].checked = false;
+      this.checked = false;
+    } else {
+      if (this.checkboxes.filter(':checked').length === this.checkboxes.length) {
+        this.toggleButton[0].checked = true;
+        this.checked = true;
+      }
     }
-  }
-}
+  };
+
+  exports.MultiSelect = MultiSelect;
+
+}));

package/moj/components/multi-select/multi-select.mjs

@@ -0,0 +1,77 @@
+function MultiSelect(options) {
+  this.container = window.jQuery(options.container);
+
+  if (this.container.data('moj-multi-select-initialised')) {
+    return
+  }
+
+  this.container.data('moj-multi-select-initialised', true);
+
+  const idPrefix = options.id_prefix;
+  let allId = 'checkboxes-all';
+  if (typeof idPrefix !== 'undefined') {
+    allId = `${idPrefix}checkboxes-all`;
+  }
+
+  this.toggle = window.jQuery(this.getToggleHtml(allId));
+  this.toggleButton = this.toggle.find('input');
+  this.toggleButton.on('click', window.jQuery.proxy(this, 'onButtonClick'));
+  this.container.append(this.toggle);
+  this.checkboxes = window.jQuery(options.checkboxes);
+  this.checkboxes.on('click', window.jQuery.proxy(this, 'onCheckboxClick'));
+  this.checked = options.checked || false;
+}
+
+MultiSelect.prototype.getToggleHtml = function (allId) {
+  let html = '';
+  html +=
+    '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
+  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
+  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
+  html += '    <span class="govuk-visually-hidden">Select all</span>';
+  html += '  </label>';
+  html += '</div>';
+  return html
+};
+
+MultiSelect.prototype.onButtonClick = function (e) {
+  if (this.checked) {
+    this.uncheckAll();
+    this.toggleButton[0].checked = false;
+  } else {
+    this.checkAll();
+    this.toggleButton[0].checked = true;
+  }
+};
+
+MultiSelect.prototype.checkAll = function () {
+  this.checkboxes.each(
+    window.jQuery.proxy(function (index, el) {
+      el.checked = true;
+    }, this)
+  );
+  this.checked = true;
+};
+
+MultiSelect.prototype.uncheckAll = function () {
+  this.checkboxes.each(
+    window.jQuery.proxy(function (index, el) {
+      el.checked = false;
+    }, this)
+  );
+  this.checked = false;
+};
+
+MultiSelect.prototype.onCheckboxClick = function (e) {
+  if (!e.target.checked) {
+    this.toggleButton[0].checked = false;
+    this.checked = false;
+  } else {
+    if (this.checkboxes.filter(':checked').length === this.checkboxes.length) {
+      this.toggleButton[0].checked = true;
+      this.checked = true;
+    }
+  }
+};
+
+export { MultiSelect };

package/moj/components/password-reveal/password-reveal.js

@@ -1,33 +1,43 @@
-MOJFrontend.PasswordReveal = function (element) {
-  this.el = element
-  const $el = $(this.el)
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
 
-  if ($el.data('moj-password-reveal-initialised')) {
-    return
-  }
+  function PasswordReveal(element) {
+    this.el = element;
+    const $el = window.jQuery(this.el);
+
+    if ($el.data('moj-password-reveal-initialised')) {
+      return
+    }
 
-  $el.data('moj-password-reveal-initialised', true)
-  $el.attr('spellcheck', 'false')
-
-  $el.wrap('<div class="moj-password-reveal"></div>')
-  this.container = $(this.el).parent()
-  this.createButton()
-}
-
-MOJFrontend.PasswordReveal.prototype.createButton = function () {
-  this.button = $(
-    '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
-  )
-  this.container.append(this.button)
-  this.button.on('click', $.proxy(this, 'onButtonClick'))
-}
-
-MOJFrontend.PasswordReveal.prototype.onButtonClick = function () {
-  if (this.el.type === 'password') {
-    this.el.type = 'text'
-    this.button.html('Hide <span class="govuk-visually-hidden">password</span>')
-  } else {
-    this.el.type = 'password'
-    this.button.html('Show <span class="govuk-visually-hidden">password</span>')
+    $el.data('moj-password-reveal-initialised', true);
+    $el.attr('spellcheck', 'false');
+
+    $el.wrap('<div class="moj-password-reveal"></div>');
+    this.container = window.jQuery(this.el).parent();
+    this.createButton();
   }
-}
+
+  PasswordReveal.prototype.createButton = function () {
+    this.button = window.jQuery(
+      '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
+    );
+    this.container.append(this.button);
+    this.button.on('click', window.jQuery.proxy(this, 'onButtonClick'));
+  };
+
+  PasswordReveal.prototype.onButtonClick = function () {
+    if (this.el.type === 'password') {
+      this.el.type = 'text';
+      this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
+    } else {
+      this.el.type = 'password';
+      this.button.html('Show <span class="govuk-visually-hidden">password</span>');
+    }
+  };
+
+  exports.PasswordReveal = PasswordReveal;
+
+}));

package/moj/components/password-reveal/password-reveal.mjs

@@ -0,0 +1,35 @@
+function PasswordReveal(element) {
+  this.el = element;
+  const $el = window.jQuery(this.el);
+
+  if ($el.data('moj-password-reveal-initialised')) {
+    return
+  }
+
+  $el.data('moj-password-reveal-initialised', true);
+  $el.attr('spellcheck', 'false');
+
+  $el.wrap('<div class="moj-password-reveal"></div>');
+  this.container = window.jQuery(this.el).parent();
+  this.createButton();
+}
+
+PasswordReveal.prototype.createButton = function () {
+  this.button = window.jQuery(
+    '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
+  );
+  this.container.append(this.button);
+  this.button.on('click', window.jQuery.proxy(this, 'onButtonClick'));
+};
+
+PasswordReveal.prototype.onButtonClick = function () {
+  if (this.el.type === 'password') {
+    this.el.type = 'text';
+    this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
+  } else {
+    this.el.type = 'password';
+    this.button.html('Show <span class="govuk-visually-hidden">password</span>');
+  }
+};
+
+export { PasswordReveal };