From b9376a145080789636c04166d1e4327809acd97f Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Wed, 9 Oct 2024 08:34:59 +0200
Subject: [PATCH 1/7] Use proper ID to scroll to font report

How could this have worked before?!
---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 30c7160..9a9d49c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,7 +38,7 @@ export default {
 					that.font = fondue;
 					that.$nextTick(() => {
 						that.working = false;
-						document.getElementById("Fontreport").scrollIntoView();
+						document.getElementById("report").scrollIntoView();
 					});
 				})
 				.catch(function () {

From be35a03bacadd83290b20f46b371fa39b59d1abd Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Wed, 9 Oct 2024 08:52:35 +0200
Subject: [PATCH 2/7] Consistently rename modal events

---
 src/App.vue                                       | 6 +++---
 src/components/InfoModal.js                       | 4 ++--
 src/components/InfoModal.vue                      | 2 +-
 src/components/TheFondue.js                       | 4 ++--
 src/components/TheFondue.vue                      | 2 +-
 src/mixins/{toggleModal.js => toggleInfoModal.js} | 4 ++--
 6 files changed, 11 insertions(+), 11 deletions(-)
 rename src/mixins/{toggleModal.js => toggleInfoModal.js} (77%)

diff --git a/src/App.vue b/src/App.vue
index 4d0b403..ca98ad0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,18 +4,18 @@
 		@drop.prevent="getFont"
 		@dragover.prevent="dragStatus(true)"
 		@mouseout="dragStatus(false)"
-		@keydown.esc="toggleModal(true)"
+		@keydown.esc="toggleInfoModal(true)"
 		tabindex="0"
 		:class="{ dragging, working }"
 	>
 		<TheFondue
 			@getFont="getFont"
 			@getExampleFont="getExampleFont"
-			@toggleModal="toggleModal"
+			@toggleInfoModal="toggleInfoModal"
 			:error="error"
 		/>
 		<FontReport :font="font" :isExamplefont="isExamplefont" />
-		<InfoModal v-if="showModal" @toggleModal="toggleModal" />
+		<InfoModal v-if="showInfoModal" @toggleInfoModal="toggleInfoModal" />
 		<div class="beta-message">
 			Heya! You’re looking at the beta site. Comments, bugs or feedback?
 			<a href="mailto:roel@pixelambacht.nl">Let me know!</a>
diff --git a/src/components/InfoModal.js b/src/components/InfoModal.js
index dc61c09..43cb52c 100644
--- a/src/components/InfoModal.js
+++ b/src/components/InfoModal.js
@@ -1,5 +1,5 @@
-import toggleModal from "../mixins/toggleModal.js";
+import toggleInfoModal from "../mixins/toggleInfoModal.js";
 
 export default {
-	mixins: [toggleModal],
+	mixins: [toggleInfoModal],
 };
diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
index 22c5791..dd84a28 100644
--- a/src/components/InfoModal.vue
+++ b/src/components/InfoModal.vue
@@ -4,7 +4,7 @@
 			type="button"
 			aria-label="Info"
 			class="info"
-			@click="toggleModal"
+			@click="toggleInfoModal"
 		></button>
 		<div class="modal-content">
 			<p class="modal-title">Wakamai Fondue</p>
diff --git a/src/components/TheFondue.js b/src/components/TheFondue.js
index 11452f1..b1c751d 100644
--- a/src/components/TheFondue.js
+++ b/src/components/TheFondue.js
@@ -1,8 +1,8 @@
-import toggleModal from "../mixins/toggleModal.js";
+import toggleInfoModal from "../mixins/toggleInfoModal.js";
 import FileDrop from "./FileDrop.vue";
 
 export default {
-	mixins: [toggleModal],
+	mixins: [toggleInfoModal],
 	props: ["error"],
 	components: {
 		FileDrop,
diff --git a/src/components/TheFondue.vue b/src/components/TheFondue.vue
index b69b195..8c9b62e 100644
--- a/src/components/TheFondue.vue
+++ b/src/components/TheFondue.vue
@@ -4,7 +4,7 @@
 			type="button"
 			aria-label="Info"
 			class="info"
-			@click="toggleModal"
+			@click="toggleInfoModal"
 		></button>
 		<FileDrop :error="error" />
 		<a href="https://pixelambacht.nl" target="_blank" class="logo"
diff --git a/src/mixins/toggleModal.js b/src/mixins/toggleInfoModal.js
similarity index 77%
rename from src/mixins/toggleModal.js
rename to src/mixins/toggleInfoModal.js
index f9533b6..5e7b190 100644
--- a/src/mixins/toggleModal.js
+++ b/src/mixins/toggleInfoModal.js
@@ -1,11 +1,11 @@
 export default {
 	methods: {
-		toggleModal() {
+		toggleInfoModal() {
 			// Quick and clean way to emit to grandparent
 			// that modal should be opened/closed
 			let vm = this;
 			while (vm) {
-				vm.$emit("toggleModal");
+				vm.$emit("toggleInfoModal");
 				vm = vm.$parent;
 			}
 		},

From 19788e685b787647d94b69f0be016f1fd5a10bb7 Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Wed, 9 Oct 2024 11:32:35 +0200
Subject: [PATCH 3/7] Prevent recursive updates in font summary

---
 src/components/report/FontSummary.js  | 3 ---
 src/components/report/FontSummary.vue | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/report/FontSummary.js b/src/components/report/FontSummary.js
index d3dedea..ca53ee8 100644
--- a/src/components/report/FontSummary.js
+++ b/src/components/report/FontSummary.js
@@ -7,9 +7,6 @@ export default {
 		};
 	},
 	computed: {
-		hasLocalization() {
-			return this.font.languageSystems.length > 0;
-		},
 		featureLength() {
 			return this.font.features.length || "no";
 		},
diff --git a/src/components/report/FontSummary.vue b/src/components/report/FontSummary.vue
index 4dccd8e..a3704ac 100644
--- a/src/components/report/FontSummary.vue
+++ b/src/components/report/FontSummary.vue
@@ -90,7 +90,7 @@
 					)
 				}}.
 			</p>
-			<template v-if="hasLocalization">
+			<template v-if="localizations.length > 0">
 				<h3>Localization</h3>
 				<p>{{ $filters.listify(localizations) }}.</p>
 			</template>

From 360a1dabcc79ac9412a4ff24b32729b7cf169ed1 Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Wed, 9 Oct 2024 12:09:03 +0200
Subject: [PATCH 4/7] Prevent recursive updates in TypeTester

---
 src/components/report/TypeTester.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/report/TypeTester.js b/src/components/report/TypeTester.js
index 9f3e0d3..2e1afea 100644
--- a/src/components/report/TypeTester.js
+++ b/src/components/report/TypeTester.js
@@ -21,6 +21,7 @@ export default {
 			textStyles: "",
 			language: null,
 			sticky: false,
+			hasLocalization: this.font.languageSystems.length > 0,
 		};
 	},
 	computed: {
@@ -30,9 +31,6 @@ export default {
 		styles() {
 			return this.getStyles();
 		},
-		hasLocalization() {
-			return this.font.languageSystems.length > 0;
-		},
 	},
 	methods: {
 		updateOpticalSize: function () {

From 052d7956c9d38be9c82e3a69112013208435a67a Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Wed, 9 Oct 2024 12:16:22 +0200
Subject: [PATCH 5/7] Refactor my FontSummary solution

---
 src/components/report/FontSummary.js  | 1 +
 src/components/report/FontSummary.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/report/FontSummary.js b/src/components/report/FontSummary.js
index ca53ee8..9ca7425 100644
--- a/src/components/report/FontSummary.js
+++ b/src/components/report/FontSummary.js
@@ -4,6 +4,7 @@ export default {
 		return {
 			summary: this.font.summary,
 			features: this.font.features,
+			hasLocalization: this.font.languageSystems.length > 0,
 		};
 	},
 	computed: {
diff --git a/src/components/report/FontSummary.vue b/src/components/report/FontSummary.vue
index a3704ac..4dccd8e 100644
--- a/src/components/report/FontSummary.vue
+++ b/src/components/report/FontSummary.vue
@@ -90,7 +90,7 @@
 					)
 				}}.
 			</p>
-			<template v-if="localizations.length > 0">
+			<template v-if="hasLocalization">
 				<h3>Localization</h3>
 				<p>{{ $filters.listify(localizations) }}.</p>
 			</template>

From 3d9a0299ce0efe41be120122ca586a99f47c16cd Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Wed, 9 Oct 2024 12:27:03 +0200
Subject: [PATCH 6/7] Prevent recursive updates in TextControls

---
 src/components/report/TextControls.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/report/TextControls.js b/src/components/report/TextControls.js
index 20a7078..420320a 100644
--- a/src/components/report/TextControls.js
+++ b/src/components/report/TextControls.js
@@ -7,13 +7,10 @@ export default {
 			activeLanguage: null,
 			languages: this.font.languageSystems,
 			linkOpticalSize: false,
+			hasLocalization: this.font.languageSystems.length > 0,
 		};
 	},
-	computed: {
-		hasLocalization() {
-			return this.font.languageSystems.length > 0;
-		},
-	},
+
 	mounted: function () {
 		// this.$root.$on("unlinkOpticalSize", this.unlinkOpticalSize);
 		this.updateStyles();

From 5810ce610dcc5a886aa9be5d504c0c3265281193 Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Fri, 29 Nov 2024 11:57:14 +0100
Subject: [PATCH 7/7] Fix more recursive updates

---
 src/components/report/FeatureControls.js   | 10 +++++-----
 src/components/report/FontSummary.js       |  6 +++++-
 src/components/report/OpenTypeFeatures.js  | 19 ++++++++++---------
 src/components/report/OpenTypeFeatures.vue |  4 ++--
 src/components/report/TypeTester.js        |  4 +++-
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/report/FeatureControls.js b/src/components/report/FeatureControls.js
index 07745fc..f4cff5b 100644
--- a/src/components/report/FeatureControls.js
+++ b/src/components/report/FeatureControls.js
@@ -19,6 +19,11 @@ export default {
 		long() {
 			return this.optionalFeatures.length > 8;
 		},
+	},
+	mounted: function () {
+		this.updateStyles();
+	},
+	methods: {
 		featureChars() {
 			// Try to return the "best" layout features
 			if (
@@ -39,11 +44,6 @@ export default {
 				return {};
 			}
 		},
-	},
-	mounted: function () {
-		this.updateStyles();
-	},
-	methods: {
 		flipState(feature) {
 			const states = [1, 0, null];
 			// If feature is on and showing alternates (so it's state >= 1),
diff --git a/src/components/report/FontSummary.js b/src/components/report/FontSummary.js
index 9ca7425..50b3a87 100644
--- a/src/components/report/FontSummary.js
+++ b/src/components/report/FontSummary.js
@@ -4,7 +4,6 @@ export default {
 		return {
 			summary: this.font.summary,
 			features: this.font.features,
-			hasLocalization: this.font.languageSystems.length > 0,
 		};
 	},
 	computed: {
@@ -29,4 +28,9 @@ export default {
 			return count || "no";
 		},
 	},
+	methods: {
+		hasLocalization() {
+			return this.font.languageSystems.length > 0;
+		},
+	},
 };
diff --git a/src/components/report/OpenTypeFeatures.js b/src/components/report/OpenTypeFeatures.js
index 23eb653..24f1b55 100644
--- a/src/components/report/OpenTypeFeatures.js
+++ b/src/components/report/OpenTypeFeatures.js
@@ -3,6 +3,13 @@ export default {
 	data() {
 		return {
 			currentStates: [],
+			hasOptionalFeatures:
+				this.font.features.filter((f) => f.state !== "fixed").length >
+				0,
+			hasRequiredFeatures:
+				this.font.features.filter((f) => f.state === "fixed").length >
+				0,
+			featureChars: this.getFeatureChars(),
 		};
 	},
 	computed: {
@@ -12,13 +19,9 @@ export default {
 		requiredFeatures() {
 			return this.font.features.filter((f) => f.state === "fixed");
 		},
-		hasRequiredFeatures() {
-			return this.requiredFeatures.length > 0;
-		},
-		hasOptionalFeatures() {
-			return this.optionalFeatures.length > 0;
-		},
-		featureChars() {
+	},
+	methods: {
+		getFeatureChars() {
 			// Try to return the "best" layout features
 			if (
 				"DFLT" in this.font.featureChars &&
@@ -38,8 +41,6 @@ export default {
 				return {};
 			}
 		},
-	},
-	methods: {
 		flipState(feature) {
 			this.currentStates[feature] = 1 - this.currentStates[feature];
 		},
diff --git a/src/components/report/OpenTypeFeatures.vue b/src/components/report/OpenTypeFeatures.vue
index 4647ec3..a6801e5 100644
--- a/src/components/report/OpenTypeFeatures.vue
+++ b/src/components/report/OpenTypeFeatures.vue
@@ -64,7 +64,7 @@
 							v-if="lookup['type'] === 3"
 							:style="getFeatureStyle(feature.tag)"
 							:data-type="lookup['typeName']"
-							:key="`lookup_${feature.tag}_${index}`"
+							:key="`lookup_3_${feature.tag}_${index}`"
 							class="chars"
 							contenteditable
 							spellcheck="false"
@@ -86,7 +86,7 @@
 							v-else
 							:style="getFeatureStyle(feature.tag)"
 							:data-type="lookup['typeName']"
-							:key="`lookup_${feature.tag}_${index}`"
+							:key="`lookup_6_${feature.tag}_${index}`"
 							class="chars"
 							contenteditable
 							spellcheck="false"
diff --git a/src/components/report/TypeTester.js b/src/components/report/TypeTester.js
index 2e1afea..6e12750 100644
--- a/src/components/report/TypeTester.js
+++ b/src/components/report/TypeTester.js
@@ -21,7 +21,6 @@ export default {
 			textStyles: "",
 			language: null,
 			sticky: false,
-			hasLocalization: this.font.languageSystems.length > 0,
 		};
 	},
 	computed: {
@@ -69,5 +68,8 @@ export default {
 			}
 			return css;
 		},
+		hasLocalization() {
+			return this.font.languageSystems.length > 0;
+		},
 	},
 };