Initial commit
This commit is contained in:
158
node/TestCli/node_modules/figlet/examples/front-end/index.htm
generated
vendored
Normal file
158
node/TestCli/node_modules/figlet/examples/front-end/index.htm
generated
vendored
Normal file
@@ -0,0 +1,158 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user