<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
- td { font-family: 'monospace'; font-size: 12pt; width: 40mm}
+ td { font-family: 'monospace'; font-size: 12pt}
textarea { font-size: 20pt; width: 100mm; }
-->
</style>
<title>M17N Input Method by JavaScript</title>
+ <script src="xex.js"></script>
<script src="mim.js"></script>
+ <script type="text/javascript">
+ MIM.debug_print = function (event, ic)
+ {
+ if (MIM.debug_nodes)
+ {
+ if (! MIM.debug_nodes['status0'])
+ return;
+ }
+ else
+ {
+ MIM.debug_nodes = new Array ();
+ MIM.debug_nodes['status0'] = document.getElementById ('status0');
+ if (! MIM.debug_nodes['status0'])
+ return;
+ MIM.debug_nodes['status1'] = document.getElementById ('status1');
+ MIM.debug_nodes['keydown'] = document.getElementById ('keydown');
+ MIM.debug_nodes['keypress'] = document.getElementById ('keypress');
+ MIM.debug_nodes['keymap0'] = document.getElementById ('keymap0');
+ MIM.debug_nodes['keymap1'] = document.getElementById ('keymap1');
+ MIM.debug_nodes['preedit0'] = document.getElementById ('preedit0');
+ MIM.debug_nodes['preedit1'] = document.getElementById ('preedit1');
+ MIM.debug_nodes['range0'] = document.getElementById ('range0');
+ MIM.debug_nodes['range1'] = document.getElementById ('range1');
+ }
+ var target = event.target;
+ var code = event.keyCode;
+ var ch = event.type == 'keypress' ? event.charCode : 0;
+ var key = MIM.decode_key_event (event);
+ var index;
+
+ if (event.type == 'keypress' || event.type == 'keydown')
+ MIM.debug_nodes[event.type].innerHTML = "" + code + "/" + ch + ":" + key + '/' + event.keyIdentifier;
+ index = (event.type == 'keydown' ? '0' : '1');
+ if (ic)
+ MIM.debug_nodes['status' + index].innerHTML = ic.im.load_status;
+ else
+ MIM.debug_nodes['status' + index].innerHTML = 'no IM';
+ MIM.debug_nodes['keymap' + index].innerHTML = ic.state.name;
+ MIM.debug_nodes['preedit' + index].innerHTML = ic.preedit;
+ MIM.debug_nodes['range' + index].innerHTML
+ = ic.range[0]+'-'+ic.range[1]+'-'+ic.cursor_pos;
+ if (index == 0)
+ {
+ MIM.debug_nodes.keypress.innerHTML = '';
+ MIM.debug_nodes.status1.innerHTML = '';
+ MIM.debug_nodes.keymap1.innerHTML = '';
+ MIM.debug_nodes.preedit1.innerHTML = ''
+ MIM.debug_nodes.range1.innerHTML = ''
+ }
+ };
+
+ MIM.toggle_log = function ()
+ {
+ if (Xex.LogNode)
+ {
+ Xex.LogNode.parentNode.removeChild (Xex.LogNode);
+ Xex.LogNode = false;
+ }
+ else
+ {
+ Xex.LogNode = document.createElement ('div');
+ Xex.LogNode.style.border = '1px solid black';
+ Xex.LogNode.style.font = 'normal normal normal small monospace';
+ Xex.LogNode.style.width = '100%';
+ Xex.LogNode.style.minHeight = '300px';
+ Xex.LogNode.style.maxHeight = '300px';
+ Xex.LogNode.style.overflow = 'auto';
+ Xex.Log (null);
+ document.getElementsByTagName ('body')[0].appendChild (Xex.LogNode);
+ }
+ }
+
+ </script>
</head>
-<body onload="MIM.init_debug ()">
-<h1>m17n-lib input method in Javascript</h1>
-<h3>textarea</h3>
-<textarea name="TEXTAREA"></textarea>
-<h3>text</h3>
-<form><input type="text"></form>
-<br>
-<h3>debug Info</h3>
+<body onload="MIM.init ()">
+<h4>m17n-lib input method in Javascript</h4>
+<table>
+<tr><th>textarea</th><td><textarea id="TEXTAREA" name="TEXTAREA"></textarea></td></tr>
+<tr><th>text</th><td><form><input type="text" id="TEXT"></form></td></tr></table>
+<div style="font-weight: bold;">debug Info</div>
<table border="1">
-<tr><th>key</th><th>keycode</th><th>status</th><th>keyseq</th><th>range</th></tr>
-<tr><th>down</th><td id="keydown">0</td><td id="status0"><td id="keyseq0"></td><td id="range0"></td></tr>
-<tr><th>press</th><td id="keypress">0</td><td id="status1"><td id="keyseq1"></td><td id="range1"></td></tr>
+<tr><th>key</th><th>status</th><th>keycode</th><th>keymap</th><th>preedit</th><th>range</th></tr>
+<tr><th>down</th><td id="status0"></td><td id="keydown">0</td><td id="keymap0"></td><td id="preedit0"></td><td id="range0"></td></tr>
+<tr><th>press</th><td id="status1"></td><td id="keypress">0</td><td id="keymap1"></td><td id="preedit1"></td><td id="range1"></td></tr>
</table>
-<br>
-<form><input type="text" id="text" style="width:100mm"></form>
+<input type="button" value="Click here to toggle logging!"
+ onclick="MIM.toggle_log()">
</body>