proxy/tm.js

   1
   2 window.wordring = {
   3         socket: null, // TMとの通信用ソケット。
   4         port: 0, // ソケットのポート番号。
   5         edit_mode: false, // 編集モード判別フラグ。
   6         slanguage: '',
   7         tlanguage: '',
   8
   9         segments: null, // パラグラフの連想配列。
  10
  11         // ページのセットアップを行う。
  12         setup: function(){
  13                 wordring.socket = new WebSocket('ws://localhost:' + window.wordring.port + '/');
  14                 wordring.socket.onopen = wordring.onopen;
  15                 wordring.socket.onmessage = wordring.onmessage;
  16                 wordring.socket.onerror = wordring.onerror;
  17                 wordring.socket.onclose = wordring.onclose;
  18
  19                 // 原文のコピーを取る。
  20                 wordring.segments = {};
  21                 var elements = document.getElementsByTagName('span');
  22                 var element;
  23                 var i = 0;
  24                 for(; i < elements.length ; i++)
  25                 {
  26                         element = elements.item(i);
  27                         if(!element.hasAttribute('data-wordring-segment')) continue;
  28
  29                         var id = element.getAttribute('data-wordring-segment');
  30                         wordring.segments[id] = {};
  31                         wordring.segments[id].element = element;
  32                         wordring.segments[id].html = element.innerHTML;
  33                 }
  34         },
  35
  36         onopen: function(ev) {
  37                 document.addEventListener('click', wordring.onclick);
  38                 window.addEventListener('focus', wordring.onfocus);
  39                 window.addEventListener('blur', wordring.onblur);
  40
  41                 wordring.socket.send(JSON.stringify({
  42                         'cmd': 'load',
  43                         'edit_mode': wordring.edit_mode,
  44                 }));
  45
  46                 //if(document.hasFocus) wordring.socket.send(JSON.stringify({
  47                 //      'cmd': 'load',
  48                 //      'edit_mode': wordring.edit_mode,
  49                 //}));
  50                 //wordring.socket.send(JSON.stringify({
  51                 //      'cmd': 'sethtml',
  52                 //      'html': document.body.innerHTML,
  53                 //}));
  54         },
  55
  56         onmessage: function(ev) {
  57                 var json = JSON.parse(ev.data);
  58                 switch(json.cmd)
  59                 {
  60                 case 'set_segment': wordring.set_segment(json); break;
  61                 case 'set_edit_mode': wordring.set_edit_mode(json); break;
  62                 }
  63         },
  64
  65         onerror: function(ev) {
  66                 //document.location.href = 'http://www.yahoo.co.jp/';
  67         },
  68
  69         onclose: function(ev) {
  70                 //alert('接続が閉じられました');
  71         },
  72
  73         onfocus: function(ev) {
  74                 wordring.socket.send(JSON.stringify({
  75                         'cmd': 'focus',
  76                         'edit_mode': wordring.edit_mode,
  77                 }));
  78         },
  79
  80         onblur: function(e) {
  81                 wordring.socket.send(JSON.stringify({
  82                         'cmd': 'blur',
  83                 }));
  84
  85         },
  86
  87         onclick: function(ev) {
  88                 if(!wordring.edit_mode) return;
  89                 ev.preventDefault();
  90                 var node;
  91                 for(node = ev.target; node.nodeType == Node.ELEMENT_NODE; node = node.parentNode) {
  92                         if(node.hasAttribute('data-wordring-segment'))
  93                         {
  94                                 var segment_id = node.getAttribute('data-wordring-segment');
  95                                 wordring.socket.send(JSON.stringify({
  96                                         'cmd': 'edit',
  97                                         'segment_id': segment_id,
  98                                         'source': wordring.segments[segment_id].html,
  99                                         'target': node.innerHtml,
 100                                 }));
 101                                 break;
 102                         }
 103                 }
 104         },
 105
 106         set_segment: function(json) {
 107                 var id = json.id;
 108                 wordring.segments[id].element.innerHTML = json.html;
 109         },
 110
 111         set_edit_mode: function(json) {
 112                 wordring.edit_mode = json.edit_mode;
 113         },
 114 };
 115
 116 window.addEventListener('load', function(ev){
 117         wordring.setup();
 118 });