Hugging Face's logo

Spaces:
SenY
/
LogoMaker
Running

App Files Community
SenY commited on
Commit
0f4f7f9
·
1 Parent(s): 2366fbe

fontのフィルタリング対応

Browse files
Files changed (2) hide show
  1. index.html +14 -64
  2. index.js +43 -0
index.html CHANGED
@@ -28,71 +28,21 @@
28
 
29
  <div class="mb-3">
30
  <label for="googleFontInput" class="form-label">フォント</label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  <select name="googleFontInput" class="form-select" id="googleFontInput">
32
- <option>Aoboshi One</option>
33
- <option>BIZ UDGothic</option>
34
- <option>BIZ UDMincho</option>
35
- <option>BIZ UDPGothic</option>
36
- <option>BIZ UDPMincho</option>
37
- <option>Cherry Bomb One</option>
38
- <option>Chokokutai</option>
39
- <option>Darumadrop One</option>
40
- <option>Dela Gothic One</option>
41
- <option>DotGothic16</option>
42
- <option>Hachi Maru Pop</option>
43
- <option>Hina Mincho</option>
44
- <option>IBM Plex Sans JP</option>
45
- <option>Kaisei Decol</option>
46
- <option>Kaisei HarunoUmi</option>
47
- <option>Kaisei Opti</option>
48
- <option>Kaisei Tokumin</option>
49
- <option>Kiwi Maru</option>
50
- <option>Klee One</option>
51
- <option>Kosugi</option>
52
- <option>Kosugi Maru</option>
53
- <option>M PLUS 1</option>
54
- <option>M PLUS 1 Code</option>
55
- <option>M PLUS 1p</option>
56
- <option>M PLUS 2</option>
57
- <option>M PLUS Rounded 1c</option>
58
- <option selected="selected">Mochiy Pop One</option>
59
- <option>Mochiy Pop P One</option>
60
- <option>Monomaniac One</option>
61
- <option>Murecho</option>
62
- <option>New Tegomin</option>
63
- <option>Noto Sans JP</option>
64
- <option>Noto Serif JP</option>
65
- <option>Palette Mosaic</option>
66
- <option>Potta One</option>
67
- <option>Rampart One</option>
68
- <option>Reggae One</option>
69
- <option>Rock 3D</option>
70
- <option>RocknRoll One</option>
71
- <option>Sawarabi Gothic</option>
72
- <option>Sawarabi Mincho</option>
73
- <option>Shippori Antique</option>
74
- <option>Shippori Antique B1</option>
75
- <option>Shippori Mincho</option>
76
- <option>Shippori Mincho B1</option>
77
- <option>Shizuru</option>
78
- <option>Slackside One</option>
79
- <option>Stick</option>
80
- <option>Train One</option>
81
- <option>Tsukimi Rounded</option>
82
- <option>Yomogi</option>
83
- <option>Yuji Boku</option>
84
- <option>Yuji Hentaigana Akari</option>
85
- <option>Yuji Hentaigana Akebono</option>
86
- <option>Yuji Mai</option>
87
- <option>Yuji Syuku</option>
88
- <option>Yusei Magic</option>
89
- <option>Zen Antique</option>
90
- <option>Zen Antique Soft</option>
91
- <option>Zen Kaku Gothic Antique</option>
92
- <option>Zen Kaku Gothic New</option>
93
- <option>Zen Kurenaido</option>
94
- <option>Zen Maru Gothic</option>
95
- <option>Zen Old Mincho</option>
96
  </select>
97
  </div>
98
 
 
28
 
29
  <div class="mb-3">
30
  <label for="googleFontInput" class="form-label">フォント</label>
31
+ <div class="row g-2 mb-2">
32
+ <div class="col">
33
+ <div class="btn-group w-100" role="group" id="fontTagFilter">
34
+ <input type="radio" class="btn-check" name="fontFilter" id="filterAll" value="all" checked>
35
+ <label class="btn btn-outline-primary" for="filterAll">すべて表示</label>
36
+
37
+ <input type="radio" class="btn-check" name="fontFilter" id="filterJapanese" value="japanese">
38
+ <label class="btn btn-outline-primary" for="filterJapanese">日本語フォント</label>
39
+
40
+ <input type="radio" class="btn-check" name="fontFilter" id="filterKanji" value="kanji">
41
+ <label class="btn btn-outline-primary" for="filterKanji">漢字対応</label>
42
+ </div>
43
+ </div>
44
+ </div>
45
  <select name="googleFontInput" class="form-select" id="googleFontInput">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  </select>
47
  </div>
48
 
index.js CHANGED
@@ -154,11 +154,54 @@ function debounceRender(callback, delay = 200) {
154
  // イベントリスナーの設定を更新
155
  document.addEventListener('DOMContentLoaded', async () => {
156
  const fontSelect = document.getElementById('googleFontInput');
 
157
  const textInput = document.getElementById('textInput');
158
  const fontSizeInput = document.getElementById('fontSize');
159
  const verticalTextInput = document.getElementById('verticalText');
160
  const effectGrid = document.querySelector('.effect-grid');
161
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  await loadGoogleFont(fontSelect.value);
163
 
164
  // 縦書きモードの状態をグリッドに反映
 
154
  // イベントリスナーの設定を更新
155
  document.addEventListener('DOMContentLoaded', async () => {
156
  const fontSelect = document.getElementById('googleFontInput');
157
+ const fontTagFilter = document.getElementById('fontTagFilter');
158
  const textInput = document.getElementById('textInput');
159
  const fontSizeInput = document.getElementById('fontSize');
160
  const verticalTextInput = document.getElementById('verticalText');
161
  const effectGrid = document.querySelector('.effect-grid');
162
 
163
+ // フォントオプションの初期化と絞り込み機能の実装
164
+ function initializeFontOptions(filter = 'all') {
165
+ // 現在選択されているフォントを保持
166
+ const currentFont = fontSelect.value;
167
+
168
+ // 既存のオプションをクリア
169
+ fontSelect.innerHTML = '';
170
+
171
+ // フィルタリングされたフォントのリストを作成
172
+ const filteredFonts = fontTags.filter(font => {
173
+ if (filter === 'all') return true;
174
+ return font.tags.includes(filter);
175
+ });
176
+
177
+ // フォントオプションを追加
178
+ filteredFonts.forEach((font, index) => {
179
+ const option = document.createElement('option');
180
+ option.value = font.name;
181
+ option.textContent = font.name;
182
+ // 以前選択されていたフォントがある場合はそれを選択、なければ最初のフォントを選択
183
+ if (font.name === currentFont || (index === 0 && !currentFont)) {
184
+ option.selected = true;
185
+ }
186
+ fontSelect.appendChild(option);
187
+ });
188
+
189
+ // 選択されたフォントを読み込む
190
+ return loadGoogleFont(fontSelect.value);
191
+ }
192
+
193
+ // タグフィルターの変更イベントを設定
194
+ fontTagFilter.querySelectorAll('input[type="radio"]').forEach(radio => {
195
+ radio.addEventListener('change', async (e) => {
196
+ if (e.target.checked) {
197
+ await initializeFontOptions(e.target.value);
198
+ await renderAllPresets();
199
+ }
200
+ });
201
+ });
202
+
203
+ // 初期化
204
+ await initializeFontOptions('all');
205
  await loadGoogleFont(fontSelect.value);
206
 
207
  // 縦書きモードの状態をグリッドに反映