174 lines
5.2 KiB
HTML
174 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>FIGlet Example</title>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<label for="font">Font:</label>
|
|
<select id="font">
|
|
<option value="3D Diagonal">3D Diagonal</option>
|
|
<option value="Dancing Font">Dancing Font</option>
|
|
<option value="Ghost">Ghost</option>
|
|
<option value="Graffiti">Graffiti</option>
|
|
<option value="Patorjk's Cheese">Patorjk's Cheese</option>
|
|
<option value="Standard" selected>Standard</option>
|
|
<option value="Pagga">Pagga</option>
|
|
<option value="Pawp">Pawp</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="hLayout">Horizontal Layout:</label>
|
|
<select id="hLayout">
|
|
<option value="default" selected>Default</option>
|
|
<option value="full">Full</option>
|
|
<option value="fitted">Fitted</option>
|
|
<option value="controlled smushing">Controlled Smushing</option>
|
|
<option value="universal smushing">Universal Smushing</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="vLayout">Vertical Layout:</label>
|
|
<select id="vLayout">
|
|
<option value="default" selected>Default</option>
|
|
<option value="full">Full</option>
|
|
<option value="fitted">Fitted</option>
|
|
<option value="controlled smushing">Controlled Smushing</option>
|
|
<option value="universal smushing">Universal Smushing</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="width">Width:</label>
|
|
<select id="width">
|
|
<option value="none">none</option>
|
|
<option value="40" selected>40</option>
|
|
<option value="41">41</option>
|
|
<option value="42">42</option>
|
|
<option value="43">43</option>
|
|
<option value="44">44</option>
|
|
<option value="45">45</option>
|
|
<option value="80">80</option>
|
|
<option value="81">81</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="whitespaceBreak">Break on Whitespace (if width set):</label>
|
|
<select id="whitespaceBreak">
|
|
<option value="false">false</option>
|
|
<option value="true" selected>true</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="inputText">Input:</label>
|
|
</div>
|
|
<textarea id="inputText" style="height: 100px; width: 200px">
|
|
test
|
|
123</textarea
|
|
>
|
|
<p></p>
|
|
<div>
|
|
<label for="outputFigDisplay">Output</label>
|
|
</div>
|
|
<pre>
|
|
0000000000111111111122222222223333333333444444444455555555556666666666777777777788888888889999999999</pre
|
|
>
|
|
<div id="outputFigDisplay"></div>
|
|
|
|
<script type="text/javascript" src="../../lib/figlet.js?1"></script>
|
|
|
|
<script>
|
|
if (window.location.protocol === "file:") {
|
|
alert("fetch APi does not support file: protocol.");
|
|
}
|
|
|
|
figlet.defaults({
|
|
fontPath: "../../fonts",
|
|
});
|
|
|
|
figlet.preloadFonts(["Standard", "Ghost"], function () {
|
|
console.log("prefetching done (only did it for 2 fonts)!");
|
|
});
|
|
|
|
/*
|
|
Generates the put
|
|
*/
|
|
var update = function () {
|
|
var fontName = document.querySelector("#font option:checked").value,
|
|
inputText = document.querySelector("#inputText").value,
|
|
vLayout = document.querySelector("#vLayout option:checked").value,
|
|
hLayout = document.querySelector("#hLayout option:checked").value,
|
|
width = document.querySelector("#width option:checked").value,
|
|
whitespaceBreak = document.querySelector(
|
|
"#whitespaceBreak option:checked"
|
|
).value;
|
|
|
|
/*
|
|
How to use the text output.
|
|
|
|
The below call could also have been: figlet.text(...
|
|
*/
|
|
figlet(
|
|
inputText,
|
|
{
|
|
font: fontName,
|
|
horizontalLayout: hLayout,
|
|
verticalLayout: vLayout,
|
|
width: width === "none" ? undefined : width,
|
|
whitespaceBreak:
|
|
width === "none"
|
|
? undefined
|
|
: whitespaceBreak === "true"
|
|
? true
|
|
: false,
|
|
},
|
|
function (err, text) {
|
|
if (err) {
|
|
console.log("something went wrong...");
|
|
console.dir(err);
|
|
return;
|
|
}
|
|
document.querySelector("#outputFigDisplay").innerHTML =
|
|
"<pre>" + text + "</pre>";
|
|
}
|
|
);
|
|
|
|
/*
|
|
How to read the metadata for a font
|
|
*/
|
|
/*
|
|
figlet.metadata(fontName, function(err, options, headerComment) {
|
|
if (err) {
|
|
console.log('something went wrong...');
|
|
console.dir(err);
|
|
return;
|
|
}
|
|
console.dir(options);
|
|
console.log(headerComment);
|
|
});
|
|
*/
|
|
};
|
|
|
|
/*
|
|
GUI Controls
|
|
*/
|
|
|
|
document.querySelector("#hLayout").addEventListener("change", update);
|
|
document.querySelector("#vLayout").addEventListener("change", update);
|
|
document.querySelector("#font").addEventListener("change", update);
|
|
document.querySelector("#inputText").addEventListener("keyup", update);
|
|
document.querySelector("#width").addEventListener("change", update);
|
|
document
|
|
.querySelector("#whitespaceBreak")
|
|
.addEventListener("change", update);
|
|
|
|
update(); // init
|
|
</script>
|
|
</body>
|
|
</html>
|