diff --git a/.eslintrc.js b/.eslintrc.js index dd85ebc5cd..dff7b3a7fe 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -135,12 +135,7 @@ module.exports = { globals: { $: 'readonly' }, }, { - files: [ - 'wagtail/**/**', - 'client/src/entrypoints/documents/document-chooser-modal.js', - 'client/src/entrypoints/images/image-chooser-modal.js', - 'client/src/entrypoints/snippets/snippet-chooser-modal.js', - ], + files: ['wagtail/**/**'], globals: { $: 'readonly', addMessage: 'readonly', diff --git a/client/src/entrypoints/admin/task-chooser-modal.js b/client/src/entrypoints/admin/task-chooser-modal.js index 94443085e1..29df6fb882 100644 --- a/client/src/entrypoints/admin/task-chooser-modal.js +++ b/client/src/entrypoints/admin/task-chooser-modal.js @@ -1,6 +1,9 @@ import $ from 'jquery'; import { initTabs } from '../../includes/tabs'; -import { submitCreationForm } from '../../includes/chooserModal'; +import { + submitCreationForm, + SearchController, +} from '../../includes/chooserModal'; const ajaxifyTaskCreateTab = (modal) => { $( @@ -32,7 +35,7 @@ const TASK_CHOOSER_MODAL_ONLOAD_HANDLERS = { // eslint-disable-next-line func-names $('.pagination a', context).on('click', function () { // eslint-disable-next-line @typescript-eslint/no-use-before-define - fetchResults(this.href); + searchController.fetchResults(this.href); return false; }); @@ -40,57 +43,19 @@ const TASK_CHOOSER_MODAL_ONLOAD_HANDLERS = { initTabs(); } - const searchForm = $('form.task-search', modal.body); - const searchUrl = searchForm.attr('action'); - let request; - - function fetchResults(url, requestData) { - var opts = { - url: url, - success(data) { - request = null; - $('#search-results').html(data); - ajaxifyLinks($('#search-results')); - }, - error() { - request = null; - }, - }; - if (requestData) { - opts.data = requestData; - } - request = $.ajax(opts); - } - - function search() { - fetchResults(searchUrl, searchForm.serialize()); - return false; - } + const searchController = new SearchController({ + form: $('form.task-search', modal.body), + resultsContainerSelector: '#search-results', + onLoadResults: (context) => { + ajaxifyLinks(context); + }, + inputDelay: 50, + }); + searchController.attachSearchInput('#id_q'); + searchController.attachSearchFilter('#id_task_type'); ajaxifyLinks(modal.body); ajaxifyTaskCreateTab(modal, jsonData); - - $('form.task-search', modal.body).on('submit', search); - - // eslint-disable-next-line func-names - $('#id_q').on('input', function () { - if (request) { - request.abort(); - } - clearTimeout($.data(this, 'timer')); - const wait = setTimeout(search, 50); - $(this).data('timer', wait); - }); - - // eslint-disable-next-line func-names - $('#id_task_type').on('change', function () { - if (request) { - request.abort(); - } - clearTimeout($.data(this, 'timer')); - const wait = setTimeout(search, 50); - $(this).data('timer', wait); - }); }, task_chosen(modal, jsonData) { modal.respond('taskChosen', jsonData.result); diff --git a/client/src/entrypoints/documents/document-chooser-modal.js b/client/src/entrypoints/documents/document-chooser-modal.js index a4971dc0e0..8e4004d7a7 100644 --- a/client/src/entrypoints/documents/document-chooser-modal.js +++ b/client/src/entrypoints/documents/document-chooser-modal.js @@ -7,8 +7,10 @@ import { } from '../../includes/chooserModal'; function ajaxifyDocumentUploadForm(modal) { - $('form.document-upload', modal.body).on('submit', function () { - submitCreationForm(modal, this, { errorContainerSelector: '#tab-upload' }); + $('form.document-upload', modal.body).on('submit', (event) => { + submitCreationForm(modal, event.currentTarget, { + errorContainerSelector: '#tab-upload', + }); return false; }); @@ -21,33 +23,35 @@ function ajaxifyDocumentUploadForm(modal) { } window.DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS = { - chooser: function (modal, jsonData) { + chooser: (modal) => { + let searchController; + function ajaxifyLinks(context) { - $('a.document-choice', context).on('click', function () { - modal.loadUrl(this.href); + $('a.document-choice', context).on('click', (event) => { + modal.loadUrl(event.currentTarget.href); return false; }); - $('.pagination a', context).on('click', function () { - searchController.fetchResults(this.href); + $('.pagination a', context).on('click', (event) => { + searchController.fetchResults(event.currentTarget.href); return false; }); - $('a.upload-one-now').on('click', function (e) { + $('a.upload-one-now').on('click', (event) => { // Set current collection ID at upload form tab const collectionId = $('#collection_chooser_collection_id').val(); if (collectionId) { $('#id_document-chooser-upload-collection').val(collectionId); } - e.preventDefault(); + event.preventDefault(); }); // Reinitialize tabs to hook up tab event listeners in the modal initTabs(); } - const searchController = new SearchController({ + searchController = new SearchController({ form: $('form.document-search', modal.body), resultsContainerSelector: '#search-results', onLoadResults: (context) => { @@ -61,11 +65,11 @@ window.DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS = { ajaxifyLinks(modal.body); ajaxifyDocumentUploadForm(modal); }, - document_chosen: function (modal, jsonData) { + document_chosen: (modal, jsonData) => { modal.respond('documentChosen', jsonData.result); modal.close(); }, - reshow_upload_form: function (modal, jsonData) { + reshow_upload_form: (modal, jsonData) => { $('#tab-upload', modal.body).replaceWith(jsonData.htmlFragment); initTabs(); ajaxifyDocumentUploadForm(modal); diff --git a/client/src/entrypoints/images/image-chooser-modal.js b/client/src/entrypoints/images/image-chooser-modal.js index 85d6db468b..b2aff7273d 100644 --- a/client/src/entrypoints/images/image-chooser-modal.js +++ b/client/src/entrypoints/images/image-chooser-modal.js @@ -7,9 +7,9 @@ import { } from '../../includes/chooserModal'; function ajaxifyImageUploadForm(modal) { - $('form.image-upload', modal.body).on('submit', function () { + $('form.image-upload', modal.body).on('submit', (event) => { if (!$('#id_image-chooser-upload-title', modal.body).val()) { - var li = $('#id_image-chooser-upload-title', modal.body).closest('li'); + const li = $('#id_image-chooser-upload-title', modal.body).closest('li'); if (!li.hasClass('error')) { li.addClass('error'); $('#id_image-chooser-upload-title', modal.body) @@ -18,9 +18,10 @@ function ajaxifyImageUploadForm(modal) { '

This field is required.

', ); } + // eslint-disable-next-line no-undef setTimeout(cancelSpinner, 500); } else { - submitCreationForm(modal, this, { + submitCreationForm(modal, event.currentTarget, { errorContainerSelector: '#tab-upload', }); } @@ -36,20 +37,22 @@ function ajaxifyImageUploadForm(modal) { } window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { - chooser: function (modal, jsonData) { + chooser: (modal) => { + let searchController; + function ajaxifyLinks(context) { - $('.listing a', context).on('click', function () { - modal.loadUrl(this.href); + $('.listing a', context).on('click', (event) => { + modal.loadUrl(event.currentTarget.href); return false; }); - $('.pagination a', context).on('click', function () { - searchController.fetchResults(this.href); + $('.pagination a', context).on('click', (event) => { + searchController.fetchResults(event.currentTarget.href); return false; }); } - const searchController = new SearchController({ + searchController = new SearchController({ form: $('form.image-search', modal.body), resultsContainerSelector: '#image-results', onLoadResults: (context) => { @@ -62,10 +65,10 @@ window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { ajaxifyLinks(modal.body); ajaxifyImageUploadForm(modal); - $('a.suggested-tag').on('click', function () { + $('a.suggested-tag').on('click', (event) => { $('#id_q').val(''); searchController.search({ - tag: $(this).text(), + tag: $(event.currentTarget).text(), collection_id: $('#collection_chooser_collection_id').val(), }); return false; @@ -74,29 +77,31 @@ window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { // Reinitialize tabs to hook up tab event listeners in the modal initTabs(); }, - image_chosen: function (modal, jsonData) { + image_chosen: (modal, jsonData) => { modal.respond('imageChosen', jsonData.result); modal.close(); }, - duplicate_found: function (modal, jsonData) { + duplicate_found: (modal, jsonData) => { $('#tab-upload', modal.body).replaceWith(jsonData.htmlFragment); - $('.use-new-image', modal.body).on('click', function () { - modal.loadUrl(this.href); + $('.use-new-image', modal.body).on('click', (event) => { + modal.loadUrl(event.currentTarget.href); return false; }); - $('.use-existing-image', modal.body).on('click', function () { - var form = $(this).closest('form'); + $('.use-existing-image', modal.body).on('click', (event) => { + var form = $(event.currentTarget).closest('form'); var CSRFToken = $('input[name="csrfmiddlewaretoken"]', form).val(); - modal.postForm(this.href, { csrfmiddlewaretoken: CSRFToken }); + modal.postForm(event.currentTarget.href, { + csrfmiddlewaretoken: CSRFToken, + }); return false; }); }, - reshow_upload_form: function (modal, jsonData) { + reshow_upload_form: (modal, jsonData) => { $('#tab-upload', modal.body).replaceWith(jsonData.htmlFragment); initTabs(); ajaxifyImageUploadForm(modal); }, - select_format: function (modal) { + select_format: (modal) => { var decorativeImage = document.querySelector( '#id_image-chooser-insertion-image_is_decorative', ); @@ -107,20 +112,6 @@ window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { '[for="id_image-chooser-insertion-alt_text"]', ); - if (decorativeImage.checked) { - disableAltText(); - } else { - enableAltText(); - } - - decorativeImage.addEventListener('change', function (event) { - if (event.target.checked) { - disableAltText(); - } else { - enableAltText(); - } - }); - function disableAltText() { altText.setAttribute('disabled', 'disabled'); altTextLabel.classList.remove('required'); @@ -131,8 +122,27 @@ window.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { altTextLabel.classList.add('required'); } - $('form', modal.body).on('submit', function () { - $.post(this.action, $(this).serialize(), modal.loadResponseText, 'text'); + if (decorativeImage.checked) { + disableAltText(); + } else { + enableAltText(); + } + + decorativeImage.addEventListener('change', (event) => { + if (event.target.checked) { + disableAltText(); + } else { + enableAltText(); + } + }); + + $('form', modal.body).on('submit', (event) => { + $.post( + event.currentTarget.action, + $(event.currentTarget).serialize(), + modal.loadResponseText, + 'text', + ); return false; }); diff --git a/client/src/entrypoints/snippets/snippet-chooser-modal.js b/client/src/entrypoints/snippets/snippet-chooser-modal.js index 2fa1c26422..2b19af09e7 100644 --- a/client/src/entrypoints/snippets/snippet-chooser-modal.js +++ b/client/src/entrypoints/snippets/snippet-chooser-modal.js @@ -2,20 +2,22 @@ import $ from 'jquery'; import { SearchController } from '../../includes/chooserModal'; window.SNIPPET_CHOOSER_MODAL_ONLOAD_HANDLERS = { - choose: function (modal) { + choose: (modal) => { + let searchController; + function ajaxifyLinks(context) { - $('a.snippet-choice', modal.body).on('click', function () { - modal.loadUrl(this.href); + $('a.snippet-choice', modal.body).on('click', (event) => { + modal.loadUrl(event.currentTarget.href); return false; }); - $('.pagination a', context).on('click', function () { - searchController.fetchResults(this.href); + $('.pagination a', context).on('click', (event) => { + searchController.fetchResults(event.currentTarget.href); return false; }); } - const searchController = new SearchController({ + searchController = new SearchController({ form: $('form.snippet-search', modal.body), resultsContainerSelector: '#search-results', onLoadResults: (context) => { @@ -27,7 +29,7 @@ window.SNIPPET_CHOOSER_MODAL_ONLOAD_HANDLERS = { ajaxifyLinks(modal.body); }, - chosen: function (modal, jsonData) { + chosen: (modal, jsonData) => { modal.respond('snippetChosen', jsonData.result); modal.close(); },