work

website/public/debug/lang/mix.html

@@ -20,7 +20,6 @@
                         type="text"
                         id="line1"
                         class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono"
-                        placeholder="underscore,colon,name,latin"
                     />
                 </div>
 
@@ -32,7 +31,6 @@
                         type="text"
                         id="line2"
                         class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono"
-                        placeholder="nonlatin"
                     />
                 </div>
 
@@ -44,7 +42,6 @@
                         type="text"
                         id="lang"
                         class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono text-center"
-                        placeholder="en"
                         maxlength="5"
                     />
                 </div>
@@ -85,4 +82,4 @@
     <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
     <script src="mix.js"></script>
 </body>
-</html>
+</html>

website/public/debug/lang/mix.js

@@ -25,11 +25,10 @@ map.on('load', () => {
     url.searchParams.set('lang', 'en')
     window.history.replaceState({}, '', url)
   }
-
   syncInputsFromParams()
   applyConfiguration()
   initializeInputListeners()
-  initializeModal()
+  // initializeModal()
 })
 
 // ============================================
@@ -37,9 +36,16 @@ map.on('load', () => {
 // ============================================
 
 function initializeInputListeners() {
-  line1Input.addEventListener('input', updateParamsFromInputs)
+  const debouncedApplyConfig = debounce(applyConfiguration, 1000)
-  line2Input.addEventListener('input', updateParamsFromInputs)
+
-  langInput.addEventListener('input', updateParamsFromInputs)
+  const handleInput = () => {
+    updateParamsFromInputs()
+    debouncedApplyConfig()
+  }
+
+  line1Input.addEventListener('input', handleInput)
+  line2Input.addEventListener('input', handleInput)
+  langInput.addEventListener('input', handleInput)
 }
 
 function initializeModal() {
@@ -135,6 +141,17 @@ function modifyStyle({ style, line1Config, line2Config, langCode }) {
 // 5. UTILITY FUNCTIONS
 // ============================================
 
+function debounce(func, delay) {
+  let timeoutId
+
+  return function (...args) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      func.apply(this, args)
+    }, delay)
+  }
+}
+
 function parseParams() {
   const params = new URLSearchParams(window.location.search)
   return {