fix font variant selection from fromEach callback being ignored, using for-of instead. begin adding font selection list expansion, fix font API sorting not refreshing fonts shown

src/App.vue

@@ -99,27 +99,27 @@ export default {
         }
     },
     methods: {
-        toggleMenu() {
-            this.menuVisible = !this.menuVisible
-        },
         showSettings() {},
         showStylizer() {},
         showAbout() {},
         createPDF() {
             var doc = new jsPDF();
 
+            // Load font if not already
             if (!this.fontData)
                 this.loadFile(this.fontURL)
 
-            console.log(this.fontData)
-
+            // Adding font
             doc.addFileToVFS('antic.ttf', this.fontData);
             doc.addFont('antic.ttf', 'Antic', 'regular')
             doc.setFont('Antic', 'regular');
             doc.setFontSize(15);
+
+            // Add text
             doc.text("Some Text with Google Fonts", 5, 10);
             doc.save('test.pdf');
         },
+
         loadFile(fontURL) {
             this.directAxios.get(fontURL, {
                 responseType: "blob"

src/components/FontItem.vue

@@ -1,7 +1,10 @@
 <template>
-    <md-list-item @click="selectFont(font.index)" :style="fontStyle">
-        <template v-if="fontReady">{{ font.family }}</template>
-        <Skeleton v-else></Skeleton>
+    <md-list-item @click="selectFont" :style="fontStyle">
+            <span v-if="fontReady" class="md-list-item-text">{{ font.family }}</span>
+            <Skeleton v-else></Skeleton>
+            <md-list v-if="selected" slot="md-expand">
+                <md-list-item class="md-inset" v-for="(variant, index) in font.variants" :key="index">{{ variant }}</md-list-item>
+            </md-list>
     </md-list-item>
 </template>
 <style lang="scss">
@@ -15,12 +18,12 @@
 </style>
 <script>
 import WebFontLoader from 'webfontloader';
-import {Skeleton} from 'vue-loading-skeleton';
+// import {Skeleton} from 'vue-loading-skeleton';
 
 export default {
     name: 'FontItem',
     components: {
-        Skeleton
+        // Skeleton
     },
     data() {
         return {
@@ -30,7 +33,17 @@ export default {
     props: {
         font: {
             type: Object,
-            required: true
+            required: true,
+        },
+        selected: {
+            type: Boolean,
+            required: false,
+            default: false,
+        }
+    },
+    methods: {
+        selectFont() {
+            this.$emit('select-font', this.font.index)
         }
     },
     computed: {
@@ -41,14 +54,13 @@ export default {
         },
         fontSelection() {
             // Preferred font variants (in order0
-            let order = ['regular', '500', '600', '700', '300', 'italic', '500italic', '600italic', '700italic', '800',
-                '800italic', '200', '200italic', '100', '100italic', '300italic', '900', '900italic']
+            let order = ["regular", "500", "300", "600", "700", "italic", "500italic", "600italic", "700italic", "800",
+                "800italic", "200", "200italic", "100", "100italic", "300italic", "900", "900italic"]
 
             // Iterate over all weights possible, return first available
-            order.forEach((variant) => {
+            for (let variant of order)
                 if (this.font.variants.includes(variant))
                     return variant;
-            })
 
             // Otherwise return first variant (? should not occur naturally)
             return this.font.variants[0];

src/components/FontSelector.vue

@@ -21,10 +21,10 @@
                         </md-field>
                     </div>
                     <md-list>
-                        <vue-custom-scrollbar :distance="20"
+                        <vue-custom-scrollbar :distance="10"
                                               :settings="{suppressScrollX: true,  suppressScrollY: false}"
                                               class="scroll-area">
-                            <FontItem v-for="font in shown" :key="font.index" :font="font"></FontItem>
+                            <FontItem v-for="font in shown" :key="font.index" @select-font="selectFont" :selected="selectedFont !== null && selectedFont.index === font.index" :font="font"></FontItem>
                             <infinite-loading :identifier="search + sort" force-use-infinite-wrapper=".scroll-area"
                                               @infinite="infiniteHandler">
                                 <div slot="spinner"></div>
@@ -139,6 +139,7 @@ export default {
             ).then((res) => {
                 this.fonts = res.data;
                 this.fonts.items.forEach((font, index) => font.index = index)
+                this.shown = this.results.slice(0, 5);
             })
         },
         selectFont(fontIndex) {
@@ -161,7 +162,6 @@ export default {
     },
     watch: {
         sort: function() {
-            this.shown = [];
             this.getFonts();
         },
         search: function (newSearch, oldSearch) {