룩북 등록 팝업 임시 저장

src/main/webapp/WEB-INF/views/display/LookbookBannerPopupForm.html

@@ -14,15 +14,28 @@
  * 1.0  2021.03.05   bin2107     최초 작성
  *******************************************************************************
  -->
-<div class="modalPopup" data-width="1400" data-height="750">
+<div class="modalPopup" data-width="1600" data-height="850">
 	<div class="panelStyle" style="overflow-y:scroll;">
 		<form id="lbBannerForm" name="lbBannerForm" action="#" th:action="@{'/display/lookbook/save'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
 			<input type="hidden" id="siteCd" name="siteCd" value="G00_10"/>
 			<input type="hidden" id="lookbookSq" name="lookbookSq" th:value="${lookbookSq}"/>
+			<input type="hidden" name="uploadDefaultBannerUrlPop" id="uploadDefaultBannerUrlPop" th:value="${@environment.getProperty('upload.image.view') + '/display/lookbook/banner/'}"/>
 			<div class="panelTitle">
-				<h2 th:text="${'룩북 ' + (mode == 'N' ? '등록1' : '상세')}"></h2>
+				<h2 th:text="${'룩북 ' + (mode == 'N' ? '등록' : '상세')}"></h2>
 				<button type="button" class="close" onclick="uifnPopupClose('popupLookbookBanner');"><i class="fa fa-times"></i></button>
 			</div>
+			<div class="panelContent">
+				<ul class="panelBar">
+					<li class="aL">
+						<span class="cBlue">* 상단으로 드래그&amp;드랍하여 배너 순서 변경 가능합니다.</span><br>
+						<span class="cBlue">* 배너 PICKER는 저장 후 배너 상세 팝업에서 등록할 수 있습니다.</span>
+					</li>
+					<li class="aR">
+						<button type="button" class="btn btn-success btn-lg" id="btnAddBanner">배너추가</button>
+						<button type="button" class="btn btnRight btn-success btn-lg" id="btnSave">저장</button>
+					</li>
+				</ul>
+			</div>
 			<div>
 				<table class="frmStyle">
 					<colgroup>
@@ -105,111 +118,85 @@
 					</tbody>
 				</table>
 			</div>
-			<div>
+			<div id="bannerDiv">
+				<input type="hidden" name="uploadDefaultBannerUrl" id="uploadDefaultBannerUrl" th:value="${@environment.getProperty('upload.image.view') + '/display/lookbook/banner/'}"/>
 				<!-- posistion picker -->
-				<ul class="panelBar" id="pictureOffset">
-					<li>
-						<div class="picWrap">
-							<!-- <img src="image/@item02.jpg" class="picture" style="height:100%;"/> --> <!-- 세로가 긴 이미지 -->
-							<img th:src="${@environment.getProperty('upload.image.view') + '/display/popup/POPUP_20210304140009.png'}" class="picture" style="width:100%;"/> <!-- 정사각 이미지 -->
-							<!-- <img src="image/@item04.jpg" class="picture" style="width:100%;"/> --> <!-- 가로가 긴 이미지 -->
-						</div>
-					</li>
-					<li>
-						<!-- 안내문구 -->
-						<ul class="notice padB15">
-							<li>이미지를 클릭시 해당 위치의 <em>절대 좌표 값</em>을 가져옵니다.</li>
-						</ul>
-						<!-- //안내문구 -->
-
-						<!-- TABLE -->
-						<table class="frmStyle">
-							<colgroup>
-								<col width="160"/>
-								<col/>
-							</colgroup>
-							<tr>
-								<th>상품이미지 찾기</th>
-								<td>
-									<!-- 파일 선택 -->
-									<div class="uFile w300">
-										<input id="myFile2" type="file" class="uFileInput">
-										<label for="myFile2" class="uFileLabel">파일선택</label>
-									</div>
-									<!-- //파일 선택 -->
-								</td>
-							</tr>
-						</table>
-						<!-- //TABLE -->
-
-						<!-- 좌표리스트 -->
-						<table class="frmStyle dataWrap">
-							<colgroup>
-								<col width="10%"/>
-								<col/>
-							</colgroup>
-						</table>
-						<!-- //좌표리스트 -->
-					</li>
-				</ul>
 				<!-- //posistion picker -->
 			</div>
 		</form>
-		<ul class="panelBar">
-			<li  class="right">
-				<button type="button" class="btn btnRight btn-success btn-lg" id="btnSave">저장</button>
-			</li>
-		</ul>
 	</div>
 </div>
 <script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js?v=2019072202"></script>
 <script th:inline="javascript">
-	var $pic = $("#pictureOffset .picWrap");
-	var absX = absY = 0; //위치 표시 단위(픽셀)
-	var relX = relY = 0; //위치 표시 단위(퍼센트)
-	var trIdx = 0;
-	var idx = 0; //원 안의 숫자 count
-	const picW = $pic.width(); //이미지 넓이
-	const picY = $pic.height(); //이미지 높이
 
-	$pic.on('click', function(e) {
-		absX = e.pageX - $(this).offset().left; //left(px)
-		absY = e.pageY - $(this).offset().top; //top(px)
-		relX = ((absX / picW) * 100).toFixed(2); //left(%) : 소수점 둘째자리까지 표현
-		relY = ((absY / picY) * 100).toFixed(2); //top(%) : 소수점 둘째자리까지 표현
-		trIdx = trIdx+1; //ID
-		idx = idx+1; //circle value
+	var bannerIdx = 0;
+	$("#btnAddBanner").on('click', function(){
+		var html = '';
+		html += '<table class="frmStyle bannerTableC" id="bannerTable'+bannerIdx+'">';
+		html += '	<colgroup>';
+		html += '		<col style="width:10%"/>';
+		html += '		<col style="width:30%"/>';
+		html += '		<col style="width:10%"/>';
+		html += '		<col style="width:45%"/>';
+		html += '		<col style="width:5%"/>';
+		html += '	</colgroup>';
+		html += '	<thead>';
+		html += '		<tr>';
+		html += '			<th>배너이미지</th>';
+		html += '			<td>';
+		html += '				<div class="uFile w300">';
+		html += '					<input id="bannerFile'+bannerIdx+'" name="file" type="file" class="uFileInput w300" onchange="fnBannerImgFileUpload(this, ' + bannerIdx + ')"">';
+		html += '					<label for="bannerFile'+bannerIdx+'" class="uFileLabel">파일선택</label>';
+		html += '					<input type="hidden" name="bannerImgPath" value="">';
+		html += '					<input type="hidden" name="bannerNewImgFile" value="">';
+		html += '				</div>';
+		html += '				<div id="bannerImgView_' + bannerIdx + '">';
+		html += '					<img id="bannerPreViewUrl_' + bannerIdx + '" src="" style="height:100px; max-width:500px;"/>';
+		html += '				</div>';
+		html += '			</td>';
+		html += '			<th>이미지설명</th>';
+		html += '			<td><textarea class="textareaR4" name="imgDesc" id="imgDesc'+bannerIdx+'"></textarea></td>';
+		html += '			<td><input name="dispOrd" type="text" class="w80" placeholder="전시순서" style="margin-left:5px; text-align:center"/><button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteBanner(this);">삭제</button></td>';
+		html += '		</tr>';
+		html += '	</thead>';
+		html += '</table>';
 
-		//원 안에 숫자 표현
-		let posTag = `<span data-id="${trIdx}" class="pos" style="left:${relX}%; top:${relY}%;"><i>${idx}</i></span>`;
-		$pic.append(posTag);
-
-		//테이블에 좌표정보 표현
-		let trTag = `<tr data-id="${trIdx}">
-                    <th>${idx}</th>
-                    <td>
-                        <span>left <input type="text" style="width:50px;" value="${relX}" readonly="readonly"/><em class="per">%</em></span>
-                        <span>top <input type="text" style="width:50px;" value="${relY}" readonly="readonly"/><em class="per">%</em></span>
-                        <span>상품코드
-                            <input type="text" style="width:100px;" readonly="readonly"/>
-                            <button type="button" value="검색하기" class="btn btn-base btn-lg">검색</button>
-                        </span>
-                        <span class="btnDel"><button type="button" value="검색하기" class="btn btn-dark btn-lg" onclick="trDel(${trIdx}, ${idx})">삭제</button></span>
-                    </td>
-                </tr>`;
-		$(".dataWrap").append(trTag);
+		bannerIdx++;
+		$("#bannerDiv").append(html);
+		$("#bannerDiv").sortable();
+		fnResetIdx();
 	});
 
-	/* 좌표 삭제 */
-	function trDel(trIdx, idx) {
-		mcxDialog.confirm( idx + " 번을 삭제하시겠습니까?", {
-			cancelBtnText: "취소",
-			sureBtnText: "삭제",
-			sureBtnClick: function(){
-				$( "[data-id="+trIdx+"]").remove();
-			}
+	// 배너삭제
+	var fnDeleteBanner = function (obj){
+		$(obj).closest("table").remove();
+		fnResetIdx();
+	}
+
+	var fnBannerImgFileUpload = function (obj, idx){
+		var file = obj.files[0];
+		file.name = 'test';
+		if (typeof(file) == 'undefined'){
+			return;
+		}
+		// 파일 업로드
+		gagajf.ajaxFileUpload('/common/file/upload?subDir=/display/lookbook/banner/'
+				, file
+				, function(result) {
+					$(obj).closest('div').find('input:hidden[name=bannerNewImgFile]').val(result.newFileName);
+					$("#lbBannerForm #bannerPreViewUrl_"+idx).attr('src', $("#lbBannerForm #uploadDefaultBannerUrlPop").val()+result.newFileName);
+					$("#lbBannerForm #bannerImgView_"+idx).removeClass("off").addClass("on");
+				}
+				, 'image'
+		);
+	}
+
+	var fnResetIdx = function (){
+		$(".bannerTableC").each(function (i){
+			$(this).attr('id','bannerTable'+i);
+			$(this).find("input[name=dispOrd]").val(i+1);
 		});
-	};
+	}
 
 	/**
 	 * 저장
@@ -295,7 +282,11 @@
 
 	$(document).ready(function() {
 		//sortable Item List
-		//fnSearchData();
+		$("#bannerDiv").sortable({
+			stop: function(event, ui) {
+				fnResetIdx();
+			}
+		});
 	});
 </script>
 </html>

src/main/webapp/ux/css/admin.ui.css

@@ -860,6 +860,23 @@ table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
 .noticeWrap .download a{border-bottom:1px solid #337ab7;color:#337ab7;}
 .noticeWrap .download a:visited{border-bottom:1px solid #999;color:#333;}
 
+/* 이미지 좌표값 가져오기 */
+.pictureOffset > li{vertical-align:top;}
+.pictureOffset > li:nth-of-type(1){width:700px;padding-right:20px;-webkit-user-select:none;user-select:none;}
+.pictureOffset .picWrap{overflow:hidden;position:relative;width:700px;height:700px;background-color:#ddd;}
+.pictureOffset .picWrap .picture{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:auto;max-height:100%;max-width:100%;}
+.pictureOffset .dataWrap{min-width:727px;}
+.pictureOffset .dataWrap th{background:#e9f7ff;}
+.pictureOffset .dataWrap td{padding-left:20px;}
+.pictureOffset .dataWrap td input{margin:0 0 0 10px;}
+.pictureOffset .dataWrap td span{margin-right:30px;}
+.pictureOffset .dataWrap td span:nth-of-type(1) input{width:70px;}
+.pictureOffset .dataWrap td span .per{display:inline-block;padding-left:5px;line-height:30px;color:#777;font-size:13px;}
+.pictureOffset .dataWrap td span:nth-of-type(2) input{width:70px;}
+.pictureOffset .dataWrap td span:nth-of-type(3) input{width:120px;}
+.pictureOffset .dataWrap .btnDel{position:absolute;right:4px;margin-right:0;}
+.pictureOffset .pos{position:absolute;width:0px;height:0px;}
+.pictureOffset .pos i{overflow:hidden;position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:40px;height:40px;line-height:1;color:#fff;font-size:20px;text-align:center;background-color:#fd4802;border-radius:100%;box-sizing:border-box;padding-top:10px;}
 
 /* 반응형:GNB 유저명,등급,로그아웃 --------------- */
 @media ( max-width:1370px ) {