Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ministryofjustice/frontend
Advanced tools
@ministryofjustice/frontend - npm Package Compare versions
Comparing version 0.0.15-alpha to 0.0.16-alpha
161
moj/all.js
@@ -83,3 +83,3 @@ var MOJFrontend = {}; | ||
| el.id = $(el).attr('data-id').replace(/%index%/, index); | ||
| ($(el).prev('label')[0] || $(el).parents('label')[0]).htmlFor = el.id; | ||
| ($(el).siblings('label')[0] || $(el).parents('label')[0]).htmlFor = el.id; | ||
| }); | ||
@@ -117,2 +117,3 @@ }; | ||
| }; | ||
| MOJFrontend.ButtonMenu = function(params) { | ||
@@ -514,59 +515,2 @@ this.container = params.container; | ||
| }; | ||
| 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()) { | ||
@@ -745,2 +689,81 @@ 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) { | ||
| 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) { | ||
@@ -896,24 +919,2 @@ MOJFrontend.RichTextEditor = function(options) { | ||
| 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'); | ||
| } | ||
| }; | ||
| MOJFrontend.SortableTable = function(params) { | ||
@@ -920,0 +921,0 @@ this.table = $(params.table); |
@@ -40,3 +40,3 @@ MOJFrontend.AddAnother = function(container) { | ||
| el.id = $(el).attr('data-id').replace(/%index%/, index); | ||
| ($(el).prev('label')[0] || $(el).parents('label')[0]).htmlFor = el.id; | ||
| ($(el).siblings('label')[0] || $(el).parents('label')[0]).htmlFor = el.id; | ||
| }); | ||
@@ -73,2 +73,2 @@ }; | ||
| this.container.find('.moj-add-another__heading').focus(); | ||
| }; | ||
| }; |
| { | ||
| "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.15-alpha", | ||
| "version": "0.0.16-alpha", | ||
| "main": "all.js", | ||
@@ -6,0 +6,0 @@ "sass": "all.scss", |
@@ -9,3 +9,3 @@ # Ministry of Justice Frontend | ||
| MOJ Frontend is maintained by a team at the MOJ. If you want to know more about MOJ Frontend, please email the [Design System team](mailto:design-system@digital.justice.gov.uk). | ||
| MOJ Frontend is maintained by the MOJ Design System team. If you need support email the [Design System team](mailto:design-system@digital.justice.gov.uk). | ||
@@ -16,4 +16,3 @@ ## Quick start | ||
| Once installed, you will be able to use the code from the examples in the [MOJ Design System](https://moj-design-system.herokuapp.com/) | ||
| in your service. | ||
| Once installed, you will be able to use the code from the examples in the [MOJ Design System](https://moj-design-system.herokuapp.com/) in your service. | ||
@@ -52,2 +51,7 @@ ## Browser support | ||
| If you want to help us build MOJ Frontend, view our [contribution guidelines](CONTRIBUTING.md). | ||
| If you want to help us build MOJ Frontend, view our [contribution guidelines](CONTRIBUTING.md). | ||
| ### Further reading | ||
| - [Component principles](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_principles.md) | ||
| - [Component conventions](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_conventions.md) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Lines of code
- increased by0.01%
9843
- Number of lines in readme file
- increased by8%
54
Worsened metrics
- Total package byte prevSize
- decreased by-0.01%
537529
- Number of package files
- decreased by-0.62%
159
No dependency changes