mirror of https://github.com/go-gitea/gitea
Refactor hiding-methods, remove jQuery show/hide, remove `.hide` class, remove inline style=display:none (#22950)
Close #22847 This PR: * introduce Gitea's own `showElem` and related functions * remove jQuery show/hide * remove .hide class * remove inline style=display:none From now on: do not use: * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex" * ".hidden" class: it has been polluted by Fomantic UI in many cases * inline style="display: none": it's difficult to tweak * jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important" only use: * this ".gt-hidden" class * showElem/hideElem/toggleElem functions in "utils/dom.js" cc: @silverwind , this is the all-in-one PRpull/22979/head^2
wxiaoguang
2 years ago
committed by
GitHub
parent
6221a6fd54
commit
d32af84a10
@ -0,0 +1,65 @@ |
||||
function getComputedStyleProperty(el, prop) { |
||||
const cs = el ? window.getComputedStyle(el) : null; |
||||
return cs ? cs[prop] : null; |
||||
} |
||||
|
||||
function isShown(el) { |
||||
return getComputedStyleProperty(el, 'display') !== 'none'; |
||||
} |
||||
|
||||
function assertShown(el, expectShown) { |
||||
if (window.config.runModeIsProd) return; |
||||
|
||||
// to help developers to catch display bugs, this assertion can be removed after next release cycle or if it has been proved that there is no bug.
|
||||
if (expectShown && !isShown(el)) { |
||||
throw new Error('element is hidden but should be shown'); |
||||
} else if (!expectShown && isShown(el)) { |
||||
throw new Error('element is shown but should be hidden'); |
||||
} |
||||
} |
||||
|
||||
function elementsCall(el, func, ...args) { |
||||
if (el instanceof String) { |
||||
el = document.querySelectorAll(el); |
||||
} |
||||
if (el instanceof Node) { |
||||
func(el, ...args); |
||||
} else if (el.length !== undefined) { |
||||
// this works for: NodeList, HTMLCollection, Array, jQuery
|
||||
for (const e of el) { |
||||
func(e, ...args); |
||||
} |
||||
} else { |
||||
throw new Error('invalid argument to be shown/hidden'); |
||||
} |
||||
} |
||||
|
||||
function toggleShown(el, force) { |
||||
if (force === true) { |
||||
el.classList.remove('gt-hidden'); |
||||
assertShown(el, true); |
||||
} else if (force === false) { |
||||
el.classList.add('gt-hidden'); |
||||
assertShown(el, false); |
||||
} else if (force === undefined) { |
||||
const wasShown = window.config.runModeIsProd ? undefined : isShown(el); |
||||
el.classList.toggle('gt-hidden'); |
||||
if (wasShown !== undefined) { |
||||
assertShown(el, !wasShown); |
||||
} |
||||
} else { |
||||
throw new Error('invalid force argument'); |
||||
} |
||||
} |
||||
|
||||
export function showElem(el) { |
||||
elementsCall(el, toggleShown, true); |
||||
} |
||||
|
||||
export function hideElem(el) { |
||||
elementsCall(el, toggleShown, false); |
||||
} |
||||
|
||||
export function toggleElem(el, force) { |
||||
elementsCall(el, toggleShown, force); |
||||
} |
||||
Loading…
Reference in new issue