From fb4d618e652b28580749d81f4afed91e4d79d474 Mon Sep 17 00:00:00 2001 From: Pascal Repond Date: Thu, 3 Sep 2026 14:33:58 +0200 Subject: [PATCH 1/4] fix: scope the JS handlers to what was clicked, and tidy the rest * `$('form')` also matched the navigation search form, so selecting a file submitted both. Handlers now start from the element that was clicked. * The delete dialog completed one shared URL, appending each file name to the previous one. Each button carries its own instead, and drops the id it duplicated with its figure. The upload button no longer submits an empty form from the keyboard either. * Preview feedback was styled with `alert-error`, which Bootstrap 4 does not define, and written in English in the source; it comes from the server now. * A missing clipboard API threw instead of raising the error toast. * `const` throughout and no more dead comments: the file already required ES2015 for its template literals and arrow functions. Co-Authored-By: Pascal Repond --- flask_wiki/static/js/wiki.js | 58 +++++++++++++-------------- flask_wiki/templates/wiki/editor.html | 6 ++- flask_wiki/templates/wiki/files.html | 8 ++-- tests/test_views.py | 25 ++++++++++++ 4 files changed, 61 insertions(+), 36 deletions(-) diff --git a/flask_wiki/static/js/wiki.js b/flask_wiki/static/js/wiki.js index 5834d01..8dc99aa 100644 --- a/flask_wiki/static/js/wiki.js +++ b/flask_wiki/static/js/wiki.js @@ -2,20 +2,20 @@ // SPDX-License-Identifier: BSD-3-Clause $(document).ready(function () { + // reveal the messages flashed by the server + $('.wiki-toasts .toast[data-autoshow]').toast('show'); + // ask the backend for the preview and render it - $('.wiki-editor #preview-tab').on('click', function () { - var url = $(this).data('preview-url'); - var $form = $('form'); - var $inputs = $form.find('input, textarea, button'); - var $pre = $('#preview'); - var bodycontent = 'title: preview\n\n' + $form.find('textarea').val(); + $('#preview-tab').on('click', function () { + const $tab = $(this); + const $form = $tab.closest('form'); + const $inputs = $form.find('input, textarea, button'); + const $pre = $('#preview'); + const bodycontent = 'title: preview\n\n' + $form.find('textarea').val(); $inputs.prop('disabled', true); - $pre - .removeClass('alert') - .removeClass('alert-error') - .html('Loading...'); + $pre.removeClass('alert alert-danger').text($tab.data('loading-text')); $.ajax({ - url: url, + url: $tab.data('preview-url'), type: 'POST', data: { body: bodycontent }, success: function (msg) { @@ -23,8 +23,7 @@ $(document).ready(function () { }, error: function (e) { console.log('error: ', e); - $pre.addClass('alert').addClass('alert-error'); - $pre.html('There was a problem with the preview.'); + $pre.addClass('alert alert-danger').text($tab.data('error-text')); }, complete: function () { $inputs.prop('disabled', false); @@ -32,38 +31,37 @@ $(document).ready(function () { }); }); - // Add the following code if you want the name of the file appear on select + // selecting a file uploads it, no further click needed $('.wiki-files .custom-file-input').on('change', function () { - var form = $('form'); - form.submit(); + $(this).closest('form').submit(); }); - // copy the markdown code in the clip board + // copy the markdown code of a file to the clipboard $('.wiki-files .copy-md-code').on('click', function () { - // function copy(name, link) { - var name = $(this).data('name'); - var link = $(this).data('link');; + const name = $(this).data('name'); + const link = $(this).data('link'); copyToClipboard(`![${name}](${link} "${name}")`); }); - // copy the url code in the clip board + // copy the link of a page to the clipboard $('.copy-file-code').on('click', function () { - // function copy(name, link) { - var name = $(this).data('name'); - var link = $(this).data('link'); + const name = $(this).data('name'); + const link = $(this).data('link'); copyToClipboard(`[${name}](${link})`); }); - // Change the target modal when an element is clicked - $('.delete-file').on('click', function (e) { - var file = e.currentTarget.id; - var confirm = document.getElementById("confirm"); - var url = confirm.href.concat(file); - document.getElementById("confirm").href=url; + // point the confirmation button at the file the reader asked to delete + $('.delete-file').on('click', function () { + $('#confirm').attr('href', $(this).data('delete-url')); }); }); function copyToClipboard(text) { + // the clipboard API is missing outside a secure context + if (!navigator.clipboard) { + $('#copy-error').toast('show'); + return; + } navigator.clipboard.writeText(text).then( () => { $('#copy-success').toast('show'); diff --git a/flask_wiki/templates/wiki/editor.html b/flask_wiki/templates/wiki/editor.html index 3738b1c..f3b9851 100644 --- a/flask_wiki/templates/wiki/editor.html +++ b/flask_wiki/templates/wiki/editor.html @@ -18,8 +18,10 @@