메인전시 GNB 띠배너 수정

src/main/java/com/style24/persistence/domain/Contents.java

@@ -47,6 +47,7 @@ public class Contents extends TscBaseDomain {
     private String mdTitle;
     private String useYn;
     private String contentsTitle;
+    private String html;
 
     private String multiContentsYn;
 

src/main/java/com/style24/persistence/mybatis/shop/TsaDsiplay.xml

@@ -1334,6 +1334,7 @@
 			 , A.SUB_TEXT2
 			 , A.SUB_TEXT3
 			 , A.SUB_TEXT4
+		     , A.HTML
 			 , A.BRAND_GROUP_NO
 			 , A.BRAND_GROUP_IMG
 			 , A.MD_TITLE
@@ -1431,6 +1432,7 @@
 			, SUB_TEXT2
 			, SUB_TEXT3
 			, SUB_TEXT4
+			, HTML
 			, BRAND_GROUP_NO
 			, BRAND_GROUP_IMG
 			, MD_TITLE
@@ -1473,6 +1475,7 @@
 			,#{subText2}
 			,#{subText3}
 			,#{subText4}
+			,#{html}
 			,#{brandGroupNo}
 			,#{brandGroupImg}
 			,#{mdTitle}
@@ -1533,6 +1536,7 @@
 			, SUB_TEXT2
 			, SUB_TEXT3
 			, SUB_TEXT4
+			, HTML
 			, BRAND_GROUP_NO
 			, BRAND_GROUP_IMG
 			, MD_TITLE
@@ -1573,6 +1577,7 @@
 			 , SUB_TEXT2
 			 , SUB_TEXT3
 			 , SUB_TEXT4
+		     , HTML
 			 , BRAND_GROUP_NO
 			 , BRAND_GROUP_IMG
 			 , MD_TITLE

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

@@ -37,6 +37,8 @@
 	</div>
 </div>
 
+<script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020103001"></script>
+<script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=2020103001"></script>
 <script type="text/javascript" src="/ux/plugins/gaga/gaga.kollus.js"></script>
 <script th:inline="javascript">
 	/*<![CDATA[*/
@@ -65,7 +67,10 @@
 	var createIdx = 0;
 	var fnCreatePopLayout = function(result) {
 		var html = '';
+		var descIdx = '';
+
 		for(var i=0; i<result.length; i++){
+			descIdx = i;
 			var dispStdt = result[i].dispStdt.split(" ");
 			var dispEddt = result[i].dispEddt.split(" ");
 			var cate1No = result[i].contentsType;
@@ -201,23 +206,47 @@
 					html += '	</div></td>';
 					html += '</tr>';
 
-					html += '<tr name="imgPopRow" id="openBanner1">';
-					html += '	<th>오픈배너<br>이미지</th>';
-					html += '	<td><div class="uFile w300">';
-					html += '			<input id="filePop_1" name="file" type="file" class="uFileInput w300" onchange="fnPopFileUpload(this, 1)"/>';
-					html += '			<label for="filePop_1" class="uFileLabel">파일선택</label>';
-					html += '			<input type="hidden" name="imgPath" value="'+result[i].imgPath2+'"/>';
-					html += '			<input type="hidden" name="newImgFile" value="" />';
-					html += '		</div>';
-					html += '	<div id="imgViewPop_1" class=';
-					if(src!=''){
-						html += '"on">';
+					html += '<tr class="cateTypeTr" name="openBannerTypeTr'+i+'" id="openBannerTypeTr">';
+					html += '	<th>확장형 배너<br>유형</th>';
+					html += '	<td colspan="3">';
+					if(result[i].strVar7=='IMG'){
+						html += '		<label class="rdoBtn"><input type="radio" name="openBannerType'+i+'" value="IMG" onclick="fnChangeOpenBannerType(this,'+i+');" checked="checked"/>이미지형</label>';
+						html += '		<label class="rdoBtn"><input type="radio" name="openBannerType'+i+'" value="HTML" onclick="fnChangeOpenBannerType(this,'+i+');"/>HTML형</label>';
 					}else{
-						html += '"off">';
+						html += '		<label class="rdoBtn"><input type="radio" name="openBannerType'+i+'" value="IMG" onclick="fnChangeOpenBannerType(this,'+i+');" />이미지형</label>';
+						html += '		<label class="rdoBtn"><input type="radio" name="openBannerType'+i+'" value="HTML" onclick="fnChangeOpenBannerType(this,'+i+');" checked="checked"/>HTML형</label>';
 					}
-					html += '		<img id="bannerPreViewUrlPop_1" src="'+src2+'" style="height:100px; max-width:500px;"  onclick="cfnOpenImagePreViewPopup(\'bannerPreimgViewPop\',$(this).attr(\'src2\'));"/>';
-					html += '	</div></td>';
+					html += '	</td>';
 					html += '</tr>';
+
+					if(result[i].strVar7=='IMG'){
+						html += '<tr name="imgPopRow" id="openBanner1">';
+						html += '	<th>오픈배너<br>이미지</th>';
+						html += '	<td><div class="uFile w300">';
+						html += '			<input id="filePop_1" name="file" type="file" class="uFileInput w300" onchange="fnPopFileUpload(this, 1)"/>';
+						html += '			<label for="filePop_1" class="uFileLabel">파일선택</label>';
+						html += '			<input type="hidden" name="imgPath" value="'+result[i].imgPath2+'"/>';
+						html += '			<input type="hidden" name="newImgFile" value="" />';
+						html += '		</div>';
+						html += '	<div id="imgViewPop_1" class=';
+						if(src!=''){
+							html += '"on">';
+						}else{
+							html += '"off">';
+						}
+						html += '		<img id="bannerPreViewUrlPop_1" src="'+src2+'" style="height:100px; max-width:500px;"  onclick="cfnOpenImagePreViewPopup(\'bannerPreimgViewPop\',$(this).attr(\'src2\'));"/>';
+						html += '	</div></td>';
+						html += '</tr>';
+					}else{
+						html += '<tr name="imgPopRow" id="openBanner2">';
+						html += '	<input type="hidden" name="htmlDesc'+i+'" id="htmlDesc'+i+'" value="'+result[i].html+'">';
+						html += '	<th>오픈배너<br>HTML</th>';
+						html += '	<td class="padT10"><div class="tabJrContArea">';
+						html += '		<textarea class="textareaR3 summernote" name="openBannerDesc'+i+'" id="openBannerDesc'+i+'" ></textarea>';
+						html += '	</div>';
+						html += '	</td>';
+						html += '</tr>';
+					}
 				}
 
 				if(result[i].contentsType=='IMG'){
@@ -399,9 +428,30 @@
 			defaultDate: $('.schDate').val()
 		});
 
+		// SGNB001 일때 확장형 배너 summernote
+		if(contentsLoc=='SGNB001'){
+			fnOpenBannerSummernote();
+		}
+
 		tableLen = $(".mcTable").length;
 	}
 
+	var fnOpenBannerSummernote = function (){
+		$('.mcTable').each(function(){
+			let idx = $(this).find('[name=tableIdx]').val();
+			let bannerCateType = $("#mcTable"+idx).find('input:radio[name=cateType'+idx+']:checked').val();
+
+			if(bannerCateType=='OPEN'){
+				let bannerType = $("#mcTable"+idx).find('input:radio[name=openBannerType'+idx+']:checked').val();
+				if(bannerType=='HTML'){
+					let htmlDesc = $("#mcTable"+idx).find('input[name=htmlDesc'+idx+']').val();
+					gagaSn.setContents('#openBannerDesc'+idx, '');
+					$('#openBannerDesc'+idx).summernote('code', htmlDesc);
+				}
+			}
+		});
+	}
+
 	var fnChangeTvPlayer = function (obj,idx){
 		let tvPlayer = $("#mcTable"+idx).find("input:radio[name=tvPlayer"+idx+"]:checked").val();
 
@@ -414,14 +464,29 @@
 		}
 	}
 
+	var fnChangeOpenBannerType = function (obj, idx){
+		let openBannerType = $("#mcTable"+idx).find("input:radio[name=openBannerType"+idx+"]:checked").val();
+
+		if(openBannerType == 'IMG'){
+			$(obj).closest("table").find("[id=openBanner1]").show();
+			$(obj).closest("table").find("[id=openBanner2]").hide();
+		}else{
+			$(obj).closest("table").find("[id=openBanner1]").hide();
+			$(obj).closest("table").find("[id=openBanner2]").show();
+		}
+	}
+
 	var fnChangeGnbCateType = function (obj, idx){
 		let cateType = $("#mcTable"+idx).find("input:radio[name=cateType"+idx+"]:checked").val();
 
 		if(cateType=='OPEN'){
 			$(obj).closest("table").find("[name=tabBgColorRow"+idx+"]").show();
 			$(obj).closest("table").find("[name=tabShowYnRow"+idx+"]").show();
+			$(obj).closest("table").find("[name=openBannerTypeTr"+idx+"]").show();
+			$(obj).closest("table").find("input:radio[name=openBannerType"+idx+"]:input[value=IMG]").prop('checked',true);
 			$(obj).closest("table").find("[id=openBanner0]").show();
 			$(obj).closest("table").find("[id=openBanner1]").show();
+			$(obj).closest("table").find("[id=openBanner2]").hide();
 			$(obj).closest("table").find("[name=file]").closest('div').find('label').text('파일선택');
 			$(obj).closest("table").find("[name=imgPath]").val('');
 			$(obj).closest("table").find("[name=newImgFile]").val('');
@@ -432,8 +497,11 @@
 		}else if(cateType=='IMG'){
 			$(obj).closest("table").find("[name=tabBgColorRow"+idx+"]").show();
 			$(obj).closest("table").find("[name=tabShowYnRow"+idx+"]").hide();
+			$(obj).closest("table").find("[name=openBannerTypeTr"+idx+"]").hide();
+			$(obj).closest("table").find("input:radio[name=openBannerType"+idx+"]:input[value=IMG]").prop('checked',true);
 			$(obj).closest("table").find("[id=openBanner0]").show();
 			$(obj).closest("table").find("[id=openBanner1]").hide();
+			$(obj).closest("table").find("[id=openBanner2]").hide();
 			$(obj).closest("table").find("[name=file]").closest('div').find('label').text('파일선택');
 			$(obj).closest("table").find("[name=imgPath]").val('');
 			$(obj).closest("table").find("[name=newImgFile]").val('');
@@ -444,8 +512,11 @@
 		}else if(cateType=='TEXT'){
 			$(obj).closest("table").find("[name=tabBgColorRow"+idx+"]").hide();
 			$(obj).closest("table").find("[name=tabShowYnRow"+idx+"]").hide();
-			$(obj).closest("table").find("[id=openBanner0]").hide();
+			$(obj).closest("table").find("[name=openBannerTypeTr"+idx+"]").hide();
+			$(obj).closest("table").find("input:radio[name=openBannerType"+idx+"]:input[value=IMG]").prop('checked',true);
+			$(obj).closest("table").find("[id=openBanner0]").show();
 			$(obj).closest("table").find("[id=openBanner1]").hide();
+			$(obj).closest("table").find("[id=openBanner2]").hide();
 			$(obj).closest("table").find("[name=file]").closest('div').find('label').text('파일선택');
 			$(obj).closest("table").find("[name=imgPath]").val('');
 			$(obj).closest("table").find("[name=newImgFile]").val('');
@@ -575,6 +646,14 @@
 			html += '	</div></td>';
 			html += '</tr>';
 
+			html += '<tr class="cateTypeTr" name="openBannerTypeTr'+dataIdx+'" id="openBannerTypeTr">';
+			html += '	<th>확장형 배너<br>유형</th>';
+			html += '	<td colspan="3">';
+			html += '		<label class="rdoBtn"><input type="radio" name="openBannerType'+dataIdx+'" value="IMG" onclick="fnChangeOpenBannerType(this,'+dataIdx+');" checked="checked"/>이미지형</label>';
+			html += '		<label class="rdoBtn"><input type="radio" name="openBannerType'+dataIdx+'" value="HTML" onclick="fnChangeOpenBannerType(this,'+dataIdx+');"/>HTML형</label>';
+			html += '	</td>';
+			html += '</tr>';
+
 			html += '<tr name="imgPopRow" id="openBanner1">';
 			html += '	<th>오픈배너<br>이미지</th>';
 			html += '	<td><div class="uFile w300">';
@@ -593,6 +672,15 @@
 			html += '	</div></td>';
 			html += '</tr>';
 
+			html += '<tr name="imgPopRow" id="openBanner2" style="display: none;">';
+			html += '	<input type="hidden" name="htmlDesc'+dataIdx+'" id="htmlDesc'+dataIdx+'" value="">';
+			html += '	<th>오픈배너<br>HTML</th>';
+			html += '	<td class="padT10"><div class="tabJrContArea">';
+			html += '		<textarea class="textareaR3 summernote" name="openBannerDesc'+dataIdx+'" id="openBannerDesc'+dataIdx+'"></textarea>';
+			html += '	</div>';
+			html += '	</td>';
+			html += '</tr>';
+
 			html += '	<tr name="tabBgColorRow'+dataIdx+'">';
 			html += '		<th>배경 RGB코드</th>';
 			html += '		<td><input name="gnbBgColor'+dataIdx+'" type="text" maxlength="200" data-valid-name="배경 RGB코드" value=""/></td>';
@@ -673,6 +761,9 @@
 			changeYear: true,
 			defaultDate: $('.schDate').val()
 		});
+		if(contentsLoc=='SGNB001'){
+			gagaSn.setContents('#openBannerDesc'+dataIdx, '');
+		}
 
 		tableLen = tableLen+1;
 	});
@@ -818,6 +909,7 @@
 			var subText4 = '';
 			var contentsType = '';
 			var useYn = 'Y';
+			var html = '';
 			var i = 1;
 			$(this).find('input[name=imgPath]').each(function(){
 				eval("imgPath" + i + "='"+$(this).val()+"'");
@@ -871,6 +963,10 @@
 				strVar5 = $(this).find("input[name=gnbBgColor"+thisIdx+"]").val();
 				strVar6 = $(this).find("input[name=gnbTextColor"+thisIdx+"]").val();
 				strVar8 = $(this).find("input:radio[name=todayYn"+thisIdx+"]:checked").val();
+				strVar7 = $(this).find("input:radio[name=openBannerType"+thisIdx+"]:checked").val();
+				if($(this).find("input:radio[name=openBannerType"+thisIdx+"]:checked").val() == 'HTML'){
+					html = $(this).find("textarea[name=openBannerDesc"+thisIdx+"]").val();
+				}
 			}
 
 			if(contentsLoc=='SMM001'){
@@ -926,6 +1022,7 @@
 				, useYn : useYn
 				, dispOrd : dispOrd
 				, brandGroupNo : brandGroupNo
+				, html : html
 			};
 
 			dataArr.push(data);
@@ -974,6 +1071,7 @@
 		}
 
 		var jsonData = JSON.stringify(dataArr);
+		console.log('jsonData::'+jsonData);
 		mcxDialog.confirm('컨텐츠를 저장 하시겠습니까?', {
 			cancelBtnText: "취소",
 			sureBtnText: "확인",
@@ -1200,6 +1298,8 @@
 
 		$("#popSortable").disableSelection();
 		fnGetContentsPreviewList();
+
+
 	});
 	/*]]>*/
 </script>