scripts/m3admin_widget1.5.3.js

   1 /**\r
   2  * Magic3管理機能用JavaScriptライブラリ\r
   3  *\r
   4  * JavaScript 1.5\r
   5  *\r
   6  * LICENSE: This source file is licensed under the terms of the GNU General Public License.\r
   7  *\r
   8  * @package    Magic3 Framework\r
   9  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>\r
  10  * @copyright  Copyright 2006-2013 Magic3 Project.\r
  11  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License\r
  12  * @version    SVN: $Id: m3admin_widget1.5.3.js 5718 2013-02-21 01:09:52Z fishbone $\r
  13  * @link       http://www.magic3.org\r
  14  */\r
  15 (function($){\r
  16         window.m3 = {};\r
  17         var m3InsertIndex = -1;\r
  18         var m3UpdatePos;\r
  19         \r
  20         var m3UpdateByConfig = function(serial){\r
  21                 var widgets = $('.m3_widget_sortable');\r
  22                 for (var i = 0; i < widgets.length; i++){\r
  23                         var widget = $(widgets[i]);\r
  24                         var attrs = m3_splitAttr(widget.attr('m3'));\r
  25                         \r
  26                         if (attrs['serial'] == serial){\r
  27                                 m3TaskWidget('get', widget);\r
  28                                 break;\r
  29                         }\r
  30                 }\r
  31         };\r
  32         window.m3.m3UpdateByConfig = m3UpdateByConfig;\r
  33         \r
  34         var widgetClose = function(){\r
  35                 var widget = $(this).parents('.m3_widget_sortable');\r
  36                 widget.fadeOut('slow', function(){\r
  37                         m3TaskWidget('delete', $(this));\r
  38                         $(this).remove();\r
  39                 });\r
  40         };\r
  41         var m3TaskWidget = function(task, obj, widgetType, index, pos){\r
  42                 var parent = obj.parents('.m3_widgetpos_box');\r
  43                 var attrs = m3_splitAttr(obj.attr('m3'));\r
  44                 var pattrs = m3_splitAttr(parent.attr('m3'));\r
  45                 var param;\r
  46                 \r
  47                 // 変更先のウィジェット\r
  48                 var insertIndex = -1;\r
  49                 var widgets = '';\r
  50                 var children = parent.children('.m3_widget_sortable');\r
  51                 for (var i = 0; i < children.length; i++){\r
  52                         var child = $(children[i]);\r
  53                         var wattr = m3_splitAttr(child.attr('m3'));\r
  54                         \r
  55                         if (task == 'move'){\r
  56                                 if (wattr['serial'] == attrs['serial']){\r
  57                                         insertIndex = i;\r
  58                                         if (!pos) widgets += wattr['serial'] + ',';\r
  59                                 } else {\r
  60                                         widgets += wattr['serial'] + ',';\r
  61                                 }\r
  62                         } else {\r
  63                                 if (wattr['serial']) widgets += wattr['serial'] + ',';\r
  64                         }\r
  65                 }\r
  66                 widgets = widgets.substr(0, widgets.length -1);\r
  67                 \r
  68                 // 更新するポジションID\r
  69                 var updatepos = '';\r
  70                 for (var i = 0; i < M3_POSITIONS.length; i++){\r
  71                         var posObj = $(M3_POSITIONS[i]);\r
  72                         var battrs = m3_splitAttr(posObj.attr('m3'));\r
  73                         if (task == 'move'){\r
  74                                 if (battrs['pos'] == pattrs['pos'] || battrs['pos'] == pos) updatepos += posObj.attr('id') + ',';\r
  75                         } else {\r
  76                                 if (battrs['pos'] == pattrs['pos']) updatepos += posObj.attr('id') + ',';\r
  77                         }\r
  78                 }\r
  79                 updatepos = updatepos.substr(0, updatepos.length -1);\r
  80 \r
  81                 // 送信パラメータ\r
  82                 if (task == 'get'){\r
  83                         param = '&task=wget' + '&serial=' + attrs['serial'] + '&shared=' + attrs['shared'] +\r
  84                                         '&pos=' + pattrs['pos'] + '&widgets=' + widgets + '&updatepos=' + updatepos + '&rev=' + M3_REVISION;\r
  85                 } else if (task == 'toggle'){\r
  86                         param = '&task=wtoggle' + '&serial=' + attrs['serial'] + '&shared=' + attrs['shared'] +\r
  87                                         '&pos=' + pattrs['pos'] + '&widgets=' + widgets + '&updatepos=' + updatepos + '&rev=' + M3_REVISION;\r
  88                 } else if (task == 'delete'){\r
  89                         param = '&task=wdelete' + '&serial=' + attrs['serial'] + '&shared=' + attrs['shared'] +\r
  90                                         '&pos=' + pattrs['pos'] + '&widgets=' + widgets + '&updatepos=' + updatepos + '&rev=' + M3_REVISION;\r
  91                 } else if (task == 'add'){\r
  92                         var idHead = 'm3widgettype_';\r
  93                         var widgetId = widgetType.substr(idHead.length);\r
  94                         param = '&task=wadd' + '&widget=' + widgetId + '&index=' + index + \r
  95                                         '&pos=' + pattrs['pos'] + '&widgets=' + widgets + '&updatepos=' + updatepos + '&rev=' + M3_REVISION;\r
  96                 } else if (task == 'move'){\r
  97                         var position = pattrs['pos'];\r
  98                         if (pos) position += ',' + pos;\r
  99                         param = '&task=wmove' + '&serial=' + attrs['serial'] + '&index=' + insertIndex + \r
 100                                         '&pos=' + position + '&widgets=' + widgets + '&updatepos=' + updatepos + '&rev=' + M3_REVISION;\r
 101                 }\r
 102                 //alert(param);\r
 103                 $.ajax({        url: createUrl() + param,\r
 104                                         type:           'get',\r
 105                                         success:        function(data, textStatus){\r
 106                                                                         var children = jQuery(data).children('.m3_widgetpos_box');\r
 107                                                                         for (var i = 0; i < children.length; i++){\r
 108                                                                                 var child = $(children[i]);\r
 109                                                                                 if (i == 0){\r
 110                                                                                         // リビジョン番号更新\r
 111                                                                                         var attrs = m3_splitAttr(child.attr('m3'));\r
 112                                                                                         M3_REVISION = attrs['rev'];\r
 113                                                                                 }\r
 114                                                                                 $('#' + child.attr('id')).replaceWith(child);\r
 115                                                                         }\r
 116                                                                         setupSortable();\r
 117                                 \r
 118                                                                         // 関連画面を更新\r
 119                                                                         if (window.parent.m3UpdateByChildWindow) window.parent.m3UpdateByChildWindow();\r
 120                                                                 },\r
 121                                         error:          function(request, textStatus, errorThrown){\r
 122                                                                         $("#m3_message").html('<font color="red">通信エラー</font>');\r
 123                                                                 }\r
 124                 });\r
 125         };\r
 126         var setupSortable = function(){\r
 127                 var els = M3_POSITIONS;\r
 128                 var $els = $(els.toString());\r
 129                 var urlParams = m3_getUrlParam(document.URL);\r
 130                 var page = urlParams['_page'];\r
 131                 var sub = urlParams['_sub'];\r
 132                 \r
 133                 // チェックボックス追加\r
 134                 $('dt.m3_widget_with_check_box', $els).append('<span class="options"><a class="m3_widget_close">close</a></span>');\r
 135                 $('a.m3_widget_close').bind('click', widgetClose);\r
 136                 \r
 137                 //$els.sortable('destroy');             // 一旦削除\r
 138                 $els.sortable({\r
 139                         items: '> dl',\r
 140                         handle: 'dt',\r
 141                         cursor: 'move',\r
 142                 /*      cursorAt: { top: 0, left: 0 },          // selection bug? */\r
 143                         opacity: 0.5,\r
 144                         helper: 'clone',\r
 145                         appendTo: 'body',\r
 146                         placeholder: 'm3_spacer',\r
 147                         connectWith: els,\r
 148                         start: function(e,ui) {\r
 149                                 ui.helper.css("width", ui.item.width());\r
 150                                 \r
 151                                 $('#m3_widgetlist_inner').data('scroll', $('#m3_widgetlist_inner').scrollTop());\r
 152                                 $('#m3_widget_window').hide(1000);\r
 153                         },\r
 154                         stop: function(e,ui) {\r
 155                                 $('#m3_widget_window').show(500, function(){\r
 156                                         $('#m3_widgetlist_inner').scrollTop($('#m3_widgetlist_inner').data('scroll'));\r
 157                                 });\r
 158                         },\r
 159 //                      change: changeSortable,\r
 160                         update: updateSortable\r
 161                 });\r
 162                 \r
 163                 // コンテキストメニューを作成\r
 164                 $('.m3_widget_sortable').contextMenu('m3_widgetmenu', {\r
 165                         menuStyle: {\r
 166                                 // border : "2px solid green",\r
 167                                 backgroundColor: '#FFFFFF',\r
 168                                 width: "150px",\r
 169                                 textAlign: 'left',\r
 170                                 font: '12px/1.5 Arial, sans-serif'\r
 171                         },\r
 172                         itemStyle: {\r
 173                                 padding: '3px 3px'\r
 174                         },\r
 175                         bindings: {\r
 176                                 'm3_wconfig': function(t){\r
 177                                         var attrs = m3_splitAttr($('#' + t.id).attr('m3'));\r
 178                                     if (attrs['useconfig'] == '0'){\r
 179                                         alert("このウィジェットには設定画面がありません");\r
 180                                                 return;\r
 181                                     }\r
 182                                         m3ShowConfigWindow(attrs['widgetid'], attrs['configid'], attrs['serial']);\r
 183                                 },\r
 184                                 'm3_wadjust': function(t){\r
 185                                         var attrs = m3_splitAttr($('#' + t.id).attr('m3'));\r
 186                                         m3ShowAdjustWindow(attrs['configid'], attrs['serial'], page, sub);\r
 187                                 },\r
 188                                 'm3_wshared': function(t){\r
 189                                         m3TaskWidget('toggle', $('#' + t.id));\r
 190                                 },\r
 191                                 'm3_wdelete': function(t){\r
 192                                         var widget = $('#' + t.id);\r
 193                                         widget.fadeOut('slow', function(){\r
 194                                                 m3TaskWidget('delete', $(this));\r
 195                                                 $(this).remove();\r
 196                                         });\r
 197                                 }\r
 198                         },\r
 199                         onContextMenu: function(e) {\r
 200                                 var attrs = m3_splitAttr($(e.target).parents('dl').attr('m3'));\r
 201                                 if (attrs['shared'] == '0'){    // 共通ウィジェットでない\r
 202                                         $('#m3_wshared span').text('ページ共通属性を設定');\r
 203                                 } else {\r
 204                                         $('#m3_wshared span').text('ページ共通属性を解除');\r
 205                                 }\r
 206                                 return true;\r
 207                         },\r
 208                         onShowMenu: function(e, menu) {\r
 209                                 // メニュー項目の変更\r
 210                                 var attrs = m3_splitAttr($(e.target).parents('dl').attr('m3'));\r
 211                                 if (attrs['useconfig'] == '0'){\r
 212                                         $('#m3_wconfig', menu).remove();\r
 213                                 }\r
 214                                 return menu;\r
 215                         }\r
 216                 });\r
 217         };\r
 218         \r
 219 /*      var changeSortable = function(e, ui){\r
 220                 if (ui.sender){\r
 221                         var w = ui.item.width();\r
 222                         ui.placeholder.width(w);\r
 223                         ui.helper.css("width", w);\r
 224                 }\r
 225         };*/\r
 226         \r
 227         var updateSortable = function(e, ui){\r
 228                 var obj = $('#' + ui.item[0].id);\r
 229                 var recvPosObj = obj.parents('.m3_widgetpos_box');      // 移動先ポジション\r
 230                 var pos = '';\r
 231                 if (recvPosObj.attr('id') == $(this).attr('id')){\r
 232                         if (ui.sender){\r
 233                                 var senderObj = $('#' + ui.sender[0].id);\r
 234                                 var attrs = m3_splitAttr(senderObj.attr('m3'));\r
 235                                 pos = attrs['pos'];\r
 236                         }\r
 237                         m3TaskWidget('move', obj, '', -1, pos);\r
 238                 }\r
 239         };\r
 240         \r
 241 /*      var dragChange = function(e, ui){\r
 242                 if (ui.sender){\r
 243                         var w = ui.item.width();\r
 244                         ui.placeholder.width(w);\r
 245                         ui.helper.css("width",ui.item.children().width());\r
 246                 }\r
 247                 $('dl.m3_widget_sortable').css("margin-top", '100px');\r
 248         };*/\r
 249         var updateWidgetList = function(){\r
 250                 $('dl.m3_widgetlist_item').draggable({\r
 251                         helper: 'clone',\r
 252                         cursor: 'move',\r
 253 /*                      cursorAt: { top: 0, left: 0 },  // selection bug? */\r
 254                         opacity: 0.5,\r
 255                         appendTo: 'body',\r
 256                         drag: function(e, ui){\r
 257                                 var objects = $('.m3_widgetpos_box');\r
 258                                 if (objects.length > 0){\r
 259                                         for (var i = 0; i < objects.length; i++){\r
 260                                                 var widget = $(objects[i]);\r
 261                                                 if (mouseInDrag(widget, e)) return;\r
 262                                         }\r
 263                                 }\r
 264                         },\r
 265                         start: function(e, ui){\r
 266                                 $('#m3_widgetlist_inner').data('scroll', $('#m3_widgetlist_inner').scrollTop());\r
 267                                 $('#m3_widget_window').hide(1000);\r
 268                         },\r
 269                         stop: function(e, ui){\r
 270                                 //m3TaskWidget('add', $('.m3_spacer'), e.target.id, m3InsertIndex);// NG in IE\r
 271                                 m3TaskWidget('add', $('.m3_spacer'), this.id, m3InsertIndex);\r
 272                                 //$('.m3_spacer').remove();\r
 273                                 \r
 274                                 $('#m3_widget_window').show(500, function(){\r
 275                                         $('#m3_widgetlist_inner').scrollTop($('#m3_widgetlist_inner').data('scroll'));\r
 276                                 });\r
 277                         }\r
 278                 });\r
 279         }\r
 280         // ウィジェットリストからのドラッグ処理\r
 281         var mouseInDrag = function(obj, e){\r
 282                 var width = obj.width();\r
 283                 var height = obj.height();\r
 284                 var left = obj.offset().left;\r
 285                 var top = obj.offset().top;\r
 286 \r
 287                 if (left <= e.pageX && e.pageX <= left + width &&\r
 288                         top <= e.pageY && e.pageY <= top + height){\r
 289 \r
 290                         // ドロップする位置\r
 291                         var children = obj.children('.m3_widget_sortable');\r
 292                         var spacePos = -1;\r
 293                         for (var i = 0; i < children.length; i++){\r
 294                                 var child = $(children[i]);\r
 295                                 if (child.hasClass('m3_spacer')){\r
 296                                         spacePos = i;\r
 297                                         break;\r
 298                                 }\r
 299                         }\r
 300                         \r
 301                         var insertPos = -1;\r
 302                         var i = 0;\r
 303                         var play = 0;\r
 304                         for (i = 0; i < children.length; i++){\r
 305                                 var child = $(children[i]);\r
 306                                 var childLeft = child.offset().left;\r
 307                                 var childTop = child.offset().top;\r
 308                                 var childWidth = child.width();\r
 309                                 var childHeight = child.height();\r
 310 \r
 311                                 play = 0;\r
 312                                 if (spacePos != -1){\r
 313                                         if (i == spacePos - 1){\r
 314                                                 play = -10;\r
 315                                         } else if (i == spacePos + 1){\r
 316                                                 play = 10;\r
 317                                         } else if (i == spacePos){\r
 318                                                 if (childLeft <= e.pageX && e.pageX <= childLeft + childWidth &&\r
 319                                                         childTop <= e.pageY && e.pageY <= childTop + childHeight){\r
 320                                                         break;\r
 321                                                 }\r
 322                                         }\r
 323                                 }\r
 324                                 if (e.pageY < child.offset().top + childHeight / 2 + play){\r
 325                                         break;\r
 326                                 }\r
 327                         }\r
 328                         var spacing = true;\r
 329                         if (spacePos == -1){\r
 330                                 insertPos = i;\r
 331                         } else {\r
 332                                 if (insertPos < spacePos){\r
 333                                         insertPos = i;\r
 334                                 } else {\r
 335                                         if (insertPos == spacePos || insertPos == spacePos +1){\r
 336                                                 spacing = false;\r
 337                                         } else {\r
 338                                                 insertPos = i -1;\r
 339                                         }\r
 340                                 }\r
 341                         }\r
 342                         if (spacing){\r
 343                                 $('.m3_spacer').remove();\r
 344                                 \r
 345                                 children = obj.children('.m3_widget_sortable');\r
 346                                 \r
 347                                 var spacerHtml = '<div class="m3_spacer"></div>';\r
 348                                 if (insertPos < children.length){\r
 349                                         $(children[insertPos]).before(spacerHtml);\r
 350                                 } else {\r
 351                                         obj.append(spacerHtml);\r
 352                                 }\r
 353                                 m3InsertIndex = insertPos;\r
 354                         }\r
 355                         return true;\r
 356                 } else {\r
 357                         return false;\r
 358                 }\r
 359         };\r
 360         var createUrl = function(){\r
 361                 var url;\r
 362                 var urlParams = m3_getUrlParam(document.URL);\r
 363                 var page = urlParams['_page'];\r
 364                 var sub = urlParams['_sub'];\r
 365                 url = M3_DEFAULT_ADMIN_URL + '?cmd=getwidgetinfo' + '&_page=' + page + '&_sub=' + sub;\r
 366                 return url;\r
 367         };\r
 368         $(document).ready(function(){\r
 369                 var widgetWindow = '<div id="m3_widget_window">';\r
 370                 widgetWindow += '<table border="1px" width="250" bgcolor="#424242" cellspacing="0">';\r
 371                 widgetWindow += '<tr>';\r
 372                 widgetWindow += '<td width="100%">';\r
 373                 widgetWindow += '<table border="0" width="100%" cellspacing="0" cellpadding="0">';\r
 374                 widgetWindow += '<tr>';\r
 375                 widgetWindow += '<td width="100%">';\r
 376                 widgetWindow += '<font color="#FFFFFF">ウィジェット</font>';\r
 377                 widgetWindow += '</td>';\r
 378                 widgetWindow += '</tr>';\r
 379                 widgetWindow += '<tr>';\r
 380                 widgetWindow += '<td width="100%" bgcolor="#FFFFFF" style="padding:4px">';\r
 381                 widgetWindow += '<div id="m3_widget_window_inner">';\r
 382                 widgetWindow += '<div id="m3_message"></div>';\r
 383                 widgetWindow += '<div id="m3_widgetlist" class="m3_widget_tab">';\r
 384                 //widgetWindow += '<h2>ウィジェット</h2>';\r
 385                 widgetWindow += '<div id="m3_widgetlist_inner" class="m3_widgetlist_box">';\r
 386                 widgetWindow += '</div>';       // widgetlist_box end\r
 387                 widgetWindow += '</div>';       // widgetlist end\r
 388                 widgetWindow += '</div>';       // m3_widget_window_inner end\r
 389                 widgetWindow += '</td>';\r
 390                 widgetWindow += '</tr>';\r
 391                 widgetWindow += '</table>';\r
 392                 widgetWindow += '</td>';\r
 393                 widgetWindow += '</tr>';\r
 394                 widgetWindow += '</table>';\r
 395                 widgetWindow += '</div>';\r
 396                 // コンテキストメニュー\r
 397                 widgetWindow += '<div class="m3_contextmenu" id="m3_widgetmenu" style="visibility:hidden;">';\r
 398                 widgetWindow += '<ul>';\r
 399                 widgetWindow += '<li id="m3_wadjust"><img src="' + M3_ROOT_URL + '/images/system/adjust_widget.png" />&nbsp;<span>タイトル・位置調整</span></li>';\r
 400                 widgetWindow += '<li id="m3_wconfig"><img src="' + M3_ROOT_URL + '/images/system/config.png" />&nbsp;<span>ウィジェットの設定</span></li>';\r
 401                 widgetWindow += '<li id="m3_wshared"><img src="' + M3_ROOT_URL + '/images/system/shared.png" />&nbsp;<span>ページ共通属性</span></li>';\r
 402                 widgetWindow += '<li id="m3_wdelete"><img src="' + M3_ROOT_URL + '/images/system/delete.png" />&nbsp;<span>このウィジェットを削除</span></li>';\r
 403                 widgetWindow += '</ul>';\r
 404                 widgetWindow += '</div>';\r
 405                 $("body").append(widgetWindow);\r
 406                 \r
 407                 $('#m3_widget_window').draggable({\r
 408                         cursor: 'move',\r
 409                         cancel: '#m3_widget_window_inner'\r
 410                 });\r
 411         \r
 412                 setupSortable();\r
 413                 \r
 414                 $.ajax({        url: createUrl() + '&task=list',\r
 415                                         type:           'get',\r
 416                                         success:        function(data, textStatus){\r
 417                                                                         $("#m3_widgetlist_inner").html(data);\r
 418                                                                         updateWidgetList();\r
 419                                                                 },\r
 420                                         error:          function(request, textStatus, errorThrown){\r
 421                                                                         $("#m3_message").html('<font color="red">通信エラー</font>');\r
 422                                                                 }\r
 423                 });\r
 424                 $('div.m3_widgetpos_box').droppable({\r
 425                         accept: 'dl.m3_widgetlist_item',\r
 426                         out: function(e, ui){\r
 427                                 $('.m3_spacer').remove();\r
 428                         }\r
 429                 });\r
 430                 \r
 431                 // テキスト選択停止(Safari,Chromeのウィジェットドラッグ中のテキスト選択の問題を回避)\r
 432                 document.onselectstart = function(){ return false; }\r
 433         });// ready end\r
 434 })(jQuery);\r