root/websites/modoki/index.html @ 37835

Revision 35854, 27.9 kB (checked in by arccosine, 4 years ago)

Operaの場合、keypress。それ以外はkeydownで動くようにした。

  • Property svn:mime-type set to text/html; charset=UTF-8
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
2<html version="XHTML+RDFa 1.0" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:dct="http://purl.org/dc/terms/">
3<head>
4  <head>
5    <title>Tween Modoki on Web</title>
6    <style type="text/css">
7      html, body, h1, h2, h3, h4, h5, h6, ul, li, input, textarea, div{
8        margin: 0;
9        padding: 0;
10      }
11      body{
12        color: #333333;
13        background: #0D386F;
14        font-size: 12px;
15        font-family: Arial, Verdana;
16        overflow: hidden;
17      }
18      /*iframe {
19        margin-top: 5px;
20        margin-right: 5px;
21        float: right;
22      }*/
23      #content{
24        width: 950px;
25        margin: 0 auto;
26        border-left: 2px solid #ffffff;
27        border-right: 2px solid #ffffff;
28      }
29      #header{
30        width: 940px;
31        height: 20px;
32        color : #D3EDFB;
33        background: #0D386F;
34        font-size: 18px;
35        padding: 5px;
36         border: 2px solid #ffffff;
37        margin: 20px auto 0px;
38      }
39      #footer{
40        background: #ffffff;
41        width: 950px;
42        border-left: 2px solid #ffffff;
43        border-right: 2px solid #ffffff;
44        border-bottom: 2px solid #ffffff;
45        margin: 0px auto;
46      }
47      #out{
48        border-top: 1px solid #808080;
49        font-size: 12px;
50        height: 72px;
51        background: #ffffff;
52        clear : both;
53      }
54      #userInput{
55        width: 100%;
56        height: 40px;
57        clear: both;
58      }
59      #multiple{
60        width: 845px;
61        height: 35px;
62        border: 1px solid #808080;
63        background: #cccccc;
64        float: left;
65        margin-left: 5px;
66      }
67      #multiple:focus {
68        background : #fcfcfc;
69        color: #333333;
70      }
71      .user_icon{
72        width: 32px;
73        height: 32px;
74        float: left;
75      }
76      .user_icon img{
77        width: 32px;
78        height: 32px;
79      }
80      .unread{
81        text-decoration: underline;
82        font-weight: bold;
83       }
84      .sub{
85        margin-right: 2px;
86      }
87      .read{
88        text-decoration: none;
89        font-weight: normal;
90      }
91      .nofollow {
92        color : #3333ff;
93      }
94      .blocked{
95        background: #3333ff;
96        color: #ffffff;
97      }
98      .fav{
99        color: #b11718;
100        font-weight: bold;
101      }
102      ul{
103        list-style:none;
104      }
105      ul#time_line {
106        overflow: auto;
107        background: #ffffff;
108        padding: 0px 5px;
109      }
110      ul#time_line li{
111        height: 32px;
112        clear: left;
113      }
114      .twid{
115        display : none;
116      }
117      #time_line .twtext{
118        height:32px;
119        overflow : hidden;
120      }
121      #time_line .twname{
122        width: 160px;
123        height:32px;
124        float:left;
125        overflow : hidden;
126        padding-left: 5px;
127      }
128
129      #out .user_icon{
130        width: 48px;
131        height: 48px;
132        margin: 12px;
133        display: block;
134      }
135      #out .twname{
136      }
137      #out .twid{
138        float: left;
139        display: block;
140        margin-right: 5px;
141      }
142      #out .twtext{
143        font-size: 16px;
144        overflow : hidden;
145      }
146      #out .nameBlock {
147        position: relative;
148        margin-left: 0px;
149        font-weight : bold;
150        height : 14px;
151        overflow : hidden;
152      }
153      span.tw_link {
154        color: #0000ff;
155      }
156      #text_counter{
157        width: 85px;
158        font-size: 16px;
159        height: 35px;
160        float: right;
161        border: 1px solid #aaa;
162        text-align: center;
163        line-height: 35px;
164        margin-right: 5px;
165        margin-bottom: 5px;
166      }
167      div#tabBox{
168        width: 100%;
169        height: 18px;
170        border-top: 1px solid #808080;
171        margin-bottom: 1px;
172      }
173
174      ul#tab{
175        width: 100%;
176        height: 18px;
177      }
178
179      ul#tab li{
180        float: left;
181        display: block;
182        width: 90px;
183        height: 18px;
184        margin-left: 10px;
185        position: relative;
186        text-align: center;
187        border-left: #808080 solid 1px;
188        border-right: #808080 solid 1px;
189        border-bottom: #808080 solid 1px;
190      }
191
192      ul#tab li a{
193        text-decoration : none;
194        color: #333333;
195      }
196      ul#tab li a:hover {
197        color: #0033ff;
198      }
199      ul#tab li.selected{
200        border-top: #ffffff solid 1px;
201        height:18px;
202        top: -1px;
203        z-index: 1000;
204      }
205
206      div#option_area{
207        background: #ffffff;
208        display: none;
209      }
210
211    </style>
212    <script type="text/javascript">
213      var d = document;
214      var modoki;
215
216      window.addEventListener( 'load', function(){ modoki = new Modoki(); } ,false );
217
218      var Modoki = function(){ this.init(); }; //constractor
219
220      Modoki.prototype = {
221        init : function(){
222        this.config();
223        this.loadKeyBind();
224        this.createHTML();
225        this.twAuth();
226      },
227
228      config : function(){
229        var _self = this;
230        this.specialkey = {
231          '9'  : 'TAB',
232          '8'  : 'BS',
233          '13' : 'ENT',
234          '27' : 'ESC',
235          '37' : 'LEFT',
236          '38' : 'UP',
237          '39' : 'RIGHT',
238          '40' : 'DOWN',
239        }
240        this.keyHandler = {
241          'J'   : function(){ _self.down(); },
242          'DOWN'   : function(){ _self.down(); },
243          'K'   : function(){ _self.up(); },
244          'UP'   : function(){ _self.up(); },
245          'S'   : function(){ _self.fav(); },
246          'E'   : function(){ _self.open_url(); },
247          'R'   : function(){ _self.reply(); },
248          'N'   : function(){ _self.nextTab(); },
249          'RIGHT'   : function(){ _self.nextTab(); },
250          'P'   : function(){ _self.prevTab(); },
251          'LEFT'   : function(){ _self.prevTab(); },
252          'ENT' : function(){ _self.reply(); },
253          'R'   : function(){ _self.retween(); },
254          ' '   : function(){ _self.searchLastUnread(); },
255          'GG'  : function(){ _self.searchTop(); },
256          'S-G' : function(){ _self.searchLast(); },
257          'A'   : function(){ _self.clearUnread(); },
258          'C-H' : function(){ _self.openHome(); },
259          'C-E' : function(){ _self.openTwid(); }
260        };
261        this._altanative = (new Date).getTime();
262        this._crosspost = 0;
263        this._version = '0.55';
264        this._max_id = 0;
265        this.p_name = '';
266        this.p_id = '';
267        this.followers = [];
268        this._outputz_secret = this.readCookie('outputz_secret');
269        this._footer_message = this.readCookie('footer_message');
270        this.nt;
271        this.keyChoice = [];
272        //tab config
273        this.tabSon= {
274          'Recent': { 'selected' : true,  'func' : function(){ _self.getRecent(); } },
275          'Reply' : { 'selected' : false, 'func' : function(){ _self.getReply(); } },
276          'Option': { 'selected' : false, 'func' : function(){ _self.showOptionArea(); } }
277        };
278      },
279
280      loadKeyBind : function(){
281        var _self = this;
282        //get first stroke
283        this.firstStroke = {};
284        for( var key in this.keyHandler ){
285          if( key.length > 1 && !(/DOWN|LEFT|RIGHT|UP|ENT|TAB|BS|ESC|S-|A-|C-/.test(key))){
286            this.firstStroke[key[0]] = 'sw';
287          }
288        }
289        var keybind = function(e){
290          if( /INPUT|TEXTAREA/.test(e.target.tagName) ) return;
291          var keyCode = (e.which || e.keyCode);
292          var pressKey = (e.ctrlKey?'C-':'') + (e.altKey?'A-':'') + (e.shiftKey?'S-':'') + ((typeof _self.specialkey[keyCode] == 'undefined' )?String.fromCharCode(keyCode) : _self.specialkey[keyCode]);
293          if( window.opera ){ pressKey = pressKey.toUpperCase(); }
294          if( _self.firstStroke[pressKey] == 'sw' ){  //w stroke bind
295            _self.keyChoice.push(pressKey);
296            if( typeof _self.keyHandler[_self.keyChoice.join('')] != 'function' ){
297              e.preventDefault();
298              return;
299            }else{
300              pressKey = _self.keyChoice.join('');
301            }
302          }
303          if( typeof _self.keyHandler[pressKey] != 'function' ) return;
304          try{
305            _self.keyChoice.length = 0; //clear keychoice
306            e.preventDefault();    //Stop Default Event
307            _self.keyHandler[pressKey].apply();
308          }catch(d){}
309        };
310        //opera can't stop default event in keydown events.
311        window.addEventListener((window.opera) ? 'keypress' : 'keydown', function(e){ keybind(e); }, false );
312      },
313
314      createHTML : function(){
315        var _self = this;
316        //header
317        document.getElementById('header').appendChild(d.createTextNode('Tween Modoki'+' version '+this._version));
318
319        //content
320        var content = document.getElementById('content');
321
322        //time_line
323        var _time_line = content.appendChild(d.createElement('ul'));
324        _time_line.id = 'time_line';
325        _time_line.innerHTML = 'reading...';
326
327        //option
328        var _option_area = content.appendChild(d.createElement('div'));
329        _option_area.id = 'option_area';
330
331        _option_area.appendChild(d.createTextNode('Option View'));
332
333        //outputz
334        _option_area.appendChild(d.createElement('br'));
335        _option_area.appendChild(d.createTextNode('outputz secret key '));
336
337        var outputz_secret = _option_area.appendChild(d.createElement('input'));
338        outputz_secret.id = 'outputz_secret';
339        outputz_secret.type = 'password';
340
341        if( this._outputz_secret!= '' ){
342          outputz_secret.value = this._outputz_secret;
343        }
344
345        //footer
346        _option_area.appendChild(d.createElement('br'));
347        _option_area.appendChild(d.createTextNode('footer message '));
348
349        var footer_message = _option_area.appendChild(d.createElement('input'));
350        footer_message.id = 'footer_message';
351        footer_message.type = 'text';
352        if( this._footer_message != '' ){
353          footer_message.value = this._footer_message;
354        }
355
356        _option_area.appendChild(d.createElement('br'));
357
358        var save_btn = _option_area.appendChild(d.createElement('input'));
359        save_btn.type = 'button';
360        save_btn.id = 'save_btn';
361        save_btn.value = 'Save';
362        save_btn.addEventListener('click', function(){ _self.writeCookie(); }, false );
363
364
365        //footer
366        var f_cont = d.getElementById('footer');
367
368        //tab
369        var _tabBox = f_cont.appendChild(d.createElement('div'));
370        _tabBox.id = 'tabBox';
371
372        var _tabs = _tabBox.appendChild(d.createElement('ul'));
373        _tabs.id = 'tab';
374
375        for( var name in this.tabSon ){
376          this.createTab( _tabs, name, this.tabSon[name]['selected'], this.tabSon[name]['func'] );
377        }
378
379        //output
380        var _out = f_cont.appendChild(d.createElement('div'));
381        _out.id = 'out';
382        _out.name = 'out';
383
384        //input
385        var _userInput = f_cont.appendChild(d.createElement('div'));
386        _userInput.id = 'userInput';
387        _userInput.name = 'userInput';
388
389        var _multiple = _userInput.appendChild(d.createElement('textarea'));
390        _multiple.id = 'multiple';
391        _multiple.name = 'multiple';
392
393        var _text_counter = _userInput.appendChild(d.createElement('div'));
394        _text_counter.id = 'text_counter';
395        _text_counter.innerHTML = '140';
396
397        _multiple.addEventListener('keypress', function(e){
398            switch( e.which ){
399             case 13:
400                e.preventDefault();
401               _self.postTwitter();
402               this.blur();
403               _text_counter.innerHTML = 140;
404               break;
405             case 9:
406               e.preventDefault();
407               this.blur();
408               break;
409            }
410        }, false );
411
412        var counter = function(e){
413            var m = document.getElementById('multiple').value;
414            var n = 140 - m.length
415            _text_counter.style.color = (n<0) ? '#ff0000':'#000000';
416            _text_counter.innerHTML = n;
417        };
418
419        setInterval( function(){ counter(); }, 500 );
420
421        var resize = function(){
422          var c_height = window.innerHeight - d.getElementById('header').offsetHeight - d.getElementById('footer').offsetHeight - 30;
423          _time_line.style.height = c_height + 'px';
424          _option_area.style.height = c_height + 'px';
425        }
426        resize();
427        window.addEventListener('resize', function(){ resize(); }, false );
428
429
430
431      },
432
433      showOptionArea : function(){
434        this.setSelect('Option');
435      },
436      writeCookie : function(){
437        //save 30days
438        var day = new Date();
439        day.setDate(day.getDate()+30);
440        var dayStr = 'expires=' + day.toGMTString() + ';';
441
442        var _self = this;
443        var write_datas = function(key){
444          var keyData = d.getElementById(key).value;
445          _self[key]  = keyData;
446          var key_str = key + '=' + escape(keyData) + ';';
447          d.cookie = key_str + dayStr;
448        }
449
450        var saveDatas = ['outputz_secret', 'footer_message' ];
451        for( var i=0, l=saveDatas.length; i<l; i++ ){
452          write_datas(saveDatas[i]);
453        }
454
455        var fl_str = '';
456        for( var i=0, l=this.followers.length; i<l; i++ ){
457          fl_str += this.followers[i] + ',';
458        }
459        fl_str = fl_str.substring(0, fl_str.length-1);
460
461      },
462      readCookie : function(key){
463        var ck = d.cookie;
464        var dt = ck.split(';');
465        key = key.replace(/\s/g,'');
466
467        for( var i=0, l=dt.length; i<l; i++){
468          var w = dt[i].split('=');
469          w[0] = w[0].replace(/\s/g, '');
470          if( w[0] == key ){
471            return unescape(w[1]);
472          }
473        }
474        return '';
475      },
476      getScrollPos : function(){
477        return d.documentElement.scrollTop || d.body.scrollTop;
478      },
479      searchTop : function(){
480        this.clearBlocked();
481        var tops = d.getElementById('time_line').getElementsByTagName('li');
482        tops[0].className = tops[0].className.replace(/read|unread/,'blocked');
483        d.getElementById('time_line').scrollTop = 0;
484        d.getElementById('out').innerHTML = tops[0].innerHTML;
485      },
486      searchLast : function(){
487        this.clearBlocked();
488        var lasts = d.getElementById('time_line').getElementsByTagName('li');
489        lasts[lasts.length-1].className =lasts[lasts.length-1].className.replace(/read|unread/,'blocked');
490        var y = lasts[lasts.length-1].offsetTop;
491        d.getElementById('time_line').scrollTop = y;
492        d.getElementById('out').innerHTML = lasts[lasts.length-1].innerHTML;
493      },
494      searchLastUnread : function(){
495        this.clearBlocked();
496        //move
497        var line=d.getElementsByClassName('unread');
498        if( line.length == 0 ){
499          //go to last tl
500          var lasts = d.getElementById('time_line').getElementsByTagName('li');
501          lasts[lasts.length-1].className =lasts[lasts.length-1].className.replace(/read|unread/,'blocked');
502          var y = lasts[lasts.length-1].offsetTop;
503          d.getElementById('time_line').scrollTop = y;
504          d.getElementById('out').innerHTML = lasts[lasts.length-1].innerHTML;
505        }else{
506          //go to last unread
507          line[0].className = line[0].className.replace(/read|unread/,'blocked');
508          var y = line[0].offsetTop;
509          d.getElementById('time_line').scrollTop = y;
510        }
511      },
512      clearUnread : function(){
513        var line=d.getElementsByClassName('unread');
514        for( var i=line.length; i-->0; line[i].className = line[i].className.replace(/unread/,'read') );
515      },
516      clearBlocked : function(){
517        //clear blocked
518        var ck = d.getElementsByClassName('blocked');
519        if( ck.length != 0 ){
520          ck[0].className = ck[0].className.replace(/blocked|unread/,'read');
521        }
522      },
523      createTab : function( node, tabName, isSelected, tabFunc ){
524        var tab = node.appendChild(d.createElement('li'));
525        tab.id = tabName;
526        if( isSelected ) { tab.className = 'selected'; }
527        var tabLink = tab.appendChild(d.createElement('a'));
528        tabLink.appendChild(d.createTextNode(tabName));
529        if( typeof tabFunc == 'function' ){
530          tab.addEventListener('click', tabFunc, false );
531        }
532      },
533      setSelect : function(id){
534        if( id == 'Option' ){
535          d.getElementById('option_area').style.display = 'block';
536          d.getElementById('time_line').style.display = 'none';
537        }else{
538          d.getElementById('option_area').style.display = 'none';
539          d.getElementById('time_line').style.display = 'block';
540        }
541
542        var tab = d.getElementById('tab');
543        var ns = d.getElementsByClassName('selected');
544        ns[0].className = '';
545        d.getElementById(id).className = 'selected';
546
547      },
548      getRecent : function(){
549        this.setSelect('Recent');
550        var tl = d.getElementById('time_line').getElementsByTagName('li');
551        for( var i=tl.length; i-- >0;  ){
552          tl[i].style.display = '';
553        }
554        var b = d.getElementsByClassName('blocked');
555        if( b[0] ){
556          d.getElementById('time_line').scrollTop = b[0].offsetTop - 32;
557        }
558           
559       },
560      getReply: function(){
561        this.setSelect('Reply');
562
563        var tl = d.getElementById('time_line').getElementsByTagName('li');
564        for( var i=tl.length; i-- >0; ){
565          var text = tl[i].getElementsByClassName('twtext')[0].innerHTML;
566          var name = '@' + this.p_name;
567          var m = text.match(name);
568          if( m == null ){
569            tl[i].style.display = 'none';
570          }
571        }
572      },
573      nextTab : function(){
574        this.moveTab(true);
575      },
576      prevTab : function(){
577        this.moveTab(false);
578      },
579      moveTab : function(flg){
580        var tabFlg = ['Recent','Reply','Option'];
581        var tab = document.getElementById('tab');
582        var key = 0;
583        for( var i=0,l=tab.childNodes.length; i<l; i++ ){
584          if( tab.childNodes[i].className == 'selected' ){
585            key = (flg) ? i+1 : i-1;
586            tab.childNodes[i].className = '';
587          }
588        }
589        key = (key < 0 ) ? 2 : ( key > 2 ) ? 0 : key;
590        tab.childNodes[key].className = 'selected';
591        this.tabSon[tabFlg[key]]['func'].apply();
592      },
593      down : function(){
594        this.keymove(true);
595      },
596      up   : function(){
597        this.keymove(false);
598      },
599      keymove : function(flg){
600        var diff = flg ? 1 : -1;
601        var check = d.getElementsByClassName('blocked');
602
603        if( check.length == 0 ){
604          d.getElementById('out').innerHTML = this.nt[0].innerHTML;
605          this.nt[0].className = this.nt[0].className.replace(/read|unread/, 'blocked read');
606          d.getElementById('time_line').scrollTop = 0;
607        }else{
608          for( var i=0, l=this.nt.length; i<l; i++ ){
609            if( this.nt[i].className.indexOf('blocked') != -1 ){
610              d.getElementById('out').innerHTML = this.nt[i+diff].innerHTML;
611              this.nt[i].className = this.nt[i].className.replace(/blocked|unread/,'read');
612              this.nt[i+diff].className = this.nt[i+diff].className.replace(/read|unread/,'blocked');
613              var sc = (this.nt[i+diff].offsetHeight) * diff;
614              d.getElementById('time_line').scrollTop += sc;
615              break;
616            }
617          }
618        }
619      },
620      mousemove : function(node){
621        //clear blocked   
622        var ck = d.getElementsByClassName('blocked');
623        if( ck.length != 0 ){
624          ck[0].className = ck[0].className.replace(/blocked|unread/,'read');
625        }
626        node.className = node.className.replace(/read|unread/, 'blocked' );
627        if( node.className.search(/blocked/) == -1 ){
628          node.parentNode.className = node.parentNode.className.replace(/read|unread/, 'blocked' );
629        }
630        d.getElementById('out').innerHTML = node.parentNode.innerHTML;
631      },
632      postTwitter : function(){
633        var text = d.getElementById('multiple').value;
634        if( this._footer_message != '' ){
635          text += this._footer_message;
636        }
637        text = (text.length>140) ? text.substring(0,140) : text;
638        if( text.length != 0 ){
639          var url = 'https://twitter.com/statuses/update.xml?status=' + encodeURIComponent(text) + '&source=modoki';
640          this.crossDomainPost(url);
641          //for outputz
642          if( this._outputz_secret != '' ){
643            var url = 'http://outputz.com/api/post?key=' + this._outputz_secret + '&uri=http://tiwtter.com/&size=' + text.length;
644            this.crossDomainPost(url);
645          }
646        }
647        d.getElementById('multiple').value = '';
648      },
649
650      fav : function(){
651        var t = d.getElementsByClassName('blocked');
652        var url = 'https://twitter.com/favorites/create/' + t[0].id + '.xml';
653        this.crossDomainPost(url);
654        t[0].className += ' fav';
655      },
656
657      open_url : function(){
658        var t = d.getElementsByClassName('blocked');
659        var m = t[0].innerHTML.match(/https?:\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+/g);
660        if( m.length > 1 ){ window.open(m[1]); }
661      },
662      openHome : function(){
663        var t = d.getElementsByClassName('blocked');
664        var twid =t[0].getElementsByClassName('twid')[0].innerHTML.replace(/\/$/,'');
665        window.open( 'https://twitter.com/' + twid );
666      },
667openTwid : function(){
668        var t = d.getElementsByClassName('blocked');
669        var m =t[0].innerHTML.match(/@[a-zA-Z0-9]+/g);
670        if( m.length > 0 ){
671          window.open( 'https://twitter.com/' + m[0].replace(/@/,'') );
672        };
673      },
674      reply : function(){
675        var t = d.getElementsByClassName('blocked');
676        var repId = t[0].getElementsByClassName('twid')[0].innerHTML.replace(/\/$/,'');
677        var mult = d.getElementById('multiple');
678        mult.value += '@' + repId + ' ';
679        mult.focus();
680      },
681
682      retween: function(){
683        var t = d.getElementsByClassName('blocked');
684        var repId = t[0].getElementsByClassName('twid')[0].innerHTML.replace(/\/$/,'');
685        var retext = t[0].getElementsByClassName('twtext')[0].innerHTML;
686        var mult = d.getElementById('multiple');
687        mult.value += 'RT @' + repId + ' ' + retext;
688        mult.focus();
689      },
690
691
692      crossDomainPost : function( url ){
693        this._crosspost++;
694        var iframe = document.createElement('iframe');
695        iframe.name = 'cross_domain_post' + this._crosspost;
696        iframe.style.display = 'none';
697        iframe.style.position = 'absolute';
698        iframe.style.top = '10px';
699        iframe.style.width = '600px';
700        iframe.style.height= '480px';
701        iframe.style.background = '#ffffff';
702
703        var form = document.createElement('form');
704        form.action = url;
705        form.target = 'cross_domain_post' + this._crosspost;
706        form.method = 'POST';
707        form.style.display = 'none';
708        document.body.appendChild(form);
709
710        var cnt = 0;
711        var crosonload = iframe.onload = function(){
712          if( cnt++ == 0 ){
713            setTimeout( function(){ form.submit(); }, 0 );
714          }else{
715            setTimeout(function(){
716                iframe.parentNode.removeChild(iframe);
717                form.parentNode.removeChild(form);
718                },100);
719          }
720        };
721        document.body.appendChild(iframe);
722      },
723
724      loadTimeLine : function(){
725        this.loadTwitter('https://twitter.com/statuses/friends_timeline.json');
726      },
727
728      loadTwitter : function( api_url ){
729        this._altanative++;
730
731        this.nt =d.getElementById('time_line').getElementsByTagName('li');
732        var _max_id = (this.nt.length!=0) ? this.nt[this.nt.length-1].id : '';
733        var url = api_url + '?callback=cb&count=200' + ((_max_id!='')?'&since_id='+_max_id:'') + '&alter=' + this._altanative;
734
735        /*//debug
736        var rn = function( n ){
737          var a = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ01234567890!@#$%^&*()_+|~';
738          a = a.split('');
739          var s='';
740          var l=a.length;
741          for( var i=0; i<n; i++ ){
742            s += a[Math.floor(Math.random()*l)];
743          }
744          return s;
745        };
746        for( var i=0; i<200; i++ ){
747          obj = new Object();
748          obj.id = i;
749          obj['user'] = new Object();
750          obj.user.profile_image_url = 'https://s3.amazonaws.com/twitter_production/profile_images/446961440/miku_tome_normal.png';
751          obj.user.screen_name = rn(10);
752          obj.user.name = rn(20);
753          //obj.user.name = '����������������������������������������';
754          obj.text = rn(140);
755
756          createLiTag(obj, i);
757        }
758        //*/this.getJSON(url);
759
760      },
761
762      twAuth : function(){
763       var url = 'https://twitter.com/account/verify_credentials.json?callback=ta';
764       this.getJSON(url);
765      },
766      twFollower : function(id){
767        var url = 'https://twitter.com/followers/ids/' + id + '.json?callback=fa';
768        this.getJSON(url);
769      },
770      getJSON : function(url, func){
771        var head = d.getElementsByTagName('head')[0];
772        var script = head.appendChild(d.createElement('script'));
773        script.src = url;
774        script.type = 'text/javascript';
775        script.charset = 'UTF-8';
776        if( typeof func != 'undefined' ){
777          script.addEventListener( 'load', function(){ func.apply(); } ,false );
778        }
779      }
780
781      };
782
783    var ta = function(data){
784        modoki.p_name = data.screen_name;
785        modoki.p_id = data.id;
786        if( modoki.followers.length == 0 ){
787          modoki.twFollower(data.id);
788        }else{
789          stLoad();
790        }
791    };
792
793    var fa = function(data){
794      modoki.followers=data.sort();
795      modoki.followers.push(modoki.p_id);
796      stLoad();
797    };
798
799    var stLoad = function(){
800      document.getElementById('time_line').innerHTML = '';
801      modoki.loadTimeLine();
802      var firstTime = function(){
803        var line = d.getElementsByClassName('unread');
804        if(line.length!=0){
805          modoki.clearUnread();
806        }else{
807          setTimeout( arguments.callee, 100 );
808        }
809      };
810      firstTime();
811      modoki.loop = setInterval( function(){ modoki.loadTimeLine(); }, 45000 );
812    };
813
814      var cb = function(data){
815        for( var i=data.length; i-- > 0; createLiTag(data[i], i) );
816        var _script = d.getElementsByTagName('script');
817        _script[_script.length-1].parentNode.removeChild(_script[_script.length-1]);
818      };
819
820      var createLiTag = function(obj, n){
821        //check obj
822        var o = d.getElementById(obj.id);
823        if( o != null ){ return };
824
825        var tl = document.getElementById('time_line');
826
827        //create
828        var liTag = tl.insertBefore(d.createElement('li'), null);
829        liTag.id = obj.id;
830        liTag.className = 'unread';
831        if( obj['favorited'] ){
832          liTag.className += ' fav';
833        }
834        var isFrend = modoki.followers.indexOf(obj['user']['id']);
835        if( isFrend == -1 ){
836          liTag.className += ' nofollow';
837        }
838        liTag.addEventListener('click', function(e){  modoki.mousemove(e.target); }, false );
839
840        var imgDiv = liTag.appendChild(d.createElement('div'));
841        imgDiv.className = 'sub user_icon';
842
843        var imgTag = imgDiv.appendChild(d.createElement('img'));
844        imgTag.src = obj['user']['profile_image_url'];
845        imgTag.style.width = '100%';
846        imgTag.style.height= '100%';
847
848        var nameBlock = liTag.appendChild(d.createElement('div'));
849        nameBlock.className = 'nameBlock';
850
851        var twidDiv = nameBlock.appendChild(d.createElement('div'));
852        twidDiv.appendChild(d.createTextNode(obj['user']['screen_name'] + '/'));
853        twidDiv.className = 'sub twid';
854
855        var nameDiv = nameBlock.appendChild(d.createElement('div'));
856        nameDiv.appendChild(d.createTextNode(obj['user']['name']));
857        nameDiv.className = 'sub twname';
858
859        var textDiv = liTag.appendChild(d.createElement('div'));
860        var text = obj['text'];
861        text = text.replace(/&lt;3/g,'&#9825;');
862
863        //link
864        text = text.replace(/(https?\:[\w\.\~\-\/\?\&\+\=\:\@\%\;\#\%]+)/,'<span class="tw_link">$1</span>');
865
866        textDiv.innerHTML = text;
867        textDiv.className = 'sub twtext';
868
869      };
870    </script>
871  </head>
872  <body>
873    <div id="header"></div>
874    <div id="content"></div>
875    <div id="footer"></div>
876  </body>
877</html>
Note: See TracBrowser for help on using the browser.