@ministryofjustice/frontend
Advanced tools
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", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
537806
9855