mirror of
https://github.com/eigilnikolajsen/commit-mono.git
synced 2024-11-20 20:42:17 +03:00
load settings from file
This commit is contained in:
Eigil Nikolajsen
parent
6dd6510a9e
commit
1beea44369
23
index.html
23
index.html
@ -158,9 +158,8 @@
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h1 tabindex="0" data-edit="true">
|
||||
Commit Mono. <br />Neutral programming typeface.
|
||||
</h1>
|
||||
<h1 tabindex="0" data-edit="true">Commit Mono.</h1>
|
||||
<h1 tabindex="0" data-edit="true">Neutral programming typeface.</h1>
|
||||
<br />
|
||||
<p tabindex="0" data-edit="true">
|
||||
Commit Mono is an anonymous and neutral coding font focused on creating a better
|
||||
@ -587,7 +586,6 @@
|
||||
<button class="download_button" onclick="downloadFont('dev', this)" tabindex="0">
|
||||
Download custom for dev
|
||||
</button>
|
||||
<br />
|
||||
<p>
|
||||
Recommended download of style group with your custom settings for development.
|
||||
</p>
|
||||
@ -595,7 +593,6 @@
|
||||
<button class="download_button" onclick="downloadFont('design', this)" tabindex="0">
|
||||
Download custom for design
|
||||
</button>
|
||||
<br />
|
||||
<p>
|
||||
Download all 34 cuts with your custom settings + source variable fonts (.tff &
|
||||
.woff2) for design. Variable fonts don’t contain custom settings. Use these
|
||||
@ -603,6 +600,22 @@
|
||||
<span id="custom_feature_code" tabindex="0" data-edit="true"></span>
|
||||
</p>
|
||||
<br />
|
||||
<input
|
||||
type="file"
|
||||
name="font_settings_file"
|
||||
id="font_settings_file"
|
||||
accept=".json, application/json"
|
||||
tabindex="0"
|
||||
onchange="uploadCustomSettings(event, this)"
|
||||
/>
|
||||
<label for="font_settings_file" class="download_button"
|
||||
>Retrieve custom settings</label
|
||||
>
|
||||
<p>
|
||||
Upload the ‘custom-settings.json’ file from a previous version to retrieve
|
||||
custom settings from that download.
|
||||
</p>
|
||||
<p id="custom_settings_feedback"><br /></p>
|
||||
<br />
|
||||
<p tabindex="0" data-edit="true">
|
||||
Changing the settings above changes the download. Recommended weight: 450 for
|
||||
|
||||
@ -18,7 +18,8 @@ form > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form input {
|
||||
form input,
|
||||
input[type="file"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--text);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
#section_7 #alternates_container fieldset,
|
||||
#section_7 #features_container fieldset {
|
||||
display: grid;
|
||||
grid-template-columns: 21ch 3ch 3ch;
|
||||
grid-template-columns: 28ch 3ch 3ch;
|
||||
gap: 2ch;
|
||||
}
|
||||
|
||||
@ -139,3 +139,20 @@ input[type="text"] + p {
|
||||
display: inline-block;
|
||||
margin-left: 0ch;
|
||||
}
|
||||
|
||||
.file_label {
|
||||
height: 1rem;
|
||||
border: 1px solid var(--text);
|
||||
background-color: var(--bg);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
padding: 0 0.5ch;
|
||||
}
|
||||
|
||||
input[type="file"]:focus + label {
|
||||
background-color: var(--text);
|
||||
color: var(--bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
main {
|
||||
min-width: 100vw;
|
||||
width: fit-content;
|
||||
padding: 4rem 2ch 0 4ch;
|
||||
padding: 4rem 4ch 0 4ch;
|
||||
}
|
||||
|
||||
header nav {
|
||||
@ -57,6 +57,18 @@ header #keyboard_section {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
main {
|
||||
padding: 4rem 2ch 0 2ch;
|
||||
}
|
||||
header nav {
|
||||
padding: 1rem 2ch 0 2ch;
|
||||
}
|
||||
header #keyboard_section {
|
||||
padding: 0.25rem 2ch 1rem 2ch;
|
||||
}
|
||||
}
|
||||
|
||||
header #keyboard_section,
|
||||
header nav {
|
||||
overflow-y: scroll;
|
||||
@ -346,3 +358,10 @@ input:focus + .shake_down {
|
||||
.nav_button:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
br {
|
||||
line-height: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ const downloadSettingsCustom = {
|
||||
alternates: {},
|
||||
features: {},
|
||||
letterSpacing: 0,
|
||||
lineHeight: 0,
|
||||
lineHeight: 1,
|
||||
}
|
||||
const downloadSettingsDefault = {
|
||||
weight: 450,
|
||||
@ -12,7 +12,7 @@ const downloadSettingsDefault = {
|
||||
alternates: {},
|
||||
features: {},
|
||||
letterSpacing: 0,
|
||||
lineHeight: 0,
|
||||
lineHeight: 1,
|
||||
}
|
||||
const fontFileBlobs = { regular: null, italic: null, bold: null, bolditalic: null }
|
||||
|
||||
@ -307,7 +307,7 @@ function makeCustomFont(settings) {
|
||||
async function getZipFileBlob(kindOfDownload, fonts) {
|
||||
// console.log(fontFileBlobs, fonts)
|
||||
|
||||
const { BlobWriter, BlobReader, HttpReader, ZipWriter } = zip
|
||||
const { BlobWriter, BlobReader, HttpReader, ZipWriter, TextReader } = zip
|
||||
const zipFileWriter = new BlobWriter()
|
||||
const zipWriter = new ZipWriter(zipFileWriter)
|
||||
|
||||
@ -326,6 +326,7 @@ async function getZipFileBlob(kindOfDownload, fonts) {
|
||||
new HttpReader(`/src/fonts/CommitMono${versionOfCommitMono}-VF.woff2`)
|
||||
),
|
||||
zipWriter.add("installation.txt", new HttpReader("/src/txt/installation.txt")),
|
||||
zipWriter.add("custom-settings.json", new TextReader(JSON.stringify(downloadSettingsCustom))),
|
||||
zipWriter.add("license.txt", new HttpReader("/src/txt/license.txt")),
|
||||
])
|
||||
const zipFileBlob = await zipWriter.close()
|
||||
|
||||
@ -123,7 +123,7 @@ function buildExample() {
|
||||
const fieldset = document.createElement("fieldset")
|
||||
const duo = [0, 0]
|
||||
const p = document.createElement("p")
|
||||
p.textContent = feature.label
|
||||
p.textContent = `${feature.feature}: ${feature.label}`
|
||||
p.id = `alt_${feature.name}`
|
||||
fieldset.append(p)
|
||||
duo.forEach((_, index) => {
|
||||
@ -131,16 +131,15 @@ function buildExample() {
|
||||
const input = document.createElement("input")
|
||||
input.type = "radio"
|
||||
input.name = feature.name
|
||||
input.id = `${feature.name}${index}`
|
||||
input.id = `${feature.feature}_${!!index}`
|
||||
input.value = `'${feature.feature}' ${index == 0 ? "off" : "on"}`
|
||||
input.dataset.forform = "examplesettings_form"
|
||||
// input.tabIndex = 0
|
||||
if (!feature.on && index == 0) input.setAttribute("checked", "true")
|
||||
if (feature.on && index == 1) input.setAttribute("checked", "true")
|
||||
const label = document.createElement("label")
|
||||
if (feature.type == "feature") label.textContent = index == 0 ? "OFF" : "ON"
|
||||
if (feature.type == "alternate") label.textContent = index == 0 ? "DEF" : "ALT"
|
||||
label.setAttribute("for", `${feature.name}${index}`)
|
||||
label.setAttribute("for", `${feature.feature}_${!!index}`)
|
||||
div.append(input, label)
|
||||
fieldset.append(div)
|
||||
})
|
||||
@ -223,7 +222,7 @@ function updateWeight(event, form) {
|
||||
websiteData.italic ? "1" : "0"
|
||||
}`
|
||||
|
||||
// console.log(downloadSettingsCustom)
|
||||
console.log(downloadSettingsCustom)
|
||||
|
||||
if (event) event.preventDefault()
|
||||
}
|
||||
@ -318,3 +317,36 @@ function updateExampleSettings(event, form, isDefault) {
|
||||
function areObjectsIdentical(obj1, obj2) {
|
||||
return JSON.stringify(obj1) === JSON.stringify(obj2)
|
||||
}
|
||||
|
||||
async function uploadCustomSettings(event, fileInput) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
const file = fileInput.files[0]
|
||||
const fileType = file.name.split(".").pop()
|
||||
|
||||
if (fileType == "json") {
|
||||
const fileText = await file.text()
|
||||
const uploadedSettings = JSON.parse(fileText)
|
||||
console.log(uploadedSettings)
|
||||
|
||||
if (uploadedSettings.weight) {
|
||||
document.forms["weight_form"][`weight_${uploadedSettings.weight}`].checked = true
|
||||
updateWeight(null, weightForm)
|
||||
}
|
||||
if (uploadedSettings.letterSpacing) {
|
||||
document.forms["letter_spacing_form"][`letter_spacing_${uploadedSettings.letterSpacing}`].checked = true
|
||||
updateLetterSpacing(null, letterSpacingForm)
|
||||
}
|
||||
if (uploadedSettings.lineHeight) {
|
||||
document.forms["line_height_form"][`line_height_${uploadedSettings.lineHeight}`].checked = true
|
||||
updateLineHeight(null, lineHeightForm)
|
||||
}
|
||||
if (uploadedSettings.alternates) {
|
||||
Object.entries(uploadedSettings.alternates).forEach(([feature, enabled]) => {
|
||||
document.forms["examplesettings_form"][`${feature}_${enabled}`].checked = true
|
||||
})
|
||||
updateExampleSettings(null, exampleSettingsForm, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user