Move some JS code from fomantic.js
to standalone files (#27994)
To improve maintainability, this PR: 1. Rename `web_src/js/modules/aria` to `web_src/js/modules/fomantic` (the code there are all for aria of fomantic) 2. Move api/transition related code to `web_src/js/modules/fomantic/api.js` and `web_src/js/modules/fomantic/transition.js` No logic is changed.
This commit is contained in:
parent
61ff91f960
commit
f860fe31d9
8 changed files with 100 additions and 93 deletions
38
web_src/js/modules/fomantic/checkbox.js
Normal file
38
web_src/js/modules/fomantic/checkbox.js
Normal file
|
@ -0,0 +1,38 @@
|
|||
import $ from 'jquery';
|
||||
import {generateAriaId} from './base.js';
|
||||
|
||||
const ariaPatchKey = '_giteaAriaPatchCheckbox';
|
||||
const fomanticCheckboxFn = $.fn.checkbox;
|
||||
|
||||
// use our own `$.fn.checkbox` to patch Fomantic's checkbox module
|
||||
export function initAriaCheckboxPatch() {
|
||||
if ($.fn.checkbox === ariaCheckboxFn) throw new Error('initAriaCheckboxPatch could only be called once');
|
||||
$.fn.checkbox = ariaCheckboxFn;
|
||||
ariaCheckboxFn.settings = fomanticCheckboxFn.settings;
|
||||
}
|
||||
|
||||
// the patched `$.fn.checkbox` checkbox function
|
||||
// * it does the one-time attaching on the first call
|
||||
function ariaCheckboxFn(...args) {
|
||||
const ret = fomanticCheckboxFn.apply(this, args);
|
||||
for (const el of this) {
|
||||
if (el[ariaPatchKey]) continue;
|
||||
attachInit(el);
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function attachInit(el) {
|
||||
// Fomantic UI checkbox needs to be something like: <div class="ui checkbox"><label /><input /></div>
|
||||
// It doesn't work well with <label><input />...</label>
|
||||
// To make it work with aria, the "id"/"for" attributes are necessary, so add them automatically if missing.
|
||||
// In the future, refactor to use native checkbox directly, then this patch could be removed.
|
||||
el[ariaPatchKey] = {}; // record that this element has been patched
|
||||
const label = el.querySelector('label');
|
||||
const input = el.querySelector('input');
|
||||
if (!label || !input || input.getAttribute('id')) return;
|
||||
|
||||
const id = generateAriaId();
|
||||
input.setAttribute('id', id);
|
||||
label.setAttribute('for', id);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue