@hmcts/frontend - npm Package Compare versions

Comparing version 0.0.29-alpha to 0.0.30-alpha

all.js

 var HMCTSFrontend = {};
+HMCTSFrontend.removeAttributeValue = function(el, attr, value) {
+  var re, m;
+  if (el.getAttribute(attr)) {
+    if (el.getAttribute(attr) == value) {
+      el.removeAttribute(attr);
+    } else {
+      re = new RegExp('(^|\\s)' + value + '(\\s|$)');
+      m = el.getAttribute(attr).match(re);
+      if (m && m.length == 3) {
+        el.setAttribute(attr, el.getAttribute(attr).replace(re, (m[1] && m[2])?' ':''))
+      }
+    }
+  }
+}
+
+HMCTSFrontend.addAttributeValue = function(el, attr, value) {
+  var re;
+  if (!el.getAttribute(attr)) {
+    el.setAttribute(attr, value);
+  }
+  else {
+    re = new RegExp('(^|\\s)' + value + '(\\s|$)');
+    if (!re.test(el.getAttribute(attr))) {
+      el.setAttribute(attr, el.getAttribute(attr) + ' ' + value);
+    }
+  }
+};
 HMCTSFrontend.AddAnother = function(container) {
@@ -159,2 +186,159 @@ this.container = $(container);
 };
+HMCTSFrontend.FormValidator = function(form, options) {
+  this.form = form;
+  this.errors = [];
+  this.validators = [];
+  $(this.form).on('submit', $.proxy(this, 'onSubmit'));
+  this.summary = (options && options.summary) ? $(options.summary) : $('.govuk-error-summary');
+  // this.summary.on('click', 'a', $.proxy(this, 'onErrorClick'));
+  this.originalTitle = document.title;
+};
+
+HMCTSFrontend.FormValidator.entityMap = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+  '/': '&#x2F;',
+  '`': '&#x60;',
+  '=': '&#x3D;'
+};
+
+HMCTSFrontend.FormValidator.escapeHtml = function(string) {
+  return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap (s) {
+    return HMCTSFrontend.FormValidator.entityMap[s];
+  });
+};
+
+HMCTSFrontend.FormValidator.prototype.onErrorClick = function(e) {
+  e.preventDefault();
+  var href = e.target.href;
+  var id = href.substring(href.indexOf("#"), href.length);
+  $(id).focus();
+};
+
+HMCTSFrontend.FormValidator.prototype.resetTitle = function() {
+  document.title = this.originalTitle;
+};
+
+HMCTSFrontend.FormValidator.prototype.updateTitle = function() {
+  document.title = "" + this.errors.length + " errors - " + document.title;
+};
+
+HMCTSFrontend.FormValidator.prototype.showSummary = function () {
+  this.summary.html(this.getSummaryHtml());
+  this.summary.removeClass('hmcts-hidden');
+  this.summary.attr('aria-labelledby', 'errorSummary-heading');
+  this.summary.focus();
+};
+
+HMCTSFrontend.FormValidator.prototype.getSummaryHtml = function() {
+  var html = '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
+  html += '<div class="govuk-error-summary__body">';
+  html += '<ul class="govuk-list govuk-error-summary__list">';
+  for (var i = 0, j = this.errors.length; i < j; i++) {
+    var error = this.errors[i];
+    html += '<li>';
+    html +=   '<a href="#' + HMCTSFrontend.FormValidator.escapeHtml(error.fieldName) + '">';
+    html +=     HMCTSFrontend.FormValidator.escapeHtml(error.message);
+    html +=   '</a>';
+    html += '</li>';
+  }
+  html += '</ul>';
+  html += '</div>';
+  return html;
+};
+
+HMCTSFrontend.FormValidator.prototype.hideSummary = function() {
+  this.summary.addClass('hmcts-hidden');
+  this.summary.removeAttr('aria-labelledby');
+};
+
+HMCTSFrontend.FormValidator.prototype.onSubmit = function (e) {
+  this.removeInlineErrors();
+  this.hideSummary();
+  this.resetTitle();
+  if(!this.validate()) {
+    e.preventDefault();
+    this.updateTitle();
+    this.showSummary();
+    this.showInlineErrors();
+  }
+};
+
+HMCTSFrontend.FormValidator.prototype.showInlineErrors = function() {
+  for (var i = 0, j = this.errors.length; i < j; i++) {
+    this.showInlineError(this.errors[i]);
+  }
+};
+
+HMCTSFrontend.FormValidator.prototype.showInlineError = function (error) {
+  var errorSpanId = error.fieldName + '-error';
+  var errorSpan = '<span class="govuk-error-message" id="'+ errorSpanId +'">'+HMCTSFrontend.FormValidator.escapeHtml(error.message)+'</span>';
+  var control = $("#" + error.fieldName);
+  var fieldContainer = control.parents(".govuk-form-group");
+  var label = fieldContainer.find('label');
+  var legend = fieldContainer.find("legend");
+  var fieldset = fieldContainer.find("fieldset");
+  fieldContainer.addClass('govuk-form-group--error');
+  if(legend.length) {
+    legend.after(errorSpan);
+    fieldContainer.attr('aria-invalid', 'true');
+    HMCTSFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId);
+  } else {
+    label.after(errorSpan);
+    control.attr('aria-invalid', 'true');
+    HMCTSFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId);
+  }
+};
+
+HMCTSFrontend.FormValidator.prototype.removeInlineErrors = function() {
+  var error;
+  var i;
+  for (var i = 0; i < this.errors.length; i++) {
+    this.removeInlineError(this.errors[i]);
+  }
+};
+
+HMCTSFrontend.FormValidator.prototype.removeInlineError = function(error) {
+  var control = $("#" + error.fieldName);
+  var fieldContainer = control.parents(".govuk-form-group");
+  fieldContainer.find('.govuk-error-message').remove();
+  fieldContainer.removeClass('govuk-form-group--error');
+  fieldContainer.find("[aria-invalid]").attr('aria-invalid', 'false');
+  var errorSpanId = error.fieldName + '-error';
+  HMCTSFrontend.removeAttributeValue(fieldContainer.find('[aria-describedby]')[0], 'aria-describedby', errorSpanId);
+};
+
+HMCTSFrontend.FormValidator.prototype.addValidator = function(fieldName, rules) {
+  this.validators.push({
+    fieldName: fieldName,
+    rules: rules,
+    field: this.form.elements[fieldName]
+  });
+};
+
+HMCTSFrontend.FormValidator.prototype.validate = function() {
+  this.errors = [];
+  var validator = null,
+    validatorValid = true,
+    i,
+    j;
+  for (i = 0; i < this.validators.length; i++) {
+    validator = this.validators[i];
+    for (j = 0; j < validator.rules.length; j++) {
+      validatorValid = validator.rules[j].method(validator.field,
+        validator.rules[j].params);
+      if (!validatorValid) {
+        this.errors.push({
+          fieldName: validator.fieldName,
+          message: validator.rules[j].message
+        });
+        break;
+      }
+    }
+  }
+  return this.errors.length === 0;
+};
 HMCTSFrontend.Menu = function(params) {
@@ -457,1 +641,119 @@ this.container = params.container;
 };
+
+HMCTSFrontend.SortableTable = function(params) {
+	this.table = $(params.table);
+	this.setupOptions(params);
+	this.body = this.table.find('tbody');
+	this.createHeadingButtons();
+	this.createStatusBox();
+	this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'));
+};
+
+HMCTSFrontend.SortableTable.prototype.setupOptions = function(params) {
+	params = params || {};
+	this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
+	this.ascendingText = params.ascendingText || 'ascending';
+	this.descendingText = params.descendingText || 'descending';
+};
+
+HMCTSFrontend.SortableTable.prototype.createHeadingButtons = function() {
+	var headings = this.table.find('thead th');
+	var heading;
+	for(var i = 0; i < headings.length; i++) {
+		heading = $(headings[i]);
+		if(heading.attr('aria-sort')) {
+			this.createHeadingButton(heading, i);
+		}
+	}
+};
+
+HMCTSFrontend.SortableTable.prototype.createHeadingButton = function(heading, i) {
+	var text = heading.text();
+	var button = $('<button type="button" data-index="'+i+'">'+text+'</button>');
+	heading.text('');
+	heading.append(button);
+};
+
+HMCTSFrontend.SortableTable.prototype.createStatusBox = function() {
+	this.status = $('<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />');
+	this.table.parent().append(this.status);
+};
+
+HMCTSFrontend.SortableTable.prototype.onSortButtonClick = function(e) {
+	var columnNumber = e.currentTarget.getAttribute('data-index');
+	var sortDirection = $(e.currentTarget).parent().attr('aria-sort');
+	var newSortDirection;
+	if(sortDirection === 'none' || sortDirection === 'descending') {
+		newSortDirection = 'ascending';
+	} else {
+		newSortDirection = 'descending';
+	}
+	var rows = this.getTableRowsArray();
+	var sortedRows = this.sort(rows, columnNumber, newSortDirection);
+	this.addRows(sortedRows);
+	this.removeButtonStates();
+	this.updateButtonState($(e.currentTarget), newSortDirection);
+};
+
+HMCTSFrontend.SortableTable.prototype.updateButtonState = function(button, direction) {
+	button.parent().attr('aria-sort', direction);
+	var message = this.statusMessage;
+	message = message.replace(/%heading%/, button.text());
+	message = message.replace(/%direction%/, this[direction+'Text']);
+	this.status.text(message);
+};
+
+HMCTSFrontend.SortableTable.prototype.removeButtonStates = function() {
+	this.table.find('thead th').attr('aria-sort', 'none');
+};
+
+HMCTSFrontend.SortableTable.prototype.addRows = function(rows) {
+	for(var i = 0; i < rows.length; i++) {
+		this.body.append(rows[i]);
+	}
+};
+
+HMCTSFrontend.SortableTable.prototype.getTableRowsArray = function() {
+	var rows = [];
+	var trs = this.body.find('tr');
+	for (var i = 0; i < trs.length; i++) {
+		rows.push(trs[i]);
+	}
+    return rows;
+};
+
+HMCTSFrontend.SortableTable.prototype.sort = function(rows, columnNumber, sortDirection) {
+	var newRows = rows.sort($.proxy(function(rowA, rowB) {
+		var tdA = $(rowA).find('td').eq(columnNumber);
+		var tdB = $(rowB).find('td').eq(columnNumber);
+		var valueA = this.getCellValue(tdA);
+		var valueB = this.getCellValue(tdB);
+		if(sortDirection === 'ascending') {
+			if(valueA < valueB) {
+				return -1;
+			}
+			if(valueA > valueB) {
+				return 1;
+			}
+			return 0;
+		} else {
+			if(valueB < valueA) {
+				return -1;
+			}
+			if(valueB > valueA) {
+				return 1;
+			}
+			return 0;
+		}
+	}, this));
+	return newRows;
+};
+
+HMCTSFrontend.SortableTable.prototype.getCellValue = function(cell) {
+	var val = cell.attr('data-sort-value');
+	val = val || cell.html();
+	if($.isNumeric(val)) {
+		val = parseInt(val, 10);
+	}
+	return val;
+};

package.json

 {
   "name": "@hmcts/frontend",
   "description": "HMCTS Frontend contains the code you need to start building a user interface for HMCTS.",
-  "version": "0.0.29-alpha",
+  "version": "0.0.30-alpha",
   "main": "all.js",
@@ -6,0 +6,0 @@ "sass": "all.scss",

No alert changes

Improved metrics

Total package byte prevSize

433112

increased by4.96%

Number of package files

123

increased by5.13%

Lines of code

9291

increased by6.22%

No dependency changes