first pass implementing filters
This commit is contained in:
parent
1862c4bd3e
commit
9cb19c405c
54
index.css
54
index.css
|
@ -36,6 +36,10 @@ a:active {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
.no-smooth {
|
||||||
|
font-smooth: never;
|
||||||
|
-webkit-font-smoothing: none;
|
||||||
|
}
|
||||||
.octicon {
|
.octicon {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
@ -56,25 +60,31 @@ article {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
section {
|
section {
|
||||||
flex: 1;
|
flex: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
section#filters,
|
||||||
section.config {
|
section.config {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
flex: 0;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column-gap: 5px;
|
grid-column-gap: 5px;
|
||||||
grid-row-gap: 5px;
|
grid-row-gap: 5px;
|
||||||
grid-template-columns: auto auto auto auto;
|
grid-template-columns: auto auto auto auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section#filters {
|
||||||
|
grid-template-columns: auto auto auto auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
section.config > * {
|
section.config > * {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
section.select-list {
|
section.select-list {
|
||||||
|
flex: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
@ -89,6 +99,9 @@ section.select-list .entry {
|
||||||
section.select-list .entry:hover {
|
section.select-list .entry:hover {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
section.select-list .entry.filtered-out {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
section.select-list a[data-value] {
|
section.select-list a[data-value] {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -158,7 +171,6 @@ section.select-list .details {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
flex: 0;
|
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -205,11 +217,43 @@ input[type="number"] {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
text-align: left;
|
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"]:hover,
|
||||||
input[type="number"]:focus,
|
input[type="number"]:focus,
|
||||||
select:hover,
|
select:hover,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: #777;
|
border-color: #777;
|
||||||
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
pre,
|
pre,
|
||||||
textarea,
|
textarea,
|
||||||
|
@ -244,10 +288,6 @@ label[for="select-theme"] {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
.CodeMirror.no-smooth {
|
|
||||||
font-smooth: never;
|
|
||||||
-webkit-font-smoothing: none;
|
|
||||||
}
|
|
||||||
.CodeMirror .cm-atom {
|
.CodeMirror .cm-atom {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
23
index.html
23
index.html
|
@ -89,6 +89,29 @@
|
||||||
|
|
||||||
<div class="article-wrapper">
|
<div class="article-wrapper">
|
||||||
<article>
|
<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">
|
<section class="select-list" tabindex="0">
|
||||||
<div id="select-font">
|
<div id="select-font">
|
||||||
<!-- filled from json -->
|
<!-- 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 input = document.getElementById('select-theme');
|
||||||
|
|
||||||
var font_data = {};
|
var font_data = {};
|
||||||
|
var filters = {
|
||||||
|
'style': false,
|
||||||
|
'rendering': false,
|
||||||
|
'liga': false,
|
||||||
|
'author': false,
|
||||||
|
'name': false
|
||||||
|
};
|
||||||
|
|
||||||
function selectTheme() {
|
function selectTheme() {
|
||||||
var theme = 'monokai';
|
var theme = 'monokai';
|
||||||
|
@ -191,6 +198,92 @@ function decreaseFontSize() {
|
||||||
sizeEl.onchange();
|
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() {
|
$(document).ready(function() {
|
||||||
var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
||||||
var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
||||||
|
@ -226,6 +319,14 @@ $(document).ready(function() {
|
||||||
selectTheme();
|
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) {
|
$('body').on('keydown', function(event) {
|
||||||
if (
|
if (
|
||||||
event.target === document.querySelector('.select-list')
|
event.target === document.querySelector('.select-list')
|
||||||
|
|
Loading…
Reference in New Issue