pm
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>tool</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="all"> <div id="left-side" class="left-area"> <div id="left-side-top" class="left-area-top"> <textarea class="codeview" id="codeview" spellcheck="false" readonly=""> </textarea> </div> <div id="left-side-bottom" class="left-area-bottom"> <div id="draggable" class="fixed"> <div class="device_area"> <h1 class="tit">#이미지좌표생성</h1> <!-- 섹션입력 --> <div class="section"> <label for="section-num">섹션번호</label> <input id="section-num" type="text" class="inp-section"> </div> <div> <!-- 쿠폰, 링크 선택 --> <span class="device"> <input type="radio" id="coupon" name="device" value="c" class="blind"> <label for="coupon">쿠폰</label> </span> <span class="device"> <input type="radio" id="link" name="device" value="l" class="blind"> <label for="link">링크</label> </span> </div> <div> <!-- 실행취소 --> <button type="button" class="btn btn_linkCancel">링크 한단계전으로</button> <button type="button" class="btn btn_couponCancel">쿠폰 한단계전으로</button> </div> <div> <!-- 에러삭제 --> <button type="button" class="btn btn_error">에러삭제</button> <!-- 새로고침 --> <button type="button" class="btn delete-image">이미지삭제</button> </div> </div> <!-- 좌표값 영역 --> <div class="image-size"> 이미지 원본 너비 : <input type="text" class="image-width" readonly> <br> 이미지 원본 높이 : <input type="text" class="image-height" readonly> </div> <div class="result_area"> <ul class="result result_lst_coupon"></ul> <ul class="result result_lst_link"></ul> </div> </div> <!-- 이미지 영역 --> <div class="img_area"> <div class="current_area"> <span class="current_coord">X: <span class="pos_x"></span> / Y: <span class="pos_y"></span></span> <span class="line line_x"></span> <span class="line line_y"></span> </div> <div class="img_box"> </div> <div class="img_coupon"> </div> <div class="img_link"> </div> </div> </div> </div> <button type="button" id="btn-coordinate" class="btn-area btn-control2">↔</button> <div id="right-side" class="right-area"> <div class="wrap"> <div class="wrap_left"> <div class="option"> <h2 class="in">프로모션 이름 m</h2> <input type="text" id="promotion_name" placeholder=""> <label for="boolean_db" class="checkbox_wrap"> <input type="checkbox" id="boolean_db"> <span>DB연동</span> </label> <p>*adn 의 경우<br>_ad 혹은 _adn 까지 기입해주세요</p> </div> <div class="option"> <h2 class="in">섹션수</h2> <input type="number" id="sectionNum" min="1"> <p>*템플릿, db연동 섹션은 갯수에서 제외 입니다.</p> </div> <div class="option"> <h2>프로모션 유형</h2> <input type="radio" name="promotionType" id="promotionType1" value="0"> <label for="promotionType1">일반 프로모션</label> <input type="radio" name="promotionType" id="promotionType2" value="1"> <label for="promotionType2">ADN</label> </div> <div class="option couponType"> <h2>쿠폰유형</h2> <input type="radio" name="couponType" id="couponType1" value="0"> <label for="couponType1">쿠폰없음</label> <input type="radio" name="couponType" id="couponType2" value="1"> <label for="couponType2">일반</label> <input type="radio" name="couponType" id="couponType3" value="2"> <label for="couponType3">선착순</label> <input type="radio" name="couponType" id="couponType4" value="3"> <label for="couponType4">일선착순</label> </div> <div class="option"> <h2>템플릿가이드</h2> <input type="radio" name="templateType" id="templateType1" value="0"> <label for="templateType1">템플릿 사용안함</label> <input type="radio" name="templateType" id="templateType2" value="1"> <label for="templateType2">온라인</label> <input type="radio" name="templateType" id="templateType3" value="2"> <label for="templateType3">오프라인</label> </div> <div class="option online" style="display: none;"> <h2>가이드 세부유형(온라인)</h2> <input type="radio" name="templateOnline" id="templateOnline1" value="0"> <label for="templateOnline1">A-1</label> <input type="radio" name="templateOnline" id="templateOnline2" value="1"> <label for="templateOnline2">A-2</label> <input type="radio" name="templateOnline" id="templateOnline3" value="2"> <label for="templateOnline3">A-3</label> <input type="radio" name="templateOnline" id="templateOnline4" value="3"> <label for="templateOnline4">A-4</label> <input type="radio" name="templateOnline" id="templateOnline5" value="4"> <label for="templateOnline5">A-5</label> <div class="template_brand" style="display: none;"> <input type="text" id="templateBrand"> <label for="templateBrand">브랜드명</label> </div> </div> <div class="option offline" style="display: none;"> <h2>가이드 세부유형(오프라인)</h2> <input type="radio" name="templateOffline" id="templateOffline1" value="0"> <label for="templateOffline1">B-1</label> <input type="radio" name="templateOffline" id="templateOffline2" value="1"> <label for="templateOffline2">B-2</label> <input type="radio" name="templateOffline" id="templateOffline3" value="2"> <label for="templateOffline3">B-3</label> <input type="radio" name="templateOffline" id="templateOffline4" value="3"> <label for="templateOffline4">B-4</label> <input type="radio" name="templateOffline" id="templateOffline5" value="4"> <label for="templateOffline5">B-5</label> <br> <input type="radio" name="templateOffline" id="templateOffline6" value="5"> <label for="templateOffline6">B-6</label> <input type="radio" name="templateOffline" id="templateOffline7" value="6"> <label for="templateOffline7">B-7</label> <input type="radio" name="templateOffline" id="templateOffline8" value="7"> <label for="templateOffline8">B-8</label> <input type="radio" name="templateOffline" id="templateOffline9" value="8"> <label for="templateOffline9">B-9</label> <input type="radio" name="templateOffline" id="templateOffline10" value="9"> <label for="templateOffline10">B-10</label> </div> <div class="option preview" style="display: none"> <div class="sec sec_guide"> <div class="tit_wrap"> <h3 class="tit">이용방법</h3> </div> <ol class="lst_guide"> <li>1. ---------</li> <li>2. ---------</li> <li>3. ---------</li> </ol> </div> </div> <div class="option button" style="display: none;"> <h2>버튼 세부 유형</h2> <input type="checkbox" name="templateBtn" id="templateBtn1" value="0"> <label for="templateBtn1">받은 쿠폰 확인하기</label><br> <input type="checkbox" name="templateBtn" id="templateBtn2" value="1"> <label for="templateBtn2">가까운 매장찾기</label><br> <div class="template_button_store"> <label for="templateBtnStore">매장찾기 url</label> <input type="text" id="templateBtnStore"> </div> <input type="checkbox" name="templateBtn" id="templateBtn3" value="2"> <label for="templateBtn3">제휴사 바로가기</label><br> <div class="template_button_setting"> <label for="templateBtnClient">링크 텍스트</label> <input type="text" id="templateBtnClient"><br> <label for="templateBtnColor">버튼색 #</label> <input type="text" id="templateBtnColor" placeholder="미입력시 .btn 기본값"><br> <label for="templateBtnUrl">링크 url</label> <input type="text" id="templateBtnUrl"><br> </div> <input type="checkbox" name="templateBtn" id="templateBtn4" value="3"> <label for="templateBtn4">오프라인결제(QR)</label><br> <input type="checkbox" name="templateBtn" id="templateBtn5" value="4"> <label for="templateBtn5">오프라인결제(바코드)</label> </div> <div class="option db" style="display: none;"> <h2>DB연동 설정</h2> <label for="dbAlert" class="input_txt_wrap"> <span>상단 안내문구(br포함)</span> <input type="text" id="dbAlert" style="width: 100%;" disabled> </label> <label for="advCode" class="input_txt_wrap"> <span>ADV코드</span> <input type="text" id="advCode" disabled> </label> <div> <label for="dbRecent"> <input type="checkbox" id="dbRecent" name="dbFilter" disabled> <span>최신순</span> </label> <label for="dbPopular"> <input type="checkbox" id="dbPopular" name="dbFilter" disabled> <span>인기순</span> </label> <label for="dbNormal"> <input type="checkbox" id="dbNormal" name="dbFilter" disabled> <span>일반순</span> </label> </div> <div> <input type="radio" id="fixedRate" name="fixedType" value="0" disabled> <label for="fixedRate">정률할인</label> <input type="radio" id="fixedPrice" name="fixedType" value="1" disabled> <label for="fixedPrice">정액할인</label> </div> </div> <div class="option db_rate" style="display: none;"> <h2>정률할인 설정</h2> <label for="dbRate" class="input_txt_wrap"> <span>rate=</span> <input type="number" id="dbRate"> </label> <label for="dbMax" class="input_txt_wrap"> <span>max=</span> <input type="number" id="dbMax"> </label> </div> <div class="option db_price" style="display: none;"> <h2>정액할인 설정</h2> <label for="dbSetting" class="input_txt_wrap"> <span>설정값</span> <input type="text" id="dbSetting"> </label> </div> <div class="button_wrap"> <button type="button" id="generate" class="generate">html생성</button> <button type="button" id="generate_min" class="generate">min생성</button> <br> <button type="button" class="download" id="htmlDown">html 다운로드</button> <button type="button" class="download" id="minDown">min 다운로드</button> </div> </div> <div class="wrap_right"> </div> </div> </div> </div> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/area-control.js"></script> <script src="js/image-coordinate.js"></script> <script src="js/main.js"></script> </body> </html>(function (win, $) { var coordGenerator = { init: function () { this.setElements(); this.initLayout(); this.bindEvents(); }, setElements: function () { this.deviceArea = $('.device_area'); this.deleteImage = $('.delete-image'); this.btnLinkCancel = this.deviceArea.find('.btn_linkCancel'); this.btnCouponCancel = this.deviceArea.find('.btn_couponCancel'); this.btnError = this.deviceArea.find('.btn_error'); this.inputSectionNum = $('#section-num'); this.inputCoupon = $('#coupon'); this.inputLink = $('#link'); this.imgArea = $('.img_area'); this.imgSize = $('.image-size'); this.imgSizeWidth = this.imgSize.find('.image-width'); this.imgSizeHeight = this.imgSize.find('.image-height'); this.currentArea = this.imgArea.find('.current_area'); this.imgBox = this.imgArea.find('.img_box'); this.imgBoxCoupon = this.imgArea.find('.img_coupon'); this.imgBoxLink = this.imgArea.find('.img_link'); this.currentCoord = this.currentArea.find('.current_coord'); this.currentX = this.currentCoord.find('.pos_x'); this.currentY = this.currentCoord.find('.pos_y'); this.lineX = this.currentArea.find('.line_x'); this.lineY = this.currentArea.find('.line_y'); this.resultListCoupon = $('.result_lst_coupon'); this.resultListLink = $('.result_lst_link'); this.couponCnt = 0; this.linkCnt = 0; this.coordUnit = 'px'; }, initLayout: function () { this.currentArea.hide(); }, bindEvents: function () { this.imgArea.on('dragover dragenter dragleave drop', $.proxy(this.onDragEvents, this)); this.deleteImage.on('click', $.proxy(this.removeImage, this)); this.btnError.on('click', $.proxy(this.errorClickCancel, this)); this.btnLinkCancel.on('click', $.proxy(this.clickLinkCancel, this)); this.btnCouponCancel.on('click', $.proxy(this.clickCouponCancel, this)); }, onDragEvents: function (e) { if (e.type === 'dragover' || e.type == 'dragenter') { this.imgArea.addClass('is_active'); return false; } else if (e.type === 'dragleave') { this.imgArea.removeClass('is_active'); } else if (e.type === 'drop') { if (this.inputSectionNum.val() === '') { e.preventDefault(); this.imgArea.removeClass('is_active'); alert('섹션번호를 입력해주세요'); } else { this.onDragleaveFunc(e); alert('오른쪽 영역 해당 섹션에 쿠폰개수와 링크개수가 입력되어있는지 확인해주세요 \n 영역 드래그 하시기 전에 그 부분을 입력해주셔야됩니다.'); } } }, onDragleaveFunc: function (e) { var reader = new FileReader(); this.file = e.originalEvent.dataTransfer.files[0]; reader.readAsDataURL(this.file); reader.onload = $.proxy(this.createImage, this); e.preventDefault(); }, createImage: function (e) { if (!this.file.type.match('image.*')) { alert('이미지 형식의 파일만 열어주세요.'); } else { if (!this.img) { var newImg = new Image(); newImg.src = e.target.result; this.img = this.imgBox.html(newImg).find('img'); this.img.on('load', $.proxy(this.onLoadImage, this)); } } }, onLoadImage: function () { this.imgSizeWidth.val(this.img.width() + "px"); this.imgSizeHeight.val(this.img.height() + "px"); $('#secHeight' + this.inputSectionNum.val()).val(this.img.height()); this.imgArea.on('mousemove mouseenter mouseleave mousedown mouseup', $.proxy(this.coordEvents, this)); }, removeImage: function () { if (this.img !== undefined) { this.imgArea.removeClass('is_active'); this.imgBoxLink.children('.drag_area').remove(); this.imgBoxCoupon.children('.drag_area').remove(); this.resultListCoupon.children().remove(); this.resultListLink.children().remove(); this.img.remove(); this.file = undefined; this.img = undefined; this.couponCnt = 0; this.linkCnt = 0; this.imgSizeWidth.val(null); this.imgSizeHeight.val(null); this.inputSectionNum.val(null); this.imgArea.off('mousemove mouseenter mouseleave mousedown mouseup'); } }, coordEvents: function (e) { if (e.type === 'mousemove' || e.type === 'mouseenter') { this.showCurrentCoord(e); } else if (e.type === 'mouseleave') { this.currentArea.hide(); } else if (e.type === 'mousedown') { this.initDragArea(e); } else if (e.type === 'mouseup') { this.drawSelectArea(e); } }, showCurrentCoord: function (e) { this.imgOffsetX = this.img.offset().left.toFixed(0); this.imgOffsetY = this.img.offset().top.toFixed(0); var pageX = e.pageX - this.imgOffsetX, pageY = e.pageY - this.imgOffsetY; this.currentArea.show(); this.currentX.html(pageX + this.coordUnit); this.currentY.html(pageY + this.coordUnit); this.lineX.css('left', pageX); this.lineY.css('top', pageY); }, initDragArea: function (e) { if (e.which === 1) { this.isDragged = false; this.imgOffsetX = this.img.offset().left.toFixed(0); this.imgOffsetY = this.img.offset().top.toFixed(0); this.startX = e.pageX - this.imgOffsetX; this.startY = e.pageY - this.imgOffsetY; var dragArea = $('<div class="drag_area"></div>'); if (this.inputCoupon.prop('checked') === true) { this.imgBoxCoupon.prepend(dragArea); this.dragArea = this.imgBoxCoupon.children('.drag_area').first(); } else if (this.inputLink.prop('checked') === true) { this.imgBoxLink.prepend(dragArea); this.dragArea = this.imgBoxLink.children('.drag_area').first(); } this.imgArea.on('mousemove', $.proxy(this.drawDragging, this)); } }, drawDragging: function (e) { this.isDragged = true; this.imgOffsetX = this.img.offset().left.toFixed(0); this.imgOffsetY = this.img.offset().top.toFixed(0); this.dragX = e.pageX - this.imgOffsetX; this.dragY = e.pageY - this.imgOffsetY; this.selWidth = Math.abs(this.dragX - this.startX); this.selHeight = Math.abs(this.dragY - this.startY); this.endX = (this.dragX < this.startX) ? (this.startX - this.selWidth) : this.startX; this.endY = (this.dragY < this.startY) ? (this.startY - this.selHeight) : this.startY; this.dragArea.css({ 'width': this.selWidth, 'height': this.selHeight, 'top': this.endY, 'left': this.endX }); }, drawSelectArea: function (e) { if (e.which === 1) { if (!this.isDragged) { this.dragArea.remove(); } else { if (this.inputCoupon.prop('checked') === true) { var i = ++this.couponCnt; this.dragArea.css({ 'background': 'rgba(0,0,0,0.4)', 'line-height': this.selHeight + 'px' }).html('쿠폰' + i); this.dragArea.attr('data-num', this.couponCnt); this.imgArea.off('mousemove', this.drawDragging); this.addCoordResult(); } else if (this.inputLink.prop('checked') === true) { var i = ++this.linkCnt; this.dragArea.css({ 'background': 'rgba(0,0,0,0.4)', 'line-height': this.selHeight + 'px' }).html('링크' + i); this.dragArea.attr('data-num', this.linkCnt); this.imgArea.off('mousemove', this.drawDragging); this.addCoordResult(); } } } }, clickCouponCancel: function () { for (var i = 0; i < $('.drag_area').length; i++) { if ($('.drag_area').eq(i).attr('data-num') === undefined) { $('.drag_area').eq(i).remove(); } } if (this.dragArea && this.couponCnt) { this.imgBoxCoupon.find('.drag_area').eq(0).remove(); this.resultListCoupon.children('li').last().remove(); this.couponCnt--; if (this.couponCnt < 0) { this.couponCnt = 0; } } }, clickLinkCancel: function () { for (var i = 0; i < $('.drag_area').length; i++) { if ($('.drag_area').eq(i).attr('data-num') === undefined) { $('.drag_area').eq(i).remove(); } } if (this.dragArea && this.linkCnt) { this.imgBoxLink.find('.drag_area').eq(0).remove(); this.resultListLink.children('li').last().remove(); this.linkCnt--; if (this.linkCnt < 0) { this.linkCnt = 0; } } }, errorClickCancel: function () { for (var i = 0; i < $('.drag_area').length; i++) { if ($('.drag_area').eq(i).attr('data-num') === undefined) { $('.drag_area').eq(i).remove(); } } }, addCoordResult: function () { var resultStr; if (this.inputCoupon.prop('checked') === true) { resultStr = '<li><span class="num">쿠폰' + this.couponCnt + '</span>' + '<input type="text" class="inp-coordi" data-num="' + this.selCnt + '" value="' + 'top:' + this.endY + this.coordUnit + ';' + 'left:' + this.endX + this.coordUnit + ';' + 'width:' + this.selWidth + this.coordUnit + ';' + 'height:' + this.selHeight + this.coordUnit + ';">'; $('#couponTop_' + this.inputSectionNum.val() + '_' + this.couponCnt).val(this.endY); $('#couponLeft_' + this.inputSectionNum.val() + '_' + this.couponCnt).val(this.endX); $('#couponWidth_' + this.inputSectionNum.val() + '_' + this.couponCnt).val(this.selWidth); $('#couponHeight_' + this.inputSectionNum.val() + '_' + this.couponCnt).val(this.selHeight); this.resultListCoupon.append(resultStr); } else if (this.inputLink.prop('checked') === true) { resultStr = '<li><span class="num">링크' + this.linkCnt + '</span>' + '<input type="text" class="inp-coordi" data-num="' + this.selCnt + '" value="' + 'top:' + this.endY + this.coordUnit + ';' + 'left:' + this.endX + this.coordUnit + ';' + 'width:' + this.selWidth + this.coordUnit + ';' + 'height:' + this.selHeight + this.coordUnit + ';">'; $('#lnkTop_' + this.inputSectionNum.val() + '_' + this.linkCnt).val(this.endY); $('#lnkLeft_' + this.inputSectionNum.val() + '_' + this.linkCnt).val(this.endX); $('#lnkWidth_' + this.inputSectionNum.val() + '_' + this.linkCnt).val(this.selWidth); $('#lnkHeight_' + this.inputSectionNum.val() + '_' + this.linkCnt).val(this.selHeight); this.resultListLink.append(resultStr); } } }; coordGenerator.init(); })(window, window.jQuery);document.addEventListener('DOMContentLoaded', function () { dragElement(document.getElementById("btn-coordinate"), null, document.getElementById("left-side"), document.getElementById("right-side"), document.getElementById("left-side-top"), document.getElementById("left-side-bottom")); dragElement(null, document.getElementById("draggable"), null, null, null, null); function dragElement(elmnt, elmnt2, leftSide1, leftSide2, topSide1, topSide2) { var pos3 = 0, pos4 = 0, pos5 = 0, pos6 = 0; if (elmnt !== null) { elmnt.onmousedown = dragMouseDown; } else if (elmnt2 !== null) { elmnt2.onmousedown = dragMouseDown; } function dragMouseDown(e) { if (e.target.className !== 'inp-coordi' && e.target.className !== 'image-width' && e.target.className !== 'image-height' && e.target.className !== 'inp-section' && e.target.className !== 'btn btn_error' && e.target.className !== 'btn btn_linkCancel' && e.target.className !== 'btn btn_couponCancel' && e.target.className !== 'btn delete-image') { e = e || window.event; e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } } function elementDrag(e) { var windowWidth = window.innerWidth, windowHeight = window.innerHeight; e = e || window.event; e.preventDefault(); pos5 = pos3 - e.clientX; pos6 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; if (elmnt !== null) { elmnt.style.left = pos3 * 100 / windowWidth < 10 ? 10 + "%" : pos3 * 100 / windowWidth > 90 ? 90 + "%" : pos3 * 100 / windowWidth + "%"; elmnt.style.top = pos4 * 100 / windowHeight < 10 ? 10 + "%" : pos4 * 100 / windowHeight > 90 ? 90 + "%" : pos4 * 100 / windowHeight + "%"; leftSide1.style.width = pos3 * 100 / windowWidth + "%"; leftSide2.style.width = (windowWidth - pos3) * 100 / windowWidth + "%"; topSide1.style.height = pos4 * 100 / windowHeight + "%"; topSide2.style.height = (windowHeight - pos4) * 100 / windowHeight + "%"; } else if (elmnt2 !== null) { elmnt2.style.left = (elmnt2.offsetLeft - pos5) * 100 / windowWidth + "%"; elmnt2.style.top = (elmnt2.offsetTop - pos6) * 100 / windowHeight + "%"; } } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } } })