From 45ee0952579e7c103e7ce6a2a330d1faadf6cdf1 Mon Sep 17 00:00:00 2001
From: ChanMyeong <dece24@gmail.com>
Date: Wed, 19 Sep 2012 13:46:15 +0000
Subject: [PATCH] Issue 2444. Panel UI update. #imgBtn

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11389 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/menu/tpl/sitemap.html | 69 +++++++++++++++++++++++++++++++++--
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/modules/menu/tpl/sitemap.html b/modules/menu/tpl/sitemap.html
index 7161e76b7..92a8140c7 100644
--- a/modules/menu/tpl/sitemap.html
+++ b/modules/menu/tpl/sitemap.html
@@ -198,9 +198,41 @@
 	<div class="col" id="imgbtn">
 		<fieldset>
 			<h1>이미지 버튼</h1>
-			<div class="x_btn-group">
-				<button type="button" class="x_btn x_btn-small x_btn-primary">확인</button>
-			</div>
+			<form action="">
+				<figure>
+					<figcaption>일반</figcaption>
+					<img src="" alt="일반 버튼 이미지">
+				</figure>
+				<div class="btnBoth">
+					<button type="button" class="fileRemover x_btn x_btn-small x_pull-left">삭제</button>
+					<button type="button" class="fileTrigger x_btn x_btn-small x_btn-primary x_pull-right">변경</button>
+					<input type="file">
+				</div>
+			</form>
+			<form action="">
+				<figure>
+					<figcaption>마우스 오버</figcaption>
+					<p>이미지 없음</p>
+					<!--<img src="" alt="마우스 오버 버튼 이미지">-->
+				</figure>
+				<div class="btnBoth">
+					<button type="button" class="fileRemover x_btn x_btn-small x_pull-left">삭제</button>
+					<button type="button" class="fileTrigger x_btn x_btn-small x_btn-primary x_pull-right">이미지 올리기</button>
+					<input type="file">
+				</div>
+			</form>
+			<form action="">
+				<figure>
+					<figcaption>선택 됨</figcaption>
+					<p>이미지 없음</p>
+					<!--<img src="" alt="선택 됨 버튼 이미지">-->
+				</figure>
+				<div class="btnBoth">
+					<button type="button" class="fileRemover x_btn x_btn-small x_pull-left">삭제</button>
+					<button type="button" class="fileTrigger x_btn x_btn-small x_btn-primary x_pull-right">이미지 올리기</button>
+					<input type="file">
+				</div>
+			</form>
 		</fieldset>
 		<button type="button" class="x_close" data-hide="#imgbtn">&times;</button>
 	</div>
@@ -341,6 +373,7 @@
 .col .nav li>a:hover>i,
 .col .nav li>a:focus>i,
 .col .nav li.active>a>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);background-repeat:no-repeat;opacity:1;filter:alpha(opacity=100)}
+.col input[type="file"]{ width:1px;height:1px;overflow:hidden;font-size:0;line-height:0;opacity:0;filter:alpha(opacity=0)}
 /* Properties */
 #properties ul{margin:8px 0 0 0;padding:0 0 8px 0;border-bottom:1px solid #ddd}
 #properties li{position:relative;white-space:nowrap}
@@ -392,6 +425,13 @@
 #auth select{padding:0;width:100%}
 /* Default */
 #default ul{margin:15px 0}
+/* Image Button */
+#imgbtn h1+form{padding:8px 0 0 0}
+#imgbtn figure{margin:0}
+#imgbtn figcaption{font-weight:bold}
+#imgbtn p{margin:0}
+#imgbtn .btnBoth{ border-top:0;border-bottom:1px solid #ddd;margin-top:0;padding-bottom:28px}
+
 </style>
 <!--[if IE 7]>
 <script>
@@ -727,6 +767,29 @@ setTimeout(function(){
 			$selected.hide();
 		}
 	});
+// File upload
+	$('.fileTrigger').click(function(){
+		$(this).next('input[type="file"]').click();
+	});
+	$('input[type="file"]').change(function(){
+		$(this).closest('form').submit();
+	});
+	var $fileBtn = $('.fileTrigger, .fileRemover');
+	$fileBtn.click(function(){
+		var $this = $(this);
+		var $fileRemover = $this.parent('.btnBoth').children('.fileRemover');
+		setTimeout(function(){
+			var imgLength = $this.closest('form').find('>figure>img').length; // hasImage
+			if(imgLength){
+				$fileRemover.show(); // Show remover
+			} else {
+				$fileRemover.hide(); // Hide remover
+			}
+		}, 1000);
+	});
+	$(window).load(function(){
+		$fileBtn.trigger('click');
+	});
 });
 //]]>
 </script>