@ministryofjustice/frontend 3.4.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,104 +1,114 @@
-MOJFrontend.AddAnother = function (container) {
-  this.container = $(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-add-another-initialised')) {
-    return
-  }
+  function AddAnother(container) {
+    this.container = window.jQuery(container);
 
-  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')
-}
-
-MOJFrontend.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()
-}
-
-MOJFrontend.AddAnother.prototype.hasRemoveButton = function (item) {
-  return item.find('.moj-add-another__remove-button').length
-}
-
-MOJFrontend.AddAnother.prototype.getItems = function () {
-  return this.container.find('.moj-add-another__item')
-}
-
-MOJFrontend.AddAnother.prototype.getNewItem = function () {
-  const item = this.getItems().first().clone()
-  if (!this.hasRemoveButton(item)) {
-    this.createRemoveButton(item)
-  }
-  return item
-}
-
-MOJFrontend.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
-  })
-}
-
-MOJFrontend.AddAnother.prototype.createRemoveButton = function (item) {
-  item.append(
-    '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
-  )
-}
-
-MOJFrontend.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 = ''
+    if (this.container.data('moj-add-another-initialised')) {
+      return
     }
-  })
-}
-
-MOJFrontend.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()
+
+    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');
   }
-  items.each(
-    $.proxy(function (index, el) {
-      this.updateAttributes(index, $(el))
-    }, this)
-  )
-  this.focusHeading()
-}
-
-MOJFrontend.AddAnother.prototype.focusHeading = function () {
-  this.container.find('.moj-add-another__heading').get(0).focus()
-}
+
+  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 };