mirror of
https://github.com/braver/programmingfonts.git
synced 2024-09-28 22:31:34 +02:00
icons for buttons, implement author filtering
This commit is contained in:
parent
5644f3aa73
commit
56a08e1d9a
87
index.css
87
index.css
@ -193,12 +193,61 @@ label {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
|
fieldset {
|
||||||
|
all: unset;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
all: unset;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 18px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
border: 1px solid #e4e4e4;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
border-right-color: #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
color: #777;
|
||||||
|
|
||||||
|
background: linear-gradient(#fff, #e4e4e4);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
button:active {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
button.selected {
|
||||||
|
background: inherit;
|
||||||
|
border-color: #e4e4e4;
|
||||||
|
color: #2a2a2a;
|
||||||
|
}
|
||||||
|
button path,
|
||||||
|
button rect {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
.toggle {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.toggle button:first-child {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-right-color: #e4e4e4;
|
||||||
|
}
|
||||||
|
.toggle button:not(:first-child) {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
select {
|
select {
|
||||||
all: unset;
|
all: unset;
|
||||||
width: 9em;
|
width: 9em;
|
||||||
padding: 0 .5ex;
|
padding: 0 .5ex;
|
||||||
border: 1px solid #e4e4e4;
|
border: 1px solid #e4e4e4;
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -214,45 +263,15 @@ input[type="number"] {
|
|||||||
margin-left: .5ex;
|
margin-left: .5ex;
|
||||||
padding: 0 .5ex;
|
padding: 0 .5ex;
|
||||||
border: 1px solid #e4e4e4;
|
border: 1px solid #e4e4e4;
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
}
|
}
|
||||||
fieldset {
|
|
||||||
all: unset;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
all: unset;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 .5ex;
|
|
||||||
border: 1px solid #e4e4e4;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #777;
|
|
||||||
position: relative;
|
|
||||||
transition: top .2s ease-in-out;
|
|
||||||
}
|
|
||||||
button:active {
|
|
||||||
top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.toggle button:first-child {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
.toggle button:not(:first-child) {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
button:hover,
|
|
||||||
button.selected,
|
|
||||||
input[type="number"]:hover,
|
input[type="number"]:hover,
|
||||||
input[type="number"]:focus,
|
input[type="number"]:focus,
|
||||||
select:hover,
|
select:hover,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: #777;
|
border-color: #ccc;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
pre,
|
pre,
|
||||||
|
69
index.html
69
index.html
@ -91,26 +91,73 @@
|
|||||||
<article>
|
<article>
|
||||||
<section id="filters">
|
<section id="filters">
|
||||||
<fieldset class="toggle" data-group="style">
|
<fieldset class="toggle" data-group="style">
|
||||||
<button value="sans" style="font-family: Input Mono;">Sans</button>
|
<button value="sans" title="sans">
|
||||||
<button value="serif" style="font-family: cutive;">Serif</button>
|
<svg width="12" height="12" alt="sans" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||||
|
<g transform="matrix(1.64678,0,0,1.64678,-7.09053,3.87857)">
|
||||||
|
<g transform="matrix(12,0,0,12,4.97259,4.38784)">
|
||||||
|
<path d="M0.117,-0.164C0.119,-0.135 0.127,-0.112 0.139,-0.097C0.161,-0.068 0.199,-0.054 0.254,-0.054C0.286,-0.054 0.315,-0.061 0.34,-0.075C0.365,-0.09 0.377,-0.111 0.377,-0.141C0.377,-0.164 0.367,-0.181 0.347,-0.192C0.334,-0.2 0.309,-0.208 0.272,-0.217L0.202,-0.235C0.158,-0.246 0.125,-0.258 0.104,-0.272C0.066,-0.296 0.047,-0.329 0.047,-0.371C0.047,-0.42 0.065,-0.46 0.1,-0.491C0.136,-0.521 0.184,-0.537 0.244,-0.537C0.323,-0.537 0.38,-0.514 0.415,-0.467C0.436,-0.438 0.447,-0.406 0.446,-0.373L0.363,-0.373C0.362,-0.392 0.355,-0.41 0.342,-0.427C0.322,-0.45 0.287,-0.461 0.237,-0.461C0.204,-0.461 0.179,-0.455 0.162,-0.442C0.145,-0.43 0.136,-0.413 0.136,-0.392C0.136,-0.369 0.147,-0.351 0.17,-0.337C0.183,-0.329 0.202,-0.322 0.228,-0.316L0.286,-0.302C0.349,-0.286 0.391,-0.272 0.413,-0.257C0.447,-0.235 0.464,-0.2 0.464,-0.151C0.464,-0.105 0.446,-0.065 0.411,-0.031C0.376,0.003 0.322,0.02 0.25,0.02C0.172,0.02 0.117,0.002 0.084,-0.033C0.052,-0.068 0.035,-0.112 0.032,-0.164L0.117,-0.164Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button value="serif" title="serif">
|
||||||
|
<svg width="12" height="12" alt="serif" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||||
|
<g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)">
|
||||||
|
<g transform="matrix(12,0,0,12,4.29583,4.38784)">
|
||||||
|
<path d="M0.349,-0.491L0.349,-0.513L0.437,-0.513L0.437,-0.343L0.349,-0.343L0.349,-0.374C0.32,-0.416 0.28,-0.437 0.229,-0.437C0.202,-0.437 0.181,-0.431 0.164,-0.419C0.147,-0.408 0.138,-0.393 0.138,-0.374C0.138,-0.357 0.145,-0.344 0.157,-0.335C0.17,-0.326 0.199,-0.317 0.244,-0.31L0.312,-0.297C0.413,-0.278 0.464,-0.229 0.464,-0.148C0.464,-0.101 0.446,-0.063 0.409,-0.034C0.372,-0.006 0.324,0.009 0.263,0.009C0.239,0.009 0.215,0.005 0.192,-0.002C0.169,-0.009 0.149,-0.017 0.134,-0.028L0.134,0L0.044,0L0.044,-0.176L0.134,-0.176L0.134,-0.158C0.139,-0.133 0.152,-0.114 0.175,-0.099C0.198,-0.084 0.224,-0.076 0.254,-0.076C0.287,-0.076 0.313,-0.082 0.332,-0.094C0.35,-0.105 0.36,-0.122 0.36,-0.145C0.36,-0.162 0.352,-0.174 0.337,-0.182C0.322,-0.191 0.292,-0.199 0.247,-0.208L0.195,-0.219C0.143,-0.23 0.105,-0.248 0.081,-0.273C0.057,-0.298 0.045,-0.331 0.045,-0.37C0.045,-0.402 0.054,-0.429 0.072,-0.452C0.089,-0.475 0.112,-0.492 0.14,-0.503C0.167,-0.514 0.196,-0.52 0.225,-0.52C0.274,-0.52 0.316,-0.51 0.349,-0.491Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="toggle" data-group="rendering">
|
<fieldset class="toggle" data-group="rendering">
|
||||||
<button value="vector" style="font-family: Input Mono;">Vector</button>
|
<button value="vector" title="vector">
|
||||||
<button value="bitmap" style="font-family: fixedsys;" class="no-smooth">Bitmap</button>
|
<svg width="12" height="12" alt="vector" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||||
|
<g transform="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)">
|
||||||
|
<g transform="matrix(12,0,0,12,4.2929,4.38784)">
|
||||||
|
<path d="M0.128,-0.476L0.251,-0.208L0.374,-0.476L0.498,-0.476L0.25,0.033L0.005,-0.476L0.128,-0.476Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button value="bitmap" title="bitmap">
|
||||||
|
<svg width="12" height="12" alt="bitmap" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||||
|
<path d="M4,9L8,9L8,11L4,11L4,9ZM2,1L4,1L4,11L2,11L2,1ZM8,7L10,7L10,9L8,9L8,7ZM4,5L8,5L8,7L4,7L4,5ZM8,3L10,3L10,5L8,5L8,3ZM4,1L8,1L8,3L4,3L4,1Z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="toggle" data-group="liga">
|
<fieldset class="toggle" data-group="liga">
|
||||||
<button value="no" style="font-family: Input Mono;">=></button>
|
<button value="no" title="no ligatures">
|
||||||
<button value="yes" style="font-family: firacode;">=></button>
|
<svg width="12" height="12" alt="no ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||||
|
<g transform="matrix(0.829577,0,0,0.829577,-2.51769,4.72923)">
|
||||||
|
<g transform="matrix(12,0,0,12,3.03411,5.29647)">
|
||||||
|
<rect x="0.05" y="-0.374" width="0.518" height="0.121" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(12,0,0,12,10.4521,5.29647)">
|
||||||
|
<path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
<button value="yes">
|
||||||
|
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||||
|
<g>
|
||||||
|
<path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<!-- <select id="authors-list">
|
<select id="authors-list">
|
||||||
<optgroup>
|
<optgroup>
|
||||||
<option>All</option>
|
<option value="all">All Authors</option>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
<optgroup>
|
<optgroup class="other">
|
||||||
<optgroup>Other</optgroup>
|
<!-- filled from json -->
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
<input type="text"> -->
|
<input type="text">
|
||||||
</section>
|
</section>
|
||||||
<section class="select-list" tabindex="0">
|
<section class="select-list" tabindex="0">
|
||||||
<div id="select-font">
|
<div id="select-font">
|
||||||
|
22
index.js
22
index.js
@ -18,7 +18,7 @@ var filters = {
|
|||||||
'style': false,
|
'style': false,
|
||||||
'rendering': false,
|
'rendering': false,
|
||||||
'liga': false,
|
'liga': false,
|
||||||
'author': false,
|
'author': 'all',
|
||||||
'name': false
|
'name': false
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -103,12 +103,24 @@ function renderSelectList() {
|
|||||||
|
|
||||||
$.getJSON('fonts.json', function(data) {
|
$.getJSON('fonts.json', function(data) {
|
||||||
var fonts = [];
|
var fonts = [];
|
||||||
|
var authors = [];
|
||||||
font_data = data;
|
font_data = data;
|
||||||
|
|
||||||
$.each(font_data, function(k, v) {
|
$.each(font_data, function(k, v) {
|
||||||
var font_props = v;
|
var font_props = v;
|
||||||
font_props.alias = k;
|
font_props.alias = k;
|
||||||
fonts.push(v);
|
fonts.push(v);
|
||||||
|
if (authors.indexOf(v.author) < 0) {
|
||||||
|
authors.push(v.author);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
authors.sort();
|
||||||
|
|
||||||
|
$.each(authors, function(iteration, author) {
|
||||||
|
$('#authors-list .other').append(
|
||||||
|
'<option>' + author + '</option>'
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
fonts.sort(function(a, b) {
|
fonts.sort(function(a, b) {
|
||||||
@ -247,7 +259,8 @@ function applyFilters() {
|
|||||||
if (
|
if (
|
||||||
(!filters.style || data.style === filters.style) &&
|
(!filters.style || data.style === filters.style) &&
|
||||||
(!filters.rendering || data.rendering === filters.rendering) &&
|
(!filters.rendering || data.rendering === filters.rendering) &&
|
||||||
(!filters.liga || data.ligatures === false && filters.liga === 'no' || data.ligatures === true && filters.liga === 'yes')
|
(!filters.liga || data.ligatures === false && filters.liga === 'no' || data.ligatures === true && filters.liga === 'yes') &&
|
||||||
|
(filters.author === 'all' || data.author === filters.author)
|
||||||
) {
|
) {
|
||||||
$(element).removeClass('filtered-out');
|
$(element).removeClass('filtered-out');
|
||||||
count++;
|
count++;
|
||||||
@ -261,7 +274,6 @@ function applyFilters() {
|
|||||||
} else {
|
} else {
|
||||||
$('h1 a').text(count + ' Programming Fonts');
|
$('h1 a').text(count + ' Programming Fonts');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFilter(filter, group) {
|
function toggleFilter(filter, group) {
|
||||||
@ -326,6 +338,10 @@ $(document).ready(function() {
|
|||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
toggleFilter(button.val(), button_group);
|
toggleFilter(button.val(), button_group);
|
||||||
});
|
});
|
||||||
|
$('#authors-list').on('change', function() {
|
||||||
|
filters.author = $(this).val();
|
||||||
|
applyFilters();
|
||||||
|
});
|
||||||
|
|
||||||
$('body').on('keydown', function(event) {
|
$('body').on('keydown', function(event) {
|
||||||
if (
|
if (
|
||||||
|
Loading…
Reference in New Issue
Block a user