readonly fields

This commit is contained in:
Zsolt Ero
2025-10-22 14:29:29 +02:00
parent 3cec51d0b1
commit ca337345f2
3 changed files with 32 additions and 4 deletions

View File

@@ -21,6 +21,13 @@
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"
/>
<input
type="text"
id="line1-expr"
readonly
class="w-full px-3 py-1 text-xs border border-gray-700 rounded bg-gray-950 text-gray-500 font-mono mt-1"
/>
</div>
<div class="flex-1">
@@ -32,6 +39,13 @@
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"
/>
<input
type="text"
id="line2-expr"
readonly
class="w-full px-3 py-1 text-xs border border-gray-700 rounded bg-gray-950 text-gray-500 font-mono mt-1"
/>
</div>
<div class="w-24">
@@ -89,4 +103,4 @@
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="mix.js"></script>
</body>
</html>
</html>

View File

@@ -13,6 +13,8 @@ const map = new maplibregl.Map({
const line1Input = document.getElementById('line1')
const line2Input = document.getElementById('line2')
const langInput = document.getElementById('lang')
const line1ExprInput = document.getElementById('line1-expr')
const line2ExprInput = document.getElementById('line2-expr')
map.on('load', () => {
const params = new URLSearchParams(window.location.search)
@@ -41,6 +43,7 @@ function initializeInputListeners() {
const handleInput = () => {
updateParamsFromInputs()
updateExpressionDisplays()
debouncedApplyConfig()
}
@@ -88,9 +91,10 @@ function applyConfiguration() {
style,
line1Config: line1 ?? '',
line2Config: line2 ?? '',
langCode: lang || 'en',
langCode: lang,
})
map.setStyle(style, { diff: true })
updateExpressionDisplays()
}
function syncInputsFromParams() {
@@ -113,6 +117,17 @@ function updateParamsFromInputs() {
window.history.replaceState({}, '', newUrl)
}
function updateExpressionDisplays() {
const { line1, line2, lang } = parseParams()
const langCode = lang
const line1Expr = buildFieldAccessor(line1 ?? '', langCode)
const line2Expr = buildFieldAccessor(line2 ?? '', langCode)
line1ExprInput.value = line1Expr ? JSON.stringify(line1Expr) : ''
line2ExprInput.value = line2Expr ? JSON.stringify(line2Expr) : ''
}
// ============================================
// 4. STYLE MODIFICATION
// ============================================
@@ -165,7 +180,7 @@ function parseParams() {
return {
line1: params.get('line1'),
line2: params.get('line2'),
lang: params.get('lang'),
lang: params.get('lang') || 'en',
}
}