add font view

diff --git a/tagger2/Panel.js b/tagger2/Panel.js
index 620ca20cbb5eea338cd4fad285e13c18a2446e01..a582884b1a0e6044887dfd83b25fc4eff7c8e26f 100644 (file)
--- a/tagger2/Panel.js
+++ b/tagger2/Panel.js
@@ -10,6 +10,7 @@ export default {
       <button @click="remove" style="float:right">✕</button>
       <tags-by-font v-if="panel.type === 'font'" :tags="tags" :font="panel.font"></tags-by-font>
       <tags-by-categories v-else-if="panel.type === 'categories'" :tags="tags" :categories="panel.categories"></tags-by-categories>
+      <vf-view v-else-if="panel.type === 'vf-view'" :families="panel.families"></vf-view>
     </div>
   `
 };

diff --git a/tagger2/TagsByFont.js b/tagger2/TagsByFont.js
index 179a3912635a3d0bbac240bdcbbd56565e8f4608..924d72bf4265f41091dd22299cbbe7acc3fcc22f 100644 (file)
--- a/tagger2/TagsByFont.js
+++ b/tagger2/TagsByFont.js
@@ -13,7 +13,7 @@ export default {
   },
   template: `
     <div>
-      <h3>Tags for fonter</h3>
+      <h3>Tags for:</h3>
       <select v-model="font" @change="filteredTags">
         <option v-for="tag in tags.map(tag => tag.family.name).filter((value, index, self) => self.indexOf(value) === index)" :key="tag">
           {{ tag }}

diff --git a/tagger2/VFView.js b/tagger2/VFView.js
new file mode 100644 (file)
index 0000000..88cc4dd
--- /dev/null
+++ b/tagger2/VFView.js
@@ -0,0 +1,44 @@
+export default {
+    props: ['families'],
+    data: function() {
+        return {
+            fontSize: 32,
+            selectedFamily: null,
+        }
+    },
+    computed: {
+        cssStyle() {
+            let res = `font-family: '${this.selectedFamily.name}'; font-size: ${this.fontSize}pt;`;
+            if (this.selectedFamily.isVF) {
+                res += ' font-variation-settings:';
+            }
+            this.selectedFamily.axes.forEach(axis => {
+                res += ` '${axis.tag}' ${axis.value},`;
+            }
+            );
+            return res.slice(0, -1) + ';'; // Remove trailing comma and add semicolon
+        }
+    },
+    template: `
+    <div>
+        <h1>Playground</h1>
+        <select v-model="selectedFamily">
+            <option v-for="family in families" :key="family.name" :value="family">
+                {{ family.name }}
+            </option>
+        </select>
+        <div v-if="selectedFamily">
+            Font size:
+            <input type="range" v-model="fontSize" min="8" max="100" default="32" /> {{ fontSize }}pt
+            <div contenteditable="true" :style="cssStyle" style="border: 1px solid #ccc; padding: 1em;">
+                Hello world
+            </div>
+            <div v-for="axis in selectedFamily.axes" :key="axis.tag">
+                <label>{{ axis.tag }}: {{ axis.value }}</label>
+                <input type="range" v-model="axis.value" :min="axis.min" :max="axis.max" />
+            </div>
+        </div>
+    </div>
+
+    `
+}
\ No newline at end of file

diff --git a/tagger2/index.html b/tagger2/index.html
index 1871ae7edd728bf495b13e6edc9ee792fef1ecfd..7b25f1829d925c6a71d548864fdc78d2a37a2eb8 100644 (file)
--- a/tagger2/index.html
+++ b/tagger2/index.html
@@ -8,13 +8,18 @@
     <div id="fonts">
       <link v-for="family in gf && gf.families ? gf.families : []" :href="family.url" rel="stylesheet">
     </div>
-    <button @click="addFontPanel('Maven Pro')">Add Font View</button>
-    <button @click="addCategoriesPanel(['/Expressive/Loud'])">Add Tag View</button>
+    <button @click="addFontPanel('Maven Pro')">Tags in font</button>
+    <button @click="addCategoriesPanel(['/Expressive/Loud'])">Tags in category</button>
+    <button @click="addVFViewPanel()">Font explorer</button>
     <add-tag :categories="categories" @tag-added="addTag"></add-tag>
     <add-category @category-added="addCategory"></add-category>
     <div style="display: flex; flex-direction: row; width: 100vw; min-height: 100vh;">
       <div v-for="(panel, idx) in panels" :key="idx" :style="{ flex: '1 1 0', minWidth: 0, borderRight: idx < panels.length - 1 ? '1px solid #eee' : 'none', height: '100vh', overflow: 'auto' }">
-        <panel :panel="panel" :tags="tags && tags.items ? tags.items : []" @remove="removePanel(idx)"></panel>
+        <panel
+          :panel="panel"
+          :tags="tags && tags.items ? tags.items : []"
+          @remove="removePanel(idx)"
+        ></panel>
       </div>
     </div>
   </div>
@@ -26,6 +31,7 @@
     import TagView from "./TagView.js";
     import AddTag from "./AddTag.js";
     import AddCategory from "./AddCategory.js";
+    import VFView from "./VFView.js";
 
     Vue.component('tags-by-font', TagsByFont);
     Vue.component('tags-by-categories', TagsByCategories);
@@ -33,6 +39,7 @@
     Vue.component('tag-view', TagView);
     Vue.component('add-tag', AddTag);
     Vue.component('add-category', AddCategory);
+    Vue.component('vf-view', VFView);
     
     var app = new Vue({
       el: '#app',
@@ -51,6 +58,9 @@
         addCategoriesPanel(categories) {
           this.panels.push({ type: 'categories', categories });
         },
+        addVFViewPanel() {
+          this.panels.push({ type: 'vf-view', families: this.gf.families });
+        },
         removePanel(idx) {
           this.panels.splice(idx, 1);
         },

diff --git a/tagger2/models.js b/tagger2/models.js
index 4746e97c4ca94cf33bb3bc213b882b62813869e7..d9817d0db7faa1efa3b2cd5b6b4a5fa36cd99f6e 100644 (file)
--- a/tagger2/models.js
+++ b/tagger2/models.js
@@ -53,7 +53,14 @@ export class Font {
         return this.axes.length > 0;
     }
     get cssStyle() {
-        return `font-family: '${this.name}';`;
+        if (!this.isVF) {
+            return `font-family: '${this.name}'; font-size: 32pt;`;
+        }
+        let res = `font-family: '${this.name}'; font-size: 32pt; font-variation-settings:`;
+        this.axes.forEach(axis => {
+            res += ` '${axis.tag}' ${axis.min}..${axis.max},`;
+        });
+        return res.slice(0, -1) + ';'; // Remove trailing comma and add semicolon
     }
     get url() {
         let path = `https://fonts.googleapis.com/css2?family=${this.name.replaceAll(" ", "+")}`