임시커밋

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

@@ -15,7 +15,7 @@
  *******************************************************************************
  -->
 <div class="modalPopup" data-width="1400" data-height="750">
-	<div class="panelStyle" >
+	<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}"/>
@@ -105,6 +105,55 @@
 					</tbody>
 				</table>
 			</div>
+			<div>
+				<!-- 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">
@@ -115,6 +164,52 @@
 </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
+
+		//원 안에 숫자 표현
+		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);
+	});
+
+	/* 좌표 삭제 */
+	function trDel(trIdx, idx) {
+		mcxDialog.confirm( idx + " 번을 삭제하시겠습니까?", {
+			cancelBtnText: "취소",
+			sureBtnText: "삭제",
+			sureBtnClick: function(){
+				$( "[data-id="+trIdx+"]").remove();
+			}
+		});
+	};
 
 	/**
 	 * 저장