From 1e9da3cf99112c1aedbc900858b074f67cf12bdd Mon Sep 17 00:00:00 2001
From: zzzmisa <zzzmisa.office@gmail.com>
Date: Sat, 17 Sep 2022 00:12:12 +0900
Subject: [PATCH] Make it possible to change font

---
 css/style.css |  2 --
 en/index.html | 53 ++++++++++++++++++++++++++++++++++++++++-----------
 index.html    | 53 ++++++++++++++++++++++++++++++++++++++++-----------
 js/fonts.js   |  6 ++++++
 js/index.js   | 17 ++++++++++++-----
 5 files changed, 102 insertions(+), 29 deletions(-)
 create mode 100644 js/fonts.js

diff --git a/css/style.css b/css/style.css
index cb78d29..cf45b2b 100755
--- a/css/style.css
+++ b/css/style.css
@@ -8,8 +8,6 @@
   justify-content: center;
   text-align: center;
 
-  /* コンテンツのフォント */
-  font-family: "Lato", sans-serif;
   font-size: 60px;
   color: white;
 
diff --git a/en/index.html b/en/index.html
index 2a43de0..69e4c50 100644
--- a/en/index.html
+++ b/en/index.html
@@ -8,8 +8,9 @@
   <!-- Bulma -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet">
   <!-- Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Lato&family=Oswald&family=Train+One&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
     integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -167,7 +168,7 @@ <h2 class="subtitle">Generator of simple featured images</h2>
                   <template v-for="webgradient in webgradients">
                     <div class="column is-4"><a class="box"
                         v-on:click="selectGradient(webgradient); gradientsModalFlg=false"
-                        v-bind:style="linearGradientForRoop(webgradient)"><br><br><br><br><br></a></div>
+                        v-bind:style="{ background: 'linear-gradient(' + webgradient + ')' }"><br><br><br><br><br></a></div>
                   </template>
                 </div>
               </section>
@@ -185,20 +186,50 @@ <h2 class="subtitle">Generator of simple featured images</h2>
             <div class="field">
               <label class="label">Image size</label>
               <div class="is-flex">
-                <div class="field">
-                  <p class="control">
-                    <input class="input" type="text" v-model="width">
-                  </p>
-                </div>
+                <p class="control">
+                  <input class="input" type="text" v-model="width">
+                </p>
                 <div class="mx-3 is-size-5">x</div>
-                <div class="field">
+                <p class="control">
+                  <input class="input" type="text" v-model="height">
+                </p>
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Font</label>
+              <p class="control">
+                <div class="field has-addons">
+                  <p class="control is-expanded">
+                    <input class="input" type="text" v-bind:value="font.name" v-bind:style="{ fontFamily: font.fontFamily }" readonly>
+                  </p>
                   <p class="control">
-                    <input class="input" type="text" v-model="height">
+                    <a class="button is-link" v-on:click='fontsModalFlg=true'>Pick</a>
                   </p>
                 </div>
+              </p>
+            </div>
+            <!-- fontsModal ... -->
+            <div class="modal" v-bind:class='{"is-active":fontsModalFlg}'>
+              <div class="modal-background"></div>
+              <div class="modal-card">
+                <header class="modal-card-head">
+                  <p class="modal-card-title">Pick a font</p>
+                  <button class="delete" aria-label="close" v-on:click='fontsModalFlg=false'></button>
+                </header>
+                <section class="modal-card-body">
+                  <div class="columns is-multiline has-text-centered">
+                    <template v-for="f in fonts">
+                      <div class="column is-4">
+                        <a class="box" v-text="f.name" v-bind:style="{ fontFamily: f.fontFamily }" v-on:click="selectFont(f); fontsModalFlg=false"
+                         ><br><br><br><br><br></a></div>
+                    </template>           
+                  </div>
+                </section>
+                <footer class="modal-card-foot">
+                </footer>
               </div>
             </div>
-          </div>
+            <!-- ...fontsModal -->
           </details>
         </div>
       </div>
diff --git a/index.html b/index.html
index d27c80f..26dadbe 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,9 @@
   <!-- Bulma Version -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet">
   <!-- Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Lato&family=Oswald&family=Train+One&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
     integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -166,7 +167,7 @@ <h2 class="subtitle">アイキャッチ画像が簡単に作れるジェネレ
                   <template v-for="webgradient in webgradients">
                     <div class="column is-4"><a class="box"
                         v-on:click="selectGradient(webgradient); gradientsModalFlg=false"
-                        v-bind:style="linearGradientForRoop(webgradient)"><br><br><br><br><br></a></div>
+                        v-bind:style="{ background: 'linear-gradient(' + webgradient + ')' }"><br><br><br><br><br></a></div>
                   </template>
                 </div>
               </section>
@@ -184,20 +185,50 @@ <h2 class="subtitle">アイキャッチ画像が簡単に作れるジェネレ
             <div class="field">
               <label class="label">画像サイズ</label>
               <div class="is-flex">
-                <div class="field">
-                  <p class="control">
-                    <input class="input" type="text" v-model="width">
-                  </p>
-                </div>
+                <p class="control">
+                  <input class="input" type="text" v-model="width">
+                </p>
                 <div class="mx-3 is-size-5">x</div>
-                <div class="field">
+                <p class="control">
+                  <input class="input" type="text" v-model="height">
+                </p>
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">フォント</label>
+              <p class="control">
+                <div class="field has-addons">
+                  <p class="control is-expanded">
+                    <input class="input" type="text" v-bind:value="font.name" v-bind:style="{ fontFamily: font.fontFamily }" readonly>
+                  </p>
                   <p class="control">
-                    <input class="input" type="text" v-model="height">
+                    <a class="button is-link" v-on:click='fontsModalFlg=true'>選択</a>
                   </p>
                 </div>
+              </p>
+            </div>
+            <!-- fontsModal ... -->
+            <div class="modal" v-bind:class='{"is-active":fontsModalFlg}'>
+              <div class="modal-background"></div>
+              <div class="modal-card">
+                <header class="modal-card-head">
+                  <p class="modal-card-title">フォント選択</p>
+                  <button class="delete" aria-label="close" v-on:click='fontsModalFlg=false'></button>
+                </header>
+                <section class="modal-card-body">
+                  <div class="columns is-multiline has-text-centered">
+                    <template v-for="f in fonts">
+                      <div class="column is-4">
+                        <a class="box" v-text="f.name" v-bind:style="{ fontFamily: f.fontFamily }" v-on:click="selectFont(f); fontsModalFlg=false"
+                         ><br><br><br><br><br></a></div>
+                    </template>           
+                  </div>
+                </section>
+                <footer class="modal-card-foot">
+                </footer>
               </div>
             </div>
-          </div>
+            <!-- ...fontsModal -->
           </details>
         </div>
       </div>
diff --git a/js/fonts.js b/js/fonts.js
new file mode 100644
index 0000000..2e40d14
--- /dev/null
+++ b/js/fonts.js
@@ -0,0 +1,6 @@
+export default [
+  { name: "BIZ UDPGothic", fontFamily: '"BIZ UDPGothic", sans-serif' },
+  { name: "Lato", fontFamily: '"Lato", sans-serif' },
+  { name: "Oswald", fontFamily: '"Oswald", sans-serif' },
+  { name: "Train One", fontFamily: '"Train One", cursive' },
+];
diff --git a/js/index.js b/js/index.js
index 33b409d..b2f3464 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,17 +1,20 @@
 import icons from "./icons.js";
 import webgradients from "./webgradients.js";
+import fonts from "./fonts.js";
 
 var app = new Vue({
   el: "#app",
   data: {
     iconsModalFlg: false,
     gradientsModalFlg: false,
+    fontsModalFlg: false,
     title: "Eye Catch Maker",
     title_en: "Featured image maker",
     icon: "fa fa-eye",
     color: "to left top, #05FBFF, #1E00FF",
     width: 780,
     height: 520,
+    font: fonts[1],
     items: [
       {
         title: "サンプル1",
@@ -33,7 +36,6 @@ var app = new Vue({
       },
     ],
     keyword: "",
-    webgradients: webgradients,
     loading: false,
     zoomPercentage: 100,
   },
@@ -44,6 +46,12 @@ var app = new Vue({
     }
   },
   computed: {
+    fonts: function () {
+      return fonts;
+    },
+    webgradients: function () {
+      return webgradients;
+    },
     cssForPreview: function () {
       return {
         zoom: this.zoomPercentage + "%",
@@ -56,6 +64,7 @@ var app = new Vue({
         width: this.width + "px",
         height: this.height + "px",
         background: "linear-gradient(" + this.color + ")",
+        fontFamily: this.font.fontFamily,
       };
     },
     searchedIcons: function () {
@@ -104,10 +113,8 @@ var app = new Vue({
     selectGradient: function (selectedGradient) {
       this.color = selectedGradient;
     },
-    linearGradientForRoop: function (color) {
-      return {
-        background: "linear-gradient(" + color + ")",
-      };
+    selectFont: function (selectedFont) {
+      this.font = selectedFont;
     },
   },
 });