- commit
- f041f0d3ad04d364168f3fb6432bbce4705d8316
- parent
- 0d849fef93ddbcd5bab7514aaebbfddc8320084b
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-02-13 06:37
extend loader
Diffstat
| M | index.html | 8 | +++++--- |
| M | js/index.js | 9 | +++++---- |
| M | style.css | 5 | +++++ |
3 files changed, 15 insertions, 7 deletions
diff --git a/index.html b/index.html
@@ -6,9 +6,11 @@ 6 6 <link rel="stylesheet" href="style.css"> 7 7 </head> 8 8 <body>9 -1 <div>10 -1 <input type="file">11 -1 </div>-1 9 <form class="loader"> -1 10 <input name="file" type="file"> -1 11 <input name="width" type="number" value="80"> -1 12 <button>Load</button> -1 13 </form> 12 14 <canvas></canvas> 13 15 <form class="palette"></form> 14 16 <script src="js/index.js" type="module"></script>
diff --git a/js/index.js b/js/index.js
@@ -3,7 +3,7 @@ import { View } from './view.js';
3 3 import { loadImage } from './loader.js';
4 4 import * as utils from './utils.js';
5 5
6 -1 var input = document.querySelector('input');
-1 6 var loader = document.querySelector('.loader');
7 7 var palette = document.querySelector('.palette');
8 8 var canvas = document.querySelector('canvas');
9 9
@@ -58,9 +58,10 @@ var applySpeed = utils.throttle(function() {
58 58 }
59 59 }, 'animation');
60 60
61 -1 input.addEventListener('change', () => {
62 -1 // FIXME: configurable size
63 -1 loadImage(input, 80).then(image => {
-1 61 loader.addEventListener('submit', event => {
-1 62 event.preventDefault();
-1 63 var width = parseInt(loader.width.value, 10);
-1 64 loadImage(loader.file, width).then(image => {
64 65 setupPalette(image);
65 66 setPencil(0);
66 67
diff --git a/style.css b/style.css
@@ -15,6 +15,11 @@ canvas {
15 15 height: 100%;
16 16 }
17 17
-1 18 .loader {
-1 19 padding: 0.2em;
-1 20 text-align: center;
-1 21 }
-1 22
18 23 .palette {
19 24 overflow-x: auto;
20 25 white-space: nowrap;