Skip to content

Commit 885d312

Browse files
yneyne
committed
migrate /docs/ to esm
1 parent 11af0d8 commit 885d312

File tree

5 files changed

+132
-242
lines changed

5 files changed

+132
-242
lines changed

‎docs/examples/reading-writing.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>OpenType writing</title>
6-
<script src="/dist/opentype.js"></script>
76
<style>
87
body {
98
font: 13px Helvetica, arial, freesans, sans-serif;
@@ -41,7 +40,8 @@ <h1 id="fontFamilyName"></h1>
4140
<div id="glyphs"></div>
4241
</div>
4342

44-
<script>
43+
<script type="module">
44+
import * as opentype from "/dist/opentype.js";
4545

4646
var inFont, outFont;
4747

@@ -60,7 +60,7 @@ <h1 id="fontFamilyName"></h1>
6060
return ctx;
6161
}
6262

63-
opentype.load('../fonts/FiraSansOT-Medium.otf', function (err, font) {
63+
fetch('../fonts/FiraSansOT-Medium.otf').then(res => res.arrayBuffer()).then(buf => opentype.load(buf)).then(function (err, font) {
6464
if (err) {
6565
console.log(err);
6666
}

‎docs/font-inspector.html‎

Lines changed: 28 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<meta name="description" content="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
66
<meta charset="utf-8">
77
<link rel="stylesheet" href="site.css">
8-
<script src="/dist/opentype.js"></script>
98
</head>
109
<body>
1110
<div class="header">
@@ -22,14 +21,14 @@ <h1>opentype.js</h1>
2221
</div>
2322
</div>
2423

25-
<div class="container">
24+
<form class="container" name="demo">
2625

2726
<div class="explain">
2827
<h1>Font Inspector</h1>
2928
<small>opentype.js is an OpenType and TrueType font parser. Here you can inspect the raw font metadata.</small>
3029
</div>
3130

32-
<input id="file" type="file">
31+
<input name="file" type="file">
3332
<span class="info" id="font-name">Roboto-Black</span>
3433
<canvas id="preview" width="940" height="50" class="text"></canvas>
3534
<div id="message"></div>
@@ -91,14 +90,15 @@ <h1>Free Software</h1>
9190
</div>
9291

9392
<hr>
94-
</div>
93+
</form>
94+
9595

96+
<script type="module">
97+
import * as opentype from '/dist/opentype.js';
9698

97-
<script>
9899
var font = null;
99-
var fontSize = 32;
100-
var textToRender = 'Grumpy wizards make toxic brew for the evil Queen and Jack.';
101-
var previewPath = null;
100+
const fontSize = 32;
101+
const textToRender = 'Grumpy wizards make toxic brew for the evil Queen and Jack.';
102102

103103
function escapeHtml(unsafe) {
104104
return unsafe
@@ -124,7 +124,7 @@ <h1>Free Software</h1>
124124
canvas.getContext('2d').scale(pixelRatio, pixelRatio);
125125
}
126126

127-
function renderText() {
127+
function renderText(font) {
128128
if (!font) return;
129129

130130
var previewCanvas = document.getElementById('preview');
@@ -193,7 +193,7 @@ <h1>Free Software</h1>
193193
document.getElementById('name-table').innerHTML = html;
194194
}
195195

196-
function displayFontData() {
196+
function displayFontData(font) {
197197
var html, tablename, table, property, value;
198198

199199
for (tablename in font.tables) {
@@ -238,39 +238,25 @@ <h1>Free Software</h1>
238238

239239
function onFontLoaded(font) {
240240
window.font = font;
241-
renderText();
242-
displayFontData();
241+
renderText(font);
242+
displayFontData(font);
243243
}
244-
245-
function onReadFile(e) {
246-
document.getElementById('font-name').innerHTML = '';
247-
var file = e.target.files[0];
248-
var reader = new FileReader();
249-
reader.onload = function(e) {
250-
try {
251-
font = opentype.parse(e.target.result, {lowMemory:true});
252-
onFontLoaded(font);
253-
showErrorMessage('');
254-
} catch (err) {
255-
showErrorMessage(err.toString());
256-
if (err.stack) console.log(err.stack);
257-
throw(err);
258-
}
259-
};
260-
reader.onerror = function(err) {
244+
const form = document.forms.demo;
245+
form.file.onchange = async function(e) {
246+
form.fontname.innerText = '';
247+
try {
248+
const buf = e.target.files[0].arrayBuffer();
249+
onFontLoaded(opentype.parse(await buf, {lowMemory:true}));
250+
showErrorMessage('');
251+
} catch (err) {
261252
showErrorMessage(err.toString());
262-
};
263-
264-
reader.readAsArrayBuffer(file);
265-
}
253+
}
254+
};
266255

267256
var fontFileName = 'fonts/FiraSansMedium.woff';
268257

269258
document.getElementById('font-name').innerHTML = fontFileName.split('/')[1];
270259

271-
var fileButton = document.getElementById('file');
272-
fileButton.addEventListener('change', onReadFile, false);
273-
274260
var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
275261
for(var i = tableHeaders.length; i--; ) {
276262
tableHeaders[i].addEventListener('click', function(e) {
@@ -280,14 +266,12 @@ <h1>Free Software</h1>
280266

281267
enableHighDPICanvas('preview');
282268

283-
opentype.load(fontFileName, function(err, font) {
284-
var amount, glyph, ctx, x, y, fontSize;
285-
if (err) {
286-
showErrorMessage(err.toString());
287-
return;
288-
}
289-
onFontLoaded(font);
290-
}, {lowMemory:true});
269+
const buf = await fetch(fontFileName).then(res => res.arrayBuffer());
270+
try {
271+
onFontLoaded(opentype.parse(buf, {lowMemory:true}));
272+
} catch (err) {
273+
showErrorMessage(err.toString());
274+
}
291275
</script>
292276
</body>
293277
</html>

‎docs/glyph-inspector.html‎

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<meta name="description" content="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
66
<meta charset="utf-8">
77
<link rel="stylesheet" href="site.css">
8-
<script src="/dist/opentype.js"></script>
98
</head>
109
<body>
1110
<div class="header">
@@ -22,7 +21,7 @@ <h1>opentype.js</h1>
2221
</div>
2322
</div>
2423

25-
<div class="container">
24+
<form class="container" name="demo">
2625

2726
<div class="explain">
2827
<h1>Glyph Inspector</h1>
@@ -58,10 +57,14 @@ <h1>Free Software</h1>
5857
</div>
5958

6059
<hr>
61-
</div>
60+
</form>
61+
62+
63+
<script type="module">
64+
import * as opentype from "/dist/opentype.js";
6265

66+
const form = document.forms.demo;
6367

64-
<script>
6568
var cellCount = 100,
6669
cellWidth = 44,
6770
cellHeight = 40,
@@ -122,6 +125,7 @@ <h1>Free Software</h1>
122125
}
123126

124127
function displayGlyphData(glyphIndex) {
128+
const font = window.font;
125129
var container = document.getElementById('glyph-data');
126130
if (glyphIndex < 0) {
127131
container.innerHTML = '';
@@ -243,7 +247,7 @@ <h1>Free Software</h1>
243247
height = canvas.height / pixelRatio;
244248
ctx.clearRect(0, 0, width, height);
245249
if(glyphIndex < 0) return;
246-
var glyph = font.glyphs.get(glyphIndex),
250+
var glyph = window.font.glyphs.get(glyphIndex),
247251
glyphWidth = glyph.advanceWidth * glyphScale,
248252
xmin = (width - glyphWidth)/2,
249253
xmax = (width + glyphWidth)/2,
@@ -272,12 +276,12 @@ <h1>Free Software</h1>
272276
var cellMarkSize = 4;
273277
var ctx = canvas.getContext('2d');
274278
ctx.clearRect(0, 0, cellWidth, cellHeight);
275-
if (glyphIndex >= font.numGlyphs) return;
279+
if (glyphIndex >= window.font.numGlyphs) return;
276280

277281
ctx.fillStyle = '#606060';
278282
ctx.font = '9px sans-serif';
279283
ctx.fillText(glyphIndex, 1, cellHeight-1);
280-
var glyph = font.glyphs.get(glyphIndex),
284+
var glyph = window.font.glyphs.get(glyphIndex),
281285
glyphWidth = glyph.advanceWidth * fontScale,
282286
xmin = (cellWidth - glyphWidth)/2,
283287
xmax = (cellWidth + glyphWidth)/2,
@@ -307,7 +311,7 @@ <h1>Free Software</h1>
307311
displayGlyphPage(+event.target.id.substr(1));
308312
}
309313

310-
function initGlyphDisplay() {
314+
function initGlyphDisplay(font) {
311315
var glyphBgCanvas = document.getElementById('glyph-bg'),
312316
w = glyphBgCanvas.width / pixelRatio,
313317
h = glyphBgCanvas.height / pixelRatio,
@@ -322,7 +326,7 @@ <h1>Free Software</h1>
322326
glyphBaseline = glyphMargin + glyphH * head.yMax / maxHeight;
323327

324328
function hline(text, yunits) {
325-
ypx = glyphBaseline - yunits * glyphScale;
329+
const ypx = glyphBaseline - yunits * glyphScale;
326330
ctx.fillText(text, 2, ypx+3);
327331
ctx.fillRect(80, ypx, w, 1);
328332
}
@@ -366,40 +370,18 @@ <h1>Free Software</h1>
366370
}
367371
pagination.appendChild(fragment);
368372

369-
initGlyphDisplay();
373+
initGlyphDisplay(font);
370374
displayGlyphPage(0);
371375
displayGlyph(-1);
372376
displayGlyphData(-1);
373377
}
374378

375-
function onReadFile(e) {
376-
document.getElementById('font-name').innerHTML = '';
377-
var file = e.target.files[0];
378-
var reader = new FileReader();
379-
reader.onload = function(e) {
380-
try {
381-
font = opentype.parse(e.target.result, {lowMemory:true});
382-
showErrorMessage('');
383-
onFontLoaded(font);
384-
} catch (err) {
385-
showErrorMessage(err.toString());
386-
if (err.stack) console.log(err.stack);
387-
throw(err);
388-
}
389-
};
390-
reader.onerror = function(err) {
391-
showErrorMessage(err.toString());
392-
};
393-
394-
reader.readAsArrayBuffer(file);
395-
}
396-
397379
function cellSelect(event) {
398-
if (!font) return;
380+
if (!window.font) return;
399381
var firstGlyphIndex = pageSelected*cellCount,
400382
cellIndex = +event.target.id.substr(1),
401383
glyphIndex = firstGlyphIndex + cellIndex;
402-
if (glyphIndex < font.numGlyphs) {
384+
if (glyphIndex < window.font.numGlyphs) {
403385
displayGlyph(glyphIndex);
404386
displayGlyphData(glyphIndex);
405387
}
@@ -423,21 +405,28 @@ <h1>Free Software</h1>
423405
var fontFileName = 'fonts/FiraSansMedium.woff';
424406
document.getElementById('font-name').innerHTML = fontFileName.split('/')[1];
425407

426-
var fileButton = document.getElementById('file');
427-
fileButton.addEventListener('change', onReadFile, false);
408+
form.file.onchange = async function(e) {
409+
form.fontname.innerText = '';
410+
try {
411+
const buf = e.target.files[0].arrayBuffer();
412+
onFontLoaded(opentype.parse(await buf, {lowMemory:true}));
413+
showErrorMessage('');
414+
} catch (err) {
415+
showErrorMessage(err.toString());
416+
}
417+
};
428418

429419
enableHighDPICanvas('glyph-bg');
430420
enableHighDPICanvas('glyph');
431421

432422
prepareGlyphList();
433-
opentype.load(fontFileName, function(err, font) {
434-
var amount, glyph, ctx, x, y, fontSize;
435-
if (err) {
436-
showErrorMessage(err.toString());
437-
return;
438-
}
439-
onFontLoaded(font);
440-
}, {lowMemory:true});
423+
424+
const buf = await fetch(fontFileName).then(res => res.arrayBuffer());
425+
try {
426+
onFontLoaded(opentype.parse(buf, {lowMemory:true}));
427+
} catch (err) {
428+
showErrorMessage(err.toString());
429+
}
441430
</script>
442431
</body>
443432
</html>

0 commit comments

Comments
 (0)