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         onclose: function(ev) {
  69                 //alert('接続が閉じられました');
  70         },
  71
  72         onfocus: function(ev) {
  73                 wordring.socket.send(JSON.stringify({
  74                         'cmd': 'focus',
  75                         'edit_mode': wordring.edit_mode,
  76                 }));
  77         },
  78
  79         onblur: function(e) {
  80                 wordring.socket.send(JSON.stringify({
  81                         'cmd': 'blur',
  82                 }));
  83
  84         },
  85
  86         onclick: function(ev) {
  87                 if(!wordring.edit_mode) return;
  88                 ev.preventDefault();
  89                 var node;
  90                 for(node = ev.target; node.nodeType == Node.ELEMENT_NODE; node = node.parentNode) {
  91                         if(node.hasAttribute('data-wordring-segment'))
  92                         {
  93                                 var id = node.getAttribute('data-wordring-segment');
  94                                 wordring.socket.send(JSON.stringify({
  95                                         'cmd': 'edit',
  96                                         'id': id,
  97                                         'source': wordring.segments[id].html,
  98                                         'target': node.innerHtml,
  99                                 }));
 100                                 break;
 101                         }
 102                 }
 103         },
 104
 105         set_segment: function(json) {
 106                 var id = json.id;
 107                 wordring.segments[id].element.innerHTML = json.html;
 108         },
 109
 110         set_edit_mode: function(json) {
 111                 wordring.edit_mode = json.edit_mode;
 112         },
 113 };
 114
 115 window.addEventListener('load', function(ev){
 116         wordring.setup();
 117 });