widgets/banner3/include/template/admin_image_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-2013 Magic3 Project.\r
   9  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License\r
  10  * @version    SVN: $Id: admin_image_detail.tmpl.html 5961 2013-04-22 12:43:56Z 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 function selectMenu(){\r
  17         document.main.act.value = 'select';\r
  18         document.main.submit();\r
  19         return true;\r
  20 }\r
  21 function addItem(){\r
  22         if (!window.confirm('項目を新規追加しますか?')) return false;\r
  23         document.main.act.value = 'add';\r
  24         document.main.submit();\r
  25         return true;\r
  26 }\r
  27 function updateItem(serialNo){\r
  28         if (!window.confirm('項目を更新しますか?')) return false;\r
  29         document.main.act.value = 'update';\r
  30         document.main.submit();\r
  31         return true;\r
  32 }\r
  33 function delItem(serialNo){\r
  34         if (!window.confirm('項目を削除しますか?')) return false;\r
  35         document.main.act.value = 'delete';\r
  36         document.main.submit();\r
  37         return true;\r
  38 }\r
  39 function cancelItem(){\r
  40         document.main.task.value = 'image';\r
  41         document.main.submit();\r
  42         return true;\r
  43 }\r
  44 // 画像のデフォルトサイズを取得\r
  45 function getDefaultSize()\r
  46 {\r
  47         var imageWidth = $('#image_width');\r
  48         var imageHeight = $('#image_height');\r
  49         var preImage = $('#preview_img');\r
  50                 \r
  51         var imgObj = new Image();\r
  52         imgObj.src = preImage.attr('src');\r
  53         imageWidth.val(imgObj.width);\r
  54         imageHeight.val(imgObj.height);\r
  55         \r
  56         // デフォルトサイズで表示\r
  57         updateImage();\r
  58 }\r
  59 function updateImage()\r
  60 {\r
  61         // プレビュー画像設定\r
  62         var type = $('#item_type').val();\r
  63         var width = $('#image_width').val();\r
  64         var height = $('#image_height').val();\r
  65         var url = $('#item_image_url').val();\r
  66         var innerText;\r
  67         var preOuter = $('#preview_outer');\r
  68         if (type == 0){\r
  69                 innerText = '<img id="preview_img" ';\r
  70                 if (width != '') innerText += ' width="' + width + '"';\r
  71                 if (height != '') innerText += ' height="' + height + '"';\r
  72                 innerText += ' />';\r
  73                 preOuter.html(innerText);\r
  74                 \r
  75                 // 画像を読み込む\r
  76                 $('#preview_img').attr('src', url).load(function(){\r
  77                         m3AdjustParentWindow();// 親ウィンドウリサイズ\r
  78                 });\r
  79         } else {\r
  80                 innerText = '<object id="preview_obj" data="' + url + '" type="application/x-shockwave-flash"';\r
  81                 if (width != '') innerText += ' width="' + width + '"';\r
  82                 if (height != '') innerText += ' height="' + height + '"';\r
  83                 innerText += '><param id="preview_param" name="movie" value="' + url + '" /><param name="wmode" value="transparent" /></object>';\r
  84                 preOuter.html(innerText);\r
  85         }\r
  86 }\r
  87 function selectType()\r
  88 {\r
  89         // URLクリア\r
  90         $('#image_url').text('');\r
  91         $('#item_image_url').val('');\r
  92         $('#image_width').val('');\r
  93         $('#image_height').val('');\r
  94         $('#preview_outer').html('');\r
  95         \r
  96         // 項目の使用可否を設定\r
  97         setupItems();\r
  98 }\r
  99 // ファイルブラウザ起動\r
 100 function selectImage()\r
 101 {\r
 102         var type = $('#item_type').val();\r
 103         if (type == 0){\r
 104                 m3_openImageFileBrowser();\r
 105         } else if (type == 1){\r
 106                 m3_openFlashFileBrowser();\r
 107         }\r
 108 }\r
 109 // ファイルブラウザからの設定用\r
 110 function SetUrl(url)\r
 111 {\r
 112         // URL設定\r
 113         $('#image_url').text(url);\r
 114         $('#item_image_url').val(url);\r
 115         \r
 116         // Flashの場合はデフォルトサイズを設定\r
 117         if ($('#item_type').val() == '1'){\r
 118                 $('#image_width').val('130');\r
 119                 $('#image_height').val('130');\r
 120         }\r
 121         \r
 122         // 画像表示\r
 123         updateImage();\r
 124 }\r
 125 function setLinkUrl(url)\r
 126 {\r
 127         alert(url);\r
 128 }\r
 129 // URL作成\r
 130 function createUrl(deviceType)\r
 131 {\r
 132 $('#linkinfo_parent').show();\r
 133 CKEDITOR.instances['linkinfo'].execCommand( 'linkinfo' );\r
 134 $('#linkinfo_parent').hide();\r
 135 }\r
 136 function setupItems()\r
 137 {\r
 138         var type = $('#item_type').val();\r
 139         if (type == 0){\r
 140                 $('#defsize_button').attr('disabled', false);\r
 141         } else if (type == 1){\r
 142                 $('#defsize_button').attr('disabled', true);\r
 143         }\r
 144 }\r
 145 $(function(){\r
 146         // 項目の使用可否を設定\r
 147         setupItems();\r
 148         \r
 149         // WYSIWYGエディター作成\r
 150         //m3_setHtmlEditor('item_html');\r
 151         m3SetWysiwygEditor('item_html', 150, false);\r
 152         \r
 153         var config = {};\r
 154         config['customConfig'] = M3_ROOT_URL + '/scripts/m3/ckconfig_direct.js';\r
 155         CKEDITOR.replace('linkinfo', config);\r
 156         $('#linkinfo_parent').hide();\r
 157 });\r
 158 //]]>\r
 159 </script>\r
 160 <div align="center">\r
 161 {MENU_ITEMS}\r
 162 <!-- m3:ErrorMessage -->\r
 163 <form method="post" name="main">\r
 164 <input type="hidden" name="task" value="image_detail" />\r
 165 <input type="hidden" name="act" />\r
 166 <input type="hidden" name="serial" value="{SERIAL}" />\r
 167 <input type="hidden" name="page" value="{PAGE}" />\r
 168 <!-- m3:PostParam -->\r
 169 <table width="90%">\r
 170 <tr><td><span {_HELP_IMAGE_DETAIL}><label>画像リンク詳細</label></span></td><td align="right">\r
 171 <span {_HELP_IMAGE_RET_BTN}><input type="button" class="button" onclick="cancelItem();" value="戻る" /></span>\r
 172 </td></tr>\r
 173 <tr><td colspan="2">\r
 174 <table class="simple-table" width="100%">\r
 175     <tbody>\r
 176         <tr>\r
 177             <td class="table-headside" width="150"><span {_HELP_IMAGE_NAME_INPUT}>名前</span></td>\r
 178             <td width="500">\r
 179             <select name="item_imageid" onchange="selectMenu();">\r
 180                 <option value="0" {SELECTED}>-- 新規 --</option>\r
 181                 <patTemplate:tmpl name="imageid_list">\r
 182                 <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 183                 </patTemplate:tmpl>\r
 184             </select>\r
 185             <input type="text" name="item_name" value="{NAME}" size="40" maxlength="40" /></td>\r
 186             <td class="table-headside" width="100"><span {_HELP_IMAGE_ID}>ID</span></td>\r
 187             <td align="center">{ID}</td>\r
 188         </tr>\r
 189         <tr class="even">\r
 190             <td class="table-headside"><span {_HELP_IMAGE_VISIBLE}>公開</span></td>\r
 191             <td colspan="3"><input type="checkbox" name="item_visible" {VISIBLE} /></td>\r
 192         </tr>\r
 193         <tr>\r
 194             <td class="table-headside"><span {_HELP_IMAGE_TYPE}>画像タイプ</span></td>\r
 195             <td colspan="3">\r
 196             <select id="item_type" name="item_type" onchange="selectType();">\r
 197                 <patTemplate:tmpl name="item_type_list">\r
 198                 <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 199                 </patTemplate:tmpl>\r
 200             </select>&nbsp;&nbsp;埋め込みタグ：<input type="text" value="{TAG}" length="20" readonly />\r
 201             </td>\r
 202         </tr>\r
 203         <tr class="even">\r
 204             <td class="table-headside"><span {_HELP_IMAGE_FILE}>画像</span></td>\r
 205             <td colspan="3"><div id="preview_outer">{IMAGE}</div><div><input type="button" class="button" onclick="selectImage();" value="変更" /></div>\r
 206             </td>\r
 207         </tr>\r
 208         <tr>\r
 209             <td class="table-headside"><span {_HELP_IMAGE_URL}>画像パス</span></td>\r
 210             <td colspan="3"><span id="image_url">{IMAGE_URL}</span><input type="hidden" id="item_image_url" name="item_image_url" value="{IMAGE_URL}" /></td>\r
 211         </tr>\r
 212         <tr class="even">\r
 213             <td class="table-headside"><span {_HELP_IMAGE_SIZE}>画像サイズ</span></td>\r
 214             <td colspan="3"><div style="white-space:nowrap">幅：<input type="text" id="image_width" name="item_width" size="4" maxlength="4" value="{WIDTH}" onkeyup="updateImage();" onkeypress="return m3_numericKey(event,true);" />&nbsp;&nbsp;高さ：<input type="text" id="image_height" name="item_height" size="3" maxlength="3" value="{HEIGHT}" onkeyup="updateImage();" onkeypress="return m3_numericKey(event,true);" />\r
 215             <input type="button" class="button" id="defsize_button" onclick="getDefaultSize();" value="デフォルトサイズ取得" /></div></td>\r
 216         </tr>\r
 217         <tr>\r
 218             <td class="table-headside"><span {_HELP_IMAGE_LINK_URL}>リンク</span></td>\r
 219             <td colspan="3"><label>デフォルト：<input type="text" name="item_link_url" value="{LINK_URL}" maxlength="200" style="width:80%;" /></label><!--<input type="button" class="button" onclick="createUrl(0);" value="URL作成" />--><br />\r
 220             <label>スマートフォン：<input type="text" name="item_link_url_s" value="{LINK_URL_S}" maxlength="200" style="width:80%;" /></label><!--<input type="button" class="button" onclick="createUrl(2);" value="URL作成" />-->\r
 221             </td>\r
 222         </tr>\r
 223         <tr class="even">\r
 224             <td class="table-headside"><span {_HELP_IMAGE_TARGET}>リンクターゲット</span></td>\r
 225             <td colspan="3">\r
 226             <select name="item_target_type">\r
 227                 <patTemplate:tmpl name="item_target_list">\r
 228                 <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 229                 </patTemplate:tmpl>\r
 230             </select>\r
 231                 </td>\r
 232         </tr>\r
 233         <tr>\r
 234             <td class="table-headside"><span {_HELP_IMAGE_ALT}>代替テキスト</span></td>\r
 235             <td colspan="3"><input type="text" name="item_alt" value="{ALT}" maxlength="200" style="width:100%;" /></td>\r
 236         </tr>\r
 237     <tr class="even">\r
 238             <td class="table-headside"><span {_HELP_IMAGE_LAYOUT}>レイアウト</span></td>\r
 239             <td colspan="3"><textarea name="item_html">{HTML}</textarea></td>\r
 240         </tr>\r
 241     <tr>\r
 242             <td class="table-headside"><span {_HELP_IMAGE_NOTE}>管理者用備考</span></td>\r
 243             <td colspan="3"><input type="text" name="item_admin_note" value="{ADMIN_NOTE}" maxlength="200" style="width:100%;" /></td>\r
 244         </tr>\r
 245         <tr class="even">\r
 246             <td class="table-headside"><span {_HELP_IMAGE_UPDATE_USER}>更新者</span></td>\r
 247             <td>{UPDATE_USER}</td>\r
 248             <td class="table-headside"><span {_HELP_IMAGE_UPDATE_DT}>更新日時</span></td>\r
 249             <td>{UPDATE_DT}</td>\r
 250         </tr>\r
 251         <tr>\r
 252             <td colspan="4" align="right">\r
 253 <patTemplate:tmpl name="del_button" visibility="hidden">\r
 254                 <input type="button" class="button" onclick="delItem();" value="削除" />\r
 255                 <input type="button" class="button" onclick="updateItem();" value="更新" />\r
 256 </patTemplate:tmpl>\r
 257 <patTemplate:tmpl name="add_button" visibility="hidden">\r
 258                 <input type="button" class="button" onclick="addItem();" value="新規追加" />\r
 259 </patTemplate:tmpl>\r
 260             </td>\r
 261         </tr>\r
 262     </tbody>\r
 263 </table>\r
 264 </td></tr>\r
 265 </table>\r
 266 </form>\r
 267 </div>\r
 268 <div name="linkinfo_parent" id="linkinfo_parent"><textarea type="text" name="linkinfo" id="linkinfo" ></textarea></div>\r
 269 </patTemplate:tmpl>\r