feat: refactor input handling and copy button functionality

Refactored event listeners for XMR and fiat input fields, consolidating common logic and improving maintainability. Introduced explicit copy button IDs and enhanced their functionality by moving inline click handlers to addEventListener. These changes streamline form control interactions and ensure consistent behavior across different user inputs.

Additionally, removed redundant onchange handlers from the PHP file to simplify code and mitigate potential conflicts.
This commit is contained in:
Kumi 2024-08-08 16:34:03 +02:00
parent 5f0a0abff9
commit fae1336444
No known key found for this signature in database
GPG key ID: ECBCC9082395383F
2 changed files with 46 additions and 8 deletions

View file

@ -134,8 +134,8 @@ $attribution = isset($config['attribution']) ? $config['attribution'] : '';
<hr class="gold" />
<div class="input-group">
<button onclick="copyToClipBoardXMR()" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="xmrInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="1" onchange="xmrConvert(this.value)" onkeyup="this.value = this.value.replace(/[^\.^,\d]/g, ''); this.value = this.value.replace(/\,/, '.'); if(this.value.split('.').length > 2){this.value = this.value.slice(0, -1);} xmrConvert(this.value)">
<button id="copyXMRBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="xmrInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="1">
<input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
</div>
@ -144,9 +144,9 @@ $attribution = isset($config['attribution']) ? $config['attribution'] : '';
</div>
<div class="fiatDiv input-group">
<button onclick="copyToClipBoardFiat()" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="fiatInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $xmr_in_fiat; ?>" onchange="fiatConvert(this.value)" onkeyup="this.value = this.value.replace(/[^\.^,\d]/g, ''); this.value = this.value.replace(/\,/, '.'); if(this.value.split('.').length > 2){this.value = this.value.slice(0, -1);} fiatConvert(this.value)">
<select class="input-group-text cursor-pointer" id="selectBox" onchange="xmrConvert(this.value)" aria-label="<?php echo $l_fiatSelect; ?>">
<button id="copyFiatBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
<input class="form-control" id="fiatInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $xmr_in_fiat; ?>">
<select class="input-group-text cursor-pointer" id="selectBox" aria-label="<?php echo $l_fiatSelect; ?>">
<?php
if (isset($xmr_in)) {
echo '<option value="' . $xmr_in . '">' . (isset(${"l_" . strtolower($xmr_in)}) ? ${"l_" . strtolower($xmr_in)} : $xmr_in) . '</option>';

View file

@ -15,15 +15,53 @@ console.log(tooltipList);
let lastModifiedField = 'xmr';
document.addEventListener('DOMContentLoaded', function () {
// Add event listeners to track the last modified input field
document.getElementById("xmrInput").addEventListener('input', function () {
const copyXMRBtn = document.getElementById('copyXMRBtn');
const copyFiatBtn = document.getElementById('copyFiatBtn');
const xmrInput = document.getElementById('xmrInput');
const fiatInput = document.getElementById('fiatInput');
const selectBox = document.getElementById('selectBox');
// Add event listeners for the copy buttons
copyXMRBtn.addEventListener('click', copyToClipBoardXMR);
copyFiatBtn.addEventListener('click', copyToClipBoardFiat);
// Add event listeners for the XMR input field
xmrInput.addEventListener('change', () => xmrConvert(xmrInput.value));
xmrInput.addEventListener('keyup', () => {
xmrInput.value = xmrInput.value.replace(/[^\.^,\d]/g, '');
xmrInput.value = xmrInput.value.replace(/\,/, '.');
if (xmrInput.value.split('.').length > 2) {
xmrInput.value = xmrInput.value.slice(0, -1);
}
xmrConvert(xmrInput.value);
});
xmrInput.addEventListener('input', () => {
lastModifiedField = 'xmr';
});
document.getElementById("fiatInput").addEventListener('input', function () {
// Add event listeners for the fiat input field
fiatInput.addEventListener('change', () => fiatConvert(fiatInput.value));
fiatInput.addEventListener('keyup', () => {
fiatInput.value = fiatInput.value.replace(/[^\.^,\d]/g, '');
fiatInput.value = fiatInput.value.replace(/\,/, '.');
if (fiatInput.value.split('.').length > 2) {
fiatInput.value = fiatInput.value.slice(0, -1);
}
fiatConvert(fiatInput.value);
});
fiatInput.addEventListener('input', () => {
lastModifiedField = 'fiat';
});
// Add event listener for the select box to change the conversion
selectBox.addEventListener('change', () => {
if (lastModifiedField === 'xmr') {
xmrConvert(selectBox.value)
} else {
fiatConvert(selectBox.value)
}
});
// Fetch updated exchange rates every 5 seconds
setInterval(fetchUpdatedExchangeRates, 5000);
});