Skip to content

Commit 3e7e4f1

Browse files
HHMagnusHHMagnus
committed
hide and show action section
1 parent dc85daf commit 3e7e4f1

2 files changed

Lines changed: 90 additions & 62 deletions

File tree

‎FEATURES.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@ Features:
44
- As a User I want to be able to control any parameters that effect the quality of the output
55

66
TODO:
7-
- ensure errors are properly shown and hidden
8-
- BUG: Paste does not remove file
7+
- BUG: Not possible to reset file
98
- Custom domain

‎index.html‎

Lines changed: 89 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,12 @@
114114
}
115115
}
116116

117+
#actionSection {
118+
display: flex;
119+
flex-direction: column;
120+
align-items: center;
121+
}
122+
117123
</style>
118124
</head>
119125
<body>
@@ -137,70 +143,72 @@ <h1>Offline Image Converter</h1>
137143
</div>
138144
</div>
139145

140-
<div id="outputSection">
141-
<label for="outputType">Output format:</label>
142-
<select id="outputType" onchange="selectChanged(event)">
143-
144-
<optgroup label="Most used:">
145-
<option value="image/jpeg">JPEG</option>
146-
<option value="image/png">PNG</option>
147-
</optgroup>
148-
149-
<optgroup label="More:">
150-
<option value="image/avif">AVIF</option>
151-
<option value="image/bmp">BMP</option>
152-
<option value="image/x-exr">OpenEXR</option>
153-
<option value="image/ff">Farbfeld</option>
154-
<option value="image/gif">GIF</option>
155-
<option value="image/vnd.radiance">HDR</option>
156-
<option value="image/x-icon">ICO</option>
157-
<option value="image/x-portable-bitmap">PNM</option>
158-
<option value="image/qoi">QOI</option>
159-
<option value="image/x-tga">TGA</option>
160-
<option value="image/tiff">TIFF</option>
161-
<option value="image/webp">WebP</option>
162-
</optgroup>
163-
</select>
164-
</div>
165-
166-
<details id="advancedInput">
167-
<summary>
168-
Advanced options (click to expand)
169-
</summary>
170-
<div id="advancedInput-image/png" style="display: none;">
171-
<label for="quality">Quality (0 worst, 100 best):</label>
172-
<input type="number" id="quality" name="quality" min="0" max="100" value="100" />
146+
<div id="actionSection" style="display: none;">
147+
<div id="outputSection">
148+
<label for="outputType">Output format:</label>
149+
<select id="outputType" onchange="selectChanged(event)">
150+
151+
<optgroup label="Most used:">
152+
<option value="image/jpeg">JPEG</option>
153+
<option value="image/png">PNG</option>
154+
</optgroup>
155+
156+
<optgroup label="More:">
157+
<option value="image/avif">AVIF</option>
158+
<option value="image/bmp">BMP</option>
159+
<option value="image/x-exr">OpenEXR</option>
160+
<option value="image/ff">Farbfeld</option>
161+
<option value="image/gif">GIF</option>
162+
<option value="image/vnd.radiance">HDR</option>
163+
<option value="image/x-icon">ICO</option>
164+
<option value="image/x-portable-bitmap">PNM</option>
165+
<option value="image/qoi">QOI</option>
166+
<option value="image/x-tga">TGA</option>
167+
<option value="image/tiff">TIFF</option>
168+
<option value="image/webp">WebP</option>
169+
</optgroup>
170+
</select>
173171
</div>
174172

175-
<div id="advancedInput-image/jpeg">
176-
<div>
177-
<label for="compression">Compression method:</label>
178-
<select id="compression" name="compression">
179-
<option value="fast">Fast</option>
180-
<option value="best">Best</option>
181-
<option value="default">Default</option>
182-
</select>
173+
<details id="advancedInput">
174+
<summary>
175+
Advanced options (click to expand)
176+
</summary>
177+
<div id="advancedInput-image/png" style="display: none;">
178+
<label for="quality">Quality (0 worst, 100 best):</label>
179+
<input type="number" id="quality" name="quality" min="0" max="100" value="100" />
183180
</div>
184181

185-
<div>
186-
<label for="filter">Filter type:</label>
187-
<select id="filter" name="filter">
188-
<option value="adaptive">Adaptive</option>
189-
<option value="no_filter">No filter</option>
190-
<option value="sub">Sub</option>
191-
<option value="up">Up</option>
192-
<option value="avg">Avg</option>
193-
<option value="paeth">Paeth</option>
194-
</select>
182+
<div id="advancedInput-image/jpeg">
183+
<div>
184+
<label for="compression">Compression method:</label>
185+
<select id="compression" name="compression">
186+
<option value="fast">Fast</option>
187+
<option value="best">Best</option>
188+
<option value="default">Default</option>
189+
</select>
190+
</div>
191+
192+
<div>
193+
<label for="filter">Filter type:</label>
194+
<select id="filter" name="filter">
195+
<option value="adaptive">Adaptive</option>
196+
<option value="no_filter">No filter</option>
197+
<option value="sub">Sub</option>
198+
<option value="up">Up</option>
199+
<option value="avg">Avg</option>
200+
<option value="paeth">Paeth</option>
201+
</select>
202+
</div>
195203
</div>
196-
</div>
197-
</details>
204+
</details>
198205

199-
<button id="convertBtn" onclick="convert()">Convert</button>
200-
201-
<div id="loader" style="display: none;">
202-
<span class="loader"></span>
203-
<p id="progress">Starting...</p>
206+
<button id="convertBtn" onclick="convert()">Convert</button>
207+
208+
<div id="loader" style="display: none;">
209+
<span class="loader"></span>
210+
<p id="progress">Starting...</p>
211+
</div>
204212
</div>
205213

206214
<p id="error-message" style="display: none;">
@@ -229,6 +237,14 @@ <h1>Offline Image Converter</h1>
229237
<script type="module">
230238
const worker = new Worker("./worker.js", { type: "module" });
231239

240+
const actionSection = document.getElementById("actionSection");
241+
function hideActions() {
242+
actionSection.style.display = 'none';
243+
}
244+
function showActions() {
245+
actionSection.style.display = 'flex';
246+
}
247+
232248
function downloadImage(imageData, fileName, outputType) {
233249
const blob = new Blob([imageData], { type: outputType });
234250
const url = URL.createObjectURL(blob);
@@ -268,6 +284,7 @@ <h1>Offline Image Converter</h1>
268284
}
269285

270286
if (type === "done") {
287+
hideError();
271288
downloadImage(imageData, fileName, outputType);
272289
} else if (type === "error") {
273290
showError(message);
@@ -368,6 +385,8 @@ <h1>Offline Image Converter</h1>
368385
pasted = false;
369386
filePasteSection.style.display = 'none';
370387
fileInput.style.display = 'block';
388+
hideActions();
389+
hideError();
371390
}
372391
window.resetPaste = resetPaste;
373392

@@ -382,7 +401,11 @@ <h1>Offline Image Converter</h1>
382401
pasted = true;
383402

384403
fileInput.style.display = 'none';
404+
fileInput.value = null;
385405
filePasteSection.style.display = 'flex';
406+
fileInputChanged(file.type);
407+
showActions();
408+
hideError();
386409
}
387410
}
388411
});
@@ -404,12 +427,17 @@ <h1>Offline Image Converter</h1>
404427
}
405428

406429
advancedInput.style.display = constainsAdvancedOptions ? 'block' : 'none';
430+
hideError();
407431
}
408432
window.selectChanged = selectChanged;
409433

410-
function fileInputChanged(event) {
434+
function fileInputChangedEvent(event) {
411435
const fileType = event.target.files[0]?.type;
436+
fileInputChanged(fileType);
437+
}
438+
window.fileInputChanged = fileInputChangedEvent;
412439

440+
function fileInputChanged(fileType) {
413441
const outputType = outputTypeElement.value;
414442
if (fileType === "image/png" && outputType === "image/png") {
415443
outputTypeElement.value = "image/jpeg";
@@ -418,8 +446,9 @@ <h1>Offline Image Converter</h1>
418446
outputTypeElement.value = "image/png";
419447
selectChanged({ target: outputTypeElement });
420448
}
449+
showActions();
450+
hideError();
421451
}
422-
window.fileInputChanged = fileInputChanged;
423452

424453
</script>
425454
</body>

0 commit comments

Comments
 (0)