2019-06-10 10:18:45 +02:00
|
|
|
/* global CodeMirror window document $ Set */
|
2017-09-02 21:26:30 +02:00
|
|
|
/* eslint-disable no-implicit-globals */
|
2017-07-28 23:07:09 +02:00
|
|
|
|
2017-01-20 17:59:59 +01:00
|
|
|
// CodeMirror
|
2019-06-10 10:18:45 +02:00
|
|
|
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
|
|
|
|
lineNumbers: true,
|
|
|
|
styleActiveLine: true,
|
|
|
|
matchBrackets: true,
|
|
|
|
theme: 'pastel-on-dark',
|
|
|
|
lineWrapping: true
|
2017-01-20 17:59:59 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
// CodeMirror theme selector
|
2019-06-10 10:18:45 +02:00
|
|
|
var input = document.getElementById('select-theme');
|
2017-09-02 21:26:30 +02:00
|
|
|
|
2019-06-10 11:04:48 +02:00
|
|
|
var font_data = {};
|
2019-06-10 14:58:21 +02:00
|
|
|
var filters = {
|
|
|
|
'style': false,
|
|
|
|
'rendering': false,
|
|
|
|
'liga': false,
|
2020-08-29 00:17:20 +02:00
|
|
|
'zerostyle': false,
|
2019-06-10 20:29:47 +02:00
|
|
|
'author': 'all',
|
2019-06-10 20:58:18 +02:00
|
|
|
'name': ''
|
2019-06-10 14:58:21 +02:00
|
|
|
};
|
2019-06-10 11:04:48 +02:00
|
|
|
|
2017-01-20 17:59:59 +01:00
|
|
|
function selectTheme() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var theme = 'monokai';
|
2017-09-02 21:26:30 +02:00
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
if (input.selectedIndex > -1) {
|
|
|
|
theme = input.options[input.selectedIndex].innerHTML;
|
|
|
|
}
|
|
|
|
editor.setOption('theme', theme);
|
|
|
|
document.cookie = 'theme=' + theme + ';max-age=172800';
|
2017-01-20 17:59:59 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// ProgrammingFonts font selector
|
|
|
|
function selectFont() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var font = window.location.hash.substring(1);
|
|
|
|
|
|
|
|
if (font === '') {
|
2020-01-12 18:31:00 +01:00
|
|
|
font = 'cartograph';
|
2020-05-20 21:52:21 +02:00
|
|
|
$('footer .subtitle').text('Test drive all the programming fonts!');
|
2019-06-10 21:14:23 +02:00
|
|
|
} else {
|
|
|
|
$('footer .subtitle').html('Test drive <a rel="external" href="' + font_data[font].website + '">' + font_data[font].name + '!</a>');
|
2019-06-10 10:18:45 +02:00
|
|
|
}
|
|
|
|
|
2019-06-10 11:40:44 +02:00
|
|
|
if (font_data[font].rendering === 'bitmap') {
|
|
|
|
$('.CodeMirror').addClass('no-smooth');
|
|
|
|
} else {
|
|
|
|
$('.CodeMirror').removeClass('no-smooth');
|
|
|
|
}
|
2019-06-10 11:04:48 +02:00
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
if (font === 'input') {
|
|
|
|
$('pre').css({ fontFamily: 'Input Mono, monospace' });
|
|
|
|
$('textarea').css({ fontFamily: 'Input Mono, monospace' });
|
|
|
|
$('.CodeMirror').css({ fontFamily: 'Input Mono, monospace' });
|
|
|
|
} else {
|
|
|
|
$('pre').css({ fontFamily: font + ', monospace' });
|
|
|
|
$('textarea').css({ fontFamily: font + ', monospace' });
|
|
|
|
$('.CodeMirror').css({ fontFamily: font + ', monospace' });
|
|
|
|
}
|
2019-06-10 11:50:03 +02:00
|
|
|
$('#select-font [data-alias]').removeClass('active');
|
|
|
|
$('#select-font [data-alias=\'' + font + '\']').addClass('active');
|
2019-06-10 10:18:45 +02:00
|
|
|
|
|
|
|
document.cookie = 'font=' + font + ';max-age=172800';
|
2017-01-20 17:59:59 +01:00
|
|
|
}
|
|
|
|
|
2017-07-28 23:07:09 +02:00
|
|
|
window.onhashchange = selectFont;
|
|
|
|
|
2017-01-20 17:59:59 +01:00
|
|
|
function setSize() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var size = $('#size').val();
|
2017-09-02 21:26:30 +02:00
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
$('.CodeMirror').css({ fontSize: size + 'px' });
|
|
|
|
document.cookie = 'size=' + size + ';max-age=172800';
|
2017-01-20 17:59:59 +01:00
|
|
|
}
|
|
|
|
function setSpacing() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var spacing = $('#spacing').val();
|
2017-09-02 21:26:30 +02:00
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
$('.CodeMirror').css({ lineHeight: spacing });
|
|
|
|
document.cookie = 'spacing=' + spacing + ';max-age=172800';
|
2017-01-20 17:59:59 +01:00
|
|
|
}
|
|
|
|
function selectLanguage() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var lang = $('#select-language').val();
|
2017-09-02 21:26:30 +02:00
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
editor.setOption('mode', lang.toLowerCase());
|
|
|
|
document.cookie = 'language=' + lang + ';max-age=172800';
|
2017-01-20 17:59:59 +01:00
|
|
|
}
|
2019-06-10 20:58:18 +02:00
|
|
|
function setCounter(amount) {
|
|
|
|
if (amount === 1) {
|
2020-01-05 17:39:23 +01:00
|
|
|
$('h1 a:first-child').text(amount + ' Programming Font');
|
2019-06-10 20:58:18 +02:00
|
|
|
} else {
|
2020-01-05 17:39:23 +01:00
|
|
|
$('h1 a:first-child').text(amount + ' Programming Fonts');
|
2019-06-10 20:58:18 +02:00
|
|
|
}
|
|
|
|
}
|
2017-01-20 17:59:59 +01:00
|
|
|
|
2019-10-27 18:35:01 +01:00
|
|
|
function applyFilters() {
|
|
|
|
var count = 0;
|
|
|
|
|
2020-10-07 22:25:17 +02:00
|
|
|
Object.keys(filters).forEach(function(filter) {
|
|
|
|
var button = document.querySelector('button[value="' + filter + '"]');
|
|
|
|
if (! button) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (filters[filter]) {
|
|
|
|
button.classList.add('selected');
|
|
|
|
button.querySelectorAll('svg').forEach(function(image){
|
|
|
|
image.classList.remove('selected');
|
|
|
|
});
|
|
|
|
button.querySelector('svg[alt="' + filters[filter] + '"]').classList.add('selected');
|
|
|
|
} else {
|
|
|
|
button.classList.remove('selected');
|
|
|
|
button.querySelectorAll('svg').forEach(function(image){
|
|
|
|
image.classList.remove('selected');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2020-08-29 00:17:20 +02:00
|
|
|
|
2019-10-27 18:35:01 +01:00
|
|
|
$('.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') &&
|
2020-08-29 00:17:20 +02:00
|
|
|
(!filters.zerostyle || data.zerostyle === filters.zerostyle) &&
|
2019-10-27 18:35:01 +01:00
|
|
|
(filters.author === 'all' || data.author === filters.author) &&
|
|
|
|
(!filters.name || data.name.toLowerCase().indexOf(filters.name) > -1)
|
|
|
|
) {
|
|
|
|
$(element).removeClass('filtered-out');
|
|
|
|
count++;
|
|
|
|
} else {
|
|
|
|
$(element).addClass('filtered-out');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
setCounter(count);
|
|
|
|
}
|
|
|
|
|
2019-01-22 19:45:16 +01:00
|
|
|
function renderSelectList() {
|
2019-06-10 10:18:45 +02:00
|
|
|
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>';
|
|
|
|
var pinIcon = '<svg class="octicon octicon-pin" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1.2V2l.5 1L6 6H2.2c-.44 0-.67.53-.34.86L5 10l-4 5 5-4 3.14 3.14a.5.5 0 0 0 .86-.34V10l3-4.5 1 .5h.8c.44 0 .67-.53.34-.86L10.86.86a.5.5 0 0 0-.86.34z"></path></svg>';
|
|
|
|
var favoritesMap = {};
|
|
|
|
var favorites = [];
|
|
|
|
|
|
|
|
$('#select-font').empty();
|
|
|
|
|
|
|
|
try {
|
|
|
|
favorites = JSON.parse(localStorage.getItem('favorites')) || [];
|
|
|
|
favoritesMap = favorites.reduce(function(acc, alias) {
|
|
|
|
acc[alias] = true;
|
|
|
|
return acc;
|
|
|
|
}, {});
|
|
|
|
} catch (err) {
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
console.error('could not render favorites', err);
|
|
|
|
}
|
|
|
|
|
|
|
|
$.getJSON('fonts.json', function(data) {
|
2019-06-10 11:04:48 +02:00
|
|
|
var fonts = [];
|
2019-06-10 20:29:47 +02:00
|
|
|
var authors = [];
|
2019-06-10 11:04:48 +02:00
|
|
|
font_data = data;
|
|
|
|
|
|
|
|
$.each(font_data, function(k, v) {
|
|
|
|
var font_props = v;
|
|
|
|
font_props.alias = k;
|
|
|
|
fonts.push(v);
|
2019-06-10 20:29:47 +02:00
|
|
|
if (authors.indexOf(v.author) < 0) {
|
|
|
|
authors.push(v.author);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
authors.sort();
|
|
|
|
|
|
|
|
$.each(authors, function(iteration, author) {
|
|
|
|
$('#authors-list .other').append(
|
|
|
|
'<option>' + author + '</option>'
|
|
|
|
);
|
2019-06-10 11:04:48 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
fonts.sort(function(a, b) {
|
2019-06-10 10:18:45 +02:00
|
|
|
if (favoritesMap[a.alias] && !favoritesMap[b.alias]) {return -1;}
|
|
|
|
if (!favoritesMap[a.alias] && favoritesMap[b.alias]) {return 1;}
|
|
|
|
if (a.name.toLowerCase() < b.name.toLowerCase()) {return -1;}
|
|
|
|
if (a.name.toLowerCase() > b.name.toLowerCase()) {return 1;}
|
|
|
|
return 0;
|
|
|
|
});
|
2019-06-10 11:04:48 +02:00
|
|
|
|
|
|
|
$.each(fonts, function(k, v) {
|
2019-06-10 10:18:45 +02:00
|
|
|
var liga_info = '';
|
|
|
|
var render_info = '';
|
|
|
|
|
|
|
|
if (v.ligatures) {
|
|
|
|
liga_info = ', ligatures';
|
|
|
|
}
|
|
|
|
if (v.rendering === 'bitmap') {
|
|
|
|
render_info = ', bitmap';
|
|
|
|
}
|
|
|
|
$('#select-font').append(
|
2020-01-10 21:45:44 +01:00
|
|
|
'<div class="entry' + (favoritesMap[v.alias] ? ' pinned' : '') + '" data-alias="' + v.alias + '">' +
|
2019-06-10 11:50:03 +02:00
|
|
|
'<a href="#' + v.alias + '">' +
|
2019-06-10 11:45:03 +02:00
|
|
|
'<span class="name">' + v.name + '</span>' +
|
|
|
|
'<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
|
2019-06-10 10:18:45 +02:00
|
|
|
'</a>' +
|
2020-01-10 21:45:44 +01:00
|
|
|
'<a class="favoritelink" onclick="toggleFavorite(\'' + v.alias + '\')">' +
|
2019-06-10 10:18:45 +02:00
|
|
|
pinIcon +
|
|
|
|
'</a>' +
|
2019-06-10 11:45:03 +02:00
|
|
|
'<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a></div>'
|
2019-06-10 10:18:45 +02:00
|
|
|
);
|
|
|
|
});
|
|
|
|
selectFont();
|
2019-10-27 18:35:01 +01:00
|
|
|
applyFilters();
|
2019-06-10 10:18:45 +02:00
|
|
|
});
|
2019-01-22 19:45:16 +01:00
|
|
|
}
|
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
// eslint-disable-next-line no-unused-vars
|
2019-01-22 19:45:16 +01:00
|
|
|
function toggleFavorite(alias) {
|
2019-06-10 10:18:45 +02:00
|
|
|
var favorites = [];
|
|
|
|
try {
|
|
|
|
favorites = JSON.parse(localStorage.getItem('favorites')) || [];
|
|
|
|
if (favorites.indexOf(alias) > -1) {
|
|
|
|
favorites = favorites.filter(function(v) {
|
|
|
|
return v !== alias;
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
favorites.push(alias);
|
|
|
|
}
|
|
|
|
localStorage.setItem('favorites', JSON.stringify(Array.from(new Set(favorites))));
|
|
|
|
} catch (err) {
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
console.error('could not save favorite', err);
|
|
|
|
}
|
|
|
|
renderSelectList();
|
|
|
|
return false;
|
2019-01-22 19:45:16 +01:00
|
|
|
}
|
|
|
|
|
2020-10-09 20:32:03 +02:00
|
|
|
function walk(direction) {
|
2019-10-21 20:53:49 +02:00
|
|
|
var activeEntry = document.querySelector('.entry.active');
|
2020-10-09 20:32:03 +02:00
|
|
|
var target = null;
|
|
|
|
var next = direction === 'up' ? activeEntry.previousSibling : activeEntry.nextSibling;
|
|
|
|
|
|
|
|
while (target === null) {
|
|
|
|
if (next) {
|
|
|
|
if (next.matches('.entry:not(.filtered-out)')) {
|
|
|
|
target = next;
|
|
|
|
} else {
|
|
|
|
next = direction === 'up' ? next.previousSibling : next.nextSibling;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
target = false;
|
|
|
|
}
|
2019-06-10 10:18:45 +02:00
|
|
|
}
|
2019-01-23 21:08:51 +01:00
|
|
|
|
2020-10-09 20:32:03 +02:00
|
|
|
if (target) {
|
|
|
|
target.querySelector('a').click();
|
|
|
|
target.scrollIntoView();
|
2019-06-10 10:18:45 +02:00
|
|
|
}
|
2019-01-23 21:08:51 +01:00
|
|
|
}
|
|
|
|
|
2019-01-23 21:18:30 +01:00
|
|
|
function increaseFontSize() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var sizeEl = document.getElementById('size');
|
2019-01-23 21:18:30 +01:00
|
|
|
sizeEl.value = Number(sizeEl.value) + 1;
|
|
|
|
sizeEl.onchange();
|
|
|
|
}
|
|
|
|
|
|
|
|
function decreaseFontSize() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var sizeEl = document.getElementById('size');
|
2019-01-23 21:18:30 +01:00
|
|
|
sizeEl.value = Number(sizeEl.value) - 1;
|
|
|
|
sizeEl.onchange();
|
|
|
|
}
|
|
|
|
|
2020-10-07 22:25:17 +02:00
|
|
|
function toggleFilter(filter) {
|
|
|
|
// cycle through the possible values for each filter
|
|
|
|
// and set the filters[filter] value,
|
|
|
|
// or at the end of the cycle set it to false
|
|
|
|
var options = {
|
|
|
|
'style': [false, 'sans', 'serif'],
|
|
|
|
'rendering': [false, 'vector', 'bitmap'],
|
|
|
|
'liga': [false, 'yes', 'no'],
|
|
|
|
'zerostyle': [false, 'slashed', 'dotted', 'empty'],
|
|
|
|
};
|
|
|
|
|
|
|
|
var current_index = options[filter].indexOf(filters[filter]);
|
|
|
|
var next = current_index + 1;
|
|
|
|
if (next < options[filter].length) {
|
|
|
|
filters[filter] = options[filter][next];
|
|
|
|
} else {
|
|
|
|
filters[filter] = options[filter][0];
|
2019-06-10 14:58:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
applyFilters();
|
|
|
|
}
|
|
|
|
|
2017-09-02 21:26:30 +02:00
|
|
|
$(document).ready(function() {
|
2019-06-10 10:18:45 +02:00
|
|
|
var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
|
|
|
var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
|
|
|
var cookieValueTheme = document.cookie.replace(/(?:(?:^|.*;\s*)theme\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
|
|
|
var cookieValueLanguage = document.cookie.replace(/(?:(?:^|.*;\s*)language\s*=\s*([^;]*).*$)|^.*$/, '$1');
|
|
|
|
|
|
|
|
if (cookieValueSpacing !== '') {
|
|
|
|
$('#spacing').val(cookieValueSpacing);
|
|
|
|
}
|
|
|
|
if (cookieValueSize !== '') {
|
|
|
|
$('#size').val(cookieValueSize);
|
|
|
|
}
|
|
|
|
if (cookieValueTheme !== '') {
|
|
|
|
$('#select-theme').val(cookieValueTheme);
|
|
|
|
}
|
|
|
|
if (cookieValueLanguage !== '') {
|
|
|
|
$('#select-language').val(cookieValueLanguage);
|
|
|
|
}
|
|
|
|
|
2019-06-10 20:58:18 +02:00
|
|
|
renderSelectList();
|
2019-06-10 10:18:45 +02:00
|
|
|
selectTheme();
|
|
|
|
setSize();
|
|
|
|
setSpacing();
|
|
|
|
selectLanguage();
|
|
|
|
|
|
|
|
$('#theme-next').click(function() {
|
|
|
|
$('#select-theme :selected').next().prop('selected', true);
|
|
|
|
selectTheme();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#theme-previous').click(function() {
|
|
|
|
$('#select-theme :selected').prev().prop('selected', true);
|
|
|
|
selectTheme();
|
|
|
|
});
|
|
|
|
|
2019-06-10 14:58:21 +02:00
|
|
|
$('#filters button').on('click', function(event) {
|
|
|
|
var button = $(this);
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
2020-10-07 22:25:17 +02:00
|
|
|
toggleFilter(button.val());
|
2019-06-10 14:58:21 +02:00
|
|
|
});
|
2019-06-10 20:29:47 +02:00
|
|
|
$('#authors-list').on('change', function() {
|
|
|
|
filters.author = $(this).val();
|
|
|
|
applyFilters();
|
|
|
|
});
|
2019-06-10 20:58:18 +02:00
|
|
|
$('#name-search').on('keyup', function() {
|
|
|
|
filters.name = $(this).val().toLowerCase();
|
|
|
|
applyFilters();
|
|
|
|
});
|
2019-06-10 14:58:21 +02:00
|
|
|
|
2019-06-10 10:18:45 +02:00
|
|
|
$('body').on('keydown', function(event) {
|
|
|
|
if (
|
|
|
|
event.target === document.querySelector('.select-list')
|
|
|
|
&& ! event.ctrlKey
|
|
|
|
&& ! event.altKey
|
|
|
|
&& ! event.metaKey
|
|
|
|
&& ! event.shiftKey
|
|
|
|
) {
|
|
|
|
if (event.key === 'ArrowUp') {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
2020-10-09 20:32:03 +02:00
|
|
|
walk('up');
|
2019-06-10 10:18:45 +02:00
|
|
|
return;
|
|
|
|
} else if (event.key === 'ArrowDown') {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
2020-10-09 20:32:03 +02:00
|
|
|
walk('down');
|
2019-06-10 10:18:45 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.ctrlKey || event.metaKey) {
|
|
|
|
if (event.key === '-') {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
decreaseFontSize();
|
|
|
|
|
|
|
|
} else if (event.key === '=') {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
increaseFontSize();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2017-01-20 17:59:59 +01:00
|
|
|
});
|