widgets/photo_main/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-2013 Magic3 Project.\r
   9  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License\r
  10  * @version    SVN: $Id: main_list.tmpl.html 5632 2013-02-10 13:53:17Z 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         m3_ajax_request('photo_main', '{AJAX_URL}', ajax_success_func, ajax_failure_func);\r
  22 <patTemplate:tmpl name="category_script" visibility="hidden">\r
  23         // カテゴリーエリア処理\r
  24         $("#category_add").click(function(){\r
  25                 $("#gallery_category").slideToggle(300);\r
  26                 return false;\r
  27         });\r
  28         $("#password_submit").click(function(){\r
  29                 $("#gallery_category").slideToggle(300);\r
  30                 document.main.act.value = 'addcategory';\r
  31                 document.main.password.value = hex_md5(document.main.access_password.value);\r
  32                 document.main.submit();\r
  33                 return false;\r
  34         });\r
  35 </patTemplate:tmpl>\r
  36 <patTemplate:tmpl name="search_script" visibility="hidden">\r
  37         // 検索エリア処理\r
  38         $('#{SEARCH_TEXT_ID}').val('{KEYWORD}');\r
  39         $('#{SEARCH_SORT_ID}').val('{SORT}');\r
  40         $('#{SEARCH_SORT_ID}').change(function(){\r
  41                 var value, url;\r
  42                 $('#{SEARCH_TEXT_ID}').attr('disabled', 'disabled');\r
  43                 $('#{SEARCH_BUTTON_ID}').attr('disabled', 'disabled');\r
  44                 \r
  45                 url = '{SEARCH_URL}';\r
  46                 value = $('#{SEARCH_SORT_ID}').val();\r
  47                 if (value && value != '') url += '&sort=' + encodeURIComponent(value);\r
  48                 // 単数選択項目\r
  49                 var category = '';\r
  50                 value = $('select.photo_main_category option:selected').map(function(){ return $(this).val() ? $(this).val() : null; }).get();\r
  51                 value = jQuery.unique(value).join('+');\r
  52                 if (value && value != '') category += value;\r
  53                 // 複数選択項目\r
  54                 value = $('input:checked.photo_main_category').map(function(){return $(this).val();}).get();\r
  55                 value = jQuery.unique(value).join(',');\r
  56                 if (value && value != ''){\r
  57                         if (category && category != '') category += '+';\r
  58                         category += value;\r
  59                 }\r
  60                 if (category && category != '') url += '&category=' + encodeURI(category);\r
  61                 value = $('.photo_main_author').map(function(){return $(this).val();}).get();\r
  62                 value = jQuery.unique(value);\r
  63                 if (value && value != '') url += '&author=' + encodeURI(value);\r
  64                 window.location.href = url;\r
  65         });\r
  66         $('#{SEARCH_BUTTON_ID}').click(function(){\r
  67                 var value, url;\r
  68                 $('#{SEARCH_TEXT_ID}').attr('disabled', 'disabled');\r
  69                 $('#{SEARCH_BUTTON_ID}').attr('disabled', 'disabled');\r
  70 \r
  71                 url = '{SEARCH_URL}';\r
  72                 value = $('#{SEARCH_TEXT_ID}').val();\r
  73                 if (value && value != '') url += '&keyword=' + encodeURIComponent(value);\r
  74                 value = $('#{SEARCH_SORT_ID}').val();\r
  75                 if (value && value != '') url += '&sort=' + encodeURIComponent(value);\r
  76                 // 単数選択項目\r
  77                 var category = '';\r
  78                 value = $('select.photo_main_category option:selected').map(function(){ return $(this).val() ? $(this).val() : null; }).get();\r
  79                 value = jQuery.unique(value).join('+');\r
  80                 if (value && value != '') category += value;\r
  81                 // 複数選択項目\r
  82                 value = $('input:checked.photo_main_category').map(function(){return $(this).val();}).get();\r
  83                 value = jQuery.unique(value).join(',');\r
  84                 if (value && value != ''){\r
  85                         if (category && category != '') category += '+';\r
  86                         category += value;\r
  87                 }\r
  88                 if (category && category != '') url += '&category=' + encodeURI(category);\r
  89                 value = $('.photo_main_author').map(function(){return $(this).val();}).get();\r
  90                 value = jQuery.unique(value);\r
  91                 if (value && value != '') url += '&author=' + encodeURI(value);\r
  92                 window.location.href = url;\r
  93         });\r
  94         $('#{SEARCH_RESET_ID}').click(function(){\r
  95                 $('#{SEARCH_FORM_ID} :input').each(function(){\r
  96                         var type = this.type;\r
  97                         var tag = this.tagName.toLowerCase();\r
  98                         if (type == 'text' || type == 'password' || tag == 'textarea'){\r
  99                                 this.value = '';\r
 100                         } else if (type == 'checkbox' || type == 'radio'){\r
 101                                 this.checked = false;\r
 102                         } else if (tag == 'select'){\r
 103                                 this.selectedIndex = 0;\r
 104                         }\r
 105                 });\r
 106         });\r
 107 </patTemplate:tmpl>\r
 108 });\r
 109 function ajax_success_func(request, retcode, jsondata)\r
 110 {\r
 111         if (jsondata.items){\r
 112                 photoCount = jsondata.items.length < photoCount ? jsondata.items.length : photoCount;\r
 113 \r
 114                 // サムネール表示領域作成\r
 115                 var thumbnail_area = '';\r
 116                 thumbnail_area += '<ul id="thumbs_ul">';\r
 117                 for (var i = 0; i < photoCount; i++){\r
 118                         thumbnail_area += '<li>';\r
 119                         thumbnail_area += '<div class="thumb_cont">';\r
 120                         thumbnail_area += '<div id="image_wrap' + i + '" class="image_wrap"><img class="thumb_img" src="{LOAD_ICON_URL}" /></div>';\r
 121                         thumbnail_area += '<div id="title_wrap' + i + '" class="title_wrap">&nbsp;</div>';\r
 122                         thumbnail_area += '<div id="score_wrap' + i + '" class="score_wrap"></div>';\r
 123                         thumbnail_area += '</div>';\r
 124                         thumbnail_area += '</li>';\r
 125                 }\r
 126                 thumbnail_area += '</ul>';\r
 127                 $('#gallery_cont').html(thumbnail_area);\r
 128         \r
 129                 for (var i = 0; i < photoCount; i++){\r
 130                         var obj = new Object();\r
 131                         obj.id = jsondata.items[i].id;\r
 132                         obj.no = jsondata.items[i].no;\r
 133                         obj.image_url = jsondata.items[i].image_url;\r
 134                         obj.title = jsondata.items[i].title;\r
 135                         obj.title_short = jsondata.items[i].title_short;\r
 136                         obj.score = jsondata.items[i].score;\r
 137                         photoInfo.push(obj);\r
 138                 }\r
 139                 loadPhoto(0);\r
 140         }\r
 141 }\r
 142 function ajax_failure_func(request)\r
 143 {\r
 144 //      alert('ajax failure!');\r
 145 }\r
 146 function loadPhoto(index)\r
 147 {\r
 148         if (index >= photoCount) return;\r
 149         \r
 150         var image = new Image();\r
 151         image.title = photoInfo[index].title;\r
 152         image.alt = photoInfo[index].title;\r
 153         \r
 154         // image onload\r
 155         $(image).load(function (){\r
 156                 var imageTag = $('<a href="{PHOTO_DETAIL_URL}?photoid=' + photoInfo[index].id + '&no=' + photoInfo[index].no + '{PHOTO_DETAIL_URL_OTHERS}"></a>').html(this);\r
 157                 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
 158                 $('#image_wrap' + index).html(imageTag);\r
 159                 $('#title_wrap' + index).html(titleTag);\r
 160                 \r
 161                 loadPhoto(index +1);\r
 162                 \r
 163                 $('#score_wrap' + index).raty({\r
 164                         path: '{RATY_IMAGE_URL}',\r
 165                         start: photoInfo[index].score,\r
 166                         half: true,\r
 167                         readOnly: true\r
 168                 });\r
 169         }).error(function (){\r
 170                 $('#image_wrap' + index).html("Error!");\r
 171                 loadPhoto(index +1);\r
 172         }).attr('src', photoInfo[index].image_url);\r
 173 }\r
 174 //]]>\r
 175 </script>\r
 176 <!-- m3:ErrorMessage -->\r
 177 <div id="photo_gallery">\r
 178 <patTemplate:tmpl name="category_area" visibility="hidden">\r
 179 <form method="post" name="main">\r
 180 <input type="hidden" name="act" />\r
 181 <input type="hidden" name="password" />\r
 182 <div class="gallery_category">表示可能なカテゴリー：{AUTH_CATEGORY_LIST}&nbsp;&nbsp;<input id="category_add" type="button" class="button" value="追加" /></div>\r
 183 <div id="gallery_category" style="display:none;">\r
 184 <div class="gallery_message">\r
 185 画像を表示するにはカテゴリーのパスワードを入力する必要があります。<br />\r
 186 目的のカテゴリーを選択し、パスワードを送信して下さい。</div>\r
 187 <label><span class="gallery_title">カテゴリー</span>\r
 188     <select name="access_category">\r
 189     <option value="0">-- 未選択 --</option>\r
 190         <patTemplate:tmpl name="access_category_list">\r
 191                 <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 192         </patTemplate:tmpl>\r
 193     </select>\r
 194 </label>\r
 195 <label><span class="gallery_title">パスワード</span><input type="password" name="access_password" size="10" maxlength="10" /></label>\r
 196 <div class="photo_button"><input id="password_submit" type="button" class="button" value="送信" /></div>\r
 197 </div>\r
 198 </form>\r
 199 </patTemplate:tmpl>\r
 200 <patTemplate:tmpl name="single_category_area" visibility="hidden">\r
 201 <form method="post" name="main">\r
 202 <input type="hidden" name="act" />\r
 203 <input type="hidden" name="password" />\r
 204 <input type="hidden" name="access_category" value="{VALUE}" />\r
 205 <label><span class="gallery_title">パスワード</span><input type="password" name="access_password" size="10" maxlength="10" /></label>\r
 206 <div class="photo_button"><input id="password_submit" type="button" class="button" value="送信" /></div>\r
 207 </form>\r
 208 </patTemplate:tmpl>\r
 209 <patTemplate:tmpl name="search_area" visibility="hidden"><form id="{SEARCH_FORM_ID}" name="custom_search_box" method="get" class="form"><div class="gallery_search">{HTML}</div></form></patTemplate:tmpl>\r
 210 <patTemplate:tmpl name="page_link_top" visibility="hidden"><div class="gallery_nav">{PAGE_LINK}</div></patTemplate:tmpl>\r
 211 <div id="gallery_cont"></div>\r
 212 <patTemplate:tmpl name="page_link_bottom" visibility="hidden"><div class="gallery_nav">{PAGE_LINK}</div></patTemplate:tmpl>\r
 213 </div>\r
 214 </patTemplate:tmpl>\r