Merge pull request #193 from Wakamai-Fondue/more-vue-updates

More vue updates

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 () {

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:[email protected]">Let me know!</a>

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],
 };

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>

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,

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"

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),

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";
 		},
@@ -31,4 +28,9 @@ export default {
 			return count || "no";
 		},
 	},
+	methods: {
+		hasLocalization() {
+			return this.font.languageSystems.length > 0;
+		},
+	},
 };

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];
 		},

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"

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();

src/components/report/TypeTester.js

@@ -30,9 +30,6 @@ export default {
 		styles() {
 			return this.getStyles();
 		},
-		hasLocalization() {
-			return this.font.languageSystems.length > 0;
-		},
 	},
 	methods: {
 		updateOpticalSize: function () {
@@ -71,5 +68,8 @@ export default {
 			}
 			return css;
 		},
+		hasLocalization() {
+			return this.font.languageSystems.length > 0;
+		},
 	},
 };

src/mixins/toggleModal.js → 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;
 			}
 		},