Skip to content

Commit 1beea44

Browse files
eigilnikolajseneigilnikolajsen
committed
load settings from file
1 parent 6dd6510 commit 1beea44

File tree

6 files changed

+99
-16
lines changed

6 files changed

+99
-16
lines changed

‎index.html

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,9 +158,8 @@
158158
<br />
159159
<br />
160160
<br />
161-
<h1 tabindex="0" data-edit="true">
162-
Commit Mono. <br />Neutral programming typeface.
163-
</h1>
161+
<h1 tabindex="0" data-edit="true">Commit Mono.</h1>
162+
<h1 tabindex="0" data-edit="true">Neutral programming typeface.</h1>
164163
<br />
165164
<p tabindex="0" data-edit="true">
166165
Commit Mono is an anonymous and neutral coding font focused on creating a better
@@ -587,22 +586,36 @@ <h2>Choose download alternate characters</h2>
587586
<button class="download_button" onclick="downloadFont('dev', this)" tabindex="0">
588587
Download custom for dev
589588
</button>
590-
<br />
591589
<p>
592590
Recommended download of style group with your custom settings for development.
593591
</p>
594592
<br />
595593
<button class="download_button" onclick="downloadFont('design', this)" tabindex="0">
596594
Download custom for design
597595
</button>
598-
<br />
599596
<p>
600597
Download all 34 cuts with your custom settings + source variable fonts (.tff &
601598
.woff2) for design. Variable fonts don’t contain custom settings. Use these
602599
OpenType features for current custom settings:
603600
<span id="custom_feature_code" tabindex="0" data-edit="true"></span>
604601
</p>
605602
<br />
603+
<input
604+
type="file"
605+
name="font_settings_file"
606+
id="font_settings_file"
607+
accept=".json, application/json"
608+
tabindex="0"
609+
onchange="uploadCustomSettings(event, this)"
610+
/>
611+
<label for="font_settings_file" class="download_button"
612+
>Retrieve custom settings</label
613+
>
614+
<p>
615+
Upload the ‘custom-settings.json’ file from a previous version to retrieve
616+
custom settings from that download.
617+
</p>
618+
<p id="custom_settings_feedback"><br /></p>
606619
<br />
607620
<p tabindex="0" data-edit="true">
608621
Changing the settings above changes the download. Recommended weight: 450 for

‎src/css/section_5.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ form > div {
1818
position: relative;
1919
}
2020

21-
form input {
21+
form input,
22+
input[type="file"] {
2223
-webkit-appearance: none;
2324
appearance: none;
2425
background-color: var(--text);

‎src/css/section_7.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#section_7 #alternates_container fieldset,
22
#section_7 #features_container fieldset {
33
display: grid;
4-
grid-template-columns: 21ch 3ch 3ch;
4+
grid-template-columns: 28ch 3ch 3ch;
55
gap: 2ch;
66
}
77

@@ -139,3 +139,20 @@ input[type="text"] + p {
139139
display: inline-block;
140140
margin-left: 0ch;
141141
}
142+
143+
.file_label {
144+
height: 1rem;
145+
border: 1px solid var(--text);
146+
background-color: var(--bg);
147+
font-family: inherit;
148+
font-size: inherit;
149+
line-height: inherit;
150+
display: inline-block;
151+
padding: 0 0.5ch;
152+
}
153+
154+
input[type="file"]:focus + label {
155+
background-color: var(--text);
156+
color: var(--bg);
157+
text-decoration: none;
158+
}

‎src/css/style.css

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
main {
3737
min-width: 100vw;
3838
width: fit-content;
39-
padding: 4rem 2ch 0 4ch;
39+
padding: 4rem 4ch 0 4ch;
4040
}
4141

4242
header nav {
@@ -57,6 +57,18 @@ header #keyboard_section {
5757
bottom: 0;
5858
}
5959

60+
@media (max-width: 1000px) {
61+
main {
62+
padding: 4rem 2ch 0 2ch;
63+
}
64+
header nav {
65+
padding: 1rem 2ch 0 2ch;
66+
}
67+
header #keyboard_section {
68+
padding: 0.25rem 2ch 1rem 2ch;
69+
}
70+
}
71+
6072
header #keyboard_section,
6173
header nav {
6274
overflow-y: scroll;
@@ -346,3 +358,10 @@ input:focus + .shake_down {
346358
.nav_button:focus {
347359
text-decoration: none;
348360
}
361+
362+
br {
363+
line-height: 1rem;
364+
height: 1rem;
365+
display: block;
366+
content: "";
367+
}

‎src/js/download_wizard.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ const downloadSettingsCustom = {
44
alternates: {},
55
features: {},
66
letterSpacing: 0,
7-
lineHeight: 0,
7+
lineHeight: 1,
88
}
99
const downloadSettingsDefault = {
1010
weight: 450,
1111
italic: false,
1212
alternates: {},
1313
features: {},
1414
letterSpacing: 0,
15-
lineHeight: 0,
15+
lineHeight: 1,
1616
}
1717
const fontFileBlobs = { regular: null, italic: null, bold: null, bolditalic: null }
1818

@@ -307,7 +307,7 @@ function makeCustomFont(settings) {
307307
async function getZipFileBlob(kindOfDownload, fonts) {
308308
// console.log(fontFileBlobs, fonts)
309309

310-
const { BlobWriter, BlobReader, HttpReader, ZipWriter } = zip
310+
const { BlobWriter, BlobReader, HttpReader, ZipWriter, TextReader } = zip
311311
const zipFileWriter = new BlobWriter()
312312
const zipWriter = new ZipWriter(zipFileWriter)
313313

@@ -326,6 +326,7 @@ async function getZipFileBlob(kindOfDownload, fonts) {
326326
new HttpReader(`/src/fonts/CommitMono${versionOfCommitMono}-VF.woff2`)
327327
),
328328
zipWriter.add("installation.txt", new HttpReader("/src/txt/installation.txt")),
329+
zipWriter.add("custom-settings.json", new TextReader(JSON.stringify(downloadSettingsCustom))),
329330
zipWriter.add("license.txt", new HttpReader("/src/txt/license.txt")),
330331
])
331332
const zipFileBlob = await zipWriter.close()

‎src/js/example_section.js

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,24 +123,23 @@ function buildExample() {
123123
const fieldset = document.createElement("fieldset")
124124
const duo = [0, 0]
125125
const p = document.createElement("p")
126-
p.textContent = feature.label
126+
p.textContent = `${feature.feature}: ${feature.label}`
127127
p.id = `alt_${feature.name}`
128128
fieldset.append(p)
129129
duo.forEach((_, index) => {
130130
const div = document.createElement("div")
131131
const input = document.createElement("input")
132132
input.type = "radio"
133133
input.name = feature.name
134-
input.id = `${feature.name}${index}`
134+
input.id = `${feature.feature}_${!!index}`
135135
input.value = `'${feature.feature}' ${index == 0 ? "off" : "on"}`
136136
input.dataset.forform = "examplesettings_form"
137-
// input.tabIndex = 0
138137
if (!feature.on && index == 0) input.setAttribute("checked", "true")
139138
if (feature.on && index == 1) input.setAttribute("checked", "true")
140139
const label = document.createElement("label")
141140
if (feature.type == "feature") label.textContent = index == 0 ? "OFF" : "ON"
142141
if (feature.type == "alternate") label.textContent = index == 0 ? "DEF" : "ALT"
143-
label.setAttribute("for", `${feature.name}${index}`)
142+
label.setAttribute("for", `${feature.feature}_${!!index}`)
144143
div.append(input, label)
145144
fieldset.append(div)
146145
})
@@ -223,7 +222,7 @@ function updateWeight(event, form) {
223222
websiteData.italic ? "1" : "0"
224223
}`
225224

226-
// console.log(downloadSettingsCustom)
225+
console.log(downloadSettingsCustom)
227226

228227
if (event) event.preventDefault()
229228
}
@@ -318,3 +317,36 @@ function updateExampleSettings(event, form, isDefault) {
318317
function areObjectsIdentical(obj1, obj2) {
319318
return JSON.stringify(obj1) === JSON.stringify(obj2)
320319
}
320+
321+
async function uploadCustomSettings(event, fileInput) {
322+
event.stopPropagation()
323+
event.preventDefault()
324+
325+
const file = fileInput.files[0]
326+
const fileType = file.name.split(".").pop()
327+
328+
if (fileType == "json") {
329+
const fileText = await file.text()
330+
const uploadedSettings = JSON.parse(fileText)
331+
console.log(uploadedSettings)
332+
333+
if (uploadedSettings.weight) {
334+
document.forms["weight_form"][`weight_${uploadedSettings.weight}`].checked = true
335+
updateWeight(null, weightForm)
336+
}
337+
if (uploadedSettings.letterSpacing) {
338+
document.forms["letter_spacing_form"][`letter_spacing_${uploadedSettings.letterSpacing}`].checked = true
339+
updateLetterSpacing(null, letterSpacingForm)
340+
}
341+
if (uploadedSettings.lineHeight) {
342+
document.forms["line_height_form"][`line_height_${uploadedSettings.lineHeight}`].checked = true
343+
updateLineHeight(null, lineHeightForm)
344+
}
345+
if (uploadedSettings.alternates) {
346+
Object.entries(uploadedSettings.alternates).forEach(([feature, enabled]) => {
347+
document.forms["examplesettings_form"][`${feature}_${enabled}`].checked = true
348+
})
349+
updateExampleSettings(null, exampleSettingsForm, false)
350+
}
351+
}
352+
}

0 commit comments

Comments
 (0)