widgets/ajax_sample2/include/template/index.tmpl.html

   1 <patTemplate:tmpl name="_widget">\r
   2 <script type="text/javascript">\r
   3 //<![CDATA[\r
   4 var startTime;\r
   5 var maxNo = 0;\r
   6 var bufSize = 6;\r
   7 var buf = new Array();\r
   8 var newItemNo = 0;\r
   9 var currentPos = 1;     // データ追加位置(1～6)\r
  10 \r
  11 function getData()\r
  12 {\r
  13         m3_ajax_request('ajax_sample2', 'act=getdata&count=5&no=' + (maxNo + 1), ajax_success_func, ajax_failure_func);\r
  14 }\r
  15 function ajax_success_func(request, retcode, jsondata)\r
  16 {\r
  17         //alert(request.responseText);\r
  18         //if (jsondata.message) alert(jsondata.message);\r
  19         var i;\r
  20         if (jsondata.items){\r
  21                 for (i = 0; i < jsondata.items.length; i++){\r
  22                         // データをバッファに追加\r
  23                         var image = new Image();\r
  24                         image.src = jsondata.items[i].thumbnail;        // 画像プリロード\r
  25                         \r
  26                         var obj = new Object();\r
  27                         obj.no = parseInt(jsondata.items[i].no);\r
  28                         obj.thumbnail = jsondata.items[i].thumbnail;\r
  29                         obj.message = jsondata.items[i].message;\r
  30                         obj.image = image;\r
  31                         buf.push(obj);\r
  32 \r
  33                         // 最大メッセージ番号を更新\r
  34                         maxNo = obj.no;\r
  35                 }\r
  36                 // 古いデータ削除\r
  37                 if (buf.length - bufSize > 0) buf = buf.slice(buf.length - bufSize);\r
  38         }\r
  39 }\r
  40 function ajax_failure_func(request)\r
  41 {\r
  42         alert('ajax failure!');\r
  43 }\r
  44 function mycarousel_itemLoadCallback(carousel, state)\r
  45 {\r
  46         if (state == 'init') return;\r
  47 };\r
  48 function makeItem(index, itemObj){\r
  49         var html = '<input class="itemindex" type="hidden" value="' + index + '" /><input class="itemno" type="hidden" value="' + itemObj.no + '" /><div class="thumbnail"><img src="' + itemObj.thumbnail + '" width="64" height="64"></div><div class="info"><a href="#">追加取得</a><span class="cat">説明: データNo=' + itemObj.no + ' 内容=' + itemObj.message + '</span></div>';\r
  50         return html;\r
  51 }\r
  52 \r
  53 function mycarousel_initCallback( carousel, state)\r
  54 {\r
  55         // データ取得\r
  56         getData();\r
  57 \r
  58         // タイマーセット\r
  59         startTime = new Date();\r
  60                 \r
  61         // reset empties it out\r
  62         $('#reset').click( function( evt ) {\r
  63                 carousel.reset();\r
  64         });\r
  65 }\r
  66 function itemVisibleIn(carousel, li, index, state)\r
  67 {\r
  68         // 初期データロード時は実行しない\r
  69         if (state == 'init') return;\r
  70 }\r
  71 function itemVisibleOut(carousel, li, index, state)\r
  72 {\r
  73         // 初期データロード時は実行しない\r
  74         if (state == 'init') return;\r
  75         \r
  76         // データ再取得\r
  77         if (document.hasFocus()){       // アクティブ時のみ処理\r
  78         if (startTime){\r
  79                 var currentTime = new Date();\r
  80                 if ((currentTime - startTime) / 1000 > 15){     // 15秒単位\r
  81                         // データ取得\r
  82                         getData();\r
  83                         //alert('15sec');\r
  84                         startTime = new Date();\r
  85                 }\r
  86         }\r
  87         }\r
  88         \r
  89         // データ更新処理\r
  90         if (maxNo > newItemNo){         // 最新データ取得のとき\r
  91                 var no;\r
  92                 no = parseInt($(li).children('.itemindex').attr('value'));              // 項目順\r
  93                 if (no == currentPos){                  // データ追加位置のとき\r
  94                         var i;\r
  95                         var nextItemNo = newItemNo;\r
  96                         for (i = 0; i < buf.length; i++){\r
  97                                 if (nextItemNo < buf[i].no){\r
  98                                         nextItemNo = buf[i].no;\r
  99                                         break;\r
 100                                 }\r
 101                         }\r
 102                         if (nextItemNo > newItemNo){\r
 103                                 var itemObj = buf[i];\r
 104                                 $('#item_' + currentPos).html(makeItem(no, itemObj));\r
 105                                 newItemNo = nextItemNo;\r
 106 \r
 107                                 // データ設定位置を更新\r
 108                                 currentPos++;\r
 109                                 if (currentPos > bufSize) currentPos = 1;\r
 110                         }\r
 111                 }\r
 112         }\r
 113 }\r
 114 $(function() {\r
 115         $("#mycarousel").jcarousel({\r
 116                 vertical: true,\r
 117                 visible: 3,     /* 表示項目数 */\r
 118                 auto:5,         /* 停止時間(秒) */\r
 119                 scroll:-1,\r
 120                 start:4,        /* 先頭項目 */\r
 121                 wrap: 'circular',\r
 122                 initCallback:   mycarousel_initCallback,\r
 123                 itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},\r
 124                 itemVisibleInCallback: {onBeforeAnimation: itemVisibleIn},\r
 125                 itemVisibleOutCallback: {onAfterAnimation: itemVisibleOut}\r
 126         });\r
 127         startTime = new Date(); \r
 128 });\r
 129 //]]>\r
 130 </script>\r
 131                 <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">\r
 132             <li style="list-style-type:none; background:none;" id="item_6">\r
 133             <input class="itemindex" type="hidden" value="6" /><input class="itemno" type="hidden" value="6" />\r
 134                                 <div class="thumbnail"><img src="{IMG_URL}/default.png" width="64" height="64"></div>\r
 135                                 <div class="info">\r
 136                                         <a href="#">初期取得6</a>\r
 137                                         <span class="cat">説明: 初期取得データ</span>6\r
 138                                 </div>\r
 139                         </li>\r
 140                         \r
 141             <li style="list-style-type:none; background:none;" id="item_5">\r
 142              <input class="itemindex" type="hidden" value="5" /><input class="itemno" type="hidden" value="5" />\r
 143                                 <div class="thumbnail"><img src="{IMG_URL}/default.png" width="64" height="64"></div>\r
 144                                 <div class="info">\r
 145                                         <a href="#">初期取得5</a>\r
 146                                         <span class="cat">説明: 初期取得データ</span>5\r
 147                                 </div>\r
 148                         </li>\r
 149             <li style="list-style-type:none; background:none;" id="item_4">\r
 150              <input class="itemindex" type="hidden" value="4" /><input class="itemno" type="hidden" value="4" />\r
 151                                 <div class="thumbnail"><img src="{IMG_URL}/default.png" width="64" height="64"></div>\r
 152                                 <div class="info">\r
 153                                         <a href="#">初期取得4</a>\r
 154                                         <span class="cat">説明: 初期取得データ</span>4\r
 155                                 </div>\r
 156                         </li>\r
 157                         <li style="list-style-type:none; background:none;" id="item_3">\r
 158         <input class="itemindex" type="hidden" value="3" /><input class="itemno" type="hidden" value="3" />\r
 159                                 <div class="thumbnail"><img src="{IMG_URL}/default.png" width="64" height="64"></div>\r
 160                                 <div class="info">\r
 161                                         <a href="#">初期取得3</a>\r
 162                                         <span class="cat">説明: 初期取得データ</span>3\r
 163                                 </div>\r
 164                         </li>\r
 165                         <li style="list-style-type:none; background:none;" id="item_2">\r
 166         <input class="itemindex" type="hidden" value="2" /><input class="itemno" type="hidden" value="2" />\r
 167                                 <div class="thumbnail"><img src="{IMG_URL}/default.png" width="64" height="64"></div>\r
 168                                 <div class="info">\r
 169                                         <a href="#">初期取得2</a>\r
 170                                         <span class="cat">説明: 初期取得データ</span>2\r
 171                                 </div>\r
 172                         </li>\r
 173                         <li style="list-style-type:none; background:none;" id="item_1">\r
 174         <input class="itemindex" type="hidden" value="1" /><input class="itemno" type="hidden" value="1" />\r
 175                          <input class="itemno" type="hidden" value="0" />\r
 176                                 <div class="thumbnail"><img src="{IMG_URL}/default.png" width="64" height="64"></div>\r
 177                                 <div class="info">\r
 178                                         <a href="#">初期取得1</a>\r
 179                                         <span class="cat">説明: 初期取得データ</span>1\r
 180                                 </div>\r
 181                         </li>\r
 182                         \r
 183         </ul>\r
 184 </patTemplate:tmpl>\r