add name filtering/search
This commit is contained in:
Koen Lageveen
parent
56a08e1d9a
commit
9ca6ec569c
16
index.css
16
index.css
|
|
@ -71,11 +71,18 @@ section.config {
|
|||
display: grid;
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
|
||||
section#filters {
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
section#filters input,
|
||||
section#filters select {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section.config > * {
|
||||
|
|
@ -195,6 +202,7 @@ label {
|
|||
}
|
||||
fieldset {
|
||||
all: unset;
|
||||
display: flex;
|
||||
}
|
||||
button {
|
||||
all: unset;
|
||||
|
|
@ -222,7 +230,7 @@ button:active {
|
|||
box-shadow: none;
|
||||
}
|
||||
button.selected {
|
||||
background: inherit;
|
||||
background: #fff;
|
||||
border-color: #e4e4e4;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
|
@ -257,6 +265,10 @@ select option {
|
|||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
input[type="text"] {
|
||||
line-height: 12px;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
all: unset;
|
||||
width: 4em;
|
||||
|
|
@ -267,6 +279,8 @@ input[type="number"] {
|
|||
text-align: left;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
input[type="text"]:hover,
|
||||
input[type="text"]:focus,
|
||||
input[type="number"]:hover,
|
||||
input[type="number"]:focus,
|
||||
select:hover,
|
||||
|
|
|
|||
24
index.html
24
index.html
|
|
@ -149,15 +149,19 @@
|
|||
</svg>
|
||||
</button>
|
||||
</fieldset>
|
||||
<select id="authors-list">
|
||||
<optgroup>
|
||||
<option value="all">All Authors</option>
|
||||
</optgroup>
|
||||
<optgroup class="other">
|
||||
<!-- filled from json -->
|
||||
</optgroup>
|
||||
</select>
|
||||
<input type="text">
|
||||
<fieldset>
|
||||
<select id="authors-list">
|
||||
<optgroup>
|
||||
<option value="all">All Authors</option>
|
||||
</optgroup>
|
||||
<optgroup class="other">
|
||||
<!-- filled from json -->
|
||||
</optgroup>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input type="text" id="name-search" placeholder="Search">
|
||||
</fieldset>
|
||||
</section>
|
||||
<section class="select-list" tabindex="0">
|
||||
<div id="select-font">
|
||||
|
|
@ -243,7 +247,7 @@
|
|||
<footer>
|
||||
<h1><a href="http://programmingfonts.org">Programming Fonts</a></h1>
|
||||
<p>
|
||||
Test drive over 80 free programming fonts!
|
||||
Test drive all the free programming fonts!
|
||||
<br>
|
||||
<a href="https://github.com/braver/programmingfonts"><svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
|
||||
</p>
|
||||
|
|
|
|||
25
index.js
25
index.js
|
|
@ -19,7 +19,7 @@ var filters = {
|
|||
'rendering': false,
|
||||
'liga': false,
|
||||
'author': 'all',
|
||||
'name': false
|
||||
'name': ''
|
||||
};
|
||||
|
||||
function selectTheme() {
|
||||
|
|
@ -81,6 +81,13 @@ function selectLanguage() {
|
|||
editor.setOption('mode', lang.toLowerCase());
|
||||
document.cookie = 'language=' + lang + ';max-age=172800';
|
||||
}
|
||||
function setCounter(amount) {
|
||||
if (amount === 1) {
|
||||
$('h1 a').text(amount + ' Programming Font');
|
||||
} else {
|
||||
$('h1 a').text(amount + ' Programming Fonts');
|
||||
}
|
||||
}
|
||||
|
||||
function renderSelectList() {
|
||||
var icon = '<svg class="octicon" viewBox="0 0 12 14" version="1.1" width="12" height="14" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>';
|
||||
|
|
@ -154,6 +161,7 @@ function renderSelectList() {
|
|||
);
|
||||
});
|
||||
selectFont();
|
||||
setCounter($('.entry[data-alias]').length);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -260,7 +268,8 @@ function applyFilters() {
|
|||
(!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') &&
|
||||
(filters.author === 'all' || data.author === filters.author)
|
||||
(filters.author === 'all' || data.author === filters.author) &&
|
||||
(!filters.name || data.name.toLowerCase().indexOf(filters.name) > -1)
|
||||
) {
|
||||
$(element).removeClass('filtered-out');
|
||||
count++;
|
||||
|
|
@ -269,11 +278,7 @@ function applyFilters() {
|
|||
}
|
||||
});
|
||||
|
||||
if (count === 1) {
|
||||
$('h1 a').text(count + ' Programming Font');
|
||||
} else {
|
||||
$('h1 a').text(count + ' Programming Fonts');
|
||||
}
|
||||
setCounter(count);
|
||||
}
|
||||
|
||||
function toggleFilter(filter, group) {
|
||||
|
|
@ -315,11 +320,11 @@ $(document).ready(function() {
|
|||
$('#select-language').val(cookieValueLanguage);
|
||||
}
|
||||
|
||||
renderSelectList();
|
||||
selectTheme();
|
||||
setSize();
|
||||
setSpacing();
|
||||
selectLanguage();
|
||||
renderSelectList();
|
||||
|
||||
$('#theme-next').click(function() {
|
||||
$('#select-theme :selected').next().prop('selected', true);
|
||||
|
|
@ -342,6 +347,10 @@ $(document).ready(function() {
|
|||
filters.author = $(this).val();
|
||||
applyFilters();
|
||||
});
|
||||
$('#name-search').on('keyup', function() {
|
||||
filters.name = $(this).val().toLowerCase();
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
$('body').on('keydown', function(event) {
|
||||
if (
|
||||
|
|
|
|||
Loading…
Reference in New Issue