+
1. Select image
@@ -653,6 +659,8 @@
fileInput.addEventListener("click", function(){this.value = null;}, false);
fileInput.addEventListener("change", handleImageSelection, false);
+ var fileInputColumn = document.getElementById("file-input-column");
+
// Filetypes accepted by the file picker
var fileTypes = ["jpg", "jpeg", "png", "bmp", "gif", "svg"];
@@ -962,7 +970,16 @@
var img = new Image();
img.onload = function(){
+ const fileInputColumnEntry = document.createElement("div");
+ fileInputColumnEntry.className = "file-input-entry";
+
+ const fileInputColumnEntryLabel = document.createElement("span");
+ fileInputColumnEntryLabel.textContent = file.name;
+ const fileInputColumnEntryRemoveButton = document.createElement("button");
+ fileInputColumnEntryRemoveButton.className = "remove-button";
+ fileInputColumnEntryRemoveButton.innerHTML = "remove";
+
var canvas = document.createElement("canvas");
var imageEntry = document.createElement("li");
@@ -1009,11 +1026,13 @@
var rb = document.createElement("button");
rb.className = "remove-button";
rb.innerHTML = "remove";
- rb.onclick = function() {
+
+ const removeButtonOnClick = function() {
var image = images.get(img);
canvasContainer.removeChild(image.canvas);
images.remove(image);
imageSizeSettings.removeChild(imageEntry);
+ fileInputColumn.removeChild(fileInputColumnEntry);
if(imageSizeSettings.children.length == 1) {
allSameSizeButton.style.display = "none";
}
@@ -1021,6 +1040,13 @@
update();
};
+ rb.onclick = removeButtonOnClick;
+ fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;
+
+ fileInputColumnEntry.appendChild(fileInputColumnEntryLabel);
+ fileInputColumnEntry.appendChild(fileInputColumnEntryRemoveButton);
+ fileInputColumn.appendChild(fileInputColumnEntry);
+
imageEntry.appendChild(fn);
imageEntry.appendChild(w);
imageEntry.appendChild(document.createTextNode(" x "));