feat: allow Elements to be used components' config

Rather than requiring that all elements used as components config are jQuery objects, allow `Element` objects to be passed too. This means that you can use the bundled version of moj-frontend without installing jQuery yourself.
ministryofjustice · Jan 25, 2024 · 372d70b · 372d70b
1 parent bedd163
commit 372d70b
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 36 deletions.
diff --git a/docs/components/multi-file-upload.md b/docs/components/multi-file-upload.md
@@ -45,7 +45,7 @@ The multi file upload component uses JavaScript. To run it you must include the
 ```
 if(typeof MOJFrontend.MultiFileUpload !== 'undefined') {
   new MOJFrontend.MultiFileUpload({
-    container: $('.moj-multi-file-upload'),
+    container: document.querySelector('.moj-multi-file-upload'),
     uploadUrl: '/ajax-upload-url',
     deleteUrl: '/ajax-delete-url'
   });

diff --git a/docs/examples/button-menu-collapsible-alternative/script.js b/docs/examples/button-menu-collapsible-alternative/script.js
@@ -1,5 +1,5 @@
 new MOJFrontend.ButtonMenu({
-  container: $(".moj-button-menu"),
+  container: document.querySelector(".moj-button-menu"),
   mq: "(min-width: 200em)",
   buttonText: "Actions",
   menuClasses: "moj-button-menu__wrapper--right",

diff --git a/docs/examples/button-menu-collapsible/script.js b/docs/examples/button-menu-collapsible/script.js
@@ -1,5 +1,5 @@
 new MOJFrontend.ButtonMenu({
-  container: $(".moj-button-menu"),
+  container: document.querySelector(".moj-button-menu"),
   mq: "(min-width: 200em)",
   buttonText: "Menu",
   buttonClasses:

diff --git a/docs/examples/identity-bar-menu-toggle/script.js b/docs/examples/identity-bar-menu-toggle/script.js
@@ -1,5 +1,5 @@
 new MOJFrontend.ButtonMenu({
-  container: $(".moj-button-menu"),
+  container: document.querySelector(".moj-button-menu"),
   buttonText: "Actions",
   buttonClasses:
     "govuk-button--secondary moj-button-menu__toggle-button--secondary",

diff --git a/docs/examples/identity-bar-secondary-toggle/script.js b/docs/examples/identity-bar-secondary-toggle/script.js
@@ -1,5 +1,5 @@
 new MOJFrontend.ButtonMenu({
-  container: $(".moj-button-menu").eq(1),
+  container: document.querySelectorAll(".moj-button-menu")[1],
   mq: "(min-width: 1000em)",
   buttonText: "More actions",
   buttonClasses:

diff --git a/docs/examples/multi-file-upload/script.js b/docs/examples/multi-file-upload/script.js
@@ -1,7 +1,5 @@
-if (typeof MOJFrontend.MultiFileUpload !== "undefined") {
-  new MOJFrontend.MultiFileUpload({
-    container: $(".moj-multi-file-upload"),
-    uploadUrl: "/ajax-upload",
-    deleteUrl: "/ajax-delete",
-  });
-}
+new MOJFrontend.MultiFileUpload({
+  container: document.querySelector(".moj-multi-file-upload"),
+  uploadUrl: "/ajax-upload",
+  deleteUrl: "/ajax-delete",
+});
diff --git a/docs/examples/patterns/filter-a-list/script.js b/docs/examples/patterns/filter-a-list/script.js
@@ -2,16 +2,16 @@ new MOJFrontend.FilterToggleButton({
   bigModeMediaQuery: "(min-width: 48.063em)",
   startHidden: true,
   toggleButton: {
-    container: $(".moj-action-bar__filter"),
+    container: document.querySelector(".moj-action-bar__filter"),
     showText: "Show filter",
     hideText: "Hide filter",
     classes: "govuk-button--secondary",
   },
   closeButton: {
-    container: $(".moj-filter__header-action"),
+    container: document.querySelector(".moj-filter__header-action"),
     text: "Close",
   },
   filter: {
-    container: $(".moj-filter"),
+    container: document.querySelector(".moj-filter"),
   },
 });
diff --git a/src/moj/components/button-menu/button-menu.js b/src/moj/components/button-menu/button-menu.js
@@ -1,5 +1,5 @@
 MOJFrontend.ButtonMenu = function(params) {
-	this.container = params.container;
+	this.container = $(params.container);
 	this.menu = this.container.find('.moj-button-menu__wrapper');
 	if(params.menuClasses) {
 		this.menu.addClass(params.menuClasses);

diff --git a/src/moj/components/filter-toggle-button/filter-toggle-button.js b/src/moj/components/filter-toggle-button/filter-toggle-button.js
@@ -1,9 +1,11 @@
 MOJFrontend.FilterToggleButton = function(options) {
   this.options = options;
-  this.container = this.options.toggleButton.container;
+  this.container = $(this.options.toggleButton.container);
+  this.filterContainer = $(this.options.filter.container);
+
   this.createToggleButton();
   this.setupResponsiveChecks();
-  this.options.filter.container.attr('tabindex', '-1');
+  this.filterContainer.attr('tabindex', '-1');
   if(this.options.startHidden) {
     this.hideMenu();
   }
@@ -43,7 +45,7 @@ MOJFrontend.FilterToggleButton.prototype.addCloseButton = function() {
   if(this.options.closeButton) {
     this.closeButton = $('<button class="moj-filter__close" type="button">'+this.options.closeButton.text+'</button>');
     this.closeButton.on('click', $.proxy(this, 'onCloseClick'));
-    this.options.closeButton.container.append(this.closeButton);
+    $(this.options.closeButton.container).append(this.closeButton);
   }
 };
 
@@ -61,13 +63,13 @@ MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() {
 
 MOJFrontend.FilterToggleButton.prototype.hideMenu = function() {
   this.menuButton.attr('aria-expanded', 'false');
-  this.options.filter.container.addClass('moj-js-hidden');
+  this.filterContainer.addClass('moj-js-hidden');
   this.menuButton.text(this.options.toggleButton.showText);
 };
 
 MOJFrontend.FilterToggleButton.prototype.showMenu = function() {
   this.menuButton.attr('aria-expanded', 'true');
-  this.options.filter.container.removeClass('moj-js-hidden');
+  this.filterContainer.removeClass('moj-js-hidden');
   this.menuButton.text(this.options.toggleButton.hideText);
 };
 
@@ -78,8 +80,8 @@ MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() {
 MOJFrontend.FilterToggleButton.prototype.toggle = function() {
   if(this.menuButton.attr('aria-expanded') == 'false') {
     this.showMenu();
-    this.options.filter.container.focus();
+    this.filterContainer.focus();
   } else {
     this.hideMenu();
   }
-};
+};
diff --git a/src/moj/components/multi-file-upload/multi-file-upload.js b/src/moj/components/multi-file-upload/multi-file-upload.js
@@ -11,20 +11,21 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF
     };
 
     this.params = $.extend({}, this.defaultParams, params);
+    this.container = $(this.params.container);
 
-    this.params.container.addClass('moj-multi-file-upload--enhanced');
+    this.container.addClass('moj-multi-file-upload--enhanced');
 
-    this.feedbackContainer = this.params.container.find('.moj-multi-file__uploaded-files');
+    this.feedbackContainer = this.container.find('.moj-multi-file__uploaded-files');
     this.setupFileInput();
     this.setupDropzone();
     this.setupLabel();
     this.setupStatusBox();
-    this.params.container.on('click', '.moj-multi-file-upload__delete', $.proxy(this, 'onFileDeleteClick'));
+    this.container.on('click', '.moj-multi-file-upload__delete', $.proxy(this, 'onFileDeleteClick'));
   };
 
   MOJFrontend.MultiFileUpload.prototype.setupDropzone = function() {
     this.fileInput.wrap('<div class="moj-multi-file-upload__dropzone" />');
-    this.dropzone = this.params.container.find('.moj-multi-file-upload__dropzone');
+    this.dropzone = this.container.find('.moj-multi-file-upload__dropzone');
     this.dropzone.on('dragover', $.proxy(this, 'onDragOver'));
     this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'));
     this.dropzone.on('drop', $.proxy(this, 'onDrop'));
@@ -37,7 +38,7 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF
   };
 
   MOJFrontend.MultiFileUpload.prototype.setupFileInput = function() {
-    this.fileInput = this.params.container.find('.moj-multi-file-upload__input');
+    this.fileInput = this.container.find('.moj-multi-file-upload__input');
     this.fileInput.on('change', $.proxy(this, 'onFileChange'));
     this.fileInput.on('focus', $.proxy(this, 'onFileFocus'));
     this.fileInput.on('blur', $.proxy(this, 'onFileBlur'));

diff --git a/src/moj/components/search-toggle/search-toggle.js b/src/moj/components/search-toggle/search-toggle.js
@@ -1,11 +1,13 @@
 MOJFrontend.SearchToggle = function (options) {
   this.options = options;
+  this.container = $(this.options.search.container);
+  this.toggleButtonContainer = $(this.options.toggleButton.container);
 
-  if (this.options.search.container.data("moj-search-toggle-initialised")) {
+  if (this.container.data("moj-search-toggle-initialised")) {
     return;
   }
 
-  this.options.search.container.data("moj-search-toggle-initialised", true);
+  this.container.data("moj-search-toggle-initialised", true);
 
   const svg =
     '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
@@ -17,19 +19,19 @@ MOJFrontend.SearchToggle = function (options) {
       "</button>"
   );
   this.toggleButton.on("click", $.proxy(this, "onToggleButtonClick"));
-  this.options.toggleButton.container.append(this.toggleButton);
+  this.toggleButtonContainer.append(this.toggleButton);
   $(document).on("click", this.onDocumentClick.bind(this));
   $(document).on("focusin", this.onDocumentClick.bind(this));
 };
 
 MOJFrontend.SearchToggle.prototype.showMenu = function () {
   this.toggleButton.attr("aria-expanded", "true");
-  this.options.search.container.removeClass("moj-js-hidden");
-  this.options.search.container.find("input").first().focus();
+  this.container.removeClass("moj-js-hidden");
+  this.container.find("input").first().focus();
 };
 
 MOJFrontend.SearchToggle.prototype.hideMenu = function () {
-  this.options.search.container.addClass("moj-js-hidden");
+  this.container.addClass("moj-js-hidden");
   this.toggleButton.attr("aria-expanded", "false");
 };
 
@@ -43,8 +45,8 @@ MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
 
 MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
   if (
-    !$.contains(this.options.toggleButton.container[0], e.target) &&
-    !$.contains(this.options.search.container[0], e.target)
+    !$.contains(this.toggleButtonContainer[0], e.target) &&
+    !$.contains(this.container[0], e.target)
   ) {
     this.hideMenu();
   }