Skip to content

Commit 7cccc31

Browse files
AlecRustAlecRust
authored
Refactor unlimited input JS (hestiacp#3495)
- Refactor some input "hint" code
1 parent 932cf0a commit 7cccc31

File tree

13 files changed

+172
-179
lines changed

13 files changed

+172
-179
lines changed

‎.eslintrc.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ module.exports = {
3939
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
4040
},
4141
],
42+
'no-console': 'error',
4243
'import/no-unresolved': 'off',
4344
},
4445
};

‎build.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-env node */
2+
/* eslint-disable no-console */
23

34
// Build JS and CSS using esbuild and PostCSS
45
import { promises as fs } from 'node:fs';

‎web/js/dist/main.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/dist/main.min.js.map‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/pages/add_db.js‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,61 @@
1-
//
2-
//
31
// Updates database username dynamically, showing its prefix
4-
App.Actions.DB.update_db_username_hint = function (elm, hint) {
5-
if (hint.trim() == '') {
6-
$(elm).parent().find('.hint').text('');
2+
App.Actions.DB.update_db_username_hint = function (input) {
3+
const hintElement = input.parentElement.querySelector('.hint');
4+
5+
if (input.value.trim() === '') {
6+
hintElement.textContent = '';
77
}
8-
$(elm)
9-
.parent()
10-
.find('.hint')
11-
.text(Alpine.store('globals').DB_USER_PREFIX + hint);
8+
9+
hintElement.textContent = Alpine.store('globals').DB_USER_PREFIX + input.value;
1210
};
1311

14-
//
15-
//
1612
// Updates database name dynamically, showing its prefix
17-
App.Actions.DB.update_db_databasename_hint = function (elm, hint) {
18-
if (hint.trim() == '') {
19-
$(elm).parent().find('.hint').text('');
13+
App.Actions.DB.update_db_databasename_hint = function (input) {
14+
const hintElement = input.parentElement.querySelector('.hint');
15+
16+
if (input.value.trim() === '') {
17+
hintElement.textContent = '';
2018
}
21-
$(elm)
22-
.parent()
23-
.find('.hint')
24-
.text(Alpine.store('globals').DB_DBNAME_PREFIX + hint);
19+
20+
hintElement.textContent = Alpine.store('globals').DB_DBNAME_PREFIX + input.value;
2521
};
2622

27-
//
28-
// listener that triggers database user hint updating
29-
App.Listeners.DB.keypress_db_username = function () {
30-
var ref = $('input[name="v_dbuser"]');
31-
var current_val = ref.val();
32-
if (current_val.trim() != '') {
33-
App.Actions.DB.update_db_username_hint(ref, current_val);
23+
// Listener that triggers database user hint updating
24+
App.Listeners.DB.keypress_db_username = () => {
25+
const input = document.querySelector('input[name="v_dbuser"]');
26+
27+
if (input.value.trim() != '') {
28+
App.Actions.DB.update_db_username_hint(input);
3429
}
3530

36-
ref.bind('keypress input', function (evt) {
31+
const updateTimeout = (evt) => {
3732
clearTimeout(window.frp_usr_tmt);
38-
window.frp_usr_tmt = setTimeout(function () {
39-
var elm = $(evt.target);
40-
App.Actions.DB.update_db_username_hint(elm, $(elm).val());
33+
window.frp_usr_tmt = setTimeout(() => {
34+
App.Actions.DB.update_db_username_hint(evt.target);
4135
}, 100);
42-
});
36+
};
37+
38+
input.addEventListener('keypress', updateTimeout);
39+
input.addEventListener('input', updateTimeout);
4340
};
4441

45-
//
46-
// listener that triggers database name hint updating
47-
App.Listeners.DB.keypress_db_databasename = function () {
48-
var ref = $('input[name="v_database"]');
49-
var current_val = ref.val();
50-
if (current_val.trim() != '') {
51-
App.Actions.DB.update_db_databasename_hint(ref, current_val);
42+
// Listener that triggers database user hint updating
43+
App.Listeners.DB.keypress_db_databasename = () => {
44+
const input = document.querySelector('input[name="v_database"]');
45+
46+
if (input.value.trim() != '') {
47+
App.Actions.DB.update_db_databasename_hint(input);
5248
}
5349

54-
ref.bind('keypress input', function (evt) {
50+
const updateTimeout = (evt) => {
5551
clearTimeout(window.frp_dbn_tmt);
56-
window.frp_dbn_tmt = setTimeout(function () {
57-
var elm = $(evt.target);
58-
App.Actions.DB.update_db_databasename_hint(elm, $(elm).val());
52+
window.frp_dbn_tmt = setTimeout(() => {
53+
App.Actions.DB.update_db_databasename_hint(evt.target);
5954
}, 100);
60-
});
55+
};
56+
57+
input.addEventListener('keypress', updateTimeout);
58+
input.addEventListener('input', updateTimeout);
6159
};
6260

6361
//

‎web/js/pages/add_dns_rec.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
1-
//
2-
//
3-
// Updates database dns record dynamically, showing its full domain path
4-
App.Actions.DB.update_dns_record_hint = function (elm, hint) {
5-
const domain = $('input[name="v_domain"]').val();
6-
// clean hint
7-
if (hint.trim() == '') {
8-
$(elm).parent().find('.hint').text('');
1+
// Updates database DNS record dynamically, showing its full domain path
2+
App.Actions.DB.update_dns_record_hint = (input) => {
3+
const domainInput = document.querySelector('input[name="v_domain"]');
4+
const hintElement = input.parentElement.querySelector('.hint');
5+
6+
// Clean hint
7+
let hint = input.value.trim();
8+
9+
if (hint === '') {
10+
hintElement.textContent = '';
911
}
1012

11-
// set domain name without rec in case of @ entries
12-
if (hint == '@') {
13+
// Set domain name without rec in case of @ entries
14+
if (hint === '@') {
1315
hint = '';
1416
}
1517

16-
// dont show pregix if domain name = rec value
17-
if (hint == domain) {
18+
// Don't show prefix if domain name equals rec value
19+
if (hint === domainInput.value) {
1820
hint = '';
1921
}
2022

21-
// add dot at the end if needed
22-
if (hint != '' && hint.slice(-1) != '.') {
23+
// Add dot at the end if needed
24+
if (hint !== '' && hint.slice(-1) !== '.') {
2325
hint += '.';
2426
}
2527

26-
$(elm)
27-
.parent()
28-
.find('.hint')
29-
.text(hint + domain);
28+
hintElement.textContent = hint + domainInput.value;
3029
};
3130

32-
//
33-
// listener that triggers dns record name hint updating
34-
App.Listeners.DB.keypress_dns_rec_entry = function () {
35-
var ref = $('input[name="v_rec"]');
36-
var current_rec = ref.val();
37-
if (current_rec.trim() != '') {
38-
App.Actions.DB.update_dns_record_hint(ref, current_rec);
31+
// Listener that triggers dns record name hint updating
32+
App.Listeners.DB.keypress_dns_rec_entry = () => {
33+
const input = document.querySelector('input[name="v_rec"]');
34+
35+
if (input.value.trim() != '') {
36+
App.Actions.DB.update_dns_record_hint(input);
3937
}
4038

41-
ref.bind('keypress input', function (evt) {
39+
const updateTimeout = (evt) => {
4240
clearTimeout(window.frp_usr_tmt);
43-
window.frp_usr_tmt = setTimeout(function () {
44-
var elm = $(evt.target);
45-
App.Actions.DB.update_dns_record_hint(elm, $(elm).val());
41+
window.frp_usr_tmt = setTimeout(() => {
42+
App.Actions.DB.update_dns_record_hint(evt.target);
4643
}, 100);
47-
});
44+
};
45+
46+
input.addEventListener('keypress', updateTimeout);
47+
input.addEventListener('input', updateTimeout);
4848
};
4949

5050
//

‎web/js/pages/add_package.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎web/js/pages/edit_db.js‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,66 @@
1-
//
2-
//
31
// Updates database username dynamically, showing its prefix
4-
App.Actions.DB.update_db_username_hint = function (elm, hint) {
5-
if (hint.trim() == '') {
6-
$(elm).parent().find('.hint').text('');
2+
App.Actions.DB.update_db_username_hint = function (input) {
3+
const hintElement = input.parentElement.querySelector('.hint');
4+
5+
if (input.value.trim() === '') {
6+
hintElement.textContent = '';
77
}
8-
$(elm)
9-
.parent()
10-
.find('.hint')
11-
.text(Alpine.store('globals').DB_USER_PREFIX + hint);
8+
9+
hintElement.textContent = Alpine.store('globals').DB_USER_PREFIX + input.value;
1210
};
1311

14-
//
15-
//
1612
// Updates database name dynamically, showing its prefix
17-
App.Actions.DB.update_db_databasename_hint = function (elm, hint) {
18-
if (hint.trim() == '') {
19-
$(elm).parent().find('.hint').text('');
13+
App.Actions.DB.update_db_databasename_hint = function (input) {
14+
const hintElement = input.parentElement.querySelector('.hint');
15+
16+
if (input.value.trim() === '') {
17+
hintElement.textContent = '';
2018
}
21-
$(elm)
22-
.parent()
23-
.find('.hint')
24-
.text(Alpine.store('globals').DB_DBNAME_PREFIX + hint);
19+
20+
hintElement.textContent = Alpine.store('globals').DB_DBNAME_PREFIX + input.value;
2521
};
2622

27-
//
28-
// listener that triggers database user hint updating
29-
App.Listeners.DB.keypress_db_username = function () {
30-
var ref = $('input[name="v_dbuser"]');
31-
var current_val = ref.val();
32-
if (current_val.trim() != '') {
33-
App.Actions.DB.update_db_username_hint(ref, current_val);
23+
// Listener that triggers database user hint updating
24+
App.Listeners.DB.keypress_db_username = () => {
25+
const input = document.querySelector('input[name="v_dbuser"]');
26+
27+
if (input.value.trim() != '') {
28+
App.Actions.DB.update_db_username_hint(input);
3429
}
3530

36-
ref.bind('keypress input', function (evt) {
31+
const updateTimeout = (evt) => {
3732
clearTimeout(window.frp_usr_tmt);
38-
window.frp_usr_tmt = setTimeout(function () {
39-
var elm = $(evt.target);
40-
App.Actions.DB.update_db_username_hint(elm, $(elm).val());
33+
window.frp_usr_tmt = setTimeout(() => {
34+
App.Actions.DB.update_db_username_hint(evt.target);
4135
}, 100);
42-
});
36+
};
37+
38+
input.addEventListener('keypress', updateTimeout);
39+
input.addEventListener('input', updateTimeout);
4340
};
4441

45-
//
46-
// listener that triggers database name hint updating
47-
App.Listeners.DB.keypress_db_databasename = function () {
48-
var ref = $('input[name="v_database"]');
49-
var current_val = ref.val();
50-
if (current_val.indexOf(Alpine.store('globals').DB_DBNAME_PREFIX) == 0) {
51-
current_val = current_val.slice(
52-
Alpine.store('globals').DB_DBNAME_PREFIX.length,
53-
current_val.length
54-
);
55-
ref.val(current_val);
42+
// Listener that triggers database user hint updating
43+
App.Listeners.DB.keypress_db_databasename = () => {
44+
const input = document.querySelector('input[name="v_database"]');
45+
const prefixIndex = input.value.indexOf(Alpine.store('globals').DB_DBNAME_PREFIX);
46+
47+
if (prefixIndex === 0) {
48+
input.value = input.value.slice(Alpine.store('globals').DB_DBNAME_PREFIX.length);
5649
}
57-
if (current_val.trim() != '') {
58-
App.Actions.DB.update_db_username_hint(ref, current_val);
50+
51+
if (input.value.trim() != '') {
52+
App.Actions.DB.update_db_databasename_hint(input);
5953
}
6054

61-
ref.bind('keypress input', function (evt) {
55+
const updateTimeout = (evt) => {
6256
clearTimeout(window.frp_dbn_tmt);
63-
window.frp_dbn_tmt = setTimeout(function () {
64-
var elm = $(evt.target);
65-
App.Actions.DB.update_db_databasename_hint(elm, $(elm).val());
57+
window.frp_dbn_tmt = setTimeout(() => {
58+
App.Actions.DB.update_db_databasename_hint(evt.target);
6659
}, 100);
67-
});
60+
};
61+
62+
input.addEventListener('keypress', updateTimeout);
63+
input.addEventListener('input', updateTimeout);
6864
};
6965

7066
//

0 commit comments

Comments
 (0)