Changeset 3344781

Timestamp:

08/14/2025 04:20:54 PM (6 months ago)

Author:

newcodebyte

Message:

last touch to input field

Location:

chatbot-ai-free-models

Files:

• tags/1.6.2/js/chatbot-admin.js (modified) (3 diffs)
• trunk/js/chatbot-admin.js (modified) (3 diffs)

chatbot-ai-free-models/tags/1.6.2/js/chatbot-admin.js

@@ -88 +88 @@
         });
 
-// --- GESTIONE CAMPO API KEY (MOSTRA/NASCONDI E LARGHEZZA AUTOMATICA) ---
-
-// Seleziona gli elementi una sola volta
+// --- GESTIONE CAMPO API KEY (Versione Definitiva) ---
+
 const apiKeyField = $('#chatbot_api_key_field');
 
-// Controlla se il campo esiste prima di procedere
 if (apiKeyField.length > 0) {
     
-    // Crea l'elemento 'span' per misurare il testo
-    $('body').append('<span id="api_key_ruler" style="position:absolute; top:-9999px; left:-9999px; white-space:nowrap; font: inherit;"></span>');
+    // Crea un unico "righello" invisibile per misurare il testo
+    $('body').append('<span id="api_key_ruler" style="position:absolute; top:-9999px; left:-9999px; white-space:nowrap;"></span>');
     const apiKeyRuler = $('#api_key_ruler');
     const apiKeyContainer = apiKeyField.closest('.newcodebyte-password-field');
 
     const adjustApiKeyFieldWidth = function() {
-        // Copia gli stili di font dall'input allo span di misurazione
+        // Copia gli stili di font esatti dall'input al nostro "righello"
         apiKeyRuler.css({
             'font-size': apiKeyField.css('font-size'),
@@ -110 +108 @@
         });
 
-        let textToMeasure = apiKeyField.val();
+        // Misura SEMPRE la larghezza del testo reale, ignorando i pallini
+        apiKeyRuler.text(apiKeyField.val());
         
-        // Simula la larghezza dei pallini se il campo è di tipo password
-        if (apiKeyField.attr('type') === 'password') {
-            textToMeasure = '•'.repeat(textToMeasure.length);
-        }
+        // Calcola la larghezza necessaria per il testo visibile + spazio per l'icona
+        const requiredWidth = apiKeyRuler.outerWidth() + 5;
         
-        apiKeyRuler.text(textToMeasure);
-        
-        // Calcola la nuova larghezza: larghezza del testo + spazio per l'icona
-        const newWidth = apiKeyRuler.outerWidth() + 40; 
-        
-        // Applica la nuova larghezza al contenitore, con un minimo per non essere troppo stretto
-        apiKeyContainer.width(Math.max(250, newWidth));
+        // Applica la larghezza calcolata, con un minimo di 250px
+        apiKeyContainer.width(Math.max(250, requiredWidth));
     };
 
-    // Esegui la funzione al caricamento della pagina, quando si scrive e quando si clicca l'occhio
+    // Aggiusta la larghezza al caricamento e ogni volta che l'utente scrive
     adjustApiKeyFieldWidth();
     apiKeyField.on('input', adjustApiKeyFieldWidth);
 
+    // Gestisce il click sull'occhio. NON deve più ricalcolare la larghezza.
     $('.toggle-api-key').on('click', function() {
         const fieldType = apiKeyField.attr('type');
@@ -140 +133 @@
             $(this).removeClass('dashicons-hidden').addClass('dashicons-visibility');
         }
-        
-        adjustApiKeyFieldWidth(); 
     });
 }       

chatbot-ai-free-models/trunk/js/chatbot-admin.js

@@ -88 +88 @@
         });
 
-// --- GESTIONE CAMPO API KEY (MOSTRA/NASCONDI E LARGHEZZA AUTOMATICA) ---
-
-// Seleziona gli elementi una sola volta
+// --- GESTIONE CAMPO API KEY (Versione Definitiva) ---
+
 const apiKeyField = $('#chatbot_api_key_field');
 
-// Controlla se il campo esiste prima di procedere
 if (apiKeyField.length > 0) {
     
-    // Crea l'elemento 'span' per misurare il testo
-    $('body').append('<span id="api_key_ruler" style="position:absolute; top:-9999px; left:-9999px; white-space:nowrap; font: inherit;"></span>');
+    // Crea un unico "righello" invisibile per misurare il testo
+    $('body').append('<span id="api_key_ruler" style="position:absolute; top:-9999px; left:-9999px; white-space:nowrap;"></span>');
     const apiKeyRuler = $('#api_key_ruler');
     const apiKeyContainer = apiKeyField.closest('.newcodebyte-password-field');
 
     const adjustApiKeyFieldWidth = function() {
-        // Copia gli stili di font dall'input allo span di misurazione
+        // Copia gli stili di font esatti dall'input al nostro "righello"
         apiKeyRuler.css({
             'font-size': apiKeyField.css('font-size'),
@@ -110 +108 @@
         });
 
-        let textToMeasure = apiKeyField.val();
+        // Misura SEMPRE la larghezza del testo reale, ignorando i pallini
+        apiKeyRuler.text(apiKeyField.val());
         
-        // Simula la larghezza dei pallini se il campo è di tipo password
-        if (apiKeyField.attr('type') === 'password') {
-            textToMeasure = '•'.repeat(textToMeasure.length);
-        }
+        // Calcola la larghezza necessaria per il testo visibile + spazio per l'icona
+        const requiredWidth = apiKeyRuler.outerWidth() + 5;
         
-        apiKeyRuler.text(textToMeasure);
-        
-        // Calcola la nuova larghezza: larghezza del testo + spazio per l'icona
-        const newWidth = apiKeyRuler.outerWidth() + 40; 
-        
-        // Applica la nuova larghezza al contenitore, con un minimo per non essere troppo stretto
-        apiKeyContainer.width(Math.max(250, newWidth));
+        // Applica la larghezza calcolata, con un minimo di 250px
+        apiKeyContainer.width(Math.max(250, requiredWidth));
     };
 
-    // Esegui la funzione al caricamento della pagina, quando si scrive e quando si clicca l'occhio
+    // Aggiusta la larghezza al caricamento e ogni volta che l'utente scrive
     adjustApiKeyFieldWidth();
     apiKeyField.on('input', adjustApiKeyFieldWidth);
 
+    // Gestisce il click sull'occhio. NON deve più ricalcolare la larghezza.
     $('.toggle-api-key').on('click', function() {
         const fieldType = apiKeyField.attr('type');
@@ -140 +133 @@
             $(this).removeClass('dashicons-hidden').addClass('dashicons-visibility');
         }
-        
-        adjustApiKeyFieldWidth(); 
     });
 }