tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-11-04 13:28:25 +00:00
Code Releases Activity

Remove fomantic checkbox module (#30162)

Browse Source 
CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on
admin page also still work. The only necessary JS is the one that links
`input` and `label` so that it can be toggled via label. All checkboxes
except the markdown ones render at `--checkbox-size: 16px` now.

<img width="174" alt="Screenshot 2024-03-28 at 22 15 10"
src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db">

<img width="499" alt="Screenshot 2024-03-28 at 21 00 07"
src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce">

<img width="83" alt="Screenshot 2024-03-28 at 22 14 34"
src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474">

---------

Co-authored-by: delvh <dev.lh@web.de>
This commit is contained in:
silverwind
2024-03-29 05:56:01 +01:00
committed by GitHub
parent 8acc7aab4c
commit 8fd15990c5
18 changed files with 180 additions and 1729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web_src/js/modules/fomantic/checkbox.js
View File

@@ -1,38 +1,15 @@
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);
// 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 || input.getAttribute('id') || label.getAttribute('for')) continue;
const id = generateAriaId();
input.setAttribute('id', id);
label.setAttribute('for', id);
el.setAttribute('data-checkbox-patched', 'true');
}
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);
}