@ministryofjustice/frontend - npm Package Compare versions

Comparing version 0.0.3-alpha to 0.0.4-alpha

all.js

@@ -1,3 +0,1 @@
-var MOJFrontend = {};
-
 MOJFrontend.removeAttributeValue = function(el, attr, value) {
@@ -30,3 +28,3 @@ var re, m;
 };
-
+var MOJFrontend = {};
 MOJFrontend.AddAnother = function(container) {
@@ -260,2 +258,361 @@ this.container = $(container);
 };
+MOJFrontend.Menu = function(params) {
+	this.container = params.container;
+	this.menu = this.container.find('.moj-menu__wrapper');
+	if(params.menuClasses) {
+		this.menu.addClass(params.menuClasses);
+	}
+	this.menu.attr('role', 'menu');
+	this.mq = params.mq;
+	this.buttonText = params.buttonText;
+	this.buttonClasses = params.buttonClasses || '';
+	this.keys = { esc: 27, up: 38, down: 40, tab: 9 };
+	this.menu.on('keydown', '[role=menuitem]', $.proxy(this, 'onButtonKeydown'));
+	this.createToggleButton();
+	this.setupResponsiveChecks();
+	$(document).on('click', $.proxy(this, 'onDocumentClick'));
+};
+
+MOJFrontend.Menu.prototype.onDocumentClick = function(e) {
+	if(!$.contains(this.container[0], e.target)) {
+	  this.hideMenu();
+  }
+};
+
+MOJFrontend.Menu.prototype.createToggleButton = function() {
+	this.menuButton = $('<button class="govuk-button moj-menu__toggle-button ' + this.buttonClasses + '" type="button" aria-haspopup="true" aria-expanded="false">'+this.buttonText+'</button>');
+	this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'));
+	this.menuButton.on('keydown', $.proxy(this, 'onMenuKeyDown'));
+};
+
+MOJFrontend.Menu.prototype.setupResponsiveChecks = function() {
+	this.mql = window.matchMedia(this.mq);
+	this.mql.addListener($.proxy(this, 'checkMode'));
+	this.checkMode(this.mql);
+};
+
+MOJFrontend.Menu.prototype.checkMode = function(mql) {
+	if(mql.matches) {
+		this.enableBigMode();
+	} else {
+		this.enableSmallMode();
+	}
+};
+
+MOJFrontend.Menu.prototype.enableSmallMode = function() {
+	this.container.prepend(this.menuButton);
+	this.hideMenu();
+	this.removeButtonClasses();
+	this.menu.attr('role', 'menu');
+	this.container.find('.moj-menu__item').attr('role', 'menuitem');
+};
+
+MOJFrontend.Menu.prototype.enableBigMode = function() {
+	this.menuButton.detach();
+	this.showMenu();
+	this.addButtonClasses();
+	this.menu.removeAttr('role');
+	this.container.find('.moj-menu__item').removeAttr('role');
+};
+
+MOJFrontend.Menu.prototype.removeButtonClasses = function() {
+	this.menu.find('.moj-menu__item').each(function(index, el) {
+		if($(el).hasClass('govuk-button--secondary')) {
+			$(el).attr('data-secondary', 'true');
+			$(el).removeClass('govuk-button--secondary');
+		}
+		$(el).removeClass('govuk-button');
+	});
+};
+
+MOJFrontend.Menu.prototype.addButtonClasses = function() {
+	this.menu.find('.moj-menu__item').each(function(index, el) {
+		if($(el).attr('data-secondary') == 'true') {
+			$(el).addClass('govuk-button--secondary');
+		}
+		$(el).addClass('govuk-button');
+	});
+};
+
+MOJFrontend.Menu.prototype.hideMenu = function() {
+	this.menuButton.attr('aria-expanded', 'false');
+};
+
+MOJFrontend.Menu.prototype.showMenu = function() {
+	this.menuButton.attr('aria-expanded', 'true');
+};
+
+MOJFrontend.Menu.prototype.onMenuButtonClick = function() {
+	this.toggle();
+};
+
+MOJFrontend.Menu.prototype.toggle = function() {
+	if(this.menuButton.attr('aria-expanded') == 'false') {
+		this.showMenu();
+		this.menu.find('[role=menuitem]').first().focus();
+	} else {
+		this.hideMenu();
+		this.menuButton.focus();
+	}
+};
+
+MOJFrontend.Menu.prototype.onMenuKeyDown = function(e) {
+	switch (e.keyCode) {
+		case this.keys.down:
+			this.toggle();
+			break;
+	}
+};
+
+MOJFrontend.Menu.prototype.onButtonKeydown = function(e) {
+	switch (e.keyCode) {
+		case this.keys.up:
+			e.preventDefault();
+			this.focusPrevious(e.currentTarget);
+			break;
+		case this.keys.down:
+			e.preventDefault();
+			this.focusNext(e.currentTarget);
+			break;
+		case this.keys.esc:
+			if(!this.mq.matches) {
+				this.menuButton.focus();
+				this.hideMenu();
+			}
+			break;
+		case this.keys.tab:
+			if(!this.mq.matches) {
+				this.hideMenu();
+			}
+	}
+};
+
+MOJFrontend.Menu.prototype.focusNext = function(currentButton) {
+	var next = $(currentButton).next();
+	if(next[0]) {
+		next.focus();
+	} else {
+		this.container.find('[role=menutiem]').first().focus();
+	}
+};
+
+MOJFrontend.Menu.prototype.focusPrevious = function(currentButton) {
+	var prev = $(currentButton).prev();
+	if(prev[0]) {
+		prev.focus();
+	} else {
+		this.container.find('[role=menutiem]').last().focus();
+	}
+};
+MOJFrontend.MultiSelect = function(options) {
+  this.container = options.container;
+  this.toggle = $(this.getToggleHtml());
+  this.toggleButton = this.toggle.find('input');
+  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
+  this.container.append(this.toggle);
+  this.checkboxes = options.checkboxes;
+  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
+  this.checked = options.checked || false;
+};
+
+MOJFrontend.MultiSelect.prototype.getToggleHtml = function() {
+  var html = '';
+  html += '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
+  html += '  <input type="checkbox" class="govuk-checkboxes__input" id="checkboxes-all">';
+  html += '  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="checkboxes-all">';
+  html += '    <span class="govuk-visually-hidden">Select all</span>';
+  html += '  </label>';
+  html += '</div>';
+  return html;
+};
+
+MOJFrontend.MultiSelect.prototype.onButtonClick = function(e) {
+  if(this.checked) {
+    this.uncheckAll();
+    this.toggleButton[0].checked = false;
+  } else {
+    this.checkAll();
+    this.toggleButton[0].checked = true;
+  }
+};
+
+MOJFrontend.MultiSelect.prototype.checkAll = function() {
+  this.checkboxes.each($.proxy(function(index, el) {
+    el.checked = true;
+  }, this));
+  this.checked = true;
+};
+
+MOJFrontend.MultiSelect.prototype.uncheckAll = function() {
+  this.checkboxes.each($.proxy(function(index, el) {
+    el.checked = false;
+  }, this));
+  this.checked = false;
+};
+
+MOJFrontend.MultiSelect.prototype.onCheckboxClick = function(e) {
+  if(!e.target.checked) {
+    this.toggleButton[0].checked = false;
+    this.checked = false;
+  } else {
+    if(this.checkboxes.filter(':checked').length === this.checkboxes.length) {
+      this.toggleButton[0].checked = true;
+      this.checked = true;
+    }
+  }
+};
+MOJFrontend.PasswordReveal = function(element) {
+  this.el = element;
+  $(this.el).wrap('<div class="moj-password-reveal"></div>');
+  this.container = $(this.el).parent();
+  this.createButton();
+};
+
+MOJFrontend.PasswordReveal.prototype.createButton = function() {
+  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show</button>');
+  this.container.append(this.button);
+  this.button.on('click', $.proxy(this, 'onButtonClick'));
+};
+
+MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
+  if (this.el.type === 'password') {
+    this.el.type = 'text';
+    this.button.text('Hide');
+  } else {
+    this.el.type = 'password';
+    this.button.text('Show');
+  }
+};
+if('contentEditable' in document.documentElement) {
+  MOJFrontend.RichTextEditor = function(options) {
+    this.options = options;
+    this.options.toolbar = this.options.toolbar || {
+      bold: false,
+      italic: false,
+      underline: false,
+      bullets: true,
+      numbers: true
+    };
+    this.textarea = this.options.textarea;
+    this.container = $(this.textarea).parent();
+    this.createToolbar();
+    this.hideDefault();
+    this.configureToolbar();
+    this.keys = {
+      left: 37,
+      right: 39,
+      up: 38,
+      down: 40
+    };
+    this.container.on('click', '.moj-rich-text-editor__toolbar-button', $.proxy(this, 'onButtonClick'));
+    this.container.find('.moj-rich-text-editor__content').on('input', $.proxy(this, 'onEditorInput'));
+    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
+    this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
+  };
+
+  MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function(e) {
+    var focusableButton;
+    switch(e.keyCode) {
+      case this.keys.right:
+      case this.keys.down:
+        focusableButton = this.toolbar.find('button[tabindex=0]');
+        var nextButton = focusableButton.next('button');
+        if(nextButton[0]) {
+          nextButton.focus();
+          focusableButton.attr('tabindex', '-1');
+          nextButton.attr('tabindex', '0');
+        }
+        break;
+      case this.keys.left:
+      case this.keys.up:
+        focusableButton = this.toolbar.find('button[tabindex=0]');
+        var previousButton = focusableButton.prev('button');
+        if(previousButton[0]) {
+          previousButton.focus();
+          focusableButton.attr('tabindex', '-1');
+          previousButton.attr('tabindex', '0');
+        }
+        break;
+    }
+  };
+
+  MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function() {
+    var html = '';
+
+    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+
+    if(this.options.toolbar.bold) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+    }
+
+    if(this.options.toolbar.italic) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+    }
+
+    if(this.options.toolbar.underline) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+    }
+
+    if(this.options.toolbar.bullets) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+    }
+
+    if(this.options.toolbar.numbers) {
+      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+    }
+
+    html += '</div>';
+    return html;
+  };
+
+  MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
+    return this.getToolbarHtml() + '<div class="moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
+  };
+
+  MOJFrontend.RichTextEditor.prototype.hideDefault = function() {
+    this.textarea = this.container.find('textarea');
+    this.textarea.addClass('govuk-visually-hidden');
+    this.textarea.attr('aria-hidden', true);
+    this.textarea.attr('tabindex', '-1');
+  };
+
+  MOJFrontend.RichTextEditor.prototype.createToolbar = function() {
+    this.toolbar = document.createElement('div');
+    this.toolbar.className = 'moj-rich-text-editor';
+    this.toolbar.innerHTML = this.getEnhancedHtml();
+    this.container.append(this.toolbar);
+    this.toolbar = this.container.find('.moj-rich-text-editor__toolbar');
+    this.container.find('.moj-rich-text-editor__content').html(this.textarea.val());
+  };
+
+  MOJFrontend.RichTextEditor.prototype.configureToolbar = function() {
+    this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button');
+    this.buttons.prop('tabindex', '-1');
+    var firstTab = this.buttons.first();
+    firstTab.prop('tabindex', '0');
+  };
+
+  MOJFrontend.RichTextEditor.prototype.onButtonClick = function(e) {
+    document.execCommand($(e.currentTarget).data('command'), false, null);
+  };
+
+  MOJFrontend.RichTextEditor.prototype.getContent = function() {
+    return this.container.find('.moj-rich-text-editor__content').html();
+  };
+
+  MOJFrontend.RichTextEditor.prototype.onEditorInput = function(e) {
+    this.updateTextarea();
+  };
+
+  MOJFrontend.RichTextEditor.prototype.updateTextarea = function() {
+    document.execCommand('defaultParagraphSeparator', false, 'p');
+    this.textarea.val(this.getContent());
+  };
+
+  MOJFrontend.RichTextEditor.prototype.onLabelClick = function(e) {
+    e.preventDefault();
+    this.container.find('.moj-rich-text-editor__content').focus();
+  };
+
+}
 MOJFrontend.SortableTable = function(params) {
@@ -262,0 +619,0 @@ this.table = $(params.table);

namespace.js

@@ -1,29 +0,1 @@
-var MOJFrontend = {};
-
-MOJFrontend.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])?' ':''))
-      }
-    }
-  }
-}
-
-MOJFrontend.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);
-    }
-  }
-};
+var MOJFrontend = {};

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.3-alpha",
+  "version": "0.0.4-alpha",
   "main": "all.js",
@@ -31,3 +31,6 @@ "sass": "all.scss",
     "access": "public"
+  },
+  "dependencies": {
+    "moment": "^2.22.2"
   }
 }

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

449223

increased by13.91%

Number of package files

124

increased by37.78%

Lines of code

9315

increased by7.97%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedmoment@^2.22.2

• + Addedmoment@2.30.1(transitive)