diff --git a/CHANGELOG.md b/CHANGELOG.md index f5537c67..431384f5 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## [0.0.19](https://github.com/ministryofjustice/moj-frontend/compare/v0.0.18-alpha...v0.0.19-alpha) (2020-10-22) + + +### Bug Fixes + +* upgrade govuk-frontend from 3.6.0 to 3.7.0 ([#100](https://github.com/ministryofjustice/moj-frontend/issues/100)) ([3498af0](https://github.com/ministryofjustice/moj-frontend/commit/3498af0fab6d8959ccdcda802bc2a2817c149c7f)) +* upgrade moment from 2.26.0 to 2.27.0 ([#102](https://github.com/ministryofjustice/moj-frontend/issues/102)) ([611081a](https://github.com/ministryofjustice/moj-frontend/commit/611081a1c1627bb75b122bc26921c4c6e8cf0ce4)) + # Changelog ## v0.0.19-alpha @@ -120,4 +128,4 @@ Other: ## v0.0.1-alpha -Initial commit \ No newline at end of file +Initial commit diff --git a/package/moj/all-ie8.scss b/package/moj/all-ie8.scss new file mode 100755 index 00000000..6457d048 --- /dev/null +++ b/package/moj/all-ie8.scss @@ -0,0 +1,3 @@ +$govuk-is-ie8: true; + +@import "all"; \ No newline at end of file diff --git a/package/moj/all.js b/package/moj/all.js new file mode 100755 index 00000000..327edb4e --- /dev/null +++ b/package/moj/all.js @@ -0,0 +1,1052 @@ +;(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 = {}; +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); + } + } +}; + +MOJFrontend.dragAndDropSupported = function() { + var div = document.createElement('div'); + return typeof div.ondrop != 'undefined'; +}; + +MOJFrontend.formDataSupported = function() { + return typeof FormData == 'function'; +}; + +MOJFrontend.fileApiSupported = function() { + var input = document.createElement('input'); + input.type = 'file'; + return typeof input.files != 'undefined'; +}; +MOJFrontend.AddAnother = function(container) { + this.container = $(container); + this.container.on('click', '.moj-add-another__remove-button', $.proxy(this, 'onRemoveButtonClick')); + this.container.on('click', '.moj-add-another__add-button', $.proxy(this, 'onAddButtonClick')); + this.container.find('.moj-add-another__add-button, moj-add-another__remove-button').prop('type', 'button'); +}; + +MOJFrontend.AddAnother.prototype.onAddButtonClick = function(e) { + var item = this.getNewItem(); + this.updateAttributes(this.getItems().length, item); + this.resetItem(item); + var firstItem = this.getItems().first(); + if(!this.hasRemoveButton(firstItem)) { + this.createRemoveButton(firstItem); + } + this.getItems().last().after(item); + item.find('input, textarea, select').first().focus(); +}; + +MOJFrontend.AddAnother.prototype.hasRemoveButton = function(item) { + return item.find('.moj-add-another__remove-button').length; +}; + +MOJFrontend.AddAnother.prototype.getItems = function() { + return this.container.find('.moj-add-another__item'); +}; + +MOJFrontend.AddAnother.prototype.getNewItem = function() { + var item = this.getItems().first().clone(); + if(!this.hasRemoveButton(item)) { + this.createRemoveButton(item); + } + return item; +}; + +MOJFrontend.AddAnother.prototype.updateAttributes = function(index, item) { + item.find('[data-name]').each(function(i, el) { + el.name = $(el).attr('data-name').replace(/%index%/, index); + el.id = $(el).attr('data-id').replace(/%index%/, index); + ($(el).siblings('label')[0] || $(el).parents('label')[0]).htmlFor = el.id; + }); +}; + +MOJFrontend.AddAnother.prototype.createRemoveButton = function(item) { + item.append(''); +}; + +MOJFrontend.AddAnother.prototype.resetItem = function(item) { + item.find('[data-name], [data-id]').each(function(index, el) { + if(el.type == 'checkbox' || el.type == 'radio') { + el.checked = false; + } else { + el.value = ''; + } + }); +}; + +MOJFrontend.AddAnother.prototype.onRemoveButtonClick = function(e) { + $(e.currentTarget).parents('.moj-add-another__item').remove(); + var items = this.getItems(); + if(items.length === 1) { + items.find('.moj-add-another__remove-button').remove(); + } + items.each($.proxy(function(index, el) { + this.updateAttributes(index, $(el)); + }, this)); + this.focusHeading(); +}; + +MOJFrontend.AddAnother.prototype.focusHeading = function() { + this.container.find('.moj-add-another__heading').focus(); +}; + +MOJFrontend.ButtonMenu = function(params) { + this.container = params.container; + this.menu = this.container.find('.moj-button-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.ButtonMenu.prototype.onDocumentClick = function(e) { + if(!$.contains(this.container[0], e.target)) { + this.hideMenu(); + } +}; + +MOJFrontend.ButtonMenu.prototype.createToggleButton = function() { + this.menuButton = $(''); + this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick')); + this.menuButton.on('keydown', $.proxy(this, 'onMenuKeyDown')); +}; + +MOJFrontend.ButtonMenu.prototype.setupResponsiveChecks = function() { + this.mql = window.matchMedia(this.mq); + this.mql.addListener($.proxy(this, 'checkMode')); + this.checkMode(this.mql); +}; + +MOJFrontend.ButtonMenu.prototype.checkMode = function(mql) { + if(mql.matches) { + this.enableBigMode(); + } else { + this.enableSmallMode(); + } +}; + +MOJFrontend.ButtonMenu.prototype.enableSmallMode = function() { + this.container.prepend(this.menuButton); + this.hideMenu(); + this.removeButtonClasses(); + this.menu.attr('role', 'menu'); + this.container.find('.moj-button-menu__item').attr('role', 'menuitem'); +}; + +MOJFrontend.ButtonMenu.prototype.enableBigMode = function() { + this.menuButton.detach(); + this.showMenu(); + this.addButtonClasses(); + this.menu.removeAttr('role'); + this.container.find('.moj-button-menu__item').removeAttr('role'); +}; + +MOJFrontend.ButtonMenu.prototype.removeButtonClasses = function() { + this.menu.find('.moj-button-menu__item').each(function(index, el) { + if($(el).hasClass('govuk-button--secondary')) { + $(el).attr('data-secondary', 'true'); + $(el).removeClass('govuk-button--secondary'); + } + if($(el).hasClass('govuk-button--warning')) { + $(el).attr('data-warning', 'true'); + $(el).removeClass('govuk-button--warning'); + } + $(el).removeClass('govuk-button'); + }); +}; + +MOJFrontend.ButtonMenu.prototype.addButtonClasses = function() { + this.menu.find('.moj-button-menu__item').each(function(index, el) { + if($(el).attr('data-secondary') == 'true') { + $(el).addClass('govuk-button--secondary'); + } + if($(el).attr('data-warning') == 'true') { + $(el).addClass('govuk-button--warning'); + } + $(el).addClass('govuk-button'); + }); +}; + +MOJFrontend.ButtonMenu.prototype.hideMenu = function() { + this.menuButton.attr('aria-expanded', 'false'); +}; + +MOJFrontend.ButtonMenu.prototype.showMenu = function() { + this.menuButton.attr('aria-expanded', 'true'); +}; + +MOJFrontend.ButtonMenu.prototype.onMenuButtonClick = function() { + this.toggle(); +}; + +MOJFrontend.ButtonMenu.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.ButtonMenu.prototype.onMenuKeyDown = function(e) { + switch (e.keyCode) { + case this.keys.down: + this.toggle(); + break; + } +}; + +MOJFrontend.ButtonMenu.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.ButtonMenu.prototype.focusNext = function(currentButton) { + var next = $(currentButton).next(); + if(next[0]) { + next.focus(); + } else { + this.container.find('[role=menuitem]').first().focus(); + } +}; + +MOJFrontend.ButtonMenu.prototype.focusPrevious = function(currentButton) { + var prev = $(currentButton).prev(); + if(prev[0]) { + prev.focus(); + } else { + this.container.find('[role=menuitem]').last().focus(); + } +}; +MOJFrontend.FilterToggleButton = function(options) { + this.options = options; + this.container = this.options.toggleButton.container; + this.createToggleButton(); + this.setupResponsiveChecks(); + this.options.filter.container.attr('tabindex', '-1'); + if(this.options.startHidden) { + this.hideMenu(); + } +}; + +MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function() { + this.mq = window.matchMedia(this.options.bigModeMediaQuery); + this.mq.addListener($.proxy(this, 'checkMode')); + this.checkMode(this.mq); +}; + +MOJFrontend.FilterToggleButton.prototype.createToggleButton = function() { + this.menuButton = $(''); + this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick')); + this.options.toggleButton.container.append(this.menuButton); +}; + +MOJFrontend.FilterToggleButton.prototype.checkMode = function(mq) { + if(mq.matches) { + this.enableBigMode(); + } else { + this.enableSmallMode(); + } +}; + +MOJFrontend.FilterToggleButton.prototype.enableBigMode = function() { + this.showMenu(); + this.removeCloseButton(); +}; + +MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function() { + this.hideMenu(); + this.addCloseButton(); +}; + +MOJFrontend.FilterToggleButton.prototype.addCloseButton = function() { + if(this.options.closeButton) { + this.closeButton = $(''); + this.closeButton.on('click', $.proxy(this, 'onCloseClick')); + this.options.closeButton.container.append(this.closeButton); + } +}; + +MOJFrontend.FilterToggleButton.prototype.onCloseClick = function() { + this.hideMenu(); + this.menuButton.focus(); +}; + +MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() { + if(this.closeButton) { + this.closeButton.remove(); + this.closeButton = null; + } +}; + +MOJFrontend.FilterToggleButton.prototype.hideMenu = function() { + this.menuButton.attr('aria-expanded', 'false'); + this.options.filter.container.addClass('moj-js-hidden'); + this.menuButton.text(this.options.toggleButton.showText); +}; + +MOJFrontend.FilterToggleButton.prototype.showMenu = function() { + this.menuButton.attr('aria-expanded', 'true'); + this.options.filter.container.removeClass('moj-js-hidden'); + this.menuButton.text(this.options.toggleButton.hideText); +}; + +MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() { + this.toggle(); +}; + +MOJFrontend.FilterToggleButton.prototype.toggle = function() { + if(this.menuButton.attr('aria-expanded') == 'false') { + this.showMenu(); + this.options.filter.container.focus(); + } else { + this.hideMenu(); + } +}; +MOJFrontend.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.originalTitle = document.title; +}; + +MOJFrontend.FormValidator.entityMap = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', + '/': '/', + '`': '`', + '=': '=' +}; + +MOJFrontend.FormValidator.prototype.escapeHtml = function(string) { + return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap (s) { + return MOJFrontend.FormValidator.entityMap[s]; + }); +}; + +MOJFrontend.FormValidator.prototype.resetTitle = function() { + document.title = this.originalTitle; +}; + +MOJFrontend.FormValidator.prototype.updateTitle = function() { + document.title = "" + this.errors.length + " errors - " + document.title; +}; + +MOJFrontend.FormValidator.prototype.showSummary = function () { + this.summary.html(this.getSummaryHtml()); + this.summary.removeClass('moj-hidden'); + this.summary.attr('aria-labelledby', 'errorSummary-heading'); + this.summary.focus(); +}; + +MOJFrontend.FormValidator.prototype.getSummaryHtml = function() { + var html = '

There is a problem

'; + html += '
'; + html += ''; + html += '
'; + return html; +}; + +MOJFrontend.FormValidator.prototype.hideSummary = function() { + this.summary.addClass('moj-hidden'); + this.summary.removeAttr('aria-labelledby'); +}; + +MOJFrontend.FormValidator.prototype.onSubmit = function (e) { + this.removeInlineErrors(); + this.hideSummary(); + this.resetTitle(); + if(!this.validate()) { + e.preventDefault(); + this.updateTitle(); + this.showSummary(); + this.showInlineErrors(); + } +}; + +MOJFrontend.FormValidator.prototype.showInlineErrors = function() { + for (var i = 0, j = this.errors.length; i < j; i++) { + this.showInlineError(this.errors[i]); + } +}; + +MOJFrontend.FormValidator.prototype.showInlineError = function (error) { + var errorSpanId = error.fieldName + '-error'; + var errorSpan = ''+this.escapeHtml(error.message)+''; + 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'); + MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId); + } else { + label.after(errorSpan); + control.attr('aria-invalid', 'true'); + MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId); + } +}; + +MOJFrontend.FormValidator.prototype.removeInlineErrors = function() { + var error; + var i; + for (var i = 0; i < this.errors.length; i++) { + this.removeInlineError(this.errors[i]); + } +}; + +MOJFrontend.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'; + MOJFrontend.removeAttributeValue(fieldContainer.find('[aria-describedby]')[0], 'aria-describedby', errorSpanId); +}; + +MOJFrontend.FormValidator.prototype.addValidator = function(fieldName, rules) { + this.validators.push({ + fieldName: fieldName, + rules: rules, + field: this.form.elements[fieldName] + }); +}; + +MOJFrontend.FormValidator.prototype.validate = function() { + this.errors = []; + var validator = null, + validatorReturnValue = true, + i, + j; + for (i = 0; i < this.validators.length; i++) { + validator = this.validators[i]; + for (j = 0; j < validator.rules.length; j++) { + validatorReturnValue = validator.rules[j].method(validator.field, + validator.rules[j].params); + + if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) { + this.errors.push({ + fieldName: validator.fieldName, + message: validator.rules[j].message + }); + break; + } else if(typeof validatorReturnValue === 'string') { + this.errors.push({ + fieldName: validatorReturnValue, + message: validator.rules[j].message + }); + break; + } + } + } + return this.errors.length === 0; +}; +if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJFrontend.fileApiSupported()) { + MOJFrontend.MultiFileUpload = function(params) { + this.defaultParams = { + uploadFileEntryHook: $.noop, + uploadFileExitHook: $.noop, + uploadFileErrorHook: $.noop, + fileDeleteHook: $.noop, + uploadStatusText: 'Uploading files, please wait', + dropzoneHintText: 'Drag and drop files here or', + dropzoneButtonText: 'Choose files' + }; + + this.params = $.extend({}, this.defaultParams, params); + + this.params.container.addClass('moj-multi-file-upload--enhanced'); + + this.feedbackContainer = this.params.container.find('.moj-multi-file__uploaded-files'); + this.setupFileInput(); + this.setupDropzone(); + this.setupLabel(); + this.setupStatusBox(); + this.params.container.on('click', '.moj-multi-file-upload__delete', $.proxy(this, 'onFileDeleteClick')); + }; + + MOJFrontend.MultiFileUpload.prototype.setupDropzone = function() { + this.fileInput.wrap('
'); + this.dropzone = this.params.container.find('.moj-multi-file-upload__dropzone'); + this.dropzone.on('dragover', $.proxy(this, 'onDragOver')); + this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave')); + this.dropzone.on('drop', $.proxy(this, 'onDrop')); + }; + + MOJFrontend.MultiFileUpload.prototype.setupLabel = function() { + this.label = $(''); + this.dropzone.append('

' + this.params.dropzoneHintText + '

'); + this.dropzone.append(this.label); + }; + + MOJFrontend.MultiFileUpload.prototype.setupFileInput = function() { + this.fileInput = this.params.container.find('.moj-multi-file-upload__input'); + this.fileInput.on('change', $.proxy(this, 'onFileChange')); + this.fileInput.on('focus', $.proxy(this, 'onFileFocus')); + this.fileInput.on('blur', $.proxy(this, 'onFileBlur')); + }; + + MOJFrontend.MultiFileUpload.prototype.setupStatusBox = function() { + this.status = $('
'); + this.dropzone.append(this.status); + }; + + MOJFrontend.MultiFileUpload.prototype.onDragOver = function(e) { + e.preventDefault(); + this.dropzone.addClass('moj-multi-file-upload--dragover'); + }; + + MOJFrontend.MultiFileUpload.prototype.onDragLeave = function() { + this.dropzone.removeClass('moj-multi-file-upload--dragover'); + }; + + MOJFrontend.MultiFileUpload.prototype.onDrop = function(e) { + e.preventDefault(); + this.dropzone.removeClass('moj-multi-file-upload--dragover'); + this.feedbackContainer.removeClass('moj-hidden'); + this.status.html(this.params.uploadStatusText); + this.uploadFiles(e.originalEvent.dataTransfer.files); + }; + + MOJFrontend.MultiFileUpload.prototype.uploadFiles = function(files) { + for(var i = 0; i < files.length; i++) { + this.uploadFile(files[i]); + } + }; + + MOJFrontend.MultiFileUpload.prototype.onFileChange = function(e) { + this.feedbackContainer.removeClass('moj-hidden'); + this.status.html(this.params.uploadStatusText); + this.uploadFiles(e.currentTarget.files); + this.fileInput.replaceWith($(e.currentTarget).val('').clone(true)); + this.setupFileInput(); + this.fileInput.focus(); + }; + + MOJFrontend.MultiFileUpload.prototype.onFileFocus = function(e) { + this.label.addClass('moj-multi-file-upload--focused'); + }; + + MOJFrontend.MultiFileUpload.prototype.onFileBlur = function(e) { + this.label.removeClass('moj-multi-file-upload--focused'); + }; + + MOJFrontend.MultiFileUpload.prototype.getSuccessHtml = function(success) { + return ' ' + success.messageHtml + ''; + }; + + MOJFrontend.MultiFileUpload.prototype.getErrorHtml = function(error) { + return ' '+ error.message +''; + }; + + MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function(file) { + var html = ''; + html += '
'; + html += '
'; + html += ''+file.name+''; + html += '0%'; + html += '
'; + html += '
'; + html += '
'; + return html; + }; + + MOJFrontend.MultiFileUpload.prototype.getDeleteButtonHtml = function(file) { + var html = ''; + return html; + }; + + MOJFrontend.MultiFileUpload.prototype.uploadFile = function(file) { + this.params.uploadFileEntryHook(this, file); + var formData = new FormData(); + formData.append('documents', file); + var item = $(this.getFileRowHtml(file)); + this.feedbackContainer.find('.moj-multi-file-upload__list').append(item); + + $.ajax({ + url: this.params.uploadUrl, + type: 'post', + data: formData, + processData: false, + contentType: false, + success: $.proxy(function(response){ + if(response.error) { + item.find('.moj-multi-file-upload__message').html(this.getErrorHtml(response.error)); + this.status.html(response.error.message); + } else { + item.find('.moj-multi-file-upload__message').html(this.getSuccessHtml(response.success)); + this.status.html(response.success.messageText); + } + item.find('.moj-multi-file-upload__actions').append(this.getDeleteButtonHtml(response.file)); + this.params.uploadFileExitHook(this, file, response); + }, this), + error: $.proxy(function(jqXHR, textStatus, errorThrown) { + this.params.uploadFileErrorHook(this, file, jqXHR, textStatus, errorThrown); + }, this), + xhr: function() { + var xhr = new XMLHttpRequest(); + xhr.upload.addEventListener('progress', function(e) { + if (e.lengthComputable) { + var percentComplete = e.loaded / e.total; + percentComplete = parseInt(percentComplete * 100, 10); + item.find('.moj-multi-file-upload__progress').text(' ' + percentComplete + '%'); + } + }, false); + return xhr; + } + }); + }; + + MOJFrontend.MultiFileUpload.prototype.onFileDeleteClick = function(e) { + e.preventDefault(); // if user refreshes page and then deletes + var button = $(e.currentTarget); + var data = {}; + data[button[0].name] = button[0].value; + $.ajax({ + url: this.params.deleteUrl, + type: 'post', + dataType: 'json', + data: data, + success: $.proxy(function(response){ + if(response.error) { + // handle error + } else { + button.parents('.moj-multi-file-upload__row').remove(); + if(this.feedbackContainer.find('.moj-multi-file-upload__row').length === 0) { + this.feedbackContainer.addClass('moj-hidden'); + } + } + this.params.fileDeleteHook(this, response); + }, this) + }); + }; +} + +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 += '
'; + html += ' '; + html += ' '; + html += '
'; + 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('
'); + this.container = $(this.el).parent(); + this.createButton(); +}; + +MOJFrontend.PasswordReveal.prototype.createButton = function() { + this.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 += ''; + return html; + }; + + MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) { + return this.getToolbarHtml() + '
'; + }; + + 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) { + this.options = options; + this.toggleButton = $(''); + this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick')); + this.options.toggleButton.container.append(this.toggleButton); +}; + +MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function() { + if(this.toggleButton.attr('aria-expanded') == 'false') { + this.toggleButton.attr('aria-expanded', 'true'); + this.options.search.container.removeClass('moj-js-hidden'); + this.options.search.container.find('input').first().focus(); + } else { + this.options.search.container.addClass('moj-js-hidden'); + this.toggleButton.attr('aria-expanded', 'false'); + } +}; + +MOJFrontend.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')); +}; + +MOJFrontend.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'; +}; + +MOJFrontend.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); + } + } +}; + +MOJFrontend.SortableTable.prototype.createHeadingButton = function(heading, i) { + var text = heading.text(); + var button = $(''); + heading.text(''); + heading.append(button); +}; + +MOJFrontend.SortableTable.prototype.createStatusBox = function() { + this.status = $('
'); + this.table.parent().append(this.status); +}; + +MOJFrontend.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); +}; + +MOJFrontend.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); +}; + +MOJFrontend.SortableTable.prototype.removeButtonStates = function() { + this.table.find('thead th').attr('aria-sort', 'none'); +}; + +MOJFrontend.SortableTable.prototype.addRows = function(rows) { + for(var i = 0; i < rows.length; i++) { + this.body.append(rows[i]); + } +}; + +MOJFrontend.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; +}; + +MOJFrontend.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; +}; + +MOJFrontend.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; +}; +return MOJFrontend; +})); diff --git a/package/moj/all.scss b/package/moj/all.scss new file mode 100755 index 00000000..56a9b653 --- /dev/null +++ b/package/moj/all.scss @@ -0,0 +1,5 @@ +@import "settings/all"; +@import "helpers/all"; +@import "objects/all"; +@import "components/all"; +@import "utilities/all"; diff --git a/package/moj/assets/images/govuk-logotype-crown.png b/package/moj/assets/images/govuk-logotype-crown.png new file mode 100644 index 00000000..90638b3f Binary files /dev/null and b/package/moj/assets/images/govuk-logotype-crown.png differ diff --git a/package/moj/assets/images/icon-alert-information.svg b/package/moj/assets/images/icon-alert-information.svg new file mode 100755 index 00000000..79ef1cd1 --- /dev/null +++ b/package/moj/assets/images/icon-alert-information.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-alert-success.svg b/package/moj/assets/images/icon-alert-success.svg new file mode 100755 index 00000000..4112a43d --- /dev/null +++ b/package/moj/assets/images/icon-alert-success.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-alert-warning.svg b/package/moj/assets/images/icon-alert-warning.svg new file mode 100755 index 00000000..3d4ffd64 --- /dev/null +++ b/package/moj/assets/images/icon-alert-warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-arrow-black-down.svg b/package/moj/assets/images/icon-arrow-black-down.svg new file mode 100755 index 00000000..606d1d9b --- /dev/null +++ b/package/moj/assets/images/icon-arrow-black-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-arrow-black-up.svg b/package/moj/assets/images/icon-arrow-black-up.svg new file mode 100755 index 00000000..34326c20 --- /dev/null +++ b/package/moj/assets/images/icon-arrow-black-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-arrow-white-down.svg b/package/moj/assets/images/icon-arrow-white-down.svg new file mode 100755 index 00000000..24c76567 --- /dev/null +++ b/package/moj/assets/images/icon-arrow-white-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-arrow-white-up.svg b/package/moj/assets/images/icon-arrow-white-up.svg new file mode 100755 index 00000000..38e80e84 --- /dev/null +++ b/package/moj/assets/images/icon-arrow-white-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-close-cross-black.svg b/package/moj/assets/images/icon-close-cross-black.svg new file mode 100755 index 00000000..233c7cc7 --- /dev/null +++ b/package/moj/assets/images/icon-close-cross-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-document.png b/package/moj/assets/images/icon-document.png new file mode 100755 index 00000000..793f6ae1 Binary files /dev/null and b/package/moj/assets/images/icon-document.png differ diff --git a/package/moj/assets/images/icon-document.svg b/package/moj/assets/images/icon-document.svg new file mode 100755 index 00000000..4d0eea9f --- /dev/null +++ b/package/moj/assets/images/icon-document.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-progress-tick.png b/package/moj/assets/images/icon-progress-tick.png new file mode 100755 index 00000000..5be23704 Binary files /dev/null and b/package/moj/assets/images/icon-progress-tick.png differ diff --git a/package/moj/assets/images/icon-progress-tick.svg b/package/moj/assets/images/icon-progress-tick.svg new file mode 100755 index 00000000..6401099d --- /dev/null +++ b/package/moj/assets/images/icon-progress-tick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-search-black.svg b/package/moj/assets/images/icon-search-black.svg new file mode 100644 index 00000000..56c9a94a --- /dev/null +++ b/package/moj/assets/images/icon-search-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-search-blue.svg b/package/moj/assets/images/icon-search-blue.svg new file mode 100644 index 00000000..ecad1be0 --- /dev/null +++ b/package/moj/assets/images/icon-search-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-search-white.svg b/package/moj/assets/images/icon-search-white.svg new file mode 100755 index 00000000..9941bf09 --- /dev/null +++ b/package/moj/assets/images/icon-search-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-tag-remove-cross-white.svg b/package/moj/assets/images/icon-tag-remove-cross-white.svg new file mode 100755 index 00000000..233d3753 --- /dev/null +++ b/package/moj/assets/images/icon-tag-remove-cross-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-tag-remove-cross.svg b/package/moj/assets/images/icon-tag-remove-cross.svg new file mode 100755 index 00000000..16cca685 --- /dev/null +++ b/package/moj/assets/images/icon-tag-remove-cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-toggle-plus-minus.svg b/package/moj/assets/images/icon-toggle-plus-minus.svg new file mode 100755 index 00000000..6830c1a2 --- /dev/null +++ b/package/moj/assets/images/icon-toggle-plus-minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-wysiwyg-bold.svg b/package/moj/assets/images/icon-wysiwyg-bold.svg new file mode 100755 index 00000000..a4928eac --- /dev/null +++ b/package/moj/assets/images/icon-wysiwyg-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-wysiwyg-italic.svg b/package/moj/assets/images/icon-wysiwyg-italic.svg new file mode 100755 index 00000000..12a6fc75 --- /dev/null +++ b/package/moj/assets/images/icon-wysiwyg-italic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-wysiwyg-ordered-list.svg b/package/moj/assets/images/icon-wysiwyg-ordered-list.svg new file mode 100755 index 00000000..e750152e --- /dev/null +++ b/package/moj/assets/images/icon-wysiwyg-ordered-list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-wysiwyg-underline.svg b/package/moj/assets/images/icon-wysiwyg-underline.svg new file mode 100755 index 00000000..815999d8 --- /dev/null +++ b/package/moj/assets/images/icon-wysiwyg-underline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/icon-wysiwyg-unordered-list.svg b/package/moj/assets/images/icon-wysiwyg-unordered-list.svg new file mode 100755 index 00000000..d055d094 --- /dev/null +++ b/package/moj/assets/images/icon-wysiwyg-unordered-list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/assets/images/moj-logotype-crest.png b/package/moj/assets/images/moj-logotype-crest.png new file mode 100755 index 00000000..ba2fed1c Binary files /dev/null and b/package/moj/assets/images/moj-logotype-crest.png differ diff --git a/package/moj/assets/images/moj-logotype-crest.svg b/package/moj/assets/images/moj-logotype-crest.svg new file mode 100755 index 00000000..047893a3 --- /dev/null +++ b/package/moj/assets/images/moj-logotype-crest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package/moj/components/_all.scss b/package/moj/components/_all.scss new file mode 100755 index 00000000..b5283988 --- /dev/null +++ b/package/moj/components/_all.scss @@ -0,0 +1,29 @@ +@import "action-bar/action-bar"; +@import "add-another/add-another"; +@import "badge/badge"; +@import "banner/banner"; +@import "button-menu/button-menu"; +@import "cookie-banner/cookie-banner"; +@import "currency-input/currency-input"; +@import "filter/filter"; +@import "header/header"; +@import "identity-bar/identity-bar"; +@import "messages/messages"; +@import "multi-file-upload/multi-file-upload"; +@import "multi-select/multi-select"; +@import "notification-badge/notification-badge"; +@import "organisation-switcher/organisation-switcher"; +@import "page-header-actions/page-header-actions"; +@import "pagination/pagination"; +@import "password-reveal/password-reveal"; +@import "primary-navigation/primary-navigation"; +@import "progress-bar/progress-bar"; +@import "rich-text-editor/rich-text-editor"; +@import "search-toggle/search-toggle"; +@import "search/search"; +@import "side-navigation/side-navigation"; +@import "sortable-table/sortable-table"; +@import "sub-navigation/sub-navigation"; +@import "tag/tag"; +@import "task-list/task-list"; +@import "timeline/timeline"; diff --git a/package/moj/components/action-bar/README.md b/package/moj/components/action-bar/README.md new file mode 100644 index 00000000..33f94ebc --- /dev/null +++ b/package/moj/components/action-bar/README.md @@ -0,0 +1,6 @@ +# Action bar + +- [Guidance](https://moj-design-system.herokuapp.com/components/action-bar) +- [Preview](https://moj-frontend.herokuapp.com/components/action-bar) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/action-bar/_action-bar.scss b/package/moj/components/action-bar/_action-bar.scss new file mode 100644 index 00000000..70c2442a --- /dev/null +++ b/package/moj/components/action-bar/_action-bar.scss @@ -0,0 +1,28 @@ +.moj-action-bar { + font-size: 0; // Removes white space +} + +.moj-action-bar__filter { + display: inline-block; + position: relative; + + @include govuk-media-query($until: desktop) { + float: right; + } + + @include govuk-media-query($from: desktop) { + margin-right: govuk-spacing(2); + padding-right: govuk-spacing(2) + 2px; // Takes into account divider width + + &:after { + content: ""; + background-color: govuk-colour("light-grey"); + height: 40px; + position: absolute; + right: 0; + top: 0; + width: 2px; + } + } + +} \ No newline at end of file diff --git a/package/moj/components/add-another/README.md b/package/moj/components/add-another/README.md new file mode 100755 index 00000000..73adc401 --- /dev/null +++ b/package/moj/components/add-another/README.md @@ -0,0 +1,6 @@ +# Add another + +- [Guidance](https://moj-design-system.herokuapp.com/components/add-another) +- [Preview](https://moj-frontend.herokuapp.com/components/add-another) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/add-another/_add-another.scss b/package/moj/components/add-another/_add-another.scss new file mode 100755 index 00000000..9dba516a --- /dev/null +++ b/package/moj/components/add-another/_add-another.scss @@ -0,0 +1,39 @@ +/* ========================================================================== + #ADD ANOTHER + ========================================================================== */ + +.moj-add-another { + &__item { + margin: 0; + margin-top: govuk-spacing(6); + padding: 0; + position: relative; + + &:first-of-type { + margin-top: 0; + } + } + + &__title { + float: left; + padding: 4px 0; + width: 100%; + } + + &__remove-button { + position: absolute; + right: 0; + top: 0; + } + + &__add-button { + display: block; + } +} + +.moj-add-another__heading:focus { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; +} \ No newline at end of file diff --git a/package/moj/components/add-another/add-another.js b/package/moj/components/add-another/add-another.js new file mode 100755 index 00000000..d8d4082d --- /dev/null +++ b/package/moj/components/add-another/add-another.js @@ -0,0 +1,72 @@ +MOJFrontend.AddAnother = function(container) { + this.container = $(container); + this.container.on('click', '.moj-add-another__remove-button', $.proxy(this, 'onRemoveButtonClick')); + this.container.on('click', '.moj-add-another__add-button', $.proxy(this, 'onAddButtonClick')); + this.container.find('.moj-add-another__add-button, moj-add-another__remove-button').prop('type', 'button'); +}; + +MOJFrontend.AddAnother.prototype.onAddButtonClick = function(e) { + var item = this.getNewItem(); + this.updateAttributes(this.getItems().length, item); + this.resetItem(item); + var firstItem = this.getItems().first(); + if(!this.hasRemoveButton(firstItem)) { + this.createRemoveButton(firstItem); + } + this.getItems().last().after(item); + item.find('input, textarea, select').first().focus(); +}; + +MOJFrontend.AddAnother.prototype.hasRemoveButton = function(item) { + return item.find('.moj-add-another__remove-button').length; +}; + +MOJFrontend.AddAnother.prototype.getItems = function() { + return this.container.find('.moj-add-another__item'); +}; + +MOJFrontend.AddAnother.prototype.getNewItem = function() { + var item = this.getItems().first().clone(); + if(!this.hasRemoveButton(item)) { + this.createRemoveButton(item); + } + return item; +}; + +MOJFrontend.AddAnother.prototype.updateAttributes = function(index, item) { + item.find('[data-name]').each(function(i, el) { + el.name = $(el).attr('data-name').replace(/%index%/, index); + el.id = $(el).attr('data-id').replace(/%index%/, index); + ($(el).siblings('label')[0] || $(el).parents('label')[0]).htmlFor = el.id; + }); +}; + +MOJFrontend.AddAnother.prototype.createRemoveButton = function(item) { + item.append(''); +}; + +MOJFrontend.AddAnother.prototype.resetItem = function(item) { + item.find('[data-name], [data-id]').each(function(index, el) { + if(el.type == 'checkbox' || el.type == 'radio') { + el.checked = false; + } else { + el.value = ''; + } + }); +}; + +MOJFrontend.AddAnother.prototype.onRemoveButtonClick = function(e) { + $(e.currentTarget).parents('.moj-add-another__item').remove(); + var items = this.getItems(); + if(items.length === 1) { + items.find('.moj-add-another__remove-button').remove(); + } + items.each($.proxy(function(index, el) { + this.updateAttributes(index, $(el)); + }, this)); + this.focusHeading(); +}; + +MOJFrontend.AddAnother.prototype.focusHeading = function() { + this.container.find('.moj-add-another__heading').focus(); +}; diff --git a/package/moj/components/badge/README.md b/package/moj/components/badge/README.md new file mode 100644 index 00000000..65e6cd69 --- /dev/null +++ b/package/moj/components/badge/README.md @@ -0,0 +1,50 @@ +# Badge + +- [Guidance](https://moj-design-system.herokuapp.com/components/badge) +- [Preview](https://moj-frontend.herokuapp.com/components/badge) + +## Example + +``` +{{ mojBadge({ + text: "Status text", + classes: "moj-badge--blue" +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +|Name|Type|Required|Description| +|---|---|---|---| +|text|string|Yes|If `html` is set, this is not required. Text to use within the span. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the span. If `html` is provided, the `text` argument will be ignored.| +|classes|string|Yes|Classes to add to the `span` container. See available [classes](#classes).| +|label|string|No|The `aria-label` to add to the `span` container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the `span` container.| + +### Classes + +|Name|Colour code|Colour contrast| +|---|---|---| +|moj-badge--purple|#2e358b|Pass| +|moj-badge--light-purple|#6f72af|Fail| +|moj-badge--bright-purple|#912b88|Pass| +|moj-badge--pink|#d53880|Fail| +|moj-badge--light-pink|#f499be|Fail| +|moj-badge--red|#b10e1e|Pass| +|moj-badge--orange|#f47738|Fail| +|moj-badge--brown|#b58840|Fail| +|moj-badge--yellow|#ffbf47|Fail| +|moj-badge--light-green|#85994b|Fail| +|moj-badge--green|#006435|Pass| +|moj-badge--turquoise|#28a197|Fail| +|moj-badge--light-blue|#2b8cc4|Fail| +|moj-badge--blue|#005ea5|Pass| +|moj-badge--black|#0b0c0c|Pass| +|moj-badge--dark-grey|#6f777b|Pass| +|moj-badge--mid-grey|#bfc1c3|Fail| +|moj-badge--light-grey|#dee0e2|Fail| +|moj-badge--light-grey|#f8f8f8|Fail| +|moj-badge--white|#ffffff|Fail| \ No newline at end of file diff --git a/package/moj/components/badge/_badge.scss b/package/moj/components/badge/_badge.scss new file mode 100644 index 00000000..1f7e2838 --- /dev/null +++ b/package/moj/components/badge/_badge.scss @@ -0,0 +1,55 @@ +/* ========================================================================== + #BADGE + ========================================================================== */ + +.moj-badge { + @include govuk-font($size: 14, $weight: "bold"); + padding: 0 govuk-spacing(1); + display: inline-block; + border: 2px solid $govuk-brand-colour; + color: $govuk-brand-colour; + text-transform: uppercase; + vertical-align: middle; + outline: 2px solid transparent; + outline-offset: -2px; + + &--purple { + border-color: govuk-colour("purple"); + color: govuk-colour("purple"); + } + + &--bright-purple { + border-color: govuk-colour("bright-purple"); + color: govuk-colour("bright-purple"); + } + + &--red { + border-color: govuk-colour("red"); + color: govuk-colour("red"); + } + + &--green { + border-color: govuk-colour("green"); + color: govuk-colour("green"); + } + + &--blue { + border-color: govuk-colour("blue"); + color: govuk-colour("blue"); + } + + &--black { + border-color: govuk-colour("black"); + color: govuk-colour("black"); + } + + &--grey { + border-color: govuk-colour("dark-grey"); + color: govuk-colour("dark-grey"); + } + + &--large { + @include govuk-font($size: 16, $weight: "bold"); + } + +} diff --git a/package/moj/components/badge/macro.njk b/package/moj/components/badge/macro.njk new file mode 100644 index 00000000..9421faf5 --- /dev/null +++ b/package/moj/components/badge/macro.njk @@ -0,0 +1,3 @@ +{% macro mojBadge(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/badge/template.njk b/package/moj/components/badge/template.njk new file mode 100644 index 00000000..0c8248f8 --- /dev/null +++ b/package/moj/components/badge/template.njk @@ -0,0 +1,3 @@ + + {{- params.html | safe if params.html else params.text -}} + \ No newline at end of file diff --git a/package/moj/components/banner/README.md b/package/moj/components/banner/README.md new file mode 100644 index 00000000..e69de29b diff --git a/package/moj/components/banner/_banner.scss b/package/moj/components/banner/_banner.scss new file mode 100644 index 00000000..fed2f574 --- /dev/null +++ b/package/moj/components/banner/_banner.scss @@ -0,0 +1,55 @@ +/* ========================================================================== + #BANNER + ========================================================================== */ + +.moj-banner { + border: 5px solid $govuk-brand-colour; + color: $govuk-brand-colour; + font-size: 0; // Removes white space when using inline-block on child element. + margin-bottom: govuk-spacing(6); + padding: govuk-spacing(2); +} + + +.moj-banner__icon { + fill: currentColor; + float: left; + margin-right: govuk-spacing(2); +} + +.moj-banner__message { + @include govuk-font($size: 19); + color: govuk-colour("black"); + display: block; + overflow: hidden; +} + +.moj-banner__message h2 { + margin-bottom: govuk-spacing(2); +} + + +.moj-banner__message h2:last-child, +.moj-banner__message p:last-child { + margin-bottom: 0; +} + + +.moj-banner__assistive { + @include govuk-visually-hidden; +} + + +/* Style variants + ========================================================================== */ + +.moj-banner--success { + border-color: govuk-colour("green"); + color: govuk-colour("green"); +} + + +.moj-banner--warning { + border-color: govuk-colour("red"); + color: govuk-colour("red"); +} diff --git a/package/moj/components/banner/macro.njk b/package/moj/components/banner/macro.njk new file mode 100644 index 00000000..3d11b5ea --- /dev/null +++ b/package/moj/components/banner/macro.njk @@ -0,0 +1,3 @@ +{% macro mojBanner(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/banner/template.njk b/package/moj/components/banner/template.njk new file mode 100644 index 00000000..63eff696 --- /dev/null +++ b/package/moj/components/banner/template.njk @@ -0,0 +1,19 @@ +
+ + {% if params.type == 'success' %} + + {% elif params.type == 'warning' %} + + {% elif params.type == 'information' %} + + {% endif %} + +
+ {% if params.iconFallbackText %}{{params.iconFallbackText}}{% endif %} + {{- params.html | safe if params.html else params.text -}} +
+ +
+ + diff --git a/package/moj/components/button-menu/README.md b/package/moj/components/button-menu/README.md new file mode 100644 index 00000000..da4d5146 --- /dev/null +++ b/package/moj/components/button-menu/README.md @@ -0,0 +1,65 @@ +# Button menu + +- [Guidance](https://moj-design-system.herokuapp.com/components/button-menu) +- [Preview](https://moj-frontend.herokuapp.com/components/button-menu) + +## Examples + +### Example 1 + +The macro + +``` +{{ mojButtonGroup({ + items: [{ + text: 'Archive', + classes: 'govuk-button--secondary', + href: '#' + }, { + text: 'Reassign', + classes: 'govuk-button--secondary', + href: '#' + }, { + text: 'Delete', + classes: 'govuk-button--secondary', + href: '#' + }] +}) }} +``` + +The JavaScript + +``` +new MOJFrontend.ButtonGroup({ + container: $('.moj-button-group'), + mq: '(min-width: 45em)', + buttonText: 'Actions' +}); +``` + +## Arguments + +### Container +|Name|Type|Required|Description| +|---|---|---|---| +|items|array|Yes|An array of button item objects. See [items](#items).| +|buttonClasses|String|No|Classes to add to the button items.| +|attributes|Object|No|HTML attributes (for example data attributes) to add to the button group.| + +### Items + +See the [button component](https://design-system.service.gov.uk/components/button/) in the GOV.UK Design System for more details. + +|Name|Type|Required|Description| +|---|---|---|---| +|element|String|No|Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.| +|text|String|Yes|If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.| +|html|String|Yes|If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and element will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.| +|name|String|Yes|Name for the `input` or `button`. This has no effect on `a` elements.| +|type|String|Yes|Type of `input` or `button`. The options are `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.| +|value|String|Yes|Value for the `button` tag. This has no effect on `a` or `input` elements.| +|disabled|Boolean|No|Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.| +|href|String|No|The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.| +|classes|String|No|Classes to add to the button component.| +|attributes|Object|No|HTML attributes (for example data attributes) to add to the button component.| +|preventDoubleClick|Boolean|No|Prevent accidental double clicks on submit buttons from submitting forms multiple times.| diff --git a/package/moj/components/button-menu/_button-menu.scss b/package/moj/components/button-menu/_button-menu.scss new file mode 100644 index 00000000..622f4a2e --- /dev/null +++ b/package/moj/components/button-menu/_button-menu.scss @@ -0,0 +1,156 @@ +/* ========================================================================== + #BUTTON GROUP + ========================================================================== */ + +.moj-button-menu { + display: inline-block; + position: relative; +} + +/* TOGGLE BUTTON */ + +.moj-button-menu__toggle-button { + display: inline-block; + margin-right: govuk-spacing(2); + margin-bottom: govuk-spacing(2); + width: auto; // Override GDS’s 100% width + + &:last-child { + margin-right: 0; + } + + &:after { + background-repeat: no-repeat; + background-image: url(#{$moj-images-path}icon-arrow-white-down.svg); + content: ''; + display: inline-block; + height: 5px; + margin-left: govuk-spacing(2); + width: 10px; + vertical-align: middle; + } +} + +.moj-button-menu__toggle-button:focus { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-black-down.svg); + } +} + +.moj-button-menu__toggle-button[aria-expanded="true"]:focus { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-black-up.svg); + } +} + +.moj-button-menu__toggle-button:hover { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-white-down.svg); + } +} + +.moj-button-menu__toggle-button[aria-expanded="true"]:hover { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-white-up.svg); + } +} + +.moj-button-menu__toggle-button[aria-expanded="true"] { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-white-up.svg); + } +} + +.moj-button-menu__toggle-button--secondary { + margin-bottom: govuk-spacing(1); + margin-right: 0; + &:after { + background-image: url(#{$moj-images-path}icon-arrow-black-down.svg); + } +} + +.moj-button-menu__toggle-button--secondary[aria-expanded="true"] { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-black-up.svg); + } +} + +.moj-button-menu__toggle-button--secondary:hover { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-black-down.svg); + } +} + +.moj-button-menu__toggle-button--secondary[aria-expanded="true"]:hover { + &:after { + background-image: url(#{$moj-images-path}icon-arrow-black-up.svg); + } +} + + +/* MENU ITEM */ + +.moj-button-menu__item { + display: inline-block; + margin-right: govuk-spacing(2); + margin-bottom: govuk-spacing(2); + width: auto; // Override GDS’s 100% width + &:last-child { + margin-right: 0; + } +} + +.moj-button-menu [role=menuitem] { + @include govuk-font(19); + background-color: govuk-colour("light-grey"); + border: none; + box-sizing: border-box; + display: block; + margin-bottom: 0; + padding: govuk-spacing(2); + text-align: left; + width: 100%; + -webkit-box-sizing: border-box; + -webkit-appearance: none; + + &:link, + &:visited { + text-decoration: none; + color: govuk-colour("black"); + } + + &:hover { + background-color: govuk-colour("mid-grey"); + } + + &:focus { + outline: 3px solid govuk-colour("yellow"); + outline-offset: 0; + position: relative; + z-index: 10; + } +} + +/* MENU WRAPPER */ + +.moj-button-menu__wrapper { + font-size: 0; /* Hide whitespace between elements */ +} + +.moj-button-menu__wrapper--right { + right: 0; +} + +.moj-button-menu [role=menu] { + position: absolute; + width: 200px; + z-index: 10; +} + +.moj-button-menu [aria-expanded="true"] + [role=menu] { + display: block; +} + +.moj-button-menu [aria-expanded="false"] + [role=menu] { + display: none; +} diff --git a/package/moj/components/button-menu/button-menu.js b/package/moj/components/button-menu/button-menu.js new file mode 100644 index 00000000..a6a95ca3 --- /dev/null +++ b/package/moj/components/button-menu/button-menu.js @@ -0,0 +1,155 @@ +MOJFrontend.ButtonMenu = function(params) { + this.container = params.container; + this.menu = this.container.find('.moj-button-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.ButtonMenu.prototype.onDocumentClick = function(e) { + if(!$.contains(this.container[0], e.target)) { + this.hideMenu(); + } +}; + +MOJFrontend.ButtonMenu.prototype.createToggleButton = function() { + this.menuButton = $(''); + this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick')); + this.menuButton.on('keydown', $.proxy(this, 'onMenuKeyDown')); +}; + +MOJFrontend.ButtonMenu.prototype.setupResponsiveChecks = function() { + this.mql = window.matchMedia(this.mq); + this.mql.addListener($.proxy(this, 'checkMode')); + this.checkMode(this.mql); +}; + +MOJFrontend.ButtonMenu.prototype.checkMode = function(mql) { + if(mql.matches) { + this.enableBigMode(); + } else { + this.enableSmallMode(); + } +}; + +MOJFrontend.ButtonMenu.prototype.enableSmallMode = function() { + this.container.prepend(this.menuButton); + this.hideMenu(); + this.removeButtonClasses(); + this.menu.attr('role', 'menu'); + this.container.find('.moj-button-menu__item').attr('role', 'menuitem'); +}; + +MOJFrontend.ButtonMenu.prototype.enableBigMode = function() { + this.menuButton.detach(); + this.showMenu(); + this.addButtonClasses(); + this.menu.removeAttr('role'); + this.container.find('.moj-button-menu__item').removeAttr('role'); +}; + +MOJFrontend.ButtonMenu.prototype.removeButtonClasses = function() { + this.menu.find('.moj-button-menu__item').each(function(index, el) { + if($(el).hasClass('govuk-button--secondary')) { + $(el).attr('data-secondary', 'true'); + $(el).removeClass('govuk-button--secondary'); + } + if($(el).hasClass('govuk-button--warning')) { + $(el).attr('data-warning', 'true'); + $(el).removeClass('govuk-button--warning'); + } + $(el).removeClass('govuk-button'); + }); +}; + +MOJFrontend.ButtonMenu.prototype.addButtonClasses = function() { + this.menu.find('.moj-button-menu__item').each(function(index, el) { + if($(el).attr('data-secondary') == 'true') { + $(el).addClass('govuk-button--secondary'); + } + if($(el).attr('data-warning') == 'true') { + $(el).addClass('govuk-button--warning'); + } + $(el).addClass('govuk-button'); + }); +}; + +MOJFrontend.ButtonMenu.prototype.hideMenu = function() { + this.menuButton.attr('aria-expanded', 'false'); +}; + +MOJFrontend.ButtonMenu.prototype.showMenu = function() { + this.menuButton.attr('aria-expanded', 'true'); +}; + +MOJFrontend.ButtonMenu.prototype.onMenuButtonClick = function() { + this.toggle(); +}; + +MOJFrontend.ButtonMenu.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.ButtonMenu.prototype.onMenuKeyDown = function(e) { + switch (e.keyCode) { + case this.keys.down: + this.toggle(); + break; + } +}; + +MOJFrontend.ButtonMenu.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.ButtonMenu.prototype.focusNext = function(currentButton) { + var next = $(currentButton).next(); + if(next[0]) { + next.focus(); + } else { + this.container.find('[role=menuitem]').first().focus(); + } +}; + +MOJFrontend.ButtonMenu.prototype.focusPrevious = function(currentButton) { + var prev = $(currentButton).prev(); + if(prev[0]) { + prev.focus(); + } else { + this.container.find('[role=menuitem]').last().focus(); + } +}; \ No newline at end of file diff --git a/package/moj/components/button-menu/macro.njk b/package/moj/components/button-menu/macro.njk new file mode 100644 index 00000000..47b76ac3 --- /dev/null +++ b/package/moj/components/button-menu/macro.njk @@ -0,0 +1,3 @@ +{% macro mojButtonMenu(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/button-menu/template.njk b/package/moj/components/button-menu/template.njk new file mode 100644 index 00000000..b7f9fd27 --- /dev/null +++ b/package/moj/components/button-menu/template.njk @@ -0,0 +1,22 @@ +{%- from "govuk/components/button/macro.njk" import govukButton %} + +
+
+ {%- for item in params.items %} + {{ govukButton({ + element: item.element, + classes: 'moj-button-menu__item ' + (item.classes if item.classes) + ' ' + (params.buttonClasses if params.buttonClasses), + text: item.text, + html: item.html, + name: item.name, + type: item.type, + value: item.value, + href: item.href, + disabled: item.disabled, + attributes: item.attributes, + preventDoubleClick: items.preventDoubleClick + }) }} + {% endfor -%} +
+
+ diff --git a/package/moj/components/cookie-banner/README.md b/package/moj/components/cookie-banner/README.md new file mode 100755 index 00000000..83eb48e7 --- /dev/null +++ b/package/moj/components/cookie-banner/README.md @@ -0,0 +1,6 @@ +# Cookie banner + +- [Guidance](https://moj-design-system.herokuapp.com/components/cookie-banner) +- [Preview](https://moj-frontend.herokuapp.com/components/cookie-banner) + +## Arguments diff --git a/package/moj/components/cookie-banner/_cookie-banner.scss b/package/moj/components/cookie-banner/_cookie-banner.scss new file mode 100755 index 00000000..09ba6374 --- /dev/null +++ b/package/moj/components/cookie-banner/_cookie-banner.scss @@ -0,0 +1,39 @@ +.moj-cookie-banner { + display: none; + @include govuk-font(16); + + box-sizing: border-box; + + padding-top: govuk-spacing(3); + padding-bottom: govuk-spacing(3); + left: govuk-spacing(3); + padding-right: govuk-spacing(3); + background-color: govuk-colour("white"); + + &--show { + display: block !important; + } + + &__message { + margin: 0; + @include govuk-width-container; + } + + &__buttons { + .govuk-grid-column-full { + padding-left: 0; + } + } + + .govuk-button { + @include govuk-media-query($from: tablet) { + width: 90%; + } + } +} + +@include govuk-media-query($media-type: print) { + .moj-cookie-banner { + display: none !important; + } +} diff --git a/package/moj/components/cookie-banner/macro.njk b/package/moj/components/cookie-banner/macro.njk new file mode 100644 index 00000000..36645c55 --- /dev/null +++ b/package/moj/components/cookie-banner/macro.njk @@ -0,0 +1,3 @@ +{% macro mojCookieBanner(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/cookie-banner/template.njk b/package/moj/components/cookie-banner/template.njk new file mode 100644 index 00000000..6e8cffd7 --- /dev/null +++ b/package/moj/components/cookie-banner/template.njk @@ -0,0 +1,25 @@ +{%- from "govuk/components/button/macro.njk" import govukButton %} + +
+
+
+
+ +

{{ params.heading.html | safe if params.heading.html else params.heading.text }}

+
+
+ {%- for item in params.items %} +
+ {{ govukButton({ + text: item.text, + classes: 'govuk-button button--inline ' + item.class, + type: item.type, + element: item.element, + href: item.href + }) }} +
+ {% endfor -%} +
+
+
+
diff --git a/package/moj/components/currency-input/README.md b/package/moj/components/currency-input/README.md new file mode 100644 index 00000000..8e5e2f5d --- /dev/null +++ b/package/moj/components/currency-input/README.md @@ -0,0 +1,106 @@ +# Currency input + +- [Guidance](https://moj-design-system.herokuapp.com/components/currency-input) +- [Preview](https://moj-frontend.herokuapp.com/components/currency-input) + +## Dependencies + +The currency input component is dependent on the following components from the [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend/): + +- [GOV.UK Label component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/label) +- [GOV.UK Hint component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/hint) +- [GOV.UK Error message component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/error-message) + +## Examples + +``` +{{ mojCurrencyInput({ + id: "amount", + classes: "govuk-input--width-10", + name: "amount", + label: { + text: "Amount", + classes: 'govuk-!-font-weight-bold' + }, + hint: { + text: "Enter the amount you want to exchange" + } +}) }} +``` +### With currency specified +``` +{{ mojCurrencyInput({ + id: "amount", + classes: "govuk-input--width-10", + name: "amount", + currencyLabel: { + text: "¥" + }, + label: { + text: "Amount", + classes: 'govuk-!-font-weight-bold' + }, + hint: { + text: "Enter the amount you want to exchange" + } +}) }} +``` + +## Arguments + +### Container +|Name|Type|Required|Description| +|---|---|---|---| +|id|string|Yes|Optional `id` attribute to add to the text input.| +|name|string|Yes|Name attribute for the text input.| +|value|string|No|Optional value of the text input.| +|type|string|No|Type of input control to render. Defaults to text.| +|formGroup|object|No|Options for the form-group wrapper. See [formGroup](#formgroup).| +|label|object|No|Options for the label component (e.g. text). See [label](#label).| +|hint|object|No|Options for the hint component (e.g. text). See [hint](#hint).| +|errorMessage|object|No|Options for the errorMessage component (e.g. text). See [errorMessage](#errormessage).| +|currencyLabel|object|No|Options for the currency label (e.g. text). See [currencyLabel](#currencylabel).| +|classes|string|No|Classes to add to the text input.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the text input.| + +### formGroup +|Name|Type|Required|Description| +|---|---|---|---| +|classes|string|No|Classes to add to the form group wrapper.| + +### Label +|Name|Type|Required|Description| +|---|---|---|---| +|for|string|Yes|The value of the `for` attribute, the `id` of the `input` the label is associated with.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.| +|isPageHeading|boolean|No|Whether the label also acts as the heading for the page.| +|classes|string|No|Classes to add to the label tag.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the label tag.| + +### Hint +|Name|Type|Required|Description| +|---|---|---|---| +|id|string|No|Optional `id` attribute to add to the hint span tag.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the hint. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.| +|classes|string|No|Classes to add to the hint span tag.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the hint span tag.| + +### errorMessage +|Name|Type|Required|Description| +|---|---|---|---| +|id|string|No|Optional `id` attribute to add to the error span tag.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the error. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the error. If `html` is provided, the `text` argument will be ignored.| +|classes|string|No|Classes to add to the error span tag.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the error span tag.| + +### currencyLabel +|Name|Type|Required|Description| +|---|---|---|---| +|text|string|Yes|If `html` is set, this is not required. Text to use within the error. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the error. If `html` is provided, the `text` argument will be ignored.| +|classes|string|No|Classes to add to the currency span tag.| + +*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).* diff --git a/package/moj/components/currency-input/_currency-input.scss b/package/moj/components/currency-input/_currency-input.scss new file mode 100644 index 00000000..edaacf90 --- /dev/null +++ b/package/moj/components/currency-input/_currency-input.scss @@ -0,0 +1,28 @@ +/* ========================================================================== + #DENOTE + ========================================================================== */ + +.moj-label__currency { + @include govuk-font(19); + background-color: govuk-colour("light-grey"); + position: absolute; + margin: 2px 0 0 2px !important; + padding: 5.5px 12px; + border-right: 2px solid govuk-colour("black"); + + &--error { + background-color: $govuk-error-colour; + border-right: 2px solid $govuk-error-colour; + color: govuk-colour("white"); + } + + @include govuk-media-query($until: tablet) { + padding: 8px 12px; + } + +} + +.moj-input__currency { + margin: 0; + padding-left: 40px; +} \ No newline at end of file diff --git a/package/moj/components/currency-input/macro.njk b/package/moj/components/currency-input/macro.njk new file mode 100644 index 00000000..7fd22cd1 --- /dev/null +++ b/package/moj/components/currency-input/macro.njk @@ -0,0 +1,3 @@ +{% macro mojCurrencyInput(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/currency-input/template.njk b/package/moj/components/currency-input/template.njk new file mode 100644 index 00000000..2046d874 --- /dev/null +++ b/package/moj/components/currency-input/template.njk @@ -0,0 +1,49 @@ +{% from "govuk/components/error-message/macro.njk" import govukErrorMessage -%} +{% from "govuk/components/hint/macro.njk" import govukHint %} +{% from "govuk/components/label/macro.njk" import govukLabel %} + +{#- a record of other elements that we need to associate with the input using + aria-describedby – for example hints or error messages -#} +{% set describedBy = params.describedBy if params.describedBy else "" %} +
+ {{ govukLabel({ + html: params.label.html, + text: params.label.text, + classes: params.label.classes, + isPageHeading: params.label.isPageHeading, + attributes: params.label.attributes, + for: params.id + }) | indent(2) | trim }} +{% if params.hint %} + {% set hintId = params.id + '-hint' %} + {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} + {{ govukHint({ + id: hintId, + classes: params.hint.classes, + attributes: params.hint.attributes, + html: params.hint.html, + text: params.hint.text + }) | indent(2) | trim }} +{% endif %} +{% if params.errorMessage %} + {% set errorId = params.id + '-error' %} + {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} + {{ govukErrorMessage({ + id: errorId, + classes: params.errorMessage.classes, + attributes: params.errorMessage.attributes, + html: params.errorMessage.html, + text: params.errorMessage.text, + visuallyHiddenText: params.errorMessage.visuallyHiddenText + }) | indent(2) | trim }} +{% endif %} + + {{- params.currencyLabel.html if params.currencyLabel.html else params.currencyLabel.text | default('£') | safe -}} + + +
\ No newline at end of file diff --git a/package/moj/components/filter-toggle-button/README.md b/package/moj/components/filter-toggle-button/README.md new file mode 100644 index 00000000..2c4ba2df --- /dev/null +++ b/package/moj/components/filter-toggle-button/README.md @@ -0,0 +1,6 @@ +# Filter toggle button + +- [Guidance](https://moj-design-system.herokuapp.com/components/filter-toggle-button) +- [Preview](https://moj-frontend.herokuapp.com/components/filter-toggle-button) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/filter-toggle-button/filter-toggle-button.js b/package/moj/components/filter-toggle-button/filter-toggle-button.js new file mode 100644 index 00000000..9b467897 --- /dev/null +++ b/package/moj/components/filter-toggle-button/filter-toggle-button.js @@ -0,0 +1,85 @@ +MOJFrontend.FilterToggleButton = function(options) { + this.options = options; + this.container = this.options.toggleButton.container; + this.createToggleButton(); + this.setupResponsiveChecks(); + this.options.filter.container.attr('tabindex', '-1'); + if(this.options.startHidden) { + this.hideMenu(); + } +}; + +MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function() { + this.mq = window.matchMedia(this.options.bigModeMediaQuery); + this.mq.addListener($.proxy(this, 'checkMode')); + this.checkMode(this.mq); +}; + +MOJFrontend.FilterToggleButton.prototype.createToggleButton = function() { + this.menuButton = $(''); + this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick')); + this.options.toggleButton.container.append(this.menuButton); +}; + +MOJFrontend.FilterToggleButton.prototype.checkMode = function(mq) { + if(mq.matches) { + this.enableBigMode(); + } else { + this.enableSmallMode(); + } +}; + +MOJFrontend.FilterToggleButton.prototype.enableBigMode = function() { + this.showMenu(); + this.removeCloseButton(); +}; + +MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function() { + this.hideMenu(); + this.addCloseButton(); +}; + +MOJFrontend.FilterToggleButton.prototype.addCloseButton = function() { + if(this.options.closeButton) { + this.closeButton = $(''); + this.closeButton.on('click', $.proxy(this, 'onCloseClick')); + this.options.closeButton.container.append(this.closeButton); + } +}; + +MOJFrontend.FilterToggleButton.prototype.onCloseClick = function() { + this.hideMenu(); + this.menuButton.focus(); +}; + +MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() { + if(this.closeButton) { + this.closeButton.remove(); + this.closeButton = null; + } +}; + +MOJFrontend.FilterToggleButton.prototype.hideMenu = function() { + this.menuButton.attr('aria-expanded', 'false'); + this.options.filter.container.addClass('moj-js-hidden'); + this.menuButton.text(this.options.toggleButton.showText); +}; + +MOJFrontend.FilterToggleButton.prototype.showMenu = function() { + this.menuButton.attr('aria-expanded', 'true'); + this.options.filter.container.removeClass('moj-js-hidden'); + this.menuButton.text(this.options.toggleButton.hideText); +}; + +MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() { + this.toggle(); +}; + +MOJFrontend.FilterToggleButton.prototype.toggle = function() { + if(this.menuButton.attr('aria-expanded') == 'false') { + this.showMenu(); + this.options.filter.container.focus(); + } else { + this.hideMenu(); + } +}; \ No newline at end of file diff --git a/package/moj/components/filter/README.md b/package/moj/components/filter/README.md new file mode 100644 index 00000000..50c51dc0 --- /dev/null +++ b/package/moj/components/filter/README.md @@ -0,0 +1 @@ +#Filters \ No newline at end of file diff --git a/package/moj/components/filter/_filter.scss b/package/moj/components/filter/_filter.scss new file mode 100644 index 00000000..b3927009 --- /dev/null +++ b/package/moj/components/filter/_filter.scss @@ -0,0 +1,237 @@ +/* ========================================================================== + #FILTER + ========================================================================== */ + +.moj-filter { + background-color: govuk-colour("white"); + box-shadow: inset 0 0 0 1px govuk-colour("mid-grey"); + + &:focus { + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + } +} + + +.moj-filter__header { + background-color: govuk-colour("mid-grey"); + font-size: 0; // Hide whitespace between elements + padding: govuk-spacing(2) govuk-spacing(4); + text-align: justify; // Trick to remove the need for floats + + &:after { + content: ''; + display: inline-block; + width: 100%; + } + + [class^=govuk-heading-] { + margin-bottom: 0; + } + +} + + +// JavaScript +.moj-filter__legend { + overflow: visible; // Override govuk to allow for focus style to be seen + width: 100%; + + button { + @include govuk-font($size: 24, $weight: bold); + background-color: transparent; + box-sizing: border-box; + border-radius: 0; + border: 0 none; + cursor: pointer; // Adam would not approve + display: block; + margin: 0; + padding: 0; + position: relative; + text-align: left; + width: 100%; + -webkit-appearance: none; + + // Fix unwanted button padding in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &::after { + background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg); + background-position: 0 0; + content: ""; + display: block; + height: 16px; + margin-top: -8px; // Half the height of the icon + position: absolute; top: 50%; right: 0; + width: 16px; + } + + &[aria-expanded="true"] { + &::after { + background-position: 16px 16px; + } + } + + &:focus { + // @include govuk-focusable; + } + + } + +} + + +.moj-filter__header-title, +.moj-filter__header-action { + display: inline-block; + text-align: left; + vertical-align: middle; +} + + +.moj-filter__close { + // @include govuk-focusable; + color: govuk-colour("black"); + cursor: pointer; // I know Adam won’t like this + background-color: transparent; + border: none; + border-radius: 0; + margin: 0; + padding: 0; + -webkit-appearance: none; + + + &:focus { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; + } + + // Fix unwanted button padding in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &::before { + background-image: url(#{$moj-images-path}icon-close-cross-black.svg); + content: ""; + display: inline-block; + height: 14px; + margin-right: govuk-spacing(1); + position: relative; + top: -1px; // Alignment tweak + vertical-align: middle; + width: 14px; + } + +} + + +.moj-filter__close { + @include govuk-font(19); +} + + +.moj-filter__selected { + background-color: govuk-colour("light-grey"); + box-shadow: inset 0 0 0 1px govuk-colour("mid-grey"); + padding: govuk-spacing(4); + + ul:last-of-type { + margin-bottom: 0; // IE9 + + } + +} + + +.moj-filter__selected-heading { + font-size: 0; // Hide whitespace between elements + text-align: justify; // Trick to remove the need for floats + + &:after { + content: ''; + display: inline-block; + width: 100%; + } + +} + + +.moj-filter__heading-title, +.moj-filter__heading-action { + display: inline-block; + text-align: left; + vertical-align: middle; +} + + +.moj-filter-tags { + font-size: 0; + margin-bottom: govuk-spacing(4); // Needs to adjust to 15px on mobile + padding-left: 0; + + li { + display: inline-block; + margin-right: govuk-spacing(2); + } + +} + + +.moj-filter__tag { + @include govuk-font(16); + background-color: govuk-colour("white"); + border: 1px solid govuk-colour("black"); + color: govuk-colour("black"); + display: inline-block; + margin-top: govuk-spacing(1); + padding: govuk-spacing(1); + text-decoration: none; + + &:link, + &:visited { + color: govuk-colour("black"); + } + + &:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + } + + &:hover { + background-color: govuk-colour("black"); + color: govuk-colour("white"); + } + + &:after { + background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg); + content: ""; + display: inline-block; + font-weight: bold; + height: 10px; + margin-left: govuk-spacing(1); + vertical-align: middle; + width: 10px; + } + + &:hover:after { + background-image: url(#{$moj-images-path}icon-tag-remove-cross-white.svg); + } + +} + + +.moj-filter__options { + box-shadow: inset 0 0 0 1px govuk-colour("mid-grey"); + margin-top: -1px; + padding: govuk-spacing(4); + + div:last-of-type { + margin-bottom: 0; // IE9 + + } + +} diff --git a/package/moj/components/filter/macro.njk b/package/moj/components/filter/macro.njk new file mode 100644 index 00000000..7a42a87a --- /dev/null +++ b/package/moj/components/filter/macro.njk @@ -0,0 +1,3 @@ +{% macro mojFilter(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/filter/template.njk b/package/moj/components/filter/template.njk new file mode 100644 index 00000000..8202bde3 --- /dev/null +++ b/package/moj/components/filter/template.njk @@ -0,0 +1,60 @@ +{% from "govuk/components/button/macro.njk" import govukButton %} + +
+ +
+ +
+

{{ params.heading.html | safe if params.heading.html else params.heading.text }}

+
+ +
+ {# #} +
+ +
+ +
+ + {% if params.selectedFilters %} + +
+ +
+ +
+

{{ params.selectedFilters.heading.html | safe if params.selectedFilters.heading.html else params.selectedFilters.heading.text }}

+
+ +
+

{{params.selectedFilters.clearLink.text}}

+
+ +
+ + {% for category in params.selectedFilters.categories %} +

{{ category.heading.html | safe if category.heading.html else category.heading.text }}

+ + + {% endfor %} + +
+ {% endif %} + +
+ + {{ govukButton({ + text: 'Apply filters' + }) }} + + {{params.optionsHtml | safe}} + +
+ +
+ +
\ No newline at end of file diff --git a/package/moj/components/form-validator/README.md b/package/moj/components/form-validator/README.md new file mode 100755 index 00000000..957a3d0c --- /dev/null +++ b/package/moj/components/form-validator/README.md @@ -0,0 +1,6 @@ +# Form validator + +- [Guidance](https://moj-design-system.herokuapp.com/components/form-validator) +- [Preview](https://moj-frontend.herokuapp.com/components/form-validator) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/form-validator/form-validator.js b/package/moj/components/form-validator/form-validator.js new file mode 100755 index 00000000..1d03a3e3 --- /dev/null +++ b/package/moj/components/form-validator/form-validator.js @@ -0,0 +1,156 @@ +MOJFrontend.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.originalTitle = document.title; +}; + +MOJFrontend.FormValidator.entityMap = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', + '/': '/', + '`': '`', + '=': '=' +}; + +MOJFrontend.FormValidator.prototype.escapeHtml = function(string) { + return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap (s) { + return MOJFrontend.FormValidator.entityMap[s]; + }); +}; + +MOJFrontend.FormValidator.prototype.resetTitle = function() { + document.title = this.originalTitle; +}; + +MOJFrontend.FormValidator.prototype.updateTitle = function() { + document.title = "" + this.errors.length + " errors - " + document.title; +}; + +MOJFrontend.FormValidator.prototype.showSummary = function () { + this.summary.html(this.getSummaryHtml()); + this.summary.removeClass('moj-hidden'); + this.summary.attr('aria-labelledby', 'errorSummary-heading'); + this.summary.focus(); +}; + +MOJFrontend.FormValidator.prototype.getSummaryHtml = function() { + var html = '

There is a problem

'; + html += '
'; + html += ''; + html += '
'; + return html; +}; + +MOJFrontend.FormValidator.prototype.hideSummary = function() { + this.summary.addClass('moj-hidden'); + this.summary.removeAttr('aria-labelledby'); +}; + +MOJFrontend.FormValidator.prototype.onSubmit = function (e) { + this.removeInlineErrors(); + this.hideSummary(); + this.resetTitle(); + if(!this.validate()) { + e.preventDefault(); + this.updateTitle(); + this.showSummary(); + this.showInlineErrors(); + } +}; + +MOJFrontend.FormValidator.prototype.showInlineErrors = function() { + for (var i = 0, j = this.errors.length; i < j; i++) { + this.showInlineError(this.errors[i]); + } +}; + +MOJFrontend.FormValidator.prototype.showInlineError = function (error) { + var errorSpanId = error.fieldName + '-error'; + var errorSpan = ''+this.escapeHtml(error.message)+''; + 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'); + MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId); + } else { + label.after(errorSpan); + control.attr('aria-invalid', 'true'); + MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId); + } +}; + +MOJFrontend.FormValidator.prototype.removeInlineErrors = function() { + var error; + var i; + for (var i = 0; i < this.errors.length; i++) { + this.removeInlineError(this.errors[i]); + } +}; + +MOJFrontend.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'; + MOJFrontend.removeAttributeValue(fieldContainer.find('[aria-describedby]')[0], 'aria-describedby', errorSpanId); +}; + +MOJFrontend.FormValidator.prototype.addValidator = function(fieldName, rules) { + this.validators.push({ + fieldName: fieldName, + rules: rules, + field: this.form.elements[fieldName] + }); +}; + +MOJFrontend.FormValidator.prototype.validate = function() { + this.errors = []; + var validator = null, + validatorReturnValue = true, + i, + j; + for (i = 0; i < this.validators.length; i++) { + validator = this.validators[i]; + for (j = 0; j < validator.rules.length; j++) { + validatorReturnValue = validator.rules[j].method(validator.field, + validator.rules[j].params); + + if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) { + this.errors.push({ + fieldName: validator.fieldName, + message: validator.rules[j].message + }); + break; + } else if(typeof validatorReturnValue === 'string') { + this.errors.push({ + fieldName: validatorReturnValue, + message: validator.rules[j].message + }); + break; + } + } + } + return this.errors.length === 0; +}; \ No newline at end of file diff --git a/package/moj/components/header/README.md b/package/moj/components/header/README.md new file mode 100644 index 00000000..a3db2b0b --- /dev/null +++ b/package/moj/components/header/README.md @@ -0,0 +1,72 @@ +# Header + +- [Guidance](https://moj-design-system.herokuapp.com/components/header) +- [Preview](https://moj-frontend.herokuapp.com/components/header) + +## Examples + +``` +{{ mojHeader({ + organisationLabel: { + text: 'Organisation name', + href: '#' + }, + serviceLabel: { + text: 'Service name', + href: '#' + }, + navigation: { + label: 'Account navigation', + items: [{ + text: 'Account name', + href: '#', + active: true + }, { + text: 'Sign out', + href: '#' + }] + } +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|organisationLabel|object|Yes|An object containing the organisation's details. See [organisationLabel](#organisationlabel).| +|serviceLabel|object|Yes|An object containing the service's details. See [serviceLabel](#servicelabel).| +|navigation|array|No|An array of navigation item objects. See [navigation](#navigation).| +|containerClasses|string|No|Classes for the container, useful if you want to make the header fixed width.| +|classes|string|No|Classes to add to the `header` container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the header container.| + +### organisationLabel + +|Name|Type|Required|Description| +|---|---|---|---| +|text|string|Yes|Header title that is placed next to the crest. Used for organisation names (e.g., CICA, HMCTS, HMPPS, LAA and OPG).| +|href|string|Yes|URL for the organisation name anchor.| + +### serviceLabel + +|Name|Type|Required|Description| +|---|---|---|---| +|text|string|Yes|Header title that is placed next to the organisation name. Used for service names (e.g., Claim fees for Crown court defence; Send money to prisoners).| +|href|string|Yes|URL for the service name anchor.| + +### Navigation + +|Name|Type|Required|Description| +|---|---|---|---| +|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| + + +*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).* diff --git a/package/moj/components/header/_header.scss b/package/moj/components/header/_header.scss new file mode 100644 index 00000000..00080cf7 --- /dev/null +++ b/package/moj/components/header/_header.scss @@ -0,0 +1,170 @@ +/* ========================================================================== + #HEADER + ========================================================================== */ + +.moj-header { + background-color: govuk-colour("black"); + padding-top: govuk-spacing(3); + border-bottom: 10px solid $govuk-brand-colour; +} + +.moj-header__container { + @include moj-width-container; + @include govuk-clearfix; + position: relative; +} + +.moj-header__logo { + padding-bottom: govuk-spacing(1); + + @include govuk-media-query($from: desktop) { + float: left; + } + +} + +.moj-header__logotype-crown { + position: relative; + top: -4px; + margin-right: govuk-spacing(1); + vertical-align: top; + +} + +.moj-header__logotype-crest { + position: relative; + top: -6px; + margin-right: govuk-spacing(1); + vertical-align: top; +} + +.moj-header__content { + padding-bottom: govuk-spacing(2); + + @include govuk-media-query($from: desktop) { + float: right; + } + +} + +.moj-header__link, .moj-header__link > a { + @include govuk-link-common; + @include govuk-link-style-default; + border-bottom: 1px solid transparent; + color: govuk-colour("white"); + display: inline-block; + text-decoration: none; + line-height: 25px; // Override due to alignment issue in Chrome + margin-bottom: -1px; + overflow: hidden; // Fixes focus gaps in background colour + vertical-align: middle; + + &:link, + &:visited, + &:hover, + &:active { + color: govuk-colour("white"); + } + + &:hover { + border-color: govuk-colour("white"); + } + + &:focus { + border-color: transparent; + color: govuk-colour("black"); + } + + &--organisation-name { + @include govuk-font($size: 24, $weight: "bold"); + vertical-align: middle; + &:hover { + border-color: transparent; + } + } + + &--service-name { + vertical-align: middle; + @include govuk-font($size: 24, $weight: "normal"); + + @include govuk-media-query($until: desktop) { + display: block; + } + @include govuk-media-query($from: desktop) { + margin-left: govuk-spacing(1); + } + &:hover { + border-color: transparent; + } + } +} + +.moj-header__link a { + vertical-align: text-bottom; + margin-bottom: 1px; + + &:hover { + border-color: govuk-colour("white"); + } + + @include govuk-media-query($until: desktop) { + vertical-align: middle; + margin-bottom: -1px; + } +} + + +span.moj-header__link { + &:hover { + border-color: transparent; + } +} + +// Navigation +.moj-header__navigation { + color: govuk-colour("white"); + margin-top: govuk-spacing(1)-2px; +} + +.moj-header__navigation-list { + font-size: 0; // Removes white space when using inline-block on child element. + list-style: none; + margin: 0; + padding: 0; +} + +.moj-header__navigation-item { + @include govuk-font(19); + display: inline-block; + margin-right: govuk-spacing(4); + + &:last-child { + margin-right: 0; + } + +} + +.moj-header__navigation-link { + @include govuk-link-common; + @include govuk-link-style-default; + + &:link, + &:visited, + &:active { + color: inherit; + text-decoration: none; + } + + &:hover { + text-decoration: underline !important; + } + + &:focus { + color: govuk-colour("black"); + } + +} + +.moj-header__navigation-link[aria-current=page] { + text-decoration: none; +} diff --git a/package/moj/components/header/macro.njk b/package/moj/components/header/macro.njk new file mode 100644 index 00000000..d4d9a7d2 --- /dev/null +++ b/package/moj/components/header/macro.njk @@ -0,0 +1,3 @@ +{% macro mojHeader(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/header/template.njk b/package/moj/components/header/template.njk new file mode 100644 index 00000000..d3624f13 --- /dev/null +++ b/package/moj/components/header/template.njk @@ -0,0 +1,75 @@ + diff --git a/package/moj/components/identity-bar/README.md b/package/moj/components/identity-bar/README.md new file mode 100644 index 00000000..e69de29b diff --git a/package/moj/components/identity-bar/_identity-bar.scss b/package/moj/components/identity-bar/_identity-bar.scss new file mode 100644 index 00000000..2ed88ef3 --- /dev/null +++ b/package/moj/components/identity-bar/_identity-bar.scss @@ -0,0 +1,67 @@ +/* ========================================================================== + #IDENTITY BAR + ========================================================================== */ + +.moj-identity-bar { + @include govuk-clearfix; + background-color: govuk-colour("white"); + box-shadow: inset 0 -1px 0 0 govuk-colour("mid-grey"); /* Takes up no space */ + color: govuk-colour("black"); + padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */ + padding-top: govuk-spacing(2); +} + + +.moj-identity-bar__container { + @include moj-width-container; + font-size: 0; /* Hide whitespace between elements */ + text-align: justify; /* Trick to remove the need for floats */ + + &:after { + content: ''; + display: inline-block; + width: 100%; + } + +} + +.moj-identity-bar__title { + @include govuk-font(16); + display: inline-block; + vertical-align: top; +} + +.moj-identity-bar__details { + margin-right: govuk-spacing(2); + padding-top: govuk-spacing(1); + padding-bottom: govuk-spacing(1); + + @include govuk-media-query($from: tablet) { + display: inline-block; + vertical-align: top; + padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */ + padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */ + } + +} + + +.moj-identity-bar__actions { + margin-bottom: - govuk-spacing(2); + + @include govuk-media-query($from: tablet) { + display: inline-block; + vertical-align: middle; + } + +} + +.moj-identity-bar__menu { + display: inline-block; + margin-right: govuk-spacing(2); + + &:last-child { + margin-right: 0; + } + +} \ No newline at end of file diff --git a/package/moj/components/identity-bar/macro.njk b/package/moj/components/identity-bar/macro.njk new file mode 100644 index 00000000..0a64d434 --- /dev/null +++ b/package/moj/components/identity-bar/macro.njk @@ -0,0 +1,3 @@ +{% macro mojIdentityBar(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/identity-bar/template.njk b/package/moj/components/identity-bar/template.njk new file mode 100644 index 00000000..15d9b333 --- /dev/null +++ b/package/moj/components/identity-bar/template.njk @@ -0,0 +1,25 @@ +{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %} + +
+ +
+ +
+ {% if params.title %} + {{ params.title.html | safe if params.title.html else params.title.text }} + {% endif %} +
+ + {% if params.menus %} +
+ {% for menu in params.menus %} +
+ {{mojButtonMenu({ items: menu.items, classes: menu.classes })}} +
+ {% endfor %} +
+ {% endif %} + +
+ +
\ No newline at end of file diff --git a/package/moj/components/messages/README.md b/package/moj/components/messages/README.md new file mode 100644 index 00000000..f2283c69 --- /dev/null +++ b/package/moj/components/messages/README.md @@ -0,0 +1,85 @@ +# Messages + +- [Guidance](https://moj-design-system.herokuapp.com/components/messages) +- [Preview](https://moj-frontend.herokuapp.com/components/messages) + +### Installation + +You will need to install the following code at the bottom of `server.js`, just above `module.exports = app;` + +``` +// Add filters from MOJ Frontend +let mojFilters = require('./node_modules/@ministryofjustice/frontend/filters/all')(); +mojFilters = Object.assign(mojFilters); +Object.keys(mojFilters).forEach(function (filterName) { + nunjucksAppEnv.addFilter(filterName, mojFilters[filterName]) +}); +``` + +## Example +Below is a typical example of the timeline component in use. + +``` +{{ mojMessages({ + items: [ + { + id: 1, + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + type: 'sent', + timestamp: '2018-10-16T10:50:00.000Z', + sender: 'Person A' + }, + { + id: 2, + text: 'Nullam vestibulum lorem vulputate velit euismod luctus.', + type: 'received', + timestamp: '2018-10-17T10:51:00.000Z', + sender: 'Person B' + }, + { + id: 3, + text: 'Fusce et vulputate justo. Integer suscipit felis non urna lobortis, vel finibus sem tristique.', + type: 'sent', + timestamp: '2018-10-19T10:53:00.000Z', + sender: 'Person A' + }, + { + id: 4, + text: 'Mauris tincidunt feugiat orci et convallis. Nam efficitur gravida justo non lobortis. Aliquam velit ante, lobortis eu venenatis sit amet, semper sit amet justo.', + type: 'sent', + timestamp: '2018-10-19T10:55:00.000Z', + sender: 'Person A' + }, + { + id: 5, + text: 'Proin dapibus, nisl id ultricies ultricies, erat magna pulvinar risus, sit amet commodo nunc purus eu nulla. Aliquam erat volutpat. Vestibulum in ante interdum, elementum arcu vel, viverra nibh. Etiam ultrices urna at suscipit sollicitudin. Nulla non lectus magna. Curabitur vel vestibulum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', + type: 'received', + timestamp: '2018-10-21T11:56:00.000Z', + sender: 'Person B' + } + ] +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|items|array|Yes|An array of message item objects. See [items](#items).| +|classes|string|No|Classes to add to the messages's container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the message's container.| + +### Items + +|Name|Type|Required|Description| +|---|---|---|---| +|id|string|No|The unique ID of the item| +|text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.| +|type|string|Yes|Used to show sent or received messages. Sent messages are blue and aligned to the right, received messages are grey and aligned to the left. Options: `sent` or `received`.| +|sender|string|Yes|The thing that created the message.| +|timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`| diff --git a/package/moj/components/messages/_messages.scss b/package/moj/components/messages/_messages.scss new file mode 100644 index 00000000..c98a5a79 --- /dev/null +++ b/package/moj/components/messages/_messages.scss @@ -0,0 +1,112 @@ +/* ========================================================================== + #MESSAGES + ========================================================================== */ + +.moj-messages-container { + @include govuk-font(19); + border: 1px solid $govuk-border-colour; +} + +.moj-message-list { + min-height: 200px; + overflow-y: scroll; + overflow-x: hidden; + padding: govuk-spacing(1); + + &__date { + @include govuk-font($size: 19, $weight: "bold"); + padding: govuk-spacing(3) 0; + color: govuk-colour("dark-grey"); + display: inline-block; + text-align: center; + width: 100%; + } + +} + +.moj-message-item { + border-radius: 0.5em 0.5em 0.75em 0.5em; + margin-bottom: govuk-spacing(1); + padding: govuk-spacing(3); + position: relative; + + @include govuk-media-query($from: tablet) { + width: 50%; + } + + &--sent { + color: govuk-colour("white"); + background-color: $govuk-brand-colour; + margin-right: govuk-spacing(2); + padding-right: govuk-spacing(5); + text-align: right; + float: right; + + &::after { + content: ""; + position: absolute; + right: -1.5em; + bottom: 0; + width: 1.5em; + height: 1.5em; + border-left: 1em solid $govuk-brand-colour; + border-bottom-left-radius: 1.75em 1.5em; + } + } + + &--received { + background-color: govuk-colour("light-grey"); + float: left; + margin-left: govuk-spacing(2); + padding-left: govuk-spacing(5); + + &::after { + content: ""; + position: absolute; + left: -1.5em; + bottom: 0; + width: 1.5em; + height: 1.5em; + border-right: 1em solid govuk-colour("light-grey"); + border-bottom-right-radius: 1.75em 1.5em; + } + + } + +} + +.moj-message-item a:link, +.moj-message-item a:visited { + color: govuk-colour("white"); +} + +.moj-message-item a:focus { + color: $govuk-focus-text-colour; +} + +.moj-message-item__text { + + &--sent table { + color: govuk-colour("white"); + + & th, + & td { + border-bottom: 1px solid govuk-colour("white"); + } + + } + +} + +.moj-message-item__meta { + margin-top: govuk-spacing(2); + + &--sender { + @include govuk-font($size: 16, $weight: "bold"); + } + + &--timestamp { + @include govuk-font($size: 16, $weight: "bold"); + } + +} diff --git a/package/moj/components/messages/macro.njk b/package/moj/components/messages/macro.njk new file mode 100644 index 00000000..e957ee50 --- /dev/null +++ b/package/moj/components/messages/macro.njk @@ -0,0 +1,3 @@ +{% macro mojMessages(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/messages/template.njk b/package/moj/components/messages/template.njk new file mode 100644 index 00000000..f85f7f4f --- /dev/null +++ b/package/moj/components/messages/template.njk @@ -0,0 +1,30 @@ +
+ +
+ + {%- for item in params.items %} + + {%- if previous_timestamp != item.timestamp | mojDate('date') %} + + + + {% endif -%} + +
+
+ {{- item.html | safe if item.html else item.text -}} +
+
+ {{ item.sender }} at +
+
+ + {%- set previous_timestamp = item.timestamp | mojDate('date') -%} + + {% endfor -%} + +
+ +
\ No newline at end of file diff --git a/package/moj/components/multi-file-upload/README.md b/package/moj/components/multi-file-upload/README.md new file mode 100644 index 00000000..f801cc72 --- /dev/null +++ b/package/moj/components/multi-file-upload/README.md @@ -0,0 +1 @@ +# Multi file upload \ No newline at end of file diff --git a/package/moj/components/multi-file-upload/_multi-file-upload.scss b/package/moj/components/multi-file-upload/_multi-file-upload.scss new file mode 100644 index 00000000..c29e84d5 --- /dev/null +++ b/package/moj/components/multi-file-upload/_multi-file-upload.scss @@ -0,0 +1,66 @@ +.moj-multi-file-upload { + margin-bottom: 40px; +} + +.moj-multi-file-upload--enhanced .moj-multi-file-upload__button { + display: none; +} + +.moj-multi-file-upload__dropzone { + outline: 3px dashed govuk-colour('black'); + display: flex; + text-align: center; + padding: govuk-spacing(9) govuk-spacing(3); + transition: outline-offset .1s ease-in-out, background-color .1s linear; +} + +.moj-multi-file-upload__dropzone label { + margin-bottom: 0; + display: inline-block; + width: auto; +} + +.moj-multi-file-upload__dropzone p { + margin-bottom: 0; + margin-right: 10px; + padding-top: 7px; +} + +.moj-multi-file-upload__dropzone [type=file] { + position: absolute; + left: -9999em; +} + +.moj-multi-file-upload--dragover { + background: #b1b4b6; + outline-color: #6f777b; +} + +.moj-multi-file-upload--focused { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; +} + +.moj-multi-file-upload__error { + color: govuk-colour('red'); + font-weight: bold; +} + +.moj-multi-file-upload__success { + color: govuk-colour('green'); + font-weight: bold; +} + +.moj-multi-file-upload__error svg { + fill: currentColor; + float: left; + margin-right: govuk-spacing(2); +} + +.moj-multi-file-upload__success svg { + fill: currentColor; + float: left; + margin-right: govuk-spacing(2); +} \ No newline at end of file diff --git a/package/moj/components/multi-file-upload/macro.njk b/package/moj/components/multi-file-upload/macro.njk new file mode 100644 index 00000000..3b9c6d45 --- /dev/null +++ b/package/moj/components/multi-file-upload/macro.njk @@ -0,0 +1,3 @@ +{% macro mojMultiFileUpload(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/multi-file-upload/multi-file-upload.js b/package/moj/components/multi-file-upload/multi-file-upload.js new file mode 100644 index 00000000..eacfc367 --- /dev/null +++ b/package/moj/components/multi-file-upload/multi-file-upload.js @@ -0,0 +1,182 @@ +if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJFrontend.fileApiSupported()) { + MOJFrontend.MultiFileUpload = function(params) { + this.defaultParams = { + uploadFileEntryHook: $.noop, + uploadFileExitHook: $.noop, + uploadFileErrorHook: $.noop, + fileDeleteHook: $.noop, + uploadStatusText: 'Uploading files, please wait', + dropzoneHintText: 'Drag and drop files here or', + dropzoneButtonText: 'Choose files' + }; + + this.params = $.extend({}, this.defaultParams, params); + + this.params.container.addClass('moj-multi-file-upload--enhanced'); + + this.feedbackContainer = this.params.container.find('.moj-multi-file__uploaded-files'); + this.setupFileInput(); + this.setupDropzone(); + this.setupLabel(); + this.setupStatusBox(); + this.params.container.on('click', '.moj-multi-file-upload__delete', $.proxy(this, 'onFileDeleteClick')); + }; + + MOJFrontend.MultiFileUpload.prototype.setupDropzone = function() { + this.fileInput.wrap('
'); + this.dropzone = this.params.container.find('.moj-multi-file-upload__dropzone'); + this.dropzone.on('dragover', $.proxy(this, 'onDragOver')); + this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave')); + this.dropzone.on('drop', $.proxy(this, 'onDrop')); + }; + + MOJFrontend.MultiFileUpload.prototype.setupLabel = function() { + this.label = $(''); + this.dropzone.append('

' + this.params.dropzoneHintText + '

'); + this.dropzone.append(this.label); + }; + + MOJFrontend.MultiFileUpload.prototype.setupFileInput = function() { + this.fileInput = this.params.container.find('.moj-multi-file-upload__input'); + this.fileInput.on('change', $.proxy(this, 'onFileChange')); + this.fileInput.on('focus', $.proxy(this, 'onFileFocus')); + this.fileInput.on('blur', $.proxy(this, 'onFileBlur')); + }; + + MOJFrontend.MultiFileUpload.prototype.setupStatusBox = function() { + this.status = $('
'); + this.dropzone.append(this.status); + }; + + MOJFrontend.MultiFileUpload.prototype.onDragOver = function(e) { + e.preventDefault(); + this.dropzone.addClass('moj-multi-file-upload--dragover'); + }; + + MOJFrontend.MultiFileUpload.prototype.onDragLeave = function() { + this.dropzone.removeClass('moj-multi-file-upload--dragover'); + }; + + MOJFrontend.MultiFileUpload.prototype.onDrop = function(e) { + e.preventDefault(); + this.dropzone.removeClass('moj-multi-file-upload--dragover'); + this.feedbackContainer.removeClass('moj-hidden'); + this.status.html(this.params.uploadStatusText); + this.uploadFiles(e.originalEvent.dataTransfer.files); + }; + + MOJFrontend.MultiFileUpload.prototype.uploadFiles = function(files) { + for(var i = 0; i < files.length; i++) { + this.uploadFile(files[i]); + } + }; + + MOJFrontend.MultiFileUpload.prototype.onFileChange = function(e) { + this.feedbackContainer.removeClass('moj-hidden'); + this.status.html(this.params.uploadStatusText); + this.uploadFiles(e.currentTarget.files); + this.fileInput.replaceWith($(e.currentTarget).val('').clone(true)); + this.setupFileInput(); + this.fileInput.focus(); + }; + + MOJFrontend.MultiFileUpload.prototype.onFileFocus = function(e) { + this.label.addClass('moj-multi-file-upload--focused'); + }; + + MOJFrontend.MultiFileUpload.prototype.onFileBlur = function(e) { + this.label.removeClass('moj-multi-file-upload--focused'); + }; + + MOJFrontend.MultiFileUpload.prototype.getSuccessHtml = function(success) { + return ' ' + success.messageHtml + ''; + }; + + MOJFrontend.MultiFileUpload.prototype.getErrorHtml = function(error) { + return ' '+ error.message +''; + }; + + MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function(file) { + var html = ''; + html += '
'; + html += '
'; + html += ''+file.name+''; + html += '0%'; + html += '
'; + html += '
'; + html += '
'; + return html; + }; + + MOJFrontend.MultiFileUpload.prototype.getDeleteButtonHtml = function(file) { + var html = ''; + return html; + }; + + MOJFrontend.MultiFileUpload.prototype.uploadFile = function(file) { + this.params.uploadFileEntryHook(this, file); + var formData = new FormData(); + formData.append('documents', file); + var item = $(this.getFileRowHtml(file)); + this.feedbackContainer.find('.moj-multi-file-upload__list').append(item); + + $.ajax({ + url: this.params.uploadUrl, + type: 'post', + data: formData, + processData: false, + contentType: false, + success: $.proxy(function(response){ + if(response.error) { + item.find('.moj-multi-file-upload__message').html(this.getErrorHtml(response.error)); + this.status.html(response.error.message); + } else { + item.find('.moj-multi-file-upload__message').html(this.getSuccessHtml(response.success)); + this.status.html(response.success.messageText); + } + item.find('.moj-multi-file-upload__actions').append(this.getDeleteButtonHtml(response.file)); + this.params.uploadFileExitHook(this, file, response); + }, this), + error: $.proxy(function(jqXHR, textStatus, errorThrown) { + this.params.uploadFileErrorHook(this, file, jqXHR, textStatus, errorThrown); + }, this), + xhr: function() { + var xhr = new XMLHttpRequest(); + xhr.upload.addEventListener('progress', function(e) { + if (e.lengthComputable) { + var percentComplete = e.loaded / e.total; + percentComplete = parseInt(percentComplete * 100, 10); + item.find('.moj-multi-file-upload__progress').text(' ' + percentComplete + '%'); + } + }, false); + return xhr; + } + }); + }; + + MOJFrontend.MultiFileUpload.prototype.onFileDeleteClick = function(e) { + e.preventDefault(); // if user refreshes page and then deletes + var button = $(e.currentTarget); + var data = {}; + data[button[0].name] = button[0].value; + $.ajax({ + url: this.params.deleteUrl, + type: 'post', + dataType: 'json', + data: data, + success: $.proxy(function(response){ + if(response.error) { + // handle error + } else { + button.parents('.moj-multi-file-upload__row').remove(); + if(this.feedbackContainer.find('.moj-multi-file-upload__row').length === 0) { + this.feedbackContainer.addClass('moj-hidden'); + } + } + this.params.fileDeleteHook(this, response); + }, this) + }); + }; +} diff --git a/package/moj/components/multi-file-upload/template.njk b/package/moj/components/multi-file-upload/template.njk new file mode 100644 index 00000000..4339e846 --- /dev/null +++ b/package/moj/components/multi-file-upload/template.njk @@ -0,0 +1,25 @@ +
+
+

{{ params.uploadedFiles.heading.html | safe if params.uploadedFiles.heading.html else params.uploadedFiles.heading.text }}

+
+ {% if params.uploadedFiles.items and params.uploadedFiles.items.length > 0 %} + {% for item in params.uploadedFiles.items %} +
+
+ {{ item.message.html | safe if item.message.html else item.message.text }} +
+
+ +
+
+ {% endfor %} + {% endif %} +
+
+ +
+ {{ params.uploadHtml | safe }} +
+
\ No newline at end of file diff --git a/package/moj/components/multi-select/README.md b/package/moj/components/multi-select/README.md new file mode 100644 index 00000000..799fb169 --- /dev/null +++ b/package/moj/components/multi-select/README.md @@ -0,0 +1,5 @@ +# Table multi-select + +- [Guidance](https://moj-design-system.herokuapp.com/components/table-multi-select) +- [Preview](https://moj-frontend.herokuapp.com/components/table-multi-select) + diff --git a/package/moj/components/multi-select/_multi-select.scss b/package/moj/components/multi-select/_multi-select.scss new file mode 100644 index 00000000..b024ba7f --- /dev/null +++ b/package/moj/components/multi-select/_multi-select.scss @@ -0,0 +1,14 @@ +/* ========================================================================== + # MULTI-SELECT + ========================================================================== */ + + +.moj-multi-select__checkbox { + display: inline-block; + padding-left: 0; +} + +.moj-multi-select__toggle-label { + padding: 0 !important; + margin: 0 !important; +} \ No newline at end of file diff --git a/package/moj/components/multi-select/multi-select.js b/package/moj/components/multi-select/multi-select.js new file mode 100644 index 00000000..3d05397c --- /dev/null +++ b/package/moj/components/multi-select/multi-select.js @@ -0,0 +1,57 @@ +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 += '
'; + html += ' '; + html += ' '; + html += '
'; + 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; + } + } +}; \ No newline at end of file diff --git a/package/moj/components/notification-badge/README.md b/package/moj/components/notification-badge/README.md new file mode 100644 index 00000000..220471bf --- /dev/null +++ b/package/moj/components/notification-badge/README.md @@ -0,0 +1,9 @@ +# Notification badge + +- [Guidance](https://moj-design-system.herokuapp.com/components/notification-badge) +- [Preview](https://moj-frontend.herokuapp.com/components/notification-badge) + +## Arguments + +|Name|Type|Required|Description| +|---|---|---|---| \ No newline at end of file diff --git a/package/moj/components/notification-badge/_notification-badge.scss b/package/moj/components/notification-badge/_notification-badge.scss new file mode 100644 index 00000000..6bf8ff3e --- /dev/null +++ b/package/moj/components/notification-badge/_notification-badge.scss @@ -0,0 +1,17 @@ +/* ========================================================================== + #NOTIFICATION BADGE + ========================================================================== */ + +.moj-notification-badge { + @include govuk-font($size: 16, $weight: "bold"); + color: govuk-colour("white"); + display: inline-block; + min-width: 15px; + padding: 5px 8px 2px 8px; + border-radius: 75px; + background-color: govuk-colour("red"); + font-size: 16px; + font-weight: 600; + text-align: center; + white-space: nowrap; +} \ No newline at end of file diff --git a/package/moj/components/notification-badge/macro.njk b/package/moj/components/notification-badge/macro.njk new file mode 100644 index 00000000..0f190967 --- /dev/null +++ b/package/moj/components/notification-badge/macro.njk @@ -0,0 +1,3 @@ +{% macro mojNotificationBadge(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/notification-badge/template.njk b/package/moj/components/notification-badge/template.njk new file mode 100644 index 00000000..309b9798 --- /dev/null +++ b/package/moj/components/notification-badge/template.njk @@ -0,0 +1,5 @@ +{%- if params.text.length %} + + {{- params.text | safe -}} + +{% endif -%} \ No newline at end of file diff --git a/package/moj/components/organisation-switcher/README.md b/package/moj/components/organisation-switcher/README.md new file mode 100644 index 00000000..27a50841 --- /dev/null +++ b/package/moj/components/organisation-switcher/README.md @@ -0,0 +1,9 @@ +# Organisation switcher + +- [Guidance](https://moj-design-system.herokuapp.com/components/organisation-switcher) +- [Preview](https://moj-frontend.herokuapp.com/components/organisation-switcher) + +## Arguments + +|Name|Type|Required|Description| +|---|---|---|---| \ No newline at end of file diff --git a/package/moj/components/organisation-switcher/_organisation-switcher.scss b/package/moj/components/organisation-switcher/_organisation-switcher.scss new file mode 100644 index 00000000..fe0b9558 --- /dev/null +++ b/package/moj/components/organisation-switcher/_organisation-switcher.scss @@ -0,0 +1,28 @@ +/* ========================================================================== + #ORGANISATION SWITCHER + ========================================================================== */ + +.moj-organisation-nav { + @include govuk-clearfix; + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(3); + padding-bottom: govuk-spacing(1); + border-bottom: 1px solid $govuk-border-colour; +} + +.moj-organisation-nav__title { + @include govuk-font($size: 19, $weight: "bold"); + @include govuk-media-query($from: tablet) { + float: left; + width: 75%; + } +} + +.moj-organisation-nav__link { + @include govuk-link-common; + @include govuk-link-style-default; + @include govuk-link-print-friendly; + @include govuk-media-query($from: tablet) { + float: right; + } +} diff --git a/package/moj/components/organisation-switcher/macro.njk b/package/moj/components/organisation-switcher/macro.njk new file mode 100644 index 00000000..5c0d0936 --- /dev/null +++ b/package/moj/components/organisation-switcher/macro.njk @@ -0,0 +1,3 @@ +{% macro mojOrganisationSwitcher(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/organisation-switcher/template.njk b/package/moj/components/organisation-switcher/template.njk new file mode 100644 index 00000000..3158c12a --- /dev/null +++ b/package/moj/components/organisation-switcher/template.njk @@ -0,0 +1,12 @@ +
+
+ {{- params.html | safe if params.html else params.text -}} +
+ + {% if params.link %} + {%- set linkText = params.link.text | default('Change organisation') -%} + + {{- linkText -}} + + {% endif %} +
diff --git a/package/moj/components/page-header-actions/README.md b/package/moj/components/page-header-actions/README.md new file mode 100644 index 00000000..01a0dd44 --- /dev/null +++ b/package/moj/components/page-header-actions/README.md @@ -0,0 +1,6 @@ +# Page header actions + +- [Guidance](https://moj-design-system.herokuapp.com/components/page-header-actions) +- [Preview](https://moj-frontend.herokuapp.com/components/page-header-actions) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/page-header-actions/_page-header-actions.scss b/package/moj/components/page-header-actions/_page-header-actions.scss new file mode 100644 index 00000000..fd8eb225 --- /dev/null +++ b/package/moj/components/page-header-actions/_page-header-actions.scss @@ -0,0 +1,54 @@ +.moj-page-header-actions { + @include govuk-clearfix; + font-size: 0; // Hide whitespace between elements + margin-bottom: govuk-spacing(7); + min-height: govuk-spacing(7); // Match button height + text-align: justify; // Trick to remove the need for floats + &:after { + content: ''; + display: inline-block; + width: 100%; + } + +} + + +.moj-page-header-actions__title { + + [class^=govuk-heading-] { + margin-bottom: govuk-spacing(2); + text-align: left; + @include govuk-media-query($from: tablet) { + margin-bottom: 0; + } + } + + @include govuk-media-query($from: tablet) { + display: inline-block; + vertical-align: middle; + } + +} + + +.moj-page-header-actions__actions { + + @include govuk-media-query($from: tablet) { + display: inline-block; + vertical-align: middle; + } + +} + +.moj-page-header-actions__action { + + &:last-child { + margin-bottom: 0; + } + + @include govuk-media-query($from: tablet) { + margin-bottom: 0; + } + +} + diff --git a/package/moj/components/page-header-actions/macro.njk b/package/moj/components/page-header-actions/macro.njk new file mode 100644 index 00000000..f9ce4c3e --- /dev/null +++ b/package/moj/components/page-header-actions/macro.njk @@ -0,0 +1,3 @@ +{% macro mojPageHeaderActions(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/page-header-actions/template.njk b/package/moj/components/page-header-actions/template.njk new file mode 100644 index 00000000..6c474567 --- /dev/null +++ b/package/moj/components/page-header-actions/template.njk @@ -0,0 +1,20 @@ +{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu %} + +
+ +
+ + {{- params.heading.html | safe if params.heading.html else params.heading.text -}} + +
+ + {% if params.items %} +
+ {{mojButtonMenu({ + buttonClasses: 'moj-page-header-actions__action', + items: params.items + })}} +
+ {% endif %} + +
\ No newline at end of file diff --git a/package/moj/components/pagination/README.md b/package/moj/components/pagination/README.md new file mode 100755 index 00000000..0f8a9a05 --- /dev/null +++ b/package/moj/components/pagination/README.md @@ -0,0 +1,6 @@ +# Pagination + +- [Guidance](https://moj-design-system.herokuapp.com/components/pagination) +- [Preview](https://moj-frontend.herokuapp.com/components/pagination) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/pagination/_pagination.scss b/package/moj/components/pagination/_pagination.scss new file mode 100755 index 00000000..c321d790 --- /dev/null +++ b/package/moj/components/pagination/_pagination.scss @@ -0,0 +1,114 @@ +.moj-pagination { + // text-align: center; + + @include govuk-media-query($from: desktop) { + + // Alignment adjustments + margin-left: - govuk-spacing(1); + margin-right: - govuk-spacing(1); + + // Hide whitespace between elements + font-size: 0; + + // Trick to remove the need for floats + text-align: justify; + + &:after { + content: ''; + display: inline-block; + width: 100%; + } + } + +} + +.moj-pagination__list { + list-style: none; + margin: 0; + padding: 0; + @include govuk-media-query($from: desktop) { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } +} + +.moj-pagination__results { + @include govuk-font(19); + margin-top: 0; + @include govuk-media-query($from: desktop) { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } +} + +.moj-pagination__item { + @include govuk-font(19); + display: inline-block; +} + +.moj-pagination__item--active, +.moj-pagination__item--dots { + font-weight: bold; + height: 25px; + padding: govuk-spacing(1) govuk-spacing(2); + text-align: center; +} + +.moj-pagination__item--dots { + padding-left: 0; + padding-right: 0; +} + +.moj-pagination__item--prev .moj-pagination__link:before, +.moj-pagination__item--next .moj-pagination__link:after { + display: inline-block; + height: 10px; + width: 10px; + border-style: solid; + color: govuk-colour("black"); + background: transparent; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + content: ""; +} + +.moj-pagination__item--prev .moj-pagination__link:before { + border-width: 3px 0 0 3px; + margin-right: govuk-spacing(1); +} + +.moj-pagination__item--next .moj-pagination__link:after { + border-width: 0 3px 3px 0; + margin-left: govuk-spacing(1); +} + +.moj-pagination__link { + @include govuk-link-common; + @include govuk-link-style-default; + display: block; + padding: govuk-spacing(1); + text-align: center; + text-decoration: none; + min-width: 25px; + + &:link, + &:visited { + color: $govuk-link-colour; + } + + &:hover { + color: govuk-tint($govuk-link-colour, 25); + } + + &:focus { + color: govuk-colour("black"); + } + +} + +.moj-pagination__results { + padding: govuk-spacing(1); +} diff --git a/package/moj/components/pagination/macro.njk b/package/moj/components/pagination/macro.njk new file mode 100755 index 00000000..3c23490c --- /dev/null +++ b/package/moj/components/pagination/macro.njk @@ -0,0 +1,3 @@ +{% macro mojPagination(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/pagination/template.njk b/package/moj/components/pagination/template.njk new file mode 100755 index 00000000..24e13575 --- /dev/null +++ b/package/moj/components/pagination/template.njk @@ -0,0 +1,35 @@ + \ No newline at end of file diff --git a/package/moj/components/password-reveal/README.md b/package/moj/components/password-reveal/README.md new file mode 100644 index 00000000..a19302fe --- /dev/null +++ b/package/moj/components/password-reveal/README.md @@ -0,0 +1,4 @@ +# Password reveal + +- [Guidance](https://moj-design-system.herokuapp.com/components/password-reveal) +- [Preview](https://moj-frontend.herokuapp.com/components/password-reveal) diff --git a/package/moj/components/password-reveal/_password-reveal.scss b/package/moj/components/password-reveal/_password-reveal.scss new file mode 100644 index 00000000..42e1ec8a --- /dev/null +++ b/package/moj/components/password-reveal/_password-reveal.scss @@ -0,0 +1,16 @@ +/* ========================================================================== + #PASSWORD SHOW/HIDE + ========================================================================== */ + +.moj-password-reveal { + display: flex; + + &__input { + margin-right: govuk-spacing(1); + } + + &__button { + width: 80px; + } + +} \ No newline at end of file diff --git a/package/moj/components/password-reveal/password-reveal.js b/package/moj/components/password-reveal/password-reveal.js new file mode 100644 index 00000000..2791be4b --- /dev/null +++ b/package/moj/components/password-reveal/password-reveal.js @@ -0,0 +1,22 @@ +MOJFrontend.PasswordReveal = function(element) { + this.el = element; + $(this.el).wrap('
'); + this.container = $(this.el).parent(); + this.createButton(); +}; + +MOJFrontend.PasswordReveal.prototype.createButton = function() { + this.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'); + } +}; \ No newline at end of file diff --git a/package/moj/components/primary-navigation/README.md b/package/moj/components/primary-navigation/README.md new file mode 100644 index 00000000..e1757e6f --- /dev/null +++ b/package/moj/components/primary-navigation/README.md @@ -0,0 +1,51 @@ +# Primary navigation + +- [Guidance](https://moj-design-system.herokuapp.com/components/primary-navigation) +- [Preview](https://moj-frontend.herokuapp.com/components/primary-navigation) + +## Example + +``` +{{ mojPrimaryNavigation({ + label: 'Primary navigation', + items: [{ + text: 'Nav item 1', + href: '#1', + active: true + }, { + text: 'Nav item 2', + href: '#2' + }, { + text: 'Nav item 3', + href: '#3' + }] +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|label|string|No|The `aria-label` to add to the navigation container.| +|items|array|Yes|An array of navigation item objects. See [items](#items).| +|searchHtml|sting|No|| +|containerClasses|string|No|Classes to add to the parent `div` container.| +|classes|string|No|Classes to add to the `nav` container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container.| + +### Items + +|Name|Type|Required|Description| +|---|---|---|---| +|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| + + +*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).* diff --git a/package/moj/components/primary-navigation/_primary-navigation.scss b/package/moj/components/primary-navigation/_primary-navigation.scss new file mode 100644 index 00000000..66ce1968 --- /dev/null +++ b/package/moj/components/primary-navigation/_primary-navigation.scss @@ -0,0 +1,120 @@ +/* ========================================================================== + #PRIMARY NAVIGATION + ========================================================================== */ + +.moj-primary-navigation { + background-color: govuk-colour("light-grey"); +} + +.moj-primary-navigation__container { + @include moj-width-container; + font-size: 0; // Hide whitespace between elements + text-align: justify; // Trick to remove the need for floats + + &:after { + content: ''; + display: inline-block; + width: 100%; + } + +} + +.moj-primary-navigation__nav { + text-align: left; + @include govuk-media-query($from: desktop) { + display: inline-block; + vertical-align: middle; + } + +} + +.moj-primary-navigation__list { + font-size: 0; // Removes white space when using inline-block on child element. + list-style: none; + margin: 0; + padding: 0; +} + +.moj-primary-navigation__item { + @include govuk-font($size: 19); + display: inline-block; + margin-right: govuk-spacing(4); + margin-top: 0; + + &:last-child { + margin-right: 0; + } + +} + +.moj-primary-navigation__link { + @include govuk-link-common; + @include govuk-link-style-default; + display: block; + padding-bottom: 15px; + padding-top: 15px; + text-decoration: none; + font-weight: bold; + + &:link, + &:visited { + color: $govuk-link-colour; + } + + &:hover { + color: govuk-tint($govuk-link-colour, 25); + } + + &:focus { + color: govuk-colour("black"); // Focus colour on yellow should really be black. + position: relative; // Ensure focus sits above everything else. + z-index: 1; + box-shadow: none; + } + + &:focus:before { + background-color: govuk-colour("black"); + content: ""; + display: block; + height: 5px; + position: absolute; bottom: 0; left: 0; + width: 100%; + } + + &[aria-current] { + color: $govuk-link-colour; + position: relative; + text-decoration: none; + font-weight: bold; + &:before { + background-color: $govuk-link-colour; + content: ""; + display: block; + height: 5px; + position: absolute; bottom: 0; left: 0; + width: 100%; + } + + &:focus { + color: govuk-colour("black"); // Focus colour on yellow should really be black. + position: relative; // Ensure focus sits above everything else. + border: none; + + &:before { + background-color: govuk-colour("black"); + } + + } + + } + +} + +.moj-primary-navigation__search { + + @include govuk-media-query($from: desktop) { + display: inline-block; + vertical-align: middle; + } + +} diff --git a/package/moj/components/primary-navigation/macro.njk b/package/moj/components/primary-navigation/macro.njk new file mode 100644 index 00000000..67238890 --- /dev/null +++ b/package/moj/components/primary-navigation/macro.njk @@ -0,0 +1,3 @@ +{% macro mojPrimaryNavigation(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/primary-navigation/template.njk b/package/moj/components/primary-navigation/template.njk new file mode 100644 index 00000000..26da84ad --- /dev/null +++ b/package/moj/components/primary-navigation/template.njk @@ -0,0 +1,33 @@ +
+ +
+ +
+ + + +
+ + {%- if params.searchHtml %} +
+ {{- params.searchHtml | safe -}} +
+ {% endif -%} + +
+ +
diff --git a/package/moj/components/progress-bar/README.md b/package/moj/components/progress-bar/README.md new file mode 100755 index 00000000..142ff408 --- /dev/null +++ b/package/moj/components/progress-bar/README.md @@ -0,0 +1,9 @@ +# Progress bar + +- [Guidance](https://moj-design-system.herokuapp.com/components/progress-bar) +- [Preview](https://moj-frontend.herokuapp.com/components/progress-bar) + +## Arguments + +|Name|Type|Required|Description| +|---|---|---|---| \ No newline at end of file diff --git a/package/moj/components/progress-bar/_progress-bar.scss b/package/moj/components/progress-bar/_progress-bar.scss new file mode 100755 index 00000000..606c5446 --- /dev/null +++ b/package/moj/components/progress-bar/_progress-bar.scss @@ -0,0 +1,123 @@ +/* ========================================================================== + #PROGRESS BAR + ========================================================================== */ + +.moj-progress-bar { + margin-bottom: govuk-spacing(7); +} + +.moj-progress-bar__list { + font-size: 0; // Hide white space between elements + list-style: none; + margin: 0; + padding: 0; + position: relative; + text-align: justify; + vertical-align: top; + + // IE8 does not support the text justify approach for spacing + @include govuk-if-ie8 { + display: table; + table-layout: fixed; + width: 100%; + } + + &::after { + content: ""; + display: inline-block; + width: 100%; + } + + &::before { + border-top: 6px solid govuk-colour("green"); + content: ""; + left: 0; + position: absolute; + top: 13px; + width: 100%; + } + +} + +.moj-progress-bar__item { + @include govuk-font(19); + display: inline-block; + max-width: 20%; + position: relative; + text-align: center; + vertical-align: top; + + // IE8 does not support the text justify approach for spacing + @include govuk-if-ie8 { + display: table-cell; + } + + &:first-child, + &:last-child { + &::before { + border-top: 6px solid govuk-colour("white"); + content: ""; + position: absolute; + top: 13px; left: 0; + width: 50%; + } + + } + + &:first-child { + + &::before { + left: 0; + } + + } + + &:last-child { + + &::before { + left: auto; + right: 0; + } + + } + + &[aria-current=step] { // https://tink.uk/using-the-aria-current-attribute + @include govuk-font($size: 19, $weight: "bold"); + } + +} + +.moj-progress-bar__icon { + position: relative; + background-color: govuk-colour("white"); + border: 6px solid govuk-colour("green"); + border-radius: 50%; // IE8 does not support border radius but we’re ok with that + box-sizing: border-box; + display: block; + height: 32px; + margin-left: auto; + margin-right: auto; + width: 32px; +} + +.moj-progress-bar__icon--complete { + background-color: govuk-colour("green"); + background-image: url(#{$moj-images-path}icon-progress-tick.svg); + background-position: 50% 50%; + background-repeat: no-repeat; + + // IE8 does not support box shadow, so use a standard border. + @include govuk-if-ie8 { + background-image: url(#{$moj-images-path}icon-progress-tick.png); + } + +} + +.moj-progress-bar__label { + @include govuk-font(16); + display: block; + font-weight: inherit; + margin-top: govuk-spacing(3); + position: relative; + word-wrap: break-word; // Just in case +} diff --git a/package/moj/components/progress-bar/macro.njk b/package/moj/components/progress-bar/macro.njk new file mode 100755 index 00000000..da8e38b3 --- /dev/null +++ b/package/moj/components/progress-bar/macro.njk @@ -0,0 +1,3 @@ +{% macro mojProgressBar(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/progress-bar/template.njk b/package/moj/components/progress-bar/template.njk new file mode 100755 index 00000000..754e1b69 --- /dev/null +++ b/package/moj/components/progress-bar/template.njk @@ -0,0 +1,12 @@ +
+
    + {%- for item in params.items %} +
  1. + + + {{- item.label.html | safe if item.label.html else item.label.text -}} + +
    2. + {% endfor -%} +
+
\ No newline at end of file diff --git a/package/moj/components/rich-text-editor/README.md b/package/moj/components/rich-text-editor/README.md new file mode 100755 index 00000000..1fd21c72 --- /dev/null +++ b/package/moj/components/rich-text-editor/README.md @@ -0,0 +1,18 @@ +# Rich text editor + +- [Guidance](https://moj-design-system.herokuapp.com/components/rich-text-editor) +- [Preview](https://moj-frontend.herokuapp.com/components/rich-text-editor) + +## Example + +``` + +``` + +## Options + diff --git a/package/moj/components/rich-text-editor/_rich-text-editor.scss b/package/moj/components/rich-text-editor/_rich-text-editor.scss new file mode 100755 index 00000000..1d0530c4 --- /dev/null +++ b/package/moj/components/rich-text-editor/_rich-text-editor.scss @@ -0,0 +1,74 @@ +/* ========================================================================== + #RICH TEXT EDITOR + ========================================================================== */ + +.moj-rich-text-editor__toolbar { + @include govuk-clearfix; + margin-bottom: govuk-spacing(2); +} + +.moj-rich-text-editor__toolbar-button { + background-color: govuk-colour("white"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: 40px 40px; + border: 2px solid govuk-colour("black"); + color: govuk-colour("black"); + cursor: pointer; + float: left; + text-decoration: none; + height: 40px; + margin-left: -2px; + outline: 0; + vertical-align: top; + width: 40px; + + &:first-child { + margin-left: 0; + } + + // Fix unwanted button padding in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &:focus { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; + position: relative; + z-index: 2; + } + +} + +.moj-rich-text-editor__toolbar-button--bold { + background-image: url(#{$moj-images-path}icon-wysiwyg-bold.svg); +} + +.moj-rich-text-editor__toolbar-button--italic { + background-image: url(#{$moj-images-path}icon-wysiwyg-italic.svg); +} + +.moj-rich-text-editor__toolbar-button--underline { + background-image: url(#{$moj-images-path}icon-wysiwyg-underline.svg); +} + +.moj-rich-text-editor__toolbar-button--unordered-list { + background-image: url(#{$moj-images-path}icon-wysiwyg-unordered-list.svg); + margin-left: govuk-spacing(2); +} + +.moj-rich-text-editor__toolbar-button--ordered-list { + background-image: url(#{$moj-images-path}icon-wysiwyg-ordered-list.svg); +} + +.moj-rich-text-editor__content { + @extend .govuk-textarea; + min-height: 130px; + outline: none; + overflow: auto; + resize: vertical; +} \ No newline at end of file diff --git a/package/moj/components/rich-text-editor/rich-text-editor.js b/package/moj/components/rich-text-editor/rich-text-editor.js new file mode 100755 index 00000000..acfb631f --- /dev/null +++ b/package/moj/components/rich-text-editor/rich-text-editor.js @@ -0,0 +1,132 @@ +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 += ''; + return html; + }; + + MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) { + return this.getToolbarHtml() + '
'; + }; + + 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(); + }; + +} \ No newline at end of file diff --git a/package/moj/components/search-toggle/README.md b/package/moj/components/search-toggle/README.md new file mode 100755 index 00000000..5b2c4376 --- /dev/null +++ b/package/moj/components/search-toggle/README.md @@ -0,0 +1 @@ +# Search toggle diff --git a/package/moj/components/search-toggle/search-toggle.js b/package/moj/components/search-toggle/search-toggle.js new file mode 100644 index 00000000..e86a12ae --- /dev/null +++ b/package/moj/components/search-toggle/search-toggle.js @@ -0,0 +1,17 @@ +MOJFrontend.SearchToggle = function(options) { + this.options = options; + this.toggleButton = $(''); + this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick')); + this.options.toggleButton.container.append(this.toggleButton); +}; + +MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function() { + if(this.toggleButton.attr('aria-expanded') == 'false') { + this.toggleButton.attr('aria-expanded', 'true'); + this.options.search.container.removeClass('moj-js-hidden'); + this.options.search.container.find('input').first().focus(); + } else { + this.options.search.container.addClass('moj-js-hidden'); + this.toggleButton.attr('aria-expanded', 'false'); + } +}; diff --git a/package/moj/components/search-toggle/search-toggle.scss b/package/moj/components/search-toggle/search-toggle.scss new file mode 100644 index 00000000..7a635937 --- /dev/null +++ b/package/moj/components/search-toggle/search-toggle.scss @@ -0,0 +1,81 @@ +.moj-search-toggle__button { + @include govuk-font($size: 19, $weight: bold); + background-color: transparent; + border: none; + color: $govuk-link-colour; + cursor: pointer; + display: inline-block; + padding-top: 12px; + padding-bottom: 13px; + padding-left: 0; + padding-right: 0; + -webkit-font-smoothing: antialiased; + -webkit-appearance: none; + + &:after { + background-repeat: no-repeat; + background-image: url(#{$moj-images-path}icon-search-blue.svg); + content: ''; + display: inline-block; + height: 20px; + margin-left: govuk-spacing(2); + vertical-align: middle; + width: 20px; + } + + &:focus { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; + position: relative; + z-index: 1; + + &:after { + background-image: url(#{$moj-images-path}icon-search-black.svg); + } + } + +} + + +.moj-search--toggle { + + padding: govuk-spacing(3); + + @include govuk-media-query($until: desktop) { + padding-left: 0 !important; + padding-right: 0 !important; + } + +} + + +// JS enabled +.js-enabled .moj-search--toggle { + + @include govuk-media-query($until: desktop) { + padding-top: 0 !important; + } + +} + +.js-enabled .moj-search-toggle { + position: relative; +} + + +.js-enabled .moj-search-toggle__search { + + background-color: govuk-colour("light-grey"); + + @include govuk-media-query($from: desktop) { + max-width: 450px; + position: absolute; + right: -15px; + top: 50px; // Height of nav bar + width: 450px; + z-index: 10; + } + +} diff --git a/package/moj/components/search/README.md b/package/moj/components/search/README.md new file mode 100755 index 00000000..55139539 --- /dev/null +++ b/package/moj/components/search/README.md @@ -0,0 +1,6 @@ +# Search + +- [Guidance](https://moj-design-system.herokuapp.com/components/search) +- [Preview](https://moj-frontend.herokuapp.com/components/search) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/search/_search.scss b/package/moj/components/search/_search.scss new file mode 100755 index 00000000..a6fa71b9 --- /dev/null +++ b/package/moj/components/search/_search.scss @@ -0,0 +1,42 @@ +.moj-search { + font-size: 0; // Fallback +} + +.moj-search form { + align-items: flex-end; + display: flex; +} + +.moj-search .govuk-form-group { + display: inline-block; + flex: 1; + margin-bottom: 0; + vertical-align: top; +} + +.moj-search__label, +.moj-search__hint { + text-align: left; +} + +.moj-search__input:focus { + position: relative; + z-index: 1; +} + +.moj-search__button { + display: inline-block; + margin-bottom: 0; + margin-left: govuk-spacing(2); + position: relative; + top: -2px; // Override default gov properties due to active pixel movement + vertical-align: bottom; + width: auto; +} + +.moj-search--inline { + padding: govuk-spacing(2) 0 !important; + @include govuk-media-query($from: desktop) { + padding: 0 !important; + } +} \ No newline at end of file diff --git a/package/moj/components/search/macro.njk b/package/moj/components/search/macro.njk new file mode 100755 index 00000000..d569b513 --- /dev/null +++ b/package/moj/components/search/macro.njk @@ -0,0 +1,3 @@ +{% macro mojSearch(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/search/template.njk b/package/moj/components/search/template.njk new file mode 100755 index 00000000..24c5225f --- /dev/null +++ b/package/moj/components/search/template.njk @@ -0,0 +1,34 @@ +{%- from "govuk/components/input/macro.njk" import govukInput %} +{%- from "govuk/components/button/macro.njk" import govukButton %} + +
+ + {%- if params.hint %} + {% set hintClasses = 'moj-search__hint ' + (params.hint.classes if params.hint.classes) %} + {% set hintText = params.hint.text %} + {% set hint = { classes: hintClasses, text: hintText } %} + {% endif -%} + + {%- if params.method %} + {% set method = params.method %} + {% endif -%} + +
+ {{ govukInput({ + classes: 'moj-search__input ' + (params.input.classes if params.input.classes), + label: { + classes: 'moj-search__label ' + (params.label.classes if params.label.classes), + text: params.label.text + }, + hint: hint, + id: params.input.id, + name: params.input.name, + type: 'search' + }) }} + + {{ govukButton({ + classes: 'moj-search__button ' + (params.button.classes if params.button.classes), + text: params.button.text + }) }} +
+
diff --git a/package/moj/components/side-navigation/README.md b/package/moj/components/side-navigation/README.md new file mode 100644 index 00000000..4d54f63e --- /dev/null +++ b/package/moj/components/side-navigation/README.md @@ -0,0 +1,67 @@ +# Side navigation + +- [Guidance](https://moj-design-system.herokuapp.com/components/side-navigation) +- [Preview](https://moj-frontend.herokuapp.com/components/side-navigation) + +## Example + +``` +{{ mojSideNavigation({ + label: 'Side navigation', + items: [{ + text: 'Nav item 1', + href: '#1', + active: true + }, { + text: 'Nav item 2', + href: '#2' + }, { + text: 'Nav item 3', + href: '#3' + }] +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|label|string|No|The `aria-label` to add to the navigation container.| +|items|array|Yes|An array of navigation item objects. See [items](#items).| +|sections|array|No|An array of navigation section objects. See [sections](#sections).| +|classes|string|No|Classes to add to the `nav` container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container.| + +### Sections + +|Name|Type|Required|Description| +|---|---|---|---| +|items|array|Yes|An array of navigation item objects. See [items](#items).| +|heading|object|Yes|See [heading](#headings)| + +#### Headings + +|Name|Type|Required|Description| +|---|---|---|---| +|headingLevel|numeric|No|A number for the heading level. Defaults to 4 (`

`)| +|text|string|Yes|If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.| +|classes|string|No|Classes to add to the heading.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| + +### Items + +|Name|Type|Required|Description| +|---|---|---|---| +|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| + + +*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).* diff --git a/package/moj/components/side-navigation/_side-navigation.scss b/package/moj/components/side-navigation/_side-navigation.scss new file mode 100644 index 00000000..143f953e --- /dev/null +++ b/package/moj/components/side-navigation/_side-navigation.scss @@ -0,0 +1,125 @@ +/* ========================================================================== + #SIDE NAVIGATION + ========================================================================== */ + +.moj-side-navigation { + @include govuk-font(16); + + @include govuk-media-query($until: tablet) { + display: flex; + overflow-x: scroll; + } + + @include govuk-media-query($from: tablet) { + display: block; + padding: govuk-spacing(4) 0 0; + } + +} + +.moj-side-navigation__title { + @include govuk-font($size: 19); + color: govuk-colour("dark-grey"); + font-weight: normal; + margin: 0; + padding: govuk-spacing(2); + padding-left: govuk-spacing(2) + 4px; + + @include govuk-media-query($until: tablet) { + display: none; + } + +} + +.moj-side-navigation__list { + list-style: none; + margin: 0; + padding: 0; + + @include govuk-media-query($until: tablet) { + display: flex; + margin: 0; + white-space: nowrap; + } + + @include govuk-media-query($from: tablet) { + margin-bottom: govuk-spacing(4); + } +} + +.moj-side-navigation__item { + + @include govuk-media-query($until: tablet) { + display: flex; + } + + a, + a:link, + a:visited { + background-color: inherit; + color: $govuk-link-colour; + display: block; + text-decoration: none; + + @include govuk-media-query($until: tablet) { + border-bottom: 4px solid transparent; + padding: govuk-spacing(3); + padding-bottom: govuk-spacing(3) - 4px; // Compensate for 4px border + } + + @include govuk-media-query($from: tablet) { + background-color: inherit; + border-left: 4px solid transparent; + padding: govuk-spacing(2); + } + + + } + + a:hover { + border-color: govuk-tint($govuk-link-colour, 25); + } + + a:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + border-color: $govuk-focus-text-colour; + border-left-color: transparent; + position: relative; + } + +} + +.moj-side-navigation__item--active { + + a:link, + a:visited { + border-color: $govuk-link-colour; + color: $govuk-link-colour; + font-weight: bold; + } + + a:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + border-color: $govuk-focus-text-colour; + border-left-color: transparent; + } + + @include govuk-media-query($from: tablet) { + a:link, + a:visited { + background-color: govuk-colour("light-grey"); + } + + a:focus { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + border-color: transparent; + } + } + + +} diff --git a/package/moj/components/side-navigation/macro.njk b/package/moj/components/side-navigation/macro.njk new file mode 100644 index 00000000..c8e57165 --- /dev/null +++ b/package/moj/components/side-navigation/macro.njk @@ -0,0 +1,3 @@ +{% macro mojSideNavigation(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/side-navigation/template.njk b/package/moj/components/side-navigation/template.njk new file mode 100644 index 00000000..fb2b0d1e --- /dev/null +++ b/package/moj/components/side-navigation/template.njk @@ -0,0 +1,28 @@ + \ No newline at end of file diff --git a/package/moj/components/sortable-table/README.md b/package/moj/components/sortable-table/README.md new file mode 100755 index 00000000..2c9be647 --- /dev/null +++ b/package/moj/components/sortable-table/README.md @@ -0,0 +1,6 @@ +# Sortable table + +- [Guidance](https://moj-design-system.herokuapp.com/components/sortable-table) +- [Preview](https://moj-frontend.herokuapp.com/components/sortable-table) + +## Arguments \ No newline at end of file diff --git a/package/moj/components/sortable-table/_sortable-table.scss b/package/moj/components/sortable-table/_sortable-table.scss new file mode 100755 index 00000000..3eef8b6a --- /dev/null +++ b/package/moj/components/sortable-table/_sortable-table.scss @@ -0,0 +1,66 @@ +[aria-sort] button, +[aria-sort] button:hover { + background-color: transparent; + border-width: 0; + -webkit-box-shadow: 0 0 0 0; + -moz-box-shadow: 0 0 0 0; + box-shadow: 0 0 0 0; + color: #005ea5; + cursor: pointer; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + padding: 0 10px 0 0; + position: relative; + text-align: inherit; + font-size: 1em; + margin: 0; +} + +[aria-sort] button:focus { + background-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; + outline: none; +} + +[aria-sort]:first-child button { + right: auto; +} + +[aria-sort] button:before { + content: " \25bc"; + position: absolute; + right: -1px; + top: 9px; + font-size: 0.5em; +} + +[aria-sort] button:after { + content: " \25b2"; + position: absolute; + right: -1px; + top: 1px; + font-size: 0.5em; +} + +[aria-sort="ascending"] button:before, +[aria-sort="descending"] button:before { + content: none; +} + +[aria-sort="ascending"] button:after { + content: " \25b2"; + font-size: .8em; + position: absolute; + right: -5px; + top: 2px; +} + +[aria-sort="descending"] button:after { + content: " \25bc"; + font-size: .8em; + position: absolute; + right: -5px; + top: 2px; +} \ No newline at end of file diff --git a/package/moj/components/sortable-table/sortable-table.js b/package/moj/components/sortable-table/sortable-table.js new file mode 100755 index 00000000..100f2f90 --- /dev/null +++ b/package/moj/components/sortable-table/sortable-table.js @@ -0,0 +1,117 @@ +MOJFrontend.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')); +}; + +MOJFrontend.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'; +}; + +MOJFrontend.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); + } + } +}; + +MOJFrontend.SortableTable.prototype.createHeadingButton = function(heading, i) { + var text = heading.text(); + var button = $(''); + heading.text(''); + heading.append(button); +}; + +MOJFrontend.SortableTable.prototype.createStatusBox = function() { + this.status = $('
'); + this.table.parent().append(this.status); +}; + +MOJFrontend.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); +}; + +MOJFrontend.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); +}; + +MOJFrontend.SortableTable.prototype.removeButtonStates = function() { + this.table.find('thead th').attr('aria-sort', 'none'); +}; + +MOJFrontend.SortableTable.prototype.addRows = function(rows) { + for(var i = 0; i < rows.length; i++) { + this.body.append(rows[i]); + } +}; + +MOJFrontend.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; +}; + +MOJFrontend.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; +}; + +MOJFrontend.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; +}; \ No newline at end of file diff --git a/package/moj/components/sub-navigation/README.md b/package/moj/components/sub-navigation/README.md new file mode 100755 index 00000000..df81586f --- /dev/null +++ b/package/moj/components/sub-navigation/README.md @@ -0,0 +1,49 @@ +# Sub navigation + +- [Guidance](https://moj-design-system.herokuapp.com/components/sub-navigation) +- [Preview](https://moj-frontend.herokuapp.com/components/sub-navigation) + +## Example + +``` +{{ mojSubNavigation({ + label: 'Sub navigation', + items: [{ + text: 'Nav item 1', + href: '#1', + active: true + }, { + text: 'Nav item 2', + href: '#2' + }, { + text: 'Nav item 3', + href: '#3' + }] +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|label|string|No|The `aria-label` to add to the `nav` container.| +|items|array|Yes|An array of navigation item objects. See [items](#items).| +|classes|string|No|Classes to add to the `nav` container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the `nav` container.| + + +### Items + +|Name|Type|Required|Description| +|---|---|---|---| +|href|string|Yes|URL of the navigation item anchor. Both href and text attributes for navigation items need to be provided to create an item.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|active|boolean|No|Flag to mark the navigation item as active or not. Defaults to `false`.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the navigation item anchor.| + +*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).* diff --git a/package/moj/components/sub-navigation/_sub-navigation.scss b/package/moj/components/sub-navigation/_sub-navigation.scss new file mode 100755 index 00000000..53d08cc0 --- /dev/null +++ b/package/moj/components/sub-navigation/_sub-navigation.scss @@ -0,0 +1,114 @@ +/* ========================================================================== + #SECONDARY NAV + ========================================================================== */ + +.moj-sub-navigation { + margin-bottom: govuk-spacing(7); +} + + +.moj-sub-navigation__list { + font-size: 0; // Removes white space when using inline-block on child element. + list-style: none; + margin: 0; + padding: 0; + + @include govuk-media-query($from: tablet) { + box-shadow: inset 0 -1px 0 $govuk-border-colour; + width: 100%; + } + + // IE8 does not support box shadow, so use a standard border. + @include govuk-if-ie8 { + border-bottom: 1px solid $govuk-border-colour; + } + +} + + +.moj-sub-navigation__item { + @include govuk-font(19); + box-shadow: inset 0 -1px 0 $govuk-border-colour; + display: block; + margin-top: -1px; + + &:last-child { + box-shadow: none; + } + + @include govuk-media-query($from: tablet) { + box-shadow: none; + display: inline-block; + margin-right: govuk-spacing(4); + margin-top: 0; + } + +} + + +.moj-sub-navigation__link { + @include govuk-link-common; + @include govuk-link-style-default; + display: block; + padding-top: 12px; + padding-bottom: 12px; + padding-left: govuk-spacing(3); + text-decoration: none; + position: relative; + + @include govuk-media-query($from: tablet) { + padding-left: 0; + } + + &:link, + &:visited { + color: $govuk-link-colour; + } + + &:hover { + color: govuk-tint($govuk-link-colour, 25); + } + + &:focus { + color: govuk-colour("black"); // Focus colour on yellow should really be black. + position: relative; // Ensure focus sits above everything else. + box-shadow: none; + } + + &:focus:before { + background-color: govuk-colour("black"); + content: ""; + display: block; + width: 100%; + position: absolute; bottom: 0; left: 0; right: 0; + height: 5px; + } + +} + + +.moj-sub-navigation__link[aria-current="page"] { + color: $govuk-link-active-colour; + position: relative; + text-decoration: none; + + &:before { + background-color: $govuk-link-colour; + content: ""; + display: block; + height: 100%; + position: absolute; bottom: 0; left: 0; + width: 5px; + + @include govuk-media-query($from: tablet) { + height: 5px; + width: 100%; + } + + } + + &:focus:before { + background-color: govuk-colour("black"); + } + +} diff --git a/package/moj/components/sub-navigation/macro.njk b/package/moj/components/sub-navigation/macro.njk new file mode 100755 index 00000000..370a2a07 --- /dev/null +++ b/package/moj/components/sub-navigation/macro.njk @@ -0,0 +1,3 @@ +{% macro mojSubNavigation(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/sub-navigation/template.njk b/package/moj/components/sub-navigation/template.njk new file mode 100755 index 00000000..16fd77ba --- /dev/null +++ b/package/moj/components/sub-navigation/template.njk @@ -0,0 +1,15 @@ + diff --git a/package/moj/components/tag/README.md b/package/moj/components/tag/README.md new file mode 100644 index 00000000..589fe046 --- /dev/null +++ b/package/moj/components/tag/README.md @@ -0,0 +1,29 @@ +# Badge + +- [Guidance](https://moj-design-system.herokuapp.com/components/tag) +- [Preview](https://moj-frontend.herokuapp.com/components/tag) + +## Classes + +|Name|Colour code|Colour contrast| +|---|---|---| +|moj-tag--purple|#2e358b|| +|moj-tag--light-purple|#6f72af|| +|moj-tag--bright-purple|#912b88|| +|moj-tag--pink|#d53880|| +|moj-tag--light-pink|#f499be|| +|moj-tag--red|#b10e1e|| +|moj-tag--orange|#f47738|| +|moj-tag--brown|#b58840|| +|moj-tag--yellow|#ffbf47|| +|moj-tag--light-green|#85994b|| +|moj-tag--green|#006435|| +|moj-tag--turquoise|#28a197|| +|moj-tag--light-blue|#2b8cc4|| +|moj-tag--blue|#005ea5|| +|moj-tag--black|#0b0c0c|| +|moj-tag--dark-grey|#6f777b|| +|moj-tag--mid-grey|#bfc1c3|| +|moj-tag--light-grey|#dee0e2|| +|moj-tag--light-grey|#f8f8f8|| +|moj-tag--white|#ffffff|| \ No newline at end of file diff --git a/package/moj/components/tag/_tag.scss b/package/moj/components/tag/_tag.scss new file mode 100644 index 00000000..18d79aa2 --- /dev/null +++ b/package/moj/components/tag/_tag.scss @@ -0,0 +1,55 @@ +/* ========================================================================== + #TAG + ========================================================================== */ + +.moj-tag { + border: 2px solid $govuk-brand-colour; + background-color: $govuk-brand-colour; + color: govuk-colour("white"); + + &--purple { + border: 2px solid govuk-colour("purple"); + background-color: govuk-colour("purple"); + color: govuk-colour("white"); + } + + &--bright-purple { + border: 2px solid govuk-colour("bright-purple"); + background-color: govuk-colour("bright-purple"); + color: govuk-colour("white"); + } + + &--red, + &--error { + border: 2px solid govuk-colour("red"); + background-color: govuk-colour("red"); + color: govuk-colour("white"); + } + + &--green, + &--success { + border: 2px solid govuk-colour("green"); + background-color: govuk-colour("green"); + color: govuk-colour("white"); + } + + &--blue, + &--information { + border: 2px solid govuk-colour("blue"); + background-color: govuk-colour("blue"); + color: govuk-colour("white"); + } + + &--black { + border: 2px solid govuk-colour("black"); + background-color: govuk-colour("black"); + color: govuk-colour("white"); + } + + &--grey { + border: 2px solid govuk-colour("dark-grey"); + background-color: govuk-colour("dark-grey"); + color: govuk-colour("white"); + } + +} diff --git a/package/moj/components/task-list/README.md b/package/moj/components/task-list/README.md new file mode 100644 index 00000000..e8487f5a --- /dev/null +++ b/package/moj/components/task-list/README.md @@ -0,0 +1,87 @@ +# Task list + +- [Guidance](https://moj-design-system.herokuapp.com/components/task-list) +- [Preview](https://moj-frontend.herokuapp.com/components/task-list) + +## Example + +``` +{{ mojTaskList({ + sections: [ + { + heading: { + text: 'Section 1' + }, + items: [{ + text: 'Item 1.1', + href: '#', + complete: true + }, { + text: 'Item 1.2', + href: '#' + }, { + text: 'Item 1.3', + href: '#' + }] + }, + { + heading: { + text: 'Section 2' + }, + items: [{ + text: 'Item 2.1', + href: '#' + }, { + text: 'Item 2.2', + href: '#' + }, { + text: 'Item 2.3', + href: '#' + }] + } + ] +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|sections|array|No|An array of section objects containing task list items. See [sections](#sections).| +|classes|string|No|Classes to add to the `nav` container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the `ol` container.| + +### Sections + +|Name|Type|Required|Description| +|---|---|---|---| +|items|array|Yes|An array of task list item objects. See [items](#items).| +|heading|object|Yes|See [heading](#headings)| +|attributes|object|No|HTML attributes (for example data attributes) to add to the section `li`.| + +#### Headings + +|Name|Type|Required|Description| +|---|---|---|---| +|headingLevel|numeric|No|A number for the heading level. Defaults to 2 (`

`)| +|text|string|Yes|If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.| +|classes|string|No|Classes to add to the heading.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the item anchor.| + +#### Items + +|Name|Type|Required|Description| +|---|---|---|---| +|href|string|Yes|URL of the item anchor. Both href and text attributes for items need to be provided to create an item.| +|text|string|Yes|If `html` is set, this is not required. Text to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the anchor. If `html` is provided, the `text` argument will be ignored.| +|complete|boolean|No|Flag to mark the item as complete or not. Defaults to `false`.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the item anchor.| + + +*Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).* \ No newline at end of file diff --git a/package/moj/components/task-list/_task-list.scss b/package/moj/components/task-list/_task-list.scss new file mode 100644 index 00000000..8cfe82d9 --- /dev/null +++ b/package/moj/components/task-list/_task-list.scss @@ -0,0 +1,68 @@ +/* ========================================================================== + #TASK LIST + ========================================================================== */ + +.moj-task-list { + list-style-type: none; + padding-left: 0; + margin-top: 0; + margin-bottom: 0; + @include govuk-media-query($from: tablet) { + min-width: 550px; + } +} + +.moj-task-list__section { + display: table; + @include govuk-font($size:24, $weight: bold); +} + +.moj-task-list__section-number { + display: table-cell; + + @include govuk-media-query($from: tablet) { + min-width: govuk-spacing(6); + padding-right: 0; + } +} + +.moj-task-list__items { + @include govuk-font($size: 19); + @include govuk-responsive-margin(9, "bottom"); + list-style: none; + padding-left: 0; + @include govuk-media-query($from: tablet) { + padding-left: govuk-spacing(6); + } +} + +.moj-task-list__item { + border-bottom: 1px solid $govuk-border-colour; + margin-bottom: 0 !important; + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + @include govuk-clearfix; +} + +.moj-task-list__item:first-child { + border-top: 1px solid $govuk-border-colour; +} + +.moj-task-list__task-name { + display: block; + @include govuk-media-query($from: 450px) { + float: left; + width: 75%; + } +} + +.moj-task-list__task-completed { + margin-top: govuk-spacing(2); + margin-bottom: govuk-spacing(1); + + @include govuk-media-query($from: 450px) { + float: right; + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/package/moj/components/task-list/macro.njk b/package/moj/components/task-list/macro.njk new file mode 100644 index 00000000..dfad4177 --- /dev/null +++ b/package/moj/components/task-list/macro.njk @@ -0,0 +1,3 @@ +{% macro mojTaskList(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/task-list/template.njk b/package/moj/components/task-list/template.njk new file mode 100644 index 00000000..1ee3a38a --- /dev/null +++ b/package/moj/components/task-list/template.njk @@ -0,0 +1,25 @@ +{%- from "govuk/components/tag/macro.njk" import govukTag -%} +
    + {%- for section in params.sections %} +
  1. + + {{ loop.index }}. {{- section.heading.html | safe if section.heading.html else section.heading.text -}} + + +
    2. + {% endfor -%} +
\ No newline at end of file diff --git a/package/moj/components/timeline/README.md b/package/moj/components/timeline/README.md new file mode 100755 index 00000000..70892d91 --- /dev/null +++ b/package/moj/components/timeline/README.md @@ -0,0 +1,150 @@ +# Timeline + +- [Guidance](https://moj-design-system.herokuapp.com/components/timeline) +- [Preview](https://moj-frontend.herokuapp.com/components/timeline) + +### Installation + +You will need to install the following code at the bottom of `server.js`, just above `module.exports = app;` + +``` +// Add filters from MOJ Frontend +let mojFilters = require('./node_modules/@ministryofjustice/frontend/filters/all')(); +mojFilters = Object.assign(mojFilters); +Object.keys(mojFilters).forEach(function (filterName) { + nunjucksAppEnv.addFilter(filterName, mojFilters[filterName]) +}); +``` + +## Example +Below is a typical example of the timeline component in use. + +``` +{{ mojTimeline({ + items: [ + { + label: { + text: "Application requires confirmation" + }, + html: confirmationHtml, + datetime: { + timestamp: "2019-06-14T14:01:00.000Z", + type: "datetime" + }, + byline: { + text: "Joe Bloggs" + } + }, + { + label: { + text: "Application review in progress" + }, + text: "Your application is being reviewed by one of our case workers.", + datetime: { + timestamp: "2019-06-07T12:32:00.000Z", + type: "datetime" + }, + byline: { + text: "Caseworker 1" + } + }, + { + label: { + text: "Application received" + }, + text: "Your application has been received – reference MOJ-1234-5678", + datetime: { + timestamp: "2019-06-06T09:12:00.000Z", + type: "datetime" + }, + byline: { + text: "Caseworker 1" + } + }, + { + label: { + text: "Application submitted" + }, + html: detailsHtml, + datetime: { + timestamp: "2019-05-28T10:45:00.000Z", + type: "datetime" + }, + byline: { + text: "Joe Bloggs" + } + }, + { + label: { + text: "Documents uploaded" + }, + html: documentsHtml, + datetime: { + timestamp: "2019-05-28T10:15:00.000Z", + type: "datetime" + }, + byline: { + text: "Joe Bloggs" + } + }, + { + label: { + text: "Application started" + }, + html: listHtml, + datetime: { + timestamp: "2019-05-21T13:15:00.000Z", + type: "datetime" + }, + byline: { + text: "Joe Bloggs" + } + } + ] +}) }} +``` + +## Arguments + +This component accepts the following arguments. + +### Container + +|Name|Type|Required|Description| +|---|---|---|---| +|classes|string|No|Classes to add to the timeline's container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container.| + +### Items + +|Name|Type|Required|Description| +|---|---|---|---| +|label|object|Yes|See [item label](#itemlabel).| +|text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.| +|datetime|object|No|See [item date and time](#itemdatetime).| +|byline|object|No|See [item byline](#itembyline).| +|classes|string|No|Classes to add to the timeline's items container.| +|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's items container.| + +#### Item label + +|Name|Type|Required|Description| +|---|---|---|---| +|text|string|Yes|If `html` is set, this is not required. Text to use within the item label. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the item label. If `html` is provided, the `text` argument will be ignored.| + +#### Item datetime + +|Name|Type|Required|Description| +|---|---|---|---| +|timestamp|string|Yes|A valid datetime string to be formatted. For example: `1970-01-01T11:59:59.000Z`| +|type|string|Yes|If `format` is set, this is not required. The standard date format to use within the item. If `type` is provided, the `format` argument will be ignored. Values include: `datetime`, `shortdatetime`, `date`, `shortdate` and `time`| +|format|string|Yes|If `type` is set, this is not required. The user-defined date format to use within the item. If `type` is provided, the `format` argument will be ignored. See the [Moment.js document on display formats](https://momentjs.com/docs/).| + +#### Item byline + +|Name|Type|Required|Description| +|---|---|---|---| +|text|string|Yes|If `html` is set, this is not required. Text to use within the item byline. If `html` is provided, the `text` argument will be ignored.| +|html|string|Yes|If `text` is set, this is not required. HTML to use within the item byline. If `html` is provided, the `text` argument will be ignored.| diff --git a/package/moj/components/timeline/_timeline.scss b/package/moj/components/timeline/_timeline.scss new file mode 100755 index 00000000..0073c75b --- /dev/null +++ b/package/moj/components/timeline/_timeline.scss @@ -0,0 +1,104 @@ +/* ========================================================================== + #TIMELINE + ========================================================================== */ + +.moj-timeline { + margin-bottom: govuk-spacing(4); + overflow: hidden; + position: relative; + + &:before { + background-color: $govuk-brand-colour; + content: ""; + height: 100%; + left: 0; + position: absolute; + top: govuk-spacing(2); + width: 5px; + } + +} + +.moj-timeline--full { + margin-bottom: 0; + &:before { + height: calc(100% - 75px); + } +} + +.moj-timeline__item { + padding-bottom: govuk-spacing(6); + padding-left: govuk-spacing(4); + position: relative; + + &:before { + background-color: $govuk-brand-colour; + content: ""; + height: 5px; + left: 0; + position: absolute; + top: govuk-spacing(2); + width: 15px; + } + +} + +.moj-timeline__title { + @include govuk-font($size: 19, $weight: bold); + display: inline; +} + +.moj-timeline__byline { + @include govuk-font($size: 19); + color: $govuk-secondary-text-colour; + display: inline; + margin: 0; +} + +.moj-timeline__date { + @include govuk-font($size: 16); + margin-top: govuk-spacing(1); + margin-bottom: 0; +} + +.moj-timeline__description { + @include govuk-font($size: 19); + margin-top: govuk-spacing(4); +} + +/* ========================================================================== + #TIMELINE DOCUMENT STYLES – FOR BACKWARDS COMPATIBILITY + ========================================================================== */ + +.moj-timeline__documents { + list-style: none; + margin-bottom: 0; + padding-left: 0; +} + +.moj-timeline__document-item { + margin-bottom: govuk-spacing(1); + + &:last-child { + margin-bottom: 0; + } + +} + +.moj-timeline__document-link { + background-image: url(#{$moj-images-path}icon-document.svg); + background-repeat: no-repeat; + background-size: 20px 16px; + background-position: 0 50%; + padding-left: govuk-spacing(5); + + &:focus { + color: govuk-colour("black"); // Focus colour on yellow should really be black. + } + + // IE8 does not support box shadow, so use a standard border. + @include govuk-if-ie8 { + background-image: url(#{$moj-images-path}icon-document.png); + } + +} diff --git a/package/moj/components/timeline/macro.njk b/package/moj/components/timeline/macro.njk new file mode 100755 index 00000000..22c53cc8 --- /dev/null +++ b/package/moj/components/timeline/macro.njk @@ -0,0 +1,3 @@ +{% macro mojTimeline(params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/package/moj/components/timeline/template.njk b/package/moj/components/timeline/template.njk new file mode 100755 index 00000000..b9fc74f9 --- /dev/null +++ b/package/moj/components/timeline/template.njk @@ -0,0 +1,32 @@ +
+ + {%- for item in params.items %} +
+ +
+ + {{- item.label.html | safe if item.label.html else item.label.text -}} + + {% if item.byline %} +

by {{ item.byline.html | safe if item.byline.html else item.byline.text }}

+ {% endif %} +
+ +

+ +

+ +
+ {{- item.html | safe if item.html else item.text -}} +
+ +
+ {% endfor -%} + +
\ No newline at end of file diff --git a/package/moj/filters/all.js b/package/moj/filters/all.js new file mode 100644 index 00000000..292604be --- /dev/null +++ b/package/moj/filters/all.js @@ -0,0 +1,69 @@ +const moment = require('moment'); + +module.exports = function () { + /** + * Instantiate object used to store the methods registered as a + * 'filter' (of the same name) within nunjucks. You can override + * gov.uk core filters by creating filter methods of the same name. + * @type {Object} + */ + let filters = {} + + /* ------------------------------------------------------------------ + date filter for use in Nunjucks + example: {{ params.date | date("DD/MM/YYYY") }} + outputs: 01/01/1970 + ------------------------------------------------------------------ */ + filters.date = function(timestamp, format) { + return moment(timestamp).format(format); + } + + /* ------------------------------------------------------------------ + utility functions for use in mojDate function/filter + ------------------------------------------------------------------ */ + function govDate(timestamp) { + return moment(timestamp).format('D MMMM YYYY'); + } + + function govShortDate(timestamp) { + return moment(timestamp).format('D MMM YYYY'); + } + + function govTime(timestamp) { + let t = moment(timestamp); + if(t.minutes() > 0) { + return t.format('h:mma'); + } else { + return t.format('ha'); + } + } + + /* ------------------------------------------------------------------ + standard dates for use in Nunjucks, + example: {{ params.date | mojDate("datetime") }} + outputs: 1 Jan 1970 at 1:32pm + ------------------------------------------------------------------ */ + filters.mojDate = function(timestamp, type) { + + switch(type) { + case "datetime": + return govDate(timestamp) + " at " + govTime(timestamp); + case "shortdatetime": + return govShortDate(timestamp) + " at " + govTime(timestamp); + case "date": + return govDate(timestamp); + case "shortdate": + return govShortDate(timestamp); + case "time": + return govTime(timestamp); + default: + return timestamp; + } + + } + + /* ------------------------------------------------------------------ + keep the following line to return your filters to the app + ------------------------------------------------------------------ */ + return filters; +} diff --git a/package/moj/helpers.js b/package/moj/helpers.js new file mode 100755 index 00000000..cd2a965a --- /dev/null +++ b/package/moj/helpers.js @@ -0,0 +1,42 @@ +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); + } + } +}; + +MOJFrontend.dragAndDropSupported = function() { + var div = document.createElement('div'); + return typeof div.ondrop != 'undefined'; +}; + +MOJFrontend.formDataSupported = function() { + return typeof FormData == 'function'; +}; + +MOJFrontend.fileApiSupported = function() { + var input = document.createElement('input'); + input.type = 'file'; + return typeof input.files != 'undefined'; +}; \ No newline at end of file diff --git a/package/moj/helpers/_all.scss b/package/moj/helpers/_all.scss new file mode 100755 index 00000000..48acab9b --- /dev/null +++ b/package/moj/helpers/_all.scss @@ -0,0 +1 @@ +@import "hidden"; diff --git a/package/moj/helpers/_hidden.scss b/package/moj/helpers/_hidden.scss new file mode 100755 index 00000000..1e004971 --- /dev/null +++ b/package/moj/helpers/_hidden.scss @@ -0,0 +1,3 @@ +@mixin moj-hidden() { + display: none; +} \ No newline at end of file diff --git a/package/moj/namespace.js b/package/moj/namespace.js new file mode 100755 index 00000000..26d111b2 --- /dev/null +++ b/package/moj/namespace.js @@ -0,0 +1 @@ +var MOJFrontend = {}; \ No newline at end of file diff --git a/package/moj/objects/_all.scss b/package/moj/objects/_all.scss new file mode 100755 index 00000000..e8075f6b --- /dev/null +++ b/package/moj/objects/_all.scss @@ -0,0 +1,3 @@ +@import "width-container"; +@import "filter-layout"; +@import "scrollable-pane"; diff --git a/package/moj/objects/_filter-layout.scss b/package/moj/objects/_filter-layout.scss new file mode 100755 index 00000000..a62b7d17 --- /dev/null +++ b/package/moj/objects/_filter-layout.scss @@ -0,0 +1,32 @@ +.moj-filter-layout { + @include govuk-clearfix; +} + +.moj-filter-layout__filter { + box-shadow: inset 0 0 0 1px govuk-colour("light-grey"); // Extends the inset border left full height of the filters on mobile + + @include govuk-media-query(desktop) { + float: left; + margin-right: govuk-spacing(7); + max-width: 385px; + min-width: 260px; + width: 100%; + } +} + +// Filters with javascript enabled +@include govuk-media-query($until: desktop) { + + .js-enabled .moj-filter-layout__filter { + background-color: govuk-colour("white"); + position: fixed; top: 0; right: 0; bottom: 0; + overflow-y: scroll; + z-index: 100; + } + +} + +.moj-filter-layout__content { + overflow: hidden; + overflow-x: auto; +} \ No newline at end of file diff --git a/package/moj/objects/_scrollable-pane.scss b/package/moj/objects/_scrollable-pane.scss new file mode 100755 index 00000000..182717c0 --- /dev/null +++ b/package/moj/objects/_scrollable-pane.scss @@ -0,0 +1,46 @@ +.moj-scrollable-pane { + + @include govuk-media-query($until: 1020px) { + position: relative; + overflow: hidden; // Hides the shadow + clear: both; // Fixes render bug + // width: 100% // Fixes render bug + + &:after { + position: absolute; + top: 0; + left: 100%; + width: 50px; + height: 100%; + border-radius: 10px 0 0 10px / 50% 0 0 50%; + box-shadow: -5px 0 10px rgba(0, 0, 0, 0.25); + content:""; + } + } + +} + +@include govuk-media-query($until: 1020px) { + .moj-scrollable-pane__wrapper { + overflow-x: auto; + } + + .moj-scrollable-pane__wrapper .govuk-table__header, + .moj-scrollable-pane__wrapper .govuk-table__cell { + white-space: nowrap; + } + + .moj-scrollable-pane > div::-webkit-scrollbar { + height: 10px; // Match GOVUK spacing units + } + + .moj-scrollable-pane > div::-webkit-scrollbar-track { + background: govuk-colour("light-grey"); + box-shadow: 0 0 2px rgba(0,0,0,.15) inset; // Simulate scrollbar look and feel + } + + .moj-scrollable-pane > div::-webkit-scrollbar-thumb { + background: govuk-colour("dark-grey"); + border-radius: govuk-spacing(1); + } +} \ No newline at end of file diff --git a/package/moj/objects/_width-container.scss b/package/moj/objects/_width-container.scss new file mode 100755 index 00000000..393efcee --- /dev/null +++ b/package/moj/objects/_width-container.scss @@ -0,0 +1,22 @@ +@mixin moj-width-container($width: $moj-page-width) { + // Limit the width of the container to the page width + max-width: $width; + + @include govuk-if-ie8 { + width: $width; + } + + // On mobile, add half width gutters + margin: 0 $moj-gutter-half; + + // On tablet, add full width gutters + @include govuk-media-query($from: tablet) { + margin: 0 $moj-gutter; + } + + // As soon as the viewport is greater than the width of the page plus the + // gutters, just centre the content instead of adding gutters. + @include govuk-media-query($and: "(min-width: #{($width + $moj-gutter * 2)})") { + margin: 0 auto; + } +} \ No newline at end of file diff --git a/package/moj/settings/_all.scss b/package/moj/settings/_all.scss new file mode 100755 index 00000000..82de2414 --- /dev/null +++ b/package/moj/settings/_all.scss @@ -0,0 +1,3 @@ +@import "assets"; +@import "measurements"; +@import "colours"; diff --git a/package/moj/settings/_assets.scss b/package/moj/settings/_assets.scss new file mode 100755 index 00000000..cdfa8cca --- /dev/null +++ b/package/moj/settings/_assets.scss @@ -0,0 +1,9 @@ +/* ========================================================================== + #ASSETS + ========================================================================== */ + +// Assets folder +$moj-assets-path: "/assets/" !default; + +// Path the images folder +$moj-images-path: "#{$moj-assets-path}images/" !default; diff --git a/package/moj/settings/_colours.scss b/package/moj/settings/_colours.scss new file mode 100755 index 00000000..dc7a1630 --- /dev/null +++ b/package/moj/settings/_colours.scss @@ -0,0 +1,9 @@ +/* ========================================================================== + #COLOURS + ========================================================================== */ + +$moj-border-color: rgb(161, 172, 178); +$moj-secondary-text-color: rgb(69, 74, 76); + +$moj-secondary-link-color: rgb(69, 74, 76); +$moj-secondary-link-hover-color: rgb(23, 24, 25); diff --git a/package/moj/settings/_measurements.scss b/package/moj/settings/_measurements.scss new file mode 100755 index 00000000..b76438fa --- /dev/null +++ b/package/moj/settings/_measurements.scss @@ -0,0 +1,14 @@ +/* ========================================================================== + #MEASUREMENTS + ========================================================================== */ + +// Width of main container +$moj-page-width: 960px !default; + + +// Width of gutter between grid columns +$moj-gutter: 30px !default; + + +// Width of half the gutter between grid columns +$moj-gutter-half: $moj-gutter / 2; diff --git a/package/moj/utilities/_all.scss b/package/moj/utilities/_all.scss new file mode 100755 index 00000000..e9a58b43 --- /dev/null +++ b/package/moj/utilities/_all.scss @@ -0,0 +1,2 @@ +@import "hidden"; +@import "width-container"; diff --git a/package/moj/utilities/_hidden.scss b/package/moj/utilities/_hidden.scss new file mode 100755 index 00000000..2251d612 --- /dev/null +++ b/package/moj/utilities/_hidden.scss @@ -0,0 +1,7 @@ +.js-enabled .moj-js-hidden { + @include moj-hidden(); +} + +.moj-hidden { + @include moj-hidden(); +} \ No newline at end of file diff --git a/package/moj/utilities/_width-container.scss b/package/moj/utilities/_width-container.scss new file mode 100755 index 00000000..67a7cc34 --- /dev/null +++ b/package/moj/utilities/_width-container.scss @@ -0,0 +1,3 @@ +.moj-width-container { + @include moj-width-container; +} \ No newline at end of file diff --git a/package/moj/vendor/html5shiv.js b/package/moj/vendor/html5shiv.js new file mode 100755 index 00000000..45ea723d --- /dev/null +++ b/package/moj/vendor/html5shiv.js @@ -0,0 +1,326 @@ +/** +* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed +*/ +;(function(window, document) { +/*jshint evil:true */ + /** version */ + var version = '3.7.3'; + + /** Preset options */ + var options = window.html5 || {}; + + /** Used to skip problem elements */ + var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; + + /** Not all elements can be cloned in IE **/ + var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; + + /** Detect whether the browser supports default html5 styles */ + var supportsHtml5Styles; + + /** Name of the expando, to work with multiple documents or to re-shiv one document */ + var expando = '_html5shiv'; + + /** The id for the the documents expando */ + var expanID = 0; + + /** Cached data for each document */ + var expandoData = {}; + + /** Detect whether the browser supports unknown elements */ + var supportsUnknownElements; + + (function() { + try { + var a = document.createElement('a'); + a.innerHTML = ''; + //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles + supportsHtml5Styles = ('hidden' in a); + + supportsUnknownElements = a.childNodes.length == 1 || (function() { + // assign a false positive if unable to shiv + (document.createElement)('a'); + var frag = document.createDocumentFragment(); + return ( + typeof frag.cloneNode == 'undefined' || + typeof frag.createDocumentFragment == 'undefined' || + typeof frag.createElement == 'undefined' + ); + }()); + } catch(e) { + // assign a false positive if detection fails => unable to shiv + supportsHtml5Styles = true; + supportsUnknownElements = true; + } + + }()); + + /*--------------------------------------------------------------------------*/ + + /** + * Creates a style sheet with the given CSS text and adds it to the document. + * @private + * @param {Document} ownerDocument The document. + * @param {String} cssText The CSS text. + * @returns {StyleSheet} The style element. + */ + function addStyleSheet(ownerDocument, cssText) { + var p = ownerDocument.createElement('p'), + parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement; + + p.innerHTML = 'x'; + return parent.insertBefore(p.lastChild, parent.firstChild); + } + + /** + * Returns the value of `html5.elements` as an array. + * @private + * @returns {Array} An array of shived element node names. + */ + function getElements() { + var elements = html5.elements; + return typeof elements == 'string' ? elements.split(' ') : elements; + } + + /** + * Extends the built-in list of html5 elements + * @memberOf html5 + * @param {String|Array} newElements whitespace separated list or array of new element names to shiv + * @param {Document} ownerDocument The context document. + */ + function addElements(newElements, ownerDocument) { + var elements = html5.elements; + if(typeof elements != 'string'){ + elements = elements.join(' '); + } + if(typeof newElements != 'string'){ + newElements = newElements.join(' '); + } + html5.elements = elements +' '+ newElements; + shivDocument(ownerDocument); + } + + /** + * Returns the data associated to the given document + * @private + * @param {Document} ownerDocument The document. + * @returns {Object} An object of data. + */ + function getExpandoData(ownerDocument) { + var data = expandoData[ownerDocument[expando]]; + if (!data) { + data = {}; + expanID++; + ownerDocument[expando] = expanID; + expandoData[expanID] = data; + } + return data; + } + + /** + * returns a shived element for the given nodeName and document + * @memberOf html5 + * @param {String} nodeName name of the element + * @param {Document|DocumentFragment} ownerDocument The context document. + * @returns {Object} The shived element. + */ + function createElement(nodeName, ownerDocument, data){ + if (!ownerDocument) { + ownerDocument = document; + } + if(supportsUnknownElements){ + return ownerDocument.createElement(nodeName); + } + if (!data) { + data = getExpandoData(ownerDocument); + } + var node; + + if (data.cache[nodeName]) { + node = data.cache[nodeName].cloneNode(); + } else if (saveClones.test(nodeName)) { + node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); + } else { + node = data.createElem(nodeName); + } + + // Avoid adding some elements to fragments in IE < 9 because + // * Attributes like `name` or `type` cannot be set/changed once an element + // is inserted into a document/fragment + // * Link elements with `src` attributes that are inaccessible, as with + // a 403 response, will cause the tab/window to crash + // * Script elements appended to fragments will execute when their `src` + // or `text` property is set + return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node; + } + + /** + * returns a shived DocumentFragment for the given document + * @memberOf html5 + * @param {Document} ownerDocument The context document. + * @returns {Object} The shived DocumentFragment. + */ + function createDocumentFragment(ownerDocument, data){ + if (!ownerDocument) { + ownerDocument = document; + } + if(supportsUnknownElements){ + return ownerDocument.createDocumentFragment(); + } + data = data || getExpandoData(ownerDocument); + var clone = data.frag.cloneNode(), + i = 0, + elems = getElements(), + l = elems.length; + for(;i to avoid XSS via location.hash (#9521) + quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/, + + // Check if a string has a non-whitespace character in it + rnotwhite = /\S/, + + // Used for trimming whitespace + trimLeft = /^\s+/, + trimRight = /\s+$/, + + // Check for digits + rdigit = /\d/, + + // Match a standalone tag + rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, + + // JSON RegExp + rvalidchars = /^[\],:{}\s]*$/, + rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, + rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, + rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g, + + // Useragent RegExp + rwebkit = /(webkit)[ \/]([\w.]+)/, + ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, + rmsie = /(msie) ([\w.]+)/, + rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/, + + // Matches dashed string for camelizing + rdashAlpha = /-([a-z]|[0-9])/ig, + rmsPrefix = /^-ms-/, + + // Used by jQuery.camelCase as callback to replace() + fcamelCase = function( all, letter ) { + return ( letter + "" ).toUpperCase(); + }, + + // Keep a UserAgent string for use with jQuery.browser + userAgent = navigator.userAgent, + + // For matching the engine and version of the browser + browserMatch, + + // The deferred used on DOM ready + readyList, + + // The ready event handler + DOMContentLoaded, + + // Save a reference to some core methods + toString = Object.prototype.toString, + hasOwn = Object.prototype.hasOwnProperty, + push = Array.prototype.push, + slice = Array.prototype.slice, + trim = String.prototype.trim, + indexOf = Array.prototype.indexOf, + + // [[Class]] -> type pairs + class2type = {}; + + jQuery.fn = jQuery.prototype = { + constructor: jQuery, + init: function( selector, context, rootjQuery ) { + var match, elem, ret, doc; + + // Handle $(""), $(null), or $(undefined) + if ( !selector ) { + return this; + } + + // Handle $(DOMElement) + if ( selector.nodeType ) { + this.context = this[0] = selector; + this.length = 1; + return this; + } + + // The body element only exists once, optimize finding it + if ( selector === "body" && !context && document.body ) { + this.context = document; + this[0] = document.body; + this.selector = selector; + this.length = 1; + return this; + } + + // Handle HTML strings + if ( typeof selector === "string" ) { + // Are we dealing with HTML string or an ID? + if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { + // Assume that strings that start and end with <> are HTML and skip the regex check + match = [ null, selector, null ]; + + } else { + match = quickExpr.exec( selector ); + } + + // Verify a match, and that no context was specified for #id + if ( match && (match[1] || !context) ) { + + // HANDLE: $(html) -> $(array) + if ( match[1] ) { + context = context instanceof jQuery ? context[0] : context; + doc = ( context ? context.ownerDocument || context : document ); + + // If a single string is passed in and it's a single tag + // just do a createElement and skip the rest + ret = rsingleTag.exec( selector ); + + if ( ret ) { + if ( jQuery.isPlainObject( context ) ) { + selector = [ document.createElement( ret[1] ) ]; + jQuery.fn.attr.call( selector, context, true ); + + } else { + selector = [ doc.createElement( ret[1] ) ]; + } + + } else { + ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); + selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes; + } + + return jQuery.merge( this, selector ); + + // HANDLE: $("#id") + } else { + elem = document.getElementById( match[2] ); + + // Check parentNode to catch when Blackberry 4.6 returns + // nodes that are no longer in the document #6963 + if ( elem && elem.parentNode ) { + // Handle the case where IE and Opera return items + // by name instead of ID + if ( elem.id !== match[2] ) { + return rootjQuery.find( selector ); + } + + // Otherwise, we inject the element directly into the jQuery object + this.length = 1; + this[0] = elem; + } + + this.context = document; + this.selector = selector; + return this; + } + + // HANDLE: $(expr, $(...)) + } else if ( !context || context.jquery ) { + return ( context || rootjQuery ).find( selector ); + + // HANDLE: $(expr, context) + // (which is just equivalent to: $(context).find(expr) + } else { + return this.constructor( context ).find( selector ); + } + + // HANDLE: $(function) + // Shortcut for document ready + } else if ( jQuery.isFunction( selector ) ) { + return rootjQuery.ready( selector ); + } + + if ( selector.selector !== undefined ) { + this.selector = selector.selector; + this.context = selector.context; + } + + return jQuery.makeArray( selector, this ); + }, + + // Start with an empty selector + selector: "", + + // The current version of jQuery being used + jquery: "1.7", + + // The default length of a jQuery object is 0 + length: 0, + + // The number of elements contained in the matched element set + size: function() { + return this.length; + }, + + toArray: function() { + return slice.call( this, 0 ); + }, + + // Get the Nth element in the matched element set OR + // Get the whole matched element set as a clean array + get: function( num ) { + return num == null ? + + // Return a 'clean' array + this.toArray() : + + // Return just the object + ( num < 0 ? this[ this.length + num ] : this[ num ] ); + }, + + // Take an array of elements and push it onto the stack + // (returning the new matched element set) + pushStack: function( elems, name, selector ) { + // Build a new jQuery matched element set + var ret = this.constructor(); + + if ( jQuery.isArray( elems ) ) { + push.apply( ret, elems ); + + } else { + jQuery.merge( ret, elems ); + } + + // Add the old object onto the stack (as a reference) + ret.prevObject = this; + + ret.context = this.context; + + if ( name === "find" ) { + ret.selector = this.selector + ( this.selector ? " " : "" ) + selector; + } else if ( name ) { + ret.selector = this.selector + "." + name + "(" + selector + ")"; + } + + // Return the newly-formed element set + return ret; + }, + + // Execute a callback for every element in the matched set. + // (You can seed the arguments with an array of args, but this is + // only used internally.) + each: function( callback, args ) { + return jQuery.each( this, callback, args ); + }, + + ready: function( fn ) { + // Attach the listeners + jQuery.bindReady(); + + // Add the callback + readyList.add( fn ); + + return this; + }, + + eq: function( i ) { + return i === -1 ? + this.slice( i ) : + this.slice( i, +i + 1 ); + }, + + first: function() { + return this.eq( 0 ); + }, + + last: function() { + return this.eq( -1 ); + }, + + slice: function() { + return this.pushStack( slice.apply( this, arguments ), + "slice", slice.call(arguments).join(",") ); + }, + + map: function( callback ) { + return this.pushStack( jQuery.map(this, function( elem, i ) { + return callback.call( elem, i, elem ); + })); + }, + + end: function() { + return this.prevObject || this.constructor(null); + }, + + // For internal use only. + // Behaves like an Array's method, not like a jQuery method. + push: push, + sort: [].sort, + splice: [].splice + }; + + // Give the init function the jQuery prototype for later instantiation + jQuery.fn.init.prototype = jQuery.fn; + + jQuery.extend = jQuery.fn.extend = function() { + var options, name, src, copy, copyIsArray, clone, + target = arguments[0] || {}, + i = 1, + length = arguments.length, + deep = false; + + // Handle a deep copy situation + if ( typeof target === "boolean" ) { + deep = target; + target = arguments[1] || {}; + // skip the boolean and the target + i = 2; + } + + // Handle case when target is a string or something (possible in deep copy) + if ( typeof target !== "object" && !jQuery.isFunction(target) ) { + target = {}; + } + + // extend jQuery itself if only one argument is passed + if ( length === i ) { + target = this; + --i; + } + + for ( ; i < length; i++ ) { + // Only deal with non-null/undefined values + if ( (options = arguments[ i ]) != null ) { + // Extend the base object + for ( name in options ) { + src = target[ name ]; + copy = options[ name ]; + + // Prevent never-ending loop + if ( target === copy ) { + continue; + } + + // Recurse if we're merging plain objects or arrays + if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { + if ( copyIsArray ) { + copyIsArray = false; + clone = src && jQuery.isArray(src) ? src : []; + + } else { + clone = src && jQuery.isPlainObject(src) ? src : {}; + } + + // Never move original objects, clone them + target[ name ] = jQuery.extend( deep, clone, copy ); + + // Don't bring in undefined values + } else if ( copy !== undefined ) { + target[ name ] = copy; + } + } + } + } + + // Return the modified object + return target; + }; + + jQuery.extend({ + noConflict: function( deep ) { + if ( window.$ === jQuery ) { + window.$ = _$; + } + + if ( deep && window.jQuery === jQuery ) { + window.jQuery = _jQuery; + } + + return jQuery; + }, + + // Is the DOM ready to be used? Set to true once it occurs. + isReady: false, + + // A counter to track how many items to wait for before + // the ready event fires. See #6781 + readyWait: 1, + + // Hold (or release) the ready event + holdReady: function( hold ) { + if ( hold ) { + jQuery.readyWait++; + } else { + jQuery.ready( true ); + } + }, + + // Handle when the DOM is ready + ready: function( wait ) { + // Either a released hold or an DOMready/load event and not yet ready + if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) { + // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). + if ( !document.body ) { + return setTimeout( jQuery.ready, 1 ); + } + + // Remember that the DOM is ready + jQuery.isReady = true; + + // If a normal DOM Ready event fired, decrement, and wait if need be + if ( wait !== true && --jQuery.readyWait > 0 ) { + return; + } + + // If there are functions bound, to execute + readyList.fireWith( document, [ jQuery ] ); + + // Trigger any bound ready events + if ( jQuery.fn.trigger ) { + jQuery( document ).trigger( "ready" ).unbind( "ready" ); + } + } + }, + + bindReady: function() { + if ( readyList ) { + return; + } + + readyList = jQuery.Callbacks( "once memory" ); + + // Catch cases where $(document).ready() is called after the + // browser event has already occurred. + if ( document.readyState === "complete" ) { + // Handle it asynchronously to allow scripts the opportunity to delay ready + return setTimeout( jQuery.ready, 1 ); + } + + // Mozilla, Opera and webkit nightlies currently support this event + if ( document.addEventListener ) { + // Use the handy event callback + document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); + + // A fallback to window.onload, that will always work + window.addEventListener( "load", jQuery.ready, false ); + + // If IE event model is used + } else if ( document.attachEvent ) { + // ensure firing before onload, + // maybe late but safe also for iframes + document.attachEvent( "onreadystatechange", DOMContentLoaded ); + + // A fallback to window.onload, that will always work + window.attachEvent( "onload", jQuery.ready ); + + // If IE and not a frame + // continually check to see if the document is ready + var toplevel = false; + + try { + toplevel = window.frameElement == null; + } catch(e) {} + + if ( document.documentElement.doScroll && toplevel ) { + doScrollCheck(); + } + } + }, + + // See test/unit/core.js for details concerning isFunction. + // Since version 1.3, DOM methods and functions like alert + // aren't supported. They return false on IE (#2968). + isFunction: function( obj ) { + return jQuery.type(obj) === "function"; + }, + + isArray: Array.isArray || function( obj ) { + return jQuery.type(obj) === "array"; + }, + + // A crude way of determining if an object is a window + isWindow: function( obj ) { + return obj && typeof obj === "object" && "setInterval" in obj; + }, + + isNumeric: function( obj ) { + return obj != null && rdigit.test( obj ) && !isNaN( obj ); + }, + + type: function( obj ) { + return obj == null ? + String( obj ) : + class2type[ toString.call(obj) ] || "object"; + }, + + isPlainObject: function( obj ) { + // Must be an Object. + // Because of IE, we also have to check the presence of the constructor property. + // Make sure that DOM nodes and window objects don't pass through, as well + if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) { + return false; + } + + try { + // Not own constructor property must be Object + if ( obj.constructor && + !hasOwn.call(obj, "constructor") && + !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) { + return false; + } + } catch ( e ) { + // IE8,9 Will throw exceptions on certain host objects #9897 + return false; + } + + // Own properties are enumerated firstly, so to speed up, + // if last one is own, then all properties are own. + + var key; + for ( key in obj ) {} + + return key === undefined || hasOwn.call( obj, key ); + }, + + isEmptyObject: function( obj ) { + for ( var name in obj ) { + return false; + } + return true; + }, + + error: function( msg ) { + throw msg; + }, + + parseJSON: function( data ) { + if ( typeof data !== "string" || !data ) { + return null; + } + + // Make sure leading/trailing whitespace is removed (IE can't handle it) + data = jQuery.trim( data ); + + // Attempt to parse using the native JSON parser first + if ( window.JSON && window.JSON.parse ) { + return window.JSON.parse( data ); + } + + // Make sure the incoming data is actual JSON + // Logic borrowed from http://json.org/json2.js + if ( rvalidchars.test( data.replace( rvalidescape, "@" ) + .replace( rvalidtokens, "]" ) + .replace( rvalidbraces, "")) ) { + + return ( new Function( "return " + data ) )(); + + } + jQuery.error( "Invalid JSON: " + data ); + }, + + // Cross-browser xml parsing + parseXML: function( data ) { + var xml, tmp; + try { + if ( window.DOMParser ) { // Standard + tmp = new DOMParser(); + xml = tmp.parseFromString( data , "text/xml" ); + } else { // IE + xml = new ActiveXObject( "Microsoft.XMLDOM" ); + xml.async = "false"; + xml.loadXML( data ); + } + } catch( e ) { + xml = undefined; + } + if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) { + jQuery.error( "Invalid XML: " + data ); + } + return xml; + }, + + noop: function() {}, + + // Evaluates a script in a global context + // Workarounds based on findings by Jim Driscoll + // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context + globalEval: function( data ) { + if ( data && rnotwhite.test( data ) ) { + // We use execScript on Internet Explorer + // We use an anonymous function so that context is window + // rather than jQuery in Firefox + ( window.execScript || function( data ) { + window[ "eval" ].call( window, data ); + } )( data ); + } + }, + + // Convert dashed to camelCase; used by the css and data modules + // Microsoft forgot to hump their vendor prefix (#9572) + camelCase: function( string ) { + return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); + }, + + nodeName: function( elem, name ) { + return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase(); + }, + + // args is for internal usage only + each: function( object, callback, args ) { + var name, i = 0, + length = object.length, + isObj = length === undefined || jQuery.isFunction( object ); + + if ( args ) { + if ( isObj ) { + for ( name in object ) { + if ( callback.apply( object[ name ], args ) === false ) { + break; + } + } + } else { + for ( ; i < length; ) { + if ( callback.apply( object[ i++ ], args ) === false ) { + break; + } + } + } + + // A special, fast, case for the most common use of each + } else { + if ( isObj ) { + for ( name in object ) { + if ( callback.call( object[ name ], name, object[ name ] ) === false ) { + break; + } + } + } else { + for ( ; i < length; ) { + if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { + break; + } + } + } + } + + return object; + }, + + // Use native String.trim function wherever possible + trim: trim ? + function( text ) { + return text == null ? + "" : + trim.call( text ); + } : + + // Otherwise use our own trimming functionality + function( text ) { + return text == null ? + "" : + text.toString().replace( trimLeft, "" ).replace( trimRight, "" ); + }, + + // results is for internal usage only + makeArray: function( array, results ) { + var ret = results || []; + + if ( array != null ) { + // The window, strings (and functions) also have 'length' + // The extra typeof function check is to prevent crashes + // in Safari 2 (See: #3039) + // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930 + var type = jQuery.type( array ); + + if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) { + push.call( ret, array ); + } else { + jQuery.merge( ret, array ); + } + } + + return ret; + }, + + inArray: function( elem, array, i ) { + var len; + + if ( array ) { + if ( indexOf ) { + return indexOf.call( array, elem, i ); + } + + len = array.length; + i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0; + + for ( ; i < len; i++ ) { + // Skip accessing in sparse arrays + if ( i in array && array[ i ] === elem ) { + return i; + } + } + } + + return -1; + }, + + merge: function( first, second ) { + var i = first.length, + j = 0; + + if ( typeof second.length === "number" ) { + for ( var l = second.length; j < l; j++ ) { + first[ i++ ] = second[ j ]; + } + + } else { + while ( second[j] !== undefined ) { + first[ i++ ] = second[ j++ ]; + } + } + + first.length = i; + + return first; + }, + + grep: function( elems, callback, inv ) { + var ret = [], retVal; + inv = !!inv; + + // Go through the array, only saving the items + // that pass the validator function + for ( var i = 0, length = elems.length; i < length; i++ ) { + retVal = !!callback( elems[ i ], i ); + if ( inv !== retVal ) { + ret.push( elems[ i ] ); + } + } + + return ret; + }, + + // arg is for internal usage only + map: function( elems, callback, arg ) { + var value, key, ret = [], + i = 0, + length = elems.length, + // jquery objects are treated as arrays + isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; + + // Go through the array, translating each of the items to their + if ( isArray ) { + for ( ; i < length; i++ ) { + value = callback( elems[ i ], i, arg ); + + if ( value != null ) { + ret[ ret.length ] = value; + } + } + + // Go through every key on the object, + } else { + for ( key in elems ) { + value = callback( elems[ key ], key, arg ); + + if ( value != null ) { + ret[ ret.length ] = value; + } + } + } + + // Flatten any nested arrays + return ret.concat.apply( [], ret ); + }, + + // A global GUID counter for objects + guid: 1, + + // Bind a function to a context, optionally partially applying any + // arguments. + proxy: function( fn, context ) { + if ( typeof context === "string" ) { + var tmp = fn[ context ]; + context = fn; + fn = tmp; + } + + // Quick check to determine if target is callable, in the spec + // this throws a TypeError, but we will just return undefined. + if ( !jQuery.isFunction( fn ) ) { + return undefined; + } + + // Simulated bind + var args = slice.call( arguments, 2 ), + proxy = function() { + return fn.apply( context, args.concat( slice.call( arguments ) ) ); + }; + + // Set the guid of unique handler to the same of original handler, so it can be removed + proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; + + return proxy; + }, + + // Mutifunctional method to get and set values to a collection + // The value/s can optionally be executed if it's a function + access: function( elems, key, value, exec, fn, pass ) { + var length = elems.length; + + // Setting many attributes + if ( typeof key === "object" ) { + for ( var k in key ) { + jQuery.access( elems, k, key[k], exec, fn, value ); + } + return elems; + } + + // Setting one attribute + if ( value !== undefined ) { + // Optionally, function values get executed if exec is true + exec = !pass && exec && jQuery.isFunction(value); + + for ( var i = 0; i < length; i++ ) { + fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); + } + + return elems; + } + + // Getting an attribute + return length ? fn( elems[0], key ) : undefined; + }, + + now: function() { + return ( new Date() ).getTime(); + }, + + // Use of jQuery.browser is frowned upon. + // More details: http://docs.jquery.com/Utilities/jQuery.browser + uaMatch: function( ua ) { + ua = ua.toLowerCase(); + + var match = rwebkit.exec( ua ) || + ropera.exec( ua ) || + rmsie.exec( ua ) || + ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || + []; + + return { browser: match[1] || "", version: match[2] || "0" }; + }, + + sub: function() { + function jQuerySub( selector, context ) { + return new jQuerySub.fn.init( selector, context ); + } + jQuery.extend( true, jQuerySub, this ); + jQuerySub.superclass = this; + jQuerySub.fn = jQuerySub.prototype = this(); + jQuerySub.fn.constructor = jQuerySub; + jQuerySub.sub = this.sub; + jQuerySub.fn.init = function init( selector, context ) { + if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) { + context = jQuerySub( context ); + } + + return jQuery.fn.init.call( this, selector, context, rootjQuerySub ); + }; + jQuerySub.fn.init.prototype = jQuerySub.fn; + var rootjQuerySub = jQuerySub(document); + return jQuerySub; + }, + + browser: {} + }); + + // Populate the class2type map + jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { + class2type[ "[object " + name + "]" ] = name.toLowerCase(); + }); + + browserMatch = jQuery.uaMatch( userAgent ); + if ( browserMatch.browser ) { + jQuery.browser[ browserMatch.browser ] = true; + jQuery.browser.version = browserMatch.version; + } + + // Deprecated, use jQuery.browser.webkit instead + if ( jQuery.browser.webkit ) { + jQuery.browser.safari = true; + } + + // IE doesn't match non-breaking spaces with \s + if ( rnotwhite.test( "\xA0" ) ) { + trimLeft = /^[\s\xA0]+/; + trimRight = /[\s\xA0]+$/; + } + + // All jQuery objects should point back to these + rootjQuery = jQuery(document); + + // Cleanup functions for the document ready method + if ( document.addEventListener ) { + DOMContentLoaded = function() { + document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); + jQuery.ready(); + }; + + } else if ( document.attachEvent ) { + DOMContentLoaded = function() { + // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). + if ( document.readyState === "complete" ) { + document.detachEvent( "onreadystatechange", DOMContentLoaded ); + jQuery.ready(); + } + }; + } + + // The DOM ready check for Internet Explorer + function doScrollCheck() { + if ( jQuery.isReady ) { + return; + } + + try { + // If IE is used, use the trick by Diego Perini + // http://javascript.nwbox.com/IEContentLoaded/ + document.documentElement.doScroll("left"); + } catch(e) { + setTimeout( doScrollCheck, 1 ); + return; + } + + // and execute any waiting functions + jQuery.ready(); + } + + // Expose jQuery as an AMD module, but only for AMD loaders that + // understand the issues with loading multiple versions of jQuery + // in a page that all might call define(). The loader will indicate + // they have special allowances for multiple jQuery versions by + // specifying define.amd.jQuery = true. Register as a named module, + // since jQuery can be concatenated with other files that may use define, + // but not use a proper concatenation script that understands anonymous + // AMD modules. A named AMD is safest and most robust way to register. + // Lowercase jquery is used because AMD module names are derived from + // file names, and jQuery is normally delivered in a lowercase file name. + if ( typeof define === "function" && define.amd && define.amd.jQuery ) { + define( "jquery", [], function () { return jQuery; } ); + } + + return jQuery; + + })(); + + + // String to Object flags format cache + var flagsCache = {}; + + // Convert String-formatted flags into Object-formatted ones and store in cache + function createFlags( flags ) { + var object = flagsCache[ flags ] = {}, + i, length; + flags = flags.split( /\s+/ ); + for ( i = 0, length = flags.length; i < length; i++ ) { + object[ flags[i] ] = true; + } + return object; + } + + /* + * Create a callback list using the following parameters: + * + * flags: an optional list of space-separated flags that will change how + * the callback list behaves + * + * By default a callback list will act like an event callback list and can be + * "fired" multiple times. + * + * Possible flags: + * + * once: will ensure the callback list can only be fired once (like a Deferred) + * + * memory: will keep track of previous values and will call any callback added + * after the list has been fired right away with the latest "memorized" + * values (like a Deferred) + * + * unique: will ensure a callback can only be added once (no duplicate in the list) + * + * stopOnFalse: interrupt callings when a callback returns false + * + */ + jQuery.Callbacks = function( flags ) { + + // Convert flags from String-formatted to Object-formatted + // (we check in cache first) + flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {}; + + var // Actual callback list + list = [], + // Stack of fire calls for repeatable lists + stack = [], + // Last fire value (for non-forgettable lists) + memory, + // Flag to know if list is currently firing + firing, + // First callback to fire (used internally by add and fireWith) + firingStart, + // End of the loop when firing + firingLength, + // Index of currently firing callback (modified by remove if needed) + firingIndex, + // Add one or several callbacks to the list + add = function( args ) { + var i, + length, + elem, + type, + actual; + for ( i = 0, length = args.length; i < length; i++ ) { + elem = args[ i ]; + type = jQuery.type( elem ); + if ( type === "array" ) { + // Inspect recursively + add( elem ); + } else if ( type === "function" ) { + // Add if not in unique mode and callback is not in + if ( !flags.unique || !self.has( elem ) ) { + list.push( elem ); + } + } + } + }, + // Fire callbacks + fire = function( context, args ) { + args = args || []; + memory = !flags.memory || [ context, args ]; + firing = true; + firingIndex = firingStart || 0; + firingStart = 0; + firingLength = list.length; + for ( ; list && firingIndex < firingLength; firingIndex++ ) { + if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) { + memory = true; // Mark as halted + break; + } + } + firing = false; + if ( list ) { + if ( !flags.once ) { + if ( stack && stack.length ) { + memory = stack.shift(); + self.fireWith( memory[ 0 ], memory[ 1 ] ); + } + } else if ( memory === true ) { + self.disable(); + } else { + list = []; + } + } + }, + // Actual Callbacks object + self = { + // Add a callback or a collection of callbacks to the list + add: function() { + if ( list ) { + var length = list.length; + add( arguments ); + // Do we need to add the callbacks to the + // current firing batch? + if ( firing ) { + firingLength = list.length; + // With memory, if we're not firing then + // we should call right away, unless previous + // firing was halted (stopOnFalse) + } else if ( memory && memory !== true ) { + firingStart = length; + fire( memory[ 0 ], memory[ 1 ] ); + } + } + return this; + }, + // Remove a callback from the list + remove: function() { + if ( list ) { + var args = arguments, + argIndex = 0, + argLength = args.length; + for ( ; argIndex < argLength ; argIndex++ ) { + for ( var i = 0; i < list.length; i++ ) { + if ( args[ argIndex ] === list[ i ] ) { + // Handle firingIndex and firingLength + if ( firing ) { + if ( i <= firingLength ) { + firingLength--; + if ( i <= firingIndex ) { + firingIndex--; + } + } + } + // Remove the element + list.splice( i--, 1 ); + // If we have some unicity property then + // we only need to do this once + if ( flags.unique ) { + break; + } + } + } + } + } + return this; + }, + // Control if a given callback is in the list + has: function( fn ) { + if ( list ) { + var i = 0, + length = list.length; + for ( ; i < length; i++ ) { + if ( fn === list[ i ] ) { + return true; + } + } + } + return false; + }, + // Remove all callbacks from the list + empty: function() { + list = []; + return this; + }, + // Have the list do nothing anymore + disable: function() { + list = stack = memory = undefined; + return this; + }, + // Is it disabled? + disabled: function() { + return !list; + }, + // Lock the list in its current state + lock: function() { + stack = undefined; + if ( !memory || memory === true ) { + self.disable(); + } + return this; + }, + // Is it locked? + locked: function() { + return !stack; + }, + // Call all callbacks with the given context and arguments + fireWith: function( context, args ) { + if ( stack ) { + if ( firing ) { + if ( !flags.once ) { + stack.push( [ context, args ] ); + } + } else if ( !( flags.once && memory ) ) { + fire( context, args ); + } + } + return this; + }, + // Call all the callbacks with the given arguments + fire: function() { + self.fireWith( this, arguments ); + return this; + }, + // To know if the callbacks have already been called at least once + fired: function() { + return !!memory; + } + }; + + return self; + }; + + + + + var // Static reference to slice + sliceDeferred = [].slice; + + jQuery.extend({ + + Deferred: function( func ) { + var doneList = jQuery.Callbacks( "once memory" ), + failList = jQuery.Callbacks( "once memory" ), + progressList = jQuery.Callbacks( "memory" ), + state = "pending", + lists = { + resolve: doneList, + reject: failList, + notify: progressList + }, + promise = { + done: doneList.add, + fail: failList.add, + progress: progressList.add, + + state: function() { + return state; + }, + + // Deprecated + isResolved: doneList.fired, + isRejected: failList.fired, + + then: function( doneCallbacks, failCallbacks, progressCallbacks ) { + deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks ); + return this; + }, + always: function() { + return deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments ); + }, + pipe: function( fnDone, fnFail, fnProgress ) { + return jQuery.Deferred(function( newDefer ) { + jQuery.each( { + done: [ fnDone, "resolve" ], + fail: [ fnFail, "reject" ], + progress: [ fnProgress, "notify" ] + }, function( handler, data ) { + var fn = data[ 0 ], + action = data[ 1 ], + returned; + if ( jQuery.isFunction( fn ) ) { + deferred[ handler ](function() { + returned = fn.apply( this, arguments ); + if ( returned && jQuery.isFunction( returned.promise ) ) { + returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify ); + } else { + newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] ); + } + }); + } else { + deferred[ handler ]( newDefer[ action ] ); + } + }); + }).promise(); + }, + // Get a promise for this deferred + // If obj is provided, the promise aspect is added to the object + promise: function( obj ) { + if ( obj == null ) { + obj = promise; + } else { + for ( var key in promise ) { + obj[ key ] = promise[ key ]; + } + } + return obj; + } + }, + deferred = promise.promise({}), + key; + + for ( key in lists ) { + deferred[ key ] = lists[ key ].fire; + deferred[ key + "With" ] = lists[ key ].fireWith; + } + + // Handle state + deferred.done( function() { + state = "resolved"; + }, failList.disable, progressList.lock ).fail( function() { + state = "rejected"; + }, doneList.disable, progressList.lock ); + + // Call given func if any + if ( func ) { + func.call( deferred, deferred ); + } + + // All done! + return deferred; + }, + + // Deferred helper + when: function( firstParam ) { + var args = sliceDeferred.call( arguments, 0 ), + i = 0, + length = args.length, + pValues = new Array( length ), + count = length, + pCount = length, + deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ? + firstParam : + jQuery.Deferred(), + promise = deferred.promise(); + function resolveFunc( i ) { + return function( value ) { + args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; + if ( !( --count ) ) { + deferred.resolveWith( deferred, args ); + } + }; + } + function progressFunc( i ) { + return function( value ) { + pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; + deferred.notifyWith( promise, pValues ); + }; + } + if ( length > 1 ) { + for ( ; i < length; i++ ) { + if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) { + args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) ); + } else { + --count; + } + } + if ( !count ) { + deferred.resolveWith( deferred, args ); + } + } else if ( deferred !== firstParam ) { + deferred.resolveWith( deferred, length ? [ firstParam ] : [] ); + } + return promise; + } + }); + + + + + jQuery.support = (function() { + + var div = document.createElement( "div" ), + documentElement = document.documentElement, + all, + a, + select, + opt, + input, + marginDiv, + support, + fragment, + body, + testElementParent, + testElement, + testElementStyle, + tds, + events, + eventName, + i, + isSupported; + + // Preliminary tests + div.setAttribute("className", "t"); + div.innerHTML = "
a"; + + + all = div.getElementsByTagName( "*" ); + a = div.getElementsByTagName( "a" )[ 0 ]; + + // Can't get basic test support + if ( !all || !all.length || !a ) { + return {}; + } + + // First batch of supports tests + select = document.createElement( "select" ); + opt = select.appendChild( document.createElement("option") ); + input = div.getElementsByTagName( "input" )[ 0 ]; + + support = { + // IE strips leading whitespace when .innerHTML is used + leadingWhitespace: ( div.firstChild.nodeType === 3 ), + + // Make sure that tbody elements aren't automatically inserted + // IE will insert them into empty tables + tbody: !div.getElementsByTagName( "tbody" ).length, + + // Make sure that link elements get serialized correctly by innerHTML + // This requires a wrapper element in IE + htmlSerialize: !!div.getElementsByTagName( "link" ).length, + + // Get the style information from getAttribute + // (IE uses .cssText instead) + style: /top/.test( a.getAttribute("style") ), + + // Make sure that URLs aren't manipulated + // (IE normalizes it by default) + hrefNormalized: ( a.getAttribute( "href" ) === "/a" ), + + // Make sure that element opacity exists + // (IE uses filter instead) + // Use a regex to work around a WebKit issue. See #5145 + opacity: /^0.55/.test( a.style.opacity ), + + // Verify style float existence + // (IE uses styleFloat instead of cssFloat) + cssFloat: !!a.style.cssFloat, + + // Make sure unknown elements (like HTML5 elems) are handled appropriately + unknownElems: !!div.getElementsByTagName( "nav" ).length, + + // Make sure that if no value is specified for a checkbox + // that it defaults to "on". + // (WebKit defaults to "" instead) + checkOn: ( input.value === "on" ), + + // Make sure that a selected-by-default option has a working selected property. + // (WebKit defaults to false instead of true, IE too, if it's in an optgroup) + optSelected: opt.selected, + + // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7) + getSetAttribute: div.className !== "t", + + // Tests for enctype support on a form(#6743) + enctype: !!document.createElement("form").enctype, + + // Will be defined later + submitBubbles: true, + changeBubbles: true, + focusinBubbles: false, + deleteExpando: true, + noCloneEvent: true, + inlineBlockNeedsLayout: false, + shrinkWrapBlocks: false, + reliableMarginRight: true + }; + + // Make sure checked status is properly cloned + input.checked = true; + support.noCloneChecked = input.cloneNode( true ).checked; + + // Make sure that the options inside disabled selects aren't marked as disabled + // (WebKit marks them as disabled) + select.disabled = true; + support.optDisabled = !opt.disabled; + + // Test to see if it's possible to delete an expando from an element + // Fails in Internet Explorer + try { + delete div.test; + } catch( e ) { + support.deleteExpando = false; + } + + if ( !div.addEventListener && div.attachEvent && div.fireEvent ) { + div.attachEvent( "onclick", function() { + // Cloning a node shouldn't copy over any + // bound event handlers (IE does this) + support.noCloneEvent = false; + }); + div.cloneNode( true ).fireEvent( "onclick" ); + } + + // Check if a radio maintains its value + // after being appended to the DOM + input = document.createElement("input"); + input.value = "t"; + input.setAttribute("type", "radio"); + support.radioValue = input.value === "t"; + + input.setAttribute("checked", "checked"); + div.appendChild( input ); + fragment = document.createDocumentFragment(); + fragment.appendChild( div.lastChild ); + + // WebKit doesn't clone checked state correctly in fragments + support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked; + + div.innerHTML = ""; + + // Figure out if the W3C box model works as expected + div.style.width = div.style.paddingLeft = "1px"; + + // We don't want to do body-related feature tests on frameset + // documents, which lack a body. So we use + // document.getElementsByTagName("body")[0], which is undefined in + // frameset documents, while document.body isn’t. (7398) + body = document.getElementsByTagName("body")[ 0 ]; + // We use our own, invisible, body unless the body is already present + // in which case we use a div (#9239) + testElement = document.createElement( body ? "div" : "body" ); + testElementStyle = { + visibility: "hidden", + width: 0, + height: 0, + border: 0, + margin: 0, + background: "none" + }; + if ( body ) { + jQuery.extend( testElementStyle, { + position: "absolute", + left: "-999px", + top: "-999px" + }); + } + for ( i in testElementStyle ) { + testElement.style[ i ] = testElementStyle[ i ]; + } + testElement.appendChild( div ); + testElementParent = body || documentElement; + testElementParent.insertBefore( testElement, testElementParent.firstChild ); + + // Check if a disconnected checkbox will retain its checked + // value of true after appended to the DOM (IE6/7) + support.appendChecked = input.checked; + + support.boxModel = div.offsetWidth === 2; + + if ( "zoom" in div.style ) { + // Check if natively block-level elements act like inline-block + // elements when setting their display to 'inline' and giving + // them layout + // (IE < 8 does this) + div.style.display = "inline"; + div.style.zoom = 1; + support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 ); + + // Check if elements with layout shrink-wrap their children + // (IE 6 does this) + div.style.display = ""; + div.innerHTML = "
"; + support.shrinkWrapBlocks = ( div.offsetWidth !== 2 ); + } + + div.innerHTML = "
t
"; + tds = div.getElementsByTagName( "td" ); + + // Check if table cells still have offsetWidth/Height when they are set + // to display:none and there are still other visible table cells in a + // table row; if so, offsetWidth/Height are not reliable for use when + // determining if an element has been hidden directly using + // display:none (it is still safe to use offsets if a parent element is + // hidden; don safety goggles and see bug #4512 for more information). + // (only IE 8 fails this test) + isSupported = ( tds[ 0 ].offsetHeight === 0 ); + + tds[ 0 ].style.display = ""; + tds[ 1 ].style.display = "none"; + + // Check if empty table cells still have offsetWidth/Height + // (IE < 8 fail this test) + support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 ); + div.innerHTML = ""; + + // Check if div with explicit width and no margin-right incorrectly + // gets computed margin-right based on width of container. For more + // info see bug #3333 + // Fails in WebKit before Feb 2011 nightlies + // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right + if ( document.defaultView && document.defaultView.getComputedStyle ) { + marginDiv = document.createElement( "div" ); + marginDiv.style.width = "0"; + marginDiv.style.marginRight = "0"; + div.appendChild( marginDiv ); + support.reliableMarginRight = + ( parseInt( ( document.defaultView.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0; + } + + // Technique from Juriy Zaytsev + // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ + // We only care about the case where non-standard event systems + // are used, namely in IE. Short-circuiting here helps us to + // avoid an eval call (in setAttribute) which can cause CSP + // to go haywire. See: https://developer.mozilla.org/en/Security/CSP + if ( div.attachEvent ) { + for( i in { + submit: 1, + change: 1, + focusin: 1 + } ) { + eventName = "on" + i; + isSupported = ( eventName in div ); + if ( !isSupported ) { + div.setAttribute( eventName, "return;" ); + isSupported = ( typeof div[ eventName ] === "function" ); + } + support[ i + "Bubbles" ] = isSupported; + } + } + + // Run fixed position tests at doc ready to avoid a crash + // related to the invisible body in IE8 + jQuery(function() { + var container, outer, inner, table, td, offsetSupport, + conMarginTop = 1, + ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;", + vb = "visibility:hidden;border:0;", + style = "style='" + ptlm + "border:5px solid #000;padding:0;'", + html = "
" + + "" + + "
"; + + // Reconstruct a container + body = document.getElementsByTagName("body")[0]; + if ( !body ) { + // Return for frameset docs that don't have a body + // These tests cannot be done + return; + } + + container = document.createElement("div"); + container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px"; + body.insertBefore( container, body.firstChild ); + + // Construct a test element + testElement = document.createElement("div"); + testElement.style.cssText = ptlm + vb; + + testElement.innerHTML = html; + container.appendChild( testElement ); + outer = testElement.firstChild; + inner = outer.firstChild; + td = outer.nextSibling.firstChild.firstChild; + + offsetSupport = { + doesNotAddBorder: ( inner.offsetTop !== 5 ), + doesAddBorderForTableAndCells: ( td.offsetTop === 5 ) + }; + + inner.style.position = "fixed"; + inner.style.top = "20px"; + + // safari subtracts parent border width here which is 5px + offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 ); + inner.style.position = inner.style.top = ""; + + outer.style.overflow = "hidden"; + outer.style.position = "relative"; + + offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 ); + offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop ); + + body.removeChild( container ); + testElement = container = null; + + jQuery.extend( support, offsetSupport ); + }); + + testElement.innerHTML = ""; + testElementParent.removeChild( testElement ); + + // Null connected elements to avoid leaks in IE + testElement = fragment = select = opt = body = marginDiv = div = input = null; + + return support; + })(); + + // Keep track of boxModel + jQuery.boxModel = jQuery.support.boxModel; + + + + + var rbrace = /^(?:\{.*\}|\[.*\])$/, + rmultiDash = /([A-Z])/g; + + jQuery.extend({ + cache: {}, + + // Please use with caution + uuid: 0, + + // Unique for each copy of jQuery on the page + // Non-digits removed to match rinlinejQuery + expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ), + + // The following elements throw uncatchable exceptions if you + // attempt to add expando properties to them. + noData: { + "embed": true, + // Ban all objects except for Flash (which handle expandos) + "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000", + "applet": true + }, + + hasData: function( elem ) { + elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ]; + return !!elem && !isEmptyDataObject( elem ); + }, + + data: function( elem, name, data, pvt /* Internal Use Only */ ) { + if ( !jQuery.acceptData( elem ) ) { + return; + } + + var privateCache, thisCache, ret, + internalKey = jQuery.expando, + getByName = typeof name === "string", + + // We have to handle DOM nodes and JS objects differently because IE6-7 + // can't GC object references properly across the DOM-JS boundary + isNode = elem.nodeType, + + // Only DOM nodes need the global jQuery cache; JS object data is + // attached directly to the object so GC can occur automatically + cache = isNode ? jQuery.cache : elem, + + // Only defining an ID for JS objects if its cache already exists allows + // the code to shortcut on the same path as a DOM node with no cache + id = isNode ? elem[ jQuery.expando ] : elem[ jQuery.expando ] && jQuery.expando, + isEvents = name === "events"; + + // Avoid doing any more work than we need to when trying to get data on an + // object that has no data at all + if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) { + return; + } + + if ( !id ) { + // Only DOM nodes need a new unique ID for each element since their data + // ends up in the global cache + if ( isNode ) { + elem[ jQuery.expando ] = id = ++jQuery.uuid; + } else { + id = jQuery.expando; + } + } + + if ( !cache[ id ] ) { + cache[ id ] = {}; + + // Avoids exposing jQuery metadata on plain JS objects when the object + // is serialized using JSON.stringify + if ( !isNode ) { + cache[ id ].toJSON = jQuery.noop; + } + } + + // An object can be passed to jQuery.data instead of a key/value pair; this gets + // shallow copied over onto the existing cache + if ( typeof name === "object" || typeof name === "function" ) { + if ( pvt ) { + cache[ id ] = jQuery.extend( cache[ id ], name ); + } else { + cache[ id ].data = jQuery.extend( cache[ id ].data, name ); + } + } + + privateCache = thisCache = cache[ id ]; + + // jQuery data() is stored in a separate object inside the object's internal data + // cache in order to avoid key collisions between internal data and user-defined + // data. + if ( !pvt ) { + if ( !thisCache.data ) { + thisCache.data = {}; + } + + thisCache = thisCache.data; + } + + if ( data !== undefined ) { + thisCache[ jQuery.camelCase( name ) ] = data; + } + + // Users should not attempt to inspect the internal events object using jQuery.data, + // it is undocumented and subject to change. But does anyone listen? No. + if ( isEvents && !thisCache[ name ] ) { + return privateCache.events; + } + + // Check for both converted-to-camel and non-converted data property names + // If a data property was specified + if ( getByName ) { + + // First Try to find as-is property data + ret = thisCache[ name ]; + + // Test for null|undefined property data + if ( ret == null ) { + + // Try to find the camelCased property + ret = thisCache[ jQuery.camelCase( name ) ]; + } + } else { + ret = thisCache; + } + + return ret; + }, + + removeData: function( elem, name, pvt /* Internal Use Only */ ) { + if ( !jQuery.acceptData( elem ) ) { + return; + } + + var thisCache, i, l, + + // Reference to internal data cache key + internalKey = jQuery.expando, + + isNode = elem.nodeType, + + // See jQuery.data for more information + cache = isNode ? jQuery.cache : elem, + + // See jQuery.data for more information + id = isNode ? elem[ jQuery.expando ] : jQuery.expando; + + // If there is already no cache entry for this object, there is no + // purpose in continuing + if ( !cache[ id ] ) { + return; + } + + if ( name ) { + + thisCache = pvt ? cache[ id ] : cache[ id ].data; + + if ( thisCache ) { + + // Support space separated names + if ( jQuery.isArray( name ) ) { + name = name; + } else if ( name in thisCache ) { + name = [ name ]; + } else { + + // split the camel cased version by spaces + name = jQuery.camelCase( name ); + if ( name in thisCache ) { + name = [ name ]; + } else { + name = name.split( " " ); + } + } + + for ( i = 0, l = name.length; i < l; i++ ) { + delete thisCache[ name[i] ]; + } + + // If there is no data left in the cache, we want to continue + // and let the cache object itself get destroyed + if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) { + return; + } + } + } + + // See jQuery.data for more information + if ( !pvt ) { + delete cache[ id ].data; + + // Don't destroy the parent cache unless the internal data object + // had been the only thing left in it + if ( !isEmptyDataObject(cache[ id ]) ) { + return; + } + } + + // Browsers that fail expando deletion also refuse to delete expandos on + // the window, but it will allow it on all other JS objects; other browsers + // don't care + // Ensure that `cache` is not a window object #10080 + if ( jQuery.support.deleteExpando || !cache.setInterval ) { + delete cache[ id ]; + } else { + cache[ id ] = null; + } + + // We destroyed the cache and need to eliminate the expando on the node to avoid + // false lookups in the cache for entries that no longer exist + if ( isNode ) { + // IE does not allow us to delete expando properties from nodes, + // nor does it have a removeAttribute function on Document nodes; + // we must handle all of these cases + if ( jQuery.support.deleteExpando ) { + delete elem[ jQuery.expando ]; + } else if ( elem.removeAttribute ) { + elem.removeAttribute( jQuery.expando ); + } else { + elem[ jQuery.expando ] = null; + } + } + }, + + // For internal use only. + _data: function( elem, name, data ) { + return jQuery.data( elem, name, data, true ); + }, + + // A method for determining if a DOM node can handle the data expando + acceptData: function( elem ) { + if ( elem.nodeName ) { + var match = jQuery.noData[ elem.nodeName.toLowerCase() ]; + + if ( match ) { + return !(match === true || elem.getAttribute("classid") !== match); + } + } + + return true; + } + }); + + jQuery.fn.extend({ + data: function( key, value ) { + var parts, attr, name, + data = null; + + if ( typeof key === "undefined" ) { + if ( this.length ) { + data = jQuery.data( this[0] ); + + if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) { + attr = this[0].attributes; + for ( var i = 0, l = attr.length; i < l; i++ ) { + name = attr[i].name; + + if ( name.indexOf( "data-" ) === 0 ) { + name = jQuery.camelCase( name.substring(5) ); + + dataAttr( this[0], name, data[ name ] ); + } + } + jQuery._data( this[0], "parsedAttrs", true ); + } + } + + return data; + + } else if ( typeof key === "object" ) { + return this.each(function() { + jQuery.data( this, key ); + }); + } + + parts = key.split("."); + parts[1] = parts[1] ? "." + parts[1] : ""; + + if ( value === undefined ) { + data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]); + + // Try to fetch any internally stored data first + if ( data === undefined && this.length ) { + data = jQuery.data( this[0], key ); + data = dataAttr( this[0], key, data ); + } + + return data === undefined && parts[1] ? + this.data( parts[0] ) : + data; + + } else { + return this.each(function() { + var $this = jQuery( this ), + args = [ parts[0], value ]; + + $this.triggerHandler( "setData" + parts[1] + "!", args ); + jQuery.data( this, key, value ); + $this.triggerHandler( "changeData" + parts[1] + "!", args ); + }); + } + }, + + removeData: function( key ) { + return this.each(function() { + jQuery.removeData( this, key ); + }); + } + }); + + function dataAttr( elem, key, data ) { + // If nothing was found internally, try to fetch any + // data from the HTML5 data-* attribute + if ( data === undefined && elem.nodeType === 1 ) { + + var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); + + data = elem.getAttribute( name ); + + if ( typeof data === "string" ) { + try { + data = data === "true" ? true : + data === "false" ? false : + data === "null" ? null : + jQuery.isNumeric( data ) ? parseFloat( data ) : + rbrace.test( data ) ? jQuery.parseJSON( data ) : + data; + } catch( e ) {} + + // Make sure we set the data so it isn't changed later + jQuery.data( elem, key, data ); + + } else { + data = undefined; + } + } + + return data; + } + + // checks a cache object for emptiness + function isEmptyDataObject( obj ) { + for ( var name in obj ) { + + // if the public data object is empty, the private is still empty + if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) { + continue; + } + if ( name !== "toJSON" ) { + return false; + } + } + + return true; + } + + + + + function handleQueueMarkDefer( elem, type, src ) { + var deferDataKey = type + "defer", + queueDataKey = type + "queue", + markDataKey = type + "mark", + defer = jQuery._data( elem, deferDataKey ); + if ( defer && + ( src === "queue" || !jQuery._data(elem, queueDataKey) ) && + ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) { + // Give room for hard-coded callbacks to fire first + // and eventually mark/queue something else on the element + setTimeout( function() { + if ( !jQuery._data( elem, queueDataKey ) && + !jQuery._data( elem, markDataKey ) ) { + jQuery.removeData( elem, deferDataKey, true ); + defer.fire(); + } + }, 0 ); + } + } + + jQuery.extend({ + + _mark: function( elem, type ) { + if ( elem ) { + type = ( type || "fx" ) + "mark"; + jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 ); + } + }, + + _unmark: function( force, elem, type ) { + if ( force !== true ) { + type = elem; + elem = force; + force = false; + } + if ( elem ) { + type = type || "fx"; + var key = type + "mark", + count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 ); + if ( count ) { + jQuery._data( elem, key, count ); + } else { + jQuery.removeData( elem, key, true ); + handleQueueMarkDefer( elem, type, "mark" ); + } + } + }, + + queue: function( elem, type, data ) { + var q; + if ( elem ) { + type = ( type || "fx" ) + "queue"; + q = jQuery._data( elem, type ); + + // Speed up dequeue by getting out quickly if this is just a lookup + if ( data ) { + if ( !q || jQuery.isArray(data) ) { + q = jQuery._data( elem, type, jQuery.makeArray(data) ); + } else { + q.push( data ); + } + } + return q || []; + } + }, + + dequeue: function( elem, type ) { + type = type || "fx"; + + var queue = jQuery.queue( elem, type ), + fn = queue.shift(), + hooks = {}; + + // If the fx queue is dequeued, always remove the progress sentinel + if ( fn === "inprogress" ) { + fn = queue.shift(); + } + + if ( fn ) { + // Add a progress sentinel to prevent the fx queue from being + // automatically dequeued + if ( type === "fx" ) { + queue.unshift( "inprogress" ); + } + + jQuery._data( elem, type + ".run", hooks ); + fn.call( elem, function() { + jQuery.dequeue( elem, type ); + }, hooks ); + } + + if ( !queue.length ) { + jQuery.removeData( elem, type + "queue " + type + ".run", true ); + handleQueueMarkDefer( elem, type, "queue" ); + } + } + }); + + jQuery.fn.extend({ + queue: function( type, data ) { + if ( typeof type !== "string" ) { + data = type; + type = "fx"; + } + + if ( data === undefined ) { + return jQuery.queue( this[0], type ); + } + return this.each(function() { + var queue = jQuery.queue( this, type, data ); + + if ( type === "fx" && queue[0] !== "inprogress" ) { + jQuery.dequeue( this, type ); + } + }); + }, + dequeue: function( type ) { + return this.each(function() { + jQuery.dequeue( this, type ); + }); + }, + // Based off of the plugin by Clint Helfers, with permission. + // http://blindsignals.com/index.php/2009/07/jquery-delay/ + delay: function( time, type ) { + time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; + type = type || "fx"; + + return this.queue( type, function( next, hooks ) { + var timeout = setTimeout( next, time ); + hooks.stop = function() { + clearTimeout( timeout ); + }; + }); + }, + clearQueue: function( type ) { + return this.queue( type || "fx", [] ); + }, + // Get a promise resolved when queues of a certain type + // are emptied (fx is the type by default) + promise: function( type, object ) { + if ( typeof type !== "string" ) { + object = type; + type = undefined; + } + type = type || "fx"; + var defer = jQuery.Deferred(), + elements = this, + i = elements.length, + count = 1, + deferDataKey = type + "defer", + queueDataKey = type + "queue", + markDataKey = type + "mark", + tmp; + function resolve() { + if ( !( --count ) ) { + defer.resolveWith( elements, [ elements ] ); + } + } + while( i-- ) { + if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) || + ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) || + jQuery.data( elements[ i ], markDataKey, undefined, true ) ) && + jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) { + count++; + tmp.add( resolve ); + } + } + resolve(); + return defer.promise(); + } + }); + + + + + var rclass = /[\n\t\r]/g, + rspace = /\s+/, + rreturn = /\r/g, + rtype = /^(?:button|input)$/i, + rfocusable = /^(?:button|input|object|select|textarea)$/i, + rclickable = /^a(?:rea)?$/i, + rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i, + getSetAttribute = jQuery.support.getSetAttribute, + nodeHook, boolHook, fixSpecified; + + jQuery.fn.extend({ + attr: function( name, value ) { + return jQuery.access( this, name, value, true, jQuery.attr ); + }, + + removeAttr: function( name ) { + return this.each(function() { + jQuery.removeAttr( this, name ); + }); + }, + + prop: function( name, value ) { + return jQuery.access( this, name, value, true, jQuery.prop ); + }, + + removeProp: function( name ) { + name = jQuery.propFix[ name ] || name; + return this.each(function() { + // try/catch handles cases where IE balks (such as removing a property on window) + try { + this[ name ] = undefined; + delete this[ name ]; + } catch( e ) {} + }); + }, + + addClass: function( value ) { + var classNames, i, l, elem, + setClass, c, cl; + + if ( jQuery.isFunction( value ) ) { + return this.each(function( j ) { + jQuery( this ).addClass( value.call(this, j, this.className) ); + }); + } + + if ( value && typeof value === "string" ) { + classNames = value.split( rspace ); + + for ( i = 0, l = this.length; i < l; i++ ) { + elem = this[ i ]; + + if ( elem.nodeType === 1 ) { + if ( !elem.className && classNames.length === 1 ) { + elem.className = value; + + } else { + setClass = " " + elem.className + " "; + + for ( c = 0, cl = classNames.length; c < cl; c++ ) { + if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) { + setClass += classNames[ c ] + " "; + } + } + elem.className = jQuery.trim( setClass ); + } + } + } + } + + return this; + }, + + removeClass: function( value ) { + var classNames, i, l, elem, className, c, cl; + + if ( jQuery.isFunction( value ) ) { + return this.each(function( j ) { + jQuery( this ).removeClass( value.call(this, j, this.className) ); + }); + } + + if ( (value && typeof value === "string") || value === undefined ) { + classNames = ( value || "" ).split( rspace ); + + for ( i = 0, l = this.length; i < l; i++ ) { + elem = this[ i ]; + + if ( elem.nodeType === 1 && elem.className ) { + if ( value ) { + className = (" " + elem.className + " ").replace( rclass, " " ); + for ( c = 0, cl = classNames.length; c < cl; c++ ) { + className = className.replace(" " + classNames[ c ] + " ", " "); + } + elem.className = jQuery.trim( className ); + + } else { + elem.className = ""; + } + } + } + } + + return this; + }, + + toggleClass: function( value, stateVal ) { + var type = typeof value, + isBool = typeof stateVal === "boolean"; + + if ( jQuery.isFunction( value ) ) { + return this.each(function( i ) { + jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal ); + }); + } + + return this.each(function() { + if ( type === "string" ) { + // toggle individual class names + var className, + i = 0, + self = jQuery( this ), + state = stateVal, + classNames = value.split( rspace ); + + while ( (className = classNames[ i++ ]) ) { + // check each className given, space seperated list + state = isBool ? state : !self.hasClass( className ); + self[ state ? "addClass" : "removeClass" ]( className ); + } + + } else if ( type === "undefined" || type === "boolean" ) { + if ( this.className ) { + // store className if set + jQuery._data( this, "__className__", this.className ); + } + + // toggle whole className + this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || ""; + } + }); + }, + + hasClass: function( selector ) { + var className = " " + selector + " ", + i = 0, + l = this.length; + for ( ; i < l; i++ ) { + if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) { + return true; + } + } + + return false; + }, + + val: function( value ) { + var hooks, ret, isFunction, + elem = this[0]; + + if ( !arguments.length ) { + if ( elem ) { + hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; + + if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { + return ret; + } + + ret = elem.value; + + return typeof ret === "string" ? + // handle most common string cases + ret.replace(rreturn, "") : + // handle cases where value is null/undef or number + ret == null ? "" : ret; + } + + return undefined; + } + + isFunction = jQuery.isFunction( value ); + + return this.each(function( i ) { + var self = jQuery(this), val; + + if ( this.nodeType !== 1 ) { + return; + } + + if ( isFunction ) { + val = value.call( this, i, self.val() ); + } else { + val = value; + } + + // Treat null/undefined as ""; convert numbers to string + if ( val == null ) { + val = ""; + } else if ( typeof val === "number" ) { + val += ""; + } else if ( jQuery.isArray( val ) ) { + val = jQuery.map(val, function ( value ) { + return value == null ? "" : value + ""; + }); + } + + hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ]; + + // If set returns undefined, fall back to normal setting + if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { + this.value = val; + } + }); + } + }); + + jQuery.extend({ + valHooks: { + option: { + get: function( elem ) { + // attributes.value is undefined in Blackberry 4.7 but + // uses .value. See #6932 + var val = elem.attributes.value; + return !val || val.specified ? elem.value : elem.text; + } + }, + select: { + get: function( elem ) { + var value, i, max, option, + index = elem.selectedIndex, + values = [], + options = elem.options, + one = elem.type === "select-one"; + + // Nothing was selected + if ( index < 0 ) { + return null; + } + + // Loop through all the selected options + i = one ? index : 0; + max = one ? index + 1 : options.length; + for ( ; i < max; i++ ) { + option = options[ i ]; + + // Don't return options that are disabled or in a disabled optgroup + if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) && + (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) { + + // Get the specific value for the option + value = jQuery( option ).val(); + + // We don't need an array for one selects + if ( one ) { + return value; + } + + // Multi-Selects return an array + values.push( value ); + } + } + + // Fixes Bug #2551 -- select.val() broken in IE after form.reset() + if ( one && !values.length && options.length ) { + return jQuery( options[ index ] ).val(); + } + + return values; + }, + + set: function( elem, value ) { + var values = jQuery.makeArray( value ); + + jQuery(elem).find("option").each(function() { + this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0; + }); + + if ( !values.length ) { + elem.selectedIndex = -1; + } + return values; + } + } + }, + + attrFn: { + val: true, + css: true, + html: true, + text: true, + data: true, + width: true, + height: true, + offset: true + }, + + attr: function( elem, name, value, pass ) { + var ret, hooks, notxml, + nType = elem.nodeType; + + // don't get/set attributes on text, comment and attribute nodes + if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { + return undefined; + } + + if ( pass && name in jQuery.attrFn ) { + return jQuery( elem )[ name ]( value ); + } + + // Fallback to prop when attributes are not supported + if ( !("getAttribute" in elem) ) { + return jQuery.prop( elem, name, value ); + } + + notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); + + // All attributes are lowercase + // Grab necessary hook if one is defined + if ( notxml ) { + name = name.toLowerCase(); + hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); + } + + if ( value !== undefined ) { + + if ( value === null ) { + jQuery.removeAttr( elem, name ); + return undefined; + + } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { + return ret; + + } else { + elem.setAttribute( name, "" + value ); + return value; + } + + } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { + return ret; + + } else { + + ret = elem.getAttribute( name ); + + // Non-existent attributes return null, we normalize to undefined + return ret === null ? + undefined : + ret; + } + }, + + removeAttr: function( elem, value ) { + var propName, attrNames, name, l, + i = 0; + + if ( elem.nodeType === 1 ) { + attrNames = ( value || "" ).split( rspace ); + l = attrNames.length; + + for ( ; i < l; i++ ) { + name = attrNames[ i ].toLowerCase(); + propName = jQuery.propFix[ name ] || name; + + // See #9699 for explanation of this approach (setting first, then removal) + jQuery.attr( elem, name, "" ); + elem.removeAttribute( getSetAttribute ? name : propName ); + + // Set corresponding property to false for boolean attributes + if ( rboolean.test( name ) && propName in elem ) { + elem[ propName ] = false; + } + } + } + }, + + attrHooks: { + type: { + set: function( elem, value ) { + // We can't allow the type property to be changed (since it causes problems in IE) + if ( rtype.test( elem.nodeName ) && elem.parentNode ) { + jQuery.error( "type property can't be changed" ); + } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) { + // Setting the type on a radio button after the value resets the value in IE6-9 + // Reset value to it's default in case type is set after value + // This is for element creation + var val = elem.value; + elem.setAttribute( "type", value ); + if ( val ) { + elem.value = val; + } + return value; + } + } + }, + // Use the value property for back compat + // Use the nodeHook for button elements in IE6/7 (#1954) + value: { + get: function( elem, name ) { + if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { + return nodeHook.get( elem, name ); + } + return name in elem ? + elem.value : + null; + }, + set: function( elem, value, name ) { + if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { + return nodeHook.set( elem, value, name ); + } + // Does not return so that setAttribute is also used + elem.value = value; + } + } + }, + + propFix: { + tabindex: "tabIndex", + readonly: "readOnly", + "for": "htmlFor", + "class": "className", + maxlength: "maxLength", + cellspacing: "cellSpacing", + cellpadding: "cellPadding", + rowspan: "rowSpan", + colspan: "colSpan", + usemap: "useMap", + frameborder: "frameBorder", + contenteditable: "contentEditable" + }, + + prop: function( elem, name, value ) { + var ret, hooks, notxml, + nType = elem.nodeType; + + // don't get/set properties on text, comment and attribute nodes + if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { + return undefined; + } + + notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); + + if ( notxml ) { + // Fix name and attach hooks + name = jQuery.propFix[ name ] || name; + hooks = jQuery.propHooks[ name ]; + } + + if ( value !== undefined ) { + if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { + return ret; + + } else { + return ( elem[ name ] = value ); + } + + } else { + if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { + return ret; + + } else { + return elem[ name ]; + } + } + }, + + propHooks: { + tabIndex: { + get: function( elem ) { + // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set + // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/ + var attributeNode = elem.getAttributeNode("tabindex"); + + return attributeNode && attributeNode.specified ? + parseInt( attributeNode.value, 10 ) : + rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ? + 0 : + undefined; + } + } + } + }); + + // Add the tabIndex propHook to attrHooks for back-compat (different case is intentional) + jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex; + + // Hook for boolean attributes + boolHook = { + get: function( elem, name ) { + // Align boolean attributes with corresponding properties + // Fall back to attribute presence where some booleans are not supported + var attrNode, + property = jQuery.prop( elem, name ); + return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ? + name.toLowerCase() : + undefined; + }, + set: function( elem, value, name ) { + var propName; + if ( value === false ) { + // Remove boolean attributes when set to false + jQuery.removeAttr( elem, name ); + } else { + // value is true since we know at this point it's type boolean and not false + // Set boolean attributes to the same name and set the DOM property + propName = jQuery.propFix[ name ] || name; + if ( propName in elem ) { + // Only set the IDL specifically if it already exists on the element + elem[ propName ] = true; + } + + elem.setAttribute( name, name.toLowerCase() ); + } + return name; + } + }; + + // IE6/7 do not support getting/setting some attributes with get/setAttribute + if ( !getSetAttribute ) { + + fixSpecified = { + name: true, + id: true + }; + + // Use this for any attribute in IE6/7 + // This fixes almost every IE6/7 issue + nodeHook = jQuery.valHooks.button = { + get: function( elem, name ) { + var ret; + ret = elem.getAttributeNode( name ); + return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ? + ret.nodeValue : + undefined; + }, + set: function( elem, value, name ) { + // Set the existing or create a new attribute node + var ret = elem.getAttributeNode( name ); + if ( !ret ) { + ret = document.createAttribute( name ); + elem.setAttributeNode( ret ); + } + return ( ret.nodeValue = value + "" ); + } + }; + + // Apply the nodeHook to tabindex + jQuery.attrHooks.tabindex.set = nodeHook.set; + + // Set width and height to auto instead of 0 on empty string( Bug #8150 ) + // This is for removals + jQuery.each([ "width", "height" ], function( i, name ) { + jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { + set: function( elem, value ) { + if ( value === "" ) { + elem.setAttribute( name, "auto" ); + return value; + } + } + }); + }); + + // Set contenteditable to false on removals(#10429) + // Setting to empty string throws an error as an invalid value + jQuery.attrHooks.contenteditable = { + get: nodeHook.get, + set: function( elem, value, name ) { + if ( value === "" ) { + value = "false"; + } + nodeHook.set( elem, value, name ); + } + }; + } + + + // Some attributes require a special call on IE + if ( !jQuery.support.hrefNormalized ) { + jQuery.each([ "href", "src", "width", "height" ], function( i, name ) { + jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { + get: function( elem ) { + var ret = elem.getAttribute( name, 2 ); + return ret === null ? undefined : ret; + } + }); + }); + } + + if ( !jQuery.support.style ) { + jQuery.attrHooks.style = { + get: function( elem ) { + // Return undefined in the case of empty string + // Normalize to lowercase since IE uppercases css property names + return elem.style.cssText.toLowerCase() || undefined; + }, + set: function( elem, value ) { + return ( elem.style.cssText = "" + value ); + } + }; + } + + // Safari mis-reports the default selected property of an option + // Accessing the parent's selectedIndex property fixes it + if ( !jQuery.support.optSelected ) { + jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, { + get: function( elem ) { + var parent = elem.parentNode; + + if ( parent ) { + parent.selectedIndex; + + // Make sure that it also works with optgroups, see #5701 + if ( parent.parentNode ) { + parent.parentNode.selectedIndex; + } + } + return null; + } + }); + } + + // IE6/7 call enctype encoding + if ( !jQuery.support.enctype ) { + jQuery.propFix.enctype = "encoding"; + } + + // Radios and checkboxes getter/setter + if ( !jQuery.support.checkOn ) { + jQuery.each([ "radio", "checkbox" ], function() { + jQuery.valHooks[ this ] = { + get: function( elem ) { + // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified + return elem.getAttribute("value") === null ? "on" : elem.value; + } + }; + }); + } + jQuery.each([ "radio", "checkbox" ], function() { + jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], { + set: function( elem, value ) { + if ( jQuery.isArray( value ) ) { + return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 ); + } + } + }); + }); + + + + + var rnamespaces = /\.(.*)$/, + rformElems = /^(?:textarea|input|select)$/i, + rperiod = /\./g, + rspaces = / /g, + rescape = /[^\w\s.|`]/g, + rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/, + rhoverHack = /\bhover(\.\S+)?/, + rkeyEvent = /^key/, + rmouseEvent = /^(?:mouse|contextmenu)|click/, + rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/, + quickParse = function( selector ) { + var quick = rquickIs.exec( selector ); + if ( quick ) { + // 0 1 2 3 + // [ _, tag, id, class ] + quick[1] = ( quick[1] || "" ).toLowerCase(); + quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" ); + } + return quick; + }, + quickIs = function( elem, m ) { + return ( + (!m[1] || elem.nodeName.toLowerCase() === m[1]) && + (!m[2] || elem.id === m[2]) && + (!m[3] || m[3].test( elem.className )) + ); + }, + hoverHack = function( events ) { + return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" ); + }; + + /* + * Helper functions for managing events -- not part of the public interface. + * Props to Dean Edwards' addEvent library for many of the ideas. + */ + jQuery.event = { + + add: function( elem, types, handler, data, selector ) { + + var elemData, eventHandle, events, + t, tns, type, namespaces, handleObj, + handleObjIn, quick, handlers, special; + + // Don't attach events to noData or text/comment nodes (allow plain objects tho) + if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) { + return; + } + + // Caller can pass in an object of custom data in lieu of the handler + if ( handler.handler ) { + handleObjIn = handler; + handler = handleObjIn.handler; + } + + // Make sure that the handler has a unique ID, used to find/remove it later + if ( !handler.guid ) { + handler.guid = jQuery.guid++; + } + + // Init the element's event structure and main handler, if this is the first + events = elemData.events; + if ( !events ) { + elemData.events = events = {}; + } + eventHandle = elemData.handle; + if ( !eventHandle ) { + elemData.handle = eventHandle = function( e ) { + // Discard the second event of a jQuery.event.trigger() and + // when an event is called after a page has unloaded + return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? + jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : + undefined; + }; + // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events + eventHandle.elem = elem; + } + + // Handle multiple events separated by a space + // jQuery(...).bind("mouseover mouseout", fn); + types = hoverHack(types).split( " " ); + for ( t = 0; t < types.length; t++ ) { + + tns = rtypenamespace.exec( types[t] ) || []; + type = tns[1]; + namespaces = ( tns[2] || "" ).split( "." ).sort(); + + // If event changes its type, use the special event handlers for the changed type + special = jQuery.event.special[ type ] || {}; + + // If selector defined, determine special event api type, otherwise given type + type = ( selector ? special.delegateType : special.bindType ) || type; + + // Update special based on newly reset type + special = jQuery.event.special[ type ] || {}; + + // handleObj is passed to all event handlers + handleObj = jQuery.extend({ + type: type, + origType: tns[1], + data: data, + handler: handler, + guid: handler.guid, + selector: selector, + namespace: namespaces.join(".") + }, handleObjIn ); + + // Delegated event; pre-analyze selector so it's processed quickly on event dispatch + if ( selector ) { + handleObj.quick = quickParse( selector ); + if ( !handleObj.quick && jQuery.expr.match.POS.test( selector ) ) { + handleObj.isPositional = true; + } + } + + // Init the event handler queue if we're the first + handlers = events[ type ]; + if ( !handlers ) { + handlers = events[ type ] = []; + handlers.delegateCount = 0; + + // Only use addEventListener/attachEvent if the special events handler returns false + if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { + // Bind the global event handler to the element + if ( elem.addEventListener ) { + elem.addEventListener( type, eventHandle, false ); + + } else if ( elem.attachEvent ) { + elem.attachEvent( "on" + type, eventHandle ); + } + } + } + + if ( special.add ) { + special.add.call( elem, handleObj ); + + if ( !handleObj.handler.guid ) { + handleObj.handler.guid = handler.guid; + } + } + + // Add to the element's handler list, delegates in front + if ( selector ) { + handlers.splice( handlers.delegateCount++, 0, handleObj ); + } else { + handlers.push( handleObj ); + } + + // Keep track of which events have ever been used, for event optimization + jQuery.event.global[ type ] = true; + } + + // Nullify elem to prevent memory leaks in IE + elem = null; + }, + + global: {}, + + // Detach an event or set of events from an element + remove: function( elem, types, handler, selector ) { + + var elemData = jQuery.hasData( elem ) && jQuery._data( elem ), + t, tns, type, namespaces, origCount, + j, events, special, handle, eventType, handleObj; + + if ( !elemData || !(events = elemData.events) ) { + return; + } + + // Once for each type.namespace in types; type may be omitted + types = hoverHack( types || "" ).split(" "); + for ( t = 0; t < types.length; t++ ) { + tns = rtypenamespace.exec( types[t] ) || []; + type = tns[1]; + namespaces = tns[2]; + + // Unbind all events (on this namespace, if provided) for the element + if ( !type ) { + namespaces = namespaces? "." + namespaces : ""; + for ( j in events ) { + jQuery.event.remove( elem, j + namespaces, handler, selector ); + } + return; + } + + special = jQuery.event.special[ type ] || {}; + type = ( selector? special.delegateType : special.bindType ) || type; + eventType = events[ type ] || []; + origCount = eventType.length; + namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null; + + // Only need to loop for special events or selective removal + if ( handler || namespaces || selector || special.remove ) { + for ( j = 0; j < eventType.length; j++ ) { + handleObj = eventType[ j ]; + + if ( !handler || handler.guid === handleObj.guid ) { + if ( !namespaces || namespaces.test( handleObj.namespace ) ) { + if ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) { + eventType.splice( j--, 1 ); + + if ( handleObj.selector ) { + eventType.delegateCount--; + } + if ( special.remove ) { + special.remove.call( elem, handleObj ); + } + } + } + } + } + } else { + // Removing all events + eventType.length = 0; + } + + // Remove generic event handler if we removed something and no more handlers exist + // (avoids potential for endless recursion during removal of special event handlers) + if ( eventType.length === 0 && origCount !== eventType.length ) { + if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) { + jQuery.removeEvent( elem, type, elemData.handle ); + } + + delete events[ type ]; + } + } + + // Remove the expando if it's no longer used + if ( jQuery.isEmptyObject( events ) ) { + handle = elemData.handle; + if ( handle ) { + handle.elem = null; + } + + // removeData also checks for emptiness and clears the expando if empty + // so use it instead of delete + jQuery.removeData( elem, [ "events", "handle" ], true ); + } + }, + + // Events that are safe to short-circuit if no handlers are attached. + // Native DOM events should not be added, they may have inline handlers. + customEvent: { + "getData": true, + "setData": true, + "changeData": true + }, + + trigger: function( event, data, elem, onlyHandlers ) { + // Don't do events on text and comment nodes + if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) { + return; + } + + // Event object or event type + var type = event.type || event, + namespaces = [], + cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType; + + if ( type.indexOf( "!" ) >= 0 ) { + // Exclusive events trigger only for the exact event (no namespaces) + type = type.slice(0, -1); + exclusive = true; + } + + if ( type.indexOf( "." ) >= 0 ) { + // Namespaced trigger; create a regexp to match event type in handle() + namespaces = type.split("."); + type = namespaces.shift(); + namespaces.sort(); + } + + if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) { + // No jQuery handlers for this event type, and it can't have inline handlers + return; + } + + // Caller can pass in an Event, Object, or just an event type string + event = typeof event === "object" ? + // jQuery.Event object + event[ jQuery.expando ] ? event : + // Object literal + new jQuery.Event( type, event ) : + // Just the event type (string) + new jQuery.Event( type ); + + event.type = type; + event.isTrigger = true; + event.exclusive = exclusive; + event.namespace = namespaces.join( "." ); + event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null; + ontype = type.indexOf( ":" ) < 0 ? "on" + type : ""; + + // triggerHandler() and global events don't bubble or run the default action + if ( onlyHandlers || !elem ) { + event.preventDefault(); + } + + // Handle a global trigger + if ( !elem ) { + + // TODO: Stop taunting the data cache; remove global events and always attach to document + cache = jQuery.cache; + for ( i in cache ) { + if ( cache[ i ].events && cache[ i ].events[ type ] ) { + jQuery.event.trigger( event, data, cache[ i ].handle.elem, true ); + } + } + return; + } + + // Clean up the event in case it is being reused + event.result = undefined; + if ( !event.target ) { + event.target = elem; + } + + // Clone any incoming data and prepend the event, creating the handler arg list + data = data != null ? jQuery.makeArray( data ) : []; + data.unshift( event ); + + // Allow special events to draw outside the lines + special = jQuery.event.special[ type ] || {}; + if ( special.trigger && special.trigger.apply( elem, data ) === false ) { + return; + } + + // Determine event propagation path in advance, per W3C events spec (#9951) + // Bubble up to document, then to window; watch for a global ownerDocument var (#9724) + eventPath = [[ elem, special.bindType || type ]]; + if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) { + + bubbleType = special.delegateType || type; + old = null; + for ( cur = elem.parentNode; cur; cur = cur.parentNode ) { + eventPath.push([ cur, bubbleType ]); + old = cur; + } + + // Only add window if we got to document (e.g., not plain obj or detached DOM) + if ( old && old === elem.ownerDocument ) { + eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]); + } + } + + // Fire handlers on the event path + for ( i = 0; i < eventPath.length; i++ ) { + + cur = eventPath[i][0]; + event.type = eventPath[i][1]; + + handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" ); + if ( handle ) { + handle.apply( cur, data ); + } + handle = ontype && cur[ ontype ]; + if ( handle && jQuery.acceptData( cur ) ) { + handle.apply( cur, data ); + } + + if ( event.isPropagationStopped() ) { + break; + } + } + event.type = type; + + // If nobody prevented the default action, do it now + if ( !event.isDefaultPrevented() ) { + + if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) && + !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { + + // Call a native DOM method on the target with the same name name as the event. + // Can't use an .isFunction() check here because IE6/7 fails that test. + // Don't do default actions on window, that's where global variables be (#6170) + // IE<9 dies on focus/blur to hidden element (#1486) + if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) { + + // Don't re-trigger an onFOO event when we call its FOO() method + old = elem[ ontype ]; + + if ( old ) { + elem[ ontype ] = null; + } + + // Prevent re-triggering of the same event, since we already bubbled it above + jQuery.event.triggered = type; + elem[ type ](); + jQuery.event.triggered = undefined; + + if ( old ) { + elem[ ontype ] = old; + } + } + } + } + + return event.result; + }, + + dispatch: function( event ) { + + // Make a writable jQuery.Event from the native event object + event = jQuery.event.fix( event || window.event ); + + var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []), + delegateCount = handlers.delegateCount, + args = [].slice.call( arguments, 0 ), + run_all = !event.exclusive && !event.namespace, + specialHandle = ( jQuery.event.special[ event.type ] || {} ).handle, + handlerQueue = [], + i, j, cur, ret, selMatch, matched, matches, handleObj, sel, hit, related; + + // Use the fix-ed jQuery.Event rather than the (read-only) native event + args[0] = event; + event.delegateTarget = this; + + // Determine handlers that should run if there are delegated events + // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861) + if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) { + + for ( cur = event.target; cur != this; cur = cur.parentNode || this ) { + selMatch = {}; + matches = []; + for ( i = 0; i < delegateCount; i++ ) { + handleObj = handlers[ i ]; + sel = handleObj.selector; + hit = selMatch[ sel ]; + + if ( handleObj.isPositional ) { + // Since .is() does not work for positionals; see http://jsfiddle.net/eJ4yd/3/ + hit = ( hit || (selMatch[ sel ] = jQuery( sel )) ).index( cur ) >= 0; + } else if ( hit === undefined ) { + hit = selMatch[ sel ] = ( handleObj.quick ? quickIs( cur, handleObj.quick ) : jQuery( cur ).is( sel ) ); + } + if ( hit ) { + matches.push( handleObj ); + } + } + if ( matches.length ) { + handlerQueue.push({ elem: cur, matches: matches }); + } + } + } + + // Add the remaining (directly-bound) handlers + if ( handlers.length > delegateCount ) { + handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) }); + } + + // Run delegates first; they may want to stop propagation beneath us + for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) { + matched = handlerQueue[ i ]; + event.currentTarget = matched.elem; + + for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) { + handleObj = matched.matches[ j ]; + + // Triggered event must either 1) be non-exclusive and have no namespace, or + // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). + if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) { + + event.data = handleObj.data; + event.handleObj = handleObj; + + ret = ( specialHandle || handleObj.handler ).apply( matched.elem, args ); + + if ( ret !== undefined ) { + event.result = ret; + if ( ret === false ) { + event.preventDefault(); + event.stopPropagation(); + } + } + } + } + } + + return event.result; + }, + + // Includes some event props shared by KeyEvent and MouseEvent + // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 *** + props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), + + fixHooks: {}, + + keyHooks: { + props: "char charCode key keyCode".split(" "), + filter: function( event, original ) { + + // Add which for key events + if ( event.which == null ) { + event.which = original.charCode != null ? original.charCode : original.keyCode; + } + + return event; + } + }, + + mouseHooks: { + props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement wheelDelta".split(" "), + filter: function( event, original ) { + var eventDoc, doc, body, + button = original.button, + fromElement = original.fromElement; + + // Calculate pageX/Y if missing and clientX/Y available + if ( event.pageX == null && original.clientX != null ) { + eventDoc = event.target.ownerDocument || document; + doc = eventDoc.documentElement; + body = eventDoc.body; + + event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); + event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); + } + + // Add relatedTarget, if necessary + if ( !event.relatedTarget && fromElement ) { + event.relatedTarget = fromElement === event.target ? original.toElement : fromElement; + } + + // Add which for click: 1 === left; 2 === middle; 3 === right + // Note: button is not normalized, so don't use it + if ( !event.which && button !== undefined ) { + event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); + } + + return event; + } + }, + + fix: function( event ) { + if ( event[ jQuery.expando ] ) { + return event; + } + + // Create a writable copy of the event object and normalize some properties + var i, prop, + originalEvent = event, + fixHook = jQuery.event.fixHooks[ event.type ] || {}, + copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props; + + event = jQuery.Event( originalEvent ); + + for ( i = copy.length; i; ) { + prop = copy[ --i ]; + event[ prop ] = originalEvent[ prop ]; + } + + // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2) + if ( !event.target ) { + event.target = originalEvent.srcElement || document; + } + + // Target should not be a text node (#504, Safari) + if ( event.target.nodeType === 3 ) { + event.target = event.target.parentNode; + } + + // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8) + if ( event.metaKey === undefined ) { + event.metaKey = event.ctrlKey; + } + + return fixHook.filter? fixHook.filter( event, originalEvent ) : event; + }, + + special: { + ready: { + // Make sure the ready event is setup + setup: jQuery.bindReady + }, + + focus: { + delegateType: "focusin", + noBubble: true + }, + blur: { + delegateType: "focusout", + noBubble: true + }, + + beforeunload: { + setup: function( data, namespaces, eventHandle ) { + // We only want to do this special case on windows + if ( jQuery.isWindow( this ) ) { + this.onbeforeunload = eventHandle; + } + }, + + teardown: function( namespaces, eventHandle ) { + if ( this.onbeforeunload === eventHandle ) { + this.onbeforeunload = null; + } + } + } + }, + + simulate: function( type, elem, event, bubble ) { + // Piggyback on a donor event to simulate a different one. + // Fake originalEvent to avoid donor's stopPropagation, but if the + // simulated event prevents default then we do the same on the donor. + var e = jQuery.extend( + new jQuery.Event(), + event, + { type: type, + isSimulated: true, + originalEvent: {} + } + ); + if ( bubble ) { + jQuery.event.trigger( e, null, elem ); + } else { + jQuery.event.dispatch.call( elem, e ); + } + if ( e.isDefaultPrevented() ) { + event.preventDefault(); + } + } + }; + + // Some plugins are using, but it's undocumented/deprecated and will be removed. + // The 1.7 special event interface should provide all the hooks needed now. + jQuery.event.handle = jQuery.event.dispatch; + + jQuery.removeEvent = document.removeEventListener ? + function( elem, type, handle ) { + if ( elem.removeEventListener ) { + elem.removeEventListener( type, handle, false ); + } + } : + function( elem, type, handle ) { + if ( elem.detachEvent ) { + elem.detachEvent( "on" + type, handle ); + } + }; + + jQuery.Event = function( src, props ) { + // Allow instantiation without the 'new' keyword + if ( !(this instanceof jQuery.Event) ) { + return new jQuery.Event( src, props ); + } + + // Event object + if ( src && src.type ) { + this.originalEvent = src; + this.type = src.type; + + // Events bubbling up the document may have been marked as prevented + // by a handler lower down the tree; reflect the correct value. + this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false || + src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse; + + // Event type + } else { + this.type = src; + } + + // Put explicitly provided properties onto the event object + if ( props ) { + jQuery.extend( this, props ); + } + + // Create a timestamp if incoming event doesn't have one + this.timeStamp = src && src.timeStamp || jQuery.now(); + + // Mark it as fixed + this[ jQuery.expando ] = true; + }; + + function returnFalse() { + return false; + } + function returnTrue() { + return true; + } + + // jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding + // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html + jQuery.Event.prototype = { + preventDefault: function() { + this.isDefaultPrevented = returnTrue; + + var e = this.originalEvent; + if ( !e ) { + return; + } + + // if preventDefault exists run it on the original event + if ( e.preventDefault ) { + e.preventDefault(); + + // otherwise set the returnValue property of the original event to false (IE) + } else { + e.returnValue = false; + } + }, + stopPropagation: function() { + this.isPropagationStopped = returnTrue; + + var e = this.originalEvent; + if ( !e ) { + return; + } + // if stopPropagation exists run it on the original event + if ( e.stopPropagation ) { + e.stopPropagation(); + } + // otherwise set the cancelBubble property of the original event to true (IE) + e.cancelBubble = true; + }, + stopImmediatePropagation: function() { + this.isImmediatePropagationStopped = returnTrue; + this.stopPropagation(); + }, + isDefaultPrevented: returnFalse, + isPropagationStopped: returnFalse, + isImmediatePropagationStopped: returnFalse + }; + + // Create mouseenter/leave events using mouseover/out and event-time checks + jQuery.each({ + mouseenter: "mouseover", + mouseleave: "mouseout" + }, function( orig, fix ) { + jQuery.event.special[ orig ] = jQuery.event.special[ fix ] = { + delegateType: fix, + bindType: fix, + + handle: function( event ) { + var target = this, + related = event.relatedTarget, + handleObj = event.handleObj, + selector = handleObj.selector, + oldType, ret; + + // For a real mouseover/out, always call the handler; for + // mousenter/leave call the handler if related is outside the target. + // NB: No relatedTarget if the mouse left/entered the browser window + if ( !related || handleObj.origType === event.type || (related !== target && !jQuery.contains( target, related )) ) { + oldType = event.type; + event.type = handleObj.origType; + ret = handleObj.handler.apply( this, arguments ); + event.type = oldType; + } + return ret; + } + }; + }); + + // IE submit delegation + if ( !jQuery.support.submitBubbles ) { + + jQuery.event.special.submit = { + setup: function() { + // Only need this for delegated form submit events + if ( jQuery.nodeName( this, "form" ) ) { + return false; + } + + // Lazy-add a submit handler when a descendant form may potentially be submitted + jQuery.event.add( this, "click._submit keypress._submit", function( e ) { + // Node name check avoids a VML-related crash in IE (#9807) + var elem = e.target, + form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined; + if ( form && !form._submit_attached ) { + jQuery.event.add( form, "submit._submit", function( event ) { + // Form was submitted, bubble the event up the tree + if ( this.parentNode ) { + jQuery.event.simulate( "submit", this.parentNode, event, true ); + } + }); + form._submit_attached = true; + } + }); + // return undefined since we don't need an event listener + }, + + teardown: function() { + // Only need this for delegated form submit events + if ( jQuery.nodeName( this, "form" ) ) { + return false; + } + + // Remove delegated handlers; cleanData eventually reaps submit handlers attached above + jQuery.event.remove( this, "._submit" ); + } + }; + } + + // IE change delegation and checkbox/radio fix + if ( !jQuery.support.changeBubbles ) { + + jQuery.event.special.change = { + + setup: function() { + + if ( rformElems.test( this.nodeName ) ) { + // IE doesn't fire change on a check/radio until blur; trigger it on click + // after a propertychange. Eat the blur-change in special.change.handle. + // This still fires onchange a second time for check/radio after blur. + if ( this.type === "checkbox" || this.type === "radio" ) { + jQuery.event.add( this, "propertychange._change", function( event ) { + if ( event.originalEvent.propertyName === "checked" ) { + this._just_changed = true; + } + }); + jQuery.event.add( this, "click._change", function( event ) { + if ( this._just_changed ) { + this._just_changed = false; + jQuery.event.simulate( "change", this, event, true ); + } + }); + } + return false; + } + // Delegated event; lazy-add a change handler on descendant inputs + jQuery.event.add( this, "beforeactivate._change", function( e ) { + var elem = e.target; + + if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) { + jQuery.event.add( elem, "change._change", function( event ) { + if ( this.parentNode && !event.isSimulated ) { + jQuery.event.simulate( "change", this.parentNode, event, true ); + } + }); + elem._change_attached = true; + } + }); + }, + + handle: function( event ) { + var elem = event.target; + + // Swallow native change events from checkbox/radio, we already triggered them above + if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) { + return event.handleObj.handler.apply( this, arguments ); + } + }, + + teardown: function() { + jQuery.event.remove( this, "._change" ); + + return rformElems.test( this.nodeName ); + } + }; + } + + // Create "bubbling" focus and blur events + if ( !jQuery.support.focusinBubbles ) { + jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) { + + // Attach a single capturing handler while someone wants focusin/focusout + var attaches = 0, + handler = function( event ) { + jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true ); + }; + + jQuery.event.special[ fix ] = { + setup: function() { + if ( attaches++ === 0 ) { + document.addEventListener( orig, handler, true ); + } + }, + teardown: function() { + if ( --attaches === 0 ) { + document.removeEventListener( orig, handler, true ); + } + } + }; + }); + } + + jQuery.fn.extend({ + + on: function( types, selector, data, fn, /*INTERNAL*/ one ) { + var origFn, type; + + // Types can be a map of types/handlers + if ( typeof types === "object" ) { + // ( types-Object, selector, data ) + if ( typeof selector !== "string" ) { + // ( types-Object, data ) + data = selector; + selector = undefined; + } + for ( type in types ) { + this.on( type, selector, data, types[ type ], one ); + } + return this; + } + + if ( data == null && fn == null ) { + // ( types, fn ) + fn = selector; + data = selector = undefined; + } else if ( fn == null ) { + if ( typeof selector === "string" ) { + // ( types, selector, fn ) + fn = data; + data = undefined; + } else { + // ( types, data, fn ) + fn = data; + data = selector; + selector = undefined; + } + } + if ( fn === false ) { + fn = returnFalse; + } else if ( !fn ) { + return this; + } + + if ( one === 1 ) { + origFn = fn; + fn = function( event ) { + // Can use an empty set, since event contains the info + jQuery().off( event ); + return origFn.apply( this, arguments ); + }; + // Use same guid so caller can remove using origFn + fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); + } + return this.each( function() { + jQuery.event.add( this, types, fn, data, selector ); + }); + }, + one: function( types, selector, data, fn ) { + return this.on.call( this, types, selector, data, fn, 1 ); + }, + off: function( types, selector, fn ) { + if ( types && types.preventDefault && types.handleObj ) { + // ( event ) dispatched jQuery.Event + var handleObj = types.handleObj; + jQuery( types.delegateTarget ).off( + handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type, + handleObj.selector, + handleObj.handler + ); + return this; + } + if ( typeof types === "object" ) { + // ( types-object [, selector] ) + for ( var type in types ) { + this.off( type, selector, types[ type ] ); + } + return this; + } + if ( selector === false || typeof selector === "function" ) { + // ( types [, fn] ) + fn = selector; + selector = undefined; + } + if ( fn === false ) { + fn = returnFalse; + } + return this.each(function() { + jQuery.event.remove( this, types, fn, selector ); + }); + }, + + bind: function( types, data, fn ) { + return this.on( types, null, data, fn ); + }, + unbind: function( types, fn ) { + return this.off( types, null, fn ); + }, + + live: function( types, data, fn ) { + jQuery( this.context ).on( types, this.selector, data, fn ); + return this; + }, + die: function( types, fn ) { + jQuery( this.context ).off( types, this.selector || "**", fn ); + return this; + }, + + delegate: function( selector, types, data, fn ) { + return this.on( types, selector, data, fn ); + }, + undelegate: function( selector, types, fn ) { + // ( namespace ) or ( selector, types [, fn] ) + return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn ); + }, + + trigger: function( type, data ) { + return this.each(function() { + jQuery.event.trigger( type, data, this ); + }); + }, + triggerHandler: function( type, data ) { + if ( this[0] ) { + return jQuery.event.trigger( type, data, this[0], true ); + } + }, + + toggle: function( fn ) { + // Save reference to arguments for access in closure + var args = arguments, + guid = fn.guid || jQuery.guid++, + i = 0, + toggler = function( event ) { + // Figure out which function to execute + var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; + jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); + + // Make sure that clicks stop + event.preventDefault(); + + // and execute the function + return args[ lastToggle ].apply( this, arguments ) || false; + }; + + // link all the functions, so any of them can unbind this click handler + toggler.guid = guid; + while ( i < args.length ) { + args[ i++ ].guid = guid; + } + + return this.click( toggler ); + }, + + hover: function( fnOver, fnOut ) { + return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); + } + }); + + jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + + "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { + + // Handle event binding + jQuery.fn[ name ] = function( data, fn ) { + if ( fn == null ) { + fn = data; + data = null; + } + + return arguments.length > 0 ? + this.bind( name, data, fn ) : + this.trigger( name ); + }; + + if ( jQuery.attrFn ) { + jQuery.attrFn[ name ] = true; + } + + if ( rkeyEvent.test( name ) ) { + jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks; + } + + if ( rmouseEvent.test( name ) ) { + jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks; + } + }); + + + + /*! + * Sizzle CSS Selector Engine + * Copyright 2011, The Dojo Foundation + * Released under the MIT, BSD, and GPL Licenses. + * More information: http://sizzlejs.com/ + */ + (function(){ + + var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, + expando = "sizcache" + (Math.random() + '').replace('.', ''), + done = 0, + toString = Object.prototype.toString, + hasDuplicate = false, + baseHasDuplicate = true, + rBackslash = /\\/g, + rReturn = /\r\n/g, + rNonWord = /\W/; + + // Here we check if the JavaScript engine is using some sort of + // optimization where it does not always call our comparision + // function. If that is the case, discard the hasDuplicate value. + // Thus far that includes Google Chrome. + [0, 0].sort(function() { + baseHasDuplicate = false; + return 0; + }); + + var Sizzle = function( selector, context, results, seed ) { + results = results || []; + context = context || document; + + var origContext = context; + + if ( context.nodeType !== 1 && context.nodeType !== 9 ) { + return []; + } + + if ( !selector || typeof selector !== "string" ) { + return results; + } + + var m, set, checkSet, extra, ret, cur, pop, i, + prune = true, + contextXML = Sizzle.isXML( context ), + parts = [], + soFar = selector; + + // Reset the position of the chunker regexp (start from head) + do { + chunker.exec( "" ); + m = chunker.exec( soFar ); + + if ( m ) { + soFar = m[3]; + + parts.push( m[1] ); + + if ( m[2] ) { + extra = m[3]; + break; + } + } + } while ( m ); + + if ( parts.length > 1 && origPOS.exec( selector ) ) { + + if ( parts.length === 2 && Expr.relative[ parts[0] ] ) { + set = posProcess( parts[0] + parts[1], context, seed ); + + } else { + set = Expr.relative[ parts[0] ] ? + [ context ] : + Sizzle( parts.shift(), context ); + + while ( parts.length ) { + selector = parts.shift(); + + if ( Expr.relative[ selector ] ) { + selector += parts.shift(); + } + + set = posProcess( selector, set, seed ); + } + } + + } else { + // Take a shortcut and set the context if the root selector is an ID + // (but not if it'll be faster if the inner selector is an ID) + if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML && + Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) { + + ret = Sizzle.find( parts.shift(), context, contextXML ); + context = ret.expr ? + Sizzle.filter( ret.expr, ret.set )[0] : + ret.set[0]; + } + + if ( context ) { + ret = seed ? + { expr: parts.pop(), set: makeArray(seed) } : + Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML ); + + set = ret.expr ? + Sizzle.filter( ret.expr, ret.set ) : + ret.set; + + if ( parts.length > 0 ) { + checkSet = makeArray( set ); + + } else { + prune = false; + } + + while ( parts.length ) { + cur = parts.pop(); + pop = cur; + + if ( !Expr.relative[ cur ] ) { + cur = ""; + } else { + pop = parts.pop(); + } + + if ( pop == null ) { + pop = context; + } + + Expr.relative[ cur ]( checkSet, pop, contextXML ); + } + + } else { + checkSet = parts = []; + } + } + + if ( !checkSet ) { + checkSet = set; + } + + if ( !checkSet ) { + Sizzle.error( cur || selector ); + } + + if ( toString.call(checkSet) === "[object Array]" ) { + if ( !prune ) { + results.push.apply( results, checkSet ); + + } else if ( context && context.nodeType === 1 ) { + for ( i = 0; checkSet[i] != null; i++ ) { + if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) { + results.push( set[i] ); + } + } + + } else { + for ( i = 0; checkSet[i] != null; i++ ) { + if ( checkSet[i] && checkSet[i].nodeType === 1 ) { + results.push( set[i] ); + } + } + } + + } else { + makeArray( checkSet, results ); + } + + if ( extra ) { + Sizzle( extra, origContext, results, seed ); + Sizzle.uniqueSort( results ); + } + + return results; + }; + + Sizzle.uniqueSort = function( results ) { + if ( sortOrder ) { + hasDuplicate = baseHasDuplicate; + results.sort( sortOrder ); + + if ( hasDuplicate ) { + for ( var i = 1; i < results.length; i++ ) { + if ( results[i] === results[ i - 1 ] ) { + results.splice( i--, 1 ); + } + } + } + } + + return results; + }; + + Sizzle.matches = function( expr, set ) { + return Sizzle( expr, null, null, set ); + }; + + Sizzle.matchesSelector = function( node, expr ) { + return Sizzle( expr, null, null, [node] ).length > 0; + }; + + Sizzle.find = function( expr, context, isXML ) { + var set, i, len, match, type, left; + + if ( !expr ) { + return []; + } + + for ( i = 0, len = Expr.order.length; i < len; i++ ) { + type = Expr.order[i]; + + if ( (match = Expr.leftMatch[ type ].exec( expr )) ) { + left = match[1]; + match.splice( 1, 1 ); + + if ( left.substr( left.length - 1 ) !== "\\" ) { + match[1] = (match[1] || "").replace( rBackslash, "" ); + set = Expr.find[ type ]( match, context, isXML ); + + if ( set != null ) { + expr = expr.replace( Expr.match[ type ], "" ); + break; + } + } + } + } + + if ( !set ) { + set = typeof context.getElementsByTagName !== "undefined" ? + context.getElementsByTagName( "*" ) : + []; + } + + return { set: set, expr: expr }; + }; + + Sizzle.filter = function( expr, set, inplace, not ) { + var match, anyFound, + type, found, item, filter, left, + i, pass, + old = expr, + result = [], + curLoop = set, + isXMLFilter = set && set[0] && Sizzle.isXML( set[0] ); + + while ( expr && set.length ) { + for ( type in Expr.filter ) { + if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) { + filter = Expr.filter[ type ]; + left = match[1]; + + anyFound = false; + + match.splice(1,1); + + if ( left.substr( left.length - 1 ) === "\\" ) { + continue; + } + + if ( curLoop === result ) { + result = []; + } + + if ( Expr.preFilter[ type ] ) { + match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter ); + + if ( !match ) { + anyFound = found = true; + + } else if ( match === true ) { + continue; + } + } + + if ( match ) { + for ( i = 0; (item = curLoop[i]) != null; i++ ) { + if ( item ) { + found = filter( item, match, i, curLoop ); + pass = not ^ found; + + if ( inplace && found != null ) { + if ( pass ) { + anyFound = true; + + } else { + curLoop[i] = false; + } + + } else if ( pass ) { + result.push( item ); + anyFound = true; + } + } + } + } + + if ( found !== undefined ) { + if ( !inplace ) { + curLoop = result; + } + + expr = expr.replace( Expr.match[ type ], "" ); + + if ( !anyFound ) { + return []; + } + + break; + } + } + } + + // Improper expression + if ( expr === old ) { + if ( anyFound == null ) { + Sizzle.error( expr ); + + } else { + break; + } + } + + old = expr; + } + + return curLoop; + }; + + Sizzle.error = function( msg ) { + throw "Syntax error, unrecognized expression: " + msg; + }; + + /** + * Utility function for retreiving the text value of an array of DOM nodes + * @param {Array|Element} elem + */ + var getText = Sizzle.getText = function( elem ) { + var i, node, + nodeType = elem.nodeType, + ret = ""; + + if ( nodeType ) { + if ( nodeType === 1 ) { + // Use textContent || innerText for elements + if ( typeof elem.textContent === 'string' ) { + return elem.textContent; + } else if ( typeof elem.innerText === 'string' ) { + // Replace IE's carriage returns + return elem.innerText.replace( rReturn, '' ); + } else { + // Traverse it's children + for ( elem = elem.firstChild; elem; elem = elem.nextSibling) { + ret += getText( elem ); + } + } + } else if ( nodeType === 3 || nodeType === 4 ) { + return elem.nodeValue; + } + } else { + + // If no nodeType, this is expected to be an array + for ( i = 0; (node = elem[i]); i++ ) { + // Do not traverse comment nodes + if ( node.nodeType !== 8 ) { + ret += getText( node ); + } + } + } + return ret; + }; + + var Expr = Sizzle.selectors = { + order: [ "ID", "NAME", "TAG" ], + + match: { + ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, + CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, + NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/, + ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/, + TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/, + CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/, + POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/, + PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ + }, + + leftMatch: {}, + + attrMap: { + "class": "className", + "for": "htmlFor" + }, + + attrHandle: { + href: function( elem ) { + return elem.getAttribute( "href" ); + }, + type: function( elem ) { + return elem.getAttribute( "type" ); + } + }, + + relative: { + "+": function(checkSet, part){ + var isPartStr = typeof part === "string", + isTag = isPartStr && !rNonWord.test( part ), + isPartStrNotTag = isPartStr && !isTag; + + if ( isTag ) { + part = part.toLowerCase(); + } + + for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) { + if ( (elem = checkSet[i]) ) { + while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {} + + checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ? + elem || false : + elem === part; + } + } + + if ( isPartStrNotTag ) { + Sizzle.filter( part, checkSet, true ); + } + }, + + ">": function( checkSet, part ) { + var elem, + isPartStr = typeof part === "string", + i = 0, + l = checkSet.length; + + if ( isPartStr && !rNonWord.test( part ) ) { + part = part.toLowerCase(); + + for ( ; i < l; i++ ) { + elem = checkSet[i]; + + if ( elem ) { + var parent = elem.parentNode; + checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false; + } + } + + } else { + for ( ; i < l; i++ ) { + elem = checkSet[i]; + + if ( elem ) { + checkSet[i] = isPartStr ? + elem.parentNode : + elem.parentNode === part; + } + } + + if ( isPartStr ) { + Sizzle.filter( part, checkSet, true ); + } + } + }, + + "": function(checkSet, part, isXML){ + var nodeCheck, + doneName = done++, + checkFn = dirCheck; + + if ( typeof part === "string" && !rNonWord.test( part ) ) { + part = part.toLowerCase(); + nodeCheck = part; + checkFn = dirNodeCheck; + } + + checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML ); + }, + + "~": function( checkSet, part, isXML ) { + var nodeCheck, + doneName = done++, + checkFn = dirCheck; + + if ( typeof part === "string" && !rNonWord.test( part ) ) { + part = part.toLowerCase(); + nodeCheck = part; + checkFn = dirNodeCheck; + } + + checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML ); + } + }, + + find: { + ID: function( match, context, isXML ) { + if ( typeof context.getElementById !== "undefined" && !isXML ) { + var m = context.getElementById(match[1]); + // Check parentNode to catch when Blackberry 4.6 returns + // nodes that are no longer in the document #6963 + return m && m.parentNode ? [m] : []; + } + }, + + NAME: function( match, context ) { + if ( typeof context.getElementsByName !== "undefined" ) { + var ret = [], + results = context.getElementsByName( match[1] ); + + for ( var i = 0, l = results.length; i < l; i++ ) { + if ( results[i].getAttribute("name") === match[1] ) { + ret.push( results[i] ); + } + } + + return ret.length === 0 ? null : ret; + } + }, + + TAG: function( match, context ) { + if ( typeof context.getElementsByTagName !== "undefined" ) { + return context.getElementsByTagName( match[1] ); + } + } + }, + preFilter: { + CLASS: function( match, curLoop, inplace, result, not, isXML ) { + match = " " + match[1].replace( rBackslash, "" ) + " "; + + if ( isXML ) { + return match; + } + + for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) { + if ( elem ) { + if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) { + if ( !inplace ) { + result.push( elem ); + } + + } else if ( inplace ) { + curLoop[i] = false; + } + } + } + + return false; + }, + + ID: function( match ) { + return match[1].replace( rBackslash, "" ); + }, + + TAG: function( match, curLoop ) { + return match[1].replace( rBackslash, "" ).toLowerCase(); + }, + + CHILD: function( match ) { + if ( match[1] === "nth" ) { + if ( !match[2] ) { + Sizzle.error( match[0] ); + } + + match[2] = match[2].replace(/^\+|\s*/g, ''); + + // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6' + var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec( + match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" || + !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]); + + // calculate the numbers (first)n+(last) including if they are negative + match[2] = (test[1] + (test[2] || 1)) - 0; + match[3] = test[3] - 0; + } + else if ( match[2] ) { + Sizzle.error( match[0] ); + } + + // TODO: Move to normal caching system + match[0] = done++; + + return match; + }, + + ATTR: function( match, curLoop, inplace, result, not, isXML ) { + var name = match[1] = match[1].replace( rBackslash, "" ); + + if ( !isXML && Expr.attrMap[name] ) { + match[1] = Expr.attrMap[name]; + } + + // Handle if an un-quoted value was used + match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" ); + + if ( match[2] === "~=" ) { + match[4] = " " + match[4] + " "; + } + + return match; + }, + + PSEUDO: function( match, curLoop, inplace, result, not ) { + if ( match[1] === "not" ) { + // If we're dealing with a complex expression, or a simple one + if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) { + match[3] = Sizzle(match[3], null, null, curLoop); + + } else { + var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not); + + if ( !inplace ) { + result.push.apply( result, ret ); + } + + return false; + } + + } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) { + return true; + } + + return match; + }, + + POS: function( match ) { + match.unshift( true ); + + return match; + } + }, + + filters: { + enabled: function( elem ) { + return elem.disabled === false && elem.type !== "hidden"; + }, + + disabled: function( elem ) { + return elem.disabled === true; + }, + + checked: function( elem ) { + return elem.checked === true; + }, + + selected: function( elem ) { + // Accessing this property makes selected-by-default + // options in Safari work properly + if ( elem.parentNode ) { + elem.parentNode.selectedIndex; + } + + return elem.selected === true; + }, + + parent: function( elem ) { + return !!elem.firstChild; + }, + + empty: function( elem ) { + return !elem.firstChild; + }, + + has: function( elem, i, match ) { + return !!Sizzle( match[3], elem ).length; + }, + + header: function( elem ) { + return (/h\d/i).test( elem.nodeName ); + }, + + text: function( elem ) { + var attr = elem.getAttribute( "type" ), type = elem.type; + // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc) + // use getAttribute instead to test this case + return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null ); + }, + + radio: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type; + }, + + checkbox: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type; + }, + + file: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "file" === elem.type; + }, + + password: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "password" === elem.type; + }, + + submit: function( elem ) { + var name = elem.nodeName.toLowerCase(); + return (name === "input" || name === "button") && "submit" === elem.type; + }, + + image: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "image" === elem.type; + }, + + reset: function( elem ) { + var name = elem.nodeName.toLowerCase(); + return (name === "input" || name === "button") && "reset" === elem.type; + }, + + button: function( elem ) { + var name = elem.nodeName.toLowerCase(); + return name === "input" && "button" === elem.type || name === "button"; + }, + + input: function( elem ) { + return (/input|select|textarea|button/i).test( elem.nodeName ); + }, + + focus: function( elem ) { + return elem === elem.ownerDocument.activeElement; + } + }, + setFilters: { + first: function( elem, i ) { + return i === 0; + }, + + last: function( elem, i, match, array ) { + return i === array.length - 1; + }, + + even: function( elem, i ) { + return i % 2 === 0; + }, + + odd: function( elem, i ) { + return i % 2 === 1; + }, + + lt: function( elem, i, match ) { + return i < match[3] - 0; + }, + + gt: function( elem, i, match ) { + return i > match[3] - 0; + }, + + nth: function( elem, i, match ) { + return match[3] - 0 === i; + }, + + eq: function( elem, i, match ) { + return match[3] - 0 === i; + } + }, + filter: { + PSEUDO: function( elem, match, i, array ) { + var name = match[1], + filter = Expr.filters[ name ]; + + if ( filter ) { + return filter( elem, i, match, array ); + + } else if ( name === "contains" ) { + return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0; + + } else if ( name === "not" ) { + var not = match[3]; + + for ( var j = 0, l = not.length; j < l; j++ ) { + if ( not[j] === elem ) { + return false; + } + } + + return true; + + } else { + Sizzle.error( name ); + } + }, + + CHILD: function( elem, match ) { + var first, last, + doneName, parent, cache, + count, diff, + type = match[1], + node = elem; + + switch ( type ) { + case "only": + case "first": + while ( (node = node.previousSibling) ) { + if ( node.nodeType === 1 ) { + return false; + } + } + + if ( type === "first" ) { + return true; + } + + node = elem; + + case "last": + while ( (node = node.nextSibling) ) { + if ( node.nodeType === 1 ) { + return false; + } + } + + return true; + + case "nth": + first = match[2]; + last = match[3]; + + if ( first === 1 && last === 0 ) { + return true; + } + + doneName = match[0]; + parent = elem.parentNode; + + if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) { + count = 0; + + for ( node = parent.firstChild; node; node = node.nextSibling ) { + if ( node.nodeType === 1 ) { + node.nodeIndex = ++count; + } + } + + parent[ expando ] = doneName; + } + + diff = elem.nodeIndex - last; + + if ( first === 0 ) { + return diff === 0; + + } else { + return ( diff % first === 0 && diff / first >= 0 ); + } + } + }, + + ID: function( elem, match ) { + return elem.nodeType === 1 && elem.getAttribute("id") === match; + }, + + TAG: function( elem, match ) { + return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match; + }, + + CLASS: function( elem, match ) { + return (" " + (elem.className || elem.getAttribute("class")) + " ") + .indexOf( match ) > -1; + }, + + ATTR: function( elem, match ) { + var name = match[1], + result = Sizzle.attr ? + Sizzle.attr( elem, name ) : + Expr.attrHandle[ name ] ? + Expr.attrHandle[ name ]( elem ) : + elem[ name ] != null ? + elem[ name ] : + elem.getAttribute( name ), + value = result + "", + type = match[2], + check = match[4]; + + return result == null ? + type === "!=" : + !type && Sizzle.attr ? + result != null : + type === "=" ? + value === check : + type === "*=" ? + value.indexOf(check) >= 0 : + type === "~=" ? + (" " + value + " ").indexOf(check) >= 0 : + !check ? + value && result !== false : + type === "!=" ? + value !== check : + type === "^=" ? + value.indexOf(check) === 0 : + type === "$=" ? + value.substr(value.length - check.length) === check : + type === "|=" ? + value === check || value.substr(0, check.length + 1) === check + "-" : + false; + }, + + POS: function( elem, match, i, array ) { + var name = match[2], + filter = Expr.setFilters[ name ]; + + if ( filter ) { + return filter( elem, i, match, array ); + } + } + } + }; + + var origPOS = Expr.match.POS, + fescape = function(all, num){ + return "\\" + (num - 0 + 1); + }; + + for ( var type in Expr.match ) { + Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ); + Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) ); + } + + var makeArray = function( array, results ) { + array = Array.prototype.slice.call( array, 0 ); + + if ( results ) { + results.push.apply( results, array ); + return results; + } + + return array; + }; + + // Perform a simple check to determine if the browser is capable of + // converting a NodeList to an array using builtin methods. + // Also verifies that the returned array holds DOM nodes + // (which is not the case in the Blackberry browser) + try { + Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType; + + // Provide a fallback method if it does not work + } catch( e ) { + makeArray = function( array, results ) { + var i = 0, + ret = results || []; + + if ( toString.call(array) === "[object Array]" ) { + Array.prototype.push.apply( ret, array ); + + } else { + if ( typeof array.length === "number" ) { + for ( var l = array.length; i < l; i++ ) { + ret.push( array[i] ); + } + + } else { + for ( ; array[i]; i++ ) { + ret.push( array[i] ); + } + } + } + + return ret; + }; + } + + var sortOrder, siblingCheck; + + if ( document.documentElement.compareDocumentPosition ) { + sortOrder = function( a, b ) { + if ( a === b ) { + hasDuplicate = true; + return 0; + } + + if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) { + return a.compareDocumentPosition ? -1 : 1; + } + + return a.compareDocumentPosition(b) & 4 ? -1 : 1; + }; + + } else { + sortOrder = function( a, b ) { + // The nodes are identical, we can exit early + if ( a === b ) { + hasDuplicate = true; + return 0; + + // Fallback to using sourceIndex (in IE) if it's available on both nodes + } else if ( a.sourceIndex && b.sourceIndex ) { + return a.sourceIndex - b.sourceIndex; + } + + var al, bl, + ap = [], + bp = [], + aup = a.parentNode, + bup = b.parentNode, + cur = aup; + + // If the nodes are siblings (or identical) we can do a quick check + if ( aup === bup ) { + return siblingCheck( a, b ); + + // If no parents were found then the nodes are disconnected + } else if ( !aup ) { + return -1; + + } else if ( !bup ) { + return 1; + } + + // Otherwise they're somewhere else in the tree so we need + // to build up a full list of the parentNodes for comparison + while ( cur ) { + ap.unshift( cur ); + cur = cur.parentNode; + } + + cur = bup; + + while ( cur ) { + bp.unshift( cur ); + cur = cur.parentNode; + } + + al = ap.length; + bl = bp.length; + + // Start walking down the tree looking for a discrepancy + for ( var i = 0; i < al && i < bl; i++ ) { + if ( ap[i] !== bp[i] ) { + return siblingCheck( ap[i], bp[i] ); + } + } + + // We ended someplace up the tree so do a sibling check + return i === al ? + siblingCheck( a, bp[i], -1 ) : + siblingCheck( ap[i], b, 1 ); + }; + + siblingCheck = function( a, b, ret ) { + if ( a === b ) { + return ret; + } + + var cur = a.nextSibling; + + while ( cur ) { + if ( cur === b ) { + return -1; + } + + cur = cur.nextSibling; + } + + return 1; + }; + } + + // Check to see if the browser returns elements by name when + // querying by getElementById (and provide a workaround) + (function(){ + // We're going to inject a fake input element with a specified name + var form = document.createElement("div"), + id = "script" + (new Date()).getTime(), + root = document.documentElement; + + form.innerHTML = ""; + + // Inject it into the root element, check its status, and remove it quickly + root.insertBefore( form, root.firstChild ); + + // The workaround has to do additional checks after a getElementById + // Which slows things down for other browsers (hence the branching) + if ( document.getElementById( id ) ) { + Expr.find.ID = function( match, context, isXML ) { + if ( typeof context.getElementById !== "undefined" && !isXML ) { + var m = context.getElementById(match[1]); + + return m ? + m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ? + [m] : + undefined : + []; + } + }; + + Expr.filter.ID = function( elem, match ) { + var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id"); + + return elem.nodeType === 1 && node && node.nodeValue === match; + }; + } + + root.removeChild( form ); + + // release memory in IE + root = form = null; + })(); + + (function(){ + // Check to see if the browser returns only elements + // when doing getElementsByTagName("*") + + // Create a fake element + var div = document.createElement("div"); + div.appendChild( document.createComment("") ); + + // Make sure no comments are found + if ( div.getElementsByTagName("*").length > 0 ) { + Expr.find.TAG = function( match, context ) { + var results = context.getElementsByTagName( match[1] ); + + // Filter out possible comments + if ( match[1] === "*" ) { + var tmp = []; + + for ( var i = 0; results[i]; i++ ) { + if ( results[i].nodeType === 1 ) { + tmp.push( results[i] ); + } + } + + results = tmp; + } + + return results; + }; + } + + // Check to see if an attribute returns normalized href attributes + div.innerHTML = ""; + + if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" && + div.firstChild.getAttribute("href") !== "#" ) { + + Expr.attrHandle.href = function( elem ) { + return elem.getAttribute( "href", 2 ); + }; + } + + // release memory in IE + div = null; + })(); + + if ( document.querySelectorAll ) { + (function(){ + var oldSizzle = Sizzle, + div = document.createElement("div"), + id = "__sizzle__"; + + div.innerHTML = "

"; + + // Safari can't handle uppercase or unicode characters when + // in quirks mode. + if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { + return; + } + + Sizzle = function( query, context, extra, seed ) { + context = context || document; + + // Only use querySelectorAll on non-XML documents + // (ID selectors don't work in non-HTML documents) + if ( !seed && !Sizzle.isXML(context) ) { + // See if we find a selector to speed up + var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query ); + + if ( match && (context.nodeType === 1 || context.nodeType === 9) ) { + // Speed-up: Sizzle("TAG") + if ( match[1] ) { + return makeArray( context.getElementsByTagName( query ), extra ); + + // Speed-up: Sizzle(".CLASS") + } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) { + return makeArray( context.getElementsByClassName( match[2] ), extra ); + } + } + + if ( context.nodeType === 9 ) { + // Speed-up: Sizzle("body") + // The body element only exists once, optimize finding it + if ( query === "body" && context.body ) { + return makeArray( [ context.body ], extra ); + + // Speed-up: Sizzle("#ID") + } else if ( match && match[3] ) { + var elem = context.getElementById( match[3] ); + + // Check parentNode to catch when Blackberry 4.6 returns + // nodes that are no longer in the document #6963 + if ( elem && elem.parentNode ) { + // Handle the case where IE and Opera return items + // by name instead of ID + if ( elem.id === match[3] ) { + return makeArray( [ elem ], extra ); + } + + } else { + return makeArray( [], extra ); + } + } + + try { + return makeArray( context.querySelectorAll(query), extra ); + } catch(qsaError) {} + + // qSA works strangely on Element-rooted queries + // We can work around this by specifying an extra ID on the root + // and working up from there (Thanks to Andrew Dupont for the technique) + // IE 8 doesn't work on object elements + } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { + var oldContext = context, + old = context.getAttribute( "id" ), + nid = old || id, + hasParent = context.parentNode, + relativeHierarchySelector = /^\s*[+~]/.test( query ); + + if ( !old ) { + context.setAttribute( "id", nid ); + } else { + nid = nid.replace( /'/g, "\\$&" ); + } + if ( relativeHierarchySelector && hasParent ) { + context = context.parentNode; + } + + try { + if ( !relativeHierarchySelector || hasParent ) { + return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra ); + } + + } catch(pseudoError) { + } finally { + if ( !old ) { + oldContext.removeAttribute( "id" ); + } + } + } + } + + return oldSizzle(query, context, extra, seed); + }; + + for ( var prop in oldSizzle ) { + Sizzle[ prop ] = oldSizzle[ prop ]; + } + + // release memory in IE + div = null; + })(); + } + + (function(){ + var html = document.documentElement, + matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector; + + if ( matches ) { + // Check to see if it's possible to do matchesSelector + // on a disconnected node (IE 9 fails this) + var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ), + pseudoWorks = false; + + try { + // This should fail with an exception + // Gecko does not error, returns false instead + matches.call( document.documentElement, "[test!='']:sizzle" ); + + } catch( pseudoError ) { + pseudoWorks = true; + } + + Sizzle.matchesSelector = function( node, expr ) { + // Make sure that attribute selectors are quoted + expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']"); + + if ( !Sizzle.isXML( node ) ) { + try { + if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) { + var ret = matches.call( node, expr ); + + // IE 9's matchesSelector returns false on disconnected nodes + if ( ret || !disconnectedMatch || + // As well, disconnected nodes are said to be in a document + // fragment in IE 9, so check for that + node.document && node.document.nodeType !== 11 ) { + return ret; + } + } + } catch(e) {} + } + + return Sizzle(expr, null, null, [node]).length > 0; + }; + } + })(); + + (function(){ + var div = document.createElement("div"); + + div.innerHTML = "
"; + + // Opera can't find a second classname (in 9.6) + // Also, make sure that getElementsByClassName actually exists + if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) { + return; + } + + // Safari caches class attributes, doesn't catch changes (in 3.2) + div.lastChild.className = "e"; + + if ( div.getElementsByClassName("e").length === 1 ) { + return; + } + + Expr.order.splice(1, 0, "CLASS"); + Expr.find.CLASS = function( match, context, isXML ) { + if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) { + return context.getElementsByClassName(match[1]); + } + }; + + // release memory in IE + div = null; + })(); + + function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { + for ( var i = 0, l = checkSet.length; i < l; i++ ) { + var elem = checkSet[i]; + + if ( elem ) { + var match = false; + + elem = elem[dir]; + + while ( elem ) { + if ( elem[ expando ] === doneName ) { + match = checkSet[elem.sizset]; + break; + } + + if ( elem.nodeType === 1 && !isXML ){ + elem[ expando ] = doneName; + elem.sizset = i; + } + + if ( elem.nodeName.toLowerCase() === cur ) { + match = elem; + break; + } + + elem = elem[dir]; + } + + checkSet[i] = match; + } + } + } + + function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { + for ( var i = 0, l = checkSet.length; i < l; i++ ) { + var elem = checkSet[i]; + + if ( elem ) { + var match = false; + + elem = elem[dir]; + + while ( elem ) { + if ( elem[ expando ] === doneName ) { + match = checkSet[elem.sizset]; + break; + } + + if ( elem.nodeType === 1 ) { + if ( !isXML ) { + elem[ expando ] = doneName; + elem.sizset = i; + } + + if ( typeof cur !== "string" ) { + if ( elem === cur ) { + match = true; + break; + } + + } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) { + match = elem; + break; + } + } + + elem = elem[dir]; + } + + checkSet[i] = match; + } + } + } + + if ( document.documentElement.contains ) { + Sizzle.contains = function( a, b ) { + return a !== b && (a.contains ? a.contains(b) : true); + }; + + } else if ( document.documentElement.compareDocumentPosition ) { + Sizzle.contains = function( a, b ) { + return !!(a.compareDocumentPosition(b) & 16); + }; + + } else { + Sizzle.contains = function() { + return false; + }; + } + + Sizzle.isXML = function( elem ) { + // documentElement is verified for cases where it doesn't yet exist + // (such as loading iframes in IE - #4833) + var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement; + + return documentElement ? documentElement.nodeName !== "HTML" : false; + }; + + var posProcess = function( selector, context, seed ) { + var match, + tmpSet = [], + later = "", + root = context.nodeType ? [context] : context; + + // Position selectors must be done after the filter + // And so must :not(positional) so we move all PSEUDOs to the end + while ( (match = Expr.match.PSEUDO.exec( selector )) ) { + later += match[0]; + selector = selector.replace( Expr.match.PSEUDO, "" ); + } + + selector = Expr.relative[selector] ? selector + "*" : selector; + + for ( var i = 0, l = root.length; i < l; i++ ) { + Sizzle( selector, root[i], tmpSet, seed ); + } + + return Sizzle.filter( later, tmpSet ); + }; + + // EXPOSE + // Override sizzle attribute retrieval + Sizzle.attr = jQuery.attr; + Sizzle.selectors.attrMap = {}; + jQuery.find = Sizzle; + jQuery.expr = Sizzle.selectors; + jQuery.expr[":"] = jQuery.expr.filters; + jQuery.unique = Sizzle.uniqueSort; + jQuery.text = Sizzle.getText; + jQuery.isXMLDoc = Sizzle.isXML; + jQuery.contains = Sizzle.contains; + + + })(); + + + var runtil = /Until$/, + rparentsprev = /^(?:parents|prevUntil|prevAll)/, + // Note: This RegExp should be improved, or likely pulled from Sizzle + rmultiselector = /,/, + isSimple = /^.[^:#\[\.,]*$/, + slice = Array.prototype.slice, + POS = jQuery.expr.match.POS, + // methods guaranteed to produce a unique set when starting from a unique set + guaranteedUnique = { + children: true, + contents: true, + next: true, + prev: true + }; + + jQuery.fn.extend({ + find: function( selector ) { + var self = this, + i, l; + + if ( typeof selector !== "string" ) { + return jQuery( selector ).filter(function() { + for ( i = 0, l = self.length; i < l; i++ ) { + if ( jQuery.contains( self[ i ], this ) ) { + return true; + } + } + }); + } + + var ret = this.pushStack( "", "find", selector ), + length, n, r; + + for ( i = 0, l = this.length; i < l; i++ ) { + length = ret.length; + jQuery.find( selector, this[i], ret ); + + if ( i > 0 ) { + // Make sure that the results are unique + for ( n = length; n < ret.length; n++ ) { + for ( r = 0; r < length; r++ ) { + if ( ret[r] === ret[n] ) { + ret.splice(n--, 1); + break; + } + } + } + } + } + + return ret; + }, + + has: function( target ) { + var targets = jQuery( target ); + return this.filter(function() { + for ( var i = 0, l = targets.length; i < l; i++ ) { + if ( jQuery.contains( this, targets[i] ) ) { + return true; + } + } + }); + }, + + not: function( selector ) { + return this.pushStack( winnow(this, selector, false), "not", selector); + }, + + filter: function( selector ) { + return this.pushStack( winnow(this, selector, true), "filter", selector ); + }, + + is: function( selector ) { + return !!selector && ( + typeof selector === "string" ? + // If this is a positional selector, check membership in the returned set + // so $("p:first").is("p:last") won't return true for a doc with two "p". + POS.test( selector ) ? + jQuery( selector, this.context ).index( this[0] ) >= 0 : + jQuery.filter( selector, this ).length > 0 : + this.filter( selector ).length > 0 ); + }, + + closest: function( selectors, context ) { + var ret = [], i, l, cur = this[0]; + + // Array (deprecated as of jQuery 1.7) + if ( jQuery.isArray( selectors ) ) { + var level = 1; + + while ( cur && cur.ownerDocument && cur !== context ) { + for ( i = 0; i < selectors.length; i++ ) { + + if ( jQuery( cur ).is( selectors[ i ] ) ) { + ret.push({ selector: selectors[ i ], elem: cur, level: level }); + } + } + + cur = cur.parentNode; + level++; + } + + return ret; + } + + // String + var pos = POS.test( selectors ) || typeof selectors !== "string" ? + jQuery( selectors, context || this.context ) : + 0; + + for ( i = 0, l = this.length; i < l; i++ ) { + cur = this[i]; + + while ( cur ) { + if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) { + ret.push( cur ); + break; + + } else { + cur = cur.parentNode; + if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { + break; + } + } + } + } + + ret = ret.length > 1 ? jQuery.unique( ret ) : ret; + + return this.pushStack( ret, "closest", selectors ); + }, + + // Determine the position of an element within + // the matched set of elements + index: function( elem ) { + + // No argument, return index in parent + if ( !elem ) { + return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1; + } + + // index in selector + if ( typeof elem === "string" ) { + return jQuery.inArray( this[0], jQuery( elem ) ); + } + + // Locate the position of the desired element + return jQuery.inArray( + // If it receives a jQuery object, the first element is used + elem.jquery ? elem[0] : elem, this ); + }, + + add: function( selector, context ) { + var set = typeof selector === "string" ? + jQuery( selector, context ) : + jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ), + all = jQuery.merge( this.get(), set ); + + return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ? + all : + jQuery.unique( all ) ); + }, + + andSelf: function() { + return this.add( this.prevObject ); + } + }); + + // A painfully simple check to see if an element is disconnected + // from a document (should be improved, where feasible). + function isDisconnected( node ) { + return !node || !node.parentNode || node.parentNode.nodeType === 11; + } + + jQuery.each({ + parent: function( elem ) { + var parent = elem.parentNode; + return parent && parent.nodeType !== 11 ? parent : null; + }, + parents: function( elem ) { + return jQuery.dir( elem, "parentNode" ); + }, + parentsUntil: function( elem, i, until ) { + return jQuery.dir( elem, "parentNode", until ); + }, + next: function( elem ) { + return jQuery.nth( elem, 2, "nextSibling" ); + }, + prev: function( elem ) { + return jQuery.nth( elem, 2, "previousSibling" ); + }, + nextAll: function( elem ) { + return jQuery.dir( elem, "nextSibling" ); + }, + prevAll: function( elem ) { + return jQuery.dir( elem, "previousSibling" ); + }, + nextUntil: function( elem, i, until ) { + return jQuery.dir( elem, "nextSibling", until ); + }, + prevUntil: function( elem, i, until ) { + return jQuery.dir( elem, "previousSibling", until ); + }, + siblings: function( elem ) { + return jQuery.sibling( elem.parentNode.firstChild, elem ); + }, + children: function( elem ) { + return jQuery.sibling( elem.firstChild ); + }, + contents: function( elem ) { + return jQuery.nodeName( elem, "iframe" ) ? + elem.contentDocument || elem.contentWindow.document : + jQuery.makeArray( elem.childNodes ); + } + }, function( name, fn ) { + jQuery.fn[ name ] = function( until, selector ) { + var ret = jQuery.map( this, fn, until ), + // The variable 'args' was introduced in + // https://github.com/jquery/jquery/commit/52a0238 + // to work around a bug in Chrome 10 (Dev) and should be removed when the bug is fixed. + // http://code.google.com/p/v8/issues/detail?id=1050 + args = slice.call(arguments); + + if ( !runtil.test( name ) ) { + selector = until; + } + + if ( selector && typeof selector === "string" ) { + ret = jQuery.filter( selector, ret ); + } + + ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret; + + if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) { + ret = ret.reverse(); + } + + return this.pushStack( ret, name, args.join(",") ); + }; + }); + + jQuery.extend({ + filter: function( expr, elems, not ) { + if ( not ) { + expr = ":not(" + expr + ")"; + } + + return elems.length === 1 ? + jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] : + jQuery.find.matches(expr, elems); + }, + + dir: function( elem, dir, until ) { + var matched = [], + cur = elem[ dir ]; + + while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) { + if ( cur.nodeType === 1 ) { + matched.push( cur ); + } + cur = cur[dir]; + } + return matched; + }, + + nth: function( cur, result, dir, elem ) { + result = result || 1; + var num = 0; + + for ( ; cur; cur = cur[dir] ) { + if ( cur.nodeType === 1 && ++num === result ) { + break; + } + } + + return cur; + }, + + sibling: function( n, elem ) { + var r = []; + + for ( ; n; n = n.nextSibling ) { + if ( n.nodeType === 1 && n !== elem ) { + r.push( n ); + } + } + + return r; + } + }); + + // Implement the identical functionality for filter and not + function winnow( elements, qualifier, keep ) { + + // Can't pass null or undefined to indexOf in Firefox 4 + // Set to 0 to skip string check + qualifier = qualifier || 0; + + if ( jQuery.isFunction( qualifier ) ) { + return jQuery.grep(elements, function( elem, i ) { + var retVal = !!qualifier.call( elem, i, elem ); + return retVal === keep; + }); + + } else if ( qualifier.nodeType ) { + return jQuery.grep(elements, function( elem, i ) { + return ( elem === qualifier ) === keep; + }); + + } else if ( typeof qualifier === "string" ) { + var filtered = jQuery.grep(elements, function( elem ) { + return elem.nodeType === 1; + }); + + if ( isSimple.test( qualifier ) ) { + return jQuery.filter(qualifier, filtered, !keep); + } else { + qualifier = jQuery.filter( qualifier, filtered ); + } + } + + return jQuery.grep(elements, function( elem, i ) { + return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep; + }); + } + + + + + function createSafeFragment( document ) { + var list = nodeNames.split( " " ), + safeFrag = document.createDocumentFragment(); + + if ( safeFrag.createElement ) { + while ( list.length ) { + safeFrag.createElement( + list.pop() + ); + } + } + return safeFrag; + } + + var nodeNames = "abbr article aside audio canvas datalist details figcaption figure footer " + + "header hgroup mark meter nav output progress section summary time video", + rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g, + rleadingWhitespace = /^\s+/, + rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, + rtagName = /<([\w:]+)/, + rtbody = /", "" ], + legend: [ 1, "
", "
" ], + thead: [ 1, "", "
" ], + tr: [ 2, "", "
" ], + td: [ 3, "", "
" ], + col: [ 2, "", "
" ], + area: [ 1, "", "" ], + _default: [ 0, "", "" ] + }, + safeFragment = createSafeFragment( document ); + + wrapMap.optgroup = wrapMap.option; + wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead; + wrapMap.th = wrapMap.td; + + // IE can't serialize and