tree javascript change : 메뉴, 게시판분류, 홈페이지

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@5055 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/menu/tpl/index.html

@@ -1,5 +1,6 @@
 <!--%import("filter/delete_menu.xml")-->
 <!--%import("js/menu_admin.js")-->
+
 <!--#include("header.html")-->
 
 <!-- 정보 -->
@@ -26,7 +27,7 @@
     <!--@foreach($menu_list as $no => $val)-->
     <tr class="row{$cycle_idx}">
         <td class="number center">{$no}</td>
-        <td><a href="{getUrl('act','dispMenuAdminManagement','menu_srl',$val->menu_srl)}" onclick="winopen(this.href,'MenuManage','width=850,height=800,resizable=yes,scrollbars=yes,toolbars=no');return false;">{htmlspecialchars($val->title)}</a></td>
+        <td><a href="{getUrl('act','dispMenuAdminManagement','menu_srl',$val->menu_srl)}">{htmlspecialchars($val->title)}</a></td>
         <td class="date center nowrap">{zdate($val->regdate,"Y-m-d")}</td>
         <td class="delete center"><a href="#" onclick="doDeleteMenu('{$val->menu_srl}');return false;">{$lang->cmd_delete}</a></td>
     </tr>

modules/menu/tpl/js/menu_admin.js

@@ -1,12 +1,4 @@
-/* 메뉴 입력후 */ 
-function completeInsertMenu(ret_obj) {
-    var menu_srl = ret_obj['menu_srl'];
-    alert(ret_obj['message']);
-    location.href = current_url.setQuery('act','dispMenuAdminContent');
 
-    //var url = current_url.setQuery('act','dispMenuAdminManagement').setQuery('menu_srl',menu_srl);
-    //window.open(url);
-} 
 
 /* 메뉴 삭제 */
 function doDeleteMenu(menu_srl) {
@@ -69,9 +61,7 @@ function checkMousePosition(e) {
 */
 
 function hideCategoryInfo() {
-    var obj = xGetElementById('menu_zone_info');
-    xInnerHtml(obj,'');
-    obj.style.display = "none";
+	jQuery("#menu_zone_info").html("");
 }
 
 function completeGetMenuItemTplInfo(ret_obj, response_tags) {
@@ -104,29 +94,6 @@ function completeGetMenuItemTplInfo(ret_obj, response_tags) {
     */
 }
 
-/* 메뉴 아이템 입력후 */ 
-function completeInsertMenuItem(ret_obj) {
-    var menu_id = ret_obj['menu_id'];
-    var xml_file = ret_obj['xml_file'];
-    var menu_title = ret_obj['menu_title'];
-    var menu_srl = ret_obj['menu_srl'];
-    var menu_item_srl = ret_obj['menu_item_srl'];
-    var parent_srl = ret_obj['parent_srl'];
-
-    if(!xml_file) return;
-
-    loadTreeMenu(xml_file, 'menu', 'menu_zone_menu', menu_title, '', doGetMenuItemInfo, menu_item_srl, doMoveTree);
-
-    if(!menu_srl) xInnerHtml("menu_zone_info", "");
-    else {
-        var params = {node_srl:menu_item_srl, parent_srl:parent_srl}
-        doGetMenuItemInfo('menu', params)
-    }
-
-    if(typeof('fixAdminLayoutFooter')=="function") fixAdminLayoutFooter();
-} 
-
-
 /* 메뉴를 드래그하여 이동한 후 실행할 함수 , 이동하는 item_srl과 대상 item_srl을 받음 */
 function doMoveTree(menu_id, source_item, target_item) {
     var fo_obj = xGetElementById("fo_move_menu");

modules/menu/tpl/js/menu_tree.js

@@ -0,0 +1,155 @@
+function Tree(url){
+    // clear tree;
+    jQuery('#menu > ul > li > ul').remove();
+
+    if(jQuery("ul.simpleTree > li > a").size() ==0)jQuery('<a href="#" class="add"><img src="./common/tpl/images/tree/iconAdd.gif" /></a>').bind("click",function(e){addNode(0,e);}).appendTo("ul.simpleTree > li");
+
+    //ajax get data and transeform ul il
+    jQuery.get(url,function(data){
+        jQuery(data).find("node").each(function(i){
+            var text = jQuery(this).attr("text");
+            var node_srl = jQuery(this).attr("node_srl");
+            var parent_srl = jQuery(this).attr("parent_srl");
+            var url = jQuery(this).attr("url");
+
+            // node
+            var node = jQuery('<li id="tree_'+node_srl+'"><span>'+text+'</span></li>');
+
+            // button
+            jQuery('<a href="#" class="add"><img src="./common/tpl/images/tree/iconAdd.gif" /></a>').bind("click",function(e){addNode(node_srl,e);}).appendTo(node);
+
+            jQuery('<a href="#" class="modify"><img src="./common/tpl/images/tree/iconModify.gif" /></a>').bind("click",function(e){
+                modifyNode(node_srl,e);
+            }).appendTo(node);
+
+            jQuery('<a href="#" class="delete"><img src="./common/tpl/images/tree/iconDel.gif" /></a>').bind("click",function(e){
+                deleteNode(node_srl);
+            }).appendTo(node);
+
+            // insert parent child
+            if(parent_srl>0){
+                if(jQuery('#tree_'+parent_srl+'>ul').length==0) jQuery('#tree_'+parent_srl).append(jQuery('<ul>'));
+                jQuery('#tree_'+parent_srl+'> ul').append(node);
+            }else{
+                if(jQuery('#menu ul.simpleTree > li > ul').length==0) jQuery("<ul>").appendTo('#menu ul.simpleTree > li');
+                jQuery('#menu ul.simpleTree > li > ul').append(node);
+            }
+
+        });
+
+        //button show hide
+        jQuery("#menu li").each(function(){
+            if(jQuery(this).parents('ul').size() > max_menu_depth) jQuery("a.add",this).hide();
+            if(jQuery(">ul",this).size()>0) jQuery(">a.delete",this).hide();
+        });
+
+
+        // draw tree
+        simpleTreeCollection = jQuery('.simpleTree').simpleTree({
+            autoclose: false,
+            afterClick:function(node){
+                //alert("text-"+jQuery('span:first',node).text());
+            },
+            afterDblClick:function(node){
+                //alert("text-"+jQuery('span:first',node).text());
+            },
+            afterMove:function(destination, source, pos){
+
+                jQuery("#menu_zone_info").html("");
+                var menu_srl = jQuery("#fo_menu input[name=menu_srl]").val();
+                var parent_srl = destination.attr('id').replace(/.*_/g,'');
+                var target_srl = source.attr('id').replace(/.*_/g,'');
+                var brothers = jQuery('#'+destination.attr('id')+' > ul > li:not([class^=line])').length;
+                var mode = brothers >1 ? 'move':'insert';
+                var source_srl = pos == 0 ? 0: source.prevAll("li:not(.line)").get(0).id.replace(/.*_/g,'');
+
+                jQuery.exec_json("menu.procMenuAdminMoveItem",{"menu_srl":menu_srl,"parent_srl":parent_srl,"target_srl":target_srl,"source_srl":source_srl,"mode":mode},
+                function(data){
+                    if(data.error>0) Tree(xml_url);
+                });
+
+            },
+
+            // i want you !! made by sol
+            beforeMovedToLine : function(destination, source, pos){
+//                if(typeof(destination.id) == 'undefined') return false;
+                return (jQuery(destination).parents('ul').size() + jQuery('ul',source).size() <= max_menu_depth);
+            },
+
+            // i want you !! made by sol
+            beforeMovedToFolder : function(destination, source, pos){
+//                if(typeof(destination.id) == 'undefined') return false;
+                return (jQuery(destination).parents('ul').size() + jQuery('ul',source).size() <= max_menu_depth-1);
+            },
+            afterAjax:function()
+            {
+                //alert('Loaded');
+            },
+            animate:true
+            ,docToFolderConvert:true
+        });
+
+
+        // image url replace
+//        jQuery("#menu ul.simpleTree img").attr("src",function(){ return jQuery(this).attr("src").replace("images/","./common/tpl/images/tree/");});
+
+
+
+
+        // open all node
+        nodeToggleAll();
+    },"xml");
+}
+
+function nodeToggleAll(){
+    jQuery("[class*=close]", simpleTreeCollection[0]).each(function(){
+        simpleTreeCollection[0].nodeToggle(this);
+    });
+}
+
+
+
+function modifyNode(node_srl,e){
+    jQuery('#menu_zone_info').html('');
+    var params ={
+            "parent_srl":0
+            ,"menu_item_srl":node_srl
+            };
+
+    jQuery.exec_json('menu.getMenuAdminTplInfo', params, function(data){
+        jQuery('#menu_zone_info').html(data.tpl);
+    });
+}
+
+function addNode(node_srl,e){
+    jQuery('#menu_zone_info').html('');
+    var params ={
+            "menu_item_srl":0
+            ,"parent_srl":node_srl
+            };
+
+    jQuery.exec_json('menu.getMenuAdminTplInfo', params, function(data){
+        jQuery('#menu_zone_info').html(data.tpl);
+    });
+}
+
+
+function deleteNode(node_srl){
+
+    if(confirm(lang_confirm_delete)){
+        jQuery('#menu_zone_info').html('');
+        var params ={
+                "menu_item_srl":node_srl
+                ,"menu_srl":jQuery("form input[name=menu_srl]").val()
+                };
+        jQuery.exec_json('menu.procMenuAdminDeleteItem', params, function(data){
+            Tree(xml_url);
+        });
+    }
+}
+
+
+function completeInsertMenuItem(ret_obj) {
+    jQuery('#menu_zone_info').html('');
+    Tree(xml_url);
+}

modules/menu/tpl/menu_item_info.html

@@ -25,7 +25,7 @@
     <th scope="row" colspan="2"><div>{$lang->menu_url}</div></th>
     <td>
         <input type="text" name="menu_url" value="{htmlspecialchars($item_info->url)}" class="inputTypeText" />
-        <a href="{getUrl('module','menu','act','dispMenuAdminMidList')}" onclick="popopen(this.href);return false;" class="button"/><span>{$lang->cmd_search_mid}</span></a>
+        <a href="{getUrl('module','menu','act','dispMenuAdminMidList')}" onclick="popopen(this.href);return false;" class="button"><span>{$lang->cmd_search_mid}</span> </a>
         <p class="clear">{$lang->about_menu_url}</p>
     </td>
 </tr>
@@ -36,13 +36,7 @@
         <p>{$lang->about_menu_open_window}</p>
     </td>
 </tr>
-<tr>
-    <th scope="row" colspan="2"><div>{$lang->menu_expand}</div></th>
-    <td>
-        <input type="checkbox" name="menu_expand" value="Y" <!--@if($item_info->expand=="Y")-->checked="checked"<!--@end--> />
-        <p>{$lang->about_menu_expand}</p>
-    </td>
-</tr>
+
 <tr>
     <th scope="row" colspan="2"><div>{$lang->menu_img_btn}</div></th>
     <td><p>{$lang->about_menu_img_btn}</p></td>
@@ -89,14 +83,8 @@
 </tr>
 <tr>
     <th scope="row" colspan="3" class="button"><div>
-        <!--@if($item_info->name)-->
-        <a href="#" onclick="doDeleteMenuItem('{$menu_item_srl}');return false" class="button"><span>{$lang->cmd_delete}</span></a>
-        <!--@end-->
         <a href="#" onclick="hideCategoryInfo();return false" class="button"><span>{$lang->cmd_close}</span></a>
         <span class="button"><input type="submit" value="{$lang->cmd_save}" /></span>
-        <!--@if($item_info->name)-->
-        <a href="#" onclick="doInsertMenuItem('{$item_info->menu_item_srl}');return false" class="button"><span>{$lang->cmd_make_child}</span></a>
-        <!--@end-->
     </div></th>
 </tr>
 </table>

modules/menu/tpl/menu_management.html

@@ -2,7 +2,10 @@
 <!--%import("filter/insert_menu_item.xml")-->
 <!--%import("filter/delete_menu_item.xml")-->
 <!--%import("filter/move_menu_item.xml")-->
-<!--%import("css/menu.css")-->
+
+<!--%import("../../common/js/jquery.simple.tree.js",optimized=false)-->
+<!--%import("../../common/css/jquery.simple.tree.css",optimized=false)-->
+<!--%import("js/menu_tree.js")-->
 <!--%import("js/menu_admin.js")-->
 
 <script type="text/javascript">
@@ -11,13 +14,6 @@
 
 <div class="menuManagement">
 
-    <!-- 메뉴 이동을 위해 임시로 사용하는 form -->
-    <form id="fo_move_menu" action="./" method="get">
-        <input type="hidden" name="menu_id" />
-        <input type="hidden" name="source_item" />
-        <input type="hidden" name="target_item" />
-    </form>
-
     <!--@if($module == 'admin')-->
         <form action="./" method="get" onsubmit="return procFilter(this, update_menu_title)">
         <input type="hidden" name="menu_srl" value="{$menu_info->menu_srl}" />
@@ -31,13 +27,14 @@
                     </div>
                     <div class="fr">
                         <span class="button"><input type="submit" value="{$lang->cmd_modify}" /></span>
-                        <a href="#" onclick="window.close();return false;" class="button"><span>{$lang->cmd_close}</span></a>
                     </div>
                 </td>
             </tr>
             <tr>
                 <th scope="col"><div>{$lang->menu_management}</div></th>
-                <td class="left">{nl2br($lang->about_menu_management)}</td>
+                <td class="left">{nl2br($lang->about_menu_management)}
+<span style="float:right"><a href="#" onclick="doReloadTreeMenu('{$menu_info->menu_srl}');return false;" class="button"><span>{$lang->cmd_remake_cache}</span></a></span>
+                </td>
             </tr>
             </table>
         </form>
@@ -57,14 +54,6 @@
         </table>
     <!--@end-->
 
-    <div class="gap1">
-        <a href="#" onclick="doInsertMenuItem(0);return false;" class="button"><span>{$lang->cmd_insert}</span></a>
-        <a href="#" onclick="doReloadTreeMenu('{$menu_info->menu_srl}');return false;" class="button"><span>{$lang->cmd_remake_cache}</span></a>
-        <a href="#" onclick="openAllTreeMenu('menu');return false;" class="button"><span>{$lang->cmd_open_all}</span></a>
-        <a href="#" onclick="closeAllTreeMenu('menu');return false;" class="button"><span>{$lang->cmd_close_all}</span></a>
-    </div>
-
-    <p class="gap1"><input type="checkbox" id="menu_enable_move" class="checkbox" /> <label for="menu_enable_move">{$lang->cmd_enable_move_menu}</label></p>
 
     <div class="gap1">
         <form id="fo_menu" action="./" method="post" onsubmit="return procFilter(this, insert_menu_item)" class="clear" target="tmp_upload_iframe" enctype="multipart/form-data">
@@ -76,19 +65,23 @@
         <input type="hidden" name="act" value="" />
         <input type="hidden" name="target" value="" />
 
-            <div id="category_list">
-                <div id="menu_zone_menu"></div>
-            </div>
-            <div id="menu_zone_info"></div>
-
-
-        </form>
-
-        <script type="text/javascript">
-            loadTreeMenu("{$menu_info->xml_file}", "menu", "menu_zone_menu", "{$menu_info->title}", '', doGetMenuItemInfo, 0, doMoveTree); 
-        </script>
+    <div id="menu">
+        <ul class="simpleTree">
+            <li class="root" id='tree_0'><span>{$lang->menu}</span></li>
+        </ul>
+    </div>
+<div id="menu_zone_info" style="position:absolute;top:200px; width:70%; right:20px"></div>
+        </form>
     </div>
-
 </div>
 
 <iframe id='tmp_upload_iframe' name='tmp_upload_iframe' style='display:none;width:1px;height:1px;position:absolute;top:-10px;left:-10px'></iframe>
+
+
+<script type="text/javascript">
+var simpleTreeCollection;
+var max_menu_depth = 999;
+var xml_url = "{$menu_info->xml_file}";
+var lang_confirm_delete = "{$lang->confirm_delete}";
+Tree(xml_url);
+</script>