cziermann
/
Papoh


			
				
					
						
						
							
							<!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>
        </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="inputText">Input:</label>
    </div>
    <textarea id="inputText" style="height:100px;width:200px;">test
123</textarea>
    <p></p>
    <div>
        <label for="outputFigDisplay">Output</label>
    </div>
    <div id="outputFigDisplay"></div>
    
    <script type="text/javascript" src="../../lib/figlet.js"></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;

    /*
        How to use the text output.

        The below call could also have been: figlet.text(...
    */
    figlet(inputText, {
        font: fontName,
        horizontalLayout: hLayout,
        verticalLayout: vLayout
    }, 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);

update(); // init

</script>
    
</body>
</html>