@ministryofjustice/frontend 3.5.0 → 3.6.0

package/moj/all.mjs

@@ -0,0 +1,126 @@
+import { AddAnother } from './components/add-another/add-another.mjs';
+import { Alert } from './components/alert/alert.mjs';
+import { ButtonMenu } from './components/button-menu/button-menu.mjs';
+import { DatePicker } from './components/date-picker/date-picker.mjs';
+export { FilterToggleButton } from './components/filter-toggle-button/filter-toggle-button.mjs';
+export { MultiFileUpload } from './components/multi-file-upload/multi-file-upload.mjs';
+import { MultiSelect } from './components/multi-select/multi-select.mjs';
+import { PasswordReveal } from './components/password-reveal/password-reveal.mjs';
+import { RichTextEditor } from './components/rich-text-editor/rich-text-editor.mjs';
+import { SearchToggle } from './components/search-toggle/search-toggle.mjs';
+import { SortableTable } from './components/sortable-table/sortable-table.mjs';
+import { nodeListForEach } from './helpers.mjs';
+export { version } from './version.mjs';
+
+/* eslint-disable no-new */
+
+
+function initAll(options) {
+  // Set the options to an empty object by default if no options are passed.
+  options = typeof options !== 'undefined' ? options : {};
+
+  // Allow the user to initialise MOJ Frontend in only certain sections of the page
+  // Defaults to the entire document if nothing is set.
+  const scope = typeof options.scope !== 'undefined' ? options.scope : document;
+
+  const $addAnothers = scope.querySelectorAll('[data-module="moj-add-another"]');
+
+  nodeListForEach($addAnothers, function ($addAnother) {
+    new AddAnother($addAnother);
+  });
+
+  const $multiSelects = scope.querySelectorAll(
+    '[data-module="moj-multi-select"]'
+  );
+
+  nodeListForEach($multiSelects, function ($multiSelect) {
+    new MultiSelect({
+      container: $multiSelect.querySelector(
+        $multiSelect.getAttribute('data-multi-select-checkbox')
+      ),
+      checkboxes: $multiSelect.querySelectorAll(
+        'tbody .govuk-checkboxes__input'
+      ),
+      id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix')
+    });
+  });
+
+  const $passwordReveals = scope.querySelectorAll(
+    '[data-module="moj-password-reveal"]'
+  );
+
+  nodeListForEach($passwordReveals, function ($passwordReveal) {
+    new PasswordReveal($passwordReveal);
+  });
+
+  const $richTextEditors = scope.querySelectorAll(
+    '[data-module="moj-rich-text-editor"]'
+  );
+
+  nodeListForEach($richTextEditors, function ($richTextEditor) {
+    const options = {
+      textarea: window.jQuery($richTextEditor)
+    };
+
+    const toolbarAttr = $richTextEditor.getAttribute(
+      'data-moj-rich-text-editor-toolbar'
+    );
+
+    if (toolbarAttr) {
+      const toolbar = toolbarAttr.split(',');
+
+      options.toolbar = {};
+
+      for (const item in toolbar) {
+        options.toolbar[toolbar[item]] = true;
+      }
+    }
+
+    new RichTextEditor(options);
+  });
+
+  const $searchToggles = scope.querySelectorAll(
+    '[data-module="moj-search-toggle"]'
+  );
+
+  nodeListForEach($searchToggles, function ($searchToggle) {
+    new SearchToggle({
+      toggleButton: {
+        container: window.jQuery($searchToggle.querySelector('.moj-search-toggle__toggle')),
+        text: $searchToggle.getAttribute('data-moj-search-toggle-text')
+      },
+      search: {
+        container: window.jQuery($searchToggle.querySelector('.moj-search'))
+      }
+    });
+  });
+
+  const $sortableTables = scope.querySelectorAll(
+    '[data-module="moj-sortable-table"]'
+  );
+
+  nodeListForEach($sortableTables, function ($table) {
+    new SortableTable({
+      table: $table
+    });
+  });
+
+  const $datepickers = scope.querySelectorAll('[data-module="moj-date-picker"]');
+
+  nodeListForEach($datepickers, function ($datepicker) {
+    new DatePicker($datepicker, {}).init();
+  });
+
+  const $buttonMenus = scope.querySelectorAll('[data-module="moj-button-menu"]');
+
+  nodeListForEach($buttonMenus, function ($buttonmenu) {
+    new ButtonMenu($buttonmenu, {}).init();
+  });
+
+  const $alerts = scope.querySelectorAll('[data-module="moj-alert"]');
+  nodeListForEach($alerts, function ($alert) {
+    new Alert($alert, {}).init();
+  });
+}
+
+export { AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, initAll };

package/moj/components/add-another/add-another.js

@@ -1,135 +1,114 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
-})(this, (function () { 'use strict';
-
-	function getDefaultExportFromCjs (x) {
-		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-	}
-
-	var _global_window_jQuery = window.jQuery;
-
-	var addAnother$1;
-	var hasRequiredAddAnother;
-
-	function requireAddAnother () {
-		if (hasRequiredAddAnother) return addAnother$1;
-		hasRequiredAddAnother = 1;
-		const $ = _global_window_jQuery;
-
-		function AddAnother(container) {
-		  this.container = $(container);
-
-		  if (this.container.data('moj-add-another-initialised')) {
-		    return
-		  }
-
-		  this.container.data('moj-add-another-initialised', true);
-
-		  this.container.on(
-		    'click',
-		    '.moj-add-another__remove-button',
-		    $.proxy(this, 'onRemoveButtonClick')
-		  );
-		  this.container.on(
-		    'click',
-		    '.moj-add-another__add-button',
-		    $.proxy(this, 'onAddButtonClick')
-		  );
-		  this.container
-		    .find('.moj-add-another__add-button, moj-add-another__remove-button')
-		    .prop('type', 'button');
-		}
-
-		AddAnother.prototype.onAddButtonClick = function (e) {
-		  const item = this.getNewItem();
-		  this.updateAttributes(this.getItems().length, item);
-		  this.resetItem(item);
-		  const firstItem = this.getItems().first();
-		  if (!this.hasRemoveButton(firstItem)) {
-		    this.createRemoveButton(firstItem);
-		  }
-		  this.getItems().last().after(item);
-		  item.find('input, textarea, select').first().focus();
-		};
-
-		AddAnother.prototype.hasRemoveButton = function (item) {
-		  return item.find('.moj-add-another__remove-button').length
-		};
-
-		AddAnother.prototype.getItems = function () {
-		  return this.container.find('.moj-add-another__item')
-		};
-
-		AddAnother.prototype.getNewItem = function () {
-		  const item = this.getItems().first().clone();
-		  if (!this.hasRemoveButton(item)) {
-		    this.createRemoveButton(item);
-		  }
-		  return item
-		};
-
-		AddAnother.prototype.updateAttributes = function (index, item) {
-		  item.find('[data-name]').each(function (i, el) {
-		    const originalId = el.id;
-
-		    el.name = $(el)
-		      .attr('data-name')
-		      .replace(/%index%/, index);
-		    el.id = $(el)
-		      .attr('data-id')
-		      .replace(/%index%/, index);
-
-		    const label =
-		      $(el).siblings('label')[0] ||
-		      $(el).parents('label')[0] ||
-		      item.find(`[for="${originalId}"]`)[0];
-		    label.htmlFor = el.id;
-		  });
-		};
-
-		AddAnother.prototype.createRemoveButton = function (item) {
-		  item.append(
-		    '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
-		  );
-		};
-
-		AddAnother.prototype.resetItem = function (item) {
-		  item.find('[data-name], [data-id]').each(function (index, el) {
-		    if (el.type === 'checkbox' || el.type === 'radio') {
-		      el.checked = false;
-		    } else {
-		      el.value = '';
-		    }
-		  });
-		};
-
-		AddAnother.prototype.onRemoveButtonClick = function (e) {
-		  $(e.currentTarget).parents('.moj-add-another__item').remove();
-		  const items = this.getItems();
-		  if (items.length === 1) {
-		    items.find('.moj-add-another__remove-button').remove();
-		  }
-		  items.each(
-		    $.proxy(function (index, el) {
-		      this.updateAttributes(index, $(el));
-		    }, this)
-		  );
-		  this.focusHeading();
-		};
-
-		AddAnother.prototype.focusHeading = function () {
-		  this.container.find('.moj-add-another__heading').get(0).focus();
-		};
-
-		addAnother$1 = { AddAnother };
-		return addAnother$1;
-	}
-
-	var addAnotherExports = requireAddAnother();
-	var addAnother = /*@__PURE__*/getDefaultExportFromCjs(addAnotherExports);
-
-	return addAnother;
+  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';
+
+  function AddAnother(container) {
+    this.container = window.jQuery(container);
+
+    if (this.container.data('moj-add-another-initialised')) {
+      return
+    }
+
+    this.container.data('moj-add-another-initialised', true);
+
+    this.container.on(
+      'click',
+      '.moj-add-another__remove-button',
+      window.jQuery.proxy(this, 'onRemoveButtonClick')
+    );
+    this.container.on(
+      'click',
+      '.moj-add-another__add-button',
+      window.jQuery.proxy(this, 'onAddButtonClick')
+    );
+    this.container
+      .find('.moj-add-another__add-button, moj-add-another__remove-button')
+      .prop('type', 'button');
+  }
+
+  AddAnother.prototype.onAddButtonClick = function (e) {
+    const item = this.getNewItem();
+    this.updateAttributes(this.getItems().length, item);
+    this.resetItem(item);
+    const firstItem = this.getItems().first();
+    if (!this.hasRemoveButton(firstItem)) {
+      this.createRemoveButton(firstItem);
+    }
+    this.getItems().last().after(item);
+    item.find('input, textarea, select').first().focus();
+  };
+
+  AddAnother.prototype.hasRemoveButton = function (item) {
+    return item.find('.moj-add-another__remove-button').length
+  };
+
+  AddAnother.prototype.getItems = function () {
+    return this.container.find('.moj-add-another__item')
+  };
+
+  AddAnother.prototype.getNewItem = function () {
+    const item = this.getItems().first().clone();
+    if (!this.hasRemoveButton(item)) {
+      this.createRemoveButton(item);
+    }
+    return item
+  };
+
+  AddAnother.prototype.updateAttributes = function (index, item) {
+    item.find('[data-name]').each(function (i, el) {
+      const originalId = el.id;
+
+      el.name = window.jQuery(el)
+        .attr('data-name')
+        .replace(/%index%/, index);
+      el.id = window.jQuery(el)
+        .attr('data-id')
+        .replace(/%index%/, index);
+
+      const label =
+        window.jQuery(el).siblings('label')[0] ||
+        window.jQuery(el).parents('label')[0] ||
+        item.find(`[for="${originalId}"]`)[0];
+      label.htmlFor = el.id;
+    });
+  };
+
+  AddAnother.prototype.createRemoveButton = function (item) {
+    item.append(
+      '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
+    );
+  };
+
+  AddAnother.prototype.resetItem = function (item) {
+    item.find('[data-name], [data-id]').each(function (index, el) {
+      if (el.type === 'checkbox' || el.type === 'radio') {
+        el.checked = false;
+      } else {
+        el.value = '';
+      }
+    });
+  };
+
+  AddAnother.prototype.onRemoveButtonClick = function (e) {
+    window.jQuery(e.currentTarget).parents('.moj-add-another__item').remove();
+    const items = this.getItems();
+    if (items.length === 1) {
+      items.find('.moj-add-another__remove-button').remove();
+    }
+    items.each(
+      window.jQuery.proxy(function (index, el) {
+        this.updateAttributes(index, window.jQuery(el));
+      }, this)
+    );
+    this.focusHeading();
+  };
+
+  AddAnother.prototype.focusHeading = function () {
+    this.container.find('.moj-add-another__heading').get(0).focus();
+  };
+
+  exports.AddAnother = AddAnother;
 
 }));

package/moj/components/add-another/add-another.mjs

@@ -0,0 +1,106 @@
+function AddAnother(container) {
+  this.container = window.jQuery(container);
+
+  if (this.container.data('moj-add-another-initialised')) {
+    return
+  }
+
+  this.container.data('moj-add-another-initialised', true);
+
+  this.container.on(
+    'click',
+    '.moj-add-another__remove-button',
+    window.jQuery.proxy(this, 'onRemoveButtonClick')
+  );
+  this.container.on(
+    'click',
+    '.moj-add-another__add-button',
+    window.jQuery.proxy(this, 'onAddButtonClick')
+  );
+  this.container
+    .find('.moj-add-another__add-button, moj-add-another__remove-button')
+    .prop('type', 'button');
+}
+
+AddAnother.prototype.onAddButtonClick = function (e) {
+  const item = this.getNewItem();
+  this.updateAttributes(this.getItems().length, item);
+  this.resetItem(item);
+  const firstItem = this.getItems().first();
+  if (!this.hasRemoveButton(firstItem)) {
+    this.createRemoveButton(firstItem);
+  }
+  this.getItems().last().after(item);
+  item.find('input, textarea, select').first().focus();
+};
+
+AddAnother.prototype.hasRemoveButton = function (item) {
+  return item.find('.moj-add-another__remove-button').length
+};
+
+AddAnother.prototype.getItems = function () {
+  return this.container.find('.moj-add-another__item')
+};
+
+AddAnother.prototype.getNewItem = function () {
+  const item = this.getItems().first().clone();
+  if (!this.hasRemoveButton(item)) {
+    this.createRemoveButton(item);
+  }
+  return item
+};
+
+AddAnother.prototype.updateAttributes = function (index, item) {
+  item.find('[data-name]').each(function (i, el) {
+    const originalId = el.id;
+
+    el.name = window.jQuery(el)
+      .attr('data-name')
+      .replace(/%index%/, index);
+    el.id = window.jQuery(el)
+      .attr('data-id')
+      .replace(/%index%/, index);
+
+    const label =
+      window.jQuery(el).siblings('label')[0] ||
+      window.jQuery(el).parents('label')[0] ||
+      item.find(`[for="${originalId}"]`)[0];
+    label.htmlFor = el.id;
+  });
+};
+
+AddAnother.prototype.createRemoveButton = function (item) {
+  item.append(
+    '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
+  );
+};
+
+AddAnother.prototype.resetItem = function (item) {
+  item.find('[data-name], [data-id]').each(function (index, el) {
+    if (el.type === 'checkbox' || el.type === 'radio') {
+      el.checked = false;
+    } else {
+      el.value = '';
+    }
+  });
+};
+
+AddAnother.prototype.onRemoveButtonClick = function (e) {
+  window.jQuery(e.currentTarget).parents('.moj-add-another__item').remove();
+  const items = this.getItems();
+  if (items.length === 1) {
+    items.find('.moj-add-another__remove-button').remove();
+  }
+  items.each(
+    window.jQuery.proxy(function (index, el) {
+      this.updateAttributes(index, window.jQuery(el));
+    }, this)
+  );
+  this.focusHeading();
+};
+
+AddAnother.prototype.focusHeading = function () {
+  this.container.find('.moj-add-another__heading').get(0).focus();
+};
+
+export { AddAnother };