widgets/chacha_main/include/template/top.tmpl.html

   1 <patTemplate:tmpl name="_widget">\r
   2 <script type="text/javascript">\r
   3 //<![CDATA[\r
   4 var startTime;\r
   5 var maxNo = {MAX_NO};\r
   6 var bufSize = {MESSAGE_COUNT};\r
   7 var buf = new Array();\r
   8 var newItemNo = 0;\r
   9 var currentPos = 1;     // データ追加位置(1～)\r
  10 \r
  11 function getMessage()\r
  12 {\r
  13         m3_ajax_request('{WIDGET_ID}', 'act=getmessage&count={MESSAGE_COUNT}&no=' + (maxNo + 1), chacha_ajax_success_func);\r
  14 }\r
  15 function chacha_ajax_success_func(request, retcode, jsondata)\r
  16 {\r
  17         var i;\r
  18         if (jsondata.messages){\r
  19                 for (i = 0; i < jsondata.messages.length; i++){\r
  20                         // データをバッファに追加\r
  21                         var image = new Image();\r
  22                         image.src = jsondata.messages[i].avatar;        // 画像プリロード\r
  23                         \r
  24                         var obj = new Object();\r
  25                         obj.no = parseInt(jsondata.messages[i].no);\r
  26                         obj.avatar = jsondata.messages[i].avatar;\r
  27                         obj.membername = jsondata.messages[i].membername;\r
  28                         obj.message = jsondata.messages[i].message;\r
  29                         obj.messageid = jsondata.messages[i].messageid;\r
  30                         obj.messagecount = jsondata.messages[i].messagecount;\r
  31                         obj.date = jsondata.messages[i].date;\r
  32                         obj.image = image;\r
  33                         buf.push(obj);\r
  34 \r
  35                         // 最大メッセージ番号を更新\r
  36                         maxNo = obj.no;\r
  37                 }\r
  38                 // 古いデータ削除\r
  39                 if (buf.length - bufSize > 0) buf = buf.slice(buf.length - bufSize);\r
  40         }\r
  41 }\r
  42 function chacha_itemLoad(carousel, state)\r
  43 {\r
  44         if (state == 'init') return;\r
  45 };\r
  46 function makeItem(index, itemObj){\r
  47         var html = '<input class="bufindex" type="hidden" value="' + index + '" />';\r
  48         html += '<div class="chacha_avatar"><img src="' + itemObj.avatar + '" width="64" height="64" /></div>';\r
  49         html += '<div class="chacha_message_right"><div class="chacha_message_main"><span class="chacha_message_membername">' + itemObj.membername + '</span>';\r
  50         html += '<span class="chacha_message_body">' + itemObj.message + '</span></div>';\r
  51         html += '<div class="chacha_message_info"><span class="chacha_message_date">' + itemObj.date + '</span>';\r
  52         html += '<span class="chacha_message_id">' + itemObj.messageid + '</span>';\r
  53         html += '<span class="chacha_message_count">' + itemObj.messagecount + '</span></div></div>';\r
  54         return html;\r
  55 }\r
  56 \r
  57 function chacha_init( carousel, state)\r
  58 {\r
  59         // メッセージ取得\r
  60         getMessage();\r
  61 \r
  62         // タイマーセット\r
  63         startTime = new Date();\r
  64                 \r
  65         // reset empties it out\r
  66         $('#reset').click( function( evt ) {\r
  67                 carousel.reset();\r
  68         });\r
  69 }\r
  70 function chacha_itemVisibleIn(carousel, li, index, state)\r
  71 {\r
  72         // 初期データロード時は実行しない\r
  73         if (state == 'init') return;\r
  74 }\r
  75 function chacha_itemVisibleOut(carousel, li, index, state)\r
  76 {\r
  77         // 初期データロード時は実行しない\r
  78         if (state == 'init') return;\r
  79         \r
  80         // データ再取得\r
  81         if (document.hasFocus()){       // アクティブ時のみ処理\r
  82         if (startTime){\r
  83                 var currentTime = new Date();\r
  84                 if ((currentTime - startTime) / 1000 > 15){     // 15秒単位\r
  85                         // メッセージ取得\r
  86                         getMessage();\r
  87                         //alert('15sec');\r
  88                         startTime = new Date();\r
  89                 }\r
  90         }\r
  91         }\r
  92         \r
  93         // データ更新処理\r
  94         if (maxNo > newItemNo){         // 最新データ取得のとき\r
  95                 var no;\r
  96                 no = parseInt($(li).children('.bufindex').attr('value'));               // 項目順\r
  97                 if (no == currentPos){                  // データ追加位置のとき\r
  98                         var i;\r
  99                         var nextItemNo = newItemNo;\r
 100                         for (i = 0; i < buf.length; i++){\r
 101                                 if (nextItemNo < buf[i].no){\r
 102                                         nextItemNo = buf[i].no;\r
 103                                         break;\r
 104                                 }\r
 105                         }\r
 106                         if (nextItemNo > newItemNo){\r
 107                                 var itemObj = buf[i];\r
 108                                 $('#messageitem_' + currentPos).html(makeItem(no, itemObj));\r
 109                                 newItemNo = nextItemNo;\r
 110 \r
 111                                 // データ設定位置を更新\r
 112                                 currentPos++;\r
 113                                 if (currentPos > bufSize) currentPos = 1;\r
 114                         }\r
 115                 }\r
 116         }\r
 117 }\r
 118 $(function() {\r
 119         $("#chacha_jcarousel").jcarousel({\r
 120                 vertical: true,\r
 121                 visible: {VISIBLE_MESSAGE_COUNT},       /* 表示項目数 */\r
 122                 auto:5,         /* 停止時間(秒) */\r
 123                 scroll:-1,\r
 124                 start:{FIRST_MESSAGE_NO},       /* 先頭項目 */\r
 125                 wrap: 'circular',\r
 126                 initCallback:   chacha_init,\r
 127                 itemLoadCallback: {onBeforeAnimation: chacha_itemLoad},\r
 128                 itemVisibleInCallback: {onBeforeAnimation: chacha_itemVisibleIn},\r
 129                 itemVisibleOutCallback: {onAfterAnimation: chacha_itemVisibleOut}\r
 130         });\r
 131         startTime = new Date(); \r
 132 });\r
 133 //]]>\r
 134 </script>\r
 135 <div id="{CSS_ID}" style="{BLOG_STYLE}" >\r
 136 <div align="center"><div style="{TOP_STYLE}">\r
 137 {TOP_CONTENTS}\r
 138 </div></div>\r
 139 <patTemplate:tmpl name="top_link_area" visibility="hidden"><div style="{LINK_STYLE_TOP}"><a href="{REGIST_URL}"><b>{REGIST_NAME}</b></a></div></patTemplate:tmpl>\r
 140 <div align="center">\r
 141 <!-- m3:ErrorMessage -->\r
 142 <div style="{INNER_STYLE}">\r
 143 <ul id="chacha_jcarousel" class="jcarousel-skin-chacha">\r
 144 <patTemplate:tmpl name="message_list">\r
 145 <li style="list-style-type:none; background:none;" id="messageitem_{BUF_INDEX}">\r
 146     <input class="bufindex" type="hidden" value="{BUF_INDEX}" />\r
 147     <div class="chacha_avatar">{AVATAR}</div>\r
 148     <div class="chacha_message_right">\r
 149         <div class="chacha_message_main"><span class="chacha_message_membername">{NAME}</span><span class="chacha_message_body">{MESSAGE}</span></div>\r
 150         <div class="chacha_message_info"><span class="chacha_message_date">{DATE}</span><span class="chacha_message_id">{ID}</span><span class="chacha_message_count">{MESSAGE_COUNT}</span></div>\r
 151     </div>\r
 152     <div style="clear: both;"></div>\r
 153 </li>\r
 154 </patTemplate:tmpl>\r
 155 </ul>\r
 156 <div style="{LINK_STYLE_INNER_BOTTOM}"><a href="{READ_MORE_URL}"><b>もっと読む</b></a></div>\r
 157 </div>\r
 158 </div>\r
 159 <div style="{LINK_STYLE_BOTTOM}"><a href="{HOME_URL}"><b>ブログホーム</b></a></div>\r
 160 </div>\r
 161 </patTemplate:tmpl>\r