index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   2 <html>
   3 <head>
   4   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   5   <style type="text/css">
   6     <!--
   7      td { font-family: 'monospace'; font-size: 12pt}
   8      textarea { font-size: 20pt; width: 100mm; }
   9       -->
  10   </style>
  11   <title>M17N Input Method by JavaScript</title>
  12   <script src="xex.js"></script>
  13   <script src="mim.js"></script>
  14   <script type="text/javascript">
  15     MIM.debug_print = function (event, ic)
  16     {
  17     if (MIM.debug_nodes)
  18     {
  19       if (! MIM.debug_nodes['status0'])
  20         return;
  21     }
  22   else
  23     {
  24       MIM.debug_nodes = new Array ();
  25       MIM.debug_nodes['status0'] = document.getElementById ('status0');
  26       if (! MIM.debug_nodes['status0'])
  27         return;
  28       MIM.debug_nodes['status1'] = document.getElementById ('status1');
  29       MIM.debug_nodes['keydown'] = document.getElementById ('keydown');
  30       MIM.debug_nodes['keypress'] = document.getElementById ('keypress');
  31       MIM.debug_nodes['keymap0'] = document.getElementById ('keymap0');
  32       MIM.debug_nodes['keymap1'] = document.getElementById ('keymap1');
  33       MIM.debug_nodes['preedit0'] = document.getElementById ('preedit0');
  34       MIM.debug_nodes['preedit1'] = document.getElementById ('preedit1');
  35       MIM.debug_nodes['range0'] = document.getElementById ('range0');
  36       MIM.debug_nodes['range1'] = document.getElementById ('range1');
  37     }
  38   var target = event.target;
  39   var code = event.keyCode;
  40   var ch = event.type == 'keypress' ? event.charCode : 0;
  41   var key = MIM.decode_key_event (event);
  42   var index;
  43
  44   if (event.type == 'keypress' || event.type == 'keydown')
  45     MIM.debug_nodes[event.type].innerHTML = "" + code + "/" + ch + ":" + key + '/' + event.keyIdentifier;
  46   index = (event.type == 'keydown' ? '0' : '1');
  47   if (ic)
  48     MIM.debug_nodes['status' + index].innerHTML = ic.im.load_status;
  49   else
  50     MIM.debug_nodes['status' + index].innerHTML = 'no IM';
  51   MIM.debug_nodes['keymap' + index].innerHTML = ic.state.name;
  52   MIM.debug_nodes['preedit' + index].innerHTML = ic.preedit;
  53   MIM.debug_nodes['range' + index].innerHTML
  54     = ic.range[0]+'-'+ic.range[1]+'-'+ic.cursor_pos;
  55   if (index == 0)
  56     {
  57       MIM.debug_nodes.keypress.innerHTML = '';
  58       MIM.debug_nodes.status1.innerHTML = '';
  59       MIM.debug_nodes.keymap1.innerHTML = '';
  60       MIM.debug_nodes.preedit1.innerHTML = ''
  61       MIM.debug_nodes.range1.innerHTML = ''
  62     }
  63     };
  64
  65     MIM.toggle_log = function ()
  66     {
  67     if (Xex.LogNode)
  68       {
  69         Xex.LogNode.parentNode.removeChild (Xex.LogNode);
  70         Xex.LogNode = false;
  71       }
  72     else
  73       {
  74         Xex.LogNode = document.createElement ('div');
  75         Xex.LogNode.style.border = '1px solid black';
  76         Xex.LogNode.style.font = 'normal normal normal small monospace';
  77         Xex.LogNode.style.width = '100%';
  78         Xex.LogNode.style.minHeight = '300px';
  79         Xex.LogNode.style.maxHeight = '300px';
  80         Xex.LogNode.style.overflow = 'auto';
  81         Xex.Log (null);
  82         document.getElementsByTagName ('body')[0].appendChild (Xex.LogNode);
  83       }
  84   }
  85
  86   </script>
  87 </head>
  88
  89 <body onload="MIM.init ()">
  90 <h4>m17n-lib input method in Javascript</h4>
  91 <table>
  92 <tr><th>textarea</th><td><textarea id="TEXTAREA" name="TEXTAREA"></textarea></td></tr>
  93 <tr><th>text</th><td><form><input type="text" id="TEXT"></form></td></tr></table>
  94 <div style="font-weight: bold;">debug Info</div>
  95 <table border="1">
  96 <tr><th>key</th><th>status</th><th>keycode</th><th>keymap</th><th>preedit</th><th>range</th></tr>
  97 <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>
  98 <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>
  99 </table>
 100 <input type="button" value="Click here to toggle logging!"
 101        onclick="MIM.toggle_log()">
 102 </body>