Skip to content

Commit 6a6644d

Browse files
AlecRustAlecRust
authored
Refactor "unlimited" inputs (hestiacp#3464)
To reduce duplication.
1 parent 4beb29a commit 6a6644d

14 files changed

Lines changed: 134 additions & 254 deletions

File tree

‎web/css/src/themes/dark.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,12 @@ strong {
553553
}
554554
}
555555

556+
.unlimited-toggle {
557+
& .fas {
558+
color: #d4d4d4;
559+
}
560+
}
561+
556562
.hint {
557563
color: #a2a2a2;
558564
}

‎web/css/src/themes/default.css‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1683,13 +1683,29 @@
16831683
}
16841684
}
16851685

1686-
.unlim-trigger {
1687-
cursor: pointer;
1686+
.unlimited-toggle {
16881687
position: absolute;
1689-
top: 13px;
1690-
right: 12px;
1688+
top: 0;
1689+
right: 1px;
16911690
z-index: 1;
1692-
font-size: 0.8rem;
1691+
border: 0;
1692+
padding: 0 13px;
1693+
opacity: 0.5;
1694+
height: 100%;
1695+
background-color: transparent;
1696+
1697+
&:hover {
1698+
opacity: 0.8;
1699+
}
1700+
1701+
&.is-active {
1702+
opacity: 1;
1703+
}
1704+
1705+
& .fas {
1706+
font-size: 0.8rem;
1707+
color: #4e4e4e;
1708+
}
16931709
}
16941710

16951711
.optional {

‎web/css/themes/dark.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/events.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,30 @@ const VE = {
260260
meter.value = strength;
261261
}
262262
},
263+
enableInputUnlimited: (input, toggleButton) => {
264+
toggleButton.classList.add('is-active');
265+
input.dataset.prevValue = input.value;
266+
input.value = Alpine.store('globals').UNLIM_TRANSLATED_VALUE;
267+
input.disabled = true;
268+
},
269+
disableInputUnlimited: (input, toggleButton) => {
270+
toggleButton.classList.remove('is-active');
271+
const prevValue = input.dataset.prevValue?.trim();
272+
if (prevValue) {
273+
input.value = prevValue;
274+
}
275+
if (Alpine.store('globals').isUnlimitedValue(input.value)) {
276+
input.value = '0';
277+
}
278+
input.disabled = false;
279+
},
280+
toggleInputUnlimited: (input, toggleButton) => {
281+
if (toggleButton.classList.contains('is-active')) {
282+
VE.helpers.disableInputUnlimited(input, toggleButton);
283+
} else {
284+
VE.helpers.enableInputUnlimited(input, toggleButton);
285+
}
286+
},
263287
warn: (msg) => {
264288
alert('WARNING: ' + msg);
265289
},

‎web/js/main.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,21 @@ document.addEventListener('alpine:init', () => {
136136
});
137137
}
138138

139+
// Unlimited input toggle
140+
document.querySelectorAll('.js-unlimited-toggle').forEach((toggleButton) => {
141+
const input = toggleButton.parentElement.querySelector('input');
142+
143+
if (Alpine.store('globals').isUnlimitedValue(input.value)) {
144+
VE.helpers.enableInputUnlimited(input, toggleButton);
145+
} else {
146+
VE.helpers.disableInputUnlimited(input, toggleButton);
147+
}
148+
149+
toggleButton.addEventListener('click', () => {
150+
VE.helpers.toggleInputUnlimited(input, toggleButton);
151+
});
152+
});
153+
139154
// Bulk edit forms
140155
Alpine.bind('BulkEdit', () => ({
141156
/** @param {SubmitEvent} evt */

‎web/js/pages/add_mail_acc.js‎

Lines changed: 0 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,3 @@
1-
App.Actions.MAIL_ACC.enable_unlimited = function (elm, source_elm) {
2-
$(elm).data('checked', true);
3-
$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
4-
$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
5-
$(elm).attr('disabled', true);
6-
$(source_elm).css('opacity', '1');
7-
};
8-
9-
App.Actions.MAIL_ACC.disable_unlimited = function (elm, source_elm) {
10-
$(elm).data('checked', false);
11-
if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
12-
var prev_value = $(elm).data('prev_value').trim();
13-
$(elm).val(prev_value);
14-
if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
15-
$(elm).val('0');
16-
}
17-
} else {
18-
if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
19-
$(elm).val('0');
20-
}
21-
}
22-
$(elm).attr('disabled', false);
23-
$(source_elm).css('opacity', '0.5');
24-
};
25-
26-
App.Actions.MAIL_ACC.toggle_unlimited_feature = function (evt) {
27-
var elm = $(evt.target);
28-
var ref = elm.prev('.form-control');
29-
if (!$(ref).data('checked')) {
30-
App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
31-
} else {
32-
App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
33-
}
34-
};
35-
36-
App.Listeners.MAIL_ACC.checkbox_unlimited_feature = function () {
37-
$('.unlim-trigger').on('click', App.Actions.MAIL_ACC.toggle_unlimited_feature);
38-
};
39-
40-
App.Listeners.MAIL_ACC.init = function () {
41-
$('.unlim-trigger').each(function (i, elm) {
42-
var ref = $(elm).prev('.form-control');
43-
if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
44-
App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
45-
} else {
46-
$(ref).data('prev_value', $(ref).val());
47-
App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
48-
}
49-
});
50-
};
51-
52-
//
53-
// Page entry point
54-
// Trigger listeners
55-
App.Listeners.MAIL_ACC.init();
56-
App.Listeners.MAIL_ACC.checkbox_unlimited_feature();
571
$('#v_blackhole').on('click', function () {
582
if ($('#v_blackhole').is(':checked')) {
593
$('#v_fwd').prop('disabled', true);

‎web/js/pages/add_package.js‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,3 @@
1-
App.Actions.PACKAGE.enable_unlimited = function (elm, source_elm) {
2-
$(elm).data('checked', true);
3-
$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
4-
$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
5-
$(elm).attr('disabled', true);
6-
$(source_elm).css('opacity', '1');
7-
};
8-
9-
App.Actions.PACKAGE.disable_unlimited = function (elm, source_elm) {
10-
$(elm).data('checked', false);
11-
if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
12-
var prev_value = $(elm).data('prev_value').trim();
13-
$(elm).val(prev_value);
14-
if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
15-
$(elm).val('0');
16-
}
17-
} else {
18-
if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
19-
$(elm).val('0');
20-
}
21-
}
22-
$(elm).attr('disabled', false);
23-
$(source_elm).css('opacity', '0.5');
24-
};
25-
26-
//
27-
App.Actions.PACKAGE.toggle_unlimited_feature = function (evt) {
28-
var elm = $(evt.target);
29-
var ref = elm.prev('.form-control');
30-
if (!$(ref).data('checked')) {
31-
App.Actions.PACKAGE.enable_unlimited(ref, elm);
32-
} else {
33-
App.Actions.PACKAGE.disable_unlimited(ref, elm);
34-
}
35-
};
36-
37-
App.Listeners.PACKAGE.checkbox_unlimited_feature = function () {
38-
$('.unlim-trigger').on('click', App.Actions.PACKAGE.toggle_unlimited_feature);
39-
};
40-
41-
App.Listeners.PACKAGE.init = function () {
42-
$('.unlim-trigger').each(function (i, elm) {
43-
var ref = $(elm).prev('.form-control');
44-
if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
45-
App.Actions.PACKAGE.enable_unlimited(ref, elm);
46-
} else {
47-
$(ref).data('prev_value', $(ref).val());
48-
App.Actions.PACKAGE.disable_unlimited(ref, elm);
49-
}
50-
});
51-
};
52-
53-
//
54-
// Page entry point
55-
// Trigger listeners
56-
App.Listeners.PACKAGE.init();
57-
App.Listeners.PACKAGE.checkbox_unlimited_feature();
581
$('form[name="v_add_package"]').on('submit', function () {
592
$('input:disabled').each(function (i, elm) {
603
$(elm).attr('disabled', false);

‎web/js/pages/edit_mail_acc.js‎

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,3 @@
1-
App.Actions.MAIL_ACC.enable_unlimited = function (elm, source_elm) {
2-
$(elm).data('checked', true);
3-
$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
4-
$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
5-
$(elm).attr('disabled', true);
6-
$(source_elm).css('opacity', '1');
7-
};
8-
9-
App.Actions.MAIL_ACC.disable_unlimited = function (elm, source_elm) {
10-
$(elm).data('checked', false);
11-
if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
12-
var prev_value = $(elm).data('prev_value').trim();
13-
$(elm).val(prev_value);
14-
if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
15-
$(elm).val('0');
16-
}
17-
} else {
18-
if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
19-
$(elm).val('0');
20-
}
21-
}
22-
$(elm).attr('disabled', false);
23-
$(source_elm).css('opacity', '0.5');
24-
};
25-
26-
//
27-
App.Actions.MAIL_ACC.toggle_unlimited_feature = function (evt) {
28-
var elm = $(evt.target);
29-
var ref = elm.prev('.form-control');
30-
if (!$(ref).data('checked')) {
31-
App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
32-
} else {
33-
App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
34-
}
35-
};
36-
37-
App.Listeners.MAIL_ACC.checkbox_unlimited_feature = function () {
38-
$('.unlim-trigger').on('click', App.Actions.MAIL_ACC.toggle_unlimited_feature);
39-
};
40-
41-
App.Listeners.MAIL_ACC.init = function () {
42-
$('.unlim-trigger').each(function (i, elm) {
43-
var ref = $(elm).prev('.form-control');
44-
if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
45-
App.Actions.MAIL_ACC.enable_unlimited(ref, elm);
46-
} else {
47-
$(ref).data('prev_value', $(ref).val());
48-
App.Actions.MAIL_ACC.disable_unlimited(ref, elm);
49-
}
50-
});
51-
};
52-
53-
App.Listeners.MAIL_ACC.init();
54-
App.Listeners.MAIL_ACC.checkbox_unlimited_feature();
55-
561
App.Listeners.MAIL_ACC.keypress_v_password = function () {
572
var ref = $('input[name="v_password"]');
583
ref.bind('keypress input', function (evt) {

‎web/js/pages/edit_package.js‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,3 @@
1-
App.Actions.PACKAGE.enable_unlimited = function (elm, source_elm) {
2-
$(elm).data('checked', true);
3-
$(elm).data('prev_value', $(elm).val()); // save prev value in order to restore if needed
4-
$(elm).val(Alpine.store('globals').UNLIM_TRANSLATED_VALUE);
5-
$(elm).attr('disabled', true);
6-
$(source_elm).css('opacity', '1');
7-
};
8-
9-
App.Actions.PACKAGE.disable_unlimited = function (elm, source_elm) {
10-
$(elm).data('checked', false);
11-
if ($(elm).data('prev_value') && $(elm).data('prev_value').trim() != '') {
12-
var prev_value = $(elm).data('prev_value').trim();
13-
$(elm).val(prev_value);
14-
if (Alpine.store('globals').isUnlimitedValue(prev_value)) {
15-
$(elm).val('0');
16-
}
17-
} else {
18-
if (Alpine.store('globals').isUnlimitedValue($(elm).val())) {
19-
$(elm).val('0');
20-
}
21-
}
22-
$(elm).attr('disabled', false);
23-
$(source_elm).css('opacity', '0.5');
24-
};
25-
26-
//
27-
App.Actions.PACKAGE.toggle_unlimited_feature = function (evt) {
28-
var elm = $(evt.target);
29-
var ref = elm.prev('.form-control');
30-
if (!$(ref).data('checked')) {
31-
App.Actions.PACKAGE.enable_unlimited(ref, elm);
32-
} else {
33-
App.Actions.PACKAGE.disable_unlimited(ref, elm);
34-
}
35-
};
36-
37-
App.Listeners.PACKAGE.checkbox_unlimited_feature = function () {
38-
$('.unlim-trigger').on('click', App.Actions.PACKAGE.toggle_unlimited_feature);
39-
};
40-
41-
App.Listeners.PACKAGE.init = function () {
42-
$('.unlim-trigger').each(function (i, elm) {
43-
var ref = $(elm).prev('.form-control');
44-
if (Alpine.store('globals').isUnlimitedValue($(ref).val())) {
45-
App.Actions.PACKAGE.enable_unlimited(ref, elm);
46-
} else {
47-
$(ref).data('prev_value', $(ref).val());
48-
App.Actions.PACKAGE.disable_unlimited(ref, elm);
49-
}
50-
});
51-
};
52-
53-
//
54-
// Page entry point
55-
// Trigger listeners
56-
App.Listeners.PACKAGE.init();
57-
App.Listeners.PACKAGE.checkbox_unlimited_feature();
581
App.Listeners.PACKAGE.submit = function () {
592
$('input:disabled').each(function (i, elm) {
603
$(elm).attr('disabled', false);

0 commit comments

Comments
 (0)