widgets/s/photo/include/template/photo_detail.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: photo_detail.tmpl.html 4867 2012-04-20 10:04:42Z fishbone $\r
  11  * @link       http://www.magic3.org\r
  12  */\r
  13 <patTemplate:tmpl name="_widget">\r
  14 <patTemplate:tmpl name="photo_info_script" visibility="hidden">\r
  15 <script type="text/javascript">\r
  16 //<![CDATA[\r
  17 $(function(){\r
  18         $('#photo_rating').raty({\r
  19                 path: '{RATY_IMAGE_URL}',\r
  20                 start: {INIT_RATE},\r
  21                 half: true,\r
  22                 readOnly: true\r
  23         });\r
  24         $('#photo_rating_input').raty({\r
  25                 path: '{RATY_IMAGE_URL}',\r
  26                 click: function(score, evt){\r
  27                         //document.main.score.value = score;\r
  28                         $('form[name=main] input[name=score]').val(score);\r
  29                         $("#photo_rating_score").text(score);\r
  30                 }\r
  31         });\r
  32         for (var i = 0; i < document.main.comment_count.value; i++){\r
  33                 var rateObj = $('#photo_rating' + (i + 1));\r
  34                 rateObj.raty({\r
  35                         path: '{RATY_IMAGE_URL}',\r
  36                         start: rateObj.attr("value"),\r
  37                         readOnly: true\r
  38                 });\r
  39         }\r
  40         $("#photo_rate_send").click(function(){\r
  41                 $("#photo_rate").slideToggle(300);\r
  42                 return false;\r
  43         });\r
  44         $("#photo_rate_submit").click(function(){\r
  45                 //if (!document.main.score.value){\r
  46                 var scoreVal = $('form[name=main] input[name=score]').val();\r
  47                 if (!scoreVal){\r
  48                         alert("評価を選択してください");\r
  49                         return false;\r
  50                 }\r
  51                 var param = 'act=rate&ticket=' + document.main.ticket.value;\r
  52                 param    += '&photoid=' + document.main.photoid.value;\r
  53                 //param    += '&value=' + document.main.score.value;\r
  54                 param    += '&value=' + scoreVal;\r
  55                 //param    += '&comment=' + encodeURI(document.main.comment.value);\r
  56                 param    += '&comment=' + encodeURIComponent(document.main.comment.value);\r
  57                 m3_ajax_request('photo_main', param, rate_success_func);\r
  58                 return false;\r
  59         });\r
  60 <patTemplate:tmpl name="product_script" visibility="hidden">\r
  61 <patTemplate:tmpl name="product_script_list">\r
  62         $("#input_cart_submit{INDEX}").click(function(){\r
  63                 document.main.act.value = 'inputcart';\r
  64                 document.main.product.value = $(this).data('product');\r
  65                 document.main.submit();\r
  66                 return false;\r
  67         });\r
  68 </patTemplate:tmpl>\r
  69         $("#input_cart_submit").click(function(){\r
  70                 document.main.act.value = 'inputcart';\r
  71                 document.main.product.value = $(this).data('product');\r
  72                 document.main.submit();\r
  73                 return false;\r
  74         });\r
  75         $("#download_image").click(function(){\r
  76                 document.main.act.value = 'downloadimage';\r
  77                 document.main.submit();\r
  78                 return false;\r
  79         });\r
  80 </patTemplate:tmpl>\r
  81         // コメント領域表示制御\r
  82         if (document.main.comment_count.value == 0) $("#photo_comment").css('display', 'none');\r
  83 });\r
  84 function rate_success_func(request, retcode, jsondata)\r
  85 {\r
  86         if (jsondata.result){\r
  87                 if (jsondata.result == 1){      // 投票成功のとき\r
  88                         $('#photo_rate').slideToggle(900, function() {\r
  89                                 $("#photo_rate_message").text("送信しました");\r
  90                                 \r
  91                                 $.fn.raty.start(jsondata.rate_average, '#photo_rating');\r
  92                                 $.fn.raty.readOnly(true, '#photo_rating_input');\r
  93                                 $("#photo_rate_comment").attr("disabled", "disabled");\r
  94                                 $("#photo_rate_submit").attr("disabled", "disabled");\r
  95                                 \r
  96                                 // コメントの追加\r
  97                                 var commentLine = '<tr><td><span id="photo_rating0" class="photo_rating_comment" value="' \r
  98                                                         + jsondata.rate_average + '"></span>&nbsp;&nbsp;' + jsondata.reg_date + '<br />' + jsondata.comment + '</td></tr>';\r
  99                                 $("#photo_comment").prepend(commentLine);\r
 100                                 $("#photo_comment").css('display', '');         // コメント表示\r
 101                                 $('#photo_rating0').raty({\r
 102                                         path: '{RATY_IMAGE_URL}',\r
 103                                         start: jsondata.rate_value,\r
 104                                         readOnly: true\r
 105                                 });\r
 106                         });\r
 107                 } else {\r
 108                         $("#photo_rate_message").text("送信に失敗しました");\r
 109                 }\r
 110         } else {\r
 111                 $("#photo_rate_message").text("送信できません");\r
 112         }\r
 113 }\r
 114 //]]>\r
 115 </script>\r
 116 </patTemplate:tmpl>\r
 117 <!-- m3:ErrorMessage -->\r
 118 <patTemplate:tmpl name="photo_info_area" visibility="hidden">\r
 119 <form method="post" name="main">\r
 120 <input type="hidden" name="act" />\r
 121 <input type="hidden" name="ticket" value="{TICKET}" />\r
 122 <input type="hidden" name="photoid" value="{PHOTO_ID}" />\r
 123 <input type="hidden" name="score" />\r
 124 <input type="hidden" name="comment_count" value="{COMMENT_COUNT}" />\r
 125 <input type="hidden" name="product" />\r
 126 <div id="photo_detail">\r
 127 <div class="photo_button"><a href="{BACK_URL}" data-ajax="false"><img src="{BACK_IMG_URL}" width="{ICON_SIZE}" height="{ICON_SIZE}" title="{BACK_TITLE}" alt="{BACK_ALT}" style="border:none;" /></a></div>\r
 128 <div class="photo_image"><img src="{IMG_URL}" width="{WIDTH}" height="{HEIGHT}" title="{TITLE}" alt="{ALT}" style="border:none;" /></div>\r
 129 <div class="photo_button"><div style="float:left;text-align:left;">\r
 130 <patTemplate:tmpl name="prev_link" visibility="hidden"><a href="{PREV_URL}" data-ajax="false"><img src="{PREV_IMG_URL}" width="{ICON_SIZE}" height="{ICON_SIZE}" title="{PREV_TITLE}" alt="{PREV_ALT}" style="border:none;" /></a></patTemplate:tmpl>&nbsp;</div><div style="float:right; text-align:right;"><patTemplate:tmpl name="next_link" visibility="hidden"><a href="{NEXT_URL}" data-ajax="false"><img src="{NEXT_IMG_URL}" width="{ICON_SIZE}" height="{ICON_SIZE}" title="{NEXT_TITLE}" alt="{NEXT_ALT}" style="border:none;" /></a></patTemplate:tmpl></div><div style="clear:both;"></div></div>\r
 131 <table class="photo_info">\r
 132 <caption>画像情報</caption>\r
 133 <tbody>\r
 134 <tr>\r
 135     <th>ID</th>\r
 136     <td><span class="photo_id">{PHOTO_ID}</span></td>\r
 137 </tr>\r
 138 <tr>\r
 139     <th>タイトル</th>\r
 140     <td>{TITLE}&nbsp;{PERMALINK}</td>\r
 141 </tr>\r
 142 <tr>\r
 143     <th>撮影者</th>\r
 144     <td>{AUTHOR}</td>\r
 145 </tr>\r
 146 <tr>\r
 147     <th>撮影日</th>\r
 148     <td>{DATE}</td>\r
 149 </tr>\r
 150 <tr>\r
 151     <th>場所</th>\r
 152     <td>{PLACE}</td>\r
 153 </tr>\r
 154 <tr>\r
 155     <th>カメラ</th>\r
 156     <td>{CAMERA}</td>\r
 157 </tr>\r
 158 <tr>\r
 159     <th>メモ</th>\r
 160     <td>{NOTE}</td>\r
 161 </tr>\r
 162 <tr>\r
 163     <th>カテゴリー</th>\r
 164     <td>{CATEGORY}</td>\r
 165 </tr>\r
 166 <tr>\r
 167     <th>評価</th>\r
 168     <td><span id="photo_rating"></span>&nbsp;&nbsp;<input id="photo_rate_send" type="button" class="button" value="投票" data-inline="true" {RATE_DISABLED}/>&nbsp;&nbsp;<span id="photo_rate_message"></span></td>\r
 169 </tr>\r
 170 </tbody>\r
 171 </table>\r
 172 <div id="photo_rate" style="display:none;">\r
 173 <div data-role="fieldcontain">\r
 174 <label for="photo_rate_input">評価</label><input type="text" id="photo_rate_input" style="display:none;"/><span id="photo_rating_input"></span>&nbsp;&nbsp;<span id="photo_rating_score">星をクリックしてください</span>\r
 175 </div>\r
 176 <div data-role="fieldcontain">\r
 177 <label for="photo_rate_comment">コメント</label><textarea name="comment" id="photo_rate_comment" class="photo_rate_comment"></textarea>\r
 178 </div>\r
 179 <div class="photo_button"><input id="photo_rate_submit" type="button" class="button" value="送信" /></div>\r
 180 </div>\r
 181 <patTemplate:tmpl name="product_info" visibility="hidden">\r
 182 <table id="photo_product" class="photo_info">\r
 183 <caption>商品情報</caption>\r
 184 <tbody>\r
 185 <patTemplate:tmpl name="product_list">\r
 186 <tr>\r
 187     <th>{PRODUCT_NAME}</th><td><div>{PRODUCT_DETAIL}</div>販売価格(税込)&nbsp;{DISP_TOTAL_PRICE}<input id="input_cart_submit{INDEX}" type="button" class="button" value="カートに入れる" data-product="{PRODUCT}" /></td>\r
 188 </tr>\r
 189 </patTemplate:tmpl>\r
 190 <patTemplate:tmpl name="download_area">\r
 191 <tr>\r
 192     <th>ダウンロード購入</th>\r
 193     <td><patTemplate:tmpl name="product_cart" visibility="hidden"><input id="input_cart_submit" type="button" class="button" value="カートに入れる" data-product="download" /></patTemplate:tmpl>\r
 194     <patTemplate:tmpl name="product_download" visibility="hidden">購入済み&nbsp;&nbsp;&nbsp;&nbsp;<input id="download_image" type="button" class="button" value="画像ダウンロード" /></patTemplate:tmpl></td>\r
 195 </tr>\r
 196 </patTemplate:tmpl>\r
 197 </tbody>\r
 198 </table>\r
 199 </patTemplate:tmpl>\r
 200 <table id="photo_comment" class="photo_info">\r
 201 <caption>コメント</caption>\r
 202 <tbody>\r
 203 <patTemplate:tmpl name="itemlist">\r
 204 <tr><td><span id="photo_rating{NO}" class="photo_rating_comment" value="{RATE_VALUE}"></span>&nbsp;&nbsp;{DATE}<br />{COMMENT}</td></tr>\r
 205 </patTemplate:tmpl>\r
 206 </tbody>\r
 207 </table>\r
 208 </div>\r
 209 </form>\r
 210 </patTemplate:tmpl>\r
 211 </patTemplate:tmpl>\r