kumi/moner.ooo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: refactor input handling and copy button functionality

Browse source 
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
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.php
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>';

44
src/js/main.js
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);
});