summaryrefslogtreecommitdiffstats
path: root/web_src/js/modules/fomantic
diff options
context:
space:
mode:
authorDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
committerDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
commitdd136858f1ea40ad3c94191d647487fa4f31926c (patch)
tree58fec94a7b2a12510c9664b21793f1ed560c6518 /web_src/js/modules/fomantic
parentInitial commit. (diff)
downloadforgejo-upstream/9.0.0.tar.xz
forgejo-upstream/9.0.0.zip
Adding upstream version 9.0.0.HEADupstream/9.0.0upstreamdebian
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/js/modules/fomantic')
-rw-r--r--web_src/js/modules/fomantic/api.js40
-rw-r--r--web_src/js/modules/fomantic/aria.md117
-rw-r--r--web_src/js/modules/fomantic/base.js18
-rw-r--r--web_src/js/modules/fomantic/checkbox.js13
-rw-r--r--web_src/js/modules/fomantic/dropdown.js256
-rw-r--r--web_src/js/modules/fomantic/form.js13
-rw-r--r--web_src/js/modules/fomantic/modal.js28
-rw-r--r--web_src/js/modules/fomantic/transition.js54
8 files changed, 539 insertions, 0 deletions
diff --git a/web_src/js/modules/fomantic/api.js b/web_src/js/modules/fomantic/api.js
new file mode 100644
index 0000000..ca212c9
--- /dev/null
+++ b/web_src/js/modules/fomantic/api.js
@@ -0,0 +1,40 @@
+import $ from 'jquery';
+
+export function initFomanticApiPatch() {
+ //
+ // Fomantic API module has some very buggy behaviors:
+ //
+ // If encodeParameters=true, it calls `urlEncodedValue` to encode the parameter.
+ // However, `urlEncodedValue` just tries to "guess" whether the parameter is already encoded, by decoding the parameter and encoding it again.
+ //
+ // There are 2 problems:
+ // 1. It may guess wrong, and skip encoding a parameter which looks like encoded.
+ // 2. If the parameter can't be decoded, `decodeURIComponent` will throw an error, and the whole request will fail.
+ //
+ // This patch only fixes the second error behavior at the moment.
+ //
+ const patchKey = '_giteaFomanticApiPatch';
+ const oldApi = $.api;
+ $.api = $.fn.api = function(...args) {
+ const apiCall = oldApi.bind(this);
+ const ret = oldApi.apply(this, args);
+
+ if (typeof args[0] !== 'string') {
+ const internalGet = apiCall('internal', 'get');
+ if (!internalGet.urlEncodedValue[patchKey]) {
+ const oldUrlEncodedValue = internalGet.urlEncodedValue;
+ internalGet.urlEncodedValue = function (value) {
+ try {
+ return oldUrlEncodedValue(value);
+ } catch {
+ // if Fomantic API module's `urlEncodedValue` throws an error, we encode it by ourselves.
+ return encodeURIComponent(value);
+ }
+ };
+ internalGet.urlEncodedValue[patchKey] = true;
+ }
+ }
+ return ret;
+ };
+ $.api.settings = oldApi.settings;
+}
diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md
new file mode 100644
index 0000000..5836a34
--- /dev/null
+++ b/web_src/js/modules/fomantic/aria.md
@@ -0,0 +1,117 @@
+# Background
+
+This document is used as aria/accessibility(a11y) reference for future developers.
+
+There are a lot of a11y problems in the Fomantic UI library. Files in
+`web_src/js/modules/fomantic/` are used as a workaround to make the UI more accessible.
+
+The aria-related code is designed to avoid touching the official Fomantic UI library,
+and to be as independent as possible, so it can be easily modified/removed in the future.
+
+To test the aria/accessibility with screen readers, developers can use the following steps:
+
+* On macOS, you can use VoiceOver.
+ * Press `Command + F5` to turn on VoiceOver.
+ * Try to operate the UI with keyboard-only.
+ * Use Tab/Shift+Tab to switch focus between elements.
+ * Arrow keys (Option+Up/Down) to navigate between menu/combobox items (only aria-active, not really focused).
+ * Press Enter to trigger the aria-active element.
+* On Android, you can use TalkBack.
+ * Go to Settings -> Accessibility -> TalkBack, turn it on.
+ * Long-press or press+swipe to switch the aria-active element (not really focused).
+ * Double-tap means old single-tap on the aria-active element.
+ * Double-finger swipe means old single-finger swipe.
+* TODO: on Windows, on Linux, on iOS
+
+# Known Problems
+
+* Tested with Apple VoiceOver: If a dropdown menu/combobox is opened by mouse click, then arrow keys don't work.
+ But if the dropdown is opened by keyboard Tab, then arrow keys work, and from then on, the keys almost work with mouse click too.
+ The clue: when the dropdown is only opened by mouse click, VoiceOver doesn't send 'keydown' events of arrow keys to the DOM,
+ VoiceOver expects to use arrow keys to navigate between some elements, but it couldn't.
+ Users could use Option+ArrowKeys to navigate between menu/combobox items or selection labels if the menu/combobox is opened by mouse click.
+
+# Checkbox
+
+## Accessibility-friendly Checkbox
+
+The ideal checkboxes should be:
+
+```html
+<label><input type="checkbox"> ... </label>
+```
+
+However, the templates still have the Fomantic-style HTML layout:
+
+```html
+<div class="ui checkbox">
+ <input type="checkbox">
+ <label>...</label>
+</div>
+```
+
+We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the
+label etc. work. There is still a problem: These checkboxes are not friendly to screen readers,
+so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty,
+then the checkbox needs to get the `aria-label` attribute manually.
+
+# Fomantic Dropdown
+
+Fomantic Dropdown is designed to be used for many purposes:
+
+* Menu (the profile menu in navbar, the language menu in footer)
+* Popup (the branch/tag panel, the review box)
+* Simple `<select>` , used in many forms
+* Searchable option-list with static items (used in many forms)
+* Searchable option-list with dynamic items (ajax)
+* Searchable multiple selection option-list with dynamic items: the repo topic setting
+* More complex usages, like the Issue Label selector
+
+Fomantic Dropdown requires that the focus must be on its primary element.
+If the focus changes, it hides or panics.
+
+At the moment, the aria-related code only tries to partially resolve the a11y problems for dropdowns with items.
+
+There are different solutions:
+
+* combobox + listbox + option:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * A combobox is an input widget with an associated popup that enables users to select a value for the combobox from
+ a collection of possible values. In some implementations, the popup presents allowed values, while in other implementations,
+ the popup presents suggested values, and users may either select one of the suggestions or type a value.
+* menu + menuitem:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+
+The current approach is: detect if the dropdown has an input,
+if yes, it works like a combobox, otherwise it works like a menu.
+Multiple selection dropdown is not well-supported yet, it needs more work.
+
+Some important pages for dropdown testing:
+
+* Home(dashboard) page, the "Create Repo" / "Profile" / "Language" menu.
+* Create New Repo page, a lot of dropdowns as combobox.
+* Collaborators page, the "permission" dropdown (the old behavior was not quite good, it just works).
+
+```html
+<!-- read-only dropdown -->
+<div class="ui dropdown"> <!-- focused here, then it's not perfect to use aria-activedescendant to point to the menu item -->
+ <input type="hidden" ...>
+ <div class="text">Default</div>
+ <div class="menu" tabindex="-1"> <!-- "transition hidden|visible" classes will be added by $.dropdown() and when the dropdown is working -->
+ <div class="item active selected">Default</div>
+ <div class="item">...</div>
+ </div>
+</div>
+
+<!-- search input dropdown -->
+<div class="ui dropdown">
+ <input type="hidden" ...>
+ <input class="search" autocomplete="off" tabindex="0"> <!-- focused here -->
+ <div class="text"></div>
+ <div class="menu" tabindex="-1"> <!-- "transition hidden|visible" classes will be added by $.dropdown() and when the dropdown is working -->
+ <div class="item selected">...</div>
+ <div class="item">...</div>
+ </div>
+</div>
+```
diff --git a/web_src/js/modules/fomantic/base.js b/web_src/js/modules/fomantic/base.js
new file mode 100644
index 0000000..7574fdd
--- /dev/null
+++ b/web_src/js/modules/fomantic/base.js
@@ -0,0 +1,18 @@
+let ariaIdCounter = 0;
+
+export function generateAriaId() {
+ return `_aria_auto_id_${ariaIdCounter++}`;
+}
+
+export function linkLabelAndInput(label, input) {
+ const labelFor = label.getAttribute('for');
+ const inputId = input.getAttribute('id');
+
+ if (inputId && !labelFor) { // missing "for"
+ label.setAttribute('for', inputId);
+ } else if (!inputId && !labelFor) { // missing both "id" and "for"
+ const id = generateAriaId();
+ input.setAttribute('id', id);
+ label.setAttribute('for', id);
+ }
+}
diff --git a/web_src/js/modules/fomantic/checkbox.js b/web_src/js/modules/fomantic/checkbox.js
new file mode 100644
index 0000000..ed77406
--- /dev/null
+++ b/web_src/js/modules/fomantic/checkbox.js
@@ -0,0 +1,13 @@
+import {linkLabelAndInput} from './base.js';
+
+export function initAriaCheckboxPatch() {
+ // link the label and the input element so it's clickable and accessible
+ for (const el of document.querySelectorAll('.ui.checkbox')) {
+ if (el.hasAttribute('data-checkbox-patched')) continue;
+ const label = el.querySelector('label');
+ const input = el.querySelector('input');
+ if (!label || !input) continue;
+ linkLabelAndInput(label, input);
+ el.setAttribute('data-checkbox-patched', 'true');
+ }
+}
diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js
new file mode 100644
index 0000000..82e7108
--- /dev/null
+++ b/web_src/js/modules/fomantic/dropdown.js
@@ -0,0 +1,256 @@
+import $ from 'jquery';
+import {generateAriaId} from './base.js';
+
+const ariaPatchKey = '_giteaAriaPatchDropdown';
+const fomanticDropdownFn = $.fn.dropdown;
+
+// use our own `$().dropdown` function to patch Fomantic's dropdown module
+export function initAriaDropdownPatch() {
+ if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once');
+ $.fn.dropdown = ariaDropdownFn;
+ ariaDropdownFn.settings = fomanticDropdownFn.settings;
+}
+
+// the patched `$.fn.dropdown` function, it passes the arguments to Fomantic's `$.fn.dropdown` function, and:
+// * it does the one-time attaching on the first call
+// * it delegates the `onLabelCreate` to the patched `onLabelCreate` to add necessary aria attributes
+function ariaDropdownFn(...args) {
+ const ret = fomanticDropdownFn.apply(this, args);
+
+ // if the `$().dropdown()` call is without arguments, or it has non-string (object) argument,
+ // it means that this call will reset the dropdown internal settings, then we need to re-delegate the callbacks.
+ const needDelegate = (!args.length || typeof args[0] !== 'string');
+ for (const el of this) {
+ if (!el[ariaPatchKey]) {
+ attachInit(el);
+ }
+ if (needDelegate) {
+ delegateOne($(el));
+ }
+ }
+ return ret;
+}
+
+// make the item has role=option/menuitem, add an id if there wasn't one yet, make items as non-focusable
+// the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element.
+function updateMenuItem(dropdown, item) {
+ if (!item.id) item.id = generateAriaId();
+ item.setAttribute('role', dropdown[ariaPatchKey].listItemRole);
+ item.setAttribute('tabindex', '-1');
+ for (const el of item.querySelectorAll('a, input, button')) el.setAttribute('tabindex', '-1');
+}
+/**
+ * make the label item and its "delete icon" have correct aria attributes
+ * @param {HTMLElement} label
+ */
+function updateSelectionLabel(label) {
+ // the "label" is like this: "<a|div class="ui label" data-value="1">the-label-name <i|svg class="delete icon"/></a>"
+ if (!label.id) {
+ label.id = generateAriaId();
+ }
+ label.tabIndex = -1;
+
+ const deleteIcon = label.querySelector('.delete.icon');
+ if (deleteIcon) {
+ deleteIcon.setAttribute('aria-hidden', 'false');
+ deleteIcon.setAttribute('aria-label', window.config.i18n.remove_label_str.replace('%s', label.getAttribute('data-value')));
+ deleteIcon.setAttribute('role', 'button');
+ }
+}
+
+// delegate the dropdown's template functions and callback functions to add aria attributes.
+function delegateOne($dropdown) {
+ const dropdownCall = fomanticDropdownFn.bind($dropdown);
+
+ // If there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked.
+ // Actually, Fomantic UI doesn't support such layout/usage. It needs to patch the "focusSearch" / "blurSearch" functions to make sure it toggles the menu.
+ const oldFocusSearch = dropdownCall('internal', 'focusSearch');
+ const oldBlurSearch = dropdownCall('internal', 'blurSearch');
+ // * If the "dropdown icon" is clicked, Fomantic calls "focusSearch", so show the menu
+ dropdownCall('internal', 'focusSearch', function () { dropdownCall('show'); oldFocusSearch.call(this) });
+ // * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu
+ dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') });
+
+ // the "template" functions are used for dynamic creation (eg: AJAX)
+ const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
+ const dropdownTemplatesMenuOld = dropdownTemplates.menu;
+ dropdownTemplates.menu = function(response, fields, preserveHTML, className) {
+ // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically
+ const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className);
+ const div = document.createElement('div');
+ div.innerHTML = menuItems;
+ const $wrapper = $(div);
+ const $items = $wrapper.find('> .item');
+ $items.each((_, item) => updateMenuItem($dropdown[0], item));
+ $dropdown[0][ariaPatchKey].deferredRefreshAriaActiveItem();
+ return $wrapper.html();
+ };
+ dropdownCall('setting', 'templates', dropdownTemplates);
+
+ // the `onLabelCreate` is used to add necessary aria attributes for dynamically created selection labels
+ const dropdownOnLabelCreateOld = dropdownCall('setting', 'onLabelCreate');
+ dropdownCall('setting', 'onLabelCreate', function(value, text) {
+ const $label = dropdownOnLabelCreateOld.call(this, value, text);
+ updateSelectionLabel($label[0]);
+ return $label;
+ });
+}
+
+// for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes
+function attachStaticElements(dropdown, focusable, menu) {
+ // prepare static dropdown menu list popup
+ if (!menu.id) {
+ menu.id = generateAriaId();
+ }
+
+ $(menu).find('> .item').each((_, item) => updateMenuItem(dropdown, item));
+
+ // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash
+ menu.setAttribute('role', dropdown[ariaPatchKey].listPopupRole);
+
+ // prepare selection label items
+ for (const label of dropdown.querySelectorAll('.ui.label')) {
+ updateSelectionLabel(label);
+ }
+
+ // make the primary element (focusable) aria-friendly
+ focusable.setAttribute('role', focusable.getAttribute('role') ?? dropdown[ariaPatchKey].focusableRole);
+ focusable.setAttribute('aria-haspopup', dropdown[ariaPatchKey].listPopupRole);
+ focusable.setAttribute('aria-controls', menu.id);
+ focusable.setAttribute('aria-expanded', 'false');
+
+ // use tooltip's content as aria-label if there is no aria-label
+ const tooltipContent = dropdown.getAttribute('data-tooltip-content');
+ if (tooltipContent && !dropdown.getAttribute('aria-label')) {
+ dropdown.setAttribute('aria-label', tooltipContent);
+ }
+}
+
+function attachInit(dropdown) {
+ dropdown[ariaPatchKey] = {};
+ if (dropdown.classList.contains('custom')) return;
+
+ // Dropdown has 2 different focusing behaviors
+ // * with search input: the input is focused, and it works with aria-activedescendant pointing another sibling element.
+ // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown
+ // Some desktop screen readers may change the focus, but dropdown requires that the focus must be on its primary element, then they don't work well.
+
+ // Expected user interactions for dropdown with aria support:
+ // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown
+ // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item)
+ // * user can use arrow key Up/Down to navigate between menu items
+ // * when user presses Enter:
+ // - if the menu item is clickable (eg: <a>), then trigger the click event
+ // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu
+
+ // TODO: multiple selection is only partially supported. Check and test them one by one in the future.
+
+ const textSearch = dropdown.querySelector('input.search');
+ const focusable = textSearch || dropdown; // the primary element for focus, see comment above
+ if (!focusable) return;
+
+ // as a combobox, the input should not have autocomplete by default
+ if (textSearch && !textSearch.getAttribute('autocomplete')) {
+ textSearch.setAttribute('autocomplete', 'off');
+ }
+
+ let menu = $(dropdown).find('> .menu')[0];
+ if (!menu) {
+ // some "multiple selection" dropdowns don't have a static menu element in HTML, we need to pre-create it to make it have correct aria attributes
+ menu = document.createElement('div');
+ menu.classList.add('menu');
+ dropdown.append(menu);
+ }
+
+ // There are 2 possible solutions about the role: combobox or menu.
+ // The idea is that if there is an input, then it's a combobox, otherwise it's a menu.
+ // Since #19861 we have prepared the "combobox" solution, but didn't get enough time to put it into practice and test before.
+ const isComboBox = dropdown.querySelectorAll('input').length > 0;
+
+ dropdown[ariaPatchKey].focusableRole = isComboBox ? 'combobox' : 'menu';
+ dropdown[ariaPatchKey].listPopupRole = isComboBox ? 'listbox' : '';
+ dropdown[ariaPatchKey].listItemRole = isComboBox ? 'option' : 'menuitem';
+
+ attachDomEvents(dropdown, focusable, menu);
+ attachStaticElements(dropdown, focusable, menu);
+}
+
+function attachDomEvents(dropdown, focusable, menu) {
+ // when showing, it has class: ".animating.in"
+ // when hiding, it has class: ".visible.animating.out"
+ const isMenuVisible = () => (menu.classList.contains('visible') && !menu.classList.contains('out')) || menu.classList.contains('in');
+
+ // update aria attributes according to current active/selected item
+ const refreshAriaActiveItem = () => {
+ const menuVisible = isMenuVisible();
+ focusable.setAttribute('aria-expanded', menuVisible ? 'true' : 'false');
+
+ // if there is an active item, use it (the user is navigating between items)
+ // otherwise use the "selected" for combobox (for the last selected item)
+ const active = $(menu).find('> .item.active, > .item.selected')[0];
+ if (!active) return;
+ // if the popup is visible and has an active/selected item, use its id as aria-activedescendant
+ if (menuVisible) {
+ focusable.setAttribute('aria-activedescendant', active.id);
+ } else if (dropdown[ariaPatchKey].listPopupRole === 'menu') {
+ // for menu, when the popup is hidden, no need to keep the aria-activedescendant, and clear the active/selected item
+ focusable.removeAttribute('aria-activedescendant');
+ active.classList.remove('active', 'selected');
+ }
+ };
+
+ dropdown.addEventListener('keydown', (e) => {
+ // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
+ if (e.key === 'Enter') {
+ const dropdownCall = fomanticDropdownFn.bind($(dropdown));
+ let $item = dropdownCall('get item', dropdownCall('get value'));
+ if (!$item) $item = $(menu).find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
+ // if the selected item is clickable, then trigger the click event.
+ // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click.
+ if ($item?.[0]?.matches('a, .js-aria-clickable')) $item[0].click();
+ }
+ });
+
+ // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work)
+ // do not return any value, jQuery has return-value related behaviors.
+ // when the popup is hiding, it's better to have a small "delay", because there is a Fomantic UI animation
+ // without the delay for hiding, the UI will be somewhat laggy and sometimes may get stuck in the animation.
+ const deferredRefreshAriaActiveItem = (delay = 0) => { setTimeout(refreshAriaActiveItem, delay) };
+ dropdown[ariaPatchKey].deferredRefreshAriaActiveItem = deferredRefreshAriaActiveItem;
+ dropdown.addEventListener('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAriaActiveItem(); });
+
+ // if the dropdown has been opened by focus, do not trigger the next click event again.
+ // otherwise the dropdown will be closed immediately, especially on Android with TalkBack
+ // * desktop event sequence: mousedown -> focus -> mouseup -> click
+ // * mobile event sequence: focus -> mousedown -> mouseup -> click
+ // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event
+ let ignoreClickPreEvents = 0, ignoreClickPreVisible = 0;
+ dropdown.addEventListener('mousedown', () => {
+ ignoreClickPreVisible += isMenuVisible() ? 1 : 0;
+ ignoreClickPreEvents++;
+ }, true);
+ dropdown.addEventListener('focus', () => {
+ ignoreClickPreVisible += isMenuVisible() ? 1 : 0;
+ ignoreClickPreEvents++;
+ deferredRefreshAriaActiveItem();
+ }, true);
+ dropdown.addEventListener('blur', () => {
+ ignoreClickPreVisible = ignoreClickPreEvents = 0;
+ deferredRefreshAriaActiveItem(100);
+ }, true);
+ dropdown.addEventListener('mouseup', () => {
+ setTimeout(() => {
+ ignoreClickPreVisible = ignoreClickPreEvents = 0;
+ deferredRefreshAriaActiveItem(100);
+ }, 0);
+ }, true);
+ dropdown.addEventListener('click', (e) => {
+ if (isMenuVisible() &&
+ ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible
+ ignoreClickPreEvents === 2 // the click event is related to mousedown+focus
+ ) {
+ e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again
+ }
+ ignoreClickPreEvents = ignoreClickPreVisible = 0;
+ }, true);
+}
diff --git a/web_src/js/modules/fomantic/form.js b/web_src/js/modules/fomantic/form.js
new file mode 100644
index 0000000..3bb0058
--- /dev/null
+++ b/web_src/js/modules/fomantic/form.js
@@ -0,0 +1,13 @@
+import {linkLabelAndInput} from './base.js';
+
+export function initAriaFormFieldPatch() {
+ // link the label and the input element so it's clickable and accessible
+ for (const el of document.querySelectorAll('.ui.form .field')) {
+ if (el.hasAttribute('data-field-patched')) continue;
+ const label = el.querySelector(':scope > label');
+ const input = el.querySelector(':scope > input');
+ if (!label || !input) continue;
+ linkLabelAndInput(label, input);
+ el.setAttribute('data-field-patched', 'true');
+ }
+}
diff --git a/web_src/js/modules/fomantic/modal.js b/web_src/js/modules/fomantic/modal.js
new file mode 100644
index 0000000..8b455cf
--- /dev/null
+++ b/web_src/js/modules/fomantic/modal.js
@@ -0,0 +1,28 @@
+import $ from 'jquery';
+
+const fomanticModalFn = $.fn.modal;
+
+// use our own `$.fn.modal` to patch Fomantic's modal module
+export function initAriaModalPatch() {
+ if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once');
+ $.fn.modal = ariaModalFn;
+ ariaModalFn.settings = fomanticModalFn.settings;
+}
+
+// the patched `$.fn.modal` modal function
+// * it does the one-time attaching on the first call
+function ariaModalFn(...args) {
+ const ret = fomanticModalFn.apply(this, args);
+ if (args[0] === 'show' || args[0]?.autoShow) {
+ for (const el of this) {
+ // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default).
+ // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed.
+ // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form.
+ // So, all "cancel" buttons without "[type]" must be marked as "type=button".
+ for (const button of el.querySelectorAll('form button.cancel:not([type])')) {
+ button.setAttribute('type', 'button');
+ }
+ }
+ }
+ return ret;
+}
diff --git a/web_src/js/modules/fomantic/transition.js b/web_src/js/modules/fomantic/transition.js
new file mode 100644
index 0000000..78aa053
--- /dev/null
+++ b/web_src/js/modules/fomantic/transition.js
@@ -0,0 +1,54 @@
+import $ from 'jquery';
+
+export function initFomanticTransition() {
+ const transitionNopBehaviors = new Set([
+ 'clear queue', 'stop', 'stop all', 'destroy',
+ 'force repaint', 'repaint', 'reset',
+ 'looping', 'remove looping', 'disable', 'enable',
+ 'set duration', 'save conditions', 'restore conditions',
+ ]);
+ // stand-in for removed transition module
+ $.fn.transition = function (arg0, arg1, arg2) {
+ if (arg0 === 'is supported') return true;
+ if (arg0 === 'is animating') return false;
+ if (arg0 === 'is inward') return false;
+ if (arg0 === 'is outward') return false;
+
+ let argObj;
+ if (typeof arg0 === 'string') {
+ // many behaviors are no-op now. https://fomantic-ui.com/modules/transition.html#/usage
+ if (transitionNopBehaviors.has(arg0)) return this;
+ // now, the arg0 is an animation name, the syntax: (animation, duration, complete)
+ argObj = {animation: arg0, ...(arg1 && {duration: arg1}), ...(arg2 && {onComplete: arg2})};
+ } else if (typeof arg0 === 'object') {
+ argObj = arg0;
+ } else {
+ throw new Error(`invalid argument: ${arg0}`);
+ }
+
+ const isAnimationIn = argObj.animation?.startsWith('show') || argObj.animation?.endsWith(' in');
+ const isAnimationOut = argObj.animation?.startsWith('hide') || argObj.animation?.endsWith(' out');
+ this.each((_, el) => {
+ let toShow = isAnimationIn;
+ if (!isAnimationIn && !isAnimationOut) {
+ // If the animation is not in/out, then it must be a toggle animation.
+ // Fomantic uses computed styles to check "visibility", but to avoid unnecessary arguments, here it only checks the class.
+ toShow = this.hasClass('hidden'); // maybe it could also check "!this.hasClass('visible')", leave it to the future until there is a real problem.
+ }
+ argObj.onStart?.call(el);
+ if (toShow) {
+ el.classList.remove('hidden');
+ el.classList.add('visible', 'transition');
+ if (argObj.displayType) el.style.setProperty('display', argObj.displayType, 'important');
+ argObj.onShow?.call(el);
+ } else {
+ el.classList.add('hidden');
+ el.classList.remove('visible'); // don't remove the transition class because the Fomantic animation style is `.hidden.transition`.
+ el.style.removeProperty('display');
+ argObj.onHidden?.call(el);
+ }
+ argObj.onComplete?.call(el);
+ });
+ return this;
+ };
+}