root/websites/modoki/index.html @ 32773

Revision 32773, 9.7 kB (checked in by arccosine, 4 years ago)

Fix CSS and more

  • 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      html, body{
12        height: 100%;
13      }
14      body{
15        color: #333333;
16        background: #aaaaaa;
17        font-size: 9pt;
18        font-family: Arial, Verdana;
19      }
20      #content{
21        width: 100%;
22        height: 100%;
23      }
24      #main_content{
25        padding-top: 25px;
26        padding-bottom: 120px;
27      }
28      #header{
29        width: 100%;
30        position: fixed;
31        background: #999999;
32        height: 25px;
33        top: 0;
34      }
35      #header_content{
36        background: #5698cb;
37        height: 100%;
38        font-size: 18px;
39      }
40      #footer{
41        width: 100%;
42        position: fixed;
43        background: #999999;
44        bottom: 0;
45      }
46      #footer_content{
47        background: #ffffff;
48      }
49      #out{
50        height: 50px;
51        background: #f6f6f6;
52        border: 1px solid #aaa;
53        font-size: 14px;
54      }
55      #userInput{
56        height: 40px;
57      }
58      #multiple{
59        width: 100%;
60        height: 100%;
61        border: 1px solid #aaa;
62        background: #ffffff;
63      }
64      #user_icon img{
65        width: 16px;
66        height: 16px;
67      }
68      #out img{
69        width: 32px;
70        height: 32px;
71      }
72      .blocked{
73        border: 1px solid #00f;
74      }
75      .noborder{
76        border: 0 none;
77      }
78      .unread{
79        text-decoration: underline;
80        font-weight: bold;
81       }
82      .sub{
83        margin-right: 5px;
84        float: left;
85      }
86      .read{
87        text-decoration: none;
88        font-weight: normal;
89      }
90      .fav{
91        color: #f00;
92      }
93      ul{
94        list-style:none;
95      }
96      li{
97        height: 16px;
98        clear: left;
99      }
100    </style>
101    <script type="text/javascript">
102      var d = document;
103
104      var content_load = function(){
105        var modoki = new Modoki();
106      };
107      var Modoki = function(){ this.init(); }; //constractor
108      Modoki.prototype.init = function(){
109        this.config();
110        this.loadKeyBind();
111        this.createHTML();
112        this.loadData();
113        var _self = this;
114        var loop = setInterval( function(){ _self.loadData(); }, 30000 );
115      };
116
117      Modoki.prototype.config = function(){
118        var _self = this;
119        this.keyHandler = {
120          "j" : function(){ _self.down(); },
121          "k" : function(){ _self.up(); },
122          "s" : function(){ _self.fav(); },
123          "e" : function(){ _self.open_url(); }
124        };
125        this._altanative = (new Date).getTime();
126        this._crosspost = 0;
127        this._version = "0.21";
128      };
129      Modoki.prototype.loadKeyBind = function(){
130        var _self = this;
131        var keybind = function(e){
132          var t = e.target;
133          if( t.nodeType == 1 ){
134             var tn = t.tagName.toLowerCase();
135             if( tn == "input" || tn == "textarea" ){
136                 return;
137             }
138             var pressKey = String.fromCharCode(e.which);
139             if( typeof _self.keyHandler[pressKey] == "function" ){
140                 e.preventDefault();    //Stop Default Event
141                 _self.keyHandler[pressKey].apply();
142             }
143          }
144        };
145        document.addEventListener("keypress", keybind, false);
146      };
147      Modoki.prototype.createHTML = function(){
148        var _self = this;
149        //header
150        var _header_content = d.createElement("div");
151        _header_content.id = "header_content";
152        _header_content.appendChild(d.createTextNode("Tween Modoki"+" version "+this._version));
153        document.getElementById("header").appendChild(_header_content);
154
155        //content
156        var box = d.createElement("div");
157        box.id = "main_content";
158        var _tilme_line = box.appendChild(d.createElement("ul"));
159        _tilme_line.id = "time_line";
160        document.getElementById("content").appendChild(box);
161
162        //footer
163        var f_cont = d.createElement("div");
164        f_cont.id = "footer_content";
165
166        //output
167        var _out = f_cont.appendChild(d.createElement("div"));
168        _out.id = "out";
169        _out.name = "out";
170
171        //input
172        var _userInput = f_cont.appendChild(d.createElement("div"));
173        _userInput.id = "userInput";
174        _userInput.name = "userInput";
175
176        var _multiple = _userInput.appendChild(d.createElement("textarea"));
177        _multiple.id = "multiple";
178        _multiple.name = "multiple";
179
180        _multiple.addEventListener("keypress", function(e){
181            if( e.which == 13 ){  //if return
182              e.preventDefault();
183              _self.postTwitter();
184              this.blur();
185            }else if( e.which == 9){ //if tab
186              e.preventDefault();
187              this.blur();
188            }
189
190        }, false );
191
192        document.getElementById("footer").appendChild(f_cont);
193      };
194      Modoki.prototype.down = function(){
195        this.move(true);
196      };
197      Modoki.prototype.up   = function(){
198        this.move(false);
199      };
200      Modoki.prototype.move = function(flg){
201        var diff = flg ? 1 : -1;
202
203        var check = d.getElementsByClassName("blocked");
204        var nt = d.getElementsByTagName("li");
205
206        if( check.length == 0 ){
207          d.getElementById("out").innerHTML = nt[0].innerHTML;
208          nt[0].className = nt[0].className.replace(/unread/, "blocked read ");
209        }else{
210          for( var i=0, l=nt.length; i<l; i++ ){
211            if( nt[i].className.indexOf("blocked") != -1 ){
212              d.getElementById("out").innerHTML = nt[i+diff].innerHTML;
213              nt[i].className = nt[i].className.replace(/blocked|unread/,"noborder");
214              nt[i+diff].className = nt[i+diff].className.replace(/noborder|unread/,"blocked read");
215              var scroll = (nt[i+diff].offsetHeight-2) * diff;
216              window.scrollBy(0, scroll);
217              break;
218            }
219          }
220        }
221      };
222
223      Modoki.prototype.postTwitter = function(){
224        var text = d.getElementById("multiple").value;
225        text = (text.length>140) ? text.substring(0,140) : text;
226        if( text.length != 0 ){
227          var url = "https://twitter.com/statuses/update.xml?status=" + encodeURIComponent(text) + "&source=modoki";
228          this.crossDomainPost(url);
229        }
230        d.getElementById("multiple").value = "";
231      };
232
233      Modoki.prototype.fav = function(){
234        var t = d.getElementsByClassName("blocked");
235        var url = "https://twitter.com/favourings/create/" + t[0].id + ".xml";
236        this.crossDomainPost(url);
237        t[0].className += " fav";
238      };
239
240      Modoki.prototype.open_url = function(){
241        var t = d.getElementsByClassName("blocked");
242        var m = t[0].innerHTML.match(/https?:\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+/g);
243        if( m.length > 1 ){ window.open(m[1]); }
244      };
245
246      Modoki.prototype.crossDomainPost = function( url ){
247        this._crosspost++;
248        var iframe = document.createElement("iframe");
249        iframe.name = "cross_domain_post" + this._crosspost;
250        iframe.style.display = "none";
251
252        var form = document.createElement("form");
253        form.action = url;
254        form.target = "cross_domain_post" + this._crosspost;
255        form.method = "post";
256        form.style.display = "none";
257        document.body.appendChild(form);
258
259        var cnt = 0;
260        var onload = iframe.onload = function(){
261          if( cnt++ == 0 ){
262            setTimeout( function(){ form.submit(); }, 0 );
263          }else{
264            iframe.parentNode.removeChild(iframe);
265            form.parentNode.removeChild(form);
266          }
267        };
268        document.body.appendChild(iframe);
269      };
270
271      Modoki.prototype.loadData = function(){
272        this._altanative++;
273        var url = "https://twitter.com/statuses/friends_timeline.json?callback=cb" + "&alter=" + this._altanative;
274        this.getJSON(url);
275      };
276      Modoki.prototype.getJSON = function(url){
277        var head = d.getElementsByTagName("head")[0];
278        var script = head.appendChild(d.createElement("script"));
279        script.src = url;
280        script.type = "text/javascript";
281      };
282      var cb = function(data){
283        for( var i=data.length; i-- > 0; createLiTag(data[i]) );
284        var _script = d.getElementsByTagName("script");
285        _script[_script.length-1].parentNode.removeChild(_script[_script.length-1]);
286      };
287      var createLiTag = function(obj){
288        //check obj
289        var o = d.getElementById(obj.id);
290        if( o != null ){ return };
291
292        var tl = document.getElementById("time_line");
293
294        //create
295        var liTag = tl.insertBefore(d.createElement("li"), null);
296        liTag.id = obj.id;
297        liTag.className = "unread";
298
299        var imgDiv = liTag.appendChild(d.createElement("div"));
300        imgDiv.className = "sub";
301        imgDiv.id = "user_icon"
302
303        var imgTag = imgDiv.appendChild(d.createElement("img"));
304        imgTag.src = obj["user"]["profile_image_url"];
305
306        var nameDiv = liTag.appendChild(d.createElement("div"));
307        nameDiv.appendChild(d.createTextNode(obj["user"]["name"]));
308        nameDiv.className = "sub";
309
310        var textDiv = liTag.appendChild(d.createElement("div"));
311        textDiv.appendChild(d.createTextNode(obj.text));
312        textDiv.className = "sub";
313      };
314    </script>
315  </head>
316  <body onload="content_load()">
317    <div id="header"></div>
318    <div id="content"></div>
319    <div id="footer"></div>
320  </body>
321</html>
Note: See TracBrowser for help on using the browser.