@ministryofjustice/frontend - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

moj/all.js

@@ -218,3 +218,3 @@ ;(function(root, factory) {
 MOJFrontend.ButtonMenu = function(params) {
-	this.container = params.container;
+	this.container = $(params.container);
 	this.menu = this.container.find('.moj-button-menu__wrapper');
@@ -376,6 +376,8 @@ if(params.menuClasses) {
   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) {
@@ -420,3 +422,3 @@ this.hideMenu();
     this.closeButton.on('click', $.proxy(this, 'onCloseClick'));
-    this.options.closeButton.container.append(this.closeButton);
+    $(this.options.closeButton.container).append(this.closeButton);
   }
@@ -439,3 +441,3 @@ };
   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);
@@ -446,3 +448,3 @@ };
   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);
@@ -458,3 +460,3 @@ };
     this.showMenu();
-    this.options.filter.container.focus();
+    this.filterContainer.focus();
   } else {
@@ -464,2 +466,3 @@ this.hideMenu();
 };
+
 MOJFrontend.FormValidator = function(form, options) {
@@ -634,6 +637,7 @@ this.form = form;
     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();
@@ -643,3 +647,3 @@ this.setupDropzone();
     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'));
   };
@@ -649,3 +653,3 @@
     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'));
@@ -663,3 +667,3 @@ this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'));
   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'));
@@ -1045,29 +1049,56 @@ this.fileInput.on('focus', $.proxy(this, 'onFileFocus'));
 
-MOJFrontend.SearchToggle = function(options) {
+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')) {
-    return
+  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>';
+  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>';
 
-  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
-	this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
-  this.options.toggleButton.container.append(this.toggleButton);
+  this.toggleButton = $(
+    '<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' +
+      this.options.toggleButton.text +
+      svg +
+      "</button>"
+  );
+  this.toggleButton.on("click", $.proxy(this, "onToggleButtonClick"));
+  this.toggleButtonContainer.append(this.toggleButton);
+  $(document).on("click", this.onDocumentClick.bind(this));
+  $(document).on("focusin", this.onDocumentClick.bind(this));
 };
 
-MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function() {
-  if(this.toggleButton.attr('aria-expanded') == 'false') {
-    this.toggleButton.attr('aria-expanded', 'true');
-    this.options.search.container.removeClass('moj-js-hidden');
-    this.options.search.container.find('input').first().focus();
-	} else {
-		this.options.search.container.addClass('moj-js-hidden');
-		this.toggleButton.attr('aria-expanded', 'false');
-	}
+MOJFrontend.SearchToggle.prototype.showMenu = function () {
+  this.toggleButton.attr("aria-expanded", "true");
+  this.container.removeClass("moj-js-hidden");
+  this.container.find("input").first().focus();
 };
 
+MOJFrontend.SearchToggle.prototype.hideMenu = function () {
+  this.container.addClass("moj-js-hidden");
+  this.toggleButton.attr("aria-expanded", "false");
+};
+
+MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
+  if (this.toggleButton.attr("aria-expanded") == "false") {
+    this.showMenu();
+  } else {
+    this.hideMenu();
+  }
+};
+
+MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
+  if (
+    !$.contains(this.toggleButtonContainer[0], e.target) &&
+    !$.contains(this.container[0], e.target)
+  ) {
+    this.hideMenu();
+  }
+};
+
 MOJFrontend.SortableTable = function(params) {
@@ -1074,0 +1105,0 @@ this.table = $(params.table);

moj/components/button-menu/button-menu.js

 MOJFrontend.ButtonMenu = function(params) {
-	this.container = params.container;
+	this.container = $(params.container);
 	this.menu = this.container.find('.moj-button-menu__wrapper');
@@ -4,0 +4,0 @@ if(params.menuClasses) {

moj/components/filter-toggle-button/filter-toggle-button.js

 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) {
@@ -46,3 +48,3 @@ this.hideMenu();
     this.closeButton.on('click', $.proxy(this, 'onCloseClick'));
-    this.options.closeButton.container.append(this.closeButton);
+    $(this.options.closeButton.container).append(this.closeButton);
   }
@@ -65,3 +67,3 @@ };
   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);
@@ -72,3 +74,3 @@ };
   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);
@@ -84,6 +86,6 @@ };
     this.showMenu();
-    this.options.filter.container.focus();
+    this.filterContainer.focus();
   } else {
     this.hideMenu();
   }
-};
+};

moj/components/multi-file-upload/multi-file-upload.js

@@ -14,6 +14,7 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJFrontend.fileApiSupported()) {
     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();
@@ -23,3 +24,3 @@ this.setupDropzone();
     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'));
   };
@@ -29,3 +30,3 @@
     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'));
@@ -43,3 +44,3 @@ this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'));
   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'));
@@ -46,0 +47,0 @@ this.fileInput.on('focus', $.proxy(this, 'onFileFocus'));

moj/components/search-toggle/search-toggle.js

@@ -1,26 +0,53 @@
-MOJFrontend.SearchToggle = function(options) {
+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')) {
-    return
+  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>';
+  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>';
 
-  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
-	this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
-  this.options.toggleButton.container.append(this.toggleButton);
+  this.toggleButton = $(
+    '<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' +
+      this.options.toggleButton.text +
+      svg +
+      "</button>"
+  );
+  this.toggleButton.on("click", $.proxy(this, "onToggleButtonClick"));
+  this.toggleButtonContainer.append(this.toggleButton);
+  $(document).on("click", this.onDocumentClick.bind(this));
+  $(document).on("focusin", this.onDocumentClick.bind(this));
 };
 
-MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function() {
-  if(this.toggleButton.attr('aria-expanded') == 'false') {
-    this.toggleButton.attr('aria-expanded', 'true');
-    this.options.search.container.removeClass('moj-js-hidden');
-    this.options.search.container.find('input').first().focus();
-	} else {
-		this.options.search.container.addClass('moj-js-hidden');
-		this.toggleButton.attr('aria-expanded', 'false');
-	}
+MOJFrontend.SearchToggle.prototype.showMenu = function () {
+  this.toggleButton.attr("aria-expanded", "true");
+  this.container.removeClass("moj-js-hidden");
+  this.container.find("input").first().focus();
 };
+
+MOJFrontend.SearchToggle.prototype.hideMenu = function () {
+  this.container.addClass("moj-js-hidden");
+  this.toggleButton.attr("aria-expanded", "false");
+};
+
+MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
+  if (this.toggleButton.attr("aria-expanded") == "false") {
+    this.showMenu();
+  } else {
+    this.hideMenu();
+  }
+};
+
+MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
+  if (
+    !$.contains(this.toggleButtonContainer[0], e.target) &&
+    !$.contains(this.container[0], e.target)
+  ) {
+    this.hideMenu();
+  }
+};

package.json

 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "moj/all.js",
@@ -6,0 +6,0 @@ "sass": "moj/all.scss",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

761251

increased by0.24%

Lines of code

10201

increased by0.52%

No dependency changes