Add explanatory text

nmarsceau · May 17, 2024 · aca1d60 · aca1d60
1 parent e53971b
commit aca1d60
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 22 deletions.
diff --git a/_site/assets/css/style.css b/_site/assets/css/style.css
@@ -13,13 +13,49 @@ body {
 	padding: 0;
 }
 
+.visuallyHidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+.hidden {
+	display: none;
+}
+
 #canvas {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 
+#instructions {
+	position: absolute;
+	left: 50%;
+	top: 45%;
+	transform: translate(-50%, -50%);
+
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+	line-height: 1.7;
+	color: #777;
+
+	.title {
+		font-size: 1.3em;
+		margin-block-end: 0;
+	}
+
+	.options {
+		font-size: 1.1em;
+		padding-left: 1em;
+		margin-block-start: 0;
+	}
+}
+
 .toolbar {
 	position: absolute;
 	bottom: 0;
@@ -32,16 +68,6 @@ body {
 	border-top-left-radius: 30px;
 }
 
-.visuallyHidden {
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	height: 1px;
-	overflow: hidden;
-	position: absolute;
-	white-space: nowrap;
-	width: 1px;
-}
-
 .button {
 	color: var(--brown);
 	background: transparent;

diff --git a/_site/assets/js/app.js b/_site/assets/js/app.js
@@ -2,6 +2,7 @@ export class App {
 	THICKNESS = 2
 	COLOR = "000000"
 	dom = null
+	instructions = null
 	canvas = null
 	context = null
 	img = new Image()
@@ -23,6 +24,11 @@ export class App {
 		}
 		this.context = this.canvas.getContext('2d')
 
+		// Instructions
+		if (selectors.instructions !== undefined) {
+			this.instructions = dom.querySelector(selectors.instructions)
+		}
+
 		// File Input
 		if (selectors.fileInput !== undefined) {
 			const fileInput = dom.querySelector(selectors.fileInput)
@@ -81,6 +87,12 @@ export class App {
 
 	drawImage() {
 		this.clearCanvas()
+
+		this.canvas.classList.remove('hidden')
+		if (this.instructions) {
+			this.instructions.classList.add('hidden')
+		}
+
 		this.canvas.width = this.img.naturalWidth + 2 * this.THICKNESS
 		this.canvas.height = this.img.naturalHeight + 2 * this.THICKNESS
 		this.context.drawImage(this.img, this.THICKNESS, this.THICKNESS)
@@ -95,6 +107,11 @@ export class App {
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
 		this.canvas.width = 0
 		this.canvas.height = 0
+
+		this.canvas.classList.add('hidden')
+		if (this.instructions) {
+			this.instructions.classList.remove('hidden')
+		}
 	}
 
 	copyImageToClipboard() {

diff --git a/_site/index.html b/_site/index.html
@@ -1,5 +1,6 @@
-<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Frame-It</title><link href="./assets/css/style.css" rel="stylesheet"></head><body draggable="true"><div class="toolbar"><button type="button" id="upload" class="icon button"><span class="visuallyHidden">Select a file</span></button> <button type="button" id="copy" class="icon button"><span class="visuallyHidden">Copy</span></button> <button type="button" id="download" class="icon button"><span class="visuallyHidden">Download</span></button> <button type="button" id="clear" class="icon button"><span class="visuallyHidden">Clear</span></button></div><canvas id="canvas" width="0" height="0"></canvas><input type="file" id="file" accept="image/*, image/avif" class="visuallyHidden" tabindex="-1"><script type="module">import { App } from "./assets/js/app.js"
+<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Frame-It</title><link href="./assets/css/style.css" rel="stylesheet"></head><body draggable="true"><div class="toolbar"><button type="button" id="upload" class="icon button"><span class="visuallyHidden">Select a file</span></button> <button type="button" id="copy" class="icon button"><span class="visuallyHidden">Copy</span></button> <button type="button" id="download" class="icon button"><span class="visuallyHidden">Download</span></button> <button type="button" id="clear" class="icon button"><span class="visuallyHidden">Clear</span></button></div><div id="instructions"><p class="title">Select an image:</p><p class="options">Paste from the clipboard<br>Use the file picker below</p></div><canvas id="canvas" class="hidden"></canvas><input type="file" id="file" accept="image/*, image/avif" class="visuallyHidden" tabindex="-1"><script type="module">import { App } from "./assets/js/app.js"
 		new App().connectToDOM(document, {
+			instructions: "#instructions",
 			canvas: "#canvas",
 			fileInput: "#file",
 			clear: "#clear",

diff --git a/src/_includes/assets/css/style.css b/src/_includes/assets/css/style.css
@@ -13,13 +13,49 @@ body {
 	padding: 0;
 }
 
+.visuallyHidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+.hidden {
+	display: none;
+}
+
 #canvas {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 
+#instructions {
+	position: absolute;
+	left: 50%;
+	top: 45%;
+	transform: translate(-50%, -50%);
+
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+	line-height: 1.7;
+	color: #777;
+
+	.title {
+		font-size: 1.3em;
+		margin-block-end: 0;
+	}
+
+	.options {
+		font-size: 1.1em;
+		padding-left: 1em;
+		margin-block-start: 0;
+	}
+}
+
 .toolbar {
 	position: absolute;
 	bottom: 0;
@@ -32,16 +68,6 @@ body {
 	border-top-left-radius: 30px;
 }
 
-.visuallyHidden {
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	height: 1px;
-	overflow: hidden;
-	position: absolute;
-	white-space: nowrap;
-	width: 1px;
-}
-
 .button {
 	color: var(--brown);
 	background: transparent;

diff --git a/src/_includes/assets/js/app.js b/src/_includes/assets/js/app.js
@@ -2,6 +2,7 @@ export class App {
 	THICKNESS = 2
 	COLOR = "000000"
 	dom = null
+	instructions = null
 	canvas = null
 	context = null
 	img = new Image()
@@ -23,6 +24,11 @@ export class App {
 		}
 		this.context = this.canvas.getContext('2d')
 
+		// Instructions
+		if (selectors.instructions !== undefined) {
+			this.instructions = dom.querySelector(selectors.instructions)
+		}
+
 		// File Input
 		if (selectors.fileInput !== undefined) {
 			const fileInput = dom.querySelector(selectors.fileInput)
@@ -81,6 +87,12 @@ export class App {
 
 	drawImage() {
 		this.clearCanvas()
+
+		this.canvas.classList.remove('hidden')
+		if (this.instructions) {
+			this.instructions.classList.add('hidden')
+		}
+
 		this.canvas.width = this.img.naturalWidth + 2 * this.THICKNESS
 		this.canvas.height = this.img.naturalHeight + 2 * this.THICKNESS
 		this.context.drawImage(this.img, this.THICKNESS, this.THICKNESS)
@@ -95,6 +107,11 @@ export class App {
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
 		this.canvas.width = 0
 		this.canvas.height = 0
+
+		this.canvas.classList.add('hidden')
+		if (this.instructions) {
+			this.instructions.classList.remove('hidden')
+		}
 	}
 
 	copyImageToClipboard() {

diff --git a/src/index.html b/src/index.html
@@ -21,11 +21,19 @@
             <span class="visuallyHidden">Clear</span>
         </button>
     </div>
-    <canvas id="canvas" width="0" height="0"></canvas>
+	<div id="instructions">
+		<p class="title">Select an image:</p>
+		<p class="options">
+			Paste from the clipboard<br>
+			Use the file picker below
+		</p>
+	</div>
+    <canvas id="canvas" class="hidden"></canvas>
     <input type="file" id="file" accept="image/*, image/avif" class="visuallyHidden" tabindex="-1">
 	<script type="module">
 		import { App } from "./assets/js/app.js"
 		new App().connectToDOM(document, {
+			instructions: "#instructions",
 			canvas: "#canvas",
 			fileInput: "#file",
 			clear: "#clear",