proxy/tm.js

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