widgets/admin_main/include/template/editmenu.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: editmenu.tmpl.html 5799 2013-03-05 23:08: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 var widgetInfo = {WIDGET_INFO};\r
  17 var pageInfo = {PAGE_INFO};\r
  18 \r
  19 function configOthers(){\r
  20         document.main.task.value = 'editmenu_others';\r
  21         document.main.submit();\r
  22         return true;\r
  23 }\r
  24 function updateItem(){\r
  25         if (!window.confirm('{_LC_MSG_UPDATE}')) return false;\r
  26         \r
  27         // メニュー項目タイプを格納\r
  28         var children = $('#menulist_assigned').children('.menulist_aitem');\r
  29         for (i = 0; i < children.length; i++){\r
  30                 var child = $(children[i]);\r
  31                 var type = child.children('.item_type').val();\r
  32                 var sendParam = '<input type="hidden" name="items_type[' + i + ']" value="' + type + '" />';\r
  33                 $('#main').append(sendParam);\r
  34                 \r
  35                 var name = '';\r
  36                 var desc = '';\r
  37                 if (type == 'type_admin' || type == 'type_widget' || type == 'type_title'){\r
  38                         name = child.find('.item_name').val();\r
  39                         desc = child.find('.item_desc').val();\r
  40                 }\r
  41                 sendParam = '<input type="hidden" name="items_name[' + i + ']" value="' + name + '" />';\r
  42                 $('#main').append(sendParam);\r
  43                 sendParam = '<input type="hidden" name="items_desc[' + i + ']" value="' + desc + '" />';\r
  44                 $('#main').append(sendParam);\r
  45                 \r
  46                 var option = '';\r
  47                 var param = '';\r
  48                 if (type == 'type_admin' || type == 'type_widget'){\r
  49                         option = child.find('.item_option').val();\r
  50                         param = child.find('.item_param').val();\r
  51                 }\r
  52                 sendParam = '<input type="hidden" name="items_option[' + i + ']" value="' + option + '" />';\r
  53                 $('#main').append(sendParam);\r
  54                 sendParam = '<input type="hidden" name="items_param[' + i + ']" value="' + param + '" />';\r
  55                 $('#main').append(sendParam);\r
  56         }\r
  57         \r
  58         document.main.act.value = 'update';\r
  59         document.main.submit();\r
  60         return true;\r
  61 }\r
  62 function selectAdminPage(){\r
  63         var i = document.main.item_adminpage.selectedIndex;\r
  64         $('#adminpage_desc').text(pageInfo[i].desc);\r
  65 }\r
  66 function selectWidget(){\r
  67         var i = document.main.item_widget.selectedIndex;\r
  68         $('#widget_img').attr('src', widgetInfo[i].image);\r
  69         $('#widget_desc').text(widgetInfo[i].desc);\r
  70 }\r
  71 function downloadFile(){\r
  72     document.upload.act.value = 'download';\r
  73     document.upload.submit();\r
  74     return true;\r
  75 }\r
  76 function uploadCheck(){\r
  77         if (!document.upload.upfile.value){\r
  78                 alert('{_LC_MSG_UPLOAD_FILE_NOT_SELECTED}');\r
  79                 return;\r
  80         }\r
  81         document.upload.act.value = 'upload';\r
  82         if (window.confirm('{_LC_MSG_UPLOAD}')){\r
  83                 document.upload.submit();\r
  84         }\r
  85 }\r
  86 (function($){\r
  87         var mSavedVal;\r
  88         var mInsertIndex = -1;\r
  89         var createMenuItem = function(type, option){\r
  90                 var title;\r
  91                 var bodyHtml = '';\r
  92                 var className = 'menulist_aitem';\r
  93                 var name = '';\r
  94                 var desc = '';\r
  95                 var index = -1;\r
  96 \r
  97                 if (type == 'type_admin'){\r
  98                         $('#item_adminpage option').each(function(i){\r
  99                                 if ($(this).val() == option){\r
 100                                         name = $(this).text();\r
 101                                         index = i;\r
 102                                         return false;\r
 103                                 }\r
 104                         });\r
 105                         title = '{_LC_LABEL_ADMIN}[' + name + ']';\r
 106                         className += ' menulist_subitem';\r
 107                         if (index != -1) desc = pageInfo[index].desc;\r
 108                 } else if (type == 'type_widget'){\r
 109                         $('#item_widget option').each(function(i){\r
 110                                 if ($(this).val() == option){\r
 111                                         name = $(this).text();\r
 112                                         index = i;\r
 113                                         return false;\r
 114                                 }\r
 115                         });\r
 116                         title = '{_LC_LABEL_WIDGET}[' + name + ']';\r
 117                         className += ' menulist_subitem';\r
 118                         if (index != -1) desc = widgetInfo[index].desc;\r
 119                 } else {\r
 120                         var children = $('#menulist_available').children('.menulist_item');\r
 121                         for (i = 0; i < children.length; i++){\r
 122                                 var child = $(children[i]);\r
 123                                 if (child.children('.item_type').val() == type){\r
 124                                         title = child.children('.menulist_item_head').text();\r
 125                                         break;\r
 126                                 }\r
 127                         }\r
 128                         if (type == 'type_title'){\r
 129                                 name = '{_LC_LABEL_UNTITLED}';\r
 130                         }\r
 131                 }\r
 132                 if (type == 'type_admin' || type == 'type_widget'){\r
 133                         bodyHtml += '<table border="0" cellpadding="2" cellspacing="1" width="95%">';\r
 134                         bodyHtml += '<tr><td width="30">{_LC_LABEL_NAME}</td><td><input type="text" class="item_name" name="item_name" value="' + name + '" size="25" maxlength="40"></td>';\r
 135                         bodyHtml += '<td width="55">{_LC_LABEL_OPTION}</td><td><input type="text" class="item_param" name="item_param" size="15" maxlength="30"></td></tr>';\r
 136                         bodyHtml += '<tr><td>{_LC_LABEL_DESC}</td><td colspan="3"><textarea class="item_desc" style="width:100%" rows="1">' + desc + '</textarea></td></tr>';\r
 137                         bodyHtml += '</table>';\r
 138                 } else if (type == 'type_title'){\r
 139                         bodyHtml += '<table border="0" cellpadding="2" cellspacing="1" width="95%">';\r
 140                         bodyHtml += '<tr><td width="30">{_LC_LABEL_NAME}</td><td><input type="text" class="item_name" name="item_name" value="' + name + '" size="25" maxlength="40"></td></tr>';\r
 141                         bodyHtml += '<tr><td>{_LC_LABEL_DESC}</td><td><textarea class="item_desc" style="width:100%" rows="1">' + desc + '</textarea></td></tr>';\r
 142                         bodyHtml += '</table>';\r
 143                 }\r
 144                 var itemHtml    =  '<div class="' + className + '">';\r
 145                 itemHtml        += '<input type="hidden" class="item_type" value="' + type + '" />';\r
 146                 itemHtml        += '<input type="hidden" class="item_option" value="' + option + '" />';\r
 147                 itemHtml        += '<div class="menulist_aitem_head">' + title + '</div>';\r
 148                 itemHtml        += '<div class="menulist_aitem_body">' + bodyHtml + '</div>';\r
 149                 itemHtml        += '</div>';\r
 150                 var menuItem = $(itemHtml);\r
 151                 \r
 152                 // チェックボックス追加\r
 153                 menuItem.children('.menulist_aitem_head').append('<span class="options"><a class="menulist_aitem_close">close</a></span>');\r
 154                 menuItem.find('a.menulist_aitem_close').bind('click', menuitemClose);\r
 155                 return menuItem;\r
 156         };\r
 157         var menuitemClose = function(){\r
 158                 var menuItem = $(this).parents('.menulist_aitem');\r
 159                 menuItem.fadeOut('slow', function(){\r
 160                         $(this).remove();\r
 161                 });\r
 162         };\r
 163         // ウィジェットリストからのドラッグ処理\r
 164         var mouseInDrag = function(obj, e){\r
 165                 var width = obj.width();\r
 166                 var height = obj.height();\r
 167                 var left = obj.offset().left;\r
 168                 var top = obj.offset().top;\r
 169 \r
 170                 if (left <= e.pageX && e.pageX <= left + width &&\r
 171                         top <= e.pageY && e.pageY <= top + height){\r
 172 \r
 173                         // ドロップする位置\r
 174                         var children = obj.children('.menulist_aitem');\r
 175                         var spacePos = -1;\r
 176                         for (var i = 0; i < children.length; i++){\r
 177                                 var child = $(children[i]);\r
 178                                 if (child.hasClass('menulist_spacer')){\r
 179                                         spacePos = i;\r
 180                                         break;\r
 181                                 }\r
 182                         }\r
 183                         \r
 184                         var insertPos = -1;\r
 185                         var i = 0;\r
 186                         var play = 0;\r
 187                         for (i = 0; i < children.length; i++){\r
 188                                 var child = $(children[i]);\r
 189                                 var childLeft = child.offset().left;\r
 190                                 var childTop = child.offset().top;\r
 191                                 var childWidth = child.width();\r
 192                                 var childHeight = child.height();\r
 193 \r
 194                                 play = 0;\r
 195                                 if (spacePos != -1){\r
 196                                         if (i == spacePos - 1){\r
 197                                                 play = -10;\r
 198                                         } else if (i == spacePos + 1){\r
 199                                                 play = 10;\r
 200                                         } else if (i == spacePos){\r
 201                                                 if (childLeft <= e.pageX && e.pageX <= childLeft + childWidth &&\r
 202                                                         childTop <= e.pageY && e.pageY <= childTop + childHeight){\r
 203                                                         break;\r
 204                                                 }\r
 205                                         }\r
 206                                 }\r
 207                                 if (e.pageY < child.offset().top + childHeight / 2 + play){\r
 208                                         break;\r
 209                                 }\r
 210                         }\r
 211                         var spacing = true;\r
 212                         if (spacePos == -1){\r
 213                                 insertPos = i;\r
 214                         } else {\r
 215                                 if (insertPos < spacePos){\r
 216                                         insertPos = i;\r
 217                                 } else {\r
 218                                         if (insertPos == spacePos || insertPos == spacePos +1){\r
 219                                                 spacing = false;\r
 220                                         } else {\r
 221                                                 insertPos = i -1;\r
 222                                         }\r
 223                                 }\r
 224                         }\r
 225                         if (spacing){\r
 226                                 $('.menulist_spacer').remove();\r
 227                                 \r
 228                                 children = obj.children('.menulist_aitem');\r
 229                                 \r
 230                                 var spacerHtml = '<div class="menulist_spacer" style="height:50px;border:0;"></div>';\r
 231                                 if (insertPos < children.length){\r
 232                                         $(children[insertPos]).before(spacerHtml);\r
 233                                 } else {\r
 234                                         obj.append(spacerHtml);\r
 235                                 }\r
 236                                 mInsertIndex = insertPos;\r
 237                         }\r
 238                         return true;\r
 239                 } else {\r
 240                         return false;\r
 241                 }\r
 242         };\r
 243         $(document).ready(function(){\r
 244                 var els = ['#menulist_assigned'];\r
 245                 var $els = $(els.toString());\r
 246                 \r
 247                 // チェックボックス追加\r
 248                 $('div.menulist_aitem_head', $els).append('<span class="options"><a class="menulist_aitem_close">close</a></span>');\r
 249                 $('a.menulist_aitem_close').bind('click', menuitemClose);\r
 250                 \r
 251                 $els.sortable({\r
 252                         items: '> div',\r
 253                         handle: 'div.menulist_aitem_head',\r
 254                         cursor: 'move',\r
 255                         cursorAt: { top: 0, left: 0 },\r
 256                         opacity: 0.5,\r
 257                         //helper: 'clone',\r
 258                         appendTo: 'body',\r
 259                         //placeholder: 'clone',\r
 260                         //placeholder: 'placeholder',\r
 261                         connectWith: els,\r
 262                         start: function(e,ui) {\r
 263                                 ui.helper.css("width", ui.item.width());\r
 264                         }\r
 265                 });\r
 266                 $('div.menulist_item').draggable({\r
 267                         cancel: '.menulist_item_body',\r
 268                         helper: 'clone',\r
 269                         cursor: 'move',\r
 270                         cursorAt: { top: 0, left: 0 },\r
 271                         opacity: 0.5,\r
 272                         appendTo: 'body',\r
 273                         start: function(e, ui){\r
 274                                 mSavedVal = $(this).find('.selectmenu').val();// ドラッグする対象の現在値\r
 275                                 ui.helper.css("width", $('.ui-draggable').width());\r
 276                         },\r
 277                         drag: function(e, ui){\r
 278                                 var object = $('#menulist_assigned');\r
 279                                 if (object) mouseInDrag(object, e);\r
 280                                 \r
 281                                 // ドラッグ中の項目のSELECTメニューの選択項目を固定\r
 282                                 $('.ui-draggable-dragging').find('.selectmenu option').each(function(i){\r
 283                                         if ($(this).val() == mSavedVal){\r
 284                                                 $(this).attr('selected', 'selected');\r
 285                                                 return false;\r
 286                                         }\r
 287                                 });\r
 288                         },\r
 289                         stop: function(e, ui){\r
 290                                 $('.menulist_spacer').remove();\r
 291                                 if (mInsertIndex == -1) return;\r
 292                                 \r
 293                                 // メニュー項目を追加\r
 294                                 var itemType = $('.ui-draggable-dragging').children('.item_type').val();\r
 295                                 var obj = $('#menulist_assigned');\r
 296                                 var children = $('#menulist_assigned').children('.menulist_aitem');\r
 297                                 var menuItem    = createMenuItem(itemType, mSavedVal);\r
 298                                 if (mInsertIndex < children.length){\r
 299                                         $(children[mInsertIndex]).before(menuItem);\r
 300                                 } else {\r
 301                                         obj.append(menuItem);\r
 302                                 }\r
 303                         }\r
 304                 });\r
 305                 $('#menulist_assigned').droppable({\r
 306                         accept: 'div.menulist_item',\r
 307                         out: function(e, ui){\r
 308                                 $('.menulist_spacer').remove();\r
 309                                 mInsertIndex = -1;// ドロップキャンセル\r
 310                         }\r
 311                 });\r
 312                 // 管理画面メニュー、ウィジェットメニュー初期化\r
 313                 selectAdminPage();\r
 314                 selectWidget();\r
 315                 \r
 316                 // キー設定\r
 317                 $(document).keyup(function(e){\r
 318                         if (e.which == 27) location.href = '{TOP_URL}'; // ESCキー\r
 319                 });\r
 320         });\r
 321 })(jQuery);\r
 322 //]]>\r
 323 </script>\r
 324 <div align="center">\r
 325 <!-- m3:ErrorMessage -->\r
 326 <table width="90%">\r
 327 <tr><td><label>{_LC_LABEL_EDIT_MENU}</label></td>\r
 328 <td align="right"><!--<span {_HELP_EDITMENU_CONFIG_OTHERS_BTN}><input type="button" class="button" onclick="configOthers();" value="{_LC_LABEL_OTHERS}" /></span>-->\r
 329 </td></tr>\r
 330 <tr><td colspan="2" align="center">\r
 331 \r
 332 <form method="post" name="main" id="main">\r
 333 <input type="hidden" name="act" />\r
 334 <input type="hidden" name="task" value="editmenu" />\r
 335 <table border="0" cellpadding="0" cellspacing="0">\r
 336     <tr><td>\r
 337         <div class="menulist_frame" style="width:330px;">\r
 338         <h1>{_LC_LABEL_MENU_ITEM}</h1>\r
 339         <div id="menulist_available" class="menulist_box">\r
 340         <patTemplate:tmpl name="menuavailablelist" type="condition" conditionvar="type">\r
 341         <pattemplate:sub condition="__default">\r
 342         <div class="menulist_item">\r
 343             <input type="hidden" class="item_type" value="{ITEM_TYPE}" />\r
 344             <div class="menulist_item_head">{NAME}</div>\r
 345             <div class="menulist_item_body">\r
 346             <table border="0" cellpadding="0" cellspacing="0">\r
 347                 <tr><td>{DESC}</td></tr>\r
 348             </table>\r
 349             </div>\r
 350         </div>\r
 351         </pattemplate:sub>\r
 352         <pattemplate:sub condition="admin_page">\r
 353         <div id="admin_page_item" class="menulist_item">\r
 354             <input type="hidden" class="item_type" value="{ITEM_TYPE}" />\r
 355             <div class="menulist_item_head">{NAME}</div>\r
 356             <div class="menulist_item_body">\r
 357             <table border="0" cellpadding="2" cellspacing="1">\r
 358                 <tr><td>{DESC}</td></tr>\r
 359                 <tr><td><patTemplate:link src="select_admin_page" /></td></tr>\r
 360                 <tr><td><span id="adminpage_desc"></span></td></tr>\r
 361             </table>\r
 362             </div>\r
 363         </div>\r
 364         </pattemplate:sub>\r
 365         <pattemplate:sub condition="widget">\r
 366         <div id="widget_item" class="menulist_item">\r
 367             <input type="hidden" class="item_type" value="{ITEM_TYPE}" />\r
 368             <div class="menulist_item_head">{NAME}</div>\r
 369             <div class="menulist_item_body">\r
 370             <table border="0" cellpadding="2" cellspacing="1">\r
 371                 <tr><td colspan="2">{DESC}</td></tr>\r
 372                 <tr><td colspan="2"><patTemplate:link src="select_widget" /></td></tr>\r
 373                 <tr><td valign="top"><img id="widget_img" /></td><td><span id="widget_desc"></span></td></tr>\r
 374             </table>\r
 375             </div>\r
 376         </div>\r
 377         </pattemplate:sub>\r
 378         </patTemplate:tmpl>\r
 379         </div>\r
 380         </div>\r
 381     </td><td width="50" align="center">\r
 382     <img src="{_ROOT_URL}/images/system/2rightarrow.png" />\r
 383     </td><td>\r
 384         <div class="menulist_frame" style="width:500px;">\r
 385         <h1>{_LC_LABEL_CONFIGURED_MENU_ITEM}</h1>\r
 386         <div id="menulist_assigned" class="menulist_box_assigned">\r
 387         <patTemplate:tmpl name="menuassignedlist" type="condition" conditionvar="type">\r
 388         <pattemplate:sub condition="__default">\r
 389         <div class="menulist_aitem">\r
 390             <input type="hidden" class="item_type" value="{ITEM_TYPE}" />\r
 391             <div class="menulist_aitem_head">{TITLE}</div>\r
 392             <div class="menulist_aitem_body">{BODY}</div>\r
 393         </div>\r
 394         </pattemplate:sub>\r
 395         <pattemplate:sub condition="subitem">\r
 396         <div class="menulist_aitem menulist_subitem">\r
 397             <input type="hidden" class="item_type" value="{ITEM_TYPE}" />\r
 398             <input type="hidden" class="item_option" value="{OPTION}" />\r
 399             <div class="menulist_aitem_head">{TITLE}</div>\r
 400             <div class="menulist_aitem_body">\r
 401                 <table border="0" cellpadding="2" cellspacing="1" width="95%">\r
 402                 <tr><td width="30">{LABEL_NAME}</td><td><input type="text" class="item_name" name="item_name" value="{NAME}" size="25" maxlength="40" /></td>\r
 403                 <td width="55">{LABEL_OPTION}</td><td><input type="text" class="item_param" name="item_param" value="{PARAM}" size="15" maxlength="30" /></td></tr>\r
 404                 <tr><td>{LABEL_DESC}</td><td colspan="3"><textarea class="item_desc" style="width:100%" rows="1">{DESC}</textarea></td></tr>\r
 405                 </table>\r
 406             </div>\r
 407         </div>\r
 408         </pattemplate:sub>\r
 409         <pattemplate:sub condition="title">\r
 410         <div class="menulist_aitem">\r
 411             <input type="hidden" class="item_type" value="{ITEM_TYPE}" />\r
 412             <div class="menulist_aitem_head">{TITLE}</div>\r
 413             <div class="menulist_aitem_body">\r
 414                 <table border="0" cellpadding="2" cellspacing="1" width="95%">\r
 415                 <tr><td width="30">{LABEL_NAME}</td><td><input type="text" class="item_name" name="item_name" value="{NAME}" size="25" maxlength="40" /></td></tr>\r
 416                 <tr><td>{LABEL_DESC}</td><td><textarea class="item_desc" style="width:100%" rows="1">{DESC}</textarea></td></tr>\r
 417                 </table>\r
 418             </div>\r
 419         </div>\r
 420         </pattemplate:sub>\r
 421         </patTemplate:tmpl>\r
 422         </div>\r
 423         </div>\r
 424     </td></tr>\r
 425         <tr>\r
 426             <td colspan="3" align="right">\r
 427             <input type="button" class="button" onclick="updateItem();" value="{_LC_LABEL_UPDATE}" />\r
 428             </td>\r
 429         </tr>\r
 430 </table>\r
 431 </form>\r
 432 <br />\r
 433 <!--</td></tr>\r
 434 <tr><td>-->\r
 435 <form enctype="multipart/form-data" method="post" name="upload">\r
 436 <input type="hidden" name="act" />\r
 437 <input type="hidden" name="task" value="editmenu" />\r
 438 <table class="simple-table">\r
 439     <tbody>\r
 440         <tr>\r
 441             <td class="table-head">{_LC_LABEL_MENU_SCRIPT}</td>\r
 442         </tr>\r
 443         <tr>\r
 444             <td><input type="file" name="upfile" size="50" /><input type="button" class="button" onclick="uploadCheck();" value="{_LC_LABEL_UPLOAD}" /></td>\r
 445         </tr>\r
 446         <tr class="even">\r
 447         <td align="right">\r
 448             <input type="button" class="button" onclick="downloadFile();" value="{_LC_LABEL_DOWNLOAD}" />\r
 449         </td>\r
 450         </tr>\r
 451     </tbody>\r
 452 </table>\r
 453 </form>\r
 454 </td></tr>\r
 455 </table>\r
 456 </div>\r
 457 </patTemplate:tmpl>\r
 458 \r
 459 <patTemplate:tmpl name="select_admin_page"> \r
 460 <select id="item_adminpage" name="item_adminpage" class="selectmenu" onchange="selectAdminPage();">\r
 461 <patTemplate:tmpl name="admin_list">\r
 462     <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 463 </patTemplate:tmpl>\r
 464 </select>\r
 465 </patTemplate:tmpl>\r
 466 \r
 467 <patTemplate:tmpl name="select_widget"> \r
 468 <select id="item_widget" name="item_widget" class="selectmenu" onchange="selectWidget();">\r
 469 <patTemplate:tmpl name="widget_list">\r
 470     <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 471 </patTemplate:tmpl>\r
 472 </select>\r
 473 </patTemplate:tmpl>\r