Mirror
/
programmingfonts
mirror of https://github.com/braver/programmingfonts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

re #19 ajax call to fonts.json without jQuery

This commit is contained in:
Koen Lageveen 2020-10-09 22:32:12 +02:00 committed by Koen Lageveen
parent bd9f69855b
commit 36db6bc5d0
1 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
index.js
View File

@ -1,4 +1,4 @@
/* global CodeMirror window document $ Set */
/* global CodeMirror window document Set */
/* eslint-disable no-implicit-globals */
// CodeMirror
@ -13,7 +13,7 @@ var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
// CodeMirror theme selector
var input = document.getElementById('select-theme');
var font_data = {};
var font_data;
var filters = {
'style': false,
'rendering': false,
@ -39,14 +39,14 @@ function selectFont() {
var status_msg = document.querySelector('footer .subtitle');
var code_mirror = document.querySelector('.CodeMirror');
if (font === '') {
if (! font) {
font = 'cartograph';
status_msg.innerHTML = 'Test drive all the programming fonts!';
} else {
} else if (typeof font_data !== 'undefined') {
status_msg.innerHTML = 'Test drive <a rel="external" href="' + font_data[font].website + '">' + font_data[font].name + '!</a>';
}
if (font_data[font].rendering === 'bitmap') {
if (typeof font_data !== 'undefined' && font_data[font].rendering === 'bitmap') {
code_mirror.classList.add('no-smooth');
} else {
code_mirror.classList.remove('no-smooth');
@ -150,6 +150,7 @@ function renderSelectList() {
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 = [];
var ajax = new XMLHttpRequest();
document.getElementById('select-font').innerHTML = '';
@ -164,28 +165,23 @@ function renderSelectList() {
console.error('could not render favorites', err);
}
$.getJSON('fonts.json', function(data) {
ajax.onreadystatechange = function() {
var fonts = [];
var authors = [];
font_data = data;
if (ajax.readyState === 4 && ajax.status === 200) {
font_data = ajax.response;
$.each(font_data, function(k, v) {
var font_props = v;
font_props.alias = k;
fonts.push(v);
if (authors.indexOf(v.author) < 0) {
authors.push(v.author);
}
});
Object.keys(font_data).forEach(function(key){
var v= font_data[key];
v.alias = key;
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) {
if (favoritesMap[a.alias] && !favoritesMap[b.alias]) {return -1;}
if (!favoritesMap[a.alias] && favoritesMap[b.alias]) {return 1;}
@ -194,9 +190,16 @@ function renderSelectList() {
return 0;
});
$.each(fonts, function(k, v) {
authors.forEach(function(author) {
var option = document.createElement('option');
option.innerHTML = author;
document.getElementById('authors-list').querySelector('.other').appendChild(option);
});
fonts.forEach(function(v) {
var liga_info = '';
var render_info = '';
var option = document.createElement('div');
if (v.ligatures) {
liga_info = ', ligatures';
@ -204,21 +207,30 @@ function renderSelectList() {
if (v.rendering === 'bitmap') {
render_info = ', bitmap';
}
$('#select-font').append(
'<div class="entry' + (favoritesMap[v.alias] ? ' pinned' : '') + '" data-alias="' + v.alias + '">' +
'<a href="#' + v.alias + '">' +
'<span class="name">' + v.name + '</span>' +
'<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
option.classList.add('entry');
if (favoritesMap[v.alias]) {
option.classList.add('pinned');
}
option.setAttribute('data-alias', v.alias);
option.innerHTML = '<a href="#' + v.alias + '">' +
'<span class="name">' + v.name + '</span>' +
'<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
'</a>' +
'<a class="favoritelink" onclick="toggleFavorite(\'' + v.alias + '\')">' +
pinIcon +
'</a>' +
'<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a></div>'
);
'<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a>';
document.getElementById('select-font').appendChild(option);
});
selectFont();
applyFilters();
});
};
ajax.responseType = 'json';
ajax.open('GET', 'fonts.json', true);
ajax.send();
}
// eslint-disable-next-line no-unused-vars