merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
401
build/resources/main/static/sopmall/pc/js/script.js
Normal file
401
build/resources/main/static/sopmall/pc/js/script.js
Normal file
@@ -0,0 +1,401 @@
|
||||
// script.js : 모든 페이지에서 공통으로 사용되는 스크립트를 모아놓은 파일입니다.
|
||||
// 선택적으로 사용하시면 됩니다.
|
||||
//
|
||||
|
||||
// 검색창 관련 스크립트
|
||||
|
||||
var searchPopup = $(".header-search-pop");
|
||||
var searchBar = $("#header-search-bar");
|
||||
var searchTextDeleteBtn = $(".header-search-pop__text-delete-btn");
|
||||
var searchBody = $(".header-search-pop__body");
|
||||
var searchAutoComplete = $(".header-search-pop__auto-complete");
|
||||
var recentSearchList = $(".header-search-pop__recent-search-list");
|
||||
var recentSearchDelete = $(".header-search-pop__recent-search-delete");
|
||||
var recentSearchDeleteAll = $(".header-search-pop__recent-search-deleteAll");
|
||||
|
||||
// 메인 검색창 클릭시 검색 팝업 띄우기
|
||||
$("#header-search-trigger").click(function (e) {
|
||||
e.stopPropagation();
|
||||
searchPopup.addClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchBar.focus();
|
||||
});
|
||||
|
||||
// 메인 검색창 포커스시 검색 팝업 띄우기
|
||||
$("#header-search-trigger").keyup(function (e) {
|
||||
searchPopup.addClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchBar.focus();
|
||||
});
|
||||
|
||||
// 검색 팝업 외 클릭 시 검색 팝업 닫기, "닫기" 버튼 클릭 시 검색 팝업 닫기
|
||||
$("header, main").click(function (e) {
|
||||
if (searchPopup.hasClass("active")) {
|
||||
searchPopup.removeClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
searchTextDeleteBtn.removeClass("active");
|
||||
searchBar.val("");
|
||||
}
|
||||
});
|
||||
|
||||
$(".header-search-pop__close").click(function (e) {
|
||||
e.preventDefault();
|
||||
searchPopup.removeClass("active");
|
||||
searchBar.val("");
|
||||
});
|
||||
|
||||
$(".header-search-pop__close").blur(function (e) {
|
||||
e.preventDefault();
|
||||
searchPopup.removeClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
});
|
||||
|
||||
$(searchPopup).click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 검색창 입력시 자동완성 띄우기, 검색창 값 없을시 자동완성 숨기기
|
||||
searchBar.on("keyup", function (e) {
|
||||
if (e.currentTarget.value !== "") {
|
||||
searchTextDeleteBtn.addClass("active");
|
||||
searchBody.removeClass("active");
|
||||
searchAutoComplete.addClass("active");
|
||||
} else {
|
||||
searchTextDeleteBtn.removeClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
// x 버튼 클릭시 검색창 값 초기화
|
||||
searchTextDeleteBtn.click(function (e) {
|
||||
e.preventDefault();
|
||||
searchBar.val("");
|
||||
searchTextDeleteBtn.removeClass("active");
|
||||
searchAutoComplete.removeClass("active");
|
||||
searchBody.addClass("active");
|
||||
searchBar.focus();
|
||||
});
|
||||
|
||||
// 검색 내용 없을 시, 레이어팝업 띄우기
|
||||
$("#search-form").on("submit", function (e) {
|
||||
if (searchBar.val() === "") {
|
||||
e.preventDefault();
|
||||
$("#enter-keyword").modal();
|
||||
$(".close-modal").focus();
|
||||
}
|
||||
});
|
||||
|
||||
// 최근 검색어 삭제
|
||||
recentSearchDelete.on("click", function (e) {
|
||||
$(this).parent().remove();
|
||||
if (recentSearchList.children().length === 0) {
|
||||
createNoResult();
|
||||
}
|
||||
});
|
||||
|
||||
// 최근 검색어 전체 삭제
|
||||
recentSearchDeleteAll.on("click", function (e) {
|
||||
recentSearchList.empty();
|
||||
createNoResult();
|
||||
});
|
||||
|
||||
// 최근 검색어 없을 시, "최근 검색어가 없습니다." 문구 생성
|
||||
$(document).ready(function () {
|
||||
if (recentSearchList.children().length === 0) {
|
||||
createNoResult();
|
||||
}
|
||||
});
|
||||
|
||||
function createNoResult() {
|
||||
var noResult = $("<p>")
|
||||
.addClass("header-search-pop__recent-search-noResult")
|
||||
.text("최근 검색한 검색어가 없습니다.");
|
||||
recentSearchList.append(noResult);
|
||||
}
|
||||
|
||||
// 실시간 검색 스크립트
|
||||
|
||||
// 실시간 검색
|
||||
$("#search-trend").vTicker({
|
||||
speed: 500,
|
||||
pause: 3000,
|
||||
showItems: 1,
|
||||
mousePause: true,
|
||||
height: 0,
|
||||
animate: true,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
startPaused: false,
|
||||
});
|
||||
|
||||
var isSearchTrendOpen = false;
|
||||
|
||||
$(".search-trend__drop-down-trigger").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
isSearchTrendOpen = !isSearchTrendOpen;
|
||||
$(this).closest(".header-trend").css("overflow", "visible");
|
||||
if (isSearchTrendOpen) {
|
||||
$(".search-trend__drop-down").addClass("active");
|
||||
} else {
|
||||
$(".search-trend__drop-down").removeClass("active");
|
||||
}
|
||||
|
||||
$(this).toggleClass("active");
|
||||
});
|
||||
|
||||
$("header, main, #header-search-trigger").click(function (e) {
|
||||
if (isSearchTrendOpen) {
|
||||
$(".search-trend__drop-down").removeClass("active");
|
||||
$(".search-trend__drop-down-trigger").removeClass("active");
|
||||
isSearchTrendOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
$(".search-trend__drop-down, .search-trend__drop-down-trigger").click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 상단 띠 배너 스크립트
|
||||
|
||||
// 상단 띠 배너
|
||||
$(".top-banner-slick").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
variableWidth: true,
|
||||
speed: 900,
|
||||
infinite: true,
|
||||
centerMode: true,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 4000,
|
||||
});
|
||||
|
||||
// 상단 띠 배너 닫기 버튼
|
||||
$(".top-banner__close").click(function () {
|
||||
$(".top-banner img").fadeOut(340);
|
||||
$(".top-banner").slideUp(500);
|
||||
});
|
||||
|
||||
// 상품옵션 팝업
|
||||
|
||||
// 상품옵션 팝업 띄우기
|
||||
$(".product-unit-addToCart").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#product-option-popUp").modal({ clickClose: false });
|
||||
});
|
||||
|
||||
// 체크박스 주변 박스 클릭 시, 체크박스 체크/해제
|
||||
$(".product-option__item").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this)
|
||||
.find("input[type=checkbox]")
|
||||
.prop("checked", !$(this).find("input[type=checkbox]").prop("checked"));
|
||||
});
|
||||
|
||||
// 숫자 3자리 마다 "," 찍기
|
||||
|
||||
var threeDigitComma = $(".three-digit-comma");
|
||||
|
||||
threeDigitComma.each(function () {
|
||||
var num = $(this).text();
|
||||
$(this).text(num.replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
});
|
||||
|
||||
// 테이블 행 열기/닫기
|
||||
|
||||
var trFoldableTrigger = $(".tr-foldable-trigger");
|
||||
var trFoldable = $(".tr-foldable");
|
||||
trFoldableTrigger.on("click", function () {
|
||||
trFoldable.not($(this).next()).removeClass("active");
|
||||
$(this).next().toggleClass("active");
|
||||
});
|
||||
|
||||
// 커스텀 셀렉트박스
|
||||
|
||||
if ($(".select-box > select").length > 0) {
|
||||
$(".select-box > select").niceSelect();
|
||||
}
|
||||
|
||||
// 푸터 패밀리 사이트 링크
|
||||
|
||||
$(".family-site-link").niceSelect();
|
||||
$(".family-site-link").on("change", function () {
|
||||
var url = $(this).val();
|
||||
if (url) {
|
||||
window.open(url, "_blank");
|
||||
$(this).closest("div").find(".nice-select li").removeClass("selected");
|
||||
$(this).closest("div").find(".nice-select .current").text("FAMILY SITE");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 서브 탭 메뉴
|
||||
|
||||
var subTabBtn = $(".sub-tab__trigger .sub-tab__btn");
|
||||
var subTabContent = $(".sub-tab__content");
|
||||
|
||||
subTabBtn.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
var tabBtnIndex = $(this).index();
|
||||
subTabBtn.removeClass("current");
|
||||
$(this).addClass("current");
|
||||
subTabContent.removeClass("current");
|
||||
subTabContent.eq(tabBtnIndex).addClass("current");
|
||||
});
|
||||
|
||||
// 서브 탭 메뉴 타입 2
|
||||
|
||||
var boxTabs = $(".boxTab__tabBtn");
|
||||
var contents = $(".boxTab__content");
|
||||
|
||||
function resetboxTabs() {
|
||||
boxTabs.removeClass("current");
|
||||
contents.removeClass("current");
|
||||
}
|
||||
|
||||
boxTabs.each(function (index) {
|
||||
$(this).on("click", function () {
|
||||
resetboxTabs();
|
||||
$(this).addClass("current");
|
||||
contents.eq(index).addClass("current");
|
||||
});
|
||||
});
|
||||
|
||||
// 인풋 텍스트 숫자만 입력 (콤마 X, 휴대폰번호 등)
|
||||
$(".input-text.number").on("input", function () {
|
||||
this.value = this.value.replace(/[^0-9]/g, "");
|
||||
});
|
||||
|
||||
// 인풋 텍스트 숫자만 입력 (콤마 O, 금액 등)
|
||||
$(".input-text.numberComma").on("input", function () {
|
||||
var input = $(this).val();
|
||||
$(this).val(input.replace(/[^0-9]/g, "").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
|
||||
});
|
||||
|
||||
//해당 클래스를 가진 요소 3자리 마다 콤마
|
||||
$(".comma").each(function () {
|
||||
var text = $(this).text();
|
||||
$(this).text(text.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,"));
|
||||
});
|
||||
|
||||
// 모달 팝업 옵션
|
||||
|
||||
$.modal.defaults = {
|
||||
// 페이드 애니메이션
|
||||
fadeDuration: 70,
|
||||
|
||||
// 우측 상단 닫기 버튼
|
||||
showClose: true,
|
||||
|
||||
// 모달 안에 모달 열었을 때, 기존 모달 닫히지 않게 하기
|
||||
closeExisting: false,
|
||||
|
||||
// 모달 바깥영역 클릭 시 닫히지 않게 하기
|
||||
clickClose: false,
|
||||
};
|
||||
|
||||
// 모달에 띄울때, 레이아웃 움직이는 현상 수정
|
||||
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
||||
|
||||
$(document).on($.modal.BEFORE_BLOCK, function (event, modal) {
|
||||
document.body.style.paddingRight = scrollbarWidth + "px";
|
||||
});
|
||||
|
||||
$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
|
||||
document.body.style.paddingRight = "";
|
||||
});
|
||||
|
||||
// 데이트 피커
|
||||
//
|
||||
$(".datepicker").each(function () {
|
||||
$(this).datepicker({
|
||||
dateFormat: "yy-mm-dd",
|
||||
prevText: "이전 달",
|
||||
nextText: "다음 달",
|
||||
changeMonth: "true",
|
||||
changeYear: "true",
|
||||
dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
|
||||
dayNamesMin: ["일", "월", "화", "수", "목", "금", "토"],
|
||||
monthNames: [
|
||||
"1월",
|
||||
"2월",
|
||||
"3월",
|
||||
"4월",
|
||||
"5월",
|
||||
"6월",
|
||||
"7월",
|
||||
"8월",
|
||||
"9월",
|
||||
"10월",
|
||||
"11월",
|
||||
"12월",
|
||||
],
|
||||
monthNamesShort: [
|
||||
"1월",
|
||||
"2월",
|
||||
"3월",
|
||||
"4월",
|
||||
"5월",
|
||||
"6월",
|
||||
"7월",
|
||||
"8월",
|
||||
"9월",
|
||||
"10월",
|
||||
"11월",
|
||||
"12월",
|
||||
],
|
||||
showMonthAfterYear: true,
|
||||
yearSuffix: "년",
|
||||
firstDay: 0,
|
||||
maxDate: 0, // 오늘로부터 1년 전까지의 날짜까지 선택 가능
|
||||
// beforeShowDay: function (date) {
|
||||
// // 오늘로부터 1년 전까지의 날짜를 비활성화
|
||||
// let currentDate = new Date();
|
||||
// currentDate.setDate(currentDate.getDate() - 366);
|
||||
// return [date.getTime() > currentDate.getTime() - 1, ""];
|
||||
// },
|
||||
});
|
||||
});
|
||||
|
||||
// 기간 선택 탭버튼
|
||||
|
||||
var dateRangeBtn = $(".dateRange-btn");
|
||||
dateRangeBtn.click(function (e) {
|
||||
if (e.detail === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
var otherBtn = $(this).siblings();
|
||||
otherBtn.removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
});
|
||||
|
||||
// 라디오 버튼 선택 시, 테이블 숨기기/보이기
|
||||
//
|
||||
var radioTab = $(".radio-tab-content");
|
||||
var radioTabTrigger = $(".radio-tab-trigger > .custom-radio > input[type=radio]");
|
||||
radioTab.children().hide();
|
||||
radioTab.each(function () {
|
||||
$(this).children().eq(0).show();
|
||||
});
|
||||
|
||||
radioTabTrigger.click(function () {
|
||||
if (!$(this).prop("checked")) {
|
||||
return;
|
||||
}
|
||||
// data-radiotab 값과 id같아야함
|
||||
var radioTabId = $(this).closest(".radio-tab-trigger").attr("data-radiotab");
|
||||
var radioTab = $("#" + radioTabId);
|
||||
radioTab.children().hide();
|
||||
// var index = $(this).closest(".custom-radio").index();
|
||||
var index = $(this)
|
||||
.closest(".radio-tab-trigger")
|
||||
.find(".custom-radio")
|
||||
.index($(this).closest(".custom-radio"));
|
||||
|
||||
console.log(index);
|
||||
radioTab.children().eq(index).show();
|
||||
});
|
||||
Reference in New Issue
Block a user