aboutsummaryrefslogtreecommitdiff
path: root/web_src
diff options
context:
space:
mode:
authorwxiaoguang2023-02-19 12:06:14 +0800
committerGitHub2023-02-19 12:06:14 +0800
commitd32af84a1002ceb235c86e4ac569c866ab7816d4 (patch)
tree3832638122aac31fdc2215f85873629fd8ef2fd2 /web_src
parent6221a6fd5450692ae27e5602b41fc9ebd9150736 (diff)
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 PR
Diffstat (limited to 'web_src')
-rw-r--r--web_src/js/components/DiffFileTree.vue6
-rw-r--r--web_src/js/features/admin/common.js45
-rw-r--r--web_src/js/features/common-global.js9
-rw-r--r--web_src/js/features/common-issue.js5
-rw-r--r--web_src/js/features/common-organization.js9
-rw-r--r--web_src/js/features/comp/WebHookEditor.js7
-rw-r--r--web_src/js/features/imagediff.js7
-rw-r--r--web_src/js/features/install.js7
-rw-r--r--web_src/js/features/org-team.js5
-rw-r--r--web_src/js/features/repo-commit.js3
-rw-r--r--web_src/js/features/repo-common.js7
-rw-r--r--web_src/js/features/repo-diff.js8
-rw-r--r--web_src/js/features/repo-editor.js5
-rw-r--r--web_src/js/features/repo-findfile.js3
-rw-r--r--web_src/js/features/repo-graph.js12
-rw-r--r--web_src/js/features/repo-home.js11
-rw-r--r--web_src/js/features/repo-issue-content.js4
-rw-r--r--web_src/js/features/repo-issue.js35
-rw-r--r--web_src/js/features/repo-legacy.js41
-rw-r--r--web_src/js/features/repo-migrate.js25
-rw-r--r--web_src/js/features/repo-migration.js7
-rw-r--r--web_src/js/features/repo-release.js3
-rw-r--r--web_src/js/features/repo-template.js9
-rw-r--r--web_src/js/features/repo-unicode-escape.js17
-rw-r--r--web_src/js/features/user-auth-webauthn.js11
-rw-r--r--web_src/js/features/user-auth.js5
-rw-r--r--web_src/js/features/user-settings.js9
-rw-r--r--web_src/js/utils/dom.js65
-rw-r--r--web_src/less/_base.less5
-rw-r--r--web_src/less/_repository.less12
-rw-r--r--web_src/less/helpers.less12
31 files changed, 246 insertions, 163 deletions
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 3742f3a53..fa59768ee 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -113,11 +113,11 @@ export default {
},
adjustToggleButton(visible) {
const [toShow, toHide] = document.querySelectorAll('.diff-toggle-file-tree-button .icon');
- toShow.classList.toggle('hide', visible); // hide the toShow icon if the tree is visible
- toHide.classList.toggle('hide', !visible); // similarly
+ toShow.classList.toggle('gt-hidden', visible); // hide the toShow icon if the tree is visible
+ toHide.classList.toggle('gt-hidden', !visible); // similarly
const diffTree = document.getElementById('diff-file-tree');
- diffTree.classList.toggle('hide', !visible);
+ diffTree.classList.toggle('gt-hidden', !visible);
},
loadMoreData() {
this.isLoadingNewData = true;
diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
index d0b3e461d..092cf770b 100644
--- a/web_src/js/features/admin/common.js
+++ b/web_src/js/features/admin/common.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {checkAppUrl} from '../common-global.js';
+import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
const {csrfToken} = window.config;
@@ -18,8 +19,8 @@ export function initAdminCommon() {
if ($(this).val().substring(0, 1) === '0') {
$('#user_name').removeAttr('disabled');
$('#login_name').removeAttr('required');
- $('.non-local').hide();
- $('.local').show();
+ hideElem($('.non-local'));
+ showElem($('.local'));
$('#user_name').focus();
if ($(this).data('password') === 'required') {
@@ -30,8 +31,8 @@ export function initAdminCommon() {
$('#user_name').attr('disabled', 'disabled');
}
$('#login_name').attr('required', 'required');
- $('.non-local').show();
- $('.local').hide();
+ showElem($('.non-local'));
+ hideElem($('.local'));
$('#login_name').focus();
$('#password').removeAttr('required');
@@ -41,38 +42,38 @@ export function initAdminCommon() {
function onSecurityProtocolChange() {
if ($('#security_protocol').val() > 0) {
- $('.has-tls').show();
+ showElem($('.has-tls'));
} else {
- $('.has-tls').hide();
+ hideElem($('.has-tls'));
}
}
function onUsePagedSearchChange() {
if ($('#use_paged_search').prop('checked')) {
- $('.search-page-size').show()
+ showElem($('.search-page-size'))
.find('input').attr('required', 'required');
} else {
- $('.search-page-size').hide()
+ hideElem($('.search-page-size'))
.find('input').removeAttr('required');
}
}
function onOAuth2Change(applyDefaultValues) {
- $('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url').hide();
+ hideElem($('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url'));
$('.open_id_connect_auto_discovery_url input[required]').removeAttr('required');
const provider = $('#oauth2_provider').val();
switch (provider) {
case 'openidConnect':
$('.open_id_connect_auto_discovery_url input').attr('required', 'required');
- $('.open_id_connect_auto_discovery_url').show();
+ showElem($('.open_id_connect_auto_discovery_url'));
break;
default:
if ($(`#${provider}_customURLSettings`).data('required')) {
$('#oauth2_use_custom_url').attr('checked', 'checked');
}
if ($(`#${provider}_customURLSettings`).data('available')) {
- $('.oauth2_use_custom_url').show();
+ showElem($('.oauth2_use_custom_url'));
}
}
onOAuth2UseCustomURLChange(applyDefaultValues);
@@ -80,7 +81,7 @@ export function initAdminCommon() {
function onOAuth2UseCustomURLChange(applyDefaultValues) {
const provider = $('#oauth2_provider').val();
- $('.oauth2_use_custom_url_field').hide();
+ hideElem($('.oauth2_use_custom_url_field'));
$('.oauth2_use_custom_url_field input[required]').removeAttr('required');
if ($('#oauth2_use_custom_url').is(':checked')) {
@@ -90,20 +91,20 @@ export function initAdminCommon() {
}
if ($(`#${provider}_${custom}`).data('available')) {
$(`.oauth2_${custom} input`).attr('required', 'required');
- $(`.oauth2_${custom}`).show();
+ showElem($(`.oauth2_${custom}`));
}
}
}
}
function onEnableLdapGroupsChange() {
- $('#ldap-group-options').toggle($('.js-ldap-group-toggle').is(':checked'));
+ toggleElem($('#ldap-group-options'), $('.js-ldap-group-toggle').is(':checked'));
}
// New authentication
if ($('.admin.new.authentication').length > 0) {
$('#auth_type').on('change', function () {
- $('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi').hide();
+ hideElem($('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi'));
$('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]').removeAttr('required');
$('.binddnrequired').removeClass('required');
@@ -111,30 +112,30 @@ export function initAdminCommon() {
const authType = $(this).val();
switch (authType) {
case '2': // LDAP
- $('.ldap').show();
+ showElem($('.ldap'));
$('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required');
$('.binddnrequired').addClass('required');
break;
case '3': // SMTP
- $('.smtp').show();
- $('.has-tls').show();
+ showElem($('.smtp'));
+ showElem($('.has-tls'));
$('.smtp div.required input, .has-tls').attr('required', 'required');
break;
case '4': // PAM
- $('.pam').show();
+ showElem($('.pam'));
$('.pam input').attr('required', 'required');
break;
case '5': // LDAP
- $('.dldap').show();
+ showElem($('.dldap'));
$('.dldap div.required:not(.ldap) input').attr('required', 'required');
break;
case '6': // OAuth2
- $('.oauth2').show();
+ showElem($('.oauth2'));
$('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required');
onOAuth2Change(true);
break;
case '7': // SSPI
- $('.sspi').show();
+ showElem($('.sspi'));
$('.sspi div.required input').attr('required', 'required');
break;
}
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index c0acf091c..57a429ed9 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -8,6 +8,7 @@ import {attachCheckboxAria, attachDropdownAria} from './aria.js';
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
import {initTooltip} from '../modules/tippy.js';
import {svg} from '../svg.js';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
const {appUrl, csrfToken} = window.config;
@@ -118,7 +119,7 @@ export function initGlobalCommon() {
$('.tabable.menu .item').tab();
$('.toggle.button').on('click', function () {
- $($(this).data('target')).slideToggle(100);
+ toggleElem($($(this).data('target')));
});
// make table <tr> and <td> elements clickable like a link
@@ -317,7 +318,7 @@ export function initGlobalLinkActions() {
export function initGlobalButtons() {
$('.show-panel.button').on('click', function () {
- $($(this).data('panel')).show();
+ showElem($(this).data('panel'));
});
$('.hide-panel.button').on('click', function (event) {
@@ -325,12 +326,12 @@ export function initGlobalButtons() {
event.preventDefault();
let sel = $(this).attr('data-panel');
if (sel) {
- $(sel).hide();
+ hideElem($(sel));
return;
}
sel = $(this).attr('data-panel-closest');
if (sel) {
- $(this).closest(sel).hide();
+ hideElem($(this).closest(sel));
return;
}
// should never happen, otherwise there is a bug in code
diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js
index f53dd5081..0965caef1 100644
--- a/web_src/js/features/common-issue.js
+++ b/web_src/js/features/common-issue.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {updateIssuesMeta} from './repo-issue.js';
+import {toggleElem} from '../utils/dom.js';
export function initCommonIssue() {
const $issueSelectAllWrapper = $('.issue-checkbox-all');
@@ -19,8 +20,8 @@ export function initCommonIssue() {
$issueSelectAll.prop({'checked': false, 'indeterminate': false});
}
// if any issue is selected, show the action panel, otherwise show the filter panel
- $('#issue-filters').toggle(!anyChecked);
- $('#issue-actions').toggle(anyChecked);
+ toggleElem($('#issue-filters'), !anyChecked);
+ toggleElem($('#issue-actions'), anyChecked);
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAllWrapper);
};
diff --git a/web_src/js/features/common-organization.js b/web_src/js/features/common-organization.js
index 218c03904..1796efc6a 100644
--- a/web_src/js/features/common-organization.js
+++ b/web_src/js/features/common-organization.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {initCompLabelEdit} from './comp/LabelEdit.js';
+import {hideElem, showElem} from '../utils/dom.js';
export function initCommonOrganization() {
if ($('.organization').length === 0) {
@@ -11,11 +12,11 @@ export function initCommonOrganization() {
const $prompt = $('#org-name-change-prompt');
const $prompt_redirect = $('#org-name-change-redirect-prompt');
if ($(this).val().toString().toLowerCase() !== $(this).data('org-name').toString().toLowerCase()) {
- $prompt.show();
- $prompt_redirect.show();
+ showElem($prompt);
+ showElem($prompt_redirect);
} else {
- $prompt.hide();
- $prompt_redirect.hide();
+ hideElem($prompt);
+ hideElem($prompt_redirect);
}
});
}
diff --git a/web_src/js/features/comp/WebHookEditor.js b/web_src/js/features/comp/WebHookEditor.js
index cda0fa391..f4c82898f 100644
--- a/web_src/js/features/comp/WebHookEditor.js
+++ b/web_src/js/features/comp/WebHookEditor.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
const {csrfToken} = window.config;
@@ -9,18 +10,18 @@ export function initCompWebHookEditor() {
$('.events.checkbox input').on('change', function () {
if ($(this).is(':checked')) {
- $('.events.fields').show();
+ showElem($('.events.fields'));
}
});
$('.non-events.checkbox input').on('change', function () {
if ($(this).is(':checked')) {
- $('.events.fields').hide();
+ hideElem($('.events.fields'));
}
});
const updateContentType = function () {
const visible = $('#http_method').val() === 'POST';
- $('#content_type').parent().parent()[visible ? 'show' : 'hide']();
+ toggleElem($('#content_type').parent().parent(), visible);
};
updateContentType();
$('#http_method').on('change', () => {
diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index 250ea9579..7a285f1f8 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem} from '../utils/dom.js';
function getDefaultSvgBoundsIfUndefined(svgXml, src) {
const DefaultSize = 300;
@@ -104,7 +105,7 @@ export function initImageDiff() {
if (bounds) {
info.$image.attr('width', bounds.width);
info.$image.attr('height', bounds.height);
- info.$boundsInfo.hide();
+ hideElem(info.$boundsInfo);
}
}
}
@@ -128,8 +129,8 @@ export function initImageDiff() {
initOverlay(createContext($imageAfter[2], $imageBefore[2]));
}
- $container.find('> .loader').hide();
- $container.find('> .hide').removeClass('hide');
+ hideElem($container.find('> .loader'));
+ $container.find('> .gt-hidden').removeClass('gt-hidden');
}
function initSideBySide(sizes) {
diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js
index 9468ba9c4..2ba6fe127 100644
--- a/web_src/js/features/install.js
+++ b/web_src/js/features/install.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
export function initInstall() {
if ($('.page-content.install').length === 0) {
@@ -21,12 +22,12 @@ export function initInstall() {
// Database type change detection.
$('#db_type').on('change', function () {
const dbType = $(this).val();
- $('div[data-db-setting-for]').hide();
- $(`div[data-db-setting-for=${dbType}]`).show();
+ hideElem($('div[data-db-setting-for]'));
+ showElem($(`div[data-db-setting-for=${dbType}]`));
if (dbType !== 'sqlite3') {
// for most remote database servers
- $(`div[data-db-setting-for=common-host]`).show();
+ showElem($(`div[data-db-setting-for=common-host]`));
const lastDbHost = $dbHost.val();
const isDbHostDefault = !lastDbHost || Object.values(defaultDbHosts).includes(lastDbHost);
if (isDbHostDefault) {
diff --git a/web_src/js/features/org-team.js b/web_src/js/features/org-team.js
index 9e6c3c7ff..3640bb96f 100644
--- a/web_src/js/features/org-team.js
+++ b/web_src/js/features/org-team.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
const {appSubUrl} = window.config;
@@ -7,9 +8,9 @@ export function initOrgTeamSettings() {
$('.organization.new.team input[name=permission]').on('change', () => {
const val = $('input[name=permission]:checked', '.organization.new.team').val();
if (val === 'admin') {
- $('.organization.new.team .team-units').hide();
+ hideElem($('.organization.new.team .team-units'));
} else {
- $('.organization.new.team .team-units').show();
+ showElem($('.organization.new.team .team-units'));
}
});
}
diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js
index 3aba85091..e2eef3ee5 100644
--- a/web_src/js/features/repo-commit.js
+++ b/web_src/js/features/repo-commit.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {createTippy} from '../modules/tippy.js';
+import {toggleElem} from '../utils/dom.js';
const {csrfToken} = window.config;
@@ -7,7 +8,7 @@ export function initRepoEllipsisButton() {
$('.ellipsis-button').on('click', function (e) {
e.preventDefault();
const expanded = $(this).attr('aria-expanded') === 'true';
- $(this).parent().find('.commit-body').toggle();
+ toggleElem($(this).parent().find('.commit-body'));
$(this).attr('aria-expanded', String(!expanded));
});
}
diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
index a218c5b30..1a32d7cb6 100644
--- a/web_src/js/features/repo-common.js
+++ b/web_src/js/features/repo-common.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
const {csrfToken} = window.config;
@@ -76,8 +77,8 @@ export function initRepoCommonBranchOrTagDropdown(selector) {
$(selector).each(function () {
const $dropdown = $(this);
$dropdown.find('.reference.column').on('click', function () {
- $dropdown.find('.scrolling.reference-list-menu').hide();
- $($(this).data('target')).show();
+ hideElem($dropdown.find('.scrolling.reference-list-menu'));
+ showElem($($(this).data('target')));
return false;
});
});
@@ -102,7 +103,7 @@ export function initRepoCommonLanguageStats() {
if ($('.language-stats').length > 0) {
$('.language-stats').on('click', (e) => {
e.preventDefault();
- $('.language-stats-details, .repository-menu').slideToggle();
+ toggleElem($('.language-stats-details, .repository-menu'));
});
}
}
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 9b5da7de8..d2559b123 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -35,8 +35,8 @@ export function initRepoDiffFileViewToggle() {
$this.addClass('active');
const $target = $($this.data('toggle-selector'));
- $target.parent().children().addClass('hide');
- $target.removeClass('hide');
+ $target.parent().children().addClass('gt-hidden');
+ $target.removeClass('gt-hidden');
});
}
@@ -92,7 +92,7 @@ export function initRepoDiffConversationNav() {
// Previous/Next code review conversation
$(document).on('click', '.previous-conversation', (e) => {
const $conversation = $(e.currentTarget).closest('.comment-code-cloud');
- const $conversations = $('.comment-code-cloud:not(.hide)');
+ const $conversations = $('.comment-code-cloud:not(.gt-hidden)');
const index = $conversations.index($conversation);
const previousIndex = index > 0 ? index - 1 : $conversations.length - 1;
const $previousConversation = $conversations.eq(previousIndex);
@@ -101,7 +101,7 @@ export function initRepoDiffConversationNav() {
});
$(document).on('click', '.next-conversation', (e) => {
const $conversation = $(e.currentTarget).closest('.comment-code-cloud');
- const $conversations = $('.comment-code-cloud:not(.hide)');
+ const $conversations = $('.comment-code-cloud:not(.gt-hidden)');
const index = $conversations.index($conversation);
const nextIndex = index < $conversations.length - 1 ? index + 1 : 0;
const $nextConversation = $conversations.eq(nextIndex);
diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js
index f32bdbb8c..a9d143847 100644
--- a/web_src/js/features/repo-editor.js
+++ b/web_src/js/features/repo-editor.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
import {htmlEscape} from 'escape-goat';
import {initMarkupContent} from '../markup/content.js';
import {createCodeEditor} from './codeeditor.js';
+import {hideElem, showElem} from '../utils/dom.js';
const {csrfToken} = window.config;
let previewFileModes;
@@ -81,10 +82,10 @@ export function initRepoEditor() {
$('.js-quick-pull-choice-option').on('change', function () {
if ($(this).val() === 'commit-to-new-branch') {
- $('.quick-pull-branch-name').show();
+ showElem($('.quick-pull-branch-name'));
$('.quick-pull-branch-name input').prop('required', true);
} else {
- $('.quick-pull-branch-name').hide();
+ hideElem($('.quick-pull-branch-name'));
$('.quick-pull-branch-name input').prop('required', false);
}
$('#commit-button').text($(this).attr('button_text'));
diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js
index 0eae4a75d..093f90fe8 100644
--- a/web_src/js/features/repo-findfile.js
+++ b/web_src/js/features/repo-findfile.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {svg} from '../svg.js';
+import {toggleElem} from '../utils/dom.js';
const {csrf} = window.config;
@@ -83,7 +84,7 @@ function filterRepoFiles(filter) {
const filterResult = filterRepoFilesWeighted(files, filter);
const tmplRow = `<tr><td><a></a></td></tr>`;
- $repoFindFileNoResult.toggle(filterResult.length === 0);
+ toggleElem($repoFindFileNoResult, filterResult.length === 0);
for (const r of filterResult) {
const $row = $(tmplRow);
const $a = $row.find('a');
diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js
index 16d35e66f..e445ae110 100644
--- a/web_src/js/features/repo-graph.js
+++ b/web_src/js/features/repo-graph.js
@@ -56,17 +56,17 @@ export function initRepoGraphGit() {
ajaxUrl.searchParams.set('div-only', 'true');
window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
$('#pagination').empty();
- $('#rel-container').addClass('hide');
- $('#rev-container').addClass('hide');
- $('#loading-indicator').removeClass('hide');
+ $('#rel-container').addClass('gt-hidden');
+ $('#rev-container').addClass('gt-hidden');
+ $('#loading-indicator').removeClass('gt-hidden');
(async () => {
const div = $(await $.ajax(String(ajaxUrl)));
$('#pagination').html(div.find('#pagination').html());
$('#rel-container').html(div.find('#rel-container').html());
$('#rev-container').html(div.find('#rev-container').html());
- $('#loading-indicator').addClass('hide');
- $('#rel-container').removeClass('hide');
- $('#rev-container').removeClass('hide');
+ $('#loading-indicator').addClass('gt-hidden');
+ $('#rel-container').removeClass('gt-hidden');
+ $('#rev-container').removeClass('gt-hidden');
})();
};
const dropdownSelected = params.getAll('branch');
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js
index c4bdf3d45..dfccffc79 100644
--- a/web_src/js/features/repo-home.js
+++ b/web_src/js/features/repo-home.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {stripTags} from '../utils.js';
+import {hideElem, showElem} from '../utils/dom.js';
const {appSubUrl, csrfToken} = window.config;
@@ -13,12 +14,12 @@ export function initRepoTopicBar() {
const topicPrompts = getPrompts();
mgrBtn.on('click', () => {
- viewDiv.hide();
- editDiv.css('display', ''); // show Semantic UI Grid
+ hideElem(viewDiv);
+ showElem(editDiv);
});
function getPrompts() {
- const hidePrompt = $('div.hide#validate_prompt');
+ const hidePrompt = $('#validate_prompt');
const prompts = {
countPrompt: hidePrompt.children('#count_prompt').text(),
formatPrompt: hidePrompt.children('#format_prompt').text()
@@ -47,8 +48,8 @@ export function initRepoTopicBar() {
link.insertBefore(last);
}
}
- editDiv.css('display', 'none');
- viewDiv.show();
+ hideElem(editDiv);
+ showElem(viewDiv);
}
}).fail((xhr) => {
if (xhr.status === 422) {
diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index a96da53f2..87295573e 100644
--- a/web_src/js/features/repo-issue-content.js
+++ b/web_src/js/features/repo-issue-content.js
@@ -16,7 +16,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
${svg('octicon-x', 16, 'close icon inside')}
<div class="header gt-df gt-ac gt-sb">
<div>${itemTitleHtml}</div>
- <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide">
+ <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 gt-hidden">
${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
<div class="menu">
<div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
@@ -62,7 +62,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
$dialog.find('.comment-diff-data').removeClass('is-loading').html(resp.diffHtml);
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
if (resp.canSoftDelete) {
- $dialog.find('.dialog-header-options').removeClass('hide');
+ $dialog.find('.dialog-header-options').removeClass('gt-hidden');
}
});
},
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 135e3384a..179ca9b72 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -5,6 +5,7 @@ import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
const {appSubUrl, csrfToken} = window.config;
@@ -40,7 +41,7 @@ export function initRepoIssueTimeTracking() {
}
function updateDeadline(deadlineString) {
- $('#deadline-err-invalid-date').hide();
+ hideElem($('#deadline-err-invalid-date'));
$('#deadline-loader').addClass('loading');
let realDeadline = null;
@@ -49,7 +50,7 @@ function updateDeadline(deadlineString) {
if (Number.isNaN(newDate)) {
$('#deadline-loader').removeClass('loading');
- $('#deadline-err-invalid-date').show();
+ showElem($('#deadline-err-invalid-date'));
return false;
}
realDeadline = new Date(newDate);
@@ -69,7 +70,7 @@ function updateDeadline(deadlineString) {
},
error() {
$('#deadline-loader').removeClass('loading');
- $('#deadline-err-invalid-date').show();
+ showElem($('#deadline-err-invalid-date'));
},
});
}
@@ -213,8 +214,8 @@ export function initRepoIssueCodeCommentCancel() {
$(document).on('click', '.cancel-code-comment', (e) => {
const form = $(e.currentTarget).closest('form');
if (form.length > 0 && form.hasClass('comment-form')) {
- form.addClass('hide');
- form.closest('.comment-code-cloud').find('button.comment-form-reply').show();
+ form.addClass('gt-hidden');
+ showElem(form.closest('.comment-code-cloud').find('button.comment-form-reply'));
} else {
form.closest('.comment-code-cloud').remove();
}
@@ -269,7 +270,7 @@ export function initRepoPullRequestUpdate() {
export function initRepoPullRequestMergeInstruction() {
$('.show-instruction').on('click', () => {
- $('.instruct-content').toggle();
+ toggleElem($('.instruct-content'));
});
}
@@ -455,9 +456,9 @@ export function initRepoPullRequestReview() {
$(document).on('click', 'button.comment-form-reply', async function (e) {
e.preventDefault();
- $(this).hide();
+ hideElem($(this));
const form = $(this).closest('.comment-code-cloud').find('.comment-form');
- form.removeClass('hide');
+ form.removeClass('gt-hidden');
const $textarea = form.find('textarea');
let easyMDE = getAttachedEasyMDE($textarea);
if (!easyMDE) {
@@ -488,10 +489,10 @@ export function initRepoPullRequestReview() {
$('.btn-review').on('click', function (e) {
e.preventDefault();
- $(this).closest('.dropdown').find('.menu').toggle('visible');
+ $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
}).closest('.dropdown').find('.close').on('click', function (e) {
e.preventDefault();
- $(this).closest('.menu').toggle('visible');
+ $(this).closest('.menu').toggle('visible'); // eslint-disable-line
});
$(document).on('click', 'a.add-code-comment', async function (e) {
@@ -551,7 +552,7 @@ export function initRepoIssueReferenceIssue() {
// Reference issue
$(document).on('click', '.reference-issue', function (event) {
const $this = $(this);
- $this.closest('.dropdown').find('.menu').toggle('visible');
+ $this.closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
const content = $(`#${$this.data('target')}`).text();
const poster = $this.data('poster-username');
@@ -587,12 +588,12 @@ export function initRepoIssueTitleEdit() {
const $editInput = $('#edit-title-input input');
const editTitleToggle = function () {
- $issueTitle.toggle();
- $('.not-in-edit').toggle();
- $('#edit-title-input').toggle();
- $('#pull-desc').toggle();
- $('#pull-desc-edit').toggle();
- $('.in-edit').toggle();
+ toggleElem($issueTitle);
+ toggleElem($('.not-in-edit'));
+ toggleElem($('#edit-title-input'));
+ toggleElem($('#pull-desc'));
+ toggleElem($('#pull-desc-edit'));
+ toggleElem($('.in-edit'));
$('#issue-title-wrapper').toggleClass('edit-active');
$editInput.focus();
return false;
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 2cf4963b6..e1dc51432 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -25,6 +25,7 @@ import {initCommentContent, initMarkupContent} from '../markup/content.js';
import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoSettingBranches} from './repo-settings.js';
import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
+import {hideElem, showElem} from '../utils/dom.js';
const {csrfToken} = window.config;
@@ -55,9 +56,9 @@ export function initRepoCommentForm() {
}
});
$selectBranch.find('.reference.column').on('click', function () {
- $selectBranch.find('.scrolling.reference-list-menu').css('display', 'none');
+ hideElem($selectBranch.find('.scrolling.reference-list-menu'));
$selectBranch.find('.reference .text').removeClass('black');
- $($(this).data('target')).css('display', 'block');
+ showElem($($(this).data('target')));
$(this).find('.text').addClass('black');
return false;
});
@@ -174,15 +175,15 @@ export function initRepoCommentForm() {
$(this).parent().find('.item').each(function () {
if ($(this).hasClass('checked')) {
listIds.push($(this).data('id'));
- $($(this).data('id-selector')).removeClass('hide');
+ $($(this).data('id-selector')).removeClass('gt-hidden');
} else {
- $($(this).data('id-selector')).addClass('hide');
+ $($(this).data('id-selector')).addClass('gt-hidden');
}
});
if (listIds.length === 0) {
- $noSelect.removeClass('hide');
+ $noSelect.removeClass('gt-hidden');
} else {
- $noSelect.addClass('hide');
+ $noSelect.addClass('gt-hidden');
}
$($(this).parent().data('id')).val(listIds.join(','));
return false;
@@ -208,9 +209,9 @@ export function initRepoCommentForm() {
}
$list.find('.item').each(function () {
- $(this).addClass('hide');
+ $(this).addClass('gt-hidden');
});
- $noSelect.removeClass('hide');
+ $noSelect.removeClass('gt-hidden');
$($(this).parent().data('id')).val('');
});
}
@@ -257,7 +258,7 @@ export function initRepoCommentForm() {
</a>
`);
- $(`.ui${select_id}.list .no-select`).addClass('hide');
+ $(`.ui${select_id}.list .no-select`).addClass('gt-hidden');
$(input_id).val($(this).data('id'));
});
$menu.find('.no-select.item').on('click', function () {
@@ -275,7 +276,7 @@ export function initRepoCommentForm() {
}
$list.find('.selected').html('');
- $list.find('.no-select').removeClass('hide');
+ $list.find('.no-select').removeClass('gt-hidden');
$(input_id).val('');
});
}
@@ -290,7 +291,7 @@ export function initRepoCommentForm() {
async function onEditContent(event) {
event.preventDefault();
- $(this).closest('.dropdown').find('.menu').toggle('visible');
+ $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
const $segment = $(this).closest('.header').next();
const $editContentZone = $segment.find('.edit-content-zone');
const $renderContent = $segment.find('.render-content');
@@ -387,16 +388,16 @@ async function onEditContent(event) {
});
$editContentZone.find('.cancel.button').on('click', () => {
- $renderContent.show();
- $editContentZone.hide();
+ showElem($renderContent);
+ hideElem($editContentZone);
if (dz) {
dz.emit('reload');
}
});
$saveButton.on('click', () => {
- $renderContent.show();
- $editContentZone.hide();
+ showElem($renderContent);
+ hideElem($editContentZone);
const $attachments = $dropzone.find('.files').find('[name=files]').map(function () {
return $(this).val();
}).get();
@@ -438,8 +439,8 @@ async function onEditContent(event) {
}
// Show write/preview tab and copy raw content as needed
- $editContentZone.show();
- $renderContent.hide();
+ showElem($editContentZone);
+ hideElem($renderContent);
if ($textarea.val().length === 0) {
$textarea.val($rawContent.text());
easyMDE.value($rawContent.text());
@@ -558,10 +559,10 @@ export function initRepository() {
// show pull request form
$repoComparePull.find('button.show-form').on('click', function (e) {
e.preventDefault();
- $(this).parent().hide();
+ hideElem($(this).parent());
const $form = $repoComparePull.find('.pullrequest-form');
- $form.show();
+ showElem($form);
$form.find('textarea.edit_area').each(function() {
const easyMDE = getAttachedEasyMDE($(this));
if (easyMDE) {
@@ -583,7 +584,7 @@ function initRepoIssueCommentEdit() {
// Quote reply
$(document).on('click', '.quote-reply', function (event) {
- $(this).closest('.dropdown').find('.menu').toggle('visible');
+ $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
const target = $(this).data('target');
const quote = $(`#${target}`).text().replace(/\n/g, '\n> ');
const content = `> ${quote}\n\n`;
diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js
index d44f540c4..93d1390b4 100644
--- a/web_src/js/features/repo-migrate.js
+++ b/web_src/js/features/repo-migrate.js
@@ -1,12 +1,13 @@
import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
const {appSubUrl, csrfToken} = window.config;
export function initRepoMigrationStatusChecker() {
const migrating = $('#repo_migrating');
- $('#repo_migrating_failed').hide();
- $('#repo_migrating_failed_image').hide();
- $('#repo_migrating_progress_message').hide();
+ hideElem($('#repo_migrating_failed'));
+ hideElem($('#repo_migrating_failed_image'));
+ hideElem($('#repo_migrating_progress_message'));
if (migrating) {
const task = migrating.attr('task');
if (task === undefined) {
@@ -24,15 +25,15 @@ export function initRepoMigrationStatusChecker() {
window.location.reload();
return;
} else if (xhr.responseJSON.status === 3) {
- $('#repo_migrating_progress').hide();
- $('#repo_migrating').hide();
- $('#repo_migrating_failed').show();
- $('#repo_migrating_failed_image').show();
+ hideElem($('#repo_migrating_progress'));
+ hideElem($('#repo_migrating'));
+ showElem($('#repo_migrating_failed'));
+ showElem($('#repo_migrating_failed_image'));
$('#repo_migrating_failed_error').text(xhr.responseJSON.message);
return;
}
if (xhr.responseJSON.message) {
- $('#repo_migrating_progress_message').show();
+ showElem($('#repo_migrating_progress_message'));
$('#repo_migrating_progress_message').text(xhr.responseJSON.message);
}
setTimeout(() => {
@@ -40,10 +41,10 @@ export function initRepoMigrationStatusChecker() {
}, 2000);
return;
}
- $('#repo_migrating_progress').hide();
- $('#repo_migrating').hide();
- $('#repo_migrating_failed').show();
- $('#repo_migrating_failed_image').show();
+ hideElem($('#repo_migrating_progress'));
+ hideElem($('#repo_migrating'));
+ showElem($('#repo_migrating_failed'));
+ showElem($('#repo_migrating_failed_image'));
}
});
}
diff --git a/web_src/js/features/repo-migration.js b/web_src/js/features/repo-migration.js
index c317c7245..ee2ec0194 100644
--- a/web_src/js/features/repo-migration.js
+++ b/web_src/js/features/repo-migration.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
const $service = $('#service_type');
const $user = $('#auth_username');
@@ -18,7 +19,7 @@ export function initRepoMigration() {
$pass.on('keyup', () => {checkItems(false)});
$token.on('keyup', () => {checkItems(true)});
$mirror.on('change', () => {checkItems(true)});
- $('#lfs_settings_show').on('click', () => { $lfsEndpoint.show(); return false });
+ $('#lfs_settings_show').on('click', () => { showElem($lfsEndpoint); return false });
$lfs.on('change', setLFSSettingsVisibility);
const $cloneAddr = $('#clone_addr');
@@ -57,6 +58,6 @@ function checkItems(tokenAuth) {
function setLFSSettingsVisibility() {
const visible = $lfs.is(':checked');
- $lfsSettings.toggle(visible);
- $lfsEndpoint.hide();
+ toggleElem($lfsSettings, visible);
+ hideElem($lfsEndpoint);
}
diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js
index 7589d108f..a061c6b23 100644
--- a/web_src/js/features/repo-release.js
+++ b/web_src/js/features/repo-release.js
@@ -3,13 +3,14 @@ import {attachTribute} from './tribute.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
import {createCommentEasyMDE} from './comp/EasyMDE.js';
+import {hideElem} from '../utils/dom.js';
export function initRepoRelease() {
$(document).on('click', '.remove-rel-attach', function() {
const uuid = $(this).data('uuid');
const id = $(this).data('id');
$(`input[name='attachment-del-${uuid}']`).attr('value', true);
- $(`#attachment-${id}`).hide();
+ hideElem($(`#attachment-${id}`));
});
}
diff --git a/web_src/js/features/repo-template.js b/web_src/js/features/repo-template.js
index dc4ae1e26..0c5ea5233 100644
--- a/web_src/js/features/repo-template.js
+++ b/web_src/js/features/repo-template.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {htmlEscape} from 'escape-goat';
+import {hideElem, showElem} from '../utils/dom.js';
const {appSubUrl} = window.config;
@@ -9,11 +10,11 @@ export function initRepoTemplateSearch() {
const $templateUnits = $('#template_units');
const $nonTemplate = $('#non_template');
if ($repoTemplate.val() !== '' && $repoTemplate.val() !== '0') {
- $templateUnits.show();
- $nonTemplate.hide();
+ showElem($templateUnits);
+ hideElem($nonTemplate);
} else {
- $templateUnits.hide();
- $nonTemplate.show();
+ hideElem($templateUnits);
+ showElem($nonTemplate);
}
};
$repoTemplate.on('change', checkTemplate);
diff --git a/web_src/js/features/repo-unicode-escape.js b/web_src/js/features/repo-unicode-escape.js
index f97bcc7ee..67f2df1d9 100644
--- a/web_src/js/features/repo-unicode-escape.js
+++ b/web_src/js/features/repo-unicode-escape.js
@@ -1,17 +1,18 @@
import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
export function initUnicodeEscapeButton() {
$(document).on('click', 'a.escape-button', (e) => {
e.preventDefault();
$(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped');
- $(e.target).hide();
- $(e.target).siblings('a.unescape-button').show();
+ hideElem($(e.target));
+ showElem($(e.target).siblings('a.unescape-button'));
});
$(document).on('click', 'a.unescape-button', (e) => {
e.preventDefault();
$(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped');
- $(e.target).hide();
- $(e.target).siblings('a.escape-button').show();
+ hideElem($(e.target));
+ showElem($(e.target).siblings('a.escape-button'));
});
$(document).on('click', 'a.toggle-escape-button', (e) => {
e.preventDefault();
@@ -19,12 +20,12 @@ export function initUnicodeEscapeButton() {
const fileView = fileContent.find('.file-code, .file-view');
if (fileView.hasClass('unicode-escaped')) {
fileView.removeClass('unicode-escaped');
- fileContent.find('a.unescape-button').hide();
- fileContent.find('a.escape-button').show();
+ hideElem(fileContent.find('a.unescape-button'));
+ showElem(fileContent.find('a.escape-button'));
} else {
fileView.addClass('unicode-escaped');
- fileContent.find('a.unescape-button').show();
- fileContent.find('a.escape-button').hide();
+ showElem(fileContent.find('a.unescape-button'));
+ hideElem(fileContent.find('a.escape-button'));
}
});
}
diff --git a/web_src/js/features/user-auth-webauthn.js b/web_src/js/features/user-auth-webauthn.js
index 9c9fffd99..f30017afc 100644
--- a/web_src/js/features/user-auth-webauthn.js
+++ b/web_src/js/features/user-auth-webauthn.js
@@ -1,5 +1,6 @@
import $ from 'jquery';
import {encode, decode} from 'uint8-to-base64';
+import {hideElem, showElem} from '../utils/dom.js';
const {appSubUrl, csrfToken} = window.config;
@@ -132,16 +133,18 @@ function webauthnRegistered(newCredential) {
}
function webAuthnError(errorType, message) {
- $('#webauthn-error [data-webauthn-error-msg]').hide();
+ hideElem($('#webauthn-error [data-webauthn-error-msg]'));
const $errorGeneral = $(`#webauthn-error [data-webauthn-error-msg=general]`);
if (errorType === 'general') {
- $errorGeneral.show().text(message || 'unknown error');
+ showElem($errorGeneral);
+ $errorGeneral.text(message || 'unknown error');
} else {
const $errorTyped = $(`#webauthn-error [data-webauthn-error-msg=${errorType}]`);
if ($errorTyped.length) {
- $errorTyped.show();
+ showElem($errorTyped);
} else {
- $errorGeneral.show().text(`unknown error type: ${errorType}`);
+ showElem($errorGeneral);
+ $errorGeneral.text(`unknown error type: ${errorType}`);
}
}
$('#webauthn-error').modal('show');
diff --git a/web_src/js/features/user-auth.js b/web_src/js/features/user-auth.js
index 55aace3bc..34e773fe7 100644
--- a/web_src/js/features/user-auth.js
+++ b/web_src/js/features/user-auth.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
export function initUserAuthOauth2() {
const $oauth2LoginNav = $('#oauth2-login-navigator');
@@ -8,14 +9,14 @@ export function initUserAuthOauth2() {
const oauthLoader = $('#oauth2-login-loader');
const oauthNav = $('#oauth2-login-navigator');
- oauthNav.hide();
+ hideElem(oauthNav);
oauthLoader.removeClass('disabled');
setTimeout(() => {
// recover previous content to let user try again
// usually redirection will be performed before this action
oauthLoader.addClass('disabled');
- oauthNav.show();
+ showElem(oauthNav);
}, 5000);
});
}
diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index 3ed29f39b..d49bf3927 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -1,4 +1,5 @@
import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
export function initUserSettings() {
if ($('.user.settings.profile').length > 0) {
@@ -6,11 +7,11 @@ export function initUserSettings() {
const $prompt = $('#name-change-prompt');
const $prompt_redirect = $('#name-change-redirect-prompt');
if ($(this).val().toString().toLowerCase() !== $(this).data('name').toString().toLowerCase()) {
- $prompt.show();
- $prompt_redirect.show();
+ showElem($prompt);
+ showElem($prompt_redirect);
} else {
- $prompt.hide();
- $prompt_redirect.hide();
+ hideElem($prompt);
+ hideElem($prompt_redirect);
}
});
}
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
new file mode 100644
index 000000000..8872a9e4a
--- /dev/null
+++ b/web_src/js/utils/dom.js
@@ -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);
+}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 771049ad3..fae29d0d6 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1812,11 +1812,6 @@ footer {
}
}
-// TODO: refactor to use ".gt-hidden" instead (a simple search&replace should do the trick)
-.hide {
- display: none;
-}
-
.center:not(.popup) {
text-align: center;
}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index b2c4cdcdf..f48933571 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -106,10 +106,6 @@
margin-right: 8.75px;
}
- .hide {
- display: none !important;
- }
-
.dependency {
padding: 0;
white-space: nowrap;
@@ -2592,18 +2588,10 @@
}
}
-#issue-filters.hide {
- display: none;
-}
-
#issue-actions {
margin-top: -1rem !important; // counteract padding from Semantic
}
-#issue-actions.hide {
- display: none;
-}
-
.ui.menu .item > img:not(.ui) {
width: auto;
}
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 2b09780fb..9cabe0162 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -181,5 +181,15 @@
.gt-js-small { justify-content: flex-start !important; }
}
-// gt-hidden must be placed after all other "display: xxx !important" classes to win the hidden chance
+/*
+gt-hidden must be placed after all other "display: xxx !important" classes to win the chance
+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"
+*/
.gt-hidden { display: none !important; }