04.29

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

@@ -199,19 +199,136 @@ $(document).ready(function(){
 		}
 	});
 
-	//multiCheckBox : Header open
+	//multiCheckBox : Header Click
 	$(document).on("click", ".multiCheckBox .sltBtn", function(){
+		//닫기-----
 		if($(this).hasClass("on")){
-			$(this).removeClass("on");
-			$(this).parent().find("ul").css({display:"none"});
-		}else{
-			$(".multiCheckBox .sltBtn").removeClass("on");
-			$(".multiCheckBox ul").css({display:"none"});
+			$(this).next("ul").css({display:"none"}); //체크 리스트 닫기
+			let openObj = $(this).parents(".multiCheckBox");
+			let frtTxt = openObj.find("label[data-group] input:checked").parent().eq(0).text();
+			let chkLen = openObj.find("label[data-group] input:checked").length;
+			let chkCnt = chkLen - 1;
+			if ( chkLen == 0 ){		//체크 값이 없을때
+				let btnNm = $(".multiCheckBox .sltBtn.on").attr("data-name");
+				$(this).text(btnNm).removeClass("on");
+			} else if ( chkLen == 1 ) {
+				$(this).text(frtTxt).removeClass("on");
+			} else {				//체크 값이 있을때
+				$(this).text(frtTxt + " 외 " +chkCnt).removeClass("on");
+			};
+		}
+		//열기-----
+		else {
+			//활성화된 타 multiCheckBox 처리
+			let openObj = $(".multiCheckBox .sltBtn.on").parents(".multiCheckBox");
+			let frtTxt = openObj.find("label[data-group] input:checked").parent().eq(0).text();
+			let chkLen = openObj.find("label[data-group] input:checked").length;
+			let chkCnt = chkLen - 1;
+			openObj.find("ul").css({display:"none"}); //체크 리스트 닫기
+			if ( chkLen == 0 ){		//체크 값이 없을때
+				let btnNm = $(".multiCheckBox .sltBtn.on").attr("data-name");
+				$(".multiCheckBox .sltBtn.on").text(btnNm).removeClass("on");
+			} else if ( chkLen == 1 ) {
+				$(".multiCheckBox .sltBtn.on").text(frtTxt).removeClass("on");
+			} else {				//체크 값이 있을때
+				$(".multiCheckBox .sltBtn.on").text(frtTxt + " 외 " +chkCnt).removeClass("on");
+			};
+			//현재 multiCheckBox 처리
+			$(this).next("ul").css({display:"block"}); //체크 리스트 닫기
 			$(this).addClass("on");
-			$(this).parent().find("ul").css({display:"block"});
 		}
 	});
 
+	//Focus Out
+	$(document).on("click", function(e){
+		//multiCheckBox----------------------------------------------
+		if ( $(".multiCheckBox") != undefined ) {
+			let nowIdx = $(".multiCheckBox .sltBtn.on").parent().index();
+			let openObj = $(".multiCheckBox").eq(nowIdx);
+			if ( $(e.target).parents(".multiCheckBox").length == 0 ) {
+				let chkLen = openObj.find("label[data-group] input:checked").length;
+				let chkCnt = chkLen - 1;
+				let frtTxt = openObj.find("label[data-group] input:checked").parent().eq(0).text();
+				openObj.find("ul").css({display:"none"});
+				if ( chkLen == 0 ){		//체크 값이 없을때
+					let btnNm = $(".multiCheckBox .sltBtn.on").attr("data-name");
+					$(".multiCheckBox .sltBtn.on").text(btnNm).removeClass("on");
+				} else if ( chkLen == 1 ) {
+					$(".multiCheckBox .sltBtn.on").text(frtTxt).removeClass("on");
+				} else {				//체크 값이 있을때
+					$(".multiCheckBox .sltBtn.on").text(frtTxt + " 외 " +chkCnt).removeClass("on");
+				};
+			}
+		}
+	});
+
+	//Focus Out : multiCheckBox
+	function mcBoxfocusOut(){
+		let nowIdx = $(".multiCheckBox .sltBtn.on").parent().index();
+		let openObj = $(".multiCheckBox").eq(nowIdx);
+		if ( $(e.target).parents(".multiCheckBox").length == 0 ) {
+			let chkLen = openObj.find("label[data-group] input:checked").length;
+			let chkCnt = chkLen - 1;
+			let frtTxt = openObj.find("label[data-group] input:checked").parent().eq(0).text();
+			openObj.find("ul").css({display:"none"});
+			if ( chkLen == 0 ){		//체크 값이 없을때
+				let btnNm = '선택하세요';
+				$(".multiCheckBox .sltBtn.on").text(btnNm).removeClass("on");
+			} else {				//체크 값이 있을때
+				$(".multiCheckBox .sltBtn.on").text(frtTxt + " 외 " +chkCnt).removeClass("on");
+			};
+		}
+	};
+
+/*
+	var body = document.querySelector("body");
+	body.addEventListener('click', clickBodyEvent);
+
+	function clickBodyEvent(event) {
+		var target = event.target;
+
+		var ClassTag = event.currentTarget.querySelector(".multiCheckBox")
+		var btnTag = event.currentTarget.querySelector(".multiCheckBox").querySelector("button");
+		var ulTags = event.currentTarget.querySelector(".multiCheckBox").querySelector("ul");
+		var liTags = event.currentTarget.querySelector(".multiCheckBox").querySelector("ul").querySelectorAll("li");
+		var labTags = event.currentTarget.querySelector(".multiCheckBox").querySelector("ul").querySelector("li").querySelector("label");
+
+		console.log(ClassTag);
+
+
+		if(target != ClassTag && target != ulTags  && target != liTags && target != btnTag &&  target != labTags ) {
+			console.log(target);
+			var liTags = event.currentTarget.querySelector(".multiCheckBox").querySelector("ul").querySelector("li");
+			for (var i=0; i<liTags.length; i++) {
+				if( liTags[i] == target ) {
+					return false;
+				 } else {
+					$(document).find(".multiCheckBox .sltBtn").removeClass("on");
+					$(document).find(".multiCheckBox ul").css({display:"none"});
+					$(document).find(".multiCheckBox").addClass("on");
+					return;
+				 }
+			};
+			$(document).find(".multiCheckBox .sltBtn").removeClass("on");
+					$(document).find(".multiCheckBox ul").css({display:"none"});
+					$(document).find(".multiCheckBox").addClass("on");
+
+		}
+
+
+		// 3. review_textarea 영역이면 pass
+		//if( target == event.currentTarget.querySelector(".review_textarea") )return;
+
+		var reviewWriteInfo = event.currentTarget.querySelector(".review_write_info");
+		reviewWriteInfo.style.display = "block";
+		reviewWriteInfo.querySelectorAll("span").forEach( spanTag => {
+			spanTag.style.display = "block";
+		});
+	} 	*/
+
+
+
+
 	//햄버거버튼 : LNB 숨김(전체화면 보기)
 	$(document).on("click",".lnbClose",function(){
 		lnbToggle();