diff --git a/index.js b/index.js index 78fa929..0ada9b1 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ var editor = CodeMirror.fromTextArea(document.getElementById('code'), { styleActiveLine: true, matchBrackets: true, theme: 'pastel-on-dark', - lineWrapping: true + lineWrapping: true, }); // CodeMirror theme selector @@ -15,35 +15,36 @@ var input = document.getElementById('select-theme'); var font_data; var filters = { - 'style': false, - 'rendering': false, - 'liga': false, - 'zerostyle': false, - 'author': 'all', - 'name': '' + style: false, + rendering: false, + liga: false, + zerostyle: false, + author: 'all', + name: '', }; -function selectTheme() { +const selectTheme = () => { var theme = 'monokai'; if (input.selectedIndex > -1) { theme = input.options[input.selectedIndex].innerHTML; } editor.setOption('theme', theme); - document.cookie = 'theme=' + theme + ';max-age=172800'; + document.cookie = `theme=${theme};max-age=172800`; } // ProgrammingFonts font selector -function selectFont() { +const selectFont = () => { var font = window.location.hash.substring(1); 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 if (typeof font_data !== 'undefined') { - status_msg.innerHTML = 'Test drive ' + font_data[font].name + '!'; + status_msg.innerHTML = + `Test drive ${font_data[font].name}!`; } if (typeof font_data !== 'undefined' && font_data[font].rendering === 'bitmap') { @@ -54,24 +55,24 @@ function selectFont() { if (font === 'input') { code_mirror.style.fontFamily = 'Input Mono, monospace'; - code_mirror.querySelectorAll('pre, textarea').forEach(function(element){ + code_mirror.querySelectorAll('pre, textarea').forEach(element => { element.style.fontFamily = 'Input Mono, monospace'; }); } else { - code_mirror.style.fontFamily = font + ', monospace'; - code_mirror.querySelectorAll('pre, textarea').forEach(function(element){ - element.style.fontFamily = font + ', monospace'; + code_mirror.style.fontFamily = `${font}, monospace`; + code_mirror.querySelectorAll('pre, textarea').forEach(element => { + element.style.fontFamily = `${font}, monospace`; }); } - document.querySelectorAll('#select-font [data-alias]').forEach(function(element) { + document.querySelectorAll('#select-font [data-alias]').forEach(element => { element.classList.remove('active'); }); - document.querySelectorAll('#select-font [data-alias=\'' + font + '\']').forEach(function(element) { + document.querySelectorAll(`#select-font [data-alias='${font}']`).forEach(element => { element.classList.add('active'); }); - document.cookie = 'font=' + font + ';max-age=172800'; + document.cookie = `font=${font};max-age=172800`; } window.onhashchange = selectFont; @@ -79,58 +80,60 @@ window.onhashchange = selectFont; function setSize() { var size = document.getElementById('size').value; - document.querySelector('.CodeMirror').style.fontSize = size + 'px'; - document.cookie = 'size=' + size + ';max-age=172800'; + document.querySelector('.CodeMirror').style.fontSize = `${size}px`; + document.cookie = `size=${size};max-age=172800`; } function setSpacing() { var spacing = document.getElementById('spacing').value; document.querySelector('.CodeMirror').style.lineHeight = spacing; - document.cookie = 'spacing=' + spacing + ';max-age=172800'; + document.cookie = `spacing=${spacing};max-age=172800`; } function selectLanguage() { var lang = document.getElementById('select-language').value; editor.setOption('mode', lang.toLowerCase()); - document.cookie = 'language=' + lang + ';max-age=172800'; + document.cookie = `language=${lang};max-age=172800`; } function setCounter(amount) { var counter_element = document.querySelector('h1 a:first-child'); if (amount === 1) { - counter_element.innerHTML = amount + ' Programming Font'; + counter_element.innerHTML = `${amount} Programming Font`; } else { - counter_element.innerHTML = amount + ' Programming Fonts'; + counter_element.innerHTML = `${amount} Programming Fonts`; } } function applyFilters() { var count = 0; - Object.keys(filters).forEach(function(filter) { - var button = document.querySelector('button[value="' + filter + '"]'); - if (! button) { + Object.keys(filters).forEach(filter => { + var button = document.querySelector(`button[value="${filter}"]`); + if (!button) { return; } if (filters[filter]) { button.classList.add('selected'); - button.querySelectorAll('svg').forEach(function(image){ + button.querySelectorAll('svg').forEach(image => { image.classList.remove('selected'); }); - button.querySelector('svg[alt="' + filters[filter] + '"]').classList.add('selected'); + button.querySelector(`svg[alt="${filters[filter]}"]`).classList.add('selected'); } else { button.classList.remove('selected'); - button.querySelectorAll('svg').forEach(function(image){ + button.querySelectorAll('svg').forEach(image => { image.classList.remove('selected'); }); } }); - document.querySelectorAll('.entry[data-alias]').forEach(function(element) { + document.querySelectorAll('.entry[data-alias]').forEach(element => { var data = font_data[element.dataset.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') && + (!filters.liga || + (data.ligatures === false && filters.liga === 'no') || + (data.ligatures === true && filters.liga === 'yes')) && (!filters.zerostyle || data.zerostyle === filters.zerostyle) && (filters.author === 'all' || data.author === filters.author) && (!filters.name || data.name.toLowerCase().indexOf(filters.name) > -1) @@ -146,8 +149,10 @@ function applyFilters() { } function renderSelectList() { - var icon = ''; - var pinIcon = ''; + var icon = + ''; + var pinIcon = + ''; var favoritesMap = {}; var favorites = []; var ajax = new XMLHttpRequest(); @@ -156,7 +161,7 @@ function renderSelectList() { try { favorites = JSON.parse(localStorage.getItem('favorites')) || []; - favoritesMap = favorites.reduce(function(acc, alias) { + favoritesMap = favorites.reduce((acc, alias) => { acc[alias] = true; return acc; }, {}); @@ -165,14 +170,14 @@ function renderSelectList() { console.error('could not render favorites', err); } - ajax.onreadystatechange = function() { + ajax.onreadystatechange = () => { var fonts = []; var authors = []; if (ajax.readyState === 4 && ajax.status === 200) { font_data = ajax.response; - Object.keys(font_data).forEach(function(key){ - var v= font_data[key]; + Object.keys(font_data).forEach(key => { + var v = font_data[key]; v.alias = key; fonts.push(v); if (authors.indexOf(v.author) < 0) { @@ -182,21 +187,29 @@ function renderSelectList() { } authors.sort(); - fonts.sort(function(a, b) { - 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;} + fonts.sort((a, b) => { + 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; }); - authors.forEach(function(author) { + authors.forEach(author => { var option = document.createElement('option'); option.innerHTML = author; document.getElementById('authors-list').querySelector('.other').appendChild(option); }); - fonts.forEach(function(v) { + fonts.forEach(v => { var option = document.createElement('div'); option.classList.add('entry'); @@ -205,14 +218,8 @@ function renderSelectList() { } option.setAttribute('data-alias', v.alias); - option.innerHTML = '' + - '' + v.name + '' + - '' + v.year + ' — ' + v.author + '' + - '' + - '' + - pinIcon + - '' + - ' Website' + icon + ''; + option.innerHTML = + `${v.name}${v.year} — ${v.author}${pinIcon} Website${icon}`; document.getElementById('select-font').appendChild(option); }); @@ -231,7 +238,7 @@ function toggleFavorite(alias) { try { favorites = JSON.parse(localStorage.getItem('favorites')) || []; if (favorites.indexOf(alias) > -1) { - favorites = favorites.filter(function(v) { + favorites = favorites.filter(v => { return v !== alias; }); } else { @@ -281,7 +288,7 @@ function walk(direction) { if (target) { target.querySelector('a').click(); - if (!isVisible(target)){ + if (!isVisible(target)) { target.scrollIntoView(); } } @@ -304,10 +311,10 @@ function toggleFilter(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'], + 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]); @@ -321,7 +328,7 @@ function toggleFilter(filter) { applyFilters(); } -window.addEventListener('DOMContentLoaded', function() { +window.addEventListener('DOMContentLoaded', () => { 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'); @@ -359,33 +366,36 @@ window.addEventListener('DOMContentLoaded', function() { selectTheme(); } - document.getElementById('theme-next').onclick = function() { + document.getElementById('theme-next').onclick = () => { walkThemes('down'); }; - document.getElementById('theme-previous').onclick = function() { + document.getElementById('theme-previous').onclick = () => { walkThemes('up'); }; - document.getElementById('filters').querySelectorAll('button').forEach(function(button){ - button.onclick = function(event) { - event.preventDefault(); - event.stopPropagation(); - toggleFilter(button.value); - }; - }); + document + .getElementById('filters') + .querySelectorAll('button') + .forEach(button => { + button.onclick = (event) => { + event.preventDefault(); + event.stopPropagation(); + toggleFilter(button.value); + }; + }); - document.getElementById('authors-list').onchange = function(event) { + document.getElementById('authors-list').onchange = (event) => { filters.author = event.target.value; applyFilters(); }; - document.getElementById('name-search').onkeyup = function(event) { + document.getElementById('name-search').onkeyup = (event) => { filters.name = event.target.value.toLowerCase(); applyFilters(); }; - document.querySelector('.select-list').onkeyup = function(event) { + document.querySelector('.select-list').onkeyup = (event) => { if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) { return; } @@ -400,7 +410,7 @@ window.addEventListener('DOMContentLoaded', function() { } }; - document.body.addEventListener('keydown', function(event) { + document.body.addEventListener('keydown', (event) => { if (event.ctrlKey || event.metaKey) { if (event.key === '-') { event.preventDefault(); diff --git a/package-lock.json b/package-lock.json index 8334653..6e914ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,88 @@ "devDependencies": { "ajv-cli": "^5.0.0", "ajv-formats": "^2.1.1", - "lessc": "^1.0.2" + "lessc": "^1.0.2", + "rome": "^11.0.0" } }, + "node_modules/@rometools/cli-darwin-arm64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-darwin-arm64/-/cli-darwin-arm64-11.0.0.tgz", + "integrity": "sha512-F3vkdY+s3FLIEnAjSbyHTuIPB88cLpccimW4ecid5I7S6GzGG3iUJI4xT00JhH73K4P/qW20/9r+kH1T9Du8Xg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rometools/cli-darwin-x64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-darwin-x64/-/cli-darwin-x64-11.0.0.tgz", + "integrity": "sha512-X6jhtS6Iml4GOzgNtnLwIp/KXXhSdqeVyfv69m/AHnIzx3gQAjPZ7BPnJLvTCbhe4SKHL+uTZYFSCJpkUUKE6w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rometools/cli-linux-arm64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-linux-arm64/-/cli-linux-arm64-11.0.0.tgz", + "integrity": "sha512-dktTJJlTpmycBZ2TwhJBcAO8ztK8DdevdyZnFFxdYRvtmJgTjIsC2UFayf/SbKew8B8q1IhI0it+D6ihAeIpeg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rometools/cli-linux-x64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-linux-x64/-/cli-linux-x64-11.0.0.tgz", + "integrity": "sha512-WVcnXPNdWGUWo0p4NU8YzuthjYR7q+b4vRcjdxtP1DlpphZmSsoC/RSE85nEqRAz8hChcKUansVzOPM8BSsuGA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rometools/cli-win32-arm64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-win32-arm64/-/cli-win32-arm64-11.0.0.tgz", + "integrity": "sha512-tPj6RThQzS7Q45jqQll7NlTYvNcsg/BEP3LYiiazqSh9FAFnMkrV6ewUcMPKWyAfiyLs7jlz4rRvdNRUSygzfQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rometools/cli-win32-x64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-win32-x64/-/cli-win32-x64-11.0.0.tgz", + "integrity": "sha512-bmBai8WHxYjsGk1+je7ZTfCUCWq30WJI3pQM8pzTA674lfGTZ9ymJoZwTaIMSO4rL5V9mlO6uLunsBKso9VqOg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/ajv": { "version": "8.11.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz", @@ -416,6 +495,27 @@ "node": ">=0.10.0" } }, + "node_modules/rome": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/rome/-/rome-11.0.0.tgz", + "integrity": "sha512-rRo6JOwpMLc3OkeTDRXkrmrDqnxDvZ75GS4f0jLDBNmRgDXWbu0F8eVnJoRn+VbK2AE7vWvhVOMBjnWowcopkQ==", + "dev": true, + "hasInstallScript": true, + "bin": { + "rome": "bin/rome" + }, + "engines": { + "node": ">=14.*" + }, + "optionalDependencies": { + "@rometools/cli-darwin-arm64": "11.0.0", + "@rometools/cli-darwin-x64": "11.0.0", + "@rometools/cli-linux-arm64": "11.0.0", + "@rometools/cli-linux-x64": "11.0.0", + "@rometools/cli-win32-arm64": "11.0.0", + "@rometools/cli-win32-x64": "11.0.0" + } + }, "node_modules/semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -465,6 +565,48 @@ } }, "dependencies": { + "@rometools/cli-darwin-arm64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-darwin-arm64/-/cli-darwin-arm64-11.0.0.tgz", + "integrity": "sha512-F3vkdY+s3FLIEnAjSbyHTuIPB88cLpccimW4ecid5I7S6GzGG3iUJI4xT00JhH73K4P/qW20/9r+kH1T9Du8Xg==", + "dev": true, + "optional": true + }, + "@rometools/cli-darwin-x64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-darwin-x64/-/cli-darwin-x64-11.0.0.tgz", + "integrity": "sha512-X6jhtS6Iml4GOzgNtnLwIp/KXXhSdqeVyfv69m/AHnIzx3gQAjPZ7BPnJLvTCbhe4SKHL+uTZYFSCJpkUUKE6w==", + "dev": true, + "optional": true + }, + "@rometools/cli-linux-arm64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-linux-arm64/-/cli-linux-arm64-11.0.0.tgz", + "integrity": "sha512-dktTJJlTpmycBZ2TwhJBcAO8ztK8DdevdyZnFFxdYRvtmJgTjIsC2UFayf/SbKew8B8q1IhI0it+D6ihAeIpeg==", + "dev": true, + "optional": true + }, + "@rometools/cli-linux-x64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-linux-x64/-/cli-linux-x64-11.0.0.tgz", + "integrity": "sha512-WVcnXPNdWGUWo0p4NU8YzuthjYR7q+b4vRcjdxtP1DlpphZmSsoC/RSE85nEqRAz8hChcKUansVzOPM8BSsuGA==", + "dev": true, + "optional": true + }, + "@rometools/cli-win32-arm64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-win32-arm64/-/cli-win32-arm64-11.0.0.tgz", + "integrity": "sha512-tPj6RThQzS7Q45jqQll7NlTYvNcsg/BEP3LYiiazqSh9FAFnMkrV6ewUcMPKWyAfiyLs7jlz4rRvdNRUSygzfQ==", + "dev": true, + "optional": true + }, + "@rometools/cli-win32-x64": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@rometools/cli-win32-x64/-/cli-win32-x64-11.0.0.tgz", + "integrity": "sha512-bmBai8WHxYjsGk1+je7ZTfCUCWq30WJI3pQM8pzTA674lfGTZ9ymJoZwTaIMSO4rL5V9mlO6uLunsBKso9VqOg==", + "dev": true, + "optional": true + }, "ajv": { "version": "8.11.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz", @@ -774,6 +916,20 @@ "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", "dev": true }, + "rome": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/rome/-/rome-11.0.0.tgz", + "integrity": "sha512-rRo6JOwpMLc3OkeTDRXkrmrDqnxDvZ75GS4f0jLDBNmRgDXWbu0F8eVnJoRn+VbK2AE7vWvhVOMBjnWowcopkQ==", + "dev": true, + "requires": { + "@rometools/cli-darwin-arm64": "11.0.0", + "@rometools/cli-darwin-x64": "11.0.0", + "@rometools/cli-linux-arm64": "11.0.0", + "@rometools/cli-linux-x64": "11.0.0", + "@rometools/cli-win32-arm64": "11.0.0", + "@rometools/cli-win32-x64": "11.0.0" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", diff --git a/package.json b/package.json index 8b93e71..3d791a1 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Test drive programming fonts online", "main": "index.js", "scripts": { - "test": "ajv -c ajv-formats -s fonts-schema.json -d fonts.json && cd fonts/stylesheets/ && lessc fonts.less stylesheet.css" + "test": "rome check index.js && ajv -c ajv-formats -s fonts-schema.json -d fonts.json && cd fonts/stylesheets/ && lessc fonts.less stylesheet.css" }, "repository": { "type": "git", @@ -19,6 +19,7 @@ "devDependencies": { "ajv-cli": "^5.0.0", "ajv-formats": "^2.1.1", - "lessc": "^1.0.2" + "lessc": "^1.0.2", + "rome": "^11.0.0" } } diff --git a/rome.json b/rome.json new file mode 100644 index 0000000..10b7ba8 --- /dev/null +++ b/rome.json @@ -0,0 +1,20 @@ +{ + "$schema": "./node_modules/rome/configuration_schema.json", + "linter": { + "enabled": true, + "rules": { + "recommended": true + } + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentSize": 4, + "lineWidth": 120 + }, + "javascript": { + "formatter": { + "quoteStyle": "single" + } + } +}