From 08580328f123b25af9c096fe426cad9821bb29a0 Mon Sep 17 00:00:00 2001
From: zero <skklove@gmail.com>
Date: Mon, 16 Apr 2007 06:32:08 +0000
Subject: [PATCH] git-svn-id: http://xe-core.googlecode.com/svn/trunk@1158
 201d5d3c-b55e-5fd7-737f-ddc643e51545

---
 layouts/sample_layout/css/layout.css          | 171 ++++++++++++++++++
 layouts/sample_layout/js/layout.js            | 112 ++++++------
 layouts/sample_layout/layout.html             | 145 +++++++--------
 .../login_info/skins/default/normal/style.css |   1 -
 4 files changed, 293 insertions(+), 136 deletions(-)
 create mode 100644 layouts/sample_layout/css/layout.css

diff --git a/layouts/sample_layout/css/layout.css b/layouts/sample_layout/css/layout.css
new file mode 100644
index 000000000..59674f862
--- /dev/null
+++ b/layouts/sample_layout/css/layout.css
@@ -0,0 +1,171 @@
+@charset "utf-8";
+
+/**
+ * 레이아웃 style 
+ **/
+
+/**
+ * 상단 로고 및 메인 1차 메뉴 
+ **/
+.layout_top {
+    border-bottom:3px solid #EEEEEE;
+    height:50px;
+}
+
+/* 상단 로고 부분 */
+.layout_logo {
+    float:left;
+}
+
+/* 상단 1차 메뉴 */
+.layout_first_menu {
+    float:right;
+    margin-top:30px;
+}
+
+/**
+ * 중간 영역 (왼쪽 메뉴 + 컨텐츠)
+ **/
+.layout_middle {
+    margin:10px 0px 10px 0px;
+    clear:both;
+}
+
+/**
+ * 좌측 메뉴 및 메인 2차 메뉴, 로그인 플러그인 및 기타
+ **/
+.layout_left {
+    width:220px;
+    margin-right:10px;
+    float:left;
+}
+
+/* 좌측 2차 메뉴 */
+.layout_second_menu {
+    border:1px solid #EEEEEE;
+    padding:5px;
+}
+
+/* 좌측 관리자 메뉴 */
+.layout_admin {
+    margin-top:10px;
+    border:3px solid #EEEEEE;
+    padding:5px;
+    text-align:center;
+}
+
+/* 컨텐츠 */
+.layout_content {
+    position:absolute;
+    left:0px;
+    right:0px;
+    padding:0px 10px 0px 240px;
+}
+
+/**
+ * 하단 메뉴 영역 
+ **/
+.layout_bottom {
+    clear:both;
+}
+
+/* 하단 메뉴 */
+.layout_bottom_menu {
+    width:100%;
+    text-align:center;
+}
+
+/**
+ * 메뉴 style, main_menu:1~3차, bottom_menu로 구성 
+ **/
+
+/* 1차 메뉴 */
+.first_menu {
+    margin-right:5px;
+    font-weight:normal;
+}
+
+.first_menu A {
+    color:#000000;
+    text-decoration:none;
+}
+
+.first_menu_selected {
+    margin-right:5px;
+    font-weight:bold;
+}
+
+.first_menu_selected A {
+    color:#000000;
+    font-weight:bold;
+    text-decoration:none;
+}
+
+/* 2차 메뉴 */
+.second_menu {
+    margin-right:5px;
+    font-weight:normal;
+    display:block;
+}
+
+.second_menu A {
+    color:#000000;
+    text-decoration:none;
+}
+
+.second_menu_selected {
+    margin-right:5px;
+    font-weight:bold;
+    display:block;
+}
+
+.second_menu_selected A {
+    color:#000000;
+    font-weight:bold;
+    text-decoration:none;
+}
+
+/* 3차 메뉴 */
+.third_menu {
+    margin-left:10px;
+    display:block;
+}
+
+.third_menu A {
+    color:#000000;
+    text-decoration:none;
+}
+
+.third_menu_selected {
+    margin-left:10px;
+    font-weight:bold;
+    display:block;
+}
+
+.third_menu_selected A {
+    color:#000000;
+    font-weight:bold;
+    text-decoration:none;
+}
+
+/* 하단 메뉴 */
+.bottom_menu {
+    margin-right:5px;
+    font-weight:normal;
+}
+
+.bottom_menu A {
+    color:#000000;
+    text-decoration:none;
+}
+
+.bottom_menu_selected {
+    margin-right:5px;
+    font-weight:bold;
+}
+
+.bottom_menu_selected A {
+    color:#000000;
+    font-weight:bold;
+    text-decoration:none;
+}
diff --git a/layouts/sample_layout/js/layout.js b/layouts/sample_layout/js/layout.js
index 444bba2e4..18f902f1e 100644
--- a/layouts/sample_layout/js/layout.js
+++ b/layouts/sample_layout/js/layout.js
@@ -3,72 +3,68 @@
  * @author zero (zero@nzeo.com)
  **/
 
-// 메뉴를 담을 javascript 변수
+/**
+ * 메뉴를 담을 javascript 변수
+ *
+ * xe_layout_menu 구조
+ *
+ * xe_layout_menu[메뉴명][depth][menu_srl] = Object
+ *
+ * Object {
+ *   text : 메뉴 명
+ *   href : 연결할 주소
+ *   open_window : [Y|N] 새창으로 띄울 것인지에 대한 값
+ *   normal_btn : 이미지 버튼
+ *   hover_btn : 이미지 버튼일 경우 mouseover 일 경우
+ *   active_btn : 선택되어 있을 경우의 이미지
+ *   className : normal 상태의 className
+ *   selectedClassName : 선택된 상태의 className
+ *   selected : 선택된 메뉴라면 true, 아니면 false
+ * }
+ **/
 var xe_layout_menu = new Array();
 
 /**
  * @brief sample_layout에서 메뉴를 출력하는 함수
  * menu_name : 레이아웃 설정상의 메뉴 이름
- * depth : 단계 
- * text : 메뉴 명
- * href : 연결할 주소
- * open_window : [Y|N] 새창으로 띄울 것인지에 대한 값
- * normal_btn : 이미지 버튼
- * hover_btn : 이미지 버튼일 경우 mouseover 일 경우
- * active_btn : 선택되어 있을 경우의 이미지
- * modifier : 구분자 ( <br /> 또는 null 이 사용 예상)
- * selected_class : 이미지 버튼이 아닐 경우 선택된 문자열에 대한 css class (지정 안되어 있으면 <span style="font-weight:bold">..</span>로 처리
- * selected : 선택된 메뉴라면 true, 아니면 false
- **/
-function xe_add_menu(menu_name, depth, text, href, open_window, normal_btn, hover_btn, active_btn, modifier, selected_class, selected) {
-    // 텍스트나 이미지 버튼이 없으면 패스~
-    if(!text && !normal_btn) return;
-
-    var html = "";
-
-    // 텍스트일 경우
-    if(!normal_btn) {
-        // 선택되었을 때의 class or style 지정 
-        if(selected) {
-            if(!selected_class) selected_class = "style=\"font-weight:bold\"";
-            else selected_class = "class=\""+selected_class+"\"";
-        } else {
-            selected_class = "";
-        }
-
-        if(open_window == "Y") html = "<span "+selected_class+"><a href=\"#\" onclick=\"winopen('"+href+"'); return false;\">"+text+"</a></span>";
-        else html = "<span "+selected_class+"><a href=\""+href+"\">"+text+"</a></span>";
-
-    // 이미지 버튼 일 경우
-    } else if(normal_btn) {
-        if(!hover_btn) hover_btn = normal_btn;
-        if(!active_btn) active_btn = normal_btn;
-        if(selected) normal_btn = active_btn;
-
-        if(open_window == "Y") html = "<a href=\"#\" onclick=\"winopen('"+href+"'); return false;\"><img src=\""+normal_btn+"\" border=\"0\" alt=\""+text+"\" onmouseover=\"this.src='"+hover_btn+"'\" onmouseout=\"this.src='"+normal_btn+"'\" /></a>";
-        else html = "<a href=\""+href+"\"><img src=\""+normal_btn+"\" border=\"0\" alt=\""+text+"\" onmouseover=\"this.src='"+hover_btn+"'\" onmouseout=\"this.src='"+normal_btn+"'\" /></a>";
-
-
-    }
-
-    // modifier 출력
-    if(modifier) html += modifier;
-
-    if(!xe_layout_menu[menu_name]) xe_layout_menu[menu_name] = new Array();
-    if(!xe_layout_menu[menu_name][depth]) xe_layout_menu[menu_name][depth] = new Array();
-    xe_layout_menu[menu_name][depth][xe_layout_menu[menu_name][depth].length] = html;
-}
-
-/**
- * @brief xe_layout_menu에 있는 메뉴를 출력
- * menu_name : 레이아웃 설정상의 메뉴 이름
  * depth : 입력된 단계
  * print_child : true로 하면 메뉴 출력중 하위 메뉴가 있을 시 출력
  **/
 function xe_print_menu(menu_name, depth, print_child) {
-    if(!xe_layout_menu[menu_name] || !xe_layout_menu[menu_name][depth]) return;
-    for(var i=0;i<xe_layout_menu[menu_name][depth].length;i++) {
-        document.write(xe_layout_menu[menu_name][depth][i]);
-        if(typeof(print_child)!='undefined' && print_child==true) xe_print_menu(menu_name, depth+1, print_child);
+    if(typeof(xe_layout_menu[menu_name])=='undefined' || typeof(xe_layout_menu[menu_name][depth])=='undefined') return;
+    if(typeof(print_child)=='undefined') print_child = false;
+
+    var menu_list = xe_layout_menu[menu_name][depth];
+    var html = "";
+
+    for(var menu_key in menu_list) {
+        var menu_obj = menu_list[menu_key];
+        if(typeof(menu_obj)=='undefined'||!menu_obj) continue;
+
+        var className = menu_obj.className;
+        if(menu_obj.selected) className = menu_obj.selectedClassName;
+
+        if(!menu_obj.href) menu_obj.href = "#";
+
+        // 텍스트일 경우
+        if(!menu_obj.normal_btn) {
+            
+            if(menu_obj.open_window == "Y") html = "<span class=\""+className+"\"><a href=\"#\" onclick=\"winopen('"+menu_obj.href+"'); return false;\">"+menu_obj.text+"</a></span>";
+            else html = "<span class=\""+className+"\"><a href=\""+menu_obj.href+"\">"+menu_obj.text+"</a></span>";
+
+        // 이미지 버튼 일 경우
+        } else if(menu_obj.normal_btn) {
+            if(!menu_obj.hover_btn) menu_obj.hover_btn = menu_obj.normal_btn;
+            if(!menu_obj.active_btn) menu_obj.active_btn = menu_obj.normal_btn;
+
+            if(menu_obj.selected) menu_obj.normal_btn = menu_obj.active_btn;
+
+            if(menu_obj.open_window == "Y") html = "<span class=\""+className+"\"><a href=\"#\" onclick=\"winopen('"+menu_obj.href+"'); return false;\"><img src=\""+menu_obj.normal_btn+"\" border=\"0\" alt=\""+menu_obj.text+"\" onmouseover=\"this.src='"+menu_obj.hover_btn+"'\" onmouseout=\"this.src='"+menu_obj.normal_btn+"'\" /></a></span>";
+            else html = "<span class=\""+className+"\"><a href=\""+menu_obj.href+"\"><img src=\""+menu_obj.normal_btn+"\" border=\"0\" alt=\""+menu_obj.text+"\" onmouseover=\"this.src='"+menu_obj.hover_btn+"'\" onmouseout=\"this.src='"+menu_obj.normal_btn+"'\" /></a></span>";
+        }
+
+        if(html) document.write(html);
+
+        if(print_child && menu_obj.selected && typeof(xe_layout_menu[menu_name][depth+1])!='undefined') xe_print_menu('main_menu', depth+1, true);
     }
 }
diff --git a/layouts/sample_layout/layout.html b/layouts/sample_layout/layout.html
index b86f9b54f..d25a3ba32 100644
--- a/layouts/sample_layout/layout.html
+++ b/layouts/sample_layout/layout.html
@@ -1,92 +1,83 @@
 <!-- 메뉴를 출력하기 위한 javascript 소스가 담긴 파일을 import -->
 <!--%import("js/layout.js")-->
 
-<!-- 메뉴를 미리 javscript object에 등록 -->
+<!-- 레이아웃과 연동될 css 파일 import -->
+<!--%import("css/layout.css")-->
+
+<!-- 메뉴를 미리 javscript object에 등록 (이 부분은 그냥 그대로 두면 됨) -->
 <script type="text/javascript">
-
-    <!-- main_menu 메뉴 생성 -->
-    <!--@foreach($main_menu->list as $first_menu)-->
-
-        xe_add_menu('main_menu', 1, "{htmlspecialchars($first_menu['text'])}","{htmlspecialchars($first_menu['href'])}","{$first_menu['open_window']}","{$first_menu['normal_btn']}","{$first_menu['hover_btn']}","{$first_menu['active_btn']}","", "", {$first_menu['selected']?'true':'false'});
-
-        <!-- 선택된 메뉴일 경우 2차 메뉴 생성 -->
-        <!--@if($first_menu['selected'])--><!--@foreach($first_menu['list'] as $second_menu)-->
-
-            xe_add_menu('main_menu', 2, "{htmlspecialchars($second_menu['text'])}","{htmlspecialchars($second_menu['href'])}","{$second_menu['open_window']}","{$second_menu['normal_btn']}","{$second_menu['hover_btn']}","{$second_menu['active_btn']}","<br />", "", {$second_menu['selected']?'true':'false'});
-
-            <!-- 선택된 메뉴일 경우 3차 메뉴 생성 -->
-            <!--@if($second_menu['selected'])--><!--@foreach($second_menu['list'] as $third_menu)-->
-
-                xe_add_menu('main_menu', 3, "{htmlspecialchars($third_menu['text'])}","{htmlspecialchars($third_menu['href'])}","{$third_menu['open_window']}","{$third_menu['normal_btn']}","{$third_menu['hover_btn']}","{$third_menu['active_btn']}","<br />", "", {$third_menu['selected']?'true':'false'});
-
-            <!--@end--><!--@end-->
-
-        <!--@end--><!--@end-->
-    <!--@end-->
-
-    <!-- bottom_menu 메뉴 생성 -->
-    <!--@foreach($bottom_menu->list as $first_menu)-->
-        xe_add_menu('bottom_menu', 1, "{htmlspecialchars($first_menu['text'])}","{htmlspecialchars($first_menu['href'])}","{$first_menu['open_window']}","{$first_menu['normal_btn']}","{$first_menu['hover_btn']}","{$first_menu['active_btn']}","", "", {$first_menu['selected']?'true':'false'});
-    <!--@end-->
-
+xe_layout_menu['main_menu'] = new Array();
+xe_layout_menu['main_menu'][1] = new Array();
+<!--@foreach($main_menu->list as $first_key => $first_menu)-->
+xe_layout_menu['main_menu'][1][{$first_key}] = { "text":"{htmlspecialchars($first_menu['text'])}","href":"{htmlspecialchars($first_menu['href'])}","open_window":"{$first_menu['open_window']}","normal_btn":"{$first_menu['normal_btn']}","hover_btn":"{$first_menu['hover_btn']}","active_btn":"{$first_menu['active_btn']}","className":"first_menu", "selectedClassName":"first_menu_selected", "selected":{$first_menu['selected']?'true':'false'}};
+<!--@if($first_menu['selected'])-->
+xe_layout_menu['main_menu'][2] = new Array();
+<!--@foreach($first_menu['list'] as $second_key => $second_menu)-->
+xe_layout_menu['main_menu'][2][{$second_key}] = { "text":"{htmlspecialchars($second_menu['text'])}","href":"{htmlspecialchars($second_menu['href'])}","open_window":"{$second_menu['open_window']}","normal_btn":"{$second_menu['normal_btn']}","hover_btn":"{$second_menu['hover_btn']}","active_btn":"{$second_menu['active_btn']}","className":"second_menu", "selectedClassName":"second_menu_selected", "selected":{$second_menu['selected']?'true':'false'}};
+<!--@if($second_menu['selected'])-->
+xe_layout_menu['main_menu'][3] = new Array();
+<!--@foreach($second_menu['list'] as $third_key => $third_menu)-->
+xe_layout_menu['main_menu'][3][{$third_key}] = { "text":"{htmlspecialchars($third_menu['text'])}","href":"{htmlspecialchars($third_menu['href'])}","open_window":"{$third_menu['open_window']}","normal_btn":"{$third_menu['normal_btn']}","hover_btn":"{$third_menu['hover_btn']}","active_btn":"{$third_menu['active_btn']}","className":"third_menu", "selectedClassName":"third_menu_selected", "selected":{$third_menu['selected']?'true':'false'}};
+<!--@end-->
+<!--@end-->
+<!--@end-->
+<!--@end-->
+<!--@end-->
+xe_layout_menu['bottom_menu'] = new Array();
+xe_layout_menu['bottom_menu'][1] = new Array();
+<!--@foreach($bottom_menu->list as $first_menu)-->
+xe_layout_menu['bottom_menu'][1][{$first_key}] = { "text":"{htmlspecialchars($first_menu['text'])}","href":"{htmlspecialchars($first_menu['href'])}","open_window":"{$first_menu['open_window']}","normal_btn":"{$first_menu['normal_btn']}","hover_btn":"{$first_menu['hover_btn']}","active_btn":"{$first_menu['active_btn']}","className":"bottom_menu", "selectedClassName":"bottom_menu_selected", "selected":{$first_menu['selected']?'true':'false'}};
+<!--@end-->
 </script>
 
-<div style="height:50px;border:1px solid;margin-bottom:10px;">
-    {$layout_info->top_title}
+<!-- 상단 로고 및 main_menu 1차 출력 -->
+<div class="layout_top">
+    <div class="layout_logo">
+        {$layout_info->top_title}
+    </div>
 
-    <div style="float:right">
-
-        <div>
-            <!-- main_menu 1차 시작 -->
-            <script type="text/javascript">
-                xe_print_menu('main_menu', 1);
-            </script>
-            <!-- main_menu 1차 끝 -->
-        </div>
+    <div class="layout_first_menu">
+        <!-- main_menu 1차 시작 -->
+        <script type="text/javascript">
+            xe_print_menu('main_menu', 1);
+        </script>
+        <!-- main_menu 1차 끝 -->
     </div>
 
 </div>
 
-<div>
-    <table border="0" width="100%" style="table-layout:fixed">
-    <col width="220" />
-    <col width="*" />
-    <tr valign="top">
-        <td>
-            <div>
-                <img src="./common/tpl/images/blank.gif" class="zbxe_plugin_output" plugin="login_info" skin="default" colorset="normal" style="width:100px;height:100px;"/>
-            </div>
+<!-- 중간 영역 -->
+<div class="layout_middle">
 
-            <div>
-                <!-- main_menu 2차 시작 -->
-                <script type="text/javascript">
-                    xe_print_menu('main_menu', 2, true);
-                </script>
-                <!-- main_menu 2차 끝 -->
-            </div>
+    <!-- 왼쪽 2차 메뉴 및 로그인과 기타 플러그인 부분 -->
+    <div class="layout_left">
+        <!-- 로그인 플러그인 -->
+        <img src="./common/tpl/images/blank.gif" class="zbxe_plugin_output" plugin="login_info" skin="default" colorset="normal" style="width:100px;height:100px;"/>
 
-            <!-- 레이아웃 관리 메뉴 -->
-            <!--@if($logged_info->is_admin == 'Y')-->
-            <div>
-                <a href="#" onclick="location.href='{getUrl('act','dispLayoutAdminMenu','layout_srl',$layout_info->layout_srl)}';return false;">{$lang->cmd_layout_management}</a>
-            </div>
-            <!--@end-->
+        <!-- main_menu 2차 시작 -->
+        <div class="layout_second_menu">
+            <script type="text/javascript">
+                xe_print_menu('main_menu', 2, true);
+            </script>
+        </div>
 
-        </td>
-        <td>
-            <div id="content">{$content}</div>
-        </td>
-    </tr>
-    <tr>
-        <td colspan="2" align="center">
-            <div style="margin-top:20px;">
-                <!-- bottom_menu 메뉴 시작 -->
-                    <script type="text/javascript">
-                        xe_print_menu('bottom_menu', 1);
-                    </script>
-                <!-- 메뉴 표시 끝 -->
-            </div>
-        </td>
-    </tr>
-    </table>
+        <!--@if($logged_info->is_admin == 'Y')-->
+        <!-- 관리자일 경우 레이아웃 관리 메뉴 -->
+        <div class="layout_admin">
+            <a href="#" onclick="location.href='{getUrl('act','dispLayoutAdminMenu','layout_srl',$layout_info->layout_srl)}';return false;">{$lang->cmd_layout_management}</a>
+        </div>
+        <!--@end-->
+    </div>
+
+    <!-- 컨텐츠 출력 부분 -->
+    <div class="layout_content" id="content">{$content}</div>
+</div>
+
+<!-- bottom_menu 메뉴 시작 -->
+<div class="layout_bottom">
+    <div class="layout_bottom_menu">
+        <script type="text/javascript">
+            xe_print_menu('bottom_menu', 1);
+        </script>
+    </div>
 </div>
diff --git a/plugins/login_info/skins/default/normal/style.css b/plugins/login_info/skins/default/normal/style.css
index d23427e54..07072513e 100644
--- a/plugins/login_info/skins/default/normal/style.css
+++ b/plugins/login_info/skins/default/normal/style.css
@@ -1,7 +1,6 @@
 .login_plugin {
     border:3px solid #DDDDDD;
     padding:6px;
-    width:190px;
     height:80px;
     margin-bottom:10px;
 }