├── .gitignore
├── Screenshot.png
├── src
├── icon32.png
├── icon256.png
├── baseline-keyboard_arrow_down-24px.svg
├── index.html
├── index.css
├── icon.svg
└── index.js
├── index.js
├── package.json
├── LICENSE
├── README.md
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 |
--------------------------------------------------------------------------------
/Screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ssssota/fontviewer/HEAD/Screenshot.png
--------------------------------------------------------------------------------
/src/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ssssota/fontviewer/HEAD/src/icon32.png
--------------------------------------------------------------------------------
/src/icon256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ssssota/fontviewer/HEAD/src/icon256.png
--------------------------------------------------------------------------------
/src/baseline-keyboard_arrow_down-24px.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const {app, BrowserWindow, NativeImage} = require('electron')
2 |
3 | let window
4 |
5 | const createWindow = () => {
6 | if (window) return
7 |
8 | window = new BrowserWindow({
9 | 'width': 1280,
10 | 'height': 720,
11 | 'minWidth': 640,
12 | 'minHeight': 360,
13 | 'icon': './src/icon256.png'
14 | })
15 | window.loadFile('src/index.html')
16 | if (process.argv[2] === '--debug') window.webContents.openDevTools()
17 | window.on('closed', () => {
18 | window = null
19 | })
20 | }
21 |
22 | app.on('ready', createWindow)
23 | app.on('activate', createWindow)
24 | app.on('window-all-closed', () => {
25 | if (process.platform !== 'darwin') {
26 | app.quit()
27 | }
28 | })
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fontviewer",
3 | "version": "0.1.0",
4 | "description": "Fontviewer",
5 | "main": "index.js",
6 | "author": "Sotaro Tommykawa",
7 | "license": "MIT",
8 | "dependencies": {
9 | "font-manager": "^0.3.0",
10 | "color-convert": "^1.9.3"
11 | },
12 | "devDependencies": {
13 | "electron": "^3.0.10",
14 | "electron-builder": "^20.40.2",
15 | "electron-rebuild": "^1.8.4"
16 | },
17 | "scripts": {
18 | "start": "electron .",
19 | "debug": "electron . --debug",
20 | "rebuild-lib": "electron-rebuild",
21 | "build": "electron-builder",
22 | "build:mac": "electron-builder --mac --x64",
23 | "build:windows": "electron-builder --win --x64",
24 | "build:linux": "electron-builder --linux --x64"
25 | },
26 | "build": {
27 | "appId": "com.ssssota.fontviewer",
28 | "win": {
29 | "target": "portable"
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #  Fontviewer
2 |
3 | **💥This repository is deprecated!💥**
4 | **Check new [fontviewer](https://fontvuer.netlify.app)!**
5 |
6 | 
7 |
8 | You can check and search fonts you have.
9 | And you can change the color.
10 |
11 | ## Installation
12 |
13 | If you use windows, you also may need to install the windows-build-tools package.
14 |
15 | ```sh
16 | npm -g install windows-build-tools
17 | ```
18 |
19 | If you use linux, you also may need to install the libfontconfig-dev package.
20 | For example:
21 |
22 | ```sh
23 | sudo apt-get install libfontconfig-dev
24 | ```
25 |
26 | Download this repository.
27 |
28 | ```sh
29 | git pull https://github.com/ssssota/fontviewer.git
30 | ```
31 |
32 | Install node packages.
33 |
34 | ```sh
35 | npm install
36 | ```
37 |
38 | Rebuild libraries for electron.
39 |
40 | ```sh
41 | npm run rebuild-lib
42 | ```
43 |
44 | ## Usage
45 |
46 | Launch
47 |
48 | ```sh
49 | npm start
50 | ```
51 |
52 | Debug
53 |
54 | ```sh
55 | npm run debug
56 | ```
57 |
58 | Build
59 |
60 | ```sh
61 | # build for mac
62 | npm run build:mac
63 |
64 | # build for windows
65 | npm run build:windows
66 |
67 | # build for linux
68 | npm run build:linux
69 | ```
70 |
71 | ## License
72 |
73 | The MIT License.
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Fontviewer
8 |
9 |
10 |
11 |
12 |
13 | Fontviewer
14 |
19 |
36 |
37 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /* Clear style */
2 | html, body {
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | height: 100%;
7 | font-family: Arial, Helvetica, sans-serif;
8 | }
9 | div, menu, h1, h2, h3, p {
10 | padding: 0;
11 | margin: 0;
12 | }
13 | input {
14 | appearance: none;
15 | -webkit-appearance: none;
16 | border: 0px;
17 | border-bottom: 1px #ccc solid;
18 | font-size: 1.25em;
19 | transition: all 0.1s;
20 | }
21 | input:focus {
22 | outline: 0;
23 | border-bottom-color: #333;
24 | }
25 | input[type="range"] {
26 | height: 1px;
27 | }
28 | input[type="range"]::-webkit-slider-thumb {
29 | appearance: none;
30 | -webkit-appearance: none;
31 | width: 13px;
32 | height: 13px;
33 | background: #333;
34 | border: white solid 2px;
35 | border-radius: 50%;
36 | -webkit-border-radius: 50%;
37 | }
38 | input[type="range"]:hover::-webkit-slider-thumb {
39 | border: 2px solid rgba(255, 255, 255, 0.5);
40 | }
41 |
42 | /* Main style */
43 | .setting {
44 | position: fixed;
45 | width: 100%;
46 | min-height: 3.5em;
47 | background: #fff;
48 | border-bottom: 1px solid #999;
49 | box-shadow: 0px 1px 5px 0px;
50 | user-select: none;
51 | }
52 | .setting h1 {
53 | margin: 0.25em;
54 | display: inline-block;
55 | }
56 | .setting p {
57 | margin: 0.5em;
58 | }
59 | .setting .right {
60 | float: right;
61 | display: flex;
62 | }
63 | .setting .right p {
64 | margin-top: 1em;
65 | }
66 | .setting .right p input {
67 | width: 8em;
68 | }
69 | .setting .right p .more-btn {
70 | display: block;
71 | background-image: url('./baseline-keyboard_arrow_down-24px.svg');
72 | width: 30px;
73 | height: 30px;
74 | transition: all 0.2s;
75 | }
76 | .setting .right p .more-btn.opened {
77 | transform: rotateX(180deg);
78 | }
79 | .setting .menu {
80 | overflow: hidden;
81 | transition: all 0.1s;
82 | clear: both;
83 |
84 | /* Flex setting */
85 | display: flex;
86 | flex-wrap: wrap;
87 | }
88 | .setting .menu .color-selector {}
89 | .setting .menu .red {
90 | color: red;
91 | }
92 | .setting .menu .red .color-slider {
93 | background: red;
94 | }
95 | .setting .menu .red .color-number {
96 | border-bottom-color: red;
97 | }
98 | .setting .menu .green {
99 | color: green;
100 | }
101 | .setting .menu .green .color-slider {
102 | background: green;
103 | }
104 | .setting .menu .green .color-number {
105 | border-bottom-color: green;
106 | }
107 | .setting .menu .blue {
108 | color: blue;
109 | }
110 | .setting .menu .blue .color-slider {
111 | background: blue;
112 | }
113 | .setting .menu .blue .color-number {
114 | border-bottom-color: blue;
115 | }
116 |
117 | .container {
118 | width: 95%;
119 | height: 100%;
120 | margin: 0 auto;
121 | padding-top: 4em;
122 | }
123 | .container .fontlist {
124 |
125 | /* Flex setting */
126 | display: flex;
127 | flex-wrap: wrap;
128 | justify-content: center;
129 | }
130 | .fontlist .font {
131 | flex-grow: 1;
132 | min-height: 5em;
133 | margin: 0.1em;
134 | padding: 0.5em;
135 | border: 1px solid #ccc;
136 | /* box-shadow: 1px 1px 1px 0px; */
137 | border-radius: 3px;
138 | text-align: center;
139 | }
140 | .fontlist .font.hide-font {
141 | display: none;
142 | }
143 | .fontlist .font .text {
144 | height: 80%;
145 | margin: 0.1em;
146 | font-size: 30px;
147 | }
148 | .fontlist .font .font-name {
149 | color: #999;
150 | font-size: 0.8em;
151 | }
--------------------------------------------------------------------------------
/src/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
102 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | const convert = require('color-convert')
2 | const fontManager = require('font-manager')
3 | // get all of the fonts
4 | let fonts
5 |
6 | const $container = document.querySelector('#container')
7 | const $fontlist = document.querySelector('#fontlist')
8 | // header
9 | const $search = document.querySelector('#search')
10 | const $text = document.querySelector('#text')
11 | const $moreBtn = document.querySelector('#moreBtn')
12 | /// more setting
13 | const $moreSetting = document.querySelector('#moreSetting')
14 | //// background color
15 | const $bgColor = document.querySelector('#bgColor')
16 | const $bgRedRange = document.querySelector('#bgRedRange')
17 | const $bgGreenRange = document.querySelector('#bgGreenRange')
18 | const $bgBlueRange = document.querySelector('#bgBlueRange')
19 | const $bgRed = document.querySelector('#bgRed')
20 | const $bgGreen = document.querySelector('#bgGreen')
21 | const $bgBlue = document.querySelector('#bgBlue')
22 | //// font color
23 | const $fontColor = document.querySelector('#fontColor')
24 | const $fontRedRange = document.querySelector('#fontRedRange')
25 | const $fontGreenRange = document.querySelector('#fontGreenRange')
26 | const $fontBlueRange = document.querySelector('#fontBlueRange')
27 | const $fontRed = document.querySelector('#fontRed')
28 | const $fontGreen = document.querySelector('#fontGreen')
29 | const $fontBlue = document.querySelector('#fontBlue')
30 | const $fontSize = document.querySelector('#fontSize')
31 | const defaultText = '123 abc'
32 | let moreSettingHeight = 0
33 |
34 | // onDOMContentLoaded func also main func
35 | const onLoad = () => {
36 | fonts = fontManager.getAvailableFontsSync().sort((a, b) => {
37 | const A = a.family.toUpperCase()
38 | const B = b.family.toUpperCase()
39 | if (A < B) return -1
40 | if (A > B) return 1
41 | return 0
42 | })
43 | console.log(fonts)
44 |
45 | for (let i = fonts.length-1; i >= 0; i--) {
46 | const family = fonts[i].family
47 | const weight = fonts[i].weight
48 | const isItalic = fonts[i].italic
49 | const style = fonts[i].style
50 | const isCondensed = !!(style.match(/Condensed/))
51 | const isOblique = !!(style.match(/Oblique/))
52 | $fontlist.insertAdjacentHTML('afterbegin',
53 | `
54 |
${defaultText}
55 |
${family} ${style}
56 |