mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Use SearchController on task chooser modal

pull/7897/head
Matt Westcott 2022-05-12 14:10:59 +01:00 zatwierdzone przez LB (Ben Johnston)
rodzic fc31a6711d
commit 6b30a1aae9
5 zmienionych plików z 87 dodań i 111 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

7
.eslintrc.js
Wyświetl plik

@ -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',

65
client/src/entrypoints/admin/task-chooser-modal.js
Wyświetl plik

@ -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);

28
client/src/entrypoints/documents/document-chooser-modal.js
Wyświetl plik

@ -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);

82
client/src/entrypoints/images/image-chooser-modal.js
Wyświetl plik

@ -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) {
'<p class="error-message"><span>This field is required.</span></p>',
);
}
// 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;
});

16
client/src/entrypoints/snippets/snippet-chooser-modal.js
Wyświetl plik

@ -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();
},