80 lines
12 KiB
Plaintext
80 lines
12 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
|
|
<style>
|
|
.badge-preview { display: inline-block; min-width: 70px; padding: 4px 8px; border: 1px solid; border-radius: 3px; text-align: center; }
|
|
.color-field { display: flex; align-items: center; gap: 6px; position: relative; }
|
|
.color-palette-toggle { width: 32px; min-width: 32px; height: 32px; padding: 3px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
|
|
.color-swatch { display: block; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .15); }
|
|
.color-palette { display: none; position: absolute; z-index: 10; top: 36px; left: 0; width: 260px; padding: 8px; background: #fff; border: 1px solid #aaa; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); grid-template-columns: repeat(12, 1fr); gap: 4px; }
|
|
.color-palette.is-open { display: grid; }
|
|
.color-choice { width: 16px; height: 16px; padding: 0; border: 1px solid rgba(0, 0, 0, .18); cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
|
|
<main class="main">
|
|
<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
|
|
<div class="content"><div class="content__inner">
|
|
<button class="side-nav__fold"><span class="visually-hidden">좌측메뉴 펼치기/닫기</span></button>
|
|
<div class="page-title">
|
|
<h2 class="page-title__title">상품배지설정관리</h2>
|
|
<div class="page-title__btn-container"><button type="button" class="btn primary" onclick="fn_save_badges()">저장하기</button></div>
|
|
</div>
|
|
<form id="badgeForm">
|
|
<section class="content-section">
|
|
<div class="form-control-container mb-8"><div class="left"><h3 class="content-section__inner-title">상품 배지</h3></div><div class="center"></div><div class="right"><button type="button" class="btn primary outline xsm" onclick="fn_add_badge()">추가</button><button type="button" class="btn dark xsm" onclick="fn_remove_badge()">선택 행 제거</button></div></div>
|
|
<div class="table-wrapper"><table class="table vertical"><caption>상품 배지 설정</caption><thead><tr><th><label class="b-checkbox checkbox is-medium check-all"><input type="checkbox" id="badgeAll"><span class="check"></span></label></th><th>배지코드</th><th>배지명</th><th>글자색</th><th>배경색</th><th>테두리색</th><th>노출순서</th><th>사용여부</th><th>미리보기</th></tr></thead>
|
|
<tbody id="badgeBody">
|
|
<c:forEach var="badge" items="${resultMap.badgeList}">
|
|
<tr data-new-at="N"><td><label class="b-checkbox checkbox is-medium"><input type="checkbox" name="badgeChk"><span class="check"></span></label></td><td><input type="text" class="input-text xl badge-cd" name="badgeCdArr" value="<c:out value='${badge.badgeCd}'/>" readonly><input type="hidden" name="originalBadgeCdArr" value="<c:out value='${badge.badgeCd}'/>"></td><td><input type="text" class="input-text xl badge-nm" name="badgeNmArr" value="<c:out value='${badge.badgeNm}'/>"></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="글자색 선택"><span class="color-swatch" style="background-color:<c:out value='${badge.fontColor}'/>"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="fontColorArr" maxlength="7" value="<c:out value='${badge.fontColor}'/>"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="배경색 선택"><span class="color-swatch" style="background-color:<c:out value='${badge.bgColor}'/>"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="bgColorArr" maxlength="7" value="<c:out value='${badge.bgColor}'/>"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="테두리색 선택"><span class="color-swatch" style="background-color:<c:out value='${badge.borderColor}'/>"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="borderColorArr" maxlength="7" value="<c:out value='${badge.borderColor}'/>"></div></td><td><input type="text" class="input-text xl sort-ordr" name="sortOrdrArr" value="<c:out value='${badge.sortOrdr}'/>"></td><td><select class="select" name="useAtArr"><option value="Y" ${badge.useAt eq 'Y' ? 'selected' : ''}>사용</option><option value="N" ${badge.useAt eq 'N' ? 'selected' : ''}>미사용</option></select><input type="hidden" name="newAtArr" value="N"></td><td><span class="badge-preview"></span></td></tr>
|
|
</c:forEach>
|
|
<tr id="noData" ${not empty resultMap.badgeList ? 'style="display:none"' : ''}><td class="row-no-data" colspan="9">등록된 배지가 없습니다.</td></tr>
|
|
</tbody></table></div>
|
|
</section>
|
|
</form>
|
|
</div></div>
|
|
</main>
|
|
<script>
|
|
function fn_add_badge() {
|
|
$('#noData').hide();
|
|
$('#badgeBody').append('<tr data-new-at="Y"><td><label class="b-checkbox checkbox is-medium"><input type="checkbox" name="badgeChk"><span class="check"></span></label></td><td><input type="text" class="input-text xl badge-cd" name="badgeCdArr" maxlength="30"><input type="hidden" name="originalBadgeCdArr" value=""></td><td><input type="text" class="input-text xl badge-nm" name="badgeNmArr" maxlength="100"></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="글자색 선택"><span class="color-swatch" style="background-color:#000000"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="fontColorArr" maxlength="7" value="#000000"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="배경색 선택"><span class="color-swatch" style="background-color:#FFFFFF"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="bgColorArr" maxlength="7" value="#FFFFFF"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="테두리색 선택"><span class="color-swatch" style="background-color:#000000"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="borderColorArr" maxlength="7" value="#000000"></div></td><td><input type="text" class="input-text xl sort-ordr" name="sortOrdrArr" value="0" maxlength="5"></td><td><select class="select" name="useAtArr"><option value="Y">사용</option><option value="N">미사용</option></select><input type="hidden" name="newAtArr" value="Y"></td><td><span class="badge-preview"></span></td></tr>');
|
|
fn_init_color_palettes();
|
|
fn_render_preview();
|
|
}
|
|
function fn_remove_badge() {
|
|
const selected = $('[name=badgeChk]:checked');
|
|
if (!selected.length) { alert('항목을 선택해 주세요.'); return; }
|
|
selected.each(function () { const row = $(this).closest('tr'); if (row.data('new-at') === 'Y') { row.remove(); } else { alert('기존 배지는 삭제할 수 없습니다. 사용여부를 미사용으로 변경해 주세요.'); } });
|
|
$('#badgeAll').prop('checked', false);
|
|
if ($('#badgeBody tr:not(#noData)').length === 0) { $('#noData').show(); }
|
|
}
|
|
function fn_render_preview() {
|
|
$('#badgeBody tr:not(#noData)').each(function () { const row = $(this); row.find('.badge-preview').text(row.find('.badge-nm').val() || '배지명').css({color: row.find('[name=fontColorArr]').val(), backgroundColor: row.find('[name=bgColorArr]').val(), borderColor: row.find('[name=borderColorArr]').val()}); });
|
|
}
|
|
function fn_normalize_colors() {
|
|
$('#badgeBody tr:not(#noData)').each(function () { const row = $(this); row.find('.color-input').each(function () { const input = $(this); if (!/^#[0-9A-Fa-f]{6}$/.test(input.val().trim())) { input.val(input.attr('name') === 'borderColorArr' ? (row.find('[name=bgColorArr]').val() || '#000000') : '#000000'); } }); });
|
|
}
|
|
function fn_validate_badges() {
|
|
let valid = true; const colorPattern = /^#[0-9A-Fa-f]{6}$/; const codePattern = /^[A-Za-z0-9_-]+$/; const codes = {};
|
|
$('#badgeBody tr:not(#noData)').each(function () { const row = $(this); const code = row.find('.badge-cd').val().trim(); const isNew = row.data('new-at') === 'Y'; if ((!code || (isNew && !codePattern.test(code))) || !row.find('.badge-nm').val().trim() || !colorPattern.test(row.find('[name=fontColorArr]').val().trim()) || !colorPattern.test(row.find('[name=bgColorArr]').val().trim()) || !colorPattern.test(row.find('[name=borderColorArr]').val().trim()) || !/^\d+$/.test(row.find('.sort-ordr').val().trim())) { valid = false; return false; } if (isNew && codes[code]) { valid = false; return false; } if (isNew) { codes[code] = true; } });
|
|
if (!valid) { alert('배지코드, 배지명, 색상(#RRGGBB), 노출순서를 확인해 주세요.'); } return valid;
|
|
}
|
|
function fn_save_badges() { if (!fn_validate_badges() || !confirm('상품 배지 설정을 저장하시겠습니까?')) { return; } $.ajax({ type: 'post', url: '<c:url value="/mngr/goods/badge/updateGoodsBadgeSetup"/>', data: $('#badgeForm').serialize(), success: function () { alert('저장되었습니다.'); location.reload(); } }); }
|
|
function fn_hsl_to_hex(h, s, l) { s /= 100; l /= 100; const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs((h / 60) % 2 - 1)); const m = l - c / 2; let r = 0, g = 0, b = 0; if (h < 60) { r = c; g = x; } else if (h < 120) { r = x; g = c; } else if (h < 180) { g = c; b = x; } else if (h < 240) { g = x; b = c; } else if (h < 300) { r = x; b = c; } else { r = c; b = x; } return '#' + [r, g, b].map(function (v) { return Math.round((v + m) * 255).toString(16).padStart(2, '0'); }).join('').toUpperCase(); }
|
|
const paletteColors = (function () { const colors = ['#000000','#202020','#404040','#606060','#808080','#A0A0A0','#C0C0C0','#D9D9D9','#EFEFEF','#FFFFFF']; const lightnesses = [92, 82, 72, 62, 52, 42, 32, 22]; for (let lightnessIndex = 0; lightnessIndex < lightnesses.length; lightnessIndex++) { for (let hue = 0; hue < 360; hue += 30) { colors.push(fn_hsl_to_hex(hue, 78, lightnesses[lightnessIndex])); } } return colors; })();
|
|
function fn_init_color_palettes() { $('.color-palette').each(function () { const palette = $(this); if (palette.children().length) { return; } $.each(paletteColors, function (_, color) { palette.append('<button type="button" class="color-choice" data-color="' + color + '" title="' + color + '" style="background-color:' + color + '"></button>'); }); }); }
|
|
$(document).on('input change', '.badge-nm, .color-input', function () { const input = $(this); if (input.hasClass('color-input') && /^#[0-9A-Fa-f]{6}$/.test(input.val())) { input.siblings('.color-palette-toggle').find('.color-swatch').css('background-color', input.val()); } fn_render_preview(); });
|
|
$(document).on('click', '.color-palette-toggle', function (e) { e.stopPropagation(); $('.color-palette').not($(this).siblings('.color-palette')).removeClass('is-open'); $(this).siblings('.color-palette').toggleClass('is-open'); });
|
|
$(document).on('click', '.color-choice', function () { const field = $(this).closest('.color-field'); field.find('.color-input').val($(this).data('color')).trigger('change'); field.find('.color-palette').removeClass('is-open'); });
|
|
$(document).on('click', function () { $('.color-palette').removeClass('is-open'); });
|
|
$('#badgeAll').on('change', function () { $('[name=badgeChk]').prop('checked', this.checked); });
|
|
$(function () { fn_init_color_palettes(); fn_normalize_colors(); $('.color-input').trigger('change'); fn_render_preview(); });
|
|
</script>
|
|
</body>
|
|
</html>
|