@ministryofjustice/frontend - npm Package Compare versions

Comparing version 0.0.9-alpha to 0.0.10-alpha

govuk-prototype-kit.config.json

@@ -1,1 +0,6 @@
-{"nunjucksPaths": ["/","/components"],"scripts": ["/all.js"],"assets": ["/assets"],"sass": ["/all.scss"]}
+{
+  "nunjucksPaths": ["/moj","/moj/components"],
+  "scripts": ["/moj/all.js"],
+  "assets": ["/moj/assets"],
+  "sass": ["/moj/all.scss"]
+}

moj/all.js

@@ -29,2 +29,17 @@ var MOJFrontend = {};
 };
+
+MOJFrontend.dragAndDropSupported = function() {
+  var div = document.createElement('div');
+  return typeof div.ondrop != 'undefined';
+};
+
+MOJFrontend.formDataSupported = function() {
+  return typeof FormData == 'function';
+};
+
+MOJFrontend.fileApiSupported = function() {
+  var input = document.createElement('input');
+  input.type = 'file';
+  return typeof input.files != 'undefined';
+};
 MOJFrontend.AddAnother = function(container) {
@@ -102,2 +117,87 @@ this.container = $(container);
 };
+MOJFrontend.FilterToggleButton = function(options) {
+  this.options = options;
+  this.container = this.options.toggleButton.container;
+  this.createToggleButton();
+  this.setupResponsiveChecks();
+  this.options.filter.container.attr('tabindex', '-1');
+  if(this.options.startHidden) {
+    this.hideMenu();
+  }
+};
+
+MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function() {
+  this.mq = window.matchMedia(this.options.bigModeMediaQuery);
+  this.mq.addListener($.proxy(this, 'checkMode'));
+  this.checkMode(this.mq);
+};
+
+MOJFrontend.FilterToggleButton.prototype.createToggleButton = function() {
+  this.menuButton = $('<button class="govuk-button '+this.options.toggleButton.classes+'" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.showText+'</button>');
+  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'));
+  this.options.toggleButton.container.append(this.menuButton);
+};
+
+MOJFrontend.FilterToggleButton.prototype.checkMode = function(mq) {
+  if(mq.matches) {
+    this.enableBigMode();
+  } else {
+    this.enableSmallMode();
+  }
+};
+
+MOJFrontend.FilterToggleButton.prototype.enableBigMode = function() {
+  this.showMenu();
+  this.removeCloseButton();
+};
+
+MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function() {
+  this.hideMenu();
+  this.addCloseButton();
+};
+
+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);
+  }
+};
+
+MOJFrontend.FilterToggleButton.prototype.onCloseClick = function() {
+  this.hideMenu();
+  this.menuButton.focus();
+};
+
+MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() {
+  if(this.closeButton) {
+    this.closeButton.remove();
+    this.closeButton = null;
+  }
+};
+
+MOJFrontend.FilterToggleButton.prototype.hideMenu = function() {
+  this.menuButton.attr('aria-expanded', 'false');
+  this.options.filter.container.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.menuButton.text(this.options.toggleButton.hideText);
+};
+
+MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() {
+  this.toggle();
+};
+
+MOJFrontend.FilterToggleButton.prototype.toggle = function() {
+  if(this.menuButton.attr('aria-expanded') == 'false') {
+    this.showMenu();
+    this.options.filter.container.focus();
+  } else {
+    this.hideMenu();
+  }
+};
 MOJFrontend.FormValidator = function(form, options) {
@@ -259,87 +359,2 @@ this.form = form;
 };
-MOJFrontend.FilterToggleButton = function(options) {
-  this.options = options;
-  this.container = this.options.toggleButton.container;
-  this.createToggleButton();
-  this.setupResponsiveChecks();
-  this.options.filter.container.attr('tabindex', '-1');
-  if(this.options.startHidden) {
-    this.hideMenu();
-  }
-};
-
-MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function() {
-  this.mq = window.matchMedia(this.options.bigModeMediaQuery);
-  this.mq.addListener($.proxy(this, 'checkMode'));
-  this.checkMode(this.mq);
-};
-
-MOJFrontend.FilterToggleButton.prototype.createToggleButton = function() {
-  this.menuButton = $('<button class="govuk-button '+this.options.toggleButton.classes+'" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.showText+'</button>');
-  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'));
-  this.options.toggleButton.container.append(this.menuButton);
-};
-
-MOJFrontend.FilterToggleButton.prototype.checkMode = function(mq) {
-  if(mq.matches) {
-    this.enableBigMode();
-  } else {
-    this.enableSmallMode();
-  }
-};
-
-MOJFrontend.FilterToggleButton.prototype.enableBigMode = function() {
-  this.showMenu();
-  this.removeCloseButton();
-};
-
-MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function() {
-  this.hideMenu();
-  this.addCloseButton();
-};
-
-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);
-  }
-};
-
-MOJFrontend.FilterToggleButton.prototype.onCloseClick = function() {
-  this.hideMenu();
-  this.menuButton.focus();
-};
-
-MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() {
-  if(this.closeButton) {
-    this.closeButton.remove();
-    this.closeButton = null;
-  }
-};
-
-MOJFrontend.FilterToggleButton.prototype.hideMenu = function() {
-  this.menuButton.attr('aria-expanded', 'false');
-  this.options.filter.container.addClass('moj-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-hidden');
-  this.menuButton.text(this.options.toggleButton.hideText);
-};
-
-MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() {
-  this.toggle();
-};
-
-MOJFrontend.FilterToggleButton.prototype.toggle = function() {
-  if(this.menuButton.attr('aria-expanded') == 'false') {
-    this.showMenu();
-    this.options.filter.container.focus();
-  } else {
-    this.hideMenu();
-  }
-};
 MOJFrontend.Menu = function(params) {
@@ -493,2 +508,175 @@ this.container = params.container;
 };
+if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJFrontend.fileApiSupported()) {
+  MOJFrontend.MultiFileUpload = function(params) {
+    this.defaultParams = {
+      uploadStatusText: 'Uploading files, please wait',
+      dropzoneHintText: 'Drag and drop files here or',
+      dropzoneButtonText: 'Choose files'
+    };
+
+    $.extend(params, this.defaultParams);
+
+    this.params = params;
+    this.params.container.addClass('moj-multi-file-upload--enhanced');
+
+    this.feedbackContainer = this.params.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'));
+  };
+
+  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.on('dragover', $.proxy(this, 'onDragOver'));
+    this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'));
+    this.dropzone.on('drop', $.proxy(this, 'onDrop'));
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.setupLabel = function() {
+    this.label = $('<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);
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.setupFileInput = function() {
+    this.fileInput = this.params.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'));
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.setupStatusBox = function() {
+    this.status = $('<div aria-live="polite" role="status" class="govuk-visually-hidden" />');
+    this.dropzone.append(this.status);
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.onDragOver = function(e) {
+  	e.preventDefault();
+  	this.dropzone.addClass('moj-multi-file-upload--dragover');
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.onDragLeave = function() {
+  	this.dropzone.removeClass('moj-multi-file-upload--dragover');
+  };
+
+  MOJFrontend.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);
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.uploadFiles = function(files) {
+    for(var i = 0; i < files.length; i++) {
+      this.uploadFile(files[i]);
+    }
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.onFileChange = function(e) {
+    this.feedbackContainer.removeClass('moj-hidden');
+    this.status.html(this.params.uploadStatusText);
+    this.uploadFiles(e.currentTarget.files);
+    this.fileInput.replaceWith($(e.currentTarget).val('').clone(true));
+    this.setupFileInput();
+    this.fileInput.focus();
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.onFileFocus = function(e) {
+    this.label.addClass('moj-multi-file-upload--focused');
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.onFileBlur = function(e) {
+    this.label.removeClass('moj-multi-file-upload--focused');
+  };
+
+  MOJFrontend.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>';
+  };
+
+  MOJFrontend.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>';
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function(file) {
+    var html = '';
+    html += '<div class="govuk-summary-list__row moj-multi-file-upload__row">';
+    html += '  <dd class="govuk-summary-list__value moj-multi-file-upload__message">';
+    html +=       '<span class="moj-multi-file-upload__filename">'+file.name+'</span>';
+    html +=       '<span class="moj-multi-file-upload__progress">0%</span>';
+    html += '  </dd>';
+    html += '  <dd class="govuk-summary-list__actions moj-multi-file-upload__actions"></dd>';
+    html += '</div>';
+    return html;
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.getDeleteButtonHtml = function(file) {
+    var html = '<button class="moj-multi-file-upload__delete govuk-button govuk-button--secondary govuk-!-margin-bottom-0" type="button" name="delete" value="' + file.filename + '">';
+    html += 'Delete <span class="govuk-visually-hidden">' + file.originalname + '</span>';
+    html += '</button>';
+    return html;
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.uploadFile = function(file) {
+    var formData = new FormData();
+    formData.append('documents', file);
+    var item = $(this.getFileRowHtml(formData.get('documents')));
+    this.feedbackContainer.find('.moj-multi-file-upload__list').append(item);
+
+    $.ajax({
+      url: this.params.uploadUrl,
+      type: 'post',
+      data: formData,
+      processData: false,
+      contentType: false,
+      success: $.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),
+      xhr: function() {
+        var xhr = new XMLHttpRequest();
+        xhr.upload.addEventListener('progress', function(e) {
+          if (e.lengthComputable) {
+            var percentComplete = e.loaded / e.total;
+            percentComplete = parseInt(percentComplete * 100, 10);
+            item.find('.moj-multi-file-upload__progress').text(' ' + percentComplete + '%');
+          }
+        }, false);
+        return xhr;
+      }
+    });
+  };
+
+  MOJFrontend.MultiFileUpload.prototype.onFileDeleteClick = function(e) {
+    e.preventDefault(); // if user refreshes page and then deletes
+    var button = $(e.currentTarget);
+    var data = {};
+    data[button[0].name] = button[0].value;
+    $.ajax({
+      url: this.params.deleteUrl,
+      type: 'post',
+      dataType: 'json',
+      data: data,
+      success: $.proxy(function(response){
+        if(response.error) {
+          // handle 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)
+    });
+  };
+}
 MOJFrontend.MultiSelect = function(options) {
@@ -715,6 +903,6 @@ this.container = options.container;
     this.toggleButton.attr('aria-expanded', 'true');
-    this.options.search.container.removeClass('moj-hidden');
+    this.options.search.container.removeClass('moj-js-hidden');
     this.options.search.container.find('input').first().focus();
 	} else {
-		this.options.search.container.addClass('moj-hidden');
+		this.options.search.container.addClass('moj-js-hidden');
 		this.toggleButton.attr('aria-expanded', 'false');
@@ -721,0 +909,0 @@ }

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

@@ -64,3 +64,3 @@ MOJFrontend.FilterToggleButton = function(options) {
   this.menuButton.attr('aria-expanded', 'false');
-  this.options.filter.container.addClass('moj-hidden');
+  this.options.filter.container.addClass('moj-js-hidden');
   this.menuButton.text(this.options.toggleButton.showText);
@@ -71,3 +71,3 @@ };
   this.menuButton.attr('aria-expanded', 'true');
-  this.options.filter.container.removeClass('moj-hidden');
+  this.options.filter.container.removeClass('moj-js-hidden');
   this.menuButton.text(this.options.toggleButton.hideText);
@@ -74,0 +74,0 @@ };

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

@@ -11,8 +11,8 @@ MOJFrontend.SearchToggle = function(options) {
     this.toggleButton.attr('aria-expanded', 'true');
-    this.options.search.container.removeClass('moj-hidden');
+    this.options.search.container.removeClass('moj-js-hidden');
     this.options.search.container.find('input').first().focus();
 	} else {
-		this.options.search.container.addClass('moj-hidden');
+		this.options.search.container.addClass('moj-js-hidden');
 		this.toggleButton.attr('aria-expanded', 'false');
 	}
 };

moj/helpers.js

@@ -27,2 +27,17 @@ MOJFrontend.removeAttributeValue = function(el, attr, value) {
   }
+};
+
+MOJFrontend.dragAndDropSupported = function() {
+  var div = document.createElement('div');
+  return typeof div.ondrop != 'undefined';
+};
+
+MOJFrontend.formDataSupported = function() {
+  return typeof FormData == 'function';
+};
+
+MOJFrontend.fileApiSupported = function() {
+  var input = document.createElement('input');
+  input.type = 'file';
+  return typeof input.files != 'undefined';
 };

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": "0.0.9-alpha",
+  "version": "0.0.10-alpha",
   "main": "all.js",
@@ -6,0 +6,0 @@ "sass": "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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

498885

increased by3.94%

Number of package files

150

increased by3.45%

Lines of code

9828

increased by3.54%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes