js_tw_viewer/index.html at master · ASnow/js_tw_viewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- sorry for plain code in head tag but it's now is more portable -->
<!-- but it is still bad practice :) -->

<style>
.container {background: #eee; border: 1px solid #bbb;}
.screen {display: none;}
.stwitte {margin: 10px; border: 1px solid #666; background: #fff; padding: 10px;cursor:pointer;}
</style>

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// name this window for ff good work
window.name = "parentWnd";

$(function(){
  var load_queue = []; // download queue
  var img_index = 0; //id for images

  function load_data() {
    switchScreen('.s1');
    $('.s2.twits').empty();
    $.ajax({
      url: 'http://search.twitter.com/search.json?q=twitter',
      dataType: 'jsonp',
      success: function(data, textStatus, jqXHR){
        if(textStatus=='success' && data.results){
          var all_tweets = $('.twits');
          for(var i in data.results){
            short_twitte_tpl(data.results[i]).appendTo(all_tweets);
          }
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        switchScreen('.s2');
        $('.s2.twits').html('<h2>Some error occure in:</h2>' + textStatus);
      }
    });
  }

  //
  function switchScreen(id){
    $('.screen').hide();
    $(id).show();
    return $(id); // more jquery style)
  }

  // twitte theme
  function short_twitte_tpl(twette) {
    return $("<div class='stwitte'><div class='image i"+load_image(twette.profile_image_url)+"'></div><div class='name'>" +
             twette.from_user+
             "</div><div class='text'>"+
             twette.text+
             "</div><div class='time'>"+
             Date(twette.created_at)+
             "</div></div>")
           .click(function(){
            screen3(twette.id_str, twette.from_user)
           });
  }

  // putting image which we download into download queue
  function load_image(src) {
    var i = $('<img alt="name" src="'+src+'">');
    load_queue.push(i);
    i.data('classid','.i'+img_index);
    i.load(complite_twitte).error(complite_twitte);
    return img_index++;
  }

  // Checking if data loaded beafore showing twitts list
  function complite_twitte(){
    var i=$(this);
    i.appendTo(i.data('classid'));
    load_queue.splice(load_queue.indexOf(i), 1);
    if(!load_queue.length)
      switchScreen('.s2');
  }

  // Initialize new window
  function screen3(id, user) {
    var wnd= window.open('./window.htm#'+user+'-/-'+id, 'Screen3', 'status=1,toolbar=1');
  }

  // setting handler for reload twitts list
  $('.s2 input').click(function(){ load_data(); });
  // Start scripts
  load_data();
});
</script>

</head>
<body>
<div class="container">
  <div class="screen s1">
  Загрузка....
  </div>
  <div class="screen s2"><input type="submit" name="refresh" value="Обновить" /></div>
  <div class="screen s2 twits">
  </div>
</div>
</body>
</html>