From ee8f22c588cd16dd0ce22c113e50a8b0e9fc0ffc Mon Sep 17 00:00:00 2001 From: javl Date: Tue, 18 Aug 2026 10:23:02 +0200 Subject: [PATCH] Use template for image entry --- css/style.css | 40 +++++++++++++++++++++++++------------- index.html | 18 +++++++++++++++++ js/script.js | 54 +++++++++------------------------------------------ 3 files changed, 54 insertions(+), 58 deletions(-) diff --git a/css/style.css b/css/style.css index 5784869..c227e42 100644 --- a/css/style.css +++ b/css/style.css @@ -469,6 +469,7 @@ code { font-size: var(--font-size); line-height: 1.5em; margin: var(--space-1) 0; + font-style: italic; } #glyph-name-note { @@ -686,6 +687,8 @@ input[type="file"]::file-selector-button { /* ---- File info / size list ---- */ .file-input-entry { + border: 1px solid var(--border-subtle); + padding: var(--space-1); display: flex; align-items: center; gap: var(--space-2); @@ -700,17 +703,17 @@ input[type="file"]::file-selector-button { .file-info { color: var(--text-muted); font-size: 12px; - margin-left: var(--space-5); - max-width: 320px; - white-space: pre; } .file-name { - display: block; - margin-left: 0; - margin-bottom: var(--space-2); + flex: 1; + min-width: 0; + margin: 0; font-weight: 500; color: var(--on-surface-variant); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* Tighten gap between a row and the explanatory note row that follows */ @@ -724,19 +727,25 @@ input[type="file"]::file-selector-button { #image-size-settings li { display: flex; - align-items: flex-start; - gap: var(--space-3); + flex-direction: column; + gap: var(--space-2); margin: var(--space-2) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); } +.image-size-thumb-container { + display: flex; + align-items: center; + gap: var(--space-2); +} + .image-size-thumb { width: auto; height: auto; - max-width: 100px; - max-height: 100px; + max-width: 48px; + max-height: 48px; border: 1px solid var(--outline-variant); border-radius: var(--radius-md, 4px); background: var(--surface-variant, #fff); @@ -744,9 +753,14 @@ input[type="file"]::file-selector-button { vertical-align: middle; } -.image-size-details { - flex: 1; - min-width: 0; +.image-size-row { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.image-size-header { + justify-content: space-between; } /* ---- Preview canvases ---- */ diff --git a/index.html b/index.html index d0721c4..df8bb89 100644 --- a/index.html +++ b/index.html @@ -93,6 +93,24 @@
+
Only images file type are allowed
Select one or more images at step 1 first.
diff --git a/js/script.js b/js/script.js index 73b9fe8..fd176da 100644 --- a/js/script.js +++ b/js/script.js @@ -813,20 +813,16 @@ function handleImageSelection(evt) { const canvas = document.createElement('canvas'); - const imageEntry = document.createElement('li'); + const entryTemplate = document.getElementById('image-size-entry-template'); + const entryFragment = entryTemplate.content.cloneNode(true); + const imageEntry = entryFragment.querySelector('li'); imageEntry.setAttribute('data-img', file.name); - const thumb = document.createElement('img'); - thumb.className = 'image-size-thumb'; + const thumb = imageEntry.querySelector('.image-size-thumb'); thumb.src = img.src; thumb.alt = file.name; - const w = document.createElement('input'); - w.type = 'number'; - w.name = 'width'; - w.id = 'screenWidth'; - w.min = 1; - w.className = 'size-input'; + const w = imageEntry.querySelector('.js-width'); w.value = img.width; w.oninput = () => { const image = images.get(img); @@ -834,12 +830,7 @@ function handleImageSelection(evt) { placeImage(image); }; - const h = document.createElement('input'); - h.type = 'number'; - h.name = 'height'; - h.id = 'screenHeight'; - h.min = 1; - h.className = 'size-input'; + const h = imageEntry.querySelector('.js-height'); h.value = img.height; h.oninput = () => { const image = images.get(img); @@ -847,14 +838,7 @@ function handleImageSelection(evt) { placeImage(image); }; - const gil = document.createElement('span'); - gil.innerHTML = 'glyph name'; - gil.className = 'file-info'; - - const gi = document.createElement('input'); - gi.type = 'text'; - gi.name = 'glyph'; - gi.className = 'glyph-input'; + const gi = imageEntry.querySelector('.js-glyph'); const [fileName] = file.name.split('.'); gi.value = fileName; gi.onchange = () => { @@ -887,16 +871,8 @@ function handleImageSelection(evt) { checkImagesAvailable(); }; - const rb = document.createElement('button'); - rb.className = 'remove-button'; - rb.innerHTML = 'remove image'; - rb.onclick = removeButtonOnClick; - - const fn = document.createElement('span'); - fn.className = 'file-info file-name'; - fn.innerHTML = `${file.name} (file resolution: ${img.width} x ${img.height})`; - - fn.appendChild(rb); + imageEntry.querySelector('.js-file-name').textContent = `${file.name} (file resolution: ${img.width} x ${img.height})`; + imageEntry.querySelector('.js-remove').onclick = removeButtonOnClick; fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick; @@ -905,18 +881,6 @@ function handleImageSelection(evt) { fileInputColumnEntry.appendChild(fileInputColumnEntryRemoveButton); fileInputColumn.appendChild(fileInputColumnEntry); - const imageEntryDetails = document.createElement('div'); - imageEntryDetails.className = 'image-size-details'; - imageEntryDetails.appendChild(fn); - imageEntryDetails.appendChild(w); - imageEntryDetails.appendChild(document.createTextNode(' x ')); - imageEntryDetails.appendChild(h); - imageEntryDetails.appendChild(gil); - imageEntryDetails.appendChild(gi); - - imageEntry.appendChild(thumb); - imageEntry.appendChild(imageEntryDetails); - imageSizeSettings.appendChild(imageEntry); canvas.width = img.width;