Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ministryofjustice/frontend

Package Overview
Dependencies
Maintainers
11
Versions
76
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ministryofjustice/frontend - npm Package Compare versions

Comparing version 0.0.16-alpha to 0.0.17-alpha

391

moj/all.js

@@ -0,1 +1,10 @@

;(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.MOJFrontend = factory();
}
}(this, function() {
var MOJFrontend = {};

@@ -513,2 +522,59 @@ MOJFrontend.removeAttributeValue = function(el, attr, value) {

};
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;
}
}
};
if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJFrontend.fileApiSupported()) {

@@ -687,59 +753,2 @@ MOJFrontend.MultiFileUpload = function(params) {

}
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) {

@@ -767,134 +776,2 @@ this.el = element;

};
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.SearchToggle = function(options) {

@@ -1034,2 +911,136 @@ this.options = options;

return val;
};
};
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();
};
}
return MOJFrontend;
}));
{
"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.16-alpha",
"version": "0.0.17-alpha",
"main": "all.js",

@@ -6,0 +6,0 @@ "sass": "all.scss",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc