topical media & game development
lib-js-terminal-sample-style-settings.htm / htm
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>termlib Style Settings Sample</title>
<script language="JavaScript" type="text/javascript" src="lib-js-terminal-termlib.js"></script>
<script type="text/javascript">
<!--
// *** text wrap sample ***
// mass:werk, N.Landsteiner 2007
/*
define a new style for bold
style-code: 16,
mark up: 'b',
HTML-opening part: '<b>'
HTML-closing part: '<\/b>'
use method TermGlobals.assignStyle( <style-code>, <markup>, <HTMLopen>, <HTMLclose> )
<style-code> must be a power of 2 between 0 and 256 (<style-code> = 2^n, 0 <= n <= 7)
*/
TermGlobals.assignStyle( 16, 'b', '<b>', '<\/b>' );
/*
define a new style for small
style-code: 32,
mark up: 'm' (for "miniature", "s" already in use for strike),
HTML-opening part: '<span style="font-size:10px; letter-spacing:2px;">'
HTML-closing part: '<\/span>'
*/
TermGlobals.assignStyle( 32, 'm', '<span style="font-size:10px; letter-spacing:2px;">', '<\/span>' );
// custom styles done
var text = [
'This is a sample text to demonstrate our custom styles %+bbold%-b and %+mminature%-m.',
'',
'With some luck, the following lines are of same width:',
'',
' Normal: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
' Bold: %+bABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%-b',
' Miniature: %+mABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%-m',
'',
'This is the list of our styles in use:',
'',
' * %+rreverse%-r (predefined)',
' * %+uunderline%-u (predefined)',
' * %+iitalics%-i (predefined)',
' * %+sstrike%-s (predefined)',
' * %+bbold%-b (custom style)',
' * %+mminature%-m (custom style)',
'',
'Use %+bbold%-b only with a CSS definition of "letter-spacing: 1px;" for ".term", since bold letters do need some extra space as they are rendered.',
'We recommend not to change style #1 ("r": reverse), since this style is used by the cursor in block mode.',
' '
];
var help = [
'%+r **** termlib.js style config sample **** %-r',
' ',
' This sample installs and uses a custom %+bbold%-b style.',
' ',
' * type "test" for a sample text using bold.',
' * type "help" to see this page.',
' * type "exit" to quit.',
' '
]
var term;
function termOpen() {
if ((!term) || (term.closed)) {
term = new Terminal(
{
x: 220,
y: 70,
termDiv: 'termDiv',
bgColor: '#232e45',
greeting: help.join('\%n'),
handler: termHandler,
exitHandler: termExitHandler,
wrapping: true
}
);
term.open();
// dimm UI text
var mainPane = (document.getElementById)?
document.getElementById('mainPane') : document.all.mainPane;
if (mainPane) mainPane.className = 'lh15 dimmed';
}
}
function termExitHandler() {
// reset the UI
var mainPane = (document.getElementById)?
document.getElementById('mainPane') : document.all.mainPane;
if (mainPane) mainPane.className = 'lh15';
}
function termHandler() {
// default handler + exit
this.newLine();
if (this.lineBuffer.match(/^\s*exit\s*/i)) {
this.clear();
this.write(text);
}
else if (this.lineBuffer.match(/^\s*help\s*
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
