first pass implementing filters
This commit is contained in:
Koen Lageveen
parent
1862c4bd3e
commit
9cb19c405c
54
index.css
54
index.css
|
|
@ -36,6 +36,10 @@ a:active {
|
|||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.no-smooth {
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
.octicon {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
@ -56,25 +60,31 @@ article {
|
|||
width: 100%;
|
||||
}
|
||||
section {
|
||||
flex: 1;
|
||||
flex: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
section#filters,
|
||||
section.config {
|
||||
font-size: 10px;
|
||||
background: #eee;
|
||||
flex: 0;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
|
||||
section#filters {
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
}
|
||||
|
||||
section.config > * {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
section.select-list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
|
@ -89,6 +99,9 @@ section.select-list .entry {
|
|||
section.select-list .entry:hover {
|
||||
background: #fff;
|
||||
}
|
||||
section.select-list .entry.filtered-out {
|
||||
display: none;
|
||||
}
|
||||
section.select-list a[data-value] {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -158,7 +171,6 @@ section.select-list .details {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
footer {
|
||||
flex: 0;
|
||||
padding: 5px 10px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
|
|
@ -205,11 +217,43 @@ input[type="number"] {
|
|||
border-radius: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
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"]:focus,
|
||||
select:hover,
|
||||
select:focus {
|
||||
border-color: #777;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
pre,
|
||||
textarea,
|
||||
|
|
@ -244,10 +288,6 @@ label[for="select-theme"] {
|
|||
min-height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.CodeMirror.no-smooth {
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
.CodeMirror .cm-atom {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
23
index.html
23
index.html
|
|
@ -89,6 +89,29 @@
|
|||
|
||||
<div class="article-wrapper">
|
||||
<article>
|
||||
<section id="filters">
|
||||
<fieldset class="toggle" data-group="style">
|
||||
<button value="sans" style="font-family: Input Mono;">Sans</button>
|
||||
<button value="serif" style="font-family: cutive;">Serif</button>
|
||||
</fieldset>
|
||||
<fieldset class="toggle" data-group="rendering">
|
||||
<button value="vector" style="font-family: Input Mono;">Vector</button>
|
||||
<button value="bitmap" style="font-family: fixedsys;" class="no-smooth">Bitmap</button>
|
||||
</fieldset>
|
||||
<fieldset class="toggle" data-group="liga">
|
||||
<button value="no" style="font-family: Input Mono;">=></button>
|
||||
<button value="yes" style="font-family: firacode;">=></button>
|
||||
</fieldset>
|
||||
<!-- <select id="authors-list">
|
||||
<optgroup>
|
||||
<option>All</option>
|
||||
</optgroup>
|
||||
<optgroup>
|
||||
<optgroup>Other</optgroup>
|
||||
</optgroup>
|
||||
</select>
|
||||
<input type="text"> -->
|
||||
</section>
|
||||
<section class="select-list" tabindex="0">
|
||||
<div id="select-font">
|
||||
<!-- filled from json -->
|
||||
|
|
|
|||
101
index.js
101
index.js
|
|
@ -14,6 +14,13 @@ var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
|
|||
var input = document.getElementById('select-theme');
|
||||
|
||||
var font_data = {};
|
||||
var filters = {
|
||||
'style': false,
|
||||
'rendering': false,
|
||||
'liga': false,
|
||||
'author': false,
|
||||
'name': false
|
||||
};
|
||||
|
||||
function selectTheme() {
|
||||
var theme = 'monokai';
|
||||
|
|
@ -191,6 +198,92 @@ function decreaseFontSize() {
|
|||
sizeEl.onchange();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
var count = 0;
|
||||
switch (filters.style) {
|
||||
case 'sans':
|
||||
$('[data-group="style"] [value="sans"]').addClass('selected');
|
||||
$('[data-group="style"] [value="serif"]').removeClass('selected');
|
||||
break;
|
||||
case 'serif':
|
||||
$('[data-group="style"] [value="sans"]').removeClass('selected');
|
||||
$('[data-group="style"] [value="serif"]').addClass('selected');
|
||||
break;
|
||||
default:
|
||||
$('[data-group="style"] [value="sans"]').removeClass('selected');
|
||||
$('[data-group="style"] [value="serif"]').removeClass('selected');
|
||||
}
|
||||
|
||||
switch (filters.rendering) {
|
||||
case 'vector':
|
||||
$('[data-group="rendering"] [value="vector"]').addClass('selected');
|
||||
$('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
|
||||
break;
|
||||
case 'bitmap':
|
||||
$('[data-group="rendering"] [value="vector"]').removeClass('selected');
|
||||
$('[data-group="rendering"] [value="bitmap"]').addClass('selected');
|
||||
break;
|
||||
default:
|
||||
$('[data-group="rendering"] [value="vector"]').removeClass('selected');
|
||||
$('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
|
||||
}
|
||||
|
||||
switch (filters.liga) {
|
||||
case 'yes':
|
||||
$('[data-group="liga"] [value="yes"]').addClass('selected');
|
||||
$('[data-group="liga"] [value="no"]').removeClass('selected');
|
||||
break;
|
||||
case 'no':
|
||||
$('[data-group="liga"] [value="yes"]').removeClass('selected');
|
||||
$('[data-group="liga"] [value="no"]').addClass('selected');
|
||||
break;
|
||||
default:
|
||||
$('[data-group="liga"] [value="yes"]').removeClass('selected');
|
||||
$('[data-group="liga"] [value="no"]').removeClass('selected');
|
||||
}
|
||||
|
||||
$('.entry[data-alias]').each(function(iteration, element) {
|
||||
var data = font_data[$(element).data().alias];
|
||||
if (
|
||||
(!filters.style || data.style === filters.style) &&
|
||||
(!filters.rendering || data.rendering === filters.rendering) &&
|
||||
(!filters.liga || data.ligatures === false && filters.liga === 'no' || data.ligatures === true && filters.liga === 'yes')
|
||||
) {
|
||||
$(element).removeClass('filtered-out');
|
||||
count++;
|
||||
} else {
|
||||
$(element).addClass('filtered-out');
|
||||
}
|
||||
});
|
||||
|
||||
if (count === 1) {
|
||||
$('h1 a').text(count + ' Programming Font');
|
||||
} else {
|
||||
$('h1 a').text(count + ' Programming Fonts');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function toggleFilter(value, group) {
|
||||
function toggleValue(name, value) {
|
||||
if (filters[name] == value) {
|
||||
filters[name] = false;
|
||||
} else {
|
||||
filters[name] = value;
|
||||
}
|
||||
}
|
||||
|
||||
if (group === 'style') {
|
||||
toggleValue('style', value);
|
||||
} else if (group === 'rendering') {
|
||||
toggleValue('rendering', value);
|
||||
} else if (group === 'liga') {
|
||||
toggleValue('liga', value);
|
||||
}
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
||||
var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
||||
|
|
@ -226,6 +319,14 @@ $(document).ready(function() {
|
|||
selectTheme();
|
||||
});
|
||||
|
||||
$('#filters button').on('click', function(event) {
|
||||
var button = $(this);
|
||||
var button_group = button.parent().data().group;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
toggleFilter(button.val(), button_group);
|
||||
});
|
||||
|
||||
$('body').on('keydown', function(event) {
|
||||
if (
|
||||
event.target === document.querySelector('.select-list')
|
||||
|
|
|
|||
Loading…
Reference in New Issue