clp/font-picker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Put the file links code back in.

Browse source 
I reloaded the editor and lost it!
This commit is contained in:
Christian Lawson-Perfect 2025-03-20 13:27:00 +00:00
parent a4b046a784
commit 2737afdc15
2 changed files with 44 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

58
script.js
View file

@ -35,32 +35,37 @@ function element(name, attr, content) {
return el; return el;
} }
const css_template = (info,range,weight,style,variable_info) => { function variable_font_url(info,range,axis,style) {
return `https://cdn.jsdelivr.net/fontsource/fonts/${info.id}:vf@latest/${range}-${axis}-${style}.woff2`
}
function get_variable_axis(variable_info) {
const axes = Object.keys(variable_info.axes || {}).filter(a=>a!='ital'); const axes = Object.keys(variable_info.axes || {}).filter(a=>a!='ital');
function get_axis() { if (axes.length === 1 && axes[0]=='wght') {
if (axes.length === 1 && axes[0]=='wght') { return 'wght';
return 'wght';
}
if (axes.length === 2 && axes.includes('wght')) {
const selected =
axes.find((axis) => axis !== 'wght')?.toLowerCase() ?? 'wght';
return selected;
}
const isStandard = axes.every((axis) =>
['wght', 'wdth', 'slnt', 'opsz'].includes(axis),
);
return isStandard ? 'standard' : 'full';
} }
const axis = get_axis(); if (axes.length === 2 && axes.includes('wght')) {
const selected =
axes.find((axis) => axis !== 'wght')?.toLowerCase() ?? 'wght';
return selected;
}
const isStandard = axes.every((axis) =>
['wght', 'wdth', 'slnt', 'opsz'].includes(axis),
);
return isStandard ? 'standard' : 'full';
}
const css_template = (info,range,weight,style,variable_info) => {
const axes = Object.keys(variable_info.axes || {}).filter(a=>a!='ital');
const axis = get_variable_axis(variable_info);
let urls; let urls;
if(info.variable) { if(info.variable) {
urls = [`url(https://cdn.jsdelivr.net/fontsource/fonts/${info.id}:vf@latest/${range}-${axis}-${style}.woff2) format('woff2-variations')`]; urls = [`url(${variable_font_url(info,range,axis,style)}) format('woff2-variations')`];
} else { } else {
const variant = info.variants[weight][style][range]; const variant = info.variants[weight][style][range];
urls = Object.entries(variant.url).map(([format,url]) => { urls = Object.entries(variant.url).map(([format,url]) => {
@ -182,7 +187,7 @@ async function go() {
document.body.scrollTop = 0; document.body.scrollTop = 0;
} }
document.body.style.setProperty('--family',info.family); document.body.style.setProperty('--family',`"${info.family}"`);
function show_list(id, list, style_fn, text_fn) { function show_list(id, list, style_fn, text_fn) {
text_fn = text_fn || (v => v); text_fn = text_fn || (v => v);
@ -261,6 +266,9 @@ async function go() {
} }
update_variables(); update_variables();
} }
const file_list = document.getElementById('file-links');
file_list.innerHTML = '';
const css_declarations = []; const css_declarations = [];
if(info.variable) { if(info.variable) {
@ -268,6 +276,9 @@ async function go() {
for(let range of info.subsets) { for(let range of info.subsets) {
const css = css_template(info, range, '', style, variable_info); const css = css_template(info, range, '', style, variable_info);
css_declarations.push(css); css_declarations.push(css);
const li = element('li',{}, `<a href="${variable_font_url(info,range,get_variable_axis(variable_info),style)}">${range} ${style}</a>`)
file_list.append(li);
} }
} }
@ -277,6 +288,15 @@ async function go() {
for(let range of info.subsets) { for(let range of info.subsets) {
const css = css_template(info, range, weight, style, variable_info); const css = css_template(info, range, weight, style, variable_info);
css_declarations.push(css); css_declarations.push(css);
const variant = info.variants[weight][style][range];
const ul = element('ul');
file_list.append(ul);
Object.entries(variant.url).forEach(([format,url]) => {
const li = element('li',{}, `<a href="${url}">${weight} ${style} ${range} (${format})</a>`);
ul.append(li);
});
} }
} }
} }

5
style.css
View file

@ -98,4 +98,9 @@ dt {
#css-display { #css-display {
margin: 0; margin: 0;
}
#file-links ul + ul {
margin-top: var(--spacing);
} }