Michel2/image2cpp
1
0
Fork 0
mirror of https://github.com/javl/image2cpp.git synced 2026-09-11 09:03:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

move some JS to template instead

Browse Source
This commit is contained in:
javl
2026-08-18 10:37:40 +02:00
parent 63faf1b699
commit 95273b06c7
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7
View File
@@ -56,6 +56,13 @@
<div class="note upload-note">You can import multiple images at once.<br>All processing is done locally in your browser: your images are not uploaded or stored anywhere online.</div> <div class="note upload-note">You can import multiple images at once.<br>All processing is done locally in your browser: your images are not uploaded or stored anywhere online.</div>
<input type="file" id="file-input" name="file-input" multiple/><br /> <input type="file" id="file-input" name="file-input" multiple/><br />
<div id="file-input-column-items"></div> <div id="file-input-column-items"></div>
<template id="file-input-entry-template">
<div class="file-input-entry">
<img class="image-size-thumb" alt="" />
<span class="js-label"></span>
<button type="button" class="remove-button js-remove">remove image</button>
</div>
</template>
<div class="note" id="continue-note">Add more images or <a href="#step-2">continue to step 2</a></div> <div class="note" id="continue-note">Add more images or <a href="#step-2">continue to step 2</a></div>
</div> </div>
<div class="column-right"> <div class="column-right">
js/script.js
+6 -12
View File
@@ -796,20 +796,17 @@ function handleImageSelection(evt) {
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
const fileInputColumnEntry = document.createElement('div'); const fileInputEntryTemplate = document.getElementById('file-input-entry-template');
fileInputColumnEntry.className = 'file-input-entry'; const fileInputEntryFragment = fileInputEntryTemplate.content.cloneNode(true);
const fileInputColumnEntry = fileInputEntryFragment.querySelector('.file-input-entry');
const fileInputColumnEntryThumb = document.createElement('img'); const fileInputColumnEntryThumb = fileInputColumnEntry.querySelector('.image-size-thumb');
fileInputColumnEntryThumb.className = 'image-size-thumb';
fileInputColumnEntryThumb.src = img.src; fileInputColumnEntryThumb.src = img.src;
fileInputColumnEntryThumb.alt = file.name; fileInputColumnEntryThumb.alt = file.name;
const fileInputColumnEntryLabel = document.createElement('span'); fileInputColumnEntry.querySelector('.js-label').textContent = file.name;
fileInputColumnEntryLabel.textContent = file.name;
const fileInputColumnEntryRemoveButton = document.createElement('button'); const fileInputColumnEntryRemoveButton = fileInputColumnEntry.querySelector('.js-remove');
fileInputColumnEntryRemoveButton.className = 'remove-button';
fileInputColumnEntryRemoveButton.innerHTML = 'remove image';
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
@@ -876,9 +873,6 @@ function handleImageSelection(evt) {
fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick; fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;
fileInputColumnEntry.appendChild(fileInputColumnEntryThumb);
fileInputColumnEntry.appendChild(fileInputColumnEntryLabel);
fileInputColumnEntry.appendChild(fileInputColumnEntryRemoveButton);
fileInputColumn.appendChild(fileInputColumnEntry); fileInputColumn.appendChild(fileInputColumnEntry);
imageSizeSettings.appendChild(imageEntry); imageSizeSettings.appendChild(imageEntry);