diff --git a/docs/components/multi-file-upload.md b/docs/components/multi-file-upload.md index b6c0c1b22..d14229300 100644 --- a/docs/components/multi-file-upload.md +++ b/docs/components/multi-file-upload.md @@ -45,7 +45,7 @@ The multi file upload component uses JavaScript. To run it you must include the ``` if(typeof MOJFrontend.MultiFileUpload !== 'undefined') { new MOJFrontend.MultiFileUpload({ - container: $('.moj-multi-file-upload'), + container: document.querySelector('.moj-multi-file-upload'), uploadUrl: '/ajax-upload-url', deleteUrl: '/ajax-delete-url' }); diff --git a/docs/examples/button-menu-collapsible-alternative/script.js b/docs/examples/button-menu-collapsible-alternative/script.js index 575408d7f..928b65d0d 100644 --- a/docs/examples/button-menu-collapsible-alternative/script.js +++ b/docs/examples/button-menu-collapsible-alternative/script.js @@ -1,5 +1,5 @@ new MOJFrontend.ButtonMenu({ - container: $(".moj-button-menu"), + container: document.querySelector(".moj-button-menu"), mq: "(min-width: 200em)", buttonText: "Actions", menuClasses: "moj-button-menu__wrapper--right", diff --git a/docs/examples/button-menu-collapsible/script.js b/docs/examples/button-menu-collapsible/script.js index f3258899d..9060177ee 100644 --- a/docs/examples/button-menu-collapsible/script.js +++ b/docs/examples/button-menu-collapsible/script.js @@ -1,5 +1,5 @@ new MOJFrontend.ButtonMenu({ - container: $(".moj-button-menu"), + container: document.querySelector(".moj-button-menu"), mq: "(min-width: 200em)", buttonText: "Menu", buttonClasses: diff --git a/docs/examples/identity-bar-menu-toggle/script.js b/docs/examples/identity-bar-menu-toggle/script.js index 8b26b59fa..d99a5b3e8 100644 --- a/docs/examples/identity-bar-menu-toggle/script.js +++ b/docs/examples/identity-bar-menu-toggle/script.js @@ -1,5 +1,5 @@ new MOJFrontend.ButtonMenu({ - container: $(".moj-button-menu"), + container: document.querySelector(".moj-button-menu"), buttonText: "Actions", buttonClasses: "govuk-button--secondary moj-button-menu__toggle-button--secondary", diff --git a/docs/examples/identity-bar-secondary-toggle/script.js b/docs/examples/identity-bar-secondary-toggle/script.js index c68ba1dd5..fea38c595 100644 --- a/docs/examples/identity-bar-secondary-toggle/script.js +++ b/docs/examples/identity-bar-secondary-toggle/script.js @@ -1,5 +1,5 @@ new MOJFrontend.ButtonMenu({ - container: $(".moj-button-menu").eq(1), + container: document.querySelectorAll(".moj-button-menu")[1], mq: "(min-width: 1000em)", buttonText: "More actions", buttonClasses: diff --git a/docs/examples/multi-file-upload/script.js b/docs/examples/multi-file-upload/script.js index 7d3b89299..7e961be1e 100644 --- a/docs/examples/multi-file-upload/script.js +++ b/docs/examples/multi-file-upload/script.js @@ -1,7 +1,5 @@ -if (typeof MOJFrontend.MultiFileUpload !== "undefined") { - new MOJFrontend.MultiFileUpload({ - container: $(".moj-multi-file-upload"), - uploadUrl: "/ajax-upload", - deleteUrl: "/ajax-delete", - }); -} +new MOJFrontend.MultiFileUpload({ + container: document.querySelector(".moj-multi-file-upload"), + uploadUrl: "/ajax-upload", + deleteUrl: "/ajax-delete", +}); diff --git a/docs/examples/patterns/filter-a-list/script.js b/docs/examples/patterns/filter-a-list/script.js index 24015206e..612ade5b4 100644 --- a/docs/examples/patterns/filter-a-list/script.js +++ b/docs/examples/patterns/filter-a-list/script.js @@ -2,16 +2,16 @@ new MOJFrontend.FilterToggleButton({ bigModeMediaQuery: "(min-width: 48.063em)", startHidden: true, toggleButton: { - container: $(".moj-action-bar__filter"), + container: document.querySelector(".moj-action-bar__filter"), showText: "Show filter", hideText: "Hide filter", classes: "govuk-button--secondary", }, closeButton: { - container: $(".moj-filter__header-action"), + container: document.querySelector(".moj-filter__header-action"), text: "Close", }, filter: { - container: $(".moj-filter"), + container: document.querySelector(".moj-filter"), }, }); diff --git a/src/moj/components/button-menu/button-menu.js b/src/moj/components/button-menu/button-menu.js index c1edb4aad..2a23e201e 100644 --- a/src/moj/components/button-menu/button-menu.js +++ b/src/moj/components/button-menu/button-menu.js @@ -1,5 +1,5 @@ MOJFrontend.ButtonMenu = function(params) { - this.container = params.container; + this.container = $(params.container); this.menu = this.container.find('.moj-button-menu__wrapper'); if(params.menuClasses) { this.menu.addClass(params.menuClasses); diff --git a/src/moj/components/filter-toggle-button/filter-toggle-button.js b/src/moj/components/filter-toggle-button/filter-toggle-button.js index 9b4678976..32cb0cdc4 100644 --- a/src/moj/components/filter-toggle-button/filter-toggle-button.js +++ b/src/moj/components/filter-toggle-button/filter-toggle-button.js @@ -1,9 +1,11 @@ MOJFrontend.FilterToggleButton = function(options) { this.options = options; - this.container = this.options.toggleButton.container; + this.container = $(this.options.toggleButton.container); + this.filterContainer = $(this.options.filter.container); + this.createToggleButton(); this.setupResponsiveChecks(); - this.options.filter.container.attr('tabindex', '-1'); + this.filterContainer.attr('tabindex', '-1'); if(this.options.startHidden) { this.hideMenu(); } @@ -43,7 +45,7 @@ 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); + $(this.options.closeButton.container).append(this.closeButton); } }; @@ -61,13 +63,13 @@ MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() { MOJFrontend.FilterToggleButton.prototype.hideMenu = function() { this.menuButton.attr('aria-expanded', 'false'); - this.options.filter.container.addClass('moj-js-hidden'); + this.filterContainer.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.filterContainer.removeClass('moj-js-hidden'); this.menuButton.text(this.options.toggleButton.hideText); }; @@ -78,8 +80,8 @@ MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() { MOJFrontend.FilterToggleButton.prototype.toggle = function() { if(this.menuButton.attr('aria-expanded') == 'false') { this.showMenu(); - this.options.filter.container.focus(); + this.filterContainer.focus(); } else { this.hideMenu(); } -}; \ No newline at end of file +}; diff --git a/src/moj/components/multi-file-upload/multi-file-upload.js b/src/moj/components/multi-file-upload/multi-file-upload.js index 5fb6382c3..eebc08bf0 100644 --- a/src/moj/components/multi-file-upload/multi-file-upload.js +++ b/src/moj/components/multi-file-upload/multi-file-upload.js @@ -11,20 +11,21 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF }; this.params = $.extend({}, this.defaultParams, params); + this.container = $(this.params.container); - this.params.container.addClass('moj-multi-file-upload--enhanced'); + this.container.addClass('moj-multi-file-upload--enhanced'); - this.feedbackContainer = this.params.container.find('.moj-multi-file__uploaded-files'); + this.feedbackContainer = this.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')); + this.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 = this.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')); @@ -37,7 +38,7 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF }; MOJFrontend.MultiFileUpload.prototype.setupFileInput = function() { - this.fileInput = this.params.container.find('.moj-multi-file-upload__input'); + this.fileInput = this.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')); diff --git a/src/moj/components/search-toggle/search-toggle.js b/src/moj/components/search-toggle/search-toggle.js index d164bee2b..ac29f7cba 100644 --- a/src/moj/components/search-toggle/search-toggle.js +++ b/src/moj/components/search-toggle/search-toggle.js @@ -1,11 +1,13 @@ MOJFrontend.SearchToggle = function (options) { this.options = options; + this.container = $(this.options.search.container); + this.toggleButtonContainer = $(this.options.toggleButton.container); - if (this.options.search.container.data("moj-search-toggle-initialised")) { + if (this.container.data("moj-search-toggle-initialised")) { return; } - this.options.search.container.data("moj-search-toggle-initialised", true); + this.container.data("moj-search-toggle-initialised", true); const svg = ''; @@ -17,19 +19,19 @@ MOJFrontend.SearchToggle = function (options) { "" ); this.toggleButton.on("click", $.proxy(this, "onToggleButtonClick")); - this.options.toggleButton.container.append(this.toggleButton); + this.toggleButtonContainer.append(this.toggleButton); $(document).on("click", this.onDocumentClick.bind(this)); $(document).on("focusin", this.onDocumentClick.bind(this)); }; MOJFrontend.SearchToggle.prototype.showMenu = function () { this.toggleButton.attr("aria-expanded", "true"); - this.options.search.container.removeClass("moj-js-hidden"); - this.options.search.container.find("input").first().focus(); + this.container.removeClass("moj-js-hidden"); + this.container.find("input").first().focus(); }; MOJFrontend.SearchToggle.prototype.hideMenu = function () { - this.options.search.container.addClass("moj-js-hidden"); + this.container.addClass("moj-js-hidden"); this.toggleButton.attr("aria-expanded", "false"); }; @@ -43,8 +45,8 @@ MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () { MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) { if ( - !$.contains(this.options.toggleButton.container[0], e.target) && - !$.contains(this.options.search.container[0], e.target) + !$.contains(this.toggleButtonContainer[0], e.target) && + !$.contains(this.container[0], e.target) ) { this.hideMenu(); }