From fae13364444690880a53a5458f85d8d99c6d6b96 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 8 Aug 2024 16:34:03 +0200
Subject: [PATCH] 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.
---
 index.php      | 10 +++++-----
 src/js/main.js | 44 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/index.php b/index.php
index 0e2e79c..6642134 100644
--- a/index.php
+++ b/index.php
@@ -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>';
diff --git a/src/js/main.js b/src/js/main.js
index eee2701..ae44962 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -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);
 });