Add demo font

This commit adds a button that'll auto-load a font from the server,
so Wakamai Fondue can be tried with the click of a button instead
of forcing the user to scour their OS for a font to drop.

Using Bungee for now!

Author: RoelN

public/Bungee-Regular.ttf

@@ -15,42 +15,58 @@ export default {
 		dragging: false
 	}),
 	methods: {
-		grabFont(e) {
+		getFont(e) {
 			e.preventDefault();
-			const that = this; // Is this the best way to deal with context?
-
-			// Turn off drag feedback
 			this.dragging = false;
 
-			// Loop over all files
+			const that = this;
+
+			// Loop over all uploaded files
 			let files = e.target.files || e.dataTransfer.files;
 			if (!files) return;
-			[...files].forEach((file, key) => {
-				// Convert file to base64 string...
-				const reader = new FileReader();
-				reader.readAsDataURL(file);
-				reader.onload = function() {
-					// ...and try to pass to Font.js
-					const font = new window.Font(`font${key}`);
-					font.loadFont(reader.result, file.name);
-					font.onload = e => {
-						that.injectStyleSheet(file, key);
-						that.font = e.detail.font;
-						that.$nextTick(() =>
-							document.getElementById("report").scrollIntoView()
-						);
-						window.font = e.detail.font; // DEV DEBUG ONLY !!
-					};
-					font.onerror = function(error) {
-						// TODO: error handling
-						console.log(error);
-					};
+			[...files].forEach(file => {
+				const filename = file.name;
+				that.loadFont(file, filename, that);
+			});
+		},
+		getExampleFont(filename) {
+			const that = this;
+
+			// Grab font from server
+			const request = new XMLHttpRequest();
+			request.open("GET", `/${filename}`, true);
+			request.responseType = "blob";
+			request.send();
+
+			request.onload = function() {
+				const file = request.response;
+				that.loadFont(file, filename, that);
+			};
+		},
+		loadFont(file, filename, that) {
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			reader.onload = function() {
+				const filedata = reader.result;
+				const font = new window.Font(filename);
+				font.loadFont(filedata, filename);
+				font.onload = e => {
+					that.injectStyleSheet(file);
+					that.font = e.detail.font;
+					that.$nextTick(() =>
+						document.getElementById("report").scrollIntoView()
+					);
+					window.font = e.detail.font; // DEV DEBUG ONLY !!
 				};
-				reader.onerror = function(error) {
+				font.onerror = function(error) {
 					// TODO: error handling
 					console.log(error);
 				};
-			});
+			};
+			reader.onerror = function(error) {
+				// TODO: error handling
+				console.log(error);
+			};
 		},
 		injectStyleSheet(file) {
 			// Use the "uploaded" font on the page

src/App.js

@@ -6,7 +6,7 @@
 		@mouseout="dragging = false"
 		:class="{ dragging }"
 	>
-		<Hero v-on:filePickFont="grabFont" />
+		<Hero v-on:getFont="getFont" v-on:getExampleFont="getExampleFont" />
 		<Report :font="font" />
 	</main>
 </template>

src/App.vue

@@ -48,16 +48,31 @@
 	opacity: 0;
 }
 
+.demo-font {
+	/* Stacking tricks to prevent button click
+	   from being seen as label click */
+	position: relative;
+	z-index: 1;
+	padding: 0.25rem 0.5rem;
+	border-radius: 0.2rem;
+	margin: 1rem 0 0 0;
+	border: 0;
+	background: none;
+	font-size: 0.85rem;
+	background: var(--green);
+	color: white;
+	cursor: pointer;
+}
+
 .info {
 	position: relative;
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	height: 100%;
 }
 
-/* Styles when font is being dragged */
-
 .dragging .filedrop {
 	position: fixed;
 	background: rgba(0, 0, 0, 0.75);

src/components/Filedrop.css

@@ -4,12 +4,21 @@
 
 export default {
 	methods: {
-		filePickFont(e) {
+		getFont(e) {
 			// Quick and clean way to emit to grandparent
 			// that a file has been picked
 			let vm = this.$parent;
 			while (vm) {
-				vm.$emit("filePickFont", e);
+				vm.$emit("getFont", e);
+				vm = vm.$parent;
+			}
+		},
+		getExampleFont(filename) {
+			// Quick and clean way to emit to grandparent
+			// that a file has been picked
+			let vm = this.$parent;
+			while (vm) {
+				vm.$emit("getExampleFont", filename);
 				vm = vm.$parent;
 			}
 		}

src/components/Filedrop.js

@@ -1,15 +1,22 @@
 <template>
 	<div class="filedrop">
 		<label class="upload">
+			<div class="background"></div>
 			<input
 				type="file"
 				name="file"
-				v-on:change="filePickFont"
+				v-on:change="getFont"
 				accept=".woff,.woff2,.ttf,.otf"
 			/>
-			<div class="background"></div>
 			<div class="info">
 				Drop a font!
+				<button
+					type="button"
+					v-on:click="getExampleFont('Bungee-Regular.ttf')"
+					class="demo-font"
+				>
+					Try with Bungee!
+				</button>
 			</div>
 		</label>
 	</div>

src/components/Filedrop.vue

@@ -13,7 +13,11 @@
 				</template>
 			</p>
 			<h3 v-if="palettes.length">Palettes</h3>
-			<ul v-for="palette in palettes" :key="palette" class="palette">
+			<ul
+				v-for="palette in palettes"
+				:key="`palette_${palette}`"
+				class="palette"
+			>
 				<li
 					v-for="color in palette"
 					:key="color"

src/components/report/Color.vue

@@ -33,13 +33,13 @@
 .button {
 	padding: 0.25rem 0.5rem;
 	border-radius: 0.2rem;
-    margin: 0;
-    border: 0;
-    background: none;
-    font-size: 0.85rem;
-    background: var(--green);
-    color: white;
-    cursor: pointer;
+	margin: 0;
+	border: 0;
+	background: none;
+	font-size: 0.85rem;
+	background: var(--green);
+	color: white;
+	cursor: pointer;
 }
 
 .axis-slider button.hide {
@@ -54,7 +54,7 @@
 }
 
 .instances .button {
-    background: var(--yellow);
+	background: var(--yellow);
 }
 
 .instances .button.active {