widgets/s/photo/include/template/main_list.tmpl.html

   1 /**\r
   2  * 表示データ作成用テンプレート(patTemplate)\r
   3  *\r
   4  * LICENSE: This source file is licensed under the terms of the GNU General Public License.\r
   5  *\r
   6  * @package    Magic3 Framework\r
   7  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>\r
   8  * @copyright  Copyright 2006-2012 Magic3 Project.\r
   9  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License\r
  10  * @version    SVN: $Id: main_list.tmpl.html 5032 2012-07-12 01:07:50Z fishbone $\r
  11  * @link       http://www.magic3.org\r
  12  */\r
  13 <patTemplate:tmpl name="_widget">\r
  14 <script type="text/javascript">\r
  15 //<![CDATA[\r
  16 var photoCount = {PHOTO_COUNT};\r
  17 var photoInfo = new Array();\r
  18 \r
  19 $(function(){\r
  20         // 検索詳細設定ダイアログ\r
  21         var dialogHtml = '<div id="photo_config" data-role="dialog">';\r
  22         dialogHtml += '<div data-role="content">';\r
  23         dialogHtml += '<p>コンテンツ</p>';\r
  24         dialogHtml += '<p><a href="#" data-role="button" data-rel="back">閉じる</a></p>';\r
  25         dialogHtml += '</div>';\r
  26         dialogHtml += '</div>';\r
  27         $('body').append(dialogHtml);\r
  28 \r
  29         // 初期データ取得\r
  30         m3_ajax_request('s/photo', '{AJAX_URL}', ajax_success_func, ajax_failure_func);\r
  31 <patTemplate:tmpl name="category_script" visibility="hidden">\r
  32         // カテゴリーエリア処理\r
  33         $("#category_add").click(function(){\r
  34                 $("#gallery_category").slideToggle(300);\r
  35                 return false;\r
  36         });\r
  37         $("#password_submit").click(function(){\r
  38                 $("#gallery_category").slideToggle(300);\r
  39                 document.main.act.value = 'addcategory';\r
  40                 document.main.password.value = hex_md5(document.main.access_password.value);\r
  41                 document.main.submit();\r
  42                 return false;\r
  43         });\r
  44 </patTemplate:tmpl>\r
  45 <patTemplate:tmpl name="search_script" visibility="hidden">\r
  46         // 検索エリア処理\r
  47         $('#{SEARCH_TEXT_ID}').val('{KEYWORD}');\r
  48         $('#{SEARCH_SORT_ID}').val('{SORT}');\r
  49         $('#{SEARCH_BUTTON_ID}').click(function(){\r
  50                 var value, url;\r
  51                 $('#{SEARCH_TEXT_ID}').attr('disabled', 'disabled');\r
  52                 $('#{SEARCH_BUTTON_ID}').attr('disabled', 'disabled');\r
  53 \r
  54                 url = '{SEARCH_URL}';\r
  55                 value = $('#{SEARCH_TEXT_ID}').val();\r
  56                 if (value && value != '') url += '&keyword=' + encodeURIComponent(value);\r
  57                 value = $('#{SEARCH_SORT_ID}').val();\r
  58                 if (value && value != '') url += '&sort=' + encodeURIComponent(value);\r
  59                 // 単数選択項目\r
  60                 var category = '';\r
  61                 value = $('select.photo_main_category option:selected').map(function(){ return $(this).val() ? $(this).val() : null; }).get();\r
  62                 value = jQuery.unique(value).join('+');\r
  63                 if (value && value != '') category += value;\r
  64                 // 複数選択項目\r
  65                 value = $('input:checked.photo_main_category').map(function(){return $(this).val();}).get();\r
  66                 value = jQuery.unique(value).join(',');\r
  67                 if (value && value != ''){\r
  68                         if (category && category != '') category += '+';\r
  69                         category += value;\r
  70                 }\r
  71                 if (category && category != '') url += '&category=' + encodeURI(category);\r
  72                 value = $('.photo_main_author').map(function(){return $(this).val();}).get();\r
  73                 value = jQuery.unique(value);\r
  74                 if (value && value != '') url += '&author=' + encodeURI(value);\r
  75                 window.location.href = url;\r
  76         });\r
  77         $('#{SEARCH_RESET_ID}').click(function(){\r
  78                 $('#{SEARCH_FORM_ID} :input').each(function(){\r
  79                         var type = this.type;\r
  80                         var tag = this.tagName.toLowerCase();\r
  81                         if (type == 'text' || type == 'password' || tag == 'textarea'){\r
  82                                 this.value = '';\r
  83                         } else if (type == 'checkbox' || type == 'radio'){\r
  84                                 this.checked = false;\r
  85                         } else if (tag == 'select'){\r
  86                                 this.selectedIndex = 0;\r
  87                         }\r
  88                 });\r
  89         });\r
  90 </patTemplate:tmpl>\r
  91 });\r
  92 function ajax_success_func(request, retcode, jsondata)\r
  93 {\r
  94         if (jsondata.items){\r
  95                 photoCount = jsondata.items.length < photoCount ? jsondata.items.length : photoCount;\r
  96 \r
  97                 // サムネール表示領域作成\r
  98                 var thumbnail_area = '';\r
  99                 thumbnail_area += '<ul id="thumbs_ul">';\r
 100                 for (var i = 0; i < photoCount; i++){\r
 101                         thumbnail_area += '<li>';\r
 102                         thumbnail_area += '<div class="thumb_cont">';\r
 103                         thumbnail_area += '<div id="image_wrap' + i + '" class="image_wrap"><img class="thumb_img" src="{LOAD_ICON_URL}" /></div>';\r
 104                         thumbnail_area += '<div id="title_wrap' + i + '" class="title_wrap">&nbsp;</div>';\r
 105                         thumbnail_area += '<div id="score_wrap' + i + '" class="score_wrap"></div>';\r
 106                         thumbnail_area += '</div>';\r
 107                         thumbnail_area += '</li>';\r
 108                 }\r
 109                 thumbnail_area += '</ul>';\r
 110                 $('#gallery_cont').html(thumbnail_area);\r
 111         \r
 112                 for (var i = 0; i < photoCount; i++){\r
 113                         var obj = new Object();\r
 114                         obj.id = jsondata.items[i].id;\r
 115                         obj.no = jsondata.items[i].no;\r
 116                         obj.image_url = jsondata.items[i].image_url;\r
 117                         obj.title = jsondata.items[i].title;\r
 118                         obj.title_short = jsondata.items[i].title_short;\r
 119                         obj.score = jsondata.items[i].score;\r
 120                         photoInfo.push(obj);\r
 121                 }\r
 122                 loadPhoto(0);\r
 123         }\r
 124 }\r
 125 function ajax_failure_func(request)\r
 126 {\r
 127 //      alert('ajax failure!');\r
 128 }\r
 129 function loadPhoto(index)\r
 130 {\r
 131         if (index >= photoCount) return;\r
 132         \r
 133         var image = new Image();\r
 134         image.title = photoInfo[index].title;\r
 135         image.alt = photoInfo[index].title;\r
 136         \r
 137         // image onload\r
 138         $(image).load(function (){\r
 139                 var imageTag = $('<a href="{PHOTO_DETAIL_URL}?photoid=' + photoInfo[index].id + '&no=' + photoInfo[index].no + '{PHOTO_DETAIL_URL_OTHERS}"></a>').html(this);\r
 140                 var titleTag = $('<a href="{PHOTO_DETAIL_URL}?photoid=' + photoInfo[index].id + '&no=' + photoInfo[index].no + '{PHOTO_DETAIL_URL_OTHERS}"></a>').text(photoInfo[index].title_short);\r
 141                 $('#image_wrap' + index).html(imageTag);\r
 142                 $('#title_wrap' + index).html(titleTag);\r
 143                 \r
 144                 loadPhoto(index +1);\r
 145                 \r
 146                 $('#score_wrap' + index).raty({\r
 147                         path: '{RATY_IMAGE_URL}',\r
 148                         start: photoInfo[index].score,\r
 149                         half: true,\r
 150                         readOnly: true\r
 151                 });\r
 152         }).error(function (){\r
 153                 $('#image_wrap' + index).html("Error!");\r
 154                 loadPhoto(index +1);\r
 155         }).attr('src', photoInfo[index].image_url);\r
 156 }\r
 157 //]]>\r
 158 </script>\r
 159 <!-- m3:ErrorMessage -->\r
 160 <div id="photo_gallery">\r
 161 <div data-role="content">\r
 162 <patTemplate:tmpl name="category_area" visibility="hidden">\r
 163 <form method="post" name="main">\r
 164 <input type="hidden" name="act" />\r
 165 <input type="hidden" name="password" />\r
 166 <div class="gallery_category">表示可能なカテゴリー：{AUTH_CATEGORY_LIST}&nbsp;&nbsp;<input id="category_add" type="button" class="button" value="追加" /></div>\r
 167 <div id="gallery_category" style="display:none;">\r
 168 <div class="gallery_message">\r
 169 画像を表示するにはカテゴリーのパスワードを入力する必要があります。<br />\r
 170 目的のカテゴリーを選択し、パスワードを送信して下さい。</div>\r
 171 <label><span class="gallery_title">カテゴリー</span>\r
 172     <select name="access_category">\r
 173     <option value="0">-- 未選択 --</option>\r
 174         <patTemplate:tmpl name="access_category_list">\r
 175                 <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 176         </patTemplate:tmpl>\r
 177     </select>\r
 178 </label>\r
 179 <label><span class="gallery_title">パスワード</span><input type="password" name="access_password" size="10" maxlength="10" /></label>\r
 180 <div class="photo_button"><input id="password_submit" type="button" class="button" value="送信" /></div>\r
 181 </div>\r
 182 </form>\r
 183 </patTemplate:tmpl>\r
 184 <patTemplate:tmpl name="single_category_area" visibility="hidden">\r
 185 <form method="post" name="main">\r
 186 <input type="hidden" name="act" />\r
 187 <input type="hidden" name="password" />\r
 188 <input type="hidden" name="access_category" value="{VALUE}" />\r
 189 <label><span class="gallery_title">パスワード</span><input type="password" name="access_password" size="10" maxlength="10" /></label>\r
 190 <div class="photo_button"><input id="password_submit" type="button" class="button" value="送信" /></div>\r
 191 </form>\r
 192 </patTemplate:tmpl>\r
 193 <patTemplate:tmpl name="search_area" visibility="hidden">\r
 194 <div class="gallery_search"></div>\r
 195 </patTemplate:tmpl>\r
 196 </div>\r
 197 <patTemplate:tmpl name="page_link_top" visibility="hidden"><div class="gallery_nav" data-role="controlgroup" data-type="horizontal">{PAGE_LINK}</div></patTemplate:tmpl>\r
 198 <div id="gallery_cont"></div>\r
 199 <div style="clear:both;"></div>\r
 200 <patTemplate:tmpl name="page_link_bottom" visibility="hidden"><div class="gallery_nav" data-role="controlgroup" data-type="horizontal">{PAGE_LINK}</div></patTemplate:tmpl>\r
 201 </div>\r
 202 </patTemplate:tmpl>\r