common_m.js 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942
  1. /* * * * * * * * * * * * * * * * * * * * * * *
  2. 1. Init (초기설정)
  3. * * * * * * * * * * * * * * * * * * * * * */
  4. window.addEventListener('load', function(){
  5. setTimeout(scrollTo, 0, 0, 1);
  6. }, false);
  7. $(document).ready(function() {
  8. // 웹페이지가 브라우징된 후 주소창 제거
  9. window.addEventListener("load", function () {
  10. setTimeout(scrollTo, 0, 0, 1);
  11. }, false);
  12. // history back
  13. $(".btn_back").on("click", function () {
  14. history.back()
  15. });
  16. // goTop, header (스크롤 인식)
  17. $(".btn_top").click(function () {
  18. $("html, body").animate({
  19. "scrollTop": 0
  20. }, 50);
  21. });
  22. var lastScrollTop = 0;
  23. $(window).on('mousewheel',function(e){
  24. if($('body').hasClass('gnb_on') === false && $('main').hasClass('pd') === false){
  25. var wheel = e.originalEvent.wheelDelta;
  26. if(wheel>0){
  27. //스크롤 올릴때
  28. $(".tabbar").addClass('fixed');
  29. $(".gnb").addClass('fixed');
  30. $(".pnb_mo").addClass('fixed');
  31. $("header").css("display", "block");
  32. $("header").css("position", "fixed");
  33. if($(".gnb").hasClass("fixed")){
  34. $("header").css("display", "none");
  35. }
  36. if($(".pnb_mo").hasClass("fixed")){
  37. $("header").css("display", "none");
  38. }
  39. if($(window).scrollTop() < 10){
  40. $(".gnb").css('position', 'relative');
  41. $(".pnb_mo").css('position', 'relative');
  42. $("header").css("position", "relative");
  43. $("header").css("display", "block");
  44. } else {
  45. $(".gnb").css('position', 'fixed');
  46. $(".pnb_mo").css('position', 'fixed');
  47. }
  48. } else {
  49. //스크롤 내릴때
  50. $(".tabbar").removeClass('fixed');
  51. $(".pnb_mo").addClass('fixed');
  52. $(".pnb_mo").css('position', 'fixed');
  53. $(".gnb").addClass('fixed');
  54. $(".gnb").css('position', 'fixed');
  55. $("header").css("display", "none");
  56. }
  57. }
  58. });
  59. $(window).scroll(function (event) {
  60. // header height 가 아닌, 스크롤 감지로 변경할 것
  61. //if ($(window).scrollTop() > $("header").height()) {
  62. // $(".tabbar").removeClass('fixed');
  63. //} else {
  64. // $(".tabbar").addClass('fixed');
  65. //}
  66. if ($(window).scrollTop() > $("header").height()) {
  67. $(".btn_top").animate({
  68. "opacity": 1
  69. }, 50);
  70. if ( $(window).scrollTop() > ($("footer").position().top - $("footer").height() )) {
  71. $(".btn_top").css("bottom", ($("footer").height() + 20) + "px");
  72. } else {
  73. $(".btn_top").css("bottom", "60px");
  74. }
  75. } else {
  76. $(".btn_top").animate({
  77. "opacity": 0
  78. }, 50);
  79. }
  80. // 210409_스크롤시 헤더 백그라운드 흰색
  81. //var st = $(this).scrollTop();
  82. //if($('header').hasClass("main") !== true){
  83. // if (st > lastScrollTop){
  84. // $(".app .gnb").css("position", "fixed");
  85. // $(".htop").css("background", "#fff");
  86. // $(".app .gnb .btn-expand").css("position", "fixed");
  87. // $(".tabbar").removeClass("fixed");
  88. // } else {
  89. // $(".app .gnb").css("position", "fixed");
  90. // $(".htop").css("background", "#fff");
  91. // $(".app .gnb .btn-expand").css("position", "fixed");
  92. // $(".tabbar").addClass("fixed");
  93. // setTimeout(function(){
  94. // if($(window).scrollTop() === 0){
  95. // $(".app .gnb").css("position", "relative");
  96. // $(".app .gnb .btn-expand").css("position", "absolute");
  97. // }
  98. // },300)
  99. // }
  100. // if(st < 10) {
  101. // $(".htop").css("background", "transparent");
  102. // }
  103. // lastScrollTop = st;
  104. //}
  105. //var posiGap = $(window).scrollTop();
  106. //console.log(posiGap);
  107. });
  108. // items like on/off
  109. $(".itemLike").click(function () {
  110. $(this).toggleClass("likeit");
  111. });
  112. });
  113. /* * * * * * * * * * * * * * * * * * * * * * *
  114. 2. Utility (유틸리티)
  115. * * * * * * * * * * * * * * * * * * * * * */
  116. // FORM
  117. // input-File-Add
  118. $(document).ready(function() {
  119. if (window.File && window.FileList && window.FileReader) {
  120. $("#fileAdd").on("change", function(e) {
  121. var files = e.target.files,
  122. filesLength = files.length;
  123. for (var i = 0; i < filesLength; i++) {
  124. var f = files[i]
  125. var fileReader = new FileReader();
  126. fileReader.onload = (function(e) {
  127. var file = e.target;
  128. $("<span class=\"pics\">" +
  129. "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
  130. "<span class=\"removes\">Removes image</span>" +
  131. "</span>").insertBefore("#fileAdd");
  132. $(".removes").click(function(){
  133. $(this).parent(".pics").remove();
  134. });
  135. });
  136. fileReader.readAsDataURL(f);
  137. }
  138. });
  139. } else {
  140. alert("브라우저가 File API를 지원하지 않습니다.")
  141. }
  142. });
  143. // input-File-Adds
  144. $(document).ready(function() {
  145. if (window.File && window.FileList && window.FileReader) {
  146. $("#fileAdds").on("change", function(e) {
  147. var files = e.target.files,
  148. filesLength = files.length;
  149. for (var i = 0; i < filesLength; i++) {
  150. var f = files[i]
  151. var fileReader = new FileReader();
  152. fileReader.onload = (function(e) {
  153. var file = e.target;
  154. $("<span class=\"pics\">" +
  155. "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
  156. "<br/><span class=\"removes\">Removes image</span>" +
  157. "</span>").insertAfter("#fileAdds");
  158. $(".removes").click(function(){
  159. $(this).parent(".pics").remove();
  160. });
  161. });
  162. fileReader.readAsDataURL(f);
  163. }
  164. });
  165. } else {
  166. alert("브라우저가 File API를 지원하지 않습니다.")
  167. }
  168. });
  169. // check-All
  170. $( document ).ready(function() {
  171. var $chkAll = $('.check-all');
  172. $chkAll.change(function () {
  173. var checked = $(this).prop('checked');
  174. $('input[name="dd"]').prop('checked', checked);
  175. });
  176. var ddChk = $('input[name="dd"]');
  177. ddChk.change(function () {
  178. var ddChkLength = ddChk.length;
  179. var checkedLength = $('input[name="dd"]:checked').length;
  180. var selectAll = (ddChkLength == checkedLength);
  181. $chkAll.prop('checked', selectAll);
  182. });
  183. });
  184. // Select-Combo-Custom
  185. function sCombo(selector){
  186. this.$selectBox = null,
  187. this.$select = null,
  188. this.$list = null,
  189. this.$listLi = null;
  190. sCombo.prototype.init = function(selector){
  191. this.$selectBox = $(selector);
  192. this.$select = this.$selectBox.find('.combo .select');
  193. this.$list = this.$selectBox.find('.combo .list');
  194. this.$listLi = this.$list.children('li');
  195. }
  196. sCombo.prototype.initEvent = function(e){
  197. var that = this;
  198. this.$select.on('click', function(e){
  199. that.listOn();
  200. });
  201. this.$listLi.on('click', function(e){
  202. that.listSelect($(this));
  203. });
  204. $(document).on('click', function(e){
  205. that.listOff($(e.target));
  206. });
  207. }
  208. sCombo.prototype.listOn = function(){
  209. this.$selectBox.toggleClass('on');
  210. if(this.$selectBox.hasClass('on')){
  211. this.$list.css('display', 'block');
  212. }else{
  213. this.$list.css('display', 'none');
  214. };
  215. }
  216. sCombo.prototype.listSelect = function($target){
  217. $target.addClass('selected').siblings('li').removeClass('selected');
  218. this.$selectBox.removeClass('on');
  219. //this.$select.text($target.text());
  220. this.$select.html($target.html());
  221. this.$list.css('display', 'none');
  222. }
  223. sCombo.prototype.listOff = function($target){
  224. if(!$target.is(this.$select) && this.$selectBox.hasClass('on')){
  225. this.$selectBox.removeClass('on');
  226. this.$list.css('display', 'none');
  227. };
  228. }
  229. this.init(selector);
  230. this.initEvent();
  231. };
  232. // selectBrand on/off
  233. $( document ).ready( function() {
  234. $("#selectBrand .brandbox input").on("click", function() {
  235. $("#selectBrand .brandbox input").removeClass("on");
  236. $(this).addClass("on");
  237. });
  238. });
  239. /* alert */
  240. $(function(){
  241. $('.alertCls').click(function(){
  242. setTimeout(function(){
  243. $('.alert').css('animation', 'none');
  244. $('.alert').css('display', 'none');
  245. $('.once').css('display', 'none');
  246. }, 300);
  247. // uifn_currCallback();
  248. });
  249. });
  250. /* * * * * * * * * * * * * * * * * * * * * * *
  251. 2. Page Setting (페이지세팅)
  252. * * * * * * * * * * * * * * * * * * * * * */
  253. $(document).ready(function () {
  254. // GNB
  255. $(".btn_gnb").on("click", function () {
  256. $(this).toggleClass("on");
  257. $(".hmenu").toggleClass("on");
  258. $("body").toggleClass("gnb_on");
  259. });
  260. // GNB
  261. $(".btn_gnbs").on("click", function () {
  262. $(this).toggleClass("on");
  263. $(".hmenus").toggleClass("on");
  264. $("body").toggleClass("gnb_on");
  265. });
  266. $(".gnb .d1 > .folder > a").on("click", function () {
  267. var d2_H = $(this).siblings(".d2").children("li").length * 39;
  268. if ( $(this).parent().hasClass("on") ) {
  269. $(this).siblings(".d2").animate({
  270. "height": 0, "padding-top": 0, "padding-bottom": 0
  271. }, 500 , function() {
  272. $(this).siblings(".d2").hide();
  273. $(this).parent().removeClass("on");
  274. });
  275. } else {
  276. $(this).parent().addClass("on");
  277. $(this).siblings(".d2").show().animate({
  278. "height": d2_H+"px", "padding-top": "20px", "padding-bottom": "20px"
  279. }, 500);
  280. }
  281. });
  282. $(".gnb .d2 > .folder > a").on("click", function () {
  283. var d3_H = $(this).siblings(".d3").children("li").length * 36;
  284. if ( $(this).parent().hasClass("on") ) {
  285. $(this).siblings(".d3").animate({
  286. "height": 0, "padding-bottom": 0
  287. }, 500 , function() {
  288. $(this).siblings(".d3").hide();
  289. $(this).parent().removeClass("on");
  290. });
  291. } else {
  292. $(this).parent().addClass("on");
  293. $(this).siblings(".d3").show().animate({
  294. "height": d3_H+"px", "padding-bottom": "10px"
  295. }, 500);
  296. $(this).parent().parent(".d2").css({"height":"auto"})
  297. }
  298. });
  299. // CNB (Media)
  300. $(".cnb .btn_cnb").on("click", function () {
  301. var cate_H = $(this).siblings("ul").height()+70;
  302. if ( $(this).parent(".cnb").hasClass("on") ) {
  303. $(this).parent(".cnb").animate({
  304. "height": "50px"
  305. }, 500);
  306. $(this).parent().removeClass("on");
  307. } else {
  308. $(this).parent().addClass("on");
  309. $(this).parent(".cnb").animate({
  310. "height": cate_H+"px"
  311. }, 500);
  312. }
  313. });
  314. $(".cnb .list_cate button").on("click", function () {
  315. if ( $(this).hasClass("btn_all") ) {
  316. $(".list_cate button").removeClass("on");
  317. $(this).addClass("on");
  318. } else {
  319. $(".list_cate .btn_all").removeClass("on");
  320. $(this).toggleClass("on");
  321. }
  322. });
  323. // infos
  324. $(".btn_infos").click(function () {
  325. $(this).toggleClass("on");
  326. $(".infos").toggleClass("on");
  327. });
  328. // slide main
  329. var swiper_m1 = new Swiper(".m1 .slide", {
  330. loop: true,
  331. autoplay: {
  332. delay: 3500,
  333. disableOnInteraction: false,
  334. },
  335. pagination: {
  336. el: ".swiper-pagination-m1",
  337. clickable: true,
  338. renderBullet: function (index, className) {
  339. return '<i class="' + className + '"> 0' + (index + 1) + '</i>';
  340. },
  341. },
  342. /*
  343. navigation: {
  344. nextEl: ".swiper-button-next",
  345. prevEl: ".swiper-button-prev",
  346. },
  347. on: {
  348. slideChangeTransitionEnd: function() {
  349. var slideIndex = this.activeIndex;
  350. var slidesLen = this.slides.length - 2;
  351. var nextIndex, prevIndex;
  352. // console.log(slideIndex, slidesLen);
  353. if ( (slideIndex == 1) || (slideIndex == (slidesLen+1)) ) {
  354. nextIndex = 2;
  355. prevIndex = slidesLen;
  356. } else if (slideIndex == slidesLen) {
  357. nextIndex = 1;
  358. prevIndex = slidesLen-1;
  359. } else {
  360. nextIndex = slideIndex+1;
  361. prevIndex = slideIndex-1;
  362. }
  363. $(".swiper-button-next").css("background-image", "url('./images/bg_me1_0"+ nextIndex +".jpg')");
  364. $(".swiper-button-prev").css("background-image", "url('./images/bg_me1_0"+ prevIndex +".jpg')");
  365. }
  366. }
  367. */
  368. });
  369. $(".swiper-button-pause").click(function () {
  370. swiper_m1.autoplay.stop();
  371. $(this).hide();
  372. $(this).siblings(".swiper-button-play").show();
  373. });
  374. $(".swiper-button-play").click(function () {
  375. swiper_m1.autoplay.start();
  376. $(this).hide();
  377. $(this).siblings(".swiper-button-pause").show();
  378. });
  379. var swiper_m2 = new Swiper(".m2 .slide", {
  380. loop: false,
  381. slidesPerView: "auto",
  382. centeredSlides: true,
  383. spaceBetween: 20,
  384. });
  385. var swiper_m3Nav = new Swiper(".m3 .snb", {
  386. slidesPerView: 3,
  387. });
  388. var swiper_m3 = new Swiper(".m3 .slide", {
  389. loop: true,
  390. thumbs: {
  391. swiper: swiper_m3Nav,
  392. },
  393. });
  394. var swiper_m4 = new Swiper(".m4 .slide", {
  395. loop: false,
  396. slidesPerView: "auto",
  397. centeredSlides: true,
  398. spaceBetween: 20,
  399. pagination: {
  400. el: ".swiper-pagination-m4",
  401. type: "progressbar",
  402. },
  403. });
  404. // slide sub
  405. var swiper_lnbNav = new Swiper(".lnb", {
  406. slidesPerView: "auto",
  407. spaceBetween: 20,
  408. autoHeight: true,
  409. preventClicks: true,
  410. preventClicksPropagation: false,
  411. observer: true,
  412. observeParents: true
  413. });
  414. var $lnbItem = $('.lnb .swiper-wrapper .swiper-slide a');
  415. $lnbItem.click(function(){
  416. var target = $(this).parent();
  417. $lnbItem.parent().removeClass('on')
  418. target.addClass('on');
  419. muCenter(target);
  420. })
  421. function muCenter(target){
  422. var snbwrap = $('.lnb .swiper-wrapper');
  423. var targetPos = target.position();
  424. var box = $('.lnb');
  425. var boxHarf = box.width()/2;
  426. var pos;
  427. var listWidth=0;
  428. snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
  429. var selectTargetPos = targetPos.left + target.outerWidth()/2;
  430. if (selectTargetPos <= boxHarf) { // left
  431. pos = 0;
  432. }else if ((listWidth - selectTargetPos) <= boxHarf) { //right
  433. pos = listWidth-box.width();
  434. }else {
  435. pos = selectTargetPos - boxHarf;
  436. }
  437. setTimeout(function(){snbwrap.css({
  438. "transform": "translate3d("+ (pos*-2) +"px, 0, 0)",
  439. "transition-duration": "500ms"
  440. })}, 200);
  441. }
  442. var swiper_subTab = new Swiper(".slideWrap", {
  443. autoHeight: true,
  444. thumbs: {
  445. swiper: swiper_lnbNav,
  446. },
  447. });
  448. var swiper_me1 = new Swiper(".me1_pop .slide", {
  449. loop: false,
  450. slidesPerView: "auto",
  451. centeredSlides: true,
  452. spaceBetween: 20,
  453. pagination: {
  454. el: ".swiper-pagination-me1",
  455. type: "progressbar",
  456. },
  457. });
  458. var swiper_b1 = new Swiper(".b1 .slide", {
  459. loop: true,
  460. autoplay: {
  461. delay: 3500,
  462. disableOnInteraction: false,
  463. },
  464. pagination: {
  465. el: ".swiper-pagination-b1",
  466. type: 'fraction',
  467. },
  468. });
  469. $(".swiper-button-pause-b1").click(function () {
  470. swiper_b1.autoplay.stop();
  471. $(this).hide();
  472. $(this).siblings(".swiper-button-play-b1").show();
  473. });
  474. $(".swiper-button-play-b1").click(function () {
  475. swiper_b1.autoplay.start();
  476. $(this).hide();
  477. $(this).siblings(".swiper-button-pause-b1").show();
  478. });
  479. // toggleBox (윤리경영)
  480. $(".list_cate > li dl dt > button").on("click", function () {
  481. var li = $(this).parent().parent().parent("li").index();
  482. // var liPos = ($(this).parent().parent().parent().parent().position().top) + 110 + ($(this).parent().height() * li);
  483. if ($(this).parent().parent().parent("li").hasClass("on")) {
  484. $(this).parent().parent().parent("li").removeClass("on");
  485. $(this).parent().parent().parent().parent().siblings(".cate").children("li").eq(li).find("button").removeClass("on");
  486. } else {
  487. $(this).parent().parent().parent("li").siblings().removeClass("on");
  488. $(this).parent().parent().parent("li").addClass("on");
  489. $(this).parent().parent().parent().parent().siblings(".cate").children("li").find("button").removeClass("on");
  490. $(this).parent().parent().parent().parent().siblings(".cate").children("li").eq(li).find("button").addClass("on");
  491. // $("html, body").animate({
  492. // "scrollTop": liPos
  493. // }, 300);
  494. }
  495. });
  496. // $(".c5 .cate button").on("click", function () {
  497. // var li = $(this).parent("li").index();
  498. // var liPos = ($(this).parent().parent().siblings(".list_cate").position().top) + 110 + ($(this).parent().parent().siblings(".list_cate").find("dt").height() * li);
  499. // $(this).parent().siblings().find("button").removeClass("on");
  500. // $(this).addClass("on");
  501. // $(this).parent().parent().siblings(".list_cate").find("li").removeClass("on");
  502. // $(this).parent().parent().siblings(".list_cate").children("li").eq(li).addClass("on");
  503. // $("html, body").animate({
  504. // "scrollTop": liPos
  505. // }, 300);
  506. // });
  507. // media play
  508. $(".btn_play").on("click", function(e) {
  509. e.stopPropagation();
  510. });
  511. // pop open
  512. function popOpenScroll(){
  513. $('html, body').css({'overflow': 'hidden', 'height': '100%'});
  514. $('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지
  515. event.preventDefault();
  516. event.stopPropagation();
  517. return false;
  518. });
  519. }
  520. // pop close
  521. function popClsScroll(){
  522. $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
  523. $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
  524. return false;
  525. }
  526. // pop close
  527. function popClsScroll2(){
  528. $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
  529. $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
  530. return false;
  531. }
  532. // popup (media)
  533. $(".btn_popOpen").on("click", function(e) {
  534. popOpenScroll();
  535. $(".popup").fadeIn();
  536. swiper_me1.update();
  537. return false;
  538. });
  539. $(".popup .btn_popClose").on("click", function(e) {
  540. popClsScroll();
  541. $(".popup").fadeOut();
  542. return false;
  543. });
  544. // jk
  545. $(".btn_popOpen_mov, .btn_popOpen_mov .btn_play").on("click", function(e) {
  546. $(".me1_popMov").fadeIn();
  547. return false;
  548. });
  549. $(".me1_popMov .btn_popClose").on("click", function(e) {
  550. $(".me1_popMov").fadeOut();
  551. return false;
  552. });
  553. // bottom pop (개선중)
  554. //var appCall = document.getElementsByClassName('app'); // 디바이스 app 호출
  555. //console.log(appCall);
  556. var appHeight = document.documentElement.clientHeight; // 디바이스의 클라이언트 높이값
  557. //console.log('★ 디바이스의 클라이언트 높이값 : ' + appHeight);
  558. //var bodyCall = document.getElementsByClassName('btPop_body'); // btPop_body 호출
  559. //console.log(bodyCall);
  560. // let mememe = document.querySelector('.btPop');
  561. let headresult = document.querySelector('.btPop_head');
  562. let result = document.querySelector('.btPop_body');
  563. // console.log('btPop : '+mememe.offsetHeight);
  564. //console.log('★ 헤더 높이 : ' + headresult.offsetHeight);
  565. //console.log('★ 바디 높이 : ' + result.offsetHeight);
  566. //
  567. //let calll = result.offsetHeight + result.offsetHeight;
  568. //console.log('★ 헤더+바디 : ' + calll);
  569. //let pxtop = appHeight - calll;
  570. //console.log('★ 디바이스-(헤더+바디) : ' + pxtop);
  571. // btPop_full
  572. $('.btPop_full_click').click(function(){
  573. popOpenScroll();
  574. $('.container').addClass('btPop_full_open');
  575. return false;
  576. });
  577. $('.btPop_full_close').click(function(){
  578. popClsScroll();
  579. $('.container').removeClass('btPop_full_open');
  580. return false;
  581. });
  582. // btPopAuto
  583. $('.btPop_close').click(function(){
  584. popClsScroll();
  585. $('.container').removeClass('btPop_open');
  586. autome.style.top = 100 + "%";
  587. return false;
  588. });
  589. // btPopAuto
  590. $('.btPopClose').click(function(){
  591. popClsScroll2();
  592. $('.container').removeClass('btPop_open');
  593. autome.style.top = 100 + "%";
  594. return false;
  595. });
  596. let autome = document.querySelector('.btPopAuto');
  597. let headsize = this.querySelector('.btPopAuto .btPopAuto_head');
  598. let bodysize = this.querySelector('.btPopAuto .btPopAuto_body');
  599. //console.log('★ btPop_auto헤더 높이 : ' + headsize.offsetHeight);
  600. //console.log('★ btPop_auto바디 높이 : ' + bodysize.clientHeight);
  601. let autotop = appHeight - (headsize.offsetHeight + bodysize.offsetHeight);
  602. //console.log('★ btPopAuto전체 높이 - 컨텐츠 높이 : ' + autotop);
  603. //console.log('★ btPopAuto전체 높이 - 컨텐츠 높이 /10 : ' + autotop /10);
  604. $('.btPop_auto').click(function(){
  605. popOpenScroll();
  606. $('.container').addClass('btPop_open');
  607. // autome.style.top = autotop /10 + "vh";
  608. if (autotop > 251) {
  609. autome.style.top = 25.0 + "vh";
  610. }else{
  611. autome.style.top = pxtop/10 + "vh";
  612. }
  613. return false;
  614. });
  615. // 210405_사이즈 선택시 구매하기 팝업 추가
  616. $('.opt_size .form_field div').click(function(){
  617. popOpenScroll();
  618. //$('.btPop_body .lap span').css('color', 'red')
  619. //console.log($(this)[0]);
  620. console.log();
  621. $('.container').addClass('btPop_open');
  622. // autome.style.top = autotop /10 + "vh";
  623. if (autotop > 251) {
  624. autome.style.top = 25.0 + "vh";
  625. }else{
  626. autome.style.top = pxtop/10 + "vh";
  627. }
  628. return false;
  629. });
  630. // 210407_사이즈 선택유지 스크립트
  631. //$('.option_box .form_field div label').click(function(){
  632. // var a = [];
  633. // a = document.querySelectorAll(".option_box .form_field div label span");
  634. // sizeLine = document.querySelectorAll(".option_box .form_field div label");
  635. // sizeGap = this.innerText;
  636. // if(sizeGap === "90"){
  637. // for(var i=0; i<a.length; i++){
  638. // sizeLine[i].style.border="1px solid #ddd";
  639. // if(a[i].innerText === "90"){
  640. // sizeLine[i].style.border="1px solid #fd4802";
  641. // }
  642. // }
  643. // }
  644. // if(sizeGap === "95"){
  645. // for(var i=0; i<a.length; i++){
  646. // sizeLine[i].style.border="1px solid #ddd";
  647. // if(a[i].innerText === "95"){
  648. // sizeLine[i].style.border="1px solid #fd4802";
  649. // }
  650. // }
  651. // }
  652. // if(sizeGap === "100"){
  653. // for(var i=0; i<a.length; i++){
  654. // sizeLine[i].style.border="1px solid #ddd";
  655. // if(a[i].innerText === "100"){
  656. // sizeLine[i].style.border="1px solid #fd4802";
  657. // }
  658. // }
  659. // }
  660. // if(sizeGap === "105"){
  661. // for(var i=0; i<a.length; i++){
  662. // sizeLine[i].style.border="1px solid #ddd";
  663. // if(a[i].innerText === "105"){
  664. // sizeLine[i].style.border="1px solid #fd4802";
  665. // }
  666. // }
  667. // }
  668. // if(sizeGap === "110"){
  669. // for(var i=0; i<a.length; i++){
  670. // sizeLine[i].style.border="1px solid #ddd";
  671. // if(a[i].innerText === "110"){
  672. // sizeLine[i].style.border="1px solid #fd4802";
  673. // }
  674. // }
  675. // }
  676. // if(sizeGap === "115"){
  677. // for(var i=0; i<a.length; i++){
  678. // sizeLine[i].style.border="1px solid #ddd";
  679. // if(a[i].innerText === "115"){
  680. // sizeLine[i].style.border="1px solid #fd4802";
  681. // }
  682. // }
  683. // }
  684. // if(sizeGap === "free"){
  685. // for(var i=0; i<a.length; i++){
  686. // sizeLine[i].style.border="1px solid #ddd";
  687. // if(a[i].innerText === "free"){
  688. // sizeLine[i].style.border="1px solid #fd4802";
  689. // }
  690. // }
  691. // }
  692. //});
  693. // 210407_텍스트 카운팅
  694. $('.doc_itemqna').keyup(function (e){
  695. var content = $(this).val();
  696. $('#itemqna_cnt').html("<em class='c_primary'>"+content.length+"</em>/500자");//글자수 실시간 카운팅
  697. if (content.length > 200){
  698. mcxDialog.alert("최대 500자까지 입력 가능합니다."); //210420_수정 : 시스템 alert -> dialog 변경.
  699. $(this).val(content.substring(0, 500));
  700. $('#itemqna_cnt').html("<em class='c_primary'>500</em>/500자");
  701. }
  702. });
  703. // 210407_스크롤감지 헤더 그림자
  704. $('.pd_delivery_pop').scroll(function(){
  705. $(".pd_delivery_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  706. $(".pd_delivery_pop .modal-header").css("border-bottom", "0px none");
  707. if($(".pd_delivery_pop").scrollTop() === 0){
  708. $(".pd_delivery_pop .modal-header").css("box-shadow", "none");
  709. $(".pd_delivery_pop .modal-header").css("border-bottom", "1px solid #eee");
  710. }
  711. });
  712. $('.pd_review_pop').scroll(function(){
  713. $(".pd_review_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  714. $(".pd_review_pop .modal-header").css("border-bottom", "0px none");
  715. if($(".pd_review_pop").scrollTop() === 0){
  716. $(".pd_review_pop .modal-header").css("box-shadow", "none");
  717. $(".pd_review_pop .modal-header").css("border-bottom", "1px solid #eee");
  718. }
  719. });
  720. $('.pd_qnalist_pop').scroll(function(){
  721. $(".pd_qnalist_pop .modal-header").css("box-shadow", "rgb(0 0 0 / 20%) 0px 0px 5px");
  722. $(".pd_qnalist_pop .modal-header").css("border-bottom", "0px none");
  723. if($(".pd_qnalist_pop").scrollTop() === 0){
  724. $(".pd_qnalist_pop .modal-header").css("box-shadow", "none");
  725. $(".pd_qnalist_pop .modal-header").css("border-bottom", "1px solid #eee");
  726. }
  727. });
  728. });
  729. /* ================================================== JS branch JS ========================================================*/
  730. $( document ).ready( function() {
  731. /* 주문결제_Header Style */
  732. // var odPage = document.getElementsByClassName('od');
  733. if($('main').children("section").hasClass("shopping_bag")){
  734. $('.htop .home').css({"display": "inline-block"});
  735. $('.htop .search').css({"display": "none"});
  736. $('.htop .store').css({"display": "none"});
  737. }else if($('main').children("section").hasClass("od_gift")){
  738. $('.htop .home').css({"display": "none"});
  739. $('.htop .search').css({"display": "inline-block"});
  740. $('.htop .store').css({"display": "inline-block"});
  741. }else if($('main').children("section").hasClass("od_extra")){ //추가결제(특수결제)
  742. $('.htop .home').css({"display": "none"});
  743. $('.htop .search').css({"display": "none"});
  744. $('.htop .store').css({"display": "none"});
  745. }else if($('main').children("section").hasClass("odPayment")){ //회원,비회원주문
  746. $('.htop .home').css({"display": "none"});
  747. $('.htop .search').css({"display": "none"});
  748. $('.htop .store').css({"display": "none"});
  749. }else if($('main').children("section").hasClass("nonMBorder")){ //비회원주문-로그인
  750. $('.htop .home').css({"display": "none"});
  751. $('.htop .search').css({"display": "none"});
  752. $('.htop .store').css({"display": "none"});
  753. };
  754. /* 상품상세_Header Style */
  755. let pdPage = document.getElementsByClassName('pd');
  756. if($(pdPage).children("section").hasClass("pd_detail")){
  757. $('.htop').css({"background": "transparent","position":"absolute","width":"100%"});
  758. $('.htop h1').css({"border-bottom": "none"});
  759. $('.htop h1').css({"display": "none"});
  760. $('.htop .home').css({"display": "inline-block"});
  761. };
  762. /* 마이페이지_Header Style */
  763. let container = document.getElementsByClassName('container');
  764. if($(container).hasClass('my')){
  765. $('.htop').css({"border-bottom": "1px solid rgba(0, 0, 0, 0.1)"});
  766. };
  767. /* 마이페이지_비회원_Header Style */
  768. let myPage = document.getElementsByClassName('my');
  769. if($(myPage).children("nav").hasClass("pnb")){
  770. $('.htop .home').css({"display": "none"});
  771. $('.htop .search').css({"display": "none"});
  772. $('.htop .store').css({"display": "none"});
  773. };
  774. /* 검색_Header Style */
  775. let schPage = document.getElementsByClassName('sch');
  776. if($(schPage).children("section").hasClass("sch_result")){
  777. $('.htop h1').css({"display": "none"});
  778. $('.htop .search').css({"display": "none"});
  779. };
  780. /* 210428_수정 : 아코디언 */
  781. $(document).on('click','.cs .foldGroup .fold_head, .my .foldGroup .fold_head',function(e){
  782. $(this).toggleClass('on');
  783. $(this).siblings('.fold_cont').slideToggle(100);
  784. $(this).parents('li').siblings('li').find('.fold_head').removeClass('on');
  785. $(this).parents('li').siblings('li').find('.fold_cont').slideUp(100);
  786. });
  787. /* //210428_수정 : 아코디언 */
  788. /* 주문결제_accordion */
  789. /* 210428_수정 : 아코디언 */
  790. $(document).on('click','.od .foldGroup .fold_head .fold_tit',function(e){
  791. $(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
  792. $(this).parents('.fold_head').toggleClass('on');
  793. $(this).parents('.inner').siblings('.inner').find('.fold_head').removeClass('on');
  794. $(this).parents('.inner').siblings('.inner').find('.fold_cont').slideUp(100);
  795. return false;
  796. });
  797. /* 210428_수정 : 아코디언 */
  798. /* 상품문의_accordion */
  799. $(document).on('click','.pd_qnalist .fold_head .fold_tit',function(e){
  800. $('.fold_head').removeClass('on');
  801. $('.fold_cont').slideUp(100);
  802. //$(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
  803. //$(this).parents('.fold_head').toggleClass('on');
  804. if(!$(this).parents('.foldGroup li').find('.fold_cont').is(":visible")){
  805. $(this).parents('.foldGroup li').find('.fold_cont').slideDown(100);
  806. $(this).parents('.fold_head').toggleClass('on');
  807. }
  808. return false;
  809. });
  810. // 쇼핑백팝업
  811. $("#btn_shoppingBag_pop").click(function() {
  812. popClsScroll2();
  813. $('.container').removeClass('btPop_open');
  814. autome.style.top = 100 + "%";
  815. $("html, body").animate({"scrollTop": 0}, 0);
  816. $("#shoppingBagModal").fadeIn();
  817. setTimeout(function(){
  818. $("#shoppingBagModal").fadeOut(500);
  819. },2000);
  820. return false;
  821. });
  822. //210409_토스트 팝업 버튼 클릭시 닫기
  823. $(document).on('click','.popup_box .button_list button',function(){
  824. $(this).parents('.popup_box').hide().removeClass('active');
  825. $("body").css({"overflow":"visible"});
  826. })
  827. });
  828. // $(window).load(function() {
  829. // $('#load').hide();
  830. // });