|
|
@@ -14,15 +14,28 @@
|
|
|
* 1.0 2021.03.05 bin2107 최초 작성
|
|
|
*******************************************************************************
|
|
|
-->
|
|
|
-<div class="modalPopup" data-width="1400" data-height="750">
|
|
|
- <div class="panelStyle" >
|
|
|
+<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">* 상단으로 드래그&드랍하여 배너 순서 변경 가능합니다.</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,17 +118,86 @@
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
+ <div id="bannerDiv">
|
|
|
+ <input type="hidden" name="uploadDefaultBannerUrl" id="uploadDefaultBannerUrl" th:value="${@environment.getProperty('upload.image.view') + '/display/lookbook/banner/'}"/>
|
|
|
+ <!-- posistion picker -->
|
|
|
+ <!-- //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 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>';
|
|
|
+
|
|
|
+ bannerIdx++;
|
|
|
+ $("#bannerDiv").append(html);
|
|
|
+ $("#bannerDiv").sortable();
|
|
|
+ fnResetIdx();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 배너삭제
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* 저장
|
|
|
*/
|
|
|
@@ -137,6 +219,22 @@
|
|
|
var fromDate = $('#lbBannerForm input[name=lbDispStdt]').val().replace(/[^0-9]/g, '')+$('#lbBannerForm #lbStTimeHour').val()+$('#lbBannerForm #lbStTimeMin').val()+'00';
|
|
|
var toDate = $('#lbBannerForm input[name=lbDispEddt]').val().replace(/[^0-9]/g, '')+$('#lbBannerForm #lbEdTimeHour').val()+$('#lbBannerForm #lbEdTimeMin').val()+'59';
|
|
|
|
|
|
+ var bannerList = [];
|
|
|
+
|
|
|
+ var bannerIndex=0;
|
|
|
+ $(".bannerTableC").each(function (){
|
|
|
+ var bannerInfo = {
|
|
|
+ orgFileNm : $(this).find("input[name=bannerNewImgFile]").val()
|
|
|
+ ,sysFileNm : $(this).find("input[name=bannerNewImgFile]").val()
|
|
|
+ ,imgDesc : $(this).find("textarea[name=imgDesc]").val()
|
|
|
+ ,dispOrd : $(this).find("input[name=dispOrd]").val()
|
|
|
+ ,dispYn : 'Y'
|
|
|
+ };
|
|
|
+ bannerList.push(bannerInfo);
|
|
|
+
|
|
|
+ bannerIndex++;
|
|
|
+ });
|
|
|
+
|
|
|
mcxDialog.confirm('저장하시겠습니까?', {
|
|
|
cancelBtnText: "취소",
|
|
|
sureBtnText: "확인",
|
|
|
@@ -153,6 +251,7 @@
|
|
|
,newSysTnfileNm : newSysTnfileNm
|
|
|
,mainDispYn : 'N'
|
|
|
,dispOrd : 1
|
|
|
+ ,bannerList : bannerList
|
|
|
};
|
|
|
|
|
|
var jsonData = JSON.stringify(data);
|
|
|
@@ -198,9 +297,20 @@
|
|
|
);
|
|
|
});
|
|
|
|
|
|
+ $(".bannerTableC").each(function (){
|
|
|
+ if(gagajf.isNull($(this).find("input[name=bannerNewImgFile]").val())){
|
|
|
+ mcxDialog.alert('배너 이미지가 없습니다.');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
$(document).ready(function() {
|
|
|
//sortable Item List
|
|
|
- //fnSearchData();
|
|
|
+ $("#bannerDiv").sortable({
|
|
|
+ stop: function(event, ui) {
|
|
|
+ fnResetIdx();
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
</html>
|
gagamel