1if(typeof LANG == 'undefined') var LANG = (typeof getLanguage != 'undefined') ? getLanguage() : 'ko'; 2$(function() { 3 updateBreakpoint(); 4 5 var _html = document.querySelector('html'); 6 var _body = document.querySelector('body'); 7 8 let _elmenuconfigScrollTimeout = null; 9 10 const normalizeClnavPageKey = function(value) { 11 value = String(value || '').trim(); 12 try { 13 value = decodeURIComponent(value); 14 } catch(e) {} 15 return value.replace(/ /g, '-'); 16 }; 17 18 const getClnavHrefPageKey = function(href) { 19 if(!href || href.indexOf('#') === -1) return ''; 20 return normalizeClnavPageKey(href.split('#').pop().split('?')[0]); 21 }; 22 23 const isClnavOnePage = function() { 24 const globalOne = (typeof ONE != 'undefined') ? ONE : undefined; 25 const propertyOne = (typeof property != 'undefined') ? property?.ONE : undefined; 26 return globalOne == 1 || propertyOne == 1 || globalOne === true || propertyOne === true; 27 }; 28 29 // â ì¤í¬ë¡¤ ì´ë²¤í¸ í¸ë¤ë¬ 30 let handleScrollTicking = false; 31 function handleScroll() { 32 if (window.getComputedStyle(_html).getPropertyValue('overflow-y') != 'hidden') { 33 34 const checkClnav = $('header').is('.cl-nav'); 35 const checkSidenav = (checkClnav) ? $('header').is('[data-layout="sidenav"]') : $('header').hasClass('sidebar'); 36 37 const before_state = ($('body').hasClass('clnav-state-sticky') && 'sticky') 38 || ($('body').hasClass('clnav-state-overlap') && 'overlap') 39 || 'default'; 40 let after_state = ($('body').hasClass('clnav-overlap-ON')) ? 'overlap' : 'default'; 41 42 if($('body').hasClass('clnav-sticky-ON')) { 43 if($.clnav.checkStickyY() < window.scrollY) after_state = 'sticky'; 44 } 45 46 if (window.scrollY > 0) { 47 $('body').addClass('_scrolling'); 48 } else { 49 $('body').removeClass('_scrolling'); 50 } 51 52 if(checkClnav) { 53 const menuBlock = document.querySelector('.cl-nav'); 54 55 if($('.cl-nav').is('[data-layout="meganav"]')) { 56 if( window.scrollY > 0 && 57 $('body').hasClass('_scrolling') && 58 $('body').is(`${$.clnav.checkLayoutVertical(false,false,true,true)}[data-clnav-mega="open"].clnav-sticky-OFF`) 59 ) { 60 $.clnav.setMode('mega-open',false); 61 } 62 } 63 64 const onepage = isClnavOnePage(); 65 if(onepage && 66 (menuBlock?.getAttribute('data-scroll') !== 'gotoelement') && 67 $('.element[data-pagename]').length > 2 68 ) { 69 const scrollTop = $(window).scrollTop(); 70 const offset = checkSidenav ? 0 : cssNumber(getElementRootCss('html','--clnav-toparea-bottom')); 71 72 let currentIdx = 0; 73 74 $('.element[data-pagename]').each(function (i) { 75 if (scrollTop + offset >= $(this).offset().top) { 76 currentIdx = i; 77 } 78 }); 79 80 if (scrollTop + window.innerHeight >= $(document).height() - 2) { 81 currentIdx = $('.element[data-pagename]').length - 1; 82 } 83 84 const currentName = $('.element[data-pagename]').eq(currentIdx).attr('data-pagename'); 85 $.clnav.active(currentName); 86 } 87 88 if(before_state !== after_state) { 89 if(_elmenuconfigScrollTimeout) clearTimeout(_elmenuconfigScrollTimeout); 90 _elmenuconfigScrollTimeout = setTimeout(function() { 91 $.clnav.checkNowState(true); 92 $.clnav.setRootcss(); 93 }, 50); 94 } else if(elementVisibility($('.element.el_0'))) { 95 $.clnav.setRootcss(); 96 } 97 98 } 99 else { 100 // old ver menu 101 setElementRootCss('html',{'--header-height':`${$('.dsgn-body').hasClass('sidebar') ? 0 : $('header').outerHeight()}px`}); 102 } 103 104 } 105 } 106 107 // â ì¤í¬ë¡¤ ì´ë²¤í¸ ì¶ê° í¨ì (ëì ìì ëì) 108 function addScrollListener() { 109 if (document.querySelector('.dsgn-body')) { 110 window.addEventListener('scroll', () => { 111 if(!handleScrollTicking) { 112 window.requestAnimationFrame(() => { 113 handleScroll(); 114 handleScrollTicking = false; 115 }); 116 handleScrollTicking = true; 117 } 118 }); 119 } 120 } 121 // â ì´ê¸° ë¡ë ì ì¤í¬ë¡¤ ì´ë²¤í¸ ì ì© 122 addScrollListener(); 123 124 const elmenu_resizeObserved = new WeakSet(); 125 var elmenu_resizeObserver = new ResizeObserver(entries => {
126 for (let entry of entries) { 127 updateBreakpoint(); 128 129 const visible_h = elementVisibility(entry.target, true); 130 const prev_visible_h = $.clnav.d?.visible_h ?? 0; 131 132 if(visible_h !== prev_visible_h) { 133 requestAnimationFrame(() => { 134 if($('body').outerWidth() > 767 && $('html').is('[data-clnav-sidemobile="open"]')) $('html').removeAttr('data-clnav-sidemobile'); 135 $.clnav.setRootcss(); 136 }); 137 138 $.clnav.d = $.clnav.d || {}; 139 $.clnav.d.visible_h = visible_h; 140 } 141 } 142 }); 143 144 const el_visibleObserved = new WeakSet(); 145 const syncAOSInview = (el, isInview) => { 146 if(!el || !el.matches || !el.matches('[data-aos].aos-init')) return; 147 148 if(isInview) { 149 if(!el.classList.contains('aos-animate')) { 150 el.classList.add('aos-animate'); 151 } 152 } else if(el.getAttribute('data-aos-once') !== 'true') { 153 el.classList.remove('aos-animate'); 154 } 155 }; 156 const el_visibleObserver = new IntersectionObserver((entries) => { 157 entries.forEach((entry) => { 158 const el = entry.target; 159 const elem = el.closest('.elem'); 160 const elTarget = getDsgnBodyChild(el); 161 162 if (entry.isIntersecting) { 163 el.classList.add('_inview'); 164 syncAOSInview(el, true); 165 } 166 else { 167 el.classList.remove('_inview'); 168 syncAOSInview(el, false); 169 } 170 if(!elem) return; 171 172 if (entry.isIntersecting) { 173 elem.classList.add('_inview'); 174 175 const isGalleryAosGtoolbar = el.matches('[data-type="gallery"]'); 176 if (!isGalleryAosGtoolbar) return; 177 if (el.dataset.gtoolbarBound === 'true') return; 178 el.dataset.gtoolbarBound = 'true'; 179 180 let aos_finished = false; 181 182 const cleanup = () => { 183 el.removeEventListener('transitionend', aosOnend); 184 el.removeEventListener('animationend', aosOnend); 185 186 if (el._gtoolbarTimer) { 187 clearTimeout(el._gtoolbarTimer); 188 el._gtoolbarTimer = null; 189 } 190 191 el._gtoolbarAosOnend = null; 192 }; 193 194 const aosFinish = () => { 195 if (aos_finished) return; 196 aos_finished = true; 197 198 if (elem.classList.contains('_inview')) { 199 elem.classList.add('_gtoolbar_visible'); 200 } 201 202 cleanup(); 203 }; 204 205 const aosOnend = (e) => { 206 if (e.target !== el) return; 207 if (e.type === 'transitionend') { 208 if (e.propertyName !== 'transform' && e.propertyName !== 'opacity') return; 209 } 210 211 aosFinish(); 212 }; 213 214 el._gtoolbarAosOnend = aosOnend; 215 216 el.addEventListener('transitionend', aosOnend); 217 el.addEventListener('animationend', aosOnend); 218 219 const delay = parseInt(el.dataset.aosDelay || '0', 10); 220 const duration = parseInt(el.dataset.aosDuration || '400', 10); 221 el._gtoolbarTimer = setTimeout(aosFinish, delay + duration); 222 223 } else { 224 elem.classList.remove('_inview'); 225 elem.classList.remove('_gtoolbar_visible'); 226 227 if (el.dataset.gtoolbarBound === 'true') { 228 el.dataset.gtoolbarBound = 'false'; 229 } 230 231 if (el._gtoolbarTimer) { 232 clearTimeout(el._gtoolbarTimer); 233 el._gtoolbarTimer = null; 234 } 235 236 if (el._gtoolbarAosOnend) { 237 el.removeEventListener('transitionend', el._gtoolbarAosOnend); 238 el.removeEventListener('animationend', el._gtoolbarAosOnend); 239 el._gtoolbarAosOnend = null; 240 } 241 } 242 }); 243 }, { 244 threshold: 0 245 }); 246 247 const aosReloadPoint_visibleObserved = new WeakSet(); 248 var aosReloadPoint_visibleObserver = new IntersectionObserver((entries, observer) => { 249 entries.forEach(entry => { 250 if(entry.isIntersecting) { 251 if($('.element[data-aos]').length > 0) { 252 scheduleBlockAOSRefresh?.(100); 253 } 254 255 observer.unobserve(entry.target); 256 } 257 }); 258 }, { 259 threshold: 0 260 }); 261 262 263 const comnBody_domObserver = new MutationObserver(function(mutationsList, observer) { 264 for (const mutation of mutationsList) { 265 for (const node of mutation.addedNodes) { 266 if (!(node instanceof HTMLElement)) continue; 267 const $node = $(node); 268 269 if($node.is('.element[class*="userEL"]') && !el_visibleObserved.has(node)) { 270 el_visibleObserver.observe(node); 271 el_visibleObserved.add(node); 272 } 273 $node.find('.element[class*="userEL"]').each(function () { 274 if (!el_visibleObserved.has(this)) { 275 el_visibleObserver.observe(this); 276 el_visibleObserved.add(this); 277 } 278 }); 279 280 if($node.hasClass('dsgn-body')) { 281 addScrollListener(); 282 } 283 284 if($node.hasClass('el-menu') && !elmenu_resizeObserved.has(node)) { 285 elmenu_resizeObserver.observe(node); 286 } 287 288 let aosReloadPoint; 289 if($node.is('.cl-gtoolbar[data-sticky="ON"]')) aosReloadPoint = $node.closest('.elem, .element')[0]; 290 else if($node.is('._aosReloadPoint')) aosReloadPoint = $node.closest('.grid')[0]; 291 if(aosReloadPoint && !aosReloadPoint_visibleObserved.has(aosReloadPoint)) { 292 aosReloadPoint_visibleObserver.observe(aosReloadPoint); 293 aosReloadPoint_visibleObserved.add(aosReloadPoint); 294 } 295 296 } 297 } 298 }); 299 comnBody_domObserver.observe(document.body, { childList: true, subtree: true }); 300 $('.element[class*="userEL"]').each(function () { 301 if (!el_visibleObserved.has(this)) { 302 el_visibleObserver.observe(this); 303 el_visibleObserved.add(this); 304 } 305 }); 306 307 $.clnav = { 308 check: function() { 309 var isElViewer = (window.parent && window.parent != this && $('.elviewhtml').length > 0) ? true : false;
310 var elMenu = (isElViewer) ? $('.elviewwrap') : $('.el-menu'); 311 return elMenu.find('header').hasClass('cl-nav'); 312 }, 313 active: function(currentName) { 314 const $nav = $('.cl-nav'); 315 const $topmobile = $('.clnav-topmobile'); 316 const currentKey = normalizeClnavPageKey(currentName); 317 $nav.add($topmobile).find('.active').removeClass('active'); 318 $nav.add($topmobile).find('.open').removeClass('open'); 319 320 if(currentKey === 'INTRO') return; 321 322 $nav.find('.cl-nav-item, .cl-subnav-item, .cl-mega-row').each(function () { 323 const menuname = $(this).find('.cl-nav-name, .cl-subnav-name').eq(0).text().trim().replace(/ /g, '-'); 324 const menukey = getClnavHrefPageKey($(this).find('> a').eq(0).attr('href')); 325 326 if (menuname === currentKey || menukey === currentKey) { 327 $(this).addClass('active'); 328 329 if ($(this).is('.cl-subnav-item')) { 330 $(this).closest('.cl-nav-item').addClass('open'); 331 } 332 333 if ($(this).is('.cl-mega-row[data-parent]')) { 334 $(this).prevAll('.cl-mega-row.has-sub').eq(0).addClass('open'); 335 } 336 } 337 }); 338 339 $topmobile.find('.clnav-topmobile-item').each(function () { 340 const menuname = $(this).find('.clnav-topmobile-name').eq(0).text().trim().replace(/ /g, '-'); 341 const menukey = getClnavHrefPageKey($(this).find('> a').eq(0).attr('href')); 342 343 if (menuname === currentKey || menukey === currentKey) { 344 $(this).addClass('active'); 345 } 346 }); 347 348 $topmobile.filter('[data-topmobile^="swipe"]').each(function() { 349 const $active = $(this).find('.clnav-topmobile-list > .clnav-topmobile-item.active').first(); 350 if($active.length) { 351 $active[0].scrollIntoView({ 352 inline:'center', 353 block:'nearest' 354 }); 355 } 356 }); 357 }, 358 checkOverlapUsed: function(offTarget) { 359 if (typeof isSet == 'undefined') isSet = false; 360 if (typeof offTarget == 'boolean') offTarget = null; 361 else if (offTarget instanceof jQuery) offTarget = offTarget[0]; 362 363 let _property = { 364 onoff: (typeof property != 'undefined') ? property.HEADER : HEADER, 365 view: (typeof property != 'undefined') ? property.VIEW : VIEW, 366 one: isClnavOnePage(), 367 page: (typeof property != 'undefined') ? property.PAGE : PAGE, 368 settings: (typeof property != 'undefined') ? property.SETTINGS : SETTINGS, 369 hide: (typeof property != 'undefined') ? property.SETTINGS?.block_display?.menu_display ?? 'ON' : SETTINGS?.block_display?.menu_display ?? 'ON', 370 }; 371 372 var onoff = _property.onoff; 373 if(onoff) { 374 let disabled = false; 375 376 let checkTopnav = false;
377 let checkMeganav = false; 378 if($.clnav.check()) { 379 checkTopnav = $.clnav.checkLayout('topnav'); 380 checkMeganav = $.clnav.checkLayout('meganav'); 381 } else { 382 checkTopnav = !$('header.navbar').hasClass('sidebar') && $('header.navbar .cl-menu-option[data-moption]').length === 0; 383 } 384 385 if((!checkTopnav && !checkMeganav) 386 || _property.view != '' 387 || _property.hide == 'OFF' 388 ) { 389 disabled = true; 390 } 391 392 const checkView = (_property.view != '') ? true : false; 393 const checkHide = (_property.hide == 'OFF') ? true : false; 394 if((!checkTopnav && !checkMeganav) || checkView || checkHide) { 395 disabled = true; 396 } 397 398 if(disabled) { 399 onoff = false; 400 if(offTarget) setMenuOverlap(false,false); 401 } 402 } 403 404 if(offTarget 405 && typeof property == 'undefined' 406 && $.clnav.check() === false 407 ) { 408 if(onoff) { 409 } else { 410 $('.el_0_ctrl.config-element-section').css('top', '0px'); 411 } 412 } 413 414 return onoff; 415 }, 416 checkStickyY: function() { 417 var checkY = 0; 418 if($('body').hasClass('clnav-sticky-ON')) { 419 checkY = document.querySelector('.dsgn-body').offsetTop; 420 } 421 422 return checkY; 423 }, 424 checkStickyUsed: function() { 425 var isElViewer = (window.parent && window.parent != this && $('.elviewhtml').length > 0) ? true : false; 426 var elMenu = (isElViewer) ? $('.elviewwrap') : $('.el-menu'); 427 return elMenu.find('header.cl-nav .cl-nav-option').is('[data-sticky="false"]') ? false : true; 428 }, 429 getStateSelector: function(mode) { 430 if(typeof mode == 'undefined') mode = 'default'; 431 432 var s = { 433 default: `.menu-${$.clnav.s.sid}`, 434 overlap: `.clnav-state-overlap .menu-${$.clnav.s.sid}`, 435 sticky: `.clnav-state-sticky .menu-${$.clnav.s.sid}`, 436 }; 437 438 if(getOrDefault(s,mode,'') !== '') return getOrDefault(s,mode,''); 439 else if(mode == 'all') return Object.values(s); 440 else return ''; 441 }, 442 checkNowState: function(isSet,mode) { 443 // console.log(`$.clnav.checkNowState(${isSet},${mode})`); 444 if(typeof isSet !== 'boolean') isSet = false; 445 if(typeof mode == 'undefined') mode = ''; 446 447 let prevState = $('body').attr('data-clnav-state'); 448 let state = ($('body').hasClass('clnav-overlap-ON')) ? 'overlap' : 'default'; 449 if($('body').hasClass('clnav-sticky-ON')) { 450 if($.clnav.checkStickyY() < window.scrollY) state = 'sticky'; 451 } 452 453 if(isSet) { 454 $('body').attr('data-clnav-state', state) 455 .removeClass(function (index, className) { 456 return (className.match(/clnav-state-\S+/g) || []).join(' '); 457 }) 458 .addClass(`clnav-state-${state}`); 459 } 460 461 if(mode != '') { 462 return (mode === state) ? true : false; 463 } else { 464 return state; 465 } 466 }, 467 checkLayoutHorizontal: function(r,checkTopnav,checkMeganav,checkMeganavToggleH) { 468 if(typeof r != 'boolean') r = true; 469 let h_selector = []; 470 471 if(checkTopnav) h_selector.push('[data-clnav-layout="topnav]'); 472 473 if(checkMeganav && checkMeganavToggleH) h_selector.push('[data-clnav-layout="meganav"][data-clnav-toggle][data-clnav-orientation="horizontal"]'); 474 else if(checkMeganav) h_selector.push('[data-clnav-layout="meganav"][data-clnav-toggle="overflow"][data-clnav-orientation="horizontal"]'); 475 else if(checkMeganavToggleH) h_selector.push('[data-clnav-layout="meganav"][data-clnav-toggle="ON"][data-clnav-orientation="horizontal"]'); 476 477 if(r) return $('body').is(h_selector.join(',')); 478 else return h_selector.join(','); 479 }, 480 checkLayoutVertical: function(r,checkSidenav,checkMeganav,checkMeganavOverflowV) { 481 if(typeof r != 'boolean') r = true; 482 let v_selector = []; 483 484 if(checkSidenav) v_selector.push('[data-clnav-layout="sidenav]'); 485 486 if(checkMeganav && checkMeganavOverflowV) v_selector.push('[data-clnav-layout="meganav"][data-clnav-toggle$="ON"][data-clnav-orientation="vertical"]'); 487 else if(checkMeganav) v_selector.push('[data-clnav-layout="meganav"][data-clnav-toggle="ON"][data-clnav-orientation="vertical"]'); 488 else if(checkMeganavOverflowV) v_selector.push('[data-clnav-layout="meganav"][data-clnav-toggle="overflowON"][data-clnav-orientation="vertical"]'); 489 490 if(r) return $('body').is(v_selector.join(',')); 491 else return v_selector.join(','); 492 }, 493 checkLayout: function(mode) { 494 if(typeof mode == 'undefined' || !mode) mode = ''; 495 496 var isElViewer = (window.parent && window.parent != this && $('.elviewhtml').length > 0) ? true : false;
497 var elMenu = (isElViewer) ? $('.elviewwrap') : $('.el-menu'); 498 499 /* 500 ìë¨ë©ë´ (feature = 'normal') 501 â .cl-nav[data-layout="topnav"][data-behavior="dropdown"] 502 503 ì¢ì¸¡ë©ë´ (feature = 'sidebar') 504 â .cl-nav[data-layout="topnav"][data-behavior="dropdown-right"] 505 â .cl-nav[data-layout="topnav"][data-behavior="dropdown-inline"] 506 507 í¼ì¹¨ë©ë´ (feature = 'expand') 508 â .cl-nav[data-layout="meganav"][data-behavior="overflow-toggle"] 509 510 í ê¸ë©ë´ (feature = 'toggle') 511 â ì¢ì¸¡í(menu-toggle1) .cl-nav[data-layout="meganav"][data-behavior="toggle-vertical"] 512 â í¼ì¹¨í(menu-toggle2) .cl-nav[data-layout="meganav"][data-behavior="toggle-horizontal"] 513 */ 514 515 if(mode.split(',').length > 1) { 516 return elMenu.find('header').is(`.cl-nav[data-layout="${mode.split(',')[0]}"][data-behavior="${mode.split(',')[1]}"]`); 517 } else { 518 return elMenu.find('header').is(`.cl-nav[data-layout="${mode}"]`); 519 } 520 }, 521 getLayoutPatterns: function(el, k, withSet = false) { 522 if(typeof k == 'undefined') k = 'layout'; 523 524 var tmp_clnavattr = getElementLiveData(el); 525 var behavior = getOrDefault(tmp_clnavattr,'behavior',''); 526 var l = getOrDefault(tmp_clnavattr,'layout','topnav'); 527 var lp = getOrDefault(tmp_clnavattr,'layoutPattern','1row/3col/brand_nav--fix'); 528 var lp_tmp = lp.split('/'); 529 var lp_row = Number(lp_tmp[0].replace('row','')); 530 var lp_col = Number(lp_tmp[1].replace('col','')); 531 var lp_table = []; 532 var lp_attr = {}; 533 534 if(k == 'layout') return l; 535 else if(k == 'val') return lp; 536 else if(k == 'set') withSet = true; 537 538 for (let i = 2; i < lp_tmp.length; i++) { 539 lp_table.push(lp_tmp[i].split('-')); 540 } 541 542 if(withSet) el.find('.cl-nav-option').removeAttr('data-layout-pattern-toggle data-layout-pattern-brand data-layout-pattern-nav data-layout-pattern-fix'); 543 var tmp_position = ['left','center','right']; 544 $.each(lp_table, function(i,v) { 545 $.each(v, function(i2,v2) { 546 var tmp_target = v2.split('_'); 547 $.each(tmp_target, function(i3,v3) { 548 if(v3 != '' && i2 <= 3) { 549 lp_attr[`data-layout-pattern-${v3}`] = `${i+1}-${tmp_position[i2]}`; 550 if(withSet) el.find('.cl-nav-option').attr(`data-layout-pattern-${v3}`,`${i+1}-${tmp_position[i2]}`); 551 } 552 }); 553 }); 554 }); 555 556 var isClnav = { 557 top: (l == 'topnav') ? true : false, 558 side: (l == 'sidenav') ? true : false, 559 mega: (l == 'meganav') ? true : false, 560 561 dropdown: (behavior == 'dropdown') ? true : false, 562 sideDropdownInline: (behavior == 'dropdown-inline') ? true : false, 563 sideDropdownRight: (behavior == 'dropdown-right') ? true : false, 564 topOverflow: (l == 'topnav' && behavior == 'overflow-nowrap') ? true : false, 565 megaOverflow: (l == 'meganav' && behavior == 'overflow-toggle') ? true : false, 566 megaToggle: (l == 'meganav' && $.inArray(behavior, ['toggle-horizontal','toggle-vertical']) > -1) ? true : false, 567 }; 568 569 // now header 570 var used = { 571 toggle: $.clnav.checkUsedArea('toggle'), 572 brand: $.clnav.checkUsedArea('brand'), 573 nav: $.clnav.checkUsedArea('nav'), 574 fix: $.clnav.checkUsedArea('fix') 575 }; 576 577 var usedType = 9; // brand[x] nav[x] fix[x] 578 if(used.brand && used.nav && used.fix) usedType = 1; // brand[o] nav[o] fix[o] 579 else if(!used.brand && used.nav && used.fix) usedType = 2; // brand[x] nav[o] fix[o] 580 else if(used.brand && used.nav && !used.fix) usedType = 3; // brand[o] nav[o] fix[x] 581 else if(used.brand && !used.nav && used.fix) usedType = 4; // brand[o] nav[x] fix[o] 582 else if(used.brand && !used.nav && !used.fix) usedType = 5; // brand[o] nav[x] fix[x] 583 else if(!used.brand && used.nav && !used.fix) usedType = 6; // brand[x] nav[o] fix[x] 584 else if(!used.brand && !used.nav && used.fix) usedType = 7; // brand[x] nav[x] fix[o] 585 586 if(k == 'layout_space') usedType = 1; 587 588 var layout_space = { 589 case1 : {layout_space: { row:{target:'fix',position:'left',label:'nav-right'}, col:{target:'brand',position:'right',label:'nav-left'} }}, 590 case1_1 : {layout_space: { row:{target:'fix',position:'left',label:'nav-right'} }}, 591 case1_2 : {layout_space: { col:{target:'brand',position:'right',label:'nav-left'} }}, 592 case2 : {layout_space: { row:{target:'brand',position:'bottom',label:'nav-bottom'}, col:{target:'fix',position:'left',label:'nav-right'} }}, 593 case3 : {layout_space: { row:{target:'fix',position:'bottom',label:'nav-top'}, col:{target:'brand',position:'right',label:'nav-left'} }}, 594 case3_1 : {layout_space: { row:{target:'fix',position:'bottom',label:'nav-top'} }}, 595 case4 : {layout_space: { row:{target:'nav',position:'top',label:'nav-top',check:'brand,fix'}}}, 596 case5 : {layout_space: { row:{target:'brand',position:'bottom',label:'nav-top'}, col:{target:'fix',position:'bottom',label:'nav-bottom'} }}, 597 case5_1 : {layout_space: { row:{target:'brand',position:'bottom',label:'nav-top'} }}, 598 }; 599 600 /* clnav ë©ë´ ë ì´ìì ì¶ê° */ 601 var lp_template = new Map(); 602 603 if(isClnav.top) { 604 if($.inArray(usedType, [1,2,3,4]) > -1) lp_template.set('1row/3col/brand_nav--fix', {code:1, ...layout_space.case1_2}); 605 if($.inArray(usedType, [1,2,3]) > -1) lp_template.set('1row/3col/brand-nav-fix', {code:2}); 606 if($.inArray(usedType, [1,3]) > -1) lp_template.set('1row/3col/brand--nav_fix', {code:3, ...layout_space.case1_1}); 607 if($.inArray(usedType, [1,2,4,5,6,7]) > -1) lp_template.set('1row/4col/brand_nav_fix--', {code:4, ...layout_space.case1}); 608 if($.inArray(usedType, [1,2,3,4,5,6,7]) > -1) lp_template.set('1row/5col/-brand_nav_fix-', {code:5, ...layout_space.case1}); 609 if($.inArray(usedType, [1,3,4,5,6,7]) > -1) lp_template.set('1row/4col/--brand_nav_fix', {code:6, ...layout_space.case1}); 610 611 if($.inArray(usedType, [1]) > -1) lp_template.set('2row/2col/brand--/nav--fix', {code:7, ...layout_space.case5_1}); 612 if($.inArray(usedType, [1,3,4]) > -1) lp_template.set('2row/2col/-brand-/nav--fix', {code:8, ...layout_space.case5_1}); 613 614 if($.inArray(usedType, [1,3]) > -1) lp_template.set('2row/4col/-brand-/-nav_fix-', {code:9, ...layout_space.case2}); 615 if($.inArray(usedType, [1,3]) > -1) lp_template.set('2row/3col/brand--/nav_fix--', {code:10, ...layout_space.case2}); 616 617 if($.inArray(usedType, [1,2]) > -1) lp_template.set('2row/2col/brand--fix/nav--', {code:11, ...layout_space.case4}); 618 if($.inArray(usedType, [1,2,3]) > -1) lp_template.set('2row/2col/brand--fix/-nav-', {code:12, ...layout_space.case4}); 619 if($.inArray(usedType, [1,2,3]) > -1) lp_template.set('2row/2col/brand--fix/--nav', {code:13, ...layout_space.case4}); 620 621 if($.inArray(usedType, [1,4]) > -1) lp_template.set('2row/2col/--fix/brand--nav', {code:14, ...layout_space.case3_1}); 622 if($.inArray(usedType, [1]) > -1) lp_template.set('2row/2col/--fix/brand_nav--', {code:15, ...layout_space.case3}); 623 624 } else if(isClnav.megaOverflow) { 625 lp_template.set('2row/2col/brand--/nav--fix', {code:7, ...layout_space.case5_1}); 626 if($.inArray(usedType, [1,3,4,5]) > -1) lp_template.set('2row/2col/-brand-/nav--fix', {code:8, ...layout_space.case5_1}); 627 if($.inArray(usedType, [1,4,5]) > -1) lp_template.set('2row/3col/--brand/nav--fix', {code:16, ...layout_space.case5_1}); 628 if($.inArray(usedType, [1,2,3,6]) > -1) lp_template.set('2row/4col/-brand-/-nav-fix', {code:17, ...layout_space.case5_1}); 629 } else if(isClnav.megaToggle) { 630 lp_template.set('1row/3col/toggle-brand-fix', {code:18}); 631 } else if(isClnav.side) { 632 lp_template.set('row/1col/brand--/fix--/nav--/fixlang--', {code:19}); 633 lp_template.set('row/1col/-brand-/-fix-/-nav-/-fixlang-', {code:20}); 634 lp_template.set('row/1col/--brand/--fix/--nav/--fixlang', {code:21}); 635 } 636 637 switch(k) { 638 case 'template_key': 639 var order = [...lp_template.values()].map(value => value.code); 640 641 /* sample list sort */ 642 if(isClnav.top) { 643 if(usedType === 1) order = [1,4,2,5,3,6,10,8,7,9,11,14,12,15,13]; 644 else if(usedType === 2) order = [4,5,1,11,2,12,3,13]; 645 else if(usedType === 3) order = [1,10,2,5,3,6,13,8,12,9]; 646 else if(usedType === 4) order = [1,7,4,10,5,9,6,8,14]; 647 else if($.inArray(usedType,[5,6,7]) > -1) order = [4,5,6]; 648 } 649 650 var sorted_keys = order.map(code => { 651 const entry = [...lp_template.entries()].find( 652 ([key, value]) => value.code === code 653 ); 654 return entry?.[0]; 655 }
655).filter(Boolean); 656 return sorted_keys; 657 break; 658 659 case 'attr': 660 return lp_attr; 661 break; 662 663 case 'code': 664 return lp_template.get(lp)?.code ?? 0; 665 break; 666 667 case 'layout_space': 668 return lp_template.get(lp)?.layout_space ?? {}; 669 break; 670 671 default: 672 break; 673 } 674 }, 675 getStyle: function(el, k) { 676 if (typeof k === 'undefined') k = 'nav'; 677 678 if (window.jQuery && el instanceof jQuery) el = el[0]; 679 if(!el) return; 680 681 var nav = el.matches?.('.cl-nav') ? el : el.querySelector('.cl-nav'); 682 if (nav) el = nav; 683 684 var tmp_clnavattr = getElementLiveData(el); 685 var layout = getOrDefault(tmp_clnavattr,'layout',''); 686 var behavior = getOrDefault(tmp_clnavattr,'behavior',''); 687 var nav_style = getOrDefault(tmp_clnavattr,'navStyle',''); 688 var subnav_style = getOrDefault(tmp_clnavattr,'subnavStyle',''); 689 var fixnav_set_style = getOrDefault(tmp_clnavattr,'fixnavSetStyle',''); 690 var fixnav_lang_style = getOrDefault(tmp_clnavattr,'fixnavLangStyle',''); 691 692 if(k == 'fix') return {set:fixnav_set_style, lang:fixnav_lang_style}; 693 else if(k == 'fixset') return fixnav_set_style; 694 else if(k == 'fixlang') return fixnav_lang_style; 695 else if(k == 'nav') return nav_style; 696 else if(/^navstyle_/.test(k)) { 697 var style_arr = nav_style.match(/^([a-zA-Z]+)(\d+)$/); 698 var style_type = nav_style; 699 var style_num = 0; 700 if(style_arr) { 701 style_type = style_arr[1]; 702 style_num = style_arr[2]; 703 } 704 if(k == 'navstyle_type') return style_type; 705 else if(k == 'navstyle_num') return style_num; 706 707 var isV = ($.clnav.checkLayout('sidenav') || $.clnav.checkLayout('meganav,toggle-vertical')) ? true : false; 708 709 var navstyle_init = { 710 none: {on:true, key:'none', memo:'ì»¬ë¬ 9', block:['menu-top1','menu-top7','menu-top10','menu-top12','menu-left2','menu-left6','menu-toggle1','menu-toggle2']}, 711 712 bgcolor1: {on:true, key:'fill', memo:'ë©´ 7'}, 713 bgcolor2: {on:true, key:'fill', memo:''}, 714 715 fill1: {on:true, key:'fill', memo:'ë©´ 4'}, 716 fill2: {on:true, key:'fill', memo:'ë©´ 5', block:['menu-top5','menu-left5']}, 717 fill3: {on:true, key:'fill', memo:'ë©´ 6', block:['menu-top17','menu-left8']}, 718 719 line1: {on:true, key:'line', memo:'ì 3', block:['menu-top2','menu-top9','menu-top11','menu-top16','menu-top22','menu-left3']}, 720 line2: {on:true, key:'line', memo:'ë¸ë menu-top23', block:['menu-top23']}, 721 line3: {on:true, key:'line', memo:'ë¸ë menu-full1', block:['menu-full1','menu-full2']}, 722 line4: {on:true, key:'line', memo:'ë¸ë menu-top19', block:['menu-top6','menu-top15','menu-top19']}, 723 line5: {on:!isV, key:'icon', memo:''}, 724 725 dot1: {on:true, key:'icon', memo:''}, 726 dot2: {on:true, key:'icon', memo:'ì 1', block:['menu-top28']}, 727 dot3: {on:!isV, key:'icon', memo:''}, 728 dot4: {on:!isV, key:'icon', memo:'ì 2'}, 729 730 icon1: {on:true, key:'icon', memo:'ì¢ì¸¡ë©ë´ 17, 21', block:['menu-top14','menu-top27','menu-left1','menu-left9']}, 731 icon2: {on:true, key:'icon', memo:'ì¢ì¸¡ë©ë´ 19'}, 732 icon3: {on:true, key:'icon', memo:''}, 733 icon4: {on:true, key:'icon', memo:''}, 734 icon5: {on:true, key:'icon', memo:'ì¢ì¸¡ë©ë´ 20'}, 735 icon6: {on:isV, key:'icon', memo:'ì¢ì¸¡ë©ë´ 18'}, 736 icon7: {on:!isV, key:'icon', memo:''}, 737 icon8: {on:!isV, key:'icon', memo:''}, 738 739 bracket1: {on:true, key:'etc', memo:'í ì¤í¸ 14', block:['menu-top21']}, 740 bracket2: {on:true, key:'etc', memo:'ë¸ë menu-left4', block:['menu-left4']}, 741 742 chars1: {on:true, key:'character', memo:'í ì¤í¸ 16', block:['menu-top4','menu-top20','menu-left25']}, 743 chars2: {on:true, key:'character', memo:'í ì¤í¸ 13', block:['menu-top3','menu-top13','menu-left26']}, 744 chars3: {on:true, key:'character', memo:'ì»¬ë¬ 10', block:['menu-top18']}, 745 746 layered1: {on:true, key:'character', memo:'í ì¤í¸ 11, 15', block:['menu-top8','menu-top28','menu-left7']}, 747 } 748 749 var navstyle_list = []; 750 navstyle_list.push('none'); 751 navstyle_list.push('chars1','chars2','layered1','chars3'); 752 navstyle_list.push('line1','line2','line3','line4'); 753 navstyle_list.push('dot1','dot2','dot3','dot4','icon5','line5','icon1','icon2','icon3','icon4','icon6','icon7','icon8'); 754 navstyle_list.push('bgcolor1','bgcolor2','fill1','fill2','fill3'); 755 navstyle_list.push('bracket1','bracket2'); 756 757 var idx = {}; 758 var navstyle_template = {}; 759 $.each(navstyle_list, function (i,k) { 760 var tmp_obj = navstyle_init?.[k] || {on:false, key:'undefined'}; 761 762 var tmp_key = tmp_obj.key; 763 if(typeof idx?.[tmp_key] === 'undefined') idx[tmp_key] = 0; 764 idx[tmp_key] ++; 765 766 var tmp_label = (tmp_obj.key == 'none') ? $.lang[LANG]['config.aos.m.no-motion'] : `${tmp_obj.key} ${String(idx[tmp_key]).padStart(2,'0')}`; 767 tmp_obj['label'] = tmp_label; 768 navstyle_template[k] = tmp_obj; 769 }); 770 if(k == 'navstyle_label') return navstyle_template?.[nav_style]?.label || nav_style; 771 if(k == 'navstyle_info') return navstyle_template?.[nav_style] || {}; 772 else if(k == 'navstyle_template') return navstyle_template; 773 } 774 else if(k == 'subnav') return subnav_style; 775 else if(k == 'subnav_template') { 776 var isClnav = {
777 top: (layout == 'topnav') ? true : false, 778 side: (layout == 'sidenav') ? true : false, 779 mega: (layout == 'meganav') ? true : false, 780 781 dropdown: (behavior == 'dropdown') ? true : false, 782 sideDropdownInline: (behavior == 'dropdown-inline') ? true : false, 783 sideDropdownRight: (behavior == 'dropdown-right') ? true : false, 784 topOverflow: (layout == 'topnav' && behavior == 'overflow-nowrap') ? true : false, 785 megaOverflow: (layout == 'meganav' && behavior == 'overflow-toggle') ? true : false, 786 megaToggle: (layout == 'meganav' && $.inArray(behavior, ['toggle-horizontal','toggle-vertical']) > -1) ? true : false, 787 }; 788 789 var style_template = []; 790 if(isClnav.dropdown || isClnav.sideDropdownInline || isClnav.sideDropdownRight) { 791 if(k == 'subnav_template') { 792 style_template = Array.from({ length: 12 }, (_, i) => `boxed${i + 1}`).filter(item => item !== 'boxed5'); 793 if(isClnav.side) style_template.push('inline1'); 794 } 795 } else if(isClnav.mega) { 796 if(k == 'subnav_template') { 797 style_template = ['minimal1']; 798 } 799 } 800 801 return style_template; 802 } 803 else { 804 return []; 805 } 806 }, 807 checkNavCtrls: function(el, navstyle, k) { 808 if (el instanceof jQuery) el = el[0]; 809 if (!el || !el.attributes) return false; 810 const $el = ($(el).find('.cl-nav').length > 0) ? $(el).find('.cl-nav') : $(el); 811 812 if (typeof navstyle !== 'string') navstyle = $el.attr('data-nav-style') || 'default'; 813 if (typeof k !== 'string') k = ''; 814 815 /* 816 í¨ê³¼ìì default 817 í ì¤í¸ ì»¬ë¬ color 818 ë°°ê²½ ì»¬ë¬ bgcolor 819 ë©´ fill 820 ì line 821 ì dot 822 ë§ì»¤ marker 823 ìì´ì½ icon 824 ê´í¸ bracket 825 ì´ë¦ìì 2ê°ì¶ê° layered 826 ì´ë¦ìì ê¸ì§ 쪼갬 chars 827 */ 828 829 const style_type = $.clnav.getStyle($el,'navstyle_type'); 830 let ctrl_root = []; 831 if($.inArray(style_type, ['bgcolor','fill','dot','line','icon','bracket','marker']) > -1) ctrl_root.push('--nav-style-active'); 832 833 if(k == '') { 834 return ctrl_root; 835 } else { 836 return ctrl_root.indexOf(k) > -1 ? true : false; 837 } 838 }, 839 checkSubnavCtrls: function(el, k) { 840 if (el instanceof jQuery) el = el[0]; 841 if (!el || !el.attributes) return false; 842 if (typeof k !== 'string') return false; 843 844 const checkSidenav = el.querySelector('.cl-nav')?.getAttribute('data-layout') === 'sidenav'; 845 const checkDropdown = el.querySelector('.cl-nav')?.getAttribute('data-behavior')?.startsWith('dropdown') ?? false; 846 const styleKey = el.querySelector('.cl-nav')?.getAttribute('data-subnav-style') || ''; 847 if(!styleKey) return false; 848 849 const boxed_style = { 850 basic: [ 851 '--subnav-list-padding-row', 852 '--subnav-padding-row', 853 '--subnav-padding-col', 854 '--subnav-list-bgcolor', 855 '--subnav-list-line-onoff' 856 ], 857 hybrid: [ 858 '--subnav-list-padding-row', 859 '--subnav-padding-row', 860 '--subnav-padding-col', 861 '--subnav-list-bgcolor', 862 '--subnav-list-line-onoff', 863 '--subnav-bgcolor-hover', 864 '--subnav-bgcolor-active' 865 ], 866 item: [ 867 '--subnav-list-padding-row', 868 '--subnav-padding-row', 869 '--subnav-padding-col', 870 '--subnav-bgcolor', 871 '--subnav-bgcolor-hover', 872 '--subnav-bgcolor-active' 873 ] 874 }; 875 876 const styleGroupMap = { 877 'minimal1': ['--subnav-padding-row','--subnav-padding-col'], 878 879 'inline1': boxed_style.basic, 880 'boxed2': boxed_style.basic, 881 'boxed3': boxed_style.basic, 882 883 'boxed4': boxed_style.hybrid, 884 'boxed7': boxed_style.hybrid, 885 'boxed9': boxed_style.hybrid, 886 'boxed10': boxed_style.hybrid, 887 888 'boxed12': boxed_style.item 889 }; 890 891 let custom_style = [ 892 ...(styleGroupMap[styleKey] || boxed_style.basic) 893 ]; 894 895 if (styleKey.startsWith('boxed')) { 896 if (checkDropdown) custom_style.push(`--subnav-position-${checkSidenav ? 'x' : 'y'}`); 897 custom_style.push('--subnav-shadow'); 898 } 899 900 const rootKey = k.trim().startsWith('--') ? k.trim() : `--${k.trim()}`; 901 return custom_style.includes(rootKey); 902 }, 903 hasMobileToggleContent: function(thisHeader) { 904 const $header = $(thisHeader).first(); 905 if(!$header.length) return false;
906 907 const hasNav = $header.find('.cl-nav-section.main .cl-nav-list > .cl-nav-item').filter(function() { 908 const $item = $(this); 909 if($item.hasClass('hide')) return false; 910 const label = $.clnav.getMobileNavNameText($item.find('.cl-nav-name').eq(0)).trim(); 911 return label !== '' && label !== 'INTRO'; 912 }).length > 0; 913 const hasFix = $header.find('.cl-fixnav-item').filter(function() { 914 const $item = $(this); 915 if($item.hasClass('hide') || $item.hasClass('sidemap')) return false; 916 917 let key = ''; 918 if($item.hasClass('search')) key = 'search'; 919 else if($item.hasClass('cart')) key = 'cart'; 920 else if($item.hasClass('lang')) key = 'lang'; 921 else if($item.hasClass('loginout')) key = 'um'; 922 923 if(key && typeof $.clnav.checkFixnavStatue == 'function') return $.clnav.checkFixnavStatue($header,key,'on'); 924 return true; 925 }).length > 0; 926 927 return hasNav || hasFix; 928 }, 929 checkBasemobileUsed: function(clmenuEL) { 930 let basemobileUsed = false; 931 932 clmenuEL.find('.cl-nav[data-basemobile]').each(function() { 933 basemobileUsed = $.clnav.isBasemobileHeaderUsed($(this)); 934 if(basemobileUsed) return false; 935 }); 936 937 return basemobileUsed; 938 }, 939 isBasemobileHeaderUsed: function(thisHeader) { 940 const $nav = $(thisHeader).first(); 941 if(!$nav.length || !$nav.is('[data-basemobile]')) return false; 942 943 const basemobile = $nav.attr('data-basemobile') || '';
944 const parts = basemobile === 'modoo' 945 ? ['brand','fix','toggle'] 946 : basemobile.split('-').filter(Boolean).map(function(part) { return part === 'cart' ? 'fix' : part; }); 947 const mobileFixOff = $.clnav.getMobileOptions($nav,'fixOff') || []; 948 const hasPart = function(part) { 949 return $.inArray(part, parts) > -1; 950 }; 951 const hasMobileFix = function(className,key) { 952 if(!hasPart('fix') || $.inArray(key,mobileFixOff) > -1) return false; 953 954 const $item = $nav.find(`.cl-fixnav-item.${className}:not(.hide)`).not('.sidemap').first(); 955 if(!$item.length) return false; 956 if(typeof $.clnav.checkFixnavStatue == 'function') return $.clnav.checkFixnavStatue($nav,key,'on'); 957 return true; 958 }; 959 960 if(hasPart('brand') && !$nav.find('.cl-nav-brand').hasClass('off')) return true; 961 if(hasMobileFix('search','search')) return true; 962 if(hasMobileFix('loginout','um')) return true; 963 if(hasMobileFix('cart','cart')) return true; 964 if(hasMobileFix('lang','lang')) return true; 965 if(hasPart('toggle') && $.inArray('toggle',mobileFixOff) < 0 && !$nav.is('[data-sidemobile="OFF"]') && $.clnav.hasMobileToggleContent($nav)) return true; 966 967 return false; 968 }, 969 checkUsedArea: function(k) { 970 if(typeof k == 'undefined') k = ''; 971 k = k.split(','); 972 973 var isElViewer = (window.parent && window.parent != this && $('.elviewhtml').length > 0) ? true : false; 974 var clmenuEL = (isElViewer) ? $('.elviewwrap') : $('.cl-menu'); 975 976 var used = false; 977 $.each(k, function(i,key) { 978 switch(key) { 979 case 'toggle': 980 if(clmenuEL.find('.cl-nav-toggle').css('display') != 'none') used = true; 981 break; 982 case 'brand': 983 if(!clmenuEL.find('.cl-nav-brand').hasClass('off')) used = true; 984 break; 985 case 'nav': 986 if(clmenuEL.find('.cl-nav-item').length > 0) used = true; 987 break; 988 case 'fix': 989 if(clmenuEL.find('.cl-fixnav-item:not(.hide)').length > 0) used = true; 990 break; 991 case 'fixum': 992 if(clmenuEL.find('.cl-fixnav-item.loginout:not(.hide)').length > 0) used = true; 993 break; 994 case 'fixlang': 995 if(clmenuEL.find('.cl-fixnav-item.lang:not(.hide)').length > 0) used = true; 996 break; 997 case 'fixsearch': 998 if(clmenuEL.find('.cl-fixnav-item.search:not(.hide)').length > 0) used = true; 999 break; 1000 case 'fixcart': 1001 if(clmenuEL.find('.cl-fixnav-item.cart:not(.hide)').length > 0) used = true; 1002 break; 1003 1004 case 'subnav': 1005 if(clmenuEL.find('.cl-subnav-item').length > 0) used = true; 1006 break; 1007 1008 case 'mobile': 1009 const checkBasemobile = $.clnav.checkBasemobileUsed(clmenuEL); 1010 const checkTopmobile = clmenuEL.find('.cl-nav').is('[data-topmobile]'); 1011 const checkSidemobile = clmenuEL.find('.cl-nav').filter(function() { 1012 return !$(this).is('[data-sidemobile="OFF"]') && $.clnav.hasMobileToggleContent($(this)); 1013 }).length > 0; 1014 if (checkTopmobile || checkBasemobile || checkSidemobile) used = true; 1015 break; 1016 1017 case 'topmobile': 1018 if(clmenuEL.find('.cl-nav').is('[data-topmobile]')) used = true; 1019 break; 1020 1021 case 'sidemobile': 1022 if(clmenuEL.find('.cl-nav').filter(function() { return !$(this).is('[data-sidemobile="OFF"]') && $.clnav.hasMobileToggleContent($(this)); }).length > 0) used = true; 1023 break; 1024 1025 case 'basemobile': 1026 if($.clnav.checkBasemobileUsed(clmenuEL)) used = true; 1027 break; 1028 1029 default: 1030 break; 1031 } 1032 1033 if(used) return false; 1034 }); 1035 1036 return used; 1037 }, 1038 setSidemap: function(thisHeader) { 1039 if(!thisHeader.find('.cl-nav-option').is('[data-sidemap="true"]')) return; 1040 1041 const $tmp_sidemap_brand = thisHeader.find('.cl-nav-brand').clone(); 1042 const $tmp_sidemap_nav = thisHeader.find('.cl-nav-list').clone(); 1043 1044 $tmp_sidemap_brand.find('.cl-nav-brand-image').remove(); 1045 $tmp_sidemap_nav.find('.clnav-nowrap-btn').remove(); 1046 $tmp_sidemap_nav.find('.dropdown-menu').removeClass('dropdown-menu'); 1047 $tmp_sidemap_nav.find('.dropdown > a > .fa').remove(); 1048 $tmp_sidemap_nav.find('.dropdown > a').append(clSVG('arrow_down',14,14,true,'cl-nav-caret')); 1049 1050 $('.clnav-sidemap').remove(); 1051 $('.dsgn-body').after(` 1052 <div class="clnav-sidemap"> 1053 <div class="clnav-sidemap-close">${clSVG('close_l',18,18,true)}</div> 1054 ${$tmp_sidemap_brand.prop('outerHTML')} 1055 ${$tmp_sidemap_nav.prop('outerHTML')} 1056 </div> 1057 `); 1058 }, 1059 getMobileOptions: function($thisHeader,key) { 1060 const $navopts = $thisHeader.find('.cl-nav-option'); 1061 const $navmopts = $thisHeader.find('.cl-nav-option-m'); 1062 const defaultBasemobile = $.clnav.getDefaultBasemobile($thisHeader); 1063 const normalizeBasemobile = function(val) { 1064 if(val === 'modoo') return val;
1065 const normalized = (val || '').split('-').filter(Boolean).map(function(part) { 1066 return part === 'cart' ? 'fix' : part; 1067 }).join('-'); 1068 const legacyMap = { 1069 'brand-fix-toggle': 'brand-fix-toggle', 1070 'toggle-brand-fix': 'toggle-brand-fix', 1071 'toggle-fix-brand': 'toggle-fix-brand', 1072 'brand-toggle': 'brand-fix-toggle', 1073 'toggle-brand': 'toggle-brand-fix', 1074 'brand-fix': 'brand-fix-toggle', 1075 'fix-brand': 'toggle-fix-brand', 1076 'brand': 'brand-fix-toggle', 1077 }; 1078 return legacyMap[normalized] || defaultBasemobile; 1079 }; 1080 const normalizeBasemobileFixOff = function(val) { 1081 return (val || '').split(',').map(function(item) { 1082 return item.trim() === 'loginout' ? 'um' : item.trim(); 1083 }).filter(function(item, idx, arr) { 1084 return $.inArray(item, ['toggle','search','um','cart','lang']) > -1 && arr.indexOf(item) === idx; 1085 }); 1086 }; 1087 const getDefaultBasemobileFixOff = function() { 1088 const defaultOff = ['search','um','cart','lang']; 1089 if($.clnav.s?.checkSM) defaultOff.splice(defaultOff.indexOf('cart'),1); 1090 return defaultOff; 1091 }; 1092 let mopts = { 1093 base: defaultBasemobile, 1094 top: { 1095 val: '', 1096 prev: 'default', 1097 view: 'default', 1098 onoff: false, 1099 sticky:'OFF', 1100 }, 1101 fixOff: [], 1102 side: { 1103 onoff: true, 1104 val: 'default', 1105 prev: 'default', 1106 view: 'default', 1107 type: 'default', 1108 search: 'overlay' 1109 } 1110 }; 1111 1112 if($thisHeader.is('[data-basemobile]')) { 1113 const rawBasemobile = $thisHeader.attr('data-basemobile'); 1114 mopts.base = normalizeBasemobile(rawBasemobile); 1115 if(rawBasemobile !== mopts.base) $thisHeader.attr('data-basemobile',mopts.base); 1116 } 1117 if($navmopts.is('[data-basemobile-fix-off]')) { 1118 mopts.fixOff = normalizeBasemobileFixOff($navmopts.attr('data-basemobile-fix-off')); 1119 } 1120 else { 1121 mopts.fixOff = getDefaultBasemobileFixOff(); 1122 } 1123 $navmopts.attr('data-basemobile-fix-off',mopts.fixOff.join(',')); 1124 if(mopts.base === 'modoo') { 1125 mopts.side.val = 'defaultmodoo'; 1126 mopts.side.prev = 'defaultmodoo'; 1127 mopts.side.view = 'defaultmodoo'; 1128 mopts.side.type = 'defaultmodoo'; 1129 } 1130 1131 const legacySidemobileVal = $navmopts.attr('data-sidemobile'); 1132 if(typeof legacySidemobileVal !== 'undefined') { 1133 if(!$thisHeader.is('[data-sidemobile]') && legacySidemobileVal !== 'default') $thisHeader.attr('data-sidemobile', legacySidemobileVal); 1134 $navmopts.removeAttr('data-sidemobile'); 1135 } 1136 1137 if($thisHeader.is('[data-topmobile]')) mopts.top.val = $thisHeader.attr('data-topmobile'); 1138 if($navmopts.is('[data-topmobile-prev]')) mopts.top.prev = $navmopts.attr('data-topmobile-prev') || 'default'; 1139 mopts.top.view = mopts.top.val || mopts.top.prev || 'default'; 1140 mopts.top.onoff = mopts.top.val !== ''; 1141 if($navmopts.is('[data-topmobile-sticky="true"]')) mopts.top.sticky = 'ON'; 1142 1143 if(mopts.base === 'modoo') mopts.side.prev = 'defaultmodoo'; 1144 else if($navmopts.is('[data-sidemobile-prev]')) mopts.side.prev = $navmopts.attr('data-sidemobile-prev') || 'default'; 1145 if($thisHeader.is('[data-sidemobile="OFF"]')) { 1146 mopts.side.onoff = false; 1147 mopts.side.view = mopts.side.prev || 'default'; 1148 } 1149 else { 1150 const sidem_val = (mopts.base === 'modoo') ? 'defaultmodoo' : ($thisHeader.attr('data-sidemobile') || 'default'); 1151 if(typeof $.clnav.getSideMobileLayouts[sidem_val] == 'function') { 1152 mopts.side.val = sidem_val; 1153 } 1154 mopts.side.view = mopts.side.val || mopts.side.prev || 'default'; 1155 mopts.side.type = mopts.side.val.replace(/\d+$/, ''); 1156 } 1157 if(mopts.side.val === 'drawer2') mopts.side.search = 'inline'; 1158 1159 if(typeof key == 'undefined' || !mopts.hasOwnProperty(key.split('.')[0])) return mopts; 1160 1161 const keys = key.split('.'); 1162 if(keys.length == 1) return mopts[keys[0]]; 1163 if(keys.length == 2 && typeof mopts[keys[0]] == 'object' && mopts[keys[0]].hasOwnProperty(keys[1])) return mopts[keys[0]][keys[1]]; 1164 1165 return mopts; 1166 }, 1167 getDefaultBasemobile: function($thisHeader) { 1168 if($.clnav.s?.checkModoo && $thisHeader.is('[data-by="mda"]')) return 'modoo'; 1169 if($thisHeader.is('[data-layout="meganav"][data-behavior="overflow-toggle"], [data-layout="meganav"][data-behavior="toggle-horizontal"], [data-layout="meganav"][data-behavior="toggle-vertical"]')) { 1170 return 'toggle-brand-fix'; 1171 } 1172 return 'brand-fix-toggle'; 1173 }, 1174 getTopMobileMenuDefaultSelection: function($thisHeader) { 1175 return $.clnav.getTopMobileMenuOptions($thisHeader) 1176 .filter(function(item) { 1177 return item.depth === 0 && !item.disabled; 1178 }) 1179 .slice(0, 9) 1180 .map(function(item) { 1181 return item.key; 1182 }); 1183 }, 1184 getTopMobileMenuOptions: function($thisHeader) { 1185 const options = [];
1186 const keys = {}; 1187 const addOption = function($item, depth) { 1188 const $name = $item.find(depth === 0 ? '.cl-nav-name' : '.cl-subnav-name').eq(0); 1189 const label = $.clnav.getMobileNavNameText($name).trim(); 1190 if(!label) return; 1191 1192 let key = label; 1193 if(keys[key]) key = `${depth}:${label}`; 1194 keys[key] = true; 1195 1196 options.push({ 1197 key: key, 1198 label: label, 1199 depth: depth, 1200 topmobile: $item.attr('data-topmobile'), 1201 disabled: $item.children('a').first().is('[attr-folder="true"]'), 1202 $item: $item 1203 }); 1204 }; 1205 1206 $thisHeader.find('.cl-nav-section.main .cl-nav-list > .cl-nav-item').each(function() { 1207 const $navItem = $(this); 1208 addOption($navItem,0); 1209 $navItem.find('.cl-subnav-list > .cl-subnav-item').each(function() { 1210 addOption($(this),1); 1211 }); 1212 }); 1213 1214 return options; 1215 }, 1216 getMobileNavNameText: function($name) { 1217 $name = $($name).first(); 1218 if(!$name.length) return ''; 1219 1220 if($name.is('[data-style="layered"]')) { 1221 const orgText = $name.find('.org').first().text(); 1222 if(orgText) return orgText; 1223 1224 const copyText = $name.find('.copy').first().text(); 1225 if(copyText) return copyText; 1226 } 1227 1228 if($name.is('[data-style="chars"]')) { 1229 const chars = $name.find('.cl-nav-char').map(function() { 1230 return $(this).attr('data-char') || $(this).text(); 1231 }).get(); 1232 if(chars.length) return chars.join(''); 1233 } 1234 1235 return $name.text(); 1236 }, 1237 normalizeMobileNavNames: function($nav) { 1238 $nav.find('.cl-nav-icon').remove(); 1239 $nav.find('.cl-nav-name, .cl-subnav-name').each(function() { 1240 const $name = $(this); 1241 const nameText = $.clnav.getMobileNavNameText($name); 1242 $name.removeAttr('data-style style').text(nameText); 1243 }); 1244 1245 return $nav; 1246 }, 1247 buildTopMobileNav: function($thisHeader) { 1248 const options = $.clnav.getTopMobileMenuOptions($thisHeader); 1249 const hasTopmobileConfig = options.some(function(item) { 1250 return typeof item.topmobile != 'undefined'; 1251 }); 1252 let selected = hasTopmobileConfig 1253 ? options.filter(function(item) { return !item.disabled && (item.topmobile === true || item.topmobile === 'true'); }).map(function(item) { return item.key; }) 1254 : $.clnav.getTopMobileMenuDefaultSelection($thisHeader); 1255 if(selected.length === 0) selected = $.clnav.getTopMobileMenuDefaultSelection($thisHeader); 1256 1257 const selectedMap = {}; 1258 selected.forEach(function(key) { 1259 selectedMap[key] = true; 1260 }); 1261 1262 const $nav = $('<ul class="clnav-topmobile-list clnav-mobile-nav"></ul>'); 1263 options.forEach(function(item) { 1264 if(item.disabled) return; 1265 if(!selectedMap[item.key]) return; 1266 1267 const $item = item.$item.clone(); 1268 $item 1269 .removeClass('cl-nav-item cl-subnav-item dropdown open hover last-hover') 1270 .addClass('clnav-topmobile-item'); 1271 $item.find('.clnav-nowrap-btn, .cl-nav-child, .cl-nav-caret, .cl-nav-depth, .cl-subnav-wrap').remove(); 1272 $item.find('.dropdown-menu').removeClass('dropdown-menu'); 1273 $item.find('.cl-subnav-name').removeClass('cl-subnav-name').addClass('cl-nav-name'); 1274 $item.children('a').removeClass('dropdown-toggle').removeAttr('data-toggle aria-expanded data-submenu'); 1275 $.clnav.normalizeMobileNavNames($item); 1276 $item.find('.cl-nav-name').removeClass('cl-nav-name').addClass('clnav-topmobile-name'); 1277 $nav.append($item); 1278 }); 1279 1280 return $nav; 1281 }, 1282 getSideMobileChevronIcon: function(thisHeader,cls) { 1283 let icon = getElementRootCss(thisHeader,'--sidemobile-chevron-icon','1') || '1'; 1284 let iconSize = getElementRootCss(thisHeader,'--sidemobile-chevron-icon-size','20px') || '20px'; 1285 if(clSVG(`mobile_chevron${icon}`,24,24,false) === '') icon = '1'; 1286 iconSize = normalizeBasemobileIconSize(iconSize); 1287 return clSVG(`mobile_chevron${icon}_${iconSize}`,24,24,true,cls || 'cl-nav-depth'); 1288 }, 1289 getMobileParts2: function(thisHeader,key) { 1290 const $brand = thisHeader.find('.cl-nav-brand').clone(); 1291 // $brand.find('.cl-nav-brand-text').remove(); 1292 1293 let depthSvg = $.clnav.getSideMobileChevronIcon(thisHeader,'cl-nav-depth'); 1294 1295 const $nav = thisHeader.find('.cl-nav-list').clone(); 1296 $nav.find('.clnav-nowrap-btn, .cl-nav-child, .cl-nav-caret').remove(); 1297 $nav.find('.dropdown-menu').removeClass('dropdown-menu'); 1298 $nav.find('.cl-nav-item.active.dropdown').addClass('open'); 1299 $nav.find('.cl-nav-item.dropdown.active').has('.cl-subnav-item.active, .cl-fixsubnav-item.active').removeClass('active'); 1300 $nav.find('.cl-nav-item.dropdown > a').append(depthSvg); 1301 1302 const $loginout = thisHeader.find('.cl-fixnav-list:not(._bottom) .cl-fixnav-item.loginout .cl-fixsubnav-wrap').clone(); 1303 1304 const $search = thisHeader.find('.cl-fixnav-list:not(._bottom) .cl-fixnav-item.search').clone(); 1305 $search.removeClass('search').addClass('m-search'); 1306 $search.find('.cl-fixnav-icon').html(clSVG('fixbtn_search4',28,28)); 1307 $search.find('.cl-fixnav-name').empty(); 1308 1309 const $lang = thisHeader.find('.cl-fixnav-list:not(._bottom) .cl-fixnav-item.lang').clone(); 1310 $lang.removeClass('lang').addClass('m-lang'); 1311 $lang.find('.cl-fixsubnav-wrap').prepend(`<div class="m-lang-close">${clSVG('close_l',16,16,false)}</div>`) 1312 $lang.find('.cl-fixnav-icon').html(clSVG(`fixbtn_lang5`,28,28,false)); 1313 $lang.find('.cl-fixnav-name').text($lang.attr('data-lang')); 1314 $lang.find('.cl-fixnav-arrow').empty(); 1315 1316 const parts = { 1317 brand: $brand, 1318 nav: $nav, 1319 loginout: $loginout, 1320 search: $search, 1321 lang: $lang, 1322 }; 1323 1324 if(typeof key == 'undefined') return parts; 1325 return parts[key]; 1326 }, 1327 getMobileParts: { 1328 1329 close: function(thisHeader,style) { 1330 const $closeBtn = $(`<div>${clSVG('close_l',18,18,true)}</div>`); 1331 switch(style) { 1332 case 'default': //sidemobile 1333 $closeBtn.html(clSVG('mobile_close1_24px',24,24,true,'close-icon')); 1334 $closeBtn.addClass('clnav-mobile-btn close'); 1335 const sidem_val = $.clnav.getMobileOptions(thisHeader,'side.val'); 1336 $closeBtn.toggleClass('m-l-auto', ($.inArray(sidem_val,['drawer1','drawer2','fullscreen1','fullscreen2']) > -1) ? true : false); 1337 break; 1338 1339 default: 1340 $closeBtn.addClass('btn-close'); 1341 break; 1342 } 1343 return $closeBtn; 1344 }, 1345 1346 search: function(thisHeader,style,opts) { 1347 opts = opts || {}; 1348 const isSidemobilePart = opts.sidemobile === true || thisHeader.is('.clnav-sidemobile'); 1349 const fixsearch_used = $.clnav.checkUsedArea('fixsearch'); 1350 if(!fixsearch_used) { 1351 return false;
1352 } 1353 1354 const $searchBtn = $(`<div></div>`); 1355 const $searchInput = $.clnav.buildSideMobileSearch(style || ''); 1356 switch(style) { 1357 case 'default': //sidemobile 1358 var setstyle = getElementRootCss(thisHeader,'--basemobile-set-icon','') || getElementRootCss(thisHeader,'--basemobile-cart-icon','1'); 1359 const searchsize = isSidemobilePart ? '24px' : normalizeBasemobileIconSize(getElementRootCss(thisHeader,'--basemobile-icon-size','24px')); 1360 const searchsizeNum = cssNumber(searchsize) || 24; 1361 const searchtype = isSidemobilePart 1362 ? `mobile_search${setstyle}` 1363 : getBasemobileIconType('mobile_search',setstyle,searchsize); 1364 let search_icon = clSVG(searchtype,searchsizeNum,searchsizeNum,true,'search-icon'); 1365 1366 if(!thisHeader.is('.cl-sample')) $('.dsgn-body').after($searchInput); 1367 $searchBtn.addClass('clnav-mobile-btn search'); 1368 $searchBtn.append(search_icon); 1369 break; 1370 1371 case 'inline': 1372 $searchBtn.addClass('clnav-mobile-btn search'); 1373 $searchBtn.append($searchInput); 1374 break; 1375 1376 default: 1377 $searchBtn.addClass('btn-search'); 1378 break; 1379 } 1380 return $searchBtn; 1381 }, 1382 1383 fix: function(thisHeader,style) { 1384 const $fixWrap = $('<div class="clnav-mobile-fix"></div>'); 1385 const mobileFixOff = $.clnav.getMobileOptions(thisHeader,'fixOff') || []; 1386 const isFixOn = function(className,key) { 1387 if($.inArray(key,mobileFixOff) > -1) return false; 1388 const $item = thisHeader.find(`.cl-fixnav-item.${className}:not(.hide)`).first(); 1389 if(!$item.length || $item.hasClass('sidemap')) return false; 1390 if(typeof $.clnav.checkFixnavStatue == 'function') return $.clnav.checkFixnavStatue(thisHeader,key,'on'); 1391 return true; 1392 }; 1393 const addPart = function(className,key,builder) { 1394 if(!isFixOn(className,key)) return; 1395 const $part = builder(); 1396 if($part && $part.length) $fixWrap.append($part); 1397 }; 1398 1399 addPart('search','search', function() { return $.clnav.getMobileParts.search(thisHeader,'default'); }); 1400 addPart('loginout','um', function() { return $.clnav.getMobileParts.um(thisHeader,'default'); }); 1401 addPart('cart','cart', function() { return $.clnav.getMobileParts.cart(thisHeader,'style'); }); 1402 addPart('lang','lang', function() { return $.clnav.getMobileParts.lang(thisHeader,'default'); }); 1403 1404 return $fixWrap.children().length ? $fixWrap : false; 1405 }, 1406 cart: function(thisHeader,style,opts) { 1407 opts = opts || {}; 1408 const isSidemobilePart = opts.sidemobile === true || thisHeader.is('.clnav-sidemobile'); 1409 const fixcart_used = thisHeader.find('.cl-fixnav-item.cart:not(.hide)').length > 0; 1410 if(!fixcart_used) { 1411 return false; 1412 } 1413 1414 const $cartBtn = $(`<div></div>`); 1415 let cart_icon = clSVG('mobile_cart2_24px',24,24,true); 1416 1417 switch(style) { 1418 case 'default': 1419 case 'style': 1420 //basemobile + sidemobile 1421 const cartstyle = getElementRootCss(thisHeader,'--basemobile-set-icon','') || getElementRootCss(thisHeader,'--basemobile-cart-icon','1'); 1422 const cartsize = isSidemobilePart ? '24px' : getElementRootCss(thisHeader,'--basemobile-icon-size','24px'); 1423 const cartsizeNum = cssNumber(cartsize) || 24; 1424 cart_icon = isSidemobilePart 1425 ? clSVG(`mobile_cart${cartstyle}`,24,24,true,'cart-icon') 1426 : clSVG(getBasemobileIconType('mobile_cart',cartstyle,cartsize),cartsizeNum,cartsizeNum,true,'cart-icon'); 1427 $cartBtn.addClass('clnav-mobile-btn cart').append($(cart_icon).addClass('cart-icon')); 1428 break; 1429 1430 case 'badge': 1431 const $fixcart = thisHeader.find('.cl-fixnav-list:not(._bottom) .cl-fixnav-cart-active'); 1432 const cart_active = $fixcart.attr('data-cart-active'); 1433 1434 $cartBtn.addClass('clnav-mobile-btn cart'); 1435 $cartBtn 1436 .append($(cart_icon).addClass('cart-icon')) 1437 .append(`<span class="cart-active" data-cart-active="${cart_active}"></span>`); 1438 break; 1439 1440 default: 1441 $cartBtn.addClass('btn-cart'); 1442 break; 1443 } 1444 1445 return $cartBtn; 1446 }, 1447 1448 brand: function(thisHeader,style) { 1449 const $fixbrand = thisHeader.find('.cl-nav-brand').clone(); 1450 const $brandBtn = $(`<div></div>`); 1451 1452 switch(style) { 1453 case 'default': 1454 $brandBtn.addClass('clnav-mobile-btn brand').append($fixbrand); 1455 break; 1456 case 'text': 1457 $brandBtn.addClass('clnav-mobile-btn brand').append( 1458 $fixbrand.find('.cl-nav-brand-text').clone().removeClass('cl-nav-brand-text').addClass('clnav-mobile-brand-text') 1459 ); 1460 break; 1461 case 'img': 1462 $brandBtn.addClass('clnav-mobile-btn brand').append( 1463 $fixbrand.find('.cl-nav-brand-image').clone().removeClass('cl-nav-brand-image').addClass('clnav-mobile-brand-image') 1464 ); 1465 break; 1466 case 'modoo': 1467 $brandBtn.addClass('clnav-mobile-btn brand').append( 1468 $fixbrand.find('.cl-nav-brand-image.default').clone().removeClass('cl-nav-brand-image default').addClass('clnav-mobile-brand-image') 1469 ); 1470 break; 1471 1472 default: 1473 break; 1474 } 1475 1476 return $brandBtn; 1477 }, 1478 1479 um: function(thisHeader,style,opts) { 1480 opts = opts || {}; 1481 const isSidemobilePart = opts.sidemobile === true || thisHeader.is('.clnav-sidemobile'); 1482 let _mem = $.clnav.s.mem || {}; 1483 if($.clnav.s.checkConfig) { 1484 // _mem = $.parseJSON(UMEMBER); 1485 _mem = {check_login: true, nick: 'í길ë', profile: ''} 1486 } 1487 1488 const fixum_used = $.clnav.checkUsedArea('fixum'); 1489 if(!fixum_used) { 1490 return false;
1491 } 1492 1493 const $umBtn = $(`<div></div>`); 1494 1495 const sidem_val = $.clnav.getMobileOptions(thisHeader,'side.val'); 1496 1497 const $login = $(`<div class="clnav-mobile-btn login"><span class="login-name">${$.lang[LANG]['config.comment.login-modal']}</span></div>`); 1498 const $logout = $(`<div class="clnav-mobile-btn logout">${$.lang[LANG]['manager.site-um.logout']}</div>`); 1499 const $mypage = $(`<div class="clnav-mobile-btn logout">${$.lang[LANG]['menu.fixbtn.um']}</div>`); 1500 const $mypageDropdown = $(` 1501 <div class="clnav-mobile-btn dropdown mypage" data-style="${style}"> 1502 <a href="javascript:;" draggable="false"> 1503 <span class="mypage-name">${$.lang[LANG]['menu.fixbtn.um']}</span> 1504 </a> 1505 </div> 1506 `); 1507 const $fixumDropdown = thisHeader.find('.cl-fixnav-list:not(._bottom) .cl-fixnav-item.loginout .cl-fixsubnav-wrap').first().clone().removeClass('dropdown-menu'); 1508 $mypageDropdown.append($fixumDropdown); 1509 const $user = $(`<div class="clnav-mobile-btn user"></div>`); 1510 1511 switch(style) { 1512 case 'default': //sidemobile 1513 $mypageDropdown.find('.cl-fixsubnav-wrap').prepend($.clnav.getMobileParts.close(thisHeader)); 1514 if(!isSidemobilePart) { 1515 const basemobileSetstyle = getElementRootCss(thisHeader,'--basemobile-set-icon','') || getElementRootCss(thisHeader,'--basemobile-cart-icon','1'); 1516 const basemobileIconSize = normalizeBasemobileIconSize(getElementRootCss(thisHeader,'--basemobile-icon-size','24px')); 1517 const basemobileIconSizeNum = cssNumber(basemobileIconSize) || 24; 1518 $login.html(clSVG(getBasemobileIconType('mobile_login',basemobileSetstyle,basemobileIconSize),basemobileIconSizeNum,basemobileIconSizeNum,true,'login-icon')); 1519 $mypageDropdown.find('.mypage-name').replaceWith(clSVG(getBasemobileIconType('mobile_mypage',basemobileSetstyle,basemobileIconSize),basemobileIconSizeNum,basemobileIconSizeNum,true,'mypage-icon')); 1520 $umBtn.append($login,$mypageDropdown); 1521 break; 1522 } 1523 1524 switch(sidem_val) { 1525 case 'drawer3': 1526 case 'defaultmodoo': 1527 $login.empty().append(`<span class="login-name">${$.lang[LANG]['manager.site-um.mobile.login']}`,clSVG('arrow_next',16,16,true,'login-icon static-svg')); 1528 $mypageDropdown.find('.mypage-name').replaceWith(` 1529 <div class="mypage-profile"> 1530 <img class="mypage-profile-img" src="//storage.googleapis.com/cr-resource/image/ca88a4ffad44d88281a70309eb5a61cd/creatorlinkkang/300/b05cbf919a226276714540b727a34f24.png?_0512" alt="profile image"> 1531 <span class="mypage-profile-name"></span> 1532 </div> 1533 `); 1534 $umBtn 1535 .append($login) 1536 .append($.clnav.s.checkModooHeader ? $logout : $mypageDropdown); 1537 break; 1538 1539 case 'drawer2': 1540 $user.append(`<div class="user-name">${$.lang[LANG]['menu.um.user.info']}</div>`); 1541 $mypageDropdown.find('.mypage-name').before(clSVG('mobile_drawer2_mypage',18,18,true,'mypage-icon static-svg')); 1542 $umBtn.append($login,$user,$mypageDropdown); 1543 break; 1544 1545 case 'default': 1546 case 'fullscreen1': 1547 case 'fullscreen2': 1548 var setstyle = getElementRootCss(thisHeader,'--basemobile-set-icon','') || getElementRootCss(thisHeader,'--basemobile-cart-icon','1'); 1549 $login.html(clSVG(`mobile_login${setstyle}`,24,24,true,'login-icon')); 1550 $mypageDropdown.find('.mypage-name').replaceWith(clSVG(`mobile_mypage${setstyle}`,24,24,true,'mypage-icon')); 1551 $umBtn.append($login,$mypageDropdown); 1552 break; 1553 1554 default: 1555 break; 1556 } 1557 break; 1558 1559 case 'accordion': 1560 $mypageDropdown.find('.mypage-close').remove(); 1561 $mypageDropdown.children('a').append($.clnav.getSideMobileChevronIcon(thisHeader,'cl-nav-depth m-l-auto')); 1562 $umBtn.append($login,$mypageDropdown); 1563 $umBtn.children().attr('data-style','accordion'); 1564 break; 1565 1566 case 'shopping': 1567 $login.append(clSVG('caret_right2',12,12,true,'login-icon static-svg')); 1568 $user.append(` 1569 <div class="user-name">${$.lang[LANG]['menu.um.user.info2']}</div> 1570 <div class="user-point user-shopping">${$.lang[LANG]['menu.um.shopping.point']}</div> 1571 <div class="user-coupon user-shopping">${$.lang[LANG]['menu.um.shopping.coupon']}</div> 1572 `); 1573 $umBtn.append($login,$user); 1574 break; 1575 1576 case 'login': $umBtn.append($login,); break; 1577 case 'logout': $umBtn.append($logout); break; 1578 case 'mypage': $umBtn.append($mypage); break; 1579 case 'mypagedropdown': $umBtn.append($fixumDropdown); break; 1580 default: 1581 break; 1582 } 1583 1584 const isLogin = _mem.check_login; 1585 $umBtn.find('.clnav-mobile-btn.login').toggleClass('hide', isLogin); 1586 $umBtn.find('.clnav-mobile-btn.logout, .clnav-mobile-btn.mypage, .clnav-mobile-btn.user').toggleClass('hide', !isLogin); 1587 if(_mem.check_login){ 1588 $umBtn.find(`.clnav-mobile-btn.mypage .mypage-profile-name, .clnav-mobile-btn.user .user-name-val`).text(_mem.nick || 'User'); 1589 $umBtn.find(`.clnav-mobile-btn.user .user-point-val`).text(Number(_mem.point || 0
1589).toLocaleString()); 1590 $umBtn.find(`.clnav-mobile-btn.user .user-coupon-val`).text(Number(_mem.coupon_count || 0).toLocaleString()); 1591 $umBtn.find(`.clnav-mobile-btn.mypage .mypage-profile-img`).attr('src', _mem.profile || '//storage.googleapis.com/i.addblock.net/member/profile_default.jpg'); 1592 } 1593 else { 1594 $umBtn.find('.clnav-mobile-btn.mypage .mypage-profile-img').attr('src','//storage.googleapis.com/i.addblock.net/member/profile_default.jpg'); 1595 $umBtn.find('.clnav-mobile-btn.mypage .mypage-profile-name, .clnav-mobile-btn.user span[class$="-val"]').empty(); 1596 } 1597 1598 return $umBtn.children(); 1599 }, 1600 1601 lang: function(thisHeader,style) { 1602 const fixlang_used = $.clnav.checkUsedArea('fixlang'); 1603 if(!fixlang_used) { 1604 return false; 1605 } 1606 1607 const _slang = $.clnav.s.slang || {}; 1608 const slangCode = ((_slang.select_code || 'ko').toString().trim() || 'ko').toLowerCase(); 1609 const slangLabel = slangCode.toUpperCase(); 1610 1611 const $langBtn = $(`<div class="clnav-mobile-btn dropdown lang" data-lang="${slangCode}" data-style="${style}"></div>`); 1612 $langBtn.append(thisHeader.find('.cl-fixnav-list .cl-fixnav-item.lang').first().clone().children().removeClass('dropdown-menu')); 1613 $langBtn.find('.cl-fixsubnav-wrap').prepend($.clnav.getMobileParts.close(thisHeader)); 1614 const makeBasemobileLangIcon = function(langstyle) { 1615 langstyle = (langstyle || '1').toString(); 1616 const svgOptions = (typeof getClSVGStyleOptions === 'function') ? getClSVGStyleOptions('mobile_lang') : ['1']; 1617 if($.inArray(langstyle, svgOptions) > -1) return $(clSVG(`mobile_lang${langstyle}`,24,24,true,'cl-fixnav-icon lang-icon')); 1618 return $(`<span class="cl-fixnav-icon lang-icon flag-circle circle"><span class="cl-fixnav-icon-img"></span></span>`); 1619 }; 1620 const applyBasemobileLangIcon = function(langstyle) { 1621 const $icon = makeBasemobileLangIcon(langstyle); 1622 const $oldIcon = $langBtn.find('.cl-fixnav-icon').first(); 1623 if($oldIcon.length) $oldIcon.replaceWith($icon); 1624 else $langBtn.prepend($icon); 1625 }; 1626 1627 switch(style) { 1628 case 'default': //sidemobile 1629 const sidem_val = $.clnav.getMobileOptions(thisHeader,'side.val'); 1630 switch(sidem_val) { 1631 case 'defaultmodoo': 1632 var langstyle = getElementRootCss(thisHeader,'--basemobile-lang-icon','') || getElementRootCss(thisHeader,'--basemobile-cart-icon','1'); 1633 applyBasemobileLangIcon(langstyle); 1634 $langBtn.find('.cl-fixnav-name').text(slangLabel); 1635 $langBtn.find('.cl-fixnav-arrow').empty(); 1636 break; 1637 1638 default: 1639 var langstyle = getElementRootCss(thisHeader,'--basemobile-lang-icon','') || getElementRootCss(thisHeader,'--basemobile-cart-icon','1'); 1640 1641 applyBasemobileLangIcon(langstyle); 1642 $langBtn.find('.cl-fixnav-name, .cl-fixnav-arrow').empty(); 1643 break; 1644 } 1645 break; 1646 1647 default: 1648 break; 1649 } 1650 return $langBtn; 1651 }, 1652 1653 nav: function(thisHeader,style) { 1654 const nav_used = $.clnav.checkUsedArea('nav'); 1655 if(!nav_used) { 1656 return false; 1657 } 1658 1659 let $depthsvg = $($.clnav.getSideMobileChevronIcon(thisHeader,'cl-nav-depth')); 1660 1661 const $nav = thisHeader.find('.cl-nav-list').clone(); 1662 $nav.addClass('clnav-mobile-nav'); 1663 $nav.find('.clnav-nowrap-btn, .cl-nav-child, .cl-nav-caret').remove(); 1664 $nav.find('.dropdown-menu').removeClass('dropdown-menu'); 1665 $nav.find('.cl-nav-item.active.dropdown').addClass('open'); 1666 $nav.find('.cl-nav-item.dropdown.active').has('.cl-subnav-item.active, .cl-fixsubnav-item.active').removeClass('active'); 1667 $.clnav.normalizeMobileNavNames($nav); 1668 1669 switch(style) { 1670 case 'default': //sidemobile 1671 $nav.find('.cl-nav-item.dropdown > a').append($depthsvg); 1672 break; 1673 1674 case 'tab': 1675 $nav.find('.cl-nav-item.dropdown > a').append($depthsvg); 1676 1677 let _mem = $.clnav.s.mem || {}; 1678 if($.clnav.s.checkConfig) { 1679 // _mem = $.parseJSON(UMEMBER); 1680 _mem = {check_login: true, nick: 'í길ë', profile: ''} 1681 } 1682 const $mypagedropdown = $.clnav.getMobileParts.um(thisHeader,'mypagedropdown'); 1683 if(!_mem.check_login || !$mypagedropdown.length) break; 1684 1685 const $tabs = $(` 1686 <div class="clnav-mobile-tabs"> 1687 <button type="button" class="clnav-mobile-tab active" data-tab-target="nav">${$.lang[LANG]['config.label.menu']}</button> 1688 <button type="button" class="clnav-mobile-tab" data-tab-target="mypage">${$.lang[LANG]['menu.fixbtn.um']}</button> 1689 </div> 1690 `); 1691 1692 $nav.attr('data-tab-panel', 'nav').addClass('active'); 1693 $mypagedropdown.addClass('clnav-mobile-mypage').attr('data-tab-panel', 'mypage'); 1694 1695 return $('<div></div>').append($tabs, $nav, $mypagedropdown).children(); 1696 1697 case 'main': 1698 $nav.find('.cl-nav-item').filter('.dropdown').removeClass('dropdown').find('.cl-subnav-wrap').remove(); 1699 break; 1700 1701 case 'top': 1702 return $.clnav.buildTopMobileNav(thisHeader); 1703 } 1704 1705 return $nav;
1706 } 1707 }, 1708 buildTopMobileTable: function($topmobile) { 1709 if(!$topmobile.is('[data-topmobile^="table"]')) return; 1710 const $topm_items = $topmobile.find('.clnav-topmobile-item'); 1711 $topm_items.removeClass('first-row last-row first-col last-col'); 1712 const topmobile_total = $topm_items.length; 1713 const topmobile_col = parseInt(getElementRootCss($topmobile,'--topmobile-col',3), 10) || 3; 1714 const topmobile_lastrowstart = Math.floor((topmobile_total - 1) / topmobile_col) * topmobile_col; 1715 1716 $topm_items.each(function(i) { 1717 if(i < topmobile_col) $(this).addClass('first-row'); 1718 if(i >= topmobile_lastrowstart) $(this).addClass('last-row'); 1719 1720 if(i % topmobile_col === 0) $(this).addClass('first-col'); 1721 if((i + 1) % topmobile_col === 0) $(this).addClass('last-col'); 1722 }); 1723 }, 1724 buildTopMobileSwipeButtons: function($topmobile) { 1725 $topmobile = $($topmobile).first(); 1726 if(!$topmobile.length) return $(); 1727 1728 $topmobile.children('.clnav-topmobile-move').remove(); 1729 if(!$topmobile.is('[data-topmobile="swipe2"]')) return $(); 1730 1731 const $list = $topmobile.children('.clnav-topmobile-list').first(); 1732 if(!$list.length) return $(); 1733 const moveIcon = '<svg class="clnav-topmobile-move-icon" viewBox="0 0 12 12" width="12" height="12" aria-hidden="true"><line class="top" x1="3.5" y1="6" x2="8.5" y2="6"></line><line class="bottom" x1="3.5" y1="6" x2="8.5" y2="6"></line></svg>'; 1734 const $prev = $(`<button type="button" class="clnav-topmobile-move prev hide" aria-label="Previous">${moveIcon}</button>`); 1735 const $next = $(`<button type="button" class="clnav-topmobile-move next hide" aria-label="Next">${moveIcon}</button>`); 1736 $list.before($prev).after($next); 1737 1738 return $list; 1739 }, 1740 buildTopMobileDropdown1: function($topmobile) { 1741 $topmobile = $($topmobile).first(); 1742 if(!$topmobile.length) return $(); 1743 1744 $topmobile.children('.clnav-topmobile-dropdown-btn, .clnav-topmobile-dropdown-list').remove(); 1745 if(!$topmobile.is('[data-topmobile="dropdown1"]')) return $(); 1746 1747 const $list = $topmobile.children('.clnav-topmobile-list').first(); 1748 if(!$list.length) return $(); 1749 1750 const $button = $(`<button type="button" class="clnav-topmobile-dropdown-btn" aria-label="Open menu" aria-expanded="false">${clSVG('arrow_down',12,12)}</button>`); 1751 const $dropdown = $('<ul class="clnav-topmobile-dropdown-list clnav-mobile-nav"></ul>'); 1752 const $dropdownItems = $list.children('.clnav-topmobile-item').clone(); 1753 const topmobile_col = parseInt(getElementRootCss($topmobile,'--topmobile-col',3), 10) || 3; 1754 const topmobile_lastrowstart = Math.floor(($dropdownItems.length - 1) / topmobile_col) * topmobile_col; 1755 1756 $dropdownItems.removeClass('first-row last-row first-col last-col').each(function(i) { 1757 if(i < topmobile_col) $(this).addClass('first-row'); 1758 if(i >= topmobile_lastrowstart) $(this).addClass('last-row'); 1759 if(i % topmobile_col === 0) $(this).addClass('first-col'); 1760 if((i + 1) % topmobile_col === 0) $(this).addClass('last-col'); 1761 }); 1762 1763 $dropdown.append($dropdownItems); 1764 $list.after($button, $dropdown); 1765 1766 return $list; 1767 }, 1768 applyTopMobileSwipe: function($topmobile) { 1769 $.clnav.buildTopMobileSwipeButtons($topmobile); 1770 if(!$topmobile.is('[data-topmobile^="swipe"], [data-topmobile="dropdown1"]')) return; 1771 1772 const $scroller = $topmobile.is('[data-topmobile="swipe2"], [data-topmobile="dropdown1"]') 1773 ? $topmobile.children('.clnav-topmobile-list').first() 1774 : $topmobile; 1775 const scroller = $scroller[0]; 1776 if(!scroller) return; 1777 const topmobile = $topmobile[0]; 1778 topmobile._clnavTopmobileSwipeId = topmobile._clnavTopmobileSwipeId || (`${Date.now()}${Math.floor(Math.random() * 100000)}`); 1779 const resizeEvent = `resize.clnavTopmobileSwipe${topmobile._clnavTopmobileSwipeId}`; 1780 1781 $topmobile.find('a').attr('draggable', false); 1782 1783 const setSwipeMoveButton = function($button, isVisible, isOpen) { 1784 const button = $button[0]; 1785 if(!button) return; 1786 1787 const state = `${isVisible ? 1 : 0}:${isOpen ? 1 : 0}`; 1788 if(button._clnavSwipeMoveState === state) return; 1789 1790 button._clnavSwipeMoveState = state; 1791 clearTimeout(button._clnavSwipeMoveTimer); 1792 1793 if(!isVisible) { 1794 $button.removeClass('is-open').addClass('hide'); 1795 return; 1796 } 1797 1798 $button.removeClass('hide'); 1799 if(isOpen) { 1800 button._clnavSwipeMoveTimer = setTimeout(function() { 1801 $button.addClass('is-open'); 1802 }, 120); 1803 } else { 1804 $button.removeClass('is-open'); 1805 } 1806 }; 1807 1808 const updateSwipeButtons = function(forceCollapse) { 1809 if(!$topmobile.is('[data-topmobile="swipe2"]')) return; 1810 1811 const maxScrollLeft = Math.max(0, scroller.scrollWidth - scroller.clientWidth); 1812 const hasScroll = maxScrollLeft > 1; 1813 const shouldCollapse = forceCollapse === true || $topmobile.hasClass('is-dragging'); 1814 const canMovePrev = hasScroll && scroller.scrollLeft > 1; 1815 const canMoveNext = hasScroll && scroller.scrollLeft < maxScrollLeft - 1; 1816 setSwipeMoveButton($topmobile.children('.clnav-topmobile-move.prev'), canMovePrev, canMovePrev && !shouldCollapse); 1817 setSwipeMoveButton($topmobile.children('.clnav-topmobile-move.
1817next'), canMoveNext, canMoveNext && !shouldCollapse); 1818 }; 1819 1820 const $active = $topmobile.find('.clnav-topmobile-item.active'); 1821 if($active.length) { 1822 $active[0].scrollIntoView({ 1823 inline:'center', 1824 block:'nearest' 1825 }); 1826 } 1827 updateSwipeButtons(); 1828 requestAnimationFrame(updateSwipeButtons); 1829 1830 if(scroller._clnavTopmobileSwipe === true) return; 1831 scroller._clnavTopmobileSwipe = true; 1832 1833 let isMouseDown = false; 1834 let isDrag = false; 1835 let startX = 0; 1836 let scrollLeft = 0; 1837 1838 const endDrag = function() { 1839 if(!isMouseDown) return; 1840 1841 isMouseDown = false; 1842 $topmobile.removeClass('is-dragging'); 1843 updateSwipeButtons(); 1844 1845 if(isDrag) { 1846 setTimeout(function() { 1847 isDrag = false; 1848 }, 0); 1849 } 1850 }; 1851 1852 scroller.addEventListener('wheel', function(e){ 1853 if(this.scrollWidth > this.clientWidth){ 1854 e.preventDefault(); 1855 $topmobile.addClass('is-dragging'); 1856 updateSwipeButtons(true); 1857 this.scrollLeft += e.deltaY; 1858 clearTimeout(this._clnavTopmobileWheelTimer); 1859 this._clnavTopmobileWheelTimer = setTimeout(() => { 1860 $topmobile.removeClass('is-dragging'); 1861 updateSwipeButtons(); 1862 }, 160); 1863 } 1864 }, { passive: false }); 1865 1866 scroller.addEventListener('mousedown', function(e) { 1867 if($(e.target).closest('.clnav-topmobile-move').length) return; 1868 if(e.button !== 0 || this.scrollWidth <= this.clientWidth) return; 1869 1870 e.preventDefault(); 1871 isMouseDown = true; 1872 isDrag = false; 1873 startX = e.pageX; 1874 scrollLeft = this.scrollLeft; 1875 $topmobile.addClass('is-dragging'); 1876 updateSwipeButtons(true); 1877 1878 document.addEventListener('mouseup', endDrag, { once: true }); 1879 }); 1880 1881 scroller.addEventListener('mousemove', function(e) { 1882 if(!isMouseDown || e.buttons !== 1) return; 1883 1884 const walk = e.pageX - startX; 1885 if(Math.abs(walk) > 3) isDrag = true; 1886 if(!isDrag) return; 1887 1888 e.preventDefault(); 1889 this.scrollLeft = scrollLeft - walk; 1890 }); 1891 1892 scroller.addEventListener('click', function(e) { 1893 if(!isDrag) return; 1894 1895 e.preventDefault(); 1896 e.stopImmediatePropagation(); 1897 isDrag = false; 1898 }, true); 1899 1900 scroller.addEventListener('dragstart', function(e) { 1901 e.preventDefault(); 1902 }); 1903 1904 scroller.addEventListener('selectstart', function(e) { 1905 if(isMouseDown) e.preventDefault(); 1906 }); 1907 1908 scroller.addEventListener('scroll', updateSwipeButtons, { passive: true }); 1909 $(window).off(resizeEvent).on(resizeEvent, updateSwipeButtons); 1910 $topmobile.off('click.clnavTopmobileSwipe', '.clnav-topmobile-move').on('click.clnavTopmobileSwipe', '.clnav-topmobile-move', function(e) { 1911 e.preventDefault(); 1912 1913 const dir = $(this).is('.prev') ? -1 : 1; 1914 const topmobileStyle = getComputedStyle(topmobile); 1915 const moveWidth = parseFloat(topmobileStyle.getPropertyValue('--topmobile-move-w')) || 34; 1916 const paddingCol = parseFloat(topmobileStyle.getPropertyValue('--topmobile-padding-col')) || 0; 1917 const moveOffset = Math.max(0, moveWidth - paddingCol); 1918 const maxScrollLeft = Math.max(0, scroller.scrollWidth - scroller.clientWidth); 1919 const baseMove = Math.max(scroller.clientWidth * 0.75, 120); 1920 let targetLeft = scroller.scrollLeft + (dir * baseMove); 1921 1922 if(dir > 0 && scroller.scrollLeft <= 1) targetLeft += moveOffset; 1923 if(dir < 0 && targetLeft <= moveOffset) targetLeft = 0; 1924 targetLeft = Math.max(0, Math.min(maxScrollLeft, targetLeft)); 1925 1926 scroller.scrollTo({ 1927 left: targetLeft, 1928 behavior: 'smooth' 1929 }); 1930 }); 1931 }, 1932 applyTopMobileDropdown1: function($topmobile) { 1933 if(!$topmobile.is('[data-topmobile="dropdown1"]')) return; 1934 $.clnav.buildTopMobileDropdown1($topmobile); 1935 $topmobile.off('click.clnavTopmobileDropdown1', '.clnav-topmobile-dropdown-btn').on('click.clnavTopmobileDropdown1', '.clnav-topmobile-dropdown-btn', function(e) { 1936 e.preventDefault(); 1937 e.stopPropagation(); 1938 const isOpen = !$topmobile.hasClass('open'); 1939 $topmobile.toggleClass('open', isOpen); 1940 $topmobile.closest('.dropdown-sample').toggleClass('dropdown-open', isOpen); 1941 $(this).attr('aria-expanded', isOpen ? 'true' : 'false'); 1942 }); 1943 }, 1944 syncTopMobileLine: function($header,$topmobile) {
1945 const keys = [ 1946 '--topmobile-line-onoff', 1947 '--topmobile-line-width', 1948 '--topmobile-line-style', 1949 '--topmobile-line-color', 1950 '--topmobile-line-final', 1951 '--topmobile-line-final-width', 1952 '--topmobile-tline-onoff', 1953 '--topmobile-tline-width', 1954 '--topmobile-tline-style', 1955 '--topmobile-tline-color', 1956 '--topmobile-tline-final', 1957 '--topmobile-tline-final-width' 1958 ]; 1959 1960 $header = $($header).first(); 1961 $topmobile = $($topmobile).first(); 1962 if(!$header.length) return; 1963 1964 if(!$topmobile.length) { 1965 $header.removeAttr('data-topmobile-sticky'); 1966 keys.forEach(key => $header[0].style.removeProperty(key)); 1967 return; 1968 } 1969 1970 const topmobileStyle = getComputedStyle($topmobile[0]); 1971 $header.attr('data-topmobile-sticky', $topmobile.attr('data-sticky') || 'OFF'); 1972 keys.forEach(function(key) { 1973 const val = topmobileStyle.getPropertyValue(key).trim(); 1974 if(val) $header[0].style.setProperty(key,val); 1975 else $header[0].style.removeProperty(key); 1976 }); 1977 }, 1978 setTopMobile: function(thisHeader) { 1979 $('.clnav-topmobile').not('.change-mobile-modal .clnav-topmobile, .change-mobile-design-modal .clnav-topmobile').remove(); 1980 1981 var topm_opts = $.clnav.getMobileOptions(thisHeader,'top'); 1982 if(topm_opts.val === '') { 1983 $.clnav.syncTopMobileLine(thisHeader,$()); 1984 return false; 1985 } 1986 1987 var topm_func = `TopMobile${topm_opts.val.charAt(0).toUpperCase()}${topm_opts.val.slice(1)}`; 1988 1989 var $topmobile = $(` 1990 <div class="clnav-topmobile" data-topmobile="${topm_opts.val}" data-sticky="${topm_opts.sticky}"> 1991 </div> 1992 `); 1993 $topmobile.append($.clnav.getMobileParts.nav(thisHeader,'top')); 1994 1995 thisHeader.parent().after($topmobile); 1996 1997 if(typeof $.clnav[`build${topm_func}`] == 'function') { 1998 $.clnav[`build${topm_func}`]($topmobile); 1999 } 2000 2001 $.clnav.buildTopMobileTable($topmobile); 2002 $.clnav.applyTopMobileSwipe($topmobile); 2003 2004 if(typeof $.clnav[`apply${topm_func}`] == 'function') { 2005 $.clnav[`apply${topm_func}`]($topmobile); 2006 } 2007 2008 $.clnav.syncTopMobileLine(thisHeader,$topmobile); 2009 }, 2010 getSideMobileLayouts: { 2011 /* 2012 close 2013 nav 2014 search|-inline 2015 cart 2016 um|-shopping|-accordion 2017 lang 2018 */ 2019 default: function() { 2020 return { 2021 top: ['um','cart','lang','search','close'], 2022 main: ['nav'] 2023 }; 2024 }, 2025 defaultmodoo: function() { 2026 return { 2027 top: [['close'],['brand-modoo']], 2028 main: ['nav'] 2029 }; 2030 }, 2031 drawer1: function() { 2032 return { 2033 top: [['search','cart','lang','close'],['um-shopping']], 2034 main: ['nav-tab'] 2035 }; 2036 }, 2037 drawer2: function() { 2038 return { 2039 top: [['cart','lang','close'],['um'],['search-inline']], 2040 main: ['nav'] 2041 }; 2042 }, 2043 drawer3: function() { 2044 return { 2045 top: ['cart','um','search','close'], 2046 main: ['nav'], 2047 bottom: ['lang'] 2048 }; 2049 }, 2050 fullscreen1: function() { 2051 return { 2052 top: [['close'],['cart','search','um']], 2053 main: ['nav'], 2054 bottom: ['lang'] 2055 }; 2056 }, 2057 fullscreen2: function() { 2058 return { 2059 top: [['close'],['cart','search','um']], 2060 main: ['nav'], 2061 bottom: ['lang'] 2062 }; 2063 }, 2064 }, 2065 buildSideMobileSearch: function(style) { 2066 const $psearch = $(` 2067 <div class="clnav-psearch" data-style="${style}"> 2068 <div class="clnav-psearch-body"> 2069 <div class="clnav-psearch-input-group input-group"> 2070 <input type="text" class="clnav-psearch-input form-control" aria-describedby="clnav-psearch-btn" placeholder="${$.lang[LANG]['psearch.input.placeholder']}" value="" data-prev=""> 2071 <button class="clnav-psearch-btn btn" type="button">${clSVG('fixbtn_search4',55,55)}</button> 2072 </div> 2073 <div class="clnav-psearch-error"></div> 2074 </div> 2075 </div> 2076 `); 2077 2078 switch(style) { 2079 case 'default': 2080 $psearch.find('.clnav-psearch-body').wrap('<div class="container full-width"></div>'); 2081 $psearch.find('.container').prepend(`<span class="clnav-psearch-close">${clSVG('close_l',16,16,true)}</span>`); 2082 break; 2083 2084 case 'inline': 2085 break; 2086 2087 default: 2088 break; 2089 } 2090 2091 return $psearch; 2092 }, 2093 buildSideMobileBanner: function(thisHeader,showPlaceholder) { 2094 const $moption = thisHeader.find('.cl-nav-option-m').first(); 2095 if($moption.attr('data-sidemobile-banner') !== 'true') return $(); 2096 2097 const src = $moption.attr('data-sidemobile-banner-img') || '';
2098 const rawLink = $moption.attr('data-sidemobile-banner-link') || ''; 2099 const href = $moption.attr('data-sidemobile-banner-href') || ''; 2100 const linkType = $moption.attr('data-sidemobile-banner-link-type') || ''; 2101 const target = $moption.attr('data-sidemobile-banner-target') === '_blank' ? '_blank' : ''; 2102 const placeholder = $.lang[LANG]['config.label.sidemobile.banner.placeholder'] || 'ì´ë¯¸ì§ë¥¼ ì ì©í´ì£¼ì¸ì'; 2103 const $section = $('<section class="clnav-sidemobile-section banner"></section>'); 2104 2105 if(!src) { 2106 if(showPlaceholder !== true) return $(); 2107 const $placeholder = $('<span class="clnav-sidemobile-banner-placeholder"></span>'); 2108 String(placeholder).split(/<br\s*\/?>|\r\n?|\n/gi).forEach(function(line,index) { 2109 if(index > 0) $placeholder.append('<br>'); 2110 $placeholder.append(document.createTextNode(line)); 2111 }); 2112 $section.append($placeholder); 2113 return $section; 2114 } 2115 2116 const $img = $('<img class="clnav-sidemobile-banner-image" alt="">').attr('src',src); 2117 if(!href) { 2118 $section.append($img); 2119 return $section; 2120 } 2121 2122 const $link = $('<a class="clnav-sidemobile-banner-link"></a>').attr('href',href).append($img); 2123 switch(linkType) { 2124 case 'link-menu': 2125 $link.attr('data-user-link',href); 2126 break; 2127 2128 case 'link-bookmark': 2129 $link.attr('attr-bookmark',rawLink.replace(/^\@/,'')); 2130 break; 2131 2132 case 'link-file': 2133 $link.attr('attr-flink',rawLink.replace(/^flink\@/i,'')); 2134 break; 2135 2136 case 'link-popup': 2137 const popupInfo = rawLink.split('||'); 2138 $link.attr({ 2139 'data-popup': rawLink, 2140 'data-popup-name': popupInfo[1] || '' 2141 }); 2142 break; 2143 2144 default: 2145 $link.attr('attr-link',rawLink); 2146 break; 2147 } 2148 2149 if(linkType !== 'link-file' && linkType !== 'link-popup' && target) $link.attr('target',target); 2150 return $section.append($link); 2151 }, 2152 appendSideMobileBanner: function(thisHeader,$sidemobile,showPlaceholder) { 2153 const $banner = $.clnav.buildSideMobileBanner(thisHeader,showPlaceholder); 2154 if(!$banner.length) return; 2155 2156 let $bottom = $sidemobile.find('.clnav-sidemobile-section.bottom').first(); 2157 if(!$bottom.length) { 2158 $bottom = $('<section class="clnav-sidemobile-section bottom"></section>').appendTo($sidemobile.find('.clnav-sidemobile-body')); 2159 } 2160 $bottom.after($banner); 2161 }, 2162 2163 setSideMobile: function(thisHeader) { 2164 $('.clnav-psearch, .clnav-sidemobile').not('.change-mobile-modal .clnav-psearch, .change-mobile-modal .clnav-sidemobile, .change-mobile-design-modal .clnav-psearch, .change-mobile-design-modal .clnav-sidemobile').remove(); 2165 $.clnav.el = $.clnav.el || {}; 2166 $.clnav.el.sidemobile = $(); 2167 const ensureDefaultPsearch = function() { 2168 if(thisHeader.is('.cl-sample') || !$.clnav.checkUsedArea('fixsearch')) return; 2169 const $defaultPsearch = $('.clnav-psearch[data-style="default"]').filter(function() { 2170 return $(this).closest('.change-mobile-modal, .change-mobile-design-modal').length === 0; 2171 }); 2172 if($defaultPsearch.length > 0) return; 2173 2174 $('.dsgn-body').after($.clnav.buildSideMobileSearch('default')); 2175 }; 2176 2177 const sidem_opts = $.clnav.getMobileOptions(thisHeader,'side'); 2178 const sidem_onoff = sidem_opts.onoff && $.clnav.hasMobileToggleContent(thisHeader); 2179 thisHeader.find('.cl-nav-toggle').each(function() { 2180 $(this).toggleClass('hide', !sidem_onoff); 2181 }); 2182 if(!sidem_onoff) { 2183 ensureDefaultPsearch(); 2184 return false; 2185 } 2186 2187 const sidem_layout = $.clnav.getSideMobileLayouts[sidem_opts.val](); 2188 2189 const $sidemobile = $(` 2190 <div class="clnav-sidemobile" data-sidemobile="${sidem_opts.val}"> 2191 <div class="clnav-sidemobile-body"> 2192 </div> 2193 </div> 2194 `); 2195 2196 $.each(sidem_layout, function(name,parts) { 2197 const $section = $(`<section class="clnav-sidemobile-section ${name}"></section>`); 2198 2199 const appendPart = function($target, part) { 2200 const keys = part.split('-'); 2201 const type = keys[0]; 2202 const style = keys[1] || 'default'; 2203 2204 const part_builder = $.clnav.getMobileParts[type]; 2205 if(typeof part_builder == 'function') { 2206 let $part = part_builder(thisHeader, style, {sidemobile:true}); 2207 if(!$part.length) return; 2208 2209 if(part == 'nav-tab') { 2210 const $tabs = $part.closest('.clnav-mobile-tabs'); 2211 if($tabs.length) { 2212 $sidemobile.find('.clnav-sidemobile-section.top').append( 2213 $('<div class="section-row row-tab"></div>').append($tabs.clone()) 2214 ); 2215 $part = $part.not($tabs); 2216 } 2217 } 2218 2219 $target.append($part); 2220 } 2221 }; 2222 2223 const is_row_layout = $.inArray(name, ['top','bottom']) > -1 || parts.some(Array.isArray); 2224 const rows = is_row_layout ? (parts.some(Array.isArray) ? parts : [parts]) : parts; 2225 2226 $.each(rows, function(idx,part) { 2227 if(is_row_layout && Array.isArray(part)) { 2228 const $row = $(`<div class="section-row row-${idx + 1}"></div>`); 2229 2230 $.each(part, function(row_idx,row_part) { 2231 appendPart($row, row_part); 2232 }); 2233 2234 if($row.children().length) { 2235 $section.append($row); 2236 } 2237 return true; 2238 } 2239 2240 appendPart($section, part); 2241 }); 2242 2243 $sidemobile.find('.clnav-sidemobile-body').append($section); 2244 }); 2245 2246 $.clnav.appendSideMobileBanner(thisHeader,$sidemobile); 2247 2248 $('body').append($sidemobile); 2249 $.clnav.el.sidemobile = $('.clnav-sidemobile'); 2250 ensureDefaultPsearch(); 2251 }, 2252 setMobileStyle: function(thisHeader) { 2253 const $toggle = thisHeader.find('.cl-nav-toggle'); 2254 const toggleRootStyle = getElementRootCss(thisHeader,'--basemobile-toggle-icon',''); 2255 const toggleMobileStyle = toggleRootStyle || $toggle.attr('data-style') || '1'; 2256 if(toggleRootStyle !== '') $toggle.removeAttr('data-style'); 2257 $toggle.html(getClnavToggleIconHtml(thisHeader,toggleMobileStyle)); 2258 2259 const $mainSection = thisHeader.find('.cl-nav-section.main'); 2260 $mainSection.find('.clnav-mobile-fix, .container > .clnav-mobile-btn.cart').remove(); 2261 const $fixPart = $.clnav.getMobileParts.fix(thisHeader,'style'); 2262 if($fixPart && $fixPart.length) $mainSection.find('.cl-nav-toggle').parent().append($fixPart); 2263 2264 $.clnav.setTopMobile(thisHeader); 2265 $.clnav.setSideMobile(thisHeader); 2266 refreshMobileSetIconWhiteState(thisHeader.add($.clnav.el.sidemobile)); 2267 thisHeader.attr('data-basemobile-empty', $.clnav.isBasemobileHeaderUsed(thisHeader) ? 'false' : 'true'); 2268 }, 2269 refreshMobileStyle: function() { 2270 if(!$.clnav.check()) return; 2271 2272 const $header = ($.clnav.el?.header?.length) ? $.clnav.el.header.first() : $('.cl-nav').first(); 2273 if(!$header.length) return; 2274 2275 $.clnav.setMobileStyle($header); 2276 $.clnav.setMode('overlap,sticky'); 2277 2278 if(!$('html').is('[data-bp="mobile"]')) { 2279 $('.clnav-topmobile:not(.cl-sample)').not('.change-mobile-modal .clnav-topmobile, .change-mobile-design-modal .clnav-topmobile').remove(); 2280 $.clnav.setMode('sidemobile-open',false); 2281 } 2282 2283 $.clnav.setRootcss(); 2284 }, 2285 init: function() { 2286 // console.log(`[clnav_step_1 /4] ___$.clnav.init()`); 2287 var sample_tag = { 2288 default: ` 2289 <header class="cl-nav menu-top1" data-layout="topnav" data-layout-pattern="1row/3col/brand--nav_fix" data-behavior="dropdown" data-nav-style="none" data-subnav-style="boxed1" data-fixnav-set-style="4" data-fixnav-lang-style="6"> 2290 <input type="hidden" class="cl-nav-option" data-layout-pattern-brand="1-left" data-layout-pattern-nav="1-right" data-layout-pattern-fix="1-right"> 2291 <input type="hidden" class="cl-nav-option-m" data-layout-pattern-toggle="1-right" data-layout-pattern-brand="1-left" data-layout-pattern-fixcart="1-right"> 2292 <div class="cl-nav-section main"> 2293 <div class="container"> 2294 <div class="cl-nav-toggle"></div> 2295 <div class="cl-nav-brand"> 2296 <a href="/config" data-recommend="170 X 70"> 2297 <img class="cl-nav-brand-image default" src="//storage.googleapis.com/i.addblock.net/template/menu_normal_1_logo.png" alt=""> 2298 <span class="cl-nav-brand-text hide">
2298M A R K R O S S O U</span> 2299 </a> 2300 </div> 2301 <ul class="cl-fixnav-list"> 2302 <li class="cl-fixnav-item search"><a href="#"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">SEARCH</span></a></li> 2303 <li class="cl-fixnav-item loginout"> 2304 <a href="#" class="login"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">LOGIN</span></a> 2305 <a href="#" class="logout"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">LOGOUT</span></a> 2306 <a href="#" class="mypage dropdown-toggle" style="display: none;"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">MY PAGE</span></a> 2307 <div class="cl-fixsubnav-wrap dropdown-menu"> 2308 <ul class="cl-fixsubnav-list"> 2309 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">Dashboard</span></a></li> 2310 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">My Account</span></a></li> 2311 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">Logout</span></a></li> 2312 </ul> 2313 </div> 2314 </li> 2315 <li class="cl-fixnav-item cart"> 2316 <a href="#"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">CART</span><span class="cl-fixnav-cart-active" data-cart-active="5"></span></a> 2317 </li> 2318 <li class="cl-fixnav-item slang"> 2319 <a href="#"><span class="cl-fixnav-icon">KO</span><span class="cl-fixnav-name"></span><span class="cl-fixnav-arrow"></span></a> 2320 <div class="cl-fixsubnav-wrap dropdown-menu"> 2321 <ul class="cl-fixsubnav-list"> 2322 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">Korean</span></a></li> 2323 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">English</span></a></li> 2324 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">Japanese</span></a></li> 2325 </ul> 2326 </div> 2327 </li> 2328 </ul> 2329 <ul class="cl-nav-list"> 2330 <li class="cl-nav-item active"><a href="#"><span class="cl-nav-name">í</span></a></li> 2331 <li class="cl-nav-item"><a href="#"><span class="cl-nav-name">í¬í¸í´ë¦¬ì¤</span></a></li> 2332 <li class="cl-nav-item dropdown"> 2333 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="cl-nav-name">ìê°</span> <span class="cl-nav-caret" data-style="caret_down"></span></a> 2334 <div class="cl-subnav-wrap dropdown-menu"> 2335 <ul class="cl-subnav-list"> 2336 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">íì¬ìê°</span></a></li> 2337 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">ìë¹ì¤</span></a></li> 2338 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">íë¡ì í¸</span></a></li> 2339 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">문ì</span></a></li> 2340 </ul> 2341 </div> 2342 </li> 2343 <li class="cl-nav-item"><a href="#"><span class="cl-nav-name">문ì</span></a></li> 2344 </ul> 2345 </div> 2346 </div> 2347 </header> 2348 `, 2349 modooat: ` 2350 <header class="cl-nav menu-top27" data-by="mda" data-layout="topnav" data-layout-pattern="1row/3col/brand_nav--fix" data-behavior="overflow-nowrap" data-nav-style="none" data-subnav-style="boxed6" data-fixnav-set-style="3" data-fixnav-lang-style="8"> 2351 <input type="hidden" class="cl-nav-option" data-layout-pattern-brand="1-left" data-layout-pattern-nav="1-left" data-layout-pattern-fix="1-right" data-sidemap="true" data-fixnav-size="large"> 2352 <input type="hidden" class="cl-nav-option-m"> 2353 <div class="cl-nav-section main"> 2354 <div class="container full-width"> 2355 <div class="cl-nav-toggle"></div> 2356 <div class="cl-nav-brand"> 2357 <a href="/config" data-recommend="170 X 80"> 2358 <img class="cl-nav-brand-image default" src="//storage.googleapis.com/i.addblock.net/template/eunoia_logo.png" alt=""> 2359 <span class="cl-nav-brand-text hide">eunoia</span> 2360 </a> 2361 </div> 2362 <ul class="cl-fixnav-list"> 2363 </ul> 2364 <ul class="cl-nav-list"> 2365 <li class="cl-nav-item active"><a href="#"><span class="cl-nav-name">í</span></a></li> 2366 <li class="cl-nav-item"><a href="#"><span class="cl-nav-name">í¬í¸í´ë¦¬ì¤</span></a></li> 2367 <li class="cl-nav-item dropdown"> 2368 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="cl-nav-name">ìê°</span><span class="cl-nav-child">3</span><span class="cl-nav-caret" data-style="caret_down"></span></a> 2369 <div class="cl-subnav-wrap dropdown-menu"> 2370 <ul class="cl-subnav-list"> 2371 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">íì¬ìê°</span></a></li> 2372 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">ìë¹ì¤</span></a></li> 2373 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">íë¡ì í¸</span></a></li> 2374 <li class="cl-subnav-item"><a href="#"><span class="cl-subnav-name">문ì</span></a></li> 2375 </ul> 2376 </div> 2377 </li> 2378 <li class="cl-nav-item"><a href="#"><span class="cl-nav-name">문ì</span></a></li> 2379 </ul> 2380 </div> 2381 </div> 2382 <div class="cl-nav-section sub"> 2383 </div> 2384 </header> 2385 ` 2386 }; 2387 2388 $.clnav.s = { 2389 mode: (PAGE_MODE == 'c') ? MODE : property.MODE, 2390 sid: (PAGE_MODE == 'c') ? SID : property.SID, 2391 service: (PAGE_MODE == 'c') ? SERVICE : property.SERVICE, 2392 plan_is: (PAGE_MODE == 'c') ? VALIDPLAN : property.VALIDPLAN, 2393 plan_type: (PAGE_MODE == 'c') ? VALIDTYPE : property.VALIDTYPE, 2394 slang: (PAGE_MODE == 'c') ? SLANG : property.SLANG, 2395 scart: (PAGE_MODE == 'c') ? 0 : property.CART, 2396 um: (PAGE_MODE == 'c') ? SITEUM : property.SITEUM, 2397 um_lang: (PAGE_MODE == 'c') ? SITEUMLANG : property.SITEUMLANG, 2398 um_display: (PAGE_MODE == 'c') ? SITEUMDISPLAY : property.SITEUMDISPLAY, 2399 settings: (PAGE_MODE == 'c') ? SETTINGS : property.SETTINGS, 2400 2401 mem: (PAGE_MODE == 'c') ? {} : property.UMEMBER, 2402 2403 view: (PAGE_MODE == 'c') ? VIEW : property.VIEW, 2404 view_parent: (PAGE_MODE == 'c') ? PARENT : property.PARENT, 2405 2406 overlap: (PAGE_MODE == 'c') ? HEADER : property?.HEADER ?? false, 2407 page: (PAGE_MODE == 'c') ? PAGE : property.PAGE, 2408 menuoption: (PAGE_MODE == 'c') ? MENUOPTION : property.MENUOPTION, 2409 menulink: (PAGE_MODE == 'c') ? MENULINK : property.MENULINK, 2410 smenucss: (PAGE_MODE == 'c') ? MCSS : getOrDefault(property.MCSS,'',{}), 2411 mpage: (PAGE_MODE == 'c') ? MPAGE : property.MPAGE, 2412 url: { 2413 page: (PAGE_MODE == 'c') ? '/config/page/' : ((typeof property.PUBLISH != 'undefined' && property.PUBLISH) ? '/' : '/render/page/'), 2414 home: (PAGE_MODE == 'c') ? '/config/' : ((typeof property.PUBLISH != 'undefined' && property.PUBLISH) ? '/' : '/render'), 2415 }, 2416 2417 checkDemo: (PAGE_MODE == 'c') ? ((MODE == 'demo') ? true : false) : false, 2418 checkConfig: (PAGE_MODE == 'c') ? true : false, 2419 checkRender: (PAGE_MODE == 'r') ? true : false, 2420 checkSite: (PAGE_MODE == 's') ? true : false, 2421 checkGabia: false, 2422 checkFREE: true, 2423 checkBS: false, 2424 checkBN: false, 2425 checkSM: false, 2426 checkLogin: false, 2427 checkAdmin: false, 2428 checkUadmin: false, 2429 checkGroot: false, 2430 checkModoo: (PAGE_MODE == 'c') ? !$.isEmptyObject(SETTINGS.modoo || {}) : !$.isEmptyObject(property.SETTINGS.modoo || {}), 2431 checkCLPage: false, 2432 }; 2433 2434 if($.clnav.s.checkDemo) $.clnav.s.url.home = `/demo/${$.clnav.s.sid}`; 2435 if($.clnav.s.view) $.clnav.s.mpage = $.clnav.s.view_parent.page; 2436 if($.clnav.s.service.indexOf('gabia') > -1) $.clnav.s.checkGabia = true; 2437 if($.clnav.s.plan_is && $.clnav.s.plan_type != 'PK') { 2438 $.clnav.s.checkFREE = false;
2439 2440 if($.clnav.s.plan_type == 'BS') $.clnav.s.checkBS = true; 2441 if($.clnav.s.plan_type == 'BN') $.clnav.s.checkBN = true; 2442 if($.clnav.s.plan_type == 'SM') $.clnav.s.checkSM = true; 2443 } 2444 if(typeof $.clnav.s.mem != 'undefined' && !$.isEmptyObject($.clnav.s.mem)) { 2445 $.clnav.s.checkLogin = $.clnav.s.mem.check_login; 2446 $.clnav.s.checkAdmin = $.clnav.s.mem.check_adm; 2447 $.clnav.s.checkUadmin = $.clnav.s.mem.check_uadm; 2448 $.clnav.s.checkGroot = $.clnav.s.mem.check_groot; 2449 } 2450 2451 $.clnav.d = { 2452 isElViewer: false, 2453 isReload: $('.clnav-sidemobile').length > 0 ? true : false, 2454 2455 eTraget: '', 2456 isMouseDown: false, 2457 isDrag: false, 2458 isTouch: false, 2459 startX: 0, 2460 startY: 0, 2461 scrollLeft: 0, 2462 scrollTop: 0, 2463 2464 name: 'cl-nav', 2465 wrap: '.el-menu', 2466 sample: {}, 2467 }; 2468 2469 if(window.parent && window.parent != this && $('.elviewhtml').length > 0) { 2470 $.clnav.d.isElViewer = true; 2471 $.clnav.s.name = $('#el-list-image .elgrid.active', window.parent.document).find('.blockname-str').text().trim(); 2472 $.clnav.s.sid = $.clnav.s.name.replace(/^menu\-/,''); 2473 $.clnav.d.wrap = '.elviewhtml'; 2474 } else { 2475 $.clnav.d.name = `menu-${$.clnav.s.sid}`; 2476 } 2477 2478 // old ver set mobile data asdfasdftest 2479 $(`${$.clnav.d.wrap} header.cl-nav[data-layout-pattern-m]`).each(function() { 2480 $(this) 2481 .removeAttr('data-layout-pattern-m') 2482 .attr({ 2483 'data-basemobile': $.clnav.getDefaultBasemobile($(this)), // basemobile pattern 2484 'data-topmobile': '', // 미ì¬ì©=ë¹ê° | default | table1 | table2 | swipe1 | swipe2 | dropdown1 2485 }); 2486 $(this).find('.cl-nav-option-m') 2487 .removeAttr('data-layout-pattern-toggle') 2488 .removeAttr('data-layout-pattern-brand') 2489 .removeAttr('data-layout-pattern-fixcart') 2490 .removeAttr('data-sidemobile'); 2491 }); 2492 2493 $(`${$.clnav.d.wrap} header.cl-nav:not([data-basemobile])`).each(function() { 2494 $(this).attr('data-basemobile', $.clnav.getDefaultBasemobile($(this))); 2495 }); 2496 2497 $.clnav.el = {}; 2498 $.clnav.el.header = $(`${$.clnav.d.wrap} header.cl-nav`); 2499 $.clnav.el.option = $.clnav.el.header.find('.cl-nav-option'); 2500 $.clnav.el.option_m = $.clnav.el.header.find('.cl-nav-option-m'); 2501 $.clnav.el.brand = $.clnav.el.header.find('.cl-nav-brand'); 2502 $.clnav.el.nav = $.clnav.el.header.find('.cl-nav-list'); 2503 $.clnav.el.fix = $.clnav.el.header.find('.cl-fixnav-list:not(._bottom)'); 2504 2505 $.clnav.el.header.closest('html').addClass(`clroot clroot-menu-${$.clnav.s.sid}`); 2506 $.clnav.s.checkModooHeader = ($.clnav.s.checkModoo) ? $.clnav.el.header.is('[data-by="mda"]') : false; 2507 2508 /* ************************************************************************************************ */ 2509 2510 var _s = $.clnav.s; 2511 var _d = $.clnav.d; 2512 var _el = $.clnav.el; 2513 2514 _s.checkCLPage = _s.page.startsWith('_') || _s.page === 'INTRO' || _s.page.startsWith('INTRO,'); 2515 2516 if($(`#menu-${_s.sid}`).length == 0) $('.dsgn-body').prepend(`<style id="menu-${_s.sid}">${CSSJSON.toCSS(_s.smenucss)}</style>`); 2517 else $(`#menu-${_s.sid}`).html(CSSJSON.toCSS(_s.smenucss)); 2518 2519 $('html').addClass('_scroll'); 2520 if(_d.isElViewer) _el.header.closest('html').eq(0).addClass('_elviewer'); 2521 else _el.header.closest('html').removeClass('_elviewer'); 2522 2523 // oldVer _modoo 2524 if(_s.checkModooHeader && !_el.header.is('[data-layout][data-behavior]')) { 2525 // ver00 ê¸°ë³¸ê° ì¸í 2526 _el.header.attr({ 2527 'data-layout':'topnav', 2528 'data-layout-pattern':'1row/3col/brand--nav_fix', 2529 'data-behavior':'overflow-nowrap', 2530 'data-nav-style':'none', 2531 'data-subnav-style':'none' 2532 }); 2533 2534 if(_el.brand.is('a')) { 2535 _el.brand.removeClass('cl-nav-brand').wrap('<div class="cl-nav-brand"></div>'); 2536 _el.brand = _el.header.find('.cl-nav-brand'); 2537 } 2538 2539 _el.option.replaceWith(` 2540 <input type="hidden" class="cl-nav-option" data-layout-pattern-brand="1-left" data-layout-pattern-nav="1-left" data-layout-pattern-fix="1-right" data-fixnav-size="large" data-sidemap="true"> 2541 <input type="hidden" class="cl-nav-option-m" data-layout-pattern-toggle="1-right" data-layout-pattern-brand="1-left" data-layout-pattern-fixcart="1-right"> 2542 `); 2543 _el.option = $.clnav.el.header.find('.cl-nav-option'); 2544 _el.option_m = $.clnav.el.header.find('.cl-nav-option-m'); 2545 } 2546 2547 // oldVer _fixnav search BN off set 2548 if(_el.header.find('input.cl-timestamps').length === 0) { 2549 var fixnav_off = (_el.option.attr('data-fixnav-off') || '').split(',').filter(
2549Boolean); 2550 if($.inArray('search',fixnav_off) === -1) { 2551 fixnav_off.push('search'); 2552 _el.option.attr('data-fixnav-off',fixnav_off.join(',')); 2553 } 2554 } 2555 2556 $('body').attr('data-clnav-layout',_el.header.attr('data-layout') || 'topnav'); 2557 $.clnav.el.header.closest('html').toggleClass('clnav-sidebar', $('body').is('[data-clnav-layout="sidenav"]')); 2558 if($.clnav.checkLayout('meganav')) { 2559 $('body').attr({ 2560 'data-clnav-toggle': _el.header.is('[data-behavior^="toggle"]') ? 'ON' : 'overflow', 2561 'data-clnav-orientation': _el.header.is('[data-behavior$="vertical"]') ? 'vertical' : 'horizontal', 2562 }); 2563 } else { 2564 $('body').removeAttr('data-clnav-mega data-clnav-toggle data-clnav-orientation'); 2565 } 2566 2567 _s.overlap = $.clnav.checkOverlapUsed(false); 2568 $.clnav.setMode('overlap,sticky'); 2569 2570 _el.brand.find(' > a').attr('href',_s.url.home); 2571 if(_s.checkModoo) { 2572 _s.modoo = (_s.checkConfig) ? getOrDefault(SETTINGS,'modoo',{}) : getOrDefault(property.SETTINGS,'modoo',{}); 2573 2574 // modoo.displaytype ìì¹ë³ê²½ 2575 // _s.modoo.displaytype = (_s.checkConfig) ? SETTINGS.displaytype : property.SETTINGS.displaytype; 2576 _s.modoo.sitename = (_s.checkConfig) ? TITLE : property.TITLE; 2577 $('body').addClass('modoo').attr('data-displaytype',_s.modoo.displaytype); 2578 if(_s.checkModooHeader) { 2579 _el.brand.find('.hide').removeClass('hide'); 2580 _el.brand.find('.cl-nav-brand-image').addClass('default').attr('src',_s.modoo.logo); 2581 _el.brand.find('.cl-nav-brand-text').text(_s.modoo.sitename); 2582 } 2583 } 2584 2585 // smenu set 2586 _d.sample.nav = _el.nav.clone(); 2587 _el.nav.empty(); 2588 2589 setSiteMenuOption(); 2590 $.each(_s.menuoption, function(nav_i,nav_o) { 2591 var tmp_nav = {...nav_o, attr: `${nav_o.target} ${nav_o.isbookmark} ${nav_o.isflink} ${nav_o.isfolder}`, child_tag: $('<ul></ul>')}; 2592 2593 if(_s.checkModooHeader) { 2594 if(typeof nextPage !=='undefined' && typeof nav_o.cid !== 'undefined' && nextPage == nav_o.cid) tmp_nav.active = 'active'; 2595 } 2596 2597 $.each(nav_o.children, function(subnav_i, subnav_o) { 2598 var tmp_subnav = {...subnav_o, attr: `${subnav_o.target} ${subnav_o.isbookmark} ${subnav_o.isflink}`}; 2599 tmp_nav.child_tag.append(` 2600 <li class="cl-subnav-item ${tmp_subnav.active}" ${typeof tmp_subnav.topmobile != 'undefined' ? `data-topmobile="${tmp_subnav.topmobile}"` : ''}><a href="${tmp_subnav.href}" ${tmp_subnav.attr}><span class="cl-subnav-name">${tmp_subnav.name}</span></a></li> 2601 `); 2602 }); 2603 2604 let $tmp_item = $(` 2605 <li class="cl-nav-item ${tmp_nav.active} ${!tmp_nav.child_tag.is(':empty') ? 'dropdown' : ''}" ${typeof tmp_nav.topmobile != 'undefined' ? `data-topmobile="${tmp_nav.topmobile}"` : ''}> 2606 <a href="${tmp_nav.href}" ${tmp_nav.attr.trim()}> 2607 <span class="cl-nav-name">${tmp_nav.name}</span> 2608 </a> 2609 </li> 2610 `); 2611 2612 if(!tmp_nav.child_tag.is(':empty')) { 2613 let $tmp_caret = $.clnav.setSubnavCaretStyle(_el.header,true); 2614 if(_s.checkModooHeader) $tmp_caret = $(`<span class="cl-nav-child">${nav_o.children.length}</span>`); 2615 $tmp_item.find('a').append($tmp_caret); 2616 2617 let $subnavwrap = $('<div>', {class: 'cl-subnav-wrap dropdown-menu'}); 2618 let $subnavlist = $('<ul>', {class: 'cl-subnav-list'}).append(tmp_nav.child_tag.children()); 2619 $tmp_item.append( 2620 $subnavwrap.append($subnavlist) 2621 ); 2622 } 2623 _el.nav.append($tmp_item); 2624 }); 2625 2626 if(_el.nav.is(':empty')) { 2627 _el.nav.replaceWith(_d.sample.nav); 2628 $.clnav.setSubnavCaretStyle(_el.header,false); 2629 } 2630 if(_el.nav.find('.cl-nav-item.active, .cl-nav-item.open, .cl-subnav-item.acitve').length == 0 && 2631 !_s.checkCLPage && 2632 _s.menulink[0] !== 'INTRO' 2633 ) { 2634 _el.nav.find('.cl-nav-item').eq(0).addClass('active'); 2635 } 2636 2637 _el.header.find('[class^="clnav-overlay-"]').remove(); 2638 _el.header.prepend($('<div class="clnav-overlay-block"></div>')); 2639 _el.header.find('.cl-nav-section.main .cl-subnav-wrap').prepend($('<div class="clnav-overlay-subnav"></div>')); 2640 2641 switch(_el.header.attr('data-behavior')) { 2642 case 'overflow-nowrap': 2643 if(_el.header.find('.cl-nav-section.sub').length > 0) { 2644 if( _el.header.find('.cl-nav-item.active').is('.dropdown') 2645 || _el.header.find('.cl-subnav-item.active').length > 0 2646 ) { 2647 var $tmp_sub = _el.header.find(`.cl-nav-item.active .cl-subnav-wrap`).clone(); 2648 if(_el.header.find('.cl-subnav-item.active').length > 0) $tmp_sub = _el.header.find('.cl-subnav-item.active').closest('.cl-nav-item').find('.cl-subnav-wrap').clone(); 2649 $tmp_sub.removeClass('dropdown-menu'); 2650 2651 _el.header.find('.cl-nav-section.sub').html($tmp_sub); 2652 } else { 2653 _el.header.find('.cl-nav-section.sub').empty(); 2654 } 2655 } 2656 2657 if(!_d.isElViewer) { 2658 if(_el.header.find('.cl-nav-list-nowrap').length == 0) { 2659 _el.header.find('.cl-nav-list').wrap(`<div class="cl-nav-list-nowrap"></div>`); 2660 } 2661 2662 _el.header.find('.clnav-nowrap-btn').remove(); 2663 _el.header.find('.cl-nav-list-nowrap').prepend(`<div class="clnav-nowrap-btn prev" style="display: none;">${clSVG('arrow_right',44,44,true)}</div>`); 2664 _el.header.find('.cl-nav-list-nowrap').append(`<div class="clnav-nowrap-btn next" style="display: none;">${clSVG('arrow_right',44,44,true)}</div>`); 2665 2666 if(_s.checkModooHeader && $('.dsgn-body').is('[data-displaytype="B"], [data-displaytype="C"]')) { 2667 var $tmp_nav = null; 2668 if($('.dsgn-body').is('[data-displaytype="B"]')) { 2669 $tmp_nav = _el.header.find('.cl-nav-list-nowrap').clone(); 2670 $tmp_nav.addClass('clnav-nowrap-el0 modoo-b'); 2671 } else if($('.dsgn-body').is('[data-displaytype="C"]')) { 2672 $tmp_nav = $(` 2673 <div class="clnav-nowrap-el0 modoo-c"> 2674 <div class="container"> 2675 <div class="col left"> 2676 <div class="sitename">${_s.modoo.sitename}</div> 2677 <div class="sitedesc">${_s.modoo.desc}</div> 2678 </div> 2679 <div class="col right"> 2680 ${_el.header.find('.cl-nav-list').clone().prop('outerHTML')} 2681 </div> 2682 </div> 2683 </div> 2684 `); 2685 } 2686 2687 if($tmp_nav != null) { 2688 $tmp_nav.find('.cl-nav-item').removeClass('dropdown').find('.cl-nav-child, .cl-subnav-wrap').remove(); 2689 $('.element.modoo[data-pos="0"] .clnav-nowrap-el0').remove(); 2690 $('.element.modoo[data-pos="0"]').append($tmp_nav); 2691 } 2692 } 2693 } 2694 break; 2695
2696 case 'overflow-toggle': 2697 case 'toggle-horizontal': 2698 case 'toggle-vertical': 2699 _el.header.find('.cl-nav-section.mega, .cl-nav-caret').remove(); 2700 var mega_col = _el.header.find('.cl-nav-item').length; 2701 var $mega_col = $(`<div class="cl-mega-col"></div>`); 2702 var $mega_row = $(`<div class="cl-mega-row"></div>`); 2703 var $mega_section = $(` 2704 <div class="cl-nav-section mega"> 2705 <div class="container ${_el.header.find('.container').hasClass('full-width') ? 'full-width' : ''}"> 2706 <div class="cl-mega-nav"></div> 2707 <ul class="cl-mega-fixnav"></ul> 2708 </div> 2709 </div> 2710 `); 2711 2712 _el.header.find('.cl-nav-item').each(function(index, nav) { 2713 var $nav_item = $(this).clone(); 2714 var $tmp_col = $mega_col.clone(); 2715 var $tmp_row = $mega_row.clone(); 2716 2717 if($nav_item.hasClass('active')) $tmp_row.addClass('active'); 2718 if($nav_item.hasClass('open')) $tmp_row.addClass('open'); 2719 $tmp_row.html($nav_item.find('> a').clone()); 2720 if($nav_item.find('.cl-subnav-item').length > 0) { 2721 $tmp_row.addClass('has-sub'); 2722 $nav_item.find('.cl-subnav-item').each(function(index, sub) { 2723 var $tmp_row2 = $mega_row.clone(); 2724 if($(this).hasClass('active')) $tmp_row2.addClass('active'); 2725 $tmp_row2.attr({'data-parent':2}).html($(this).find('> a').clone()); 2726 $tmp_col.append($tmp_row2); 2727 }); 2728 } 2729 $tmp_col.prepend($tmp_row); 2730 2731 $mega_section.find('.cl-mega-nav').append($tmp_col); 2732 // .append($nav_item.find('.cl-subnav-item')) 2733 // .prepend($nav_item.find('> *:not(a)').remove()); 2734 }); 2735 2736 $mega_section.find('.cl-mega-row:last').addClass('last-sub'); 2737 _el.header.find('.cl-nav-section.main').after($mega_section); 2738 2739 if(_el.header.find('.cl-nav-item.dropdown').length > 0) _el.header.find('.cl-nav-section.mega').addClass('has-sub'); 2740 else _el.header.find('.cl-nav-section.mega').removeClass('has-sub'); 2741 2742 _el.header.find('.cl-nav-section.main').prepend($('<div class="clnav-overlay-main"></div>')); 2743 _el.header.find('.cl-nav-section.mega').prepend($('<div class="clnav-overlay-mega"></div>')); 2744 _el.header.find('.cl-nav-section.mega .container').prepend($('<div class="clnav-overlay-meganav"></div>')); 2745 break; 2746 2747 default: 2748 // console.log(`Undefined behavior :( ${_el.header.attr('data-behavior')}`); 2749 break; 2750 } 2751 _el.nav = $.clnav.el.header.find('.cl-nav-list'); //override el 2752 2753 $.clnav.setFixnavStyle(_el.header); 2754 $.clnav.setSidemap(_el.header); 2755 2756 /* mobile */ 2757 $.clnav.setMobileStyle(_el.header); 2758 2759 if(_s.checkModooHeader) { 2760 $('.clnav-sidemobile').attr('data-style','mda'); 2761 2762 var checkLogin = getOrDefault(_s.mem,'check_login',false); 2763 _s.modoo.mobile_btns = ` 2764 <li class="login siteUM" ${checkLogin ? 'style="display:none;"' : ''}><a class="login" href="#"><span class="item-icon">${clSVG('login',26,28,false)}</span><span class="item-label">ë¡ê·¸ì¸</span></a></li> 2765 <li class="logout siteUM" ${!checkLogin ? 'style="display:none;"' : ''}><a class="logout" href="#"><span class="item-icon">${clSVG('login',26,28,false)}</span><span class="item-label">ë¡ê·¸ìì</span></a></li> 2766 `; 2767 _el.floating = $('.floating_item.modoo').eq(0); 2768 _el.floating.find('li a').each(function(e) { 2769 if($(this).data('type') == 'top') return true; 2770 2771 var tmp_a = { 2772 type: $(this).data('type'), 2773 name: $(this).data('name'), 2774 data: $(this).data('data'), 2775 cid: $(this).data('cid'), 2776 href: $(this).attr('href'), 2777 icon: $(this).find('.icon').attr('class').match(/icon(\d+)/)[1], 2778 }; 2779 2780 // console.log(tmp_a.data); 2781 if(tmp_a.type == 'defaultPhone') { 2782 tmp_a.href = `tel:${(!_s.checkConfig && typeof property != 'undefined' && typeof property.TEL_LINK != 'undefined') ? property.TEL_LINK : tmp_a.data}`; 2783 } else if(tmp_a.type == 'phone') { 2784 tmp_a.href = `tel:${tmp_a.data}`; 2785 } else if(tmp_a.type == 'page_move') { 2786 tmp_a.href = (tmp_a.href != tmp_a.data) ? (tmp_a.data == 'í') ? `/` : `${tmp_a.href}` : `${_s.url.page}${tmp_a.data}`; 2787 } else if(tmp_a.type == 'email') { 2788 tmp_a.href = `mailto:${tmp_a.data}`; 2789 } else if(tmp_a.type == 'link') { 2790 tmp_a.href = tmp_a.data; 2791 if(tmp_a.href.includes('pf.kakao')) { 2792 tmp_a.href = (tmp_a.href.includes('http://pf.kakao') || tmp_a.href.includes('https://pf.kakao')) ? tmp_a.href : tmp_a.href = 'https://' + tmp_a.href; 2793 } 2794 } else if (tmp_a.type == "reservation"){ 2795 tmp_a.href = tmp_a.data; 2796 } else if (tmp_a.type=="talkLink"){ 2797 tmp_a.href = ''; 2798 } else if (tmp_a.type=="sms"){ 2799 tmp_a.href = (tmp_a.data) ? 'tel:'+tmp_a.data : ''; 2800 }else if (tmp_a.type=="defaultPhone2"){ 2801 tmp_a.href = (tmp_a.data) ? 'tel:'+tmp_a.data : ''; 2802 } 2803 2804 if(tmp_a.href == '#') tmp_a.href = 'javascript:;'; 2805 2806 _s.modoo.mobile_btns += ` 2807 <li class="${tmp_a.type}"> 2808 <a href="${tmp_a.href}" data-type="${tmp_a.type}"><span class="item-icon btn_ic${tmp_a.icon}"><i class="ic"></i></span><span class="item-label">${tmp_a.name}</span></a> 2809 </li> 2810 `; 2811 }); 2812 2813 $('.clnav-sidemobile[data-style="mda"] .clnav-sidemobile-section.top').append(` 2814 <div class="section-row row-3"> 2815 <div class="clnav-mobile-btn siteinfo"> 2816 ${(getOrDefault(_s.modoo,'category','') != '') ? `<span class="category">${_s.modoo.category}</span>` : ''} 2817 <span class="hometitle">${_s.modoo.sitename}</span> 2818 <span class="description">${_s.modoo.desc}</span> 2819 </div> 2820 <ul class="clnav-mobile-btn btns"> 2821 ${_s.modoo.mobile_btns} 2822 </ul> 2823 </div> 2824 `); 2825 } 2826 2827 $.clnav.setNavStyle(_el.header); 2828 2829 $.clnav.set(); 2830 }, 2831 set: function() { 2832 // console.log(`[clnav_step_3 /4] ___$.clnav.set()`); 2833 var _s = $.clnav.s; 2834 var _d = $.clnav.d; 2835 var _el = $.clnav.el; 2836 2837 if(_s.checkFREE 2838 || _s.checkBS 2839 ) { 2840 _el.fix.find('.cl-fixnav-item.search').remove(); 2841 _el.sidemobile.find('.clnav-mobile-btn.search').remove(); 2842 } 2843 2844 if( _s.checkFREE 2845 || _s.checkBS 2846 || (_s.checkBN && Number(_s.um) < 1) 2847 ) { 2848 _el.header.find('.cl-fixnav-item.loginout').remove(); 2849 _el.sidemobile.find('.clnav-mobile-btn, .clnav-mobile-btn.btns > li').filter('.login, .logout, .mypage, .user').remove(); 2850 } 2851 2852 if(!_s.checkSM) { 2853 _el.fix.find('.cl-fixnav-item.cart').remove(); 2854 _el.sidemobile.find('.clnav-mobile-btn.cart').remove(); 2855 } 2856 2857 if( _s.checkFREE 2858 || ($.isEmptyObject(_s.slang) && !$.clnav.d.isElViewer) 2859 || (!$.isEmptyObject(_s.slang) && _s.slang.use_language == 'off') 2860 ) { 2861 _el.header.find('.cl-fixnav-item.lang').remove(); 2862 _el.sidemobile.find('.clnav-mobile-btn.lang').remove(); 2863 } 2864 2865 if(_el.header.find('.cl-fixnav-item:not(.hide)').length > 0) _el.header.find('.cl-fixnav-list, .cl-mega-fixnav').removeClass('empty'); 2866 else _el.header.find('.cl-fixnav-list, .cl-mega-fixnav').addClass('empty'); 2867 2868 _el.header.find('a').attr('draggable', false); 2869 _el.sidemobile.find('a').attr('draggable', false); 2870 if($('.clnav-sidemap').length > 0) $('.clnav-sidemap a').attr('draggable', false); 2871 2872 switch(_el.header.attr('data-behavior')) { 2873 case 'overflow-nowrap': 2874 // modoo used 2875 _el.header.addClass('clnav-nowrap'); 2876 _el.header.find('.main .cl-nav-list, .sub .cl-subnav-list').addClass('clnav-nowrap-target'); 2877 2878 if(_s.checkModooHeader) { 2879 _el.header.find('.cl-fixnav-item').filter('.lang, .search, .cart').remove(); 2880 _el.sidemobile.find('.clnav-mobile-btn').filter('.lang, .search, .cart').remove(); 2881 if($('.dsgn-body').is('[data-displaytype="B"]')) { 2882 $('.element.modoo[data-pos="0"]').addClass('clnav-nowrap'); 2883 $('.element.modoo[data-pos="0"] .cl-nav-list').addClass('clnav-nowrap-target'); 2884 } 2885 } 2886 2887 $('.clnav-nowrap-target').off('scroll').on('scroll', function(e) { 2888 $.clnav.setNowrapBtn(`.${$(e.target).attr('class').replace(/ /g,'.')}`); 2889 }); 2890 2891 if(!_d.isReload) { 2892 2893 $(document) 2894 // .clnav 2895 .on('click','.clnav-nowrap-btn.prev',function(e) { 2896 if(e.target === null) return; 2897 var tmp_selector = $(this).next('.clnav-nowrap-target').attr('class').replace(/ /g,'.'); 2898 var tmp_target = document.querySelector(`.${tmp_selector}`); 2899 if(tmp_target) { 2900 // 기존 - ì¢ì¸¡ 첫ë²ì§¸ ë©ë´ë¡ ì¤í¬ë¡¤ ì´ë 2901 // tmp_target.scrollLeft = 0; 2902 2903 const items = [...tmp_target.querySelectorAll('.cl-nav-item')]; 2904 const scrollLeft = tmp_target.scrollLeft; 2905 const containerW = tmp_target.clientWidth; 2906 2907 let firstIndex = items.findIndex(item => 2908 item.offsetLeft + item.offsetWidth > scrollLeft 2909 ); 2910 2911 if (firstIndex < 0) return; 2912 2913 let sum = 0, targetIndex = firstIndex; 2914 for (let i = firstIndex - 1; i >= 0; i--) { 2915 sum += items[i].offsetWidth; 2916 if (sum >= containerW) break; 2917 targetIndex = i; 2918 } 2919 2920 items[targetIndex]?.scrollIntoView({ 2921 behavior: 'smooth', 2922 inline: 'start', 2923 block: 'nearest' 2924 }); 2925 2926 $.clnav.setNowrapBtn(tmp_selector); 2927 } 2928 }) 2929 .on('click','.clnav-nowrap-btn.next',function(e) { 2930 if(e.target === null) return; 2931 2932 var tmp_selector = $(this).prev('.clnav-nowrap-target').attr('class').replace(/ /g,'.'); 2933 var tmp_target = document.querySelector(`.${tmp_selector}`); 2934 if(tmp_target) { 2935 // 기존 - ì°ì¸¡ ë§ì§ë§ ë©ë´ë¡ ì¤í¬ë¡¤ ì´ë 2936 // tmp_target.scrollLeft = tmp_target.scrollWidth - tmp_target.clientWidth; 2937 2938 const items = [...tmp_target.querySelectorAll('.cl-nav-item')]; 2939 const scrollLeft = tmp_target.scrollLeft; 2940 const containerW = tmp_target.clientWidth; 2941 2942 let firstHiddenIndex = items.findIndex(item => 2943 item.offsetLeft + item.offsetWidth > scrollLeft + containerW 2944 ); 2945 2946 if (firstHiddenIndex < 0) return; 2947 2948 let sum = 0, targetIndex = firstHiddenIndex; 2949 for (let i = firstHiddenIndex; i < items.length; i++) { 2950 sum += items[i].offsetWidth; 2951 if (sum >= containerW) break; 2952 targetIndex = i; 2953 } 2954 2955 const targetItem = items[targetIndex]; 2956 if (targetItem) { 2957 const offset = targetItem.offsetLeft - (containerW - targetItem.offsetWidth); 2958 tmp_target.scrollTo({ 2959 left: offset, 2960 behavior: 'smooth' 2961 }); 2962 } 2963 2964 $.clnav.setNowrapBtn(tmp_selector); 2965 } 2966 }) 2967 .on('mousedown','.clnav-nowrap-target',function(e) { 2968 if(e.target === null) return; 2969 _d.isDrag = false;
2970 _d.isMouseDown = true; 2971 _d.eTraget = `.${$(this).attr('class').replace(/ /g,'.')}`; 2972 _d.startX = e.pageX - document.querySelector(_d.eTraget).offsetLeft; // ë§ì°ì¤ ìì ìì¹ 2973 _d.scrollLeft = document.querySelector(_d.eTraget).scrollLeft; // íì¬ ì¤í¬ë¡¤ ìì¹ 2974 }) 2975 .on('mousemove','.clnav-nowrap-target',function(e) { 2976 if (e.target === null || !_d.isMouseDown || e.buttons !== 1) return; 2977 2978 var scrollTarget = document.querySelector(_d.eTraget); 2979 if($(this).is(_d.eTraget) && scrollTarget) { 2980 _d.isDrag = true; 2981 2982 var x = e.pageX - scrollTarget.offsetLeft; // ë§ì°ì¤ ìì¹ 2983 var walk = (x - _d.startX) * 1; // ëëê·¸ ì´ë 거리, ìë ì¡°ì (1ë°°ë¡ ì´ë) 2984 scrollTarget.scrollLeft = _d.scrollLeft - walk; // ì¤í¬ë¡¤ ì´ë 2985 2986 if (scrollTarget.scrollLeft < 0) scrollTarget.scrollLeft = 0; // ë©ë´ê° ì¼ìª½ ëì ëì´ê°ì§ ìëë¡ 2987 2988 // ë©ë´ê° ì¤ë¥¸ìª½ ëì ëì§ ìëë¡ 2989 if (scrollTarget.scrollLeft > scrollTarget.scrollWidth - scrollTarget.clientWidth) { 2990 scrollTarget.scrollLeft = scrollTarget.scrollWidth - scrollTarget.clientWidth; 2991 } 2992 2993 $.clnav.setNowrapBtn(_d.eTraget); 2994 } 2995 }) 2996 .on('mouseup',function(e) { 2997 if(e.target === null) return; 2998 2999 if(_d.isDrag) { 3000 e.preventDefault(); 3001 e.stopImmediatePropagation(); 3002 } 3003 3004 _d.eTraget = ''; 3005 _d.isMouseDown = false; 3006 _d.isTouch = false; 3007 _d.startX = 0; 3008 _d.startY = 0; 3009 _d.scrollLeft = 0; 3010 _d.scrollTop = 0; 3011 }) 3012 .on('click','.clnav-nowrap-target a',function(e) { 3013 if(e.target === null) return; 3014 3015 if (_d.isDrag) { 3016 e.preventDefault(); 3017 e.stopImmediatePropagation(); 3018 } 3019 }) 3020 // .clnavSidemap 3021 .on('click','.cl-fixnav-item.sidemap, .clnav-sidemap-close',function(e) { 3022 if(e.target === null) return; 3023 e.preventDefault(); 3024 3025 3026 if(PAGE_MODE == 'c') { 3027 alert('ì 체보기 기ë¥ì í¸ì§ëª¨ëìì ì§ìíì§ ììµëë¤'); 3028 } else { 3029 var sidemap_onoff = !$('html').is('[data-clnav-sidemap="open"]'); 3030 $.clnav.setMode('sidemap-open',sidemap_onoff); 3031 } 3032 3033 $('.clnav-sidemap .cl-nav-brand').removeAttr('style'); 3034 }) 3035 .on('click','.cl-nav-caret',function(e) { 3036 if(e.target === null) return; 3037 e.preventDefault(); 3038 $(e.target).closest(`.cl-nav-item.dropdown`).toggleClass('open'); 3039 }) 3040 // .clnav-sidemobile 3041 .on('mousedown','.clnav-sidemobile .container',function(e) { 3042 if(e.target === null) return; 3043 _d.isDrag = false; 3044 _d.isMouseDown = true; 3045 _d.eTraget = '.clnav-sidemobile .container'; 3046 _d.startY = e.pageY - document.querySelector(_d.eTraget).offsetTop; // ë§ì°ì¤ ìì ìì¹ 3047 _d.scrollTop = document.querySelector(_d.eTraget).scrollTop; // íì¬ ì¤í¬ë¡¤ ìì¹ 3048 }) 3049 .on('mousemove','.clnav-sidemobile .container',function(e) { 3050 if (e.target === null || !_d.isMouseDown || e.buttons !== 1) return; 3051 3052 var scrollTarget = document.querySelector(_d.eTraget); 3053 if($(this).is(_d.eTraget) && scrollTarget) { 3054 _d.isDrag = true; 3055 3056 var y = e.pageY - scrollTarget.offsetTop; // ë§ì°ì¤ ìì¹ 3057 var walk = (y - _d.startY) * 1; // ëëê·¸ ì´ë 거리, ìë ì¡°ì (1ë°°ë¡ ì´ë) 3058 scrollTarget.scrollTop = _d.scrollTop - walk; // ì¤í¬ë¡¤ ì´ë 3059 3060 if (scrollTarget.scrollTop < 0) scrollTarget.scrollTop = 0; // ë©ë´ê° ì¼ìª½ ëì ëì´ê°ì§ ìëë¡ 3061 3062 // ë©ë´ê° ì¤ë¥¸ìª½ ëì ëì§ ìëë¡ 3063 if (scrollTarget.scrollTop > scrollTarget.scrollHeight - scrollTarget.clientHeight) { 3064 scrollTarget.scrollTop = scrollTarget.scrollHeight - scrollTarget.clientHeight; 3065 } 3066 } 3067 }) 3068 .on('click','.clnav-sidemobile a:not(.cl-nav-depth)',function(e) { 3069 if(e.target === null 3070 || $(e.target).closest('.clnav-mobile-btn.btns').length > 0 3071 || $(this).is('.clnav-sidemobile-banner-link') 3072 ) { 3073 return; 3074 } 3075 3076 if (!($(e.target).is('.cl-nav-name') || $(e.target).is('.cl-subnav-name')) 3077 ) { 3078 e.preventDefault(); 3079 e.stopImmediatePropagation(); 3080 } 3081 }); 3082 3083 3084 // ì¢ í - ì¬ì©ìê° ë§ì§ë§ ë©ë´ë¥¼ í´ë¦íì ë, íëª©ì´ ê°ë ¤ì ¸ ìì¼ë©´ ì¤í¬ë¡¤ë¡ ë³´ì´ê² ì²ë¦¬ íë í¨ì ì¶ê° 3085 // function ensureMenuItemVisible(container, element) { 3086 // const containerRect = container.getBoundingClientRect(); 3087 // const elementRect = element.getBoundingClientRect(); 3088 // if (elementRect.right > containerRect.right) { 3089 // container.scrollLeft += (elementRect.right - containerRect.right); 3090 // container.scrollLeft += 26; 3091 // } 3092 // } 3093 } 3094 3095 if(_el.header.find('.main .clnav-nowrap-target > .cl-nav-item.active, .main .clnav-nowrap-target > .cl-nav-item.open').length > 0) { 3096 _el.header.find('.main .clnav-nowrap-target > .cl-nav-item.active, .main .clnav-nowrap-target > .cl-nav-item.open')[0].scrollIntoView({ 3097 behavior: 'smooth', 3098 block: 'center', 3099 inline: 'center', 3100 }); 3101 } 3102 if(_el.header.find('.sub .clnav-nowrap-target > .cl-subnav-item.active').length > 0) { 3103 _el.header.find('.sub .clnav-nowrap-target > .cl-subnav-item.active')[0].scrollIntoView({ 3104 behavior: 'smooth', 3105 block: 'center', 3106 inline: 'center', 3107 }); 3108 } 3109 3110 setTimeout(function() { 3111 $.clnav.setNowrapBtn('.clnav-nowrap-target'); 3112 }); 3113 setTimeout(function() { 3114 if(_el.header.find('.main .clnav-nowrap-target > .cl-nav-item:last-child').is('.active, .open')) { 3115 _el.header.find('.main .clnav-nowrap-target > .cl-nav-item.active, .main .clnav-nowrap-target > .cl-nav-item.open')[0].scrollIntoView({ 3116 behavior: 'smooth', 3117 block: 'nearest',
3118 inline: 'nearest', 3119 }); 3120 } 3121 },300); 3122 break; 3123 3124 case 'overflow-toggle': 3125 if(!_d.isReload) { 3126 $(document).on('mouseenter','.cl-nav-item',function(e) { 3127 if($('html').hasClass('openElMenuConfig') && !$('body').is('[data-bcmodal-preview="clnavsub"]')) return; 3128 if(!$('body').is('[data-clnav-toggle="overflowON"]')) $.clnav.setMode('mega-open',true); 3129 }); 3130 $(document).on('mouseleave','.cl-nav-section.mega',function(e) { 3131 if($('html').hasClass('openElMenuConfig') && !$('body').is('[data-bcmodal-preview="clnavsub"]')) return; 3132 if(!$('body').is('[data-clnav-toggle="overflowON"]')) $.clnav.setMode('mega-open',false); 3133 }); 3134 } 3135 3136 $.clnav.setMegaOverflow(_el.header); 3137 break; 3138 case 'toggle-horizontal': 3139 case 'toggle-vertical': 3140 break; 3141 3142 default: 3143 break; 3144 } 3145 3146 $.clnav.setLayoutOff(_el.header); 3147 3148 $('.cl-menu').removeClass('_ready'); 3149 if(!_s.checkConfig) $.clnav.setRootcss(); 3150 }, 3151 setLayoutOff: function(thisHeader) { 3152 if (thisHeader.length == 0) return; 3153 3154 let layout_off = []; 3155 if(thisHeader.find('.cl-nav-brand').hasClass('off')) layout_off.push('brand'); 3156 if(thisHeader.find('.cl-fixnav-list').hasClass('empty')) layout_off.push('fix'); 3157 if(thisHeader.find('.cl-nav-item').length == 0) layout_off.push('nav'); 3158 3159 if(layout_off.length > 0) thisHeader.find('.cl-nav-option').attr('data-layout-off',layout_off.join(',')); 3160 else thisHeader.removeAttr('data-layout-off'); 3161 }, 3162 setNowrapBtn: function(selector) { 3163 // console.log(`___$.clnav.setNowrapBtn(${selector})`); 3164 if(typeof selector == 'undefined' || !selector) return; 3165 var tmpTarget = document.querySelector(selector); 3166 if(tmpTarget) { 3167 var maxScrollLeft = tmpTarget.scrollWidth - tmpTarget.clientWidth; 3168 3169 if($(selector).prev('.clnav-nowrap-btn').is('.prev')) { 3170 $(selector).prev('.clnav-nowrap-btn').css('display',tmpTarget.scrollLeft <= 0 ? 'none' : 'block'); 3171 } 3172 if($(selector).next('.clnav-nowrap-btn').is('.next')) { 3173 $(selector).next('.clnav-nowrap-btn').css('display',tmpTarget.scrollLeft >= maxScrollLeft ? 'none' : 'block'); 3174 } 3175 } 3176 }, 3177 setMegaOverflow: function(navEL) { 3178 // console.log(`___$.clnav.setMegaOverflow(navEL)`); 3179 if(typeof navEL == 'undefined') navEL = $(`.cl-nav`); 3180 if(!navEL || !navEL.is('[data-layout="meganav"][data-behavior="overflow-toggle"]')) return; 3181 var before = $('body').is('[data-clnav-toggle="overflowON"]'); 3182 var after = false; 3183 3184 $('body').attr({'data-clnav-toggle':'overflow', 'data-clnav-orientation':'horizontal'}); 3185 if(navEL.find('.cl-nav-list')[0].scrollWidth > navEL.find('.cl-nav-list')[0].clientWidth) { 3186 $('body').attr({'data-clnav-toggle':'overflowON', 'data-clnav-orientation':'vertical'}); 3187 after = true; 3188 } 3189 3190 var checkSmodalnavdetailOpen = ($('html').is('.openElConfig') && $('.bc-modal.open#el-menuConfig').length > 0) ? true : false; 3191 if(before !== after) { 3192 if(after && checkSmodalnavdetailOpen) { 3193 $.bcModal.showHideDismissibleModal('meganav_overflowON'); 3194 } 3195 } 3196 }, 3197 delStateRootcss: function() { 3198 // defualt, overlap, sticky 3199 const del_root = [ 3200 '--brand-color', 3201 '--nav-color','--nav-color-active','--nav-style-active', 3202 '--fixnav-color','--fixnav-color-active', 3203 '--block-bgcolor','--block-bgblur','--block-bgimg','--block-bgimg-','--block-shadow-','--clnav-bline-' 3204 ]; 3205 removeElementRootCss('.cl-nav',del_root); 3206 }, 3207 setRootcss: function() { 3208 // console.log('setRootcss'); 3209 if(!$.clnav.check()) return; 3210 var _s = $.clnav.s; 3211 3212 var dsgnbodyTarget = document.querySelector('.dsgn-body'); 3213 var dsgnbody_rect = dsgnbodyTarget.getBoundingClientRect(); 3214 var dsgnbody_top = dsgnbody_rect.top; 3215 3216 if(!$('body').hasClass('_scrolling') && $.clnav.checkLayout('sidenav')) { 3217 dsgnbody_top = cssNumber(getElementRootCss('body',`--bandBanner-height-${$('html').attr('data-bp')}`,'0px')) + cssNumber(getElementRootCss('html','--cleditor-h')); 3218 } 3219 if(dsgnbody_top > cssNumber(getElementRootCss('html','--cleditor-h'))) setElementRootCss('html',{'--dsgnbody-top':`${dsgnbody_top}px`}); 3220 else removeElementRootCss('html','--dsgnbody-top'); 3221 3222 var menuTarget = document.querySelector('.cl-nav'); 3223 var menu_rect = menuTarget.getBoundingClientRect(); 3224 setElementRootCss('html', {
3225 '--clnav-h': `${menu_rect.height}px`, 3226 '--clnav-top':`${menu_rect.top}px`, 3227 '--clnav-bottom':`${menu_rect.bottom}px` 3228 }); 3229 3230 var clnav_bottom = menu_rect.bottom; 3231 var check_bottom = cssNumber(getElementRootCss('html','--cleditor-h')); 3232 if(check_bottom < clnav_bottom) setElementRootCss('html',{'--clnav-visible-bottom':`${clnav_bottom - check_bottom}px`}); 3233 else removeElementRootCss('html','--clnav-visible-bottom'); 3234 3235 var top_rect; 3236 if($.clnav.checkLayout('topnav')) { 3237 top_rect = menu_rect; 3238 } 3239 else if($.clnav.checkLayout('meganav')) { 3240 var topTarget = document.querySelector('.cl-nav-section.main'); 3241 var top_rect = topTarget.getBoundingClientRect(); 3242 } 3243 else if($.clnav.checkLayout('sidenav')) { 3244 top_rect = menu_rect; 3245 } 3246 setElementRootCss('html', { 3247 '--clnav-toparea-h': `${top_rect.height}px`, 3248 '--clnav-toparea-top':`${top_rect.top}px`, 3249 '--clnav-toparea-bottom':`${top_rect.bottom}px` 3250 }); 3251 3252 const topmobileTarget = Array.from(document.querySelectorAll('.clnav-topmobile:not(.cl-sample):not(.hide)')).find(function(el) { return !el.closest('.change-mobile-modal, .change-mobile-design-modal'); }); 3253 if(topmobileTarget && $('html').is('[data-bp="mobile"]')) { 3254 const topmobileRect = topmobileTarget.getBoundingClientRect(); 3255 setElementRootCss('html', {'--clnav-topmobile-h': `${topmobileRect.height}px`}); 3256 } else { 3257 removeElementRootCss('html','--clnav-topmobile-h'); 3258 } 3259 if($.clnav.s.checkConfig) { 3260 3261 var checkMenuConfig = ($.bcModal?.id == 'el-menuConfig') ? true : false; 3262 if(checkMenuConfig) { 3263 3264 if($('body').is('[data-bcmodal-preview]')) { 3265 3266 removeElementRootCss('html',['--clnav-preview-h', '--clnav-preview-top','--clnav-preview-bottom']); 3267 3268 var previewTarget = document.querySelector('.cl-nav ._bcmodalPreviewTarget'); 3269 if($(previewTarget).length < 1) previewTarget = document.querySelector('.cl-nav'); 3270 3271 if(previewTarget) { 3272 var preview_rect = previewTarget.getBoundingClientRect(); 3273 if(preview_rect.height > 0) { 3274 setElementRootCss('html', { 3275 '--clnav-preview-h': `${preview_rect.height}px`, 3276 '--clnav-preview-top':`${preview_rect.top}px`, 3277 '--clnav-preview-bottom':`${preview_rect.bottom}px` 3278 }); 3279 } 3280 } 3281 3282 if($.clnav.checkLayout('meganav')) { 3283 var scroll_info = false; 3284 if($.clnav.checkLayout('meganav,toggle-vertical')) { 3285 var scrollTarget = document.querySelector('.cl-mega-nav'); 3286 if(scrollTarget.scrollHeight > scrollTarget.clientHeight) scroll_info = true; 3287 } 3288 // else { 3289 // if(menuTarget.scrollHeight > menuTarget.clientHeight) scroll_info = true; 3290 // } 3291 3292 if(scroll_info) { 3293 let scrollinfo_rect = {top:'calc(var(--bcmodal-position-top) - 50px)', bottom:'auto', left:'auto', right:'30px'}; 3294 if($.clnav.checkLayoutVertical(true,false,true,false)) { 3295 var _left = `${$('.cl-nav .cl-nav-toggle').offset().left}px`; 3296 if($('.cl-nav .cl-nav-section.mega .container').hasClass('full-width')) _left = getElementRootCss('.cl-nav','--fullwidth-space'); 3297 scrollinfo_rect = {top:'auto', bottom:'20px', left:`calc(${_left} + 25px)`, right:'auto'}; 3298 } 3299 $('#el-menuConfig').prepend(`<p class="scroll_info" style="--scrollinfo-top: ${scrollinfo_rect.top}; --scrollinfo-bottom: ${scrollinfo_rect.bottom}; --scrollinfo-left: ${scrollinfo_rect.left}; --scrollinfo-right: ${scrollinfo_rect.right};"><i></i></p>`); 3300 // if($.clnav.checkLayoutHorizontal(true,false,true,false)) setElementRootCss('.cl-nav',{'--clnav-overflow-y':'auto'}); 3301 } 3302 else { 3303 $('#el-menuConfig .scroll_info').remove(); 3304 // if($.clnav.checkLayoutHorizontal(true,false,true,false)) removeElementRootCss('.cl-nav','--clnav-overflow-y'); 3305 } 3306 } 3307 } 3308 3309 if(menu_rect.bottom >= Math.floor(document.documentElement.clientHeight * 0.7)) $('#el-menuConfig').attr('data-position','bottom center'); 3310 else $('#el-menuConfig').removeAttr('data-position'); 3311 } 3312 } 3313 }, 3314 setNavStyle: function(thisHeader,val) { 3315 if (thisHeader.length == 0) return; 3316 if (typeof val == 'undefined') val = thisHeader.attr('data-nav-style') || 'default'; 3317 3318 const style_type = $.clnav.getStyle(thisHeader,'navstyle_type'); 3319 thisHeader.find('.cl-nav-name').each(function() { 3320 const $thisName = $(this).attr('data-style','plain'); 3321 const thisText = $thisName.text(); 3322 3323 switch(style_type) { 3324 case 'layered': 3325 $thisName.replaceWith( 3326 `<span class="cl-nav-name" data-style="layered"><span class="copy">${thisText}</span><span class="org">${thisText}</span></span>` 3327 ); 3328 break; 3329 3330 case 'chars': 3331 const tmpChars = [...thisText] 3332 .map((char, i) => { 3333 if (char === ' ') { 3334 return `<span class="cl-nav-char" data-char=" " data-idx="${i}" style="--char-i:${i}"> </span>`;
3335 } 3336 return `<span class="cl-nav-char" data-char="${char}" data-idx="${i}" style="--char-i:${i}">${char}</span>`; 3337 }) 3338 .join(''); 3339 3340 $thisName.replaceWith( 3341 $(`<span class="cl-nav-name" data-style="chars" style="--char-count:${$(tmpChars).filter('span').length}"></span>`) 3342 .append(tmpChars) 3343 ); 3344 break; 3345 3346 case 'icon': 3347 const thisIcon = clSVG(`navstyle_${val}`,0,0,true,'cl-nav-icon'); 3348 $thisName.before(thisIcon); 3349 break; 3350 3351 default: 3352 break; 3353 } 3354 }); 3355 }, 3356 showHideNavStyle: function(thisItem,e,type) { 3357 if ($(thisItem).length < 1) return; 3358 if (typeof type == 'undefined') type = 'enter'; 3359 3360 const $this = $(thisItem); 3361 const checkSample = ($this.closest('.navstyle-sample-item').length > 0) ? true : false; 3362 3363 let $thisNavItem = $this; 3364 const $thisNav = $thisNavItem.closest('.cl-nav'); 3365 const styleKey = $thisNav.attr('data-nav-style'); 3366 3367 const checkEnter = (type == 'enter') ? true : false; 3368 const checkLeave = (type == 'leave') ? true : false; 3369 const checkLeaveEnd = ($.inArray(styleKey, ['fill3','fill4','dot3','dot4','icon7','icon8','line5']) > -1) ? false : true; 3370 3371 let $thisNavList = $thisNavItem.closest('.cl-nav-list'); 3372 if($thisNavItem.is('.cl-mega-col') 3373 ) { 3374 if($.clnav.checkLayout('meganav,toggle-horizontal') 3375 || $.clnav.checkLayoutVertical(true,false,true,true) 3376 ) { 3377 $thisNavItem = $this.find('.cl-mega-row').not('[data-parent]'); 3378 $thisNavList = $this.closest('.cl-mega-nav'); 3379 } 3380 else if($.clnav.checkLayout('meganav,overflow-toggle')) { 3381 $thisNavItem = $thisNav.find('.cl-nav-list .cl-nav-item').eq($this.index()); 3382 $thisNavList = $thisNavItem.closest('.cl-nav-list'); 3383 } 3384 } 3385 3386 const $thisNavName = $thisNavItem.find('.cl-nav-name').eq(0); 3387 3388 const list = $thisNavList[0]; 3389 const list_rect = list?.getBoundingClientRect(); 3390 const item = $thisNavItem[0]; 3391 const item_rect = item?.getBoundingClientRect(); 3392 let item_offset = { w: item.offsetWidth, h: item.offsetHeight, h_offset: 0, x: item.offsetLeft, y: item.offsetTop}; 3393 if( $.clnav.checkLayoutVertical(true,false,true,true) || 3394 ($.clnav.checkLayout('sidenav') && $.clnav.getStyle($thisNav,'subnav') === 'inline1' ) 3395 ) { 3396 item_offset.h = $thisNavItem.find(' > a')[0].offsetHeight; 3397 } 3398 const name = $thisNavName[0]; 3399 const name_offset = { w: name.offsetWidth, h: name.offsetHeight, x: name.offsetLeft, y: name.offsetTop }; 3400 const name_rect = name?.getBoundingClientRect(); 3401 3402 const mouseDir = { 3403 a: getMouseDirection(e, item), 3404 v: getMouseDirection(e, item, 'vertical'), 3405 h: getMouseDirection(e, item, 'horizontal'), 3406 }; 3407 3408 let _x, _y, _w, _h; 3409 const change_root = {}; 3410 3411 switch(styleKey) { 3412 case 'fill3': 3413 if(checkEnter) { 3414 _x = item_offset.x; 3415 _y = item_offset.y; 3416 _w = item_offset.w; 3417 _h = item_offset.h; 3418 } 3419 break; 3420 3421 case 'dot3': 3422 case 'dot4': 3423 case 'icon7': 3424 case 'icon8': 3425 case 'line5': 3426 if(checkEnter) { 3427 _x = name_offset.x + item_offset.x + (name_offset.w / 2); 3428 _y = Math.round(list_rect.bottom - name_rect.bottom); 3429 } 3430 break; 3431 3432 case 'icon5': 3433 if(checkEnter) { 3434 _x = name_offset.x - 10; 3435 3436 let _r = cssNumber(getElementRootCss($thisNav, '--nav-style-size')); 3437 _r = (_r % 2 === 0) ? _r : _r - 1; 3438 $thisNavItem.find('.cl-nav-icon circle')[0].setAttribute('r', _r); 3439 } else { 3440 $thisNavItem.find('.cl-nav-icon circle')[0].setAttribute('r', 0); 3441 } 3442 break; 3443 case 'icon6': 3444 if(checkEnter) { 3445 _x = name_offset.x + item_offset.x - 15; 3446 _y = item_offset.y + (item_offset.h / 2); 3447 } 3448 break; 3449 3450 default: 3451 break; 3452 } 3453 3454 if(typeof _x != 'undefined') setElementRootCss($thisNav, {'--nav-style-x': `${_x}px`}); 3455 if(typeof _y != 'undefined') setElementRootCss($thisNav, {'--nav-style-y': `${_y}px`}); 3456 if(typeof _w != 'undefined') setElementRootCss($thisNav, {'--nav-style-w': `${_w}px`}); 3457 if(typeof _h != 'undefined') setElementRootCss($thisNav, {'--nav-style-h': `${_h}px`}); 3458 3459 // ê³µíµ hover class 3460 if(checkEnter) { 3461 $thisNavItem.addClass('hover'); 3462 } 3463 else { 3464 $thisNavItem.removeClass('hover').addClass('last-hover'); 3465 } 3466 3467 $thisNavList.find('.cl-nav-item, .cl-mega-row').filter(function() { 3468 return !$(this).is($thisNavItem); 3469 }).removeClass('last-hover'); 3470 3471 $thisNav.attr('data-nav-style-focus', type === 'enter'); 3472 3473 if(checkLeave && checkLeaveEnd) { 3474 $thisNav.removeAttr('data-nav-style-focus'); 3475 $thisNavList.find('.cl-nav-item, .cl-mega-row').removeClass('hover last-hover'); 3476 } 3477 }, 3478 setSubnavCaretStyle: function(thisHeader,isGet) { 3479 if (thisHeader.length == 0) return; 3480 if (typeof isGet == 'undefined') isGet = false;
3481 3482 const behavior = thisHeader.attr('data-behavior'); 3483 const caret_style = (behavior == 'dropdown-right') ? 'caret_right' : 'caret_down'; 3484 const $caret = $(`<span class="cl-nav-caret" data-style="${caret_style}" data-position="default"></span>`); 3485 $caret.append(clSVG(caret_style,10,10,false)); 3486 3487 if(isGet) return $caret; 3488 else { 3489 thisHeader.find('.cl-nav-caret').each(function() { 3490 const $tmp_caret = $(this); 3491 $tmp_caret.replaceWith($caret.clone()); 3492 }); 3493 } 3494 }, 3495 checkFixnavStatue: function(thisHeader,item,mode) { 3496 if(typeof mode == 'undefined') mode = ''; 3497 3498 const fix_off = (thisHeader.find('.cl-nav-option').attr('data-fixnav-off') || '').split(',').filter(Boolean); 3499 const slang = getOrDefault($.clnav.s,'slang',{}); 3500 const slangLists = $.isArray(slang.lists) ? slang.lists : []; 3501 let fix_status = { 3502 search: { 3503 plan: ($.clnav.s.checkSM || $.clnav.s.checkBN), 3504 ready: true, 3505 off: fix_off.includes('search') 3506 }, 3507 um: { 3508 plan: ($.clnav.s.checkSM || $.clnav.s.checkBN), 3509 ready: (Number($.clnav.s.um) > 0) ? true : false, 3510 off: fix_off.includes('um') 3511 }, 3512 cart: { 3513 plan: $.clnav.s.checkSM, 3514 ready: true, 3515 off: fix_off.includes('cart') 3516 }, 3517 lang: { 3518 plan: !$.clnav.s.checkFREE, 3519 ready: (!$.isEmptyObject(slang) && getOrDefault(slang,'use_language','') === 'on' && slangLists.length > 0), 3520 off: fix_off.includes('lang') 3521 } 3522 }; 3523 3524 $.each(fix_status, function(k,obj) { 3525 fix_status[k]['provided'] = obj.plan && obj.ready; 3526 fix_status[k]['on'] = obj.plan && obj.ready && !obj.off; 3527 }); 3528 3529 if(item == 'init') return fix_status; 3530 else if($.inArray(item,['search','um','cart','lang']) > -1 && mode == 'init') return fix_status[item]; 3531 3532 const fix_obj = fix_status[item]; 3533 return ($.inArray(mode, ['plan','ready','off','provided','on']) > -1 ) ? fix_obj[mode] : false; 3534 }, 3535 setFixnavStyle: function(thisHeader) { 3536 // console.log(`[clnav_step_2 /4] ___$.clnav.setFixnavStyle(thisHeader)`); 3537 if(thisHeader.length == 0) return; 3538 3539 var _slang = (PAGE_MODE == 'c') ? SLANG : getOrDefault(property,'SLANG',{}); 3540 3541 var checkCtrlNavMode = thisHeader.hasClass('cl-sample'); 3542 var sample_fixnav = { 3543 sidemap: ` 3544 <li class="cl-fixnav-item sidemap"><a href="#"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">ALL</span></a></li> 3545 `, 3546 search: ` 3547 <li class="cl-fixnav-item search"> 3548 <a href="#"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">SEARCH</span></a> 3549 </li> 3550 `, 3551 loginout: ` 3552 <li class="cl-fixnav-item loginout"> 3553 <a href="#" class="login"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">LOGIN</span></a> 3554 <a href="#" class="logout" style="display: none;"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">LOGOUT</span></a> 3555 <a href="#" class="mypage dropdown-toggle" style="display: none;"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">MY PAGE</span></a> 3556 <div class="cl-fixsubnav-wrap dropdown-menu"> 3557 <ul class="cl-fixsubnav-list"> 3558 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">${$.lang[LANG]['manager.site-um.dashboard']}</span></a></li> 3559 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">${$.lang[LANG]['manager.site-um.mypage']}</span></a></li> 3560 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">${$.lang[LANG]['manager.site-um.logout']}</span></a></li> 3561 </ul> 3562 </div> 3563 </li> 3564 `, 3565 cart: ` 3566 <li class="cl-fixnav-item cart"> 3567 <a href="#"><span class="cl-fixnav-icon"></span><span class="cl-fixnav-name">CART</span><span class="cl-fixnav-cart-active" data-cart-active="5"></span></a> 3568 </li> 3569 `, 3570 lang: ` 3571 <li class="cl-fixnav-item lang dropdown"> 3572 <a href="#"><span class="cl-fixnav-icon">KO</span><span class="cl-fixnav-name"></span><span class="cl-fixnav-arrow"></span></a> 3573 <div class="cl-fixsubnav-wrap dropdown-menu"> 3574 <ul class="cl-fixsubnav-list"> 3575 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">íêµì´</span></a></li> 3576 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">English</span></a></li> 3577 <li class="cl-fixsubnav-item"><a href="#"><span class="cl-fixsubnav-name">æ¥æ¬èª</span></a></li> 3578 </ul> 3579 </div> 3580 </li> 3581 `, 3582 }; 3583 3584 var thisOption = thisHeader.find('.cl-nav-option'); 3585 var thisFixnav = thisHeader.find('.cl-fixnav-list:not(._bottom)'); 3586 var fixnav_set_style = thisHeader.attr('data-fixnav-set-style'); 3587 var fixnav_lang_style = thisHeader.attr('data-fixnav-lang-style'); 3588 3589 var fixobj = { 3590 sidemap: { name:'ì 체보기', icon:clSVG('toggle_s',13,11) }, 3591 search: { name:'search', icon:'' }, 3592 login: { name:'login', icon:'' }, 3593 logout: { name:'logout', icon:'' }, 3594 mypage: { name:'my page', icon:''}, 3595 cart: { name:'cart', icon:'' }, 3596 lang: { name:'', icon:'', arrow:'', icon_cls:[] }, 3597 }; 3598 3599 if(!thisOption.is('[data-sidemap="true"]')) delete fixobj.sidemap; 3600 3601 switch(fixnav_set_style) { 3602 case '2': 3603 fixobj.cart.name = 'basket'; 3604 break; 3605
3606 case '3': 3607 fixobj.search.name = 'ê²ì'; 3608 fixobj.login.name = 'ë¡ê·¸ì¸'; 3609 fixobj.logout.name = 'ë¡ê·¸ìì'; 3610 fixobj.mypage.name = 'ë§ì´íì´ì§'; 3611 fixobj.cart.name = 'ì¥ë°êµ¬ë'; 3612 break; 3613 3614 case '4': 3615 case '5': 3616 case '6': 3617 case '7': 3618 case '8': 3619 var tmp_size = 28; 3620 fixobj.search.icon = clSVG('fixbtn_search'+fixnav_set_style,tmp_size,tmp_size); 3621 fixobj.login.icon = clSVG('fixbtn_um_login'+fixnav_set_style,tmp_size,tmp_size); 3622 fixobj.logout.icon = clSVG('fixbtn_um_mypage'+fixnav_set_style,tmp_size,tmp_size); 3623 fixobj.mypage.icon = clSVG('fixbtn_um_mypage'+fixnav_set_style,tmp_size,tmp_size); 3624 fixobj.cart.icon = clSVG('fixbtn_cart'+fixnav_set_style,tmp_size,tmp_size); 3625 3626 if($.inArray(fixnav_set_style, ['4','5','6','7']) > -1) { // only icon 3627 fixobj.search.name = ''; 3628 fixobj.login.name = ''; 3629 fixobj.logout.name = ''; 3630 fixobj.mypage.name = ''; 3631 fixobj.cart.name = ''; 3632 } 3633 break; 3634 case '9': 3635 fixobj.search.name = 'ê²ì'; 3636 fixobj.login.name = 'ë¡ê·¸ì¸'; 3637 fixobj.logout.name = 'ë¡ê·¸ìì'; 3638 fixobj.mypage.name = 'ë§ì´íì´ì§'; 3639 fixobj.cart.name = ''; 3640 fixobj.cart.icon = clSVG('fixbtn_cart9',28,28); 3641 break; 3642 case '10': 3643 fixobj.search.name = ''; 3644 fixobj.search.icon = clSVG('fixbtn_search10',28,28); 3645 fixobj.cart.name = ''; 3646 fixobj.cart.icon = clSVG('fixbtn_cart9',28,28); 3647 break; 3648 3649 default: 3650 break; 3651 } 3652 3653 if($.clnav.d.isElViewer) { 3654 _slang = {select:'íêµì´',select_code:'ko', use_language:'on', lists:[]}; 3655 } 3656 3657 _slang = _slang || {}; 3658 const slangCode = ((_slang.select_code || 'ko').toString().trim() || 'ko').toLowerCase(); 3659 let slang_name = _slang.select || slangCode.toUpperCase(); 3660 if(slangCode == 'id' && _slang.select) slang_name = _slang.select.split(' ')[1]; 3661 3662 fixobj.lang.name = slangCode.toUpperCase(); 3663 fixobj.lang.arrow = clSVG('fixbtn_arrow',16,16,true); 3664 if(typeof _slang != 'undefined' && typeof _slang.lists !='undefined') fixobj.lang.list = $.clnav.getFixnavLangList(_slang); 3665 3666 switch(fixnav_lang_style) { 3667 case '2': 3668 fixobj.lang.name = slang_name; 3669 break; 3670 case '5': 3671 fixobj.lang.icon = clSVG(`fixbtn_lang5`,28,28,false); 3672 fixobj.lang.name = ''; 3673 fixobj.lang.arrow = ''; 3674 break; 3675 case '6': 3676 fixobj.lang.icon = clSVG(`fixbtn_lang5`,28,28,false); 3677 fixobj.lang.arrow = ''; 3678 break; 3679 case '7': 3680 fixobj.lang.icon = '<div class="cl-fixnav-icon-img"></div>'; 3681 fixobj.lang.icon_cls.push('circle'); 3682 fixobj.lang.name = slang_name; 3683 break; 3684 case '8': 3685 fixobj.lang.icon = '<div class="cl-fixnav-icon-img"></div>'; 3686 fixobj.lang.name = slang_name; 3687 break; 3688 case '9': 3689 fixobj.lang.icon = '<div class="cl-fixnav-icon-img"></div>'; 3690 fixobj.lang.icon_cls.push('circle'); 3691 fixobj.lang.name = ''; 3692 fixobj.lang.arrow = ''; 3693 break; 3694 case '10': 3695 fixobj.lang.arrow = ''; 3696 break; 3697 case '11': 3698 fixobj.lang.icon = '<div class="cl-fixnav-icon-img"></div>'; 3699 fixobj.lang.name = ''; 3700 fixobj.lang.arrow = ''; 3701 break; 3702 default: 3703 break; 3704 } 3705 3706 var checkInit = thisFixnav.children().length == 0 ? true : false; 3707 $.each(fixobj, function(fixnav_k, fixnav_o) { 3708 if( (checkCtrlNavMode && thisHeader.closest(`[data-sample="fixnav-${(fixnav_k == 'lang') ? 'lang' : 'set'}"]`).length == 0) 3709 ) { 3710 return; 3711 } 3712 3713 var list_selector = `.cl-fixnav-list`; 3714 if(fixnav_k == 'lang' && thisOption.is('[data-layout-pattern-fixlang^="4"]')) { 3715 list_selector += '._bottom' 3716 thisHeader.find(list_selector).remove(); 3717 thisHeader.find('.cl-nav-section.main > .container').append(thisFixnav.clone().addClass('_bottom').empty()[0].outerHTML); 3718 } 3719 3720 var item_k = ($.inArray(fixnav_k, ['login','logout','mypage']) > -1) ? `loginout` : fixnav_k; 3721 var item_selector = `${list_selector} .cl-fixnav-item.${item_k}`; 3722 var item_mselector = `${list_selector} .cl-fixnav-item.m-${item_k}`; 3723 var target_selector = (item_k !== fixnav_k) ? `${item_selector} .${fixnav_k}` : item_selector; 3724 if(thisHeader.find(item_selector).length == 0) { 3725 thisHeader.find(list_selector).append(sample_fixnav[item_k]); 3726 } else if(item_k == fixnav_k || fixnav_k == 'login') { 3727 thisHeader.find(item_selector).next(item_mselector).remove(); 3728 thisHeader.find(item_selector).replaceWith(sample_fixnav[item_k]); 3729 } 3730 3731 thisHeader.find(`${target_selector} .cl-fixnav-name`).html(fixnav_o.name ?? ''); 3732 thisHeader.find(`${target_selector} .cl-fixnav-icon`).html(fixnav_o.icon ?? '').removeClass('circle'); 3733 if(getOrDefault(fixnav_o,'icon_cls',[]).length > 0) thisHeader.find(`${target_selector} .cl-fixnav-icon`).addClass(fixnav_o.icon_cls.join(' ')); 3734 3735 if(fixnav_k == 'lang') { 3736 thisHeader.find(item_selector).attr('data-lang',slangCode); 3737 thisHeader.find(item_selector).find('.cl-fixsubnav-wrap').remove(); 3738 thisHeader.find(`${target_selector} .cl-fixnav-arrow`).html(fixnav_o.arrow ?? ''); 3739 } 3740 3741 if(getOrDefault(fixnav_o,'list','') != '') { 3742 thisHeader.find(item_selector).find(`.${$(fixnav_o.list).attr('class').replace(/ /g,'.')}`).remove(); 3743 thisHeader.find(item_selector).append(fixnav_o.list); 3744 } 3745 }); 3746 3747 if(thisHeader.find('.cl-nav-section.mega .cl-mega-fixnav').length > 0) { 3748 thisHeader.find('.cl-nav-section.mega .cl-mega-fixnav').html(thisFixnav.html()); 3749 } 3750 3751 $.clnav.setFixnavUMlist(thisFixnav.find('.cl-fixnav-item.loginout')); 3752 $.clnav.setFixnavShopping(thisHeader); 3753 $.clnav.showHideFixnavItem(thisHeader); 3754 }, 3755 getFixnavLangList: function(slang) { 3756 // console.log(`[clnav_step_2_1 /4] ___$.clnav.getFixnavLangList(slang)`); 3757 3758 let str = ''; 3759 $.each(slang.lists, function(i,o) { 3760 let slang_name = o.name; 3761 if(o.code == 'id') slang_name = slang_name.split(' ')[1]; 3762 str += `<li class="cl-fixsubnav-item ${(o.code == slang.select_code) ? 'active' : ''}"><a href="#" data-code="${o.code}"><span class="cl-fixsubnav-name">${slang_name}</span></a></li>`; 3763 }); 3764 3765 return (str == '') ? '' : ` 3766 <div class="cl-fixsubnav-wrap dropdown-menu"> 3767 <ul class="cl-fixsubnav-list"> 3768 ${str} 3769 </ul>
3770 </div> 3771 `; 3772 }, 3773 setFixnavUMlist: function(thisFixnavUM) { 3774 // console.log(`[clnav_step_2_2 /4] ___$.clnav.setFixnavUMlist(thisFixnavUM)`); 3775 var sample_str = ` 3776 <div class="cl-fixsubnav-wrap dropdown-menu"> 3777 <ul class="cl-fixsubnav-list"> 3778 <li class="cl-fixsubnav-item"><a class="dashboard" href="#"><span class="cl-fixsubnav-name">${$.lang[LANG]['manager.site-um.dashboard']}</span></a></li> 3779 <li class="cl-fixsubnav-item"><a class="member" href="#"><span class="cl-fixsubnav-name">${$.lang[LANG]['manager.site-um.manage']}</span></a></li> 3780 <li class="cl-fixsubnav-item"><a class="logout" href="#"><span class="cl-fixsubnav-name">${$.lang[LANG]['manager.site-um.logout']}</span></a></li> 3781 </ul> 3782 </div> 3783 `; 3784 3785 var _s = $.clnav.s; 3786 var check_login = getOrDefault(_s.mem,'check_login',false); 3787 3788 thisFixnavUM.find('.cl-fixsubnav-wrap').remove(); 3789 3790 if(_s.checkRender 3791 || $.clnav.s.checkSite && !check_login 3792 ) { 3793 thisFixnavUM.find('.mypage, .logout').hide(); 3794 return; 3795 } else { 3796 thisFixnavUM.find('.login').hide(); 3797 thisFixnavUM.find(`.${_s.checkModooHeader ? 'logout' : 'mypage'}`).show(); 3798 3799 if(_s.checkModooHeader) return; 3800 if(_s.checkConfig) { 3801 thisFixnavUM.append(sample_str).addClass('dropdown _sample'); 3802 return; 3803 } 3804 } 3805 3806 var check_admin = getOrDefault(_s.mem,'check_adm',false); 3807 var check_uadmin = getOrDefault(_s.mem,'check_uadm',false); 3808 var check_groot = getOrDefault(_s.mem,'check_groot',false); 3809 var check_id_type = getOrDefault(_s.mem,'id_type',''); 3810 var login_id = getOrDefault(_s.mem,'id',''); 3811 var login_nick = getOrDefault(_s.mem,'nick',login_id); 3812 var login_profile = getOrDefault(_s.mem,'profile','//storage.googleapis.com/i.addblock.net/defaultImg.png'); 3813 3814 var tmp_page = (_s.checkConfig) ? PAGE : property.PAGE; 3815 var tmp_hostary = window.location.hostname.split('.'); 3816 var isCoKr = tmp_hostary[2] == 'co' && tmp_hostary[3] == 'kr'; 3817 var checkDomain = (tmp_hostary[1] != 'creatorlink' && tmp_hostary[1] != 'addblock') ? true : false; 3818 var checkPort = (location.port) ? `:${location.port}` : ''; 3819 var host = (!checkDomain) ? (!isCoKr ? `${tmp_hostary[1]}.${tmp_hostary[2]}` : 'creatorlink.co.kr') : 'creatorlink.net'; 3820 var host_url = (_s.checkGabia) ? '//creatorlink-gabia.com' : `//${host+checkPort}`; 3821 var check_settings = {myorder: false, mywish: false, mycoupon: false, mypoint: false}; 3822 3823 if(_s.checkSite && _s.checkSM && !check_admin) { 3824 check_settings.myorder = true; 3825 if(LANG=='ko' && getOrDefault(_s.settings,'product_wishlist_btn','') == 'Y') check_settings.mywish = true; 3826 if(LANG=='ko' && getOrDefault(property.POINGSETTINGS,'point_use','') == 'Y') check_settings.mypoint = true; 3827 if(getOrDefault(property.SMSETTINGS,'coupon_use_yn','') == 'Y') check_settings.mycoupon = true; 3828 } 3829 3830 var str = ''; 3831 var um_list = { 3832 dashboard: { 3833 onoff: (check_admin || check_uadmin) ? true : false, 3834 label: $.lang[LANG]['manager.site-um.dashboard'], 3835 url: (check_uadmin) ? '/_admin/dashboard' : ((check_admin && checkDomain) ? 'javascript:;' : host_url + '/dashboard'), 3836 blank: true, 3837 }, 3838 manage: { 3839 onoff: check_admin, 3840 label: $.lang[LANG]['manager.site-um.manage'], 3841 url: `${host_url}/manager/member`, 3842 blank: true, 3843 }, 3844 mygabia: { 3845 onoff: (_s.checkGabia && (check_admin || (check_uadmin && check_groot))) ? true : false, 3846 label: $.lang[LANG]['manager.site-um.mypage.gabia'], 3847 url: 'https://www.gabia.com/mygabia/service', 3848 blank: true, 3849 }, 3850 myorder: { 3851 active: tmp_page == '_mypage' ? true : false, 3852 onoff: check_settings.myorder, 3853 label: $.lang[LANG]['manager.site-um.mypage.orderlist'], 3854 url: '/_mypage', 3855 }, 3856 mywish: { 3857 active: tmp_page == '_wishlist' ? true : false, 3858 onoff: check_settings.mywish, 3859 label: $.lang[LANG]['manager.site-um.mypage.wishlistbtn'], 3860 url: '/_wishlist', 3861 }, 3862 mycoupon: { 3863 active: tmp_page == '_coupon' ? true : false, 3864 onoff: check_settings.mycoupon, 3865 label: $.lang[LANG]['manager.site-um.mypage.coupon'], 3866 url: '/_coupon', 3867 }, 3868 mypoint: { 3869 active: tmp_page == '_point' ? true : false, 3870 onoff: check_settings.mypoint, 3871 label: $.lang[LANG]['manager.site-um.mypage.point'], 3872 url: '/_point', 3873 }, 3874 mypost: { 3875 active: tmp_page == '_mypost' ? true : false, 3876 onoff: !(check_admin || check_uadmin), 3877 label: $.lang[LANG]['manager.site-um.mypage.post'], 3878 url: '/_mypost', 3879 }, 3880 myinfo: { 3881 active: tmp_page == '_myinfo' ? true : false, 3882 onoff: !check_admin, 3883 label: _s.checkSM && !check_uadmin ? $.lang[LANG]['manager.site-um.mypage.new'] : $.lang[LANG]['manager.site-um.mypage'],
3884 attr: tmp_page == '_myinfo' ? '' : ` onclick="myinfoChangeBtn(this)" id="myinfo-change-btn" data-sid="${_s.sid}"`, 3885 }, 3886 logout: { 3887 onoff: check_login, 3888 label: $.lang[LANG]['manager.site-um.logout'], 3889 } 3890 }; 3891 3892 $.each(um_list, function(k,o) { 3893 if(o.onoff === false 3894 || (login_id == 'naverpaytest' && k.match(/^my/) !== null) 3895 ) return; 3896 3897 var tmp_attr = getOrDefault(o,'attr',''); 3898 if(getOrDefault(o,'blank',false)) tmp_attr += ' target="_blank"'; 3899 3900 str += `<li class="cl-fixsubnav-item ${getOrDefault(o,'active',false) ? 'active' : ''}"> 3901 <a class="${k}" href="${getOrDefault(o,'url','javascript:;')}" ${tmp_attr}><span class="cl-fixsubnav-name">${o.label || k}</span></a> 3902 </li> 3903 `; 3904 }); 3905 3906 thisFixnavUM.append(` 3907 <div class="cl-fixsubnav-wrap dropdown-menu"> 3908 <ul class="cl-fixsubnav-list"> 3909 ${str} 3910 </ul> 3911 </div> 3912 `).addClass('dropdown'); 3913 }, 3914 setFixnavShopping: function(thisHeader) { 3915 // console.log(`[clnav_step_2_3 /4] ___$.clnav.setFixnavShopping(thisHeader)`); 3916 if(thisHeader.length == 0) return; 3917 3918 $.clnav.s.scart = (PAGE_MODE == 'c') ? 0 : property.CART; 3919 3920 var _s = $.clnav.s; 3921 var _d = $.clnav.d; 3922 var _el = $.clnav.el; 3923 3924 if(_s.checkSM) { 3925 var cart_url = (_s.checkSite) ? '/_cart' : 'javascript:;'; 3926 var cart_active = (_s.checkSite && _s.scart) ? _s.scart : 0; 3927 if(_d.isElViewer) cart_active = 5; 3928 _el.fix.find('.cl-fixnav-cart-active').attr('data-cart-active',cart_active).closest('a').attr('href',cart_url); 3929 } else { 3930 _el.fix.find('.cl-fixnav-item.cart').remove(); 3931 } 3932 }, 3933 showHideFixnavItem: function(thisHeader) { 3934 // console.log(`[clnav_step_2_4 /4] ___$.clnav.setFixnavUMlist(thisHeader)`); 3935 const sidemobile = $('.clnav-sidemobile'); 3936 3937 if(thisHeader.length == 0 || thisHeader.find('.cl-fixnav-item').length == 0) { 3938 sidemobile.find('.section-area.user > div').addClass('hide'); 3939 return; 3940 } 3941 3942 var fix_off = (thisHeader.find('.cl-nav-option').attr('data-fixnav-off') || '').split(',').filter(function(k) { 3943 return k && k !== 'toggle'; 3944 }); 3945 thisHeader.find('.cl-fixnav-item').removeClass('hide'); 3946 sidemobile.find('.cl-fixnav-item, .clnav-mobile-btn, .section-area.user > div').removeClass('hide'); 3947 3948 $.each(fix_off, function(i,k) { 3949 if(!k) return; 3950 3951 switch(k) { 3952 case 'um': 3953 thisHeader.find(`.cl-fixnav-item.loginout`).addClass('hide'); 3954 sidemobile.find(`.section-area.user > div`).addClass('hide'); 3955 break; 3956 3957 default: 3958 thisHeader.find(`.cl-fixnav-item.${k}, .cl-fixnav-item.m-${k}`).addClass('hide'); 3959 sidemobile.find(`.cl-fixnav-item.${k}, .cl-fixnav-item.m-${k}, .clnav-mobile-btn.${k}`).addClass('hide'); 3960 break; 3961 } 3962 }); 3963 if(!$.clnav.checkFixnavStatue(thisHeader,'lang','on')) { 3964 thisHeader.find('.cl-fixnav-item.lang, .cl-fixnav-item.m-lang').addClass('hide'); 3965 sidemobile.find('.cl-fixnav-item.lang, .cl-fixnav-item.m-lang, .clnav-mobile-btn.lang').addClass('hide'); 3966 } 3967 3968 3969 thisHeader.find('.cl-fixnav-list').each(function() { 3970 if($(this).find('.cl-fixnav-item:not(.hide)').length > 0) $(this).removeClass('empty'); 3971 else $(this).addClass('empty'); 3972 }); 3973 3974 thisHeader.find('.cl-mega-fixnav').html(thisHeader.find('.cl-fixnav-list').html()); 3975 }, 3976 setSidenavListPosition: function($dropdownTarget,onoff) { 3977 // console.log(`___$.clnav.setSidenavListPosition($dropdownTarget,onoff ${onoff})`); 3978 var dropdown_selector = '.dropdown-menu'; 3979 if($('body').is('[data-bcmodal-preview="clnavsub"]')) { 3980 onoff = true; 3981 dropdown_selector = '._bcmodalPreviewTarget'; 3982 } 3983 3984 var $ddMenu = $dropdownTarget.find(dropdown_selector); 3985 if(!$ddMenu.length) return; 3986 3987 var rect = $dropdownTarget[0].getBoundingClientRect(); 3988 requestAnimationFrame(() => { 3989 if (onoff) { 3990 $ddMenu[0].style.setProperty('--sidenav-dropdown-t', `${rect.top}px`); 3991 } else { 3992 $ddMenu[0].style.removeProperty('--sidenav-dropdown-t'); 3993 } 3994 }); 3995 }, 3996 setOverlap: function(overlap_onoff) { 3997 var _s = $.clnav.s; 3998 var _d = $.clnav.d; 3999 var _el = $.clnav.el; 4000 4001 var onoff = (typeof overlap_onoff == 'boolean') ? overlap_onoff : $.clnav.checkOverlapUsed(false); 4002 // console.log(`[clnav_step_4 /4] ___$.clnav.setOverlap(${overlap_onoff})`,onoff); 4003 4004 if(_el.header.is('[data-layout="topnav"], [data-layout="meganav"]')) { 4005 if(_s.checkModooHeader) { 4006 onoff = _el.header.find('.cl-nav-item').eq(0).hasClass('active'); 4007 if(typeof currentIndex != 'undefined' && currentIndex == 1) onoff = true; 4008 if(_s.modoo.displaytype == 'E' || _s.checkCLPage || _s.view != '') onoff = false;
4009 4010 if(_s.checkConfig) HEADER = onoff; 4011 else property.HEADER = onoff; 4012 } 4013 4014 $.clnav.setMode('overlap',onoff); 4015 } 4016 }, 4017 setMode: function(mode,val) { 4018 // html/body/el class/attribute set 4019 if(typeof val == 'undefined') val = false; 4020 // console.log(`setMode(${mode},${val})`); 4021 var setCallback; 4022 var checkMenuconfigOpen = ($('html').is('.openElConfig') && $('#el-menuConfig').is('.open')) ? true : false; 4023 4024 switch(mode) { 4025 case 'mega-open': 4026 if(val) $('body').attr('data-clnav-mega','open'); 4027 else $('body').removeAttr('data-clnav-mega'); 4028 4029 // const mega = document.querySelector('.cl-nav .cl-nav-section.mega'); 4030 // if(mega) { 4031 // mega.offsetHeight; 4032 // const fullHeight = mega.scrollHeight || window.innerHeight; 4033 // setElementRootCss('.cl-nav .cl-nav-section.mega',{'--dropdown-maxh':`${fullHeight}px`}); 4034 // } 4035 break; 4036 4037 case 'sidemap-open': 4038 case 'sidemobile-open': 4039 // body[data-clnav-sidemap="open"] 4040 // body[data-clnav-sidemobile="open"] 4041 var attr_key = mode.replace(/-open$/,''); 4042 if(val) { 4043 $('html').attr(`data-clnav-${attr_key}`,'open'); 4044 } 4045 else { 4046 $('html').removeAttr(`data-clnav-${attr_key}`); 4047 $('.clnav-sidemobile .clnav-psearch[data-style="inline"] .clnav-psearch-error').empty(0); 4048 } 4049 break; 4050 4051 case 'overlap': 4052 case 'sticky': 4053 case 'overlap,sticky': 4054 var checkInit = (mode == 'overlap,sticky') ? true : false; 4055 if(/overlap/.test(mode)) { 4056 var overlap_val = checkInit ? $.clnav.s.overlap : val; 4057 4058 $('body') 4059 .toggleClass('clnav-overlap-ON', overlap_val) 4060 .toggleClass('clnav-overlap-OFF', !overlap_val); 4061 if($.clnav.s.checkModooHeader) $('.el-menu').toggleClass('home', !overlap_val); 4062 4063 const $header = $('.cl-nav').first(); 4064 if(!checkInit && $header.length) { 4065 $.clnav.setTopMobile($header); 4066 } 4067 } 4068 4069 if(/sticky/.test(mode)) { 4070 var sticky_val = checkInit ? !$('.cl-nav .cl-nav-option').is('[data-sticky="false"]') : val; 4071 $('body').toggleClass('clnav-sticky-ON', sticky_val).toggleClass('clnav-sticky-OFF', !sticky_val); 4072 if(sticky_val) $('.cl-nav .cl-nav-option').removeAttr('data-sticky'); 4073 else $('.cl-nav .cl-nav-option').attr('data-sticky','false'); 4074 } 4075 4076 var nowstate = $.clnav.checkNowState(true); 4077 refreshMobileSetIconWhiteState($('.cl-nav').first()); 4078 4079 if(checkInit || 4080 (/sticky/.test(mode) && checkMenuconfigOpen) 4081 ) { 4082 setCallback = function() { 4083 setTimeout(function() { 4084 $.clnav.setRootcss(); 4085 }, 300); 4086 }; 4087 } 4088 break; 4089 4090 default: 4091 break; 4092 } 4093 4094 if(typeof setCallback == 'function') setCallback(); 4095 }, 4096 setPreview: function(ctrlSection,isOpen) { 4097 // console.log(`setPreview(${ctrlSection},${isOpen})`); 4098 let preview = {check:false, mode:'', selector:''}; 4099 const $menuCtrlModal = $('#el-menuConfig'); 4100 const $sectionEL = $menuCtrlModal.find(`.section[data-section="${ctrlSection}"]`); 4101 4102 $menuCtrlModal.find('.scroll_info').remove(); 4103 4104 if( ($('.cl-nav').is('[data-behavior^="dropdown"]') && $.inArray(ctrlSection, ['nav-sub']) > -1) || 4105 ($('.cl-nav').is('[data-layout="meganav"]') && $.inArray(ctrlSection, ['nav-sub','nav-mega']) > -1) || 4106 ($('body').is('[data-clnav-layout="meganav"][data-clnav-toggle="overflowON"]') && ctrlSection == 'nav-main') 4107 ) { 4108 let hasSubDropdown = ($('.cl-nav .cl-nav-item.dropdown').length > 0) ? true : false; 4109 if($('.cl-nav').is('[data-layout="meganav"][data-behavior^="toggle"]') || 4110 ($('body').is('[data-clnav-layout="meganav"][data-clnav-toggle="overflowON"]') && ctrlSection == 'nav-main') 4111 ) { 4112 hasSubDropdown = true; 4113 } 4114 4115 if(hasSubDropdown) { 4116 preview = {check:true, mode:'clnavsub', selector:'.cl-subnav-wrap'}; 4117 } 4118 } 4119 4120 if( $.inArray(ctrlSection, ['nav-fix']) > -1 4121 ) { 4122 let hasFixDropdown = ($('.cl-nav .cl-fixnav-item.dropdown').length > 0) ? true : false; 4123 if(hasFixDropdown) { 4124 preview = {check:true, mode:'clnavfix', selector:'.cl-nav-section.main .cl-fixnav-item:not(.hide) .cl-fixsubnav-wrap'}; 4125 } 4126 4127 $('.cl-nav .cl-fixnav-item.cart .cl-fixnav-cart-active').attr('data-cart-active', isOpen ? 5 : 0); 4128 } 4129 4130 var isChange = true; 4131 if(isOpen && preview.check) { 4132 $('body').attr('data-bcmodal-preview',preview.mode); 4133 if($(`.cl-nav ${preview.selector}._bcmodalPreviewTarget`).length === 0) { 4134 $('.cl-nav ._bcmodalPreviewTarget').removeClass('_bcmodalPreviewTarget'); 4135 $(`.cl-nav ${preview.selector}`).eq(0).addClass('_bcmodalPreviewTarget'); 4136 } 4137 } else if($('._bcmodalPreviewTarget').length > 0) { 4138 $('body').removeAttr('data-bcmodal-preview'); 4139 $('.cl-nav ._bcmodalPreviewTarget').removeClass('_bcmodalPreviewTarget'); 4140 } else { 4141 isChange = false;
4142 } 4143 4144 if(isChange) { 4145 if($.clnav.checkLayout('sidenav')) { 4146 $.clnav.setSidenavListPosition($('.cl-nav .cl-nav-item.dropdown'),preview.check); 4147 } 4148 4149 $.clnav.setRootcss(); 4150 4151 if($sectionEL?.[0]) { 4152 setTimeout(function() { 4153 $sectionEL[0].scrollIntoView({ 4154 behavior: 'smooth', 4155 block: 'nearest' 4156 }); 4157 }, 300); 4158 } 4159 } 4160 }, 4161 moveScroll: function(mode) { 4162 let move = false; 4163 let move_top = 0; 4164 switch(mode) { 4165 case 'default': 4166 if(0 < window.scrollY) move = true; 4167 break; 4168 case 'overlap': 4169 const overlap_onoff = $.clnav.checkOverlapUsed(false); 4170 if(overlap_onoff) { 4171 if(0 < window.scrollY) move = true; 4172 } 4173 break; 4174 case 'sticky': 4175 const sticky_onoff = $.clnav.checkStickyUsed(); 4176 if(sticky_onoff) { 4177 if($.clnav.checkStickyY() >= window.scrollY) { 4178 move = true; 4179 move_top = $.clnav.checkStickyY() + 300; 4180 } 4181 } 4182 break; 4183 4184 default: 4185 break; 4186 } 4187 4188 if(move) { 4189 window.scrollTo({ 4190 top: move_top, 4191 behavior: 'smooth' 4192 }); 4193 } 4194 }, 4195 toggleFixnavSearch: function(targetBtn,openclose) { 4196 if (targetBtn instanceof jQuery) targetBtn = targetBtn[0]; 4197 const searchBtns = $('.cl-fixnav-item.search, .clnav-mobile-search'); 4198 if(openclose) { 4199 $('html').attr('data-clnav-psearch','open'); 4200 searchBtns.addClass('open'); 4201 } else { 4202 $('html').removeAttr('data-clnav-psearch'); 4203 searchBtns.removeClass('open'); 4204 } 4205 4206 const psearchInput = $('.clnav-psearch[data-style="default"] .clnav-psearch-input').first(); 4207 psearchInput.focus(); 4208 }, 4209 } 4210 4211 const getSidemobileDropdownPanel = function($dropdown) { 4212 if($dropdown.is('.cl-nav-item')) return $dropdown.children('.cl-subnav-wrap'); 4213 return $(); 4214 }; 4215 4216 const clearSidemobileDropdownPanelStyle = function($panel) { 4217 $panel.css({ 4218 display: '', 4219 height: '', 4220 overflow: '', 4221 paddingTop: '', 4222 paddingBottom: '', 4223 marginTop: '', 4224 marginBottom: '' 4225 }); 4226 }; 4227 4228 const setSidemobileDropdownOpen = function($dropdown, open) { 4229 $dropdown.each(function() { 4230 const $item = $(this); 4231 const isStateChanging = open ? !$item.hasClass('open') : $item.is('.open, .closing'); 4232 if(!isStateChanging) return; 4233 4234 const $panel = getSidemobileDropdownPanel($item); 4235 4236 if($panel.length === 0) { 4237 $item.toggleClass('open', open); 4238 return; 4239 } 4240 4241 $panel.stop(true, true); 4242 4243 if(open) { 4244 $item.removeClass('open closing'); 4245 $item[0].offsetWidth; 4246 requestAnimationFrame(function() { 4247 requestAnimationFrame(function() { 4248 $item.addClass('open'); 4249 }); 4250 }); 4251 $panel.hide().slideDown(220, function() { 4252 clearSidemobileDropdownPanelStyle($(this)); 4253 }); 4254 } else { 4255 $item.addClass('closing'); 4256 $item[0].offsetWidth; 4257 requestAnimationFrame(function() { 4258 $item.removeClass('open'); 4259 }); 4260 $panel.slideUp(220, function() { 4261 $item.removeClass('closing'); 4262 clearSidemobileDropdownPanelStyle($(this)); 4263 }); 4264 } 4265 }); 4266 }; 4267 4268 $(document).on('click', ` 4269 .clnav-topmobile .clnav-topmobile-item > a, 4270 .clnav-sidemobile .cl-nav-item > a, 4271 .clnav-sidemobile .cl-subnav-item > a, 4272 .cl-nav .cl-nav-item > a, 4273 .cl-nav .cl-subnav-item > a, 4274 .cl-nav .cl-mega-row > a 4275 `, function(e) { 4276 if( $(this).closest('.cl-nav').hasClass('cl-sample') 4277 || $(this).is('[href*=#][attr-link]') /* [Input URL link] Click ==> link-type: link-out*/ 4278 || $(this).is('[data-user-link]') /* [Menu link] Click ==> link-type: link-menu or link-inner*/ 4279 || $(this).is('[attr-bookmark]') /* [Block Bookmark link] Click ==> link-type: link-bookmark*/ 4280 || $(this).is('[attr-flink]') /* [File link] Click ==> link-type: link-file*/ 4281 ) { 4282 return false; 4283 } 4284 4285 e.preventDefault(); 4286 e.stopPropagation(); 4287 4288 $.each($.cookie(), function(i,v) { 4289 if(i.indexOf('gallery-category-') > -1) { 4290 var gallery_seq = i.replace('gallery-category-',''); 4291 var gcate_home = (typeof $.cookie('gallery-catehome-' + gallery_seq) == 'undefined') ? '' : $.cookie('gallery-catehome-' + gallery_seq); 4292 $.cookie(i, gcate_home, { path : '/', expires: 12 * 60 * 60 * 1000 }); 4293 } 4294 if(i.indexOf('gallery-page-') > -1) $.cookie(i, 1, { path : '/', expires: 12 * 60 * 60 * 1000 }); 4295 if(i.indexOf('loadmore-') > -1) $.cookie(i, 1, { path : '/', expires: 0 }); 4296 }); 4297 4298 $.removeCookie('gallery', { path: '/' }); 4299 $.removeCookie('gallery-item', { path : '/' }); 4300 $.removeCookie('forum', { path : '/' }); 4301 $.removeCookie('forum-item', { path : '/' }); 4302 4303 var checkSidemobile = ($(this).closest('.clnav-sidemobile').length > 0) ? true : false;
4304 var checkConfig = $.clnav.s.checkConfig; 4305 var checkRender = $.clnav.s.checkRender; 4306 var checkSite = $.clnav.s.checkSite; 4307 var checkONE = isClnavOnePage(); 4308 var checkClpage = (window.location.pathname.charAt(1) == '_' && window.location.pathname.match(/^\/\_lang\//gi) === null) ? true : false; 4309 4310 const menulist = (checkConfig) ? MENULINK : property.MENULINK; 4311 4312 const blank = (['_blank', 'blank'].includes(this.getAttribute('target'))) ? true : false; 4313 const href = this.getAttribute('href'); 4314 4315 const invalidHrefList = ['javascript:;', 'javascript:void(0)', '#']; 4316 if (invalidHrefList.includes(href)) return false; 4317 4318 let key = null; 4319 let scroll_selectors = []; 4320 4321 if (blank) { 4322 const newWin = window.open('about:blank'); 4323 if (newWin) { 4324 newWin.location.href = href; 4325 } else { 4326 alert('íì ì°¨ë¨ì´ ëì´ ì ì°½ì ì´ ì ììµëë¤.'); 4327 } 4328 return false; 4329 } 4330 4331 if (/^(mailto:|tel:|sms:|callto:|facetime:|skype:|sip:)/i.test(href)) { 4332 window.location.href = href; 4333 return false; 4334 } 4335 else if (/^https?:\/\//i.test(href)) { 4336 window.location.href = href; 4337 return false; 4338 } 4339 else if (/^(?:[a-z0-9-]+\.)+[a-z]{2,}(?:[\/:?#]|$)/i.test(href)) { 4340 window.location.href = `https://${href}`; 4341 return false; 4342 } 4343 else if (/^#.+$/.test(href)) { 4344 key = href.slice(1); 4345 if($(`.element[data-pagename="${key}"]`).length > 0) { 4346 scroll_selectors.push(`.element[data-pagename="${key}"]`); 4347 if(checkONE) history.pushState('', '', `${checkRender ? '/render' : ''}/${href}`); 4348 } 4349 else { 4350 if(checkClpage) { 4351 window.location.href = `${checkRender ? '/render' : ''}/${href}`; 4352 return false; 4353 } 4354 4355 if(checkONE) { 4356 _this.history.pushState(null,property.TITLE, `${(checkSite) ? '/' : '/render'}`); 4357 history.pushState(null,property.TITLE, `${(checkSite) ? '/' : '/render'}${href}`); 4358 } 4359 } 4360 } 4361 else if (/^\//.test(href)) { 4362 var uri = (checkSite) ? href.replace('/render/','') : href; 4363 var checkHome = (['/render', '/'].includes(uri)) ? true : false; 4364 if(checkHome) { 4365 uri = menulist[0]; 4366 $('body,html').animate({scrollTop: 0}, 900,'easeInOutQuart'); 4367 } 4368 4369 if((href.match(/\@/g) === null && href.match(/\//g) === null) 4370 || href.match(/\?clgc\=/g) !== null 4371 ) { 4372 window.location.href = href; 4373 return false; 4374 } 4375 4376 if(checkConfig) { 4377 window.location.href = href; 4378 } else { 4379 var url = new getLocation(href); 4380 golink(_this,url); 4381 } 4382 } 4383 // else if (/^@\d+$/.test(href)) { 4384 // key = href.slice(1); 4385 // scroll_selectors.push(`.element[data-id="${key}"]`); 4386 // } 4387 4388 for (const sel of scroll_selectors) { 4389 const el = document.querySelector(sel); 4390 if (el) { 4391 if(checkConfig && $('html').hasClass('openElMenuConfig')) $.bcModal?.hide(); 4392 goToElement(sel); 4393 break; 4394 } 4395 } 4396 4397 if(checkSidemobile) $.clnav.setMode('sidemobile-open',false); 4398 }); 4399 4400 $(document).on('click','.cl-nav-brand > a',function(e) { 4401 const onepage = isClnavOnePage(); 4402 const viewpage = (typeof property != 'undefined') ? property?.VIEW ?? '' : VIEW ?? ''; 4403 if(onepage && viewpage === '') { 4404 e.preventDefault(); 4405 e.stopImmediatePropagation(); 4406 4407 goToElement('.el_0'); 4408 } 4409 }); 4410 const clickHeaderFixnav = (selector) => { 4411 const selectors = { 4412 cart: '.cl-fixnav-item.cart > a', 4413 login: '.cl-fixnav-item.loginout > .login', 4414 logout: '.cl-fixnav-item.loginout > .logout', 4415 }; 4416 const $target = $(`header.cl-nav ${selectors[selector] || selector}`).first(); 4417 if($target.length) { 4418 $target[0].click(); 4419 return true; 4420 } 4421 if(selector === 'cart') { 4422 window.location.href = '/_cart'; 4423 return true; 4424 } 4425 return false; 4426 }; 4427 $(document).on('click','.cl-nav-toggle',function(e) { 4428 const $header = $(this).closest('header.cl-nav'); 4429 const checkPc = $('body').outerWidth() > 767; 4430 const checkPcMegaToggle = checkPc && 4431 $header.is('[data-layout="meganav"]') && 4432 $header.is('[data-behavior="overflow-toggle"], [data-behavior="toggle-horizontal"], [data-behavior="toggle-vertical"]'); 4433 4434 if(checkPcMegaToggle) { 4435 if($('#el-menuConfig.open').length > 0 || !$.clnav.checkUsedArea('nav')) return; 4436 4437 const onoff = !$('body').is('[data-clnav-mega="open"]'); 4438 $.clnav.setMode('sidemobile-open',false); 4439 $.clnav.setMode('mega-open',onoff); 4440 return; 4441 } 4442 4443 const onoff = !$('html').is('[data-clnav-sidemobile="open"]'); 4444 $.clnav.setMode('mega-open',false); 4445 $.clnav.setMode('sidemobile-open',onoff); 4446 }); 4447 $(document).on('click','.cl-nav .cl-nav-section.main .clnav-mobile-btn.dropdown',function(e) { 4448 if($(this).closest('.clnav-sidemobile').length > 0) return; 4449 4450 const $clickDropdown = $(this); 4451 if($(e.target).closest('.cl-fixsubnav-wrap').length > 0) { 4452 if(e.target === $clickDropdown.children('.cl-fixsubnav-wrap').first()[0] || $(e.target).closest('.clnav-mobile-btn.close').length > 0) { 4453 e.preventDefault(); 4454 e.stopPropagation(); 4455 $clickDropdown.removeClass('open'); 4456 } 4457 return; 4458 } 4459 4460 e.preventDefault(); 4461 e.stopPropagation(); 4462 4463 const isOpen = $clickDropdown.hasClass('open'); 4464 $('.cl-nav .cl-nav-section.main .clnav-mobile-btn.dropdown.open').not($clickDropdown).removeClass('open'); 4465 $clickDropdown.toggleClass('open', !isOpen); 4466 }); 4467 $(document).on('click',function(e) { 4468 if($(e.target).closest('.cl-nav .cl-nav-section.main .clnav-mobile-btn.dropdown').length > 0) return; 4469 4470 $('.cl-nav .cl-nav-section.main .clnav-mobile-btn.dropdown.open').each(function() { 4471 const $openDropdown = $(this); 4472 const $previewSection = $openDropdown.closest('.change-mobile-modal .preview-section'); 4473 if($previewSection.length > 0 && $(e.target).closest($previewSection).length == 0) return; 4474 4475 $openDropdown.removeClass('open'); 4476 }); 4477 }); 4478 $(document).on('click','.clnav-sidemobile .clnav-mobile-tab', function(e) { 4479 e.preventDefault(); 4480 e.stopImmediatePropagation(); 4481 4482 const $tab = $(this); 4483 const target = $tab.attr('data-tab-target'); 4484 if(target === 'login') { 4485 clickHeaderFixnav('login'); 4486 return; 4487 } 4488 4489 const $section = $tab.closest('.clnav-sidemobile-body'); 4490 4491 $section.find('.clnav-mobile-tab').removeClass('active'); 4492 $tab.addClass('active'); 4493 4494 $section.find('[data-tab-panel]').removeClass('active'); 4495 $section.find(`[data-tab-panel="${target}"]`).addClass('active'); 4496 }); 4497 $(document).on('click',` 4498 .clnav-sidemobile[data-sidemobile="drawer1"] .clnav-mobile-btn.user .user-name-val, 4499 .clnav-sidemobile[data-sidemobile="drawer2"] .clnav-mobile-btn.user .user-name-val 4500 `, function(e) { 4501 e.preventDefault(); 4502 e.stopImmediatePropagation(); 4503 4504 const $sideMobile = $(this).closest('.clnav-sidemobile');
4505 const sidemobileStyle = $sideMobile.attr('data-sidemobile'); 4506 4507 if(sidemobileStyle === 'drawer1') { 4508 const $mypageTab = $sideMobile.find('.clnav-mobile-tabs > .clnav-mobile-tab[data-tab-target="mypage"]').first(); 4509 if($mypageTab.length) $mypageTab[0].click(); 4510 } 4511 else if(sidemobileStyle === 'drawer2') { 4512 const $mypageLink = $sideMobile.find('.clnav-mobile-btn.mypage > a').first(); 4513 if($mypageLink.length) $mypageLink[0].click(); 4514 } 4515 }); 4516 $(document).on('click',`.clnav-sidemobile .clnav-mobile-btn.dropdown, .clnav-sidemobile .cl-nav-item.dropdown > a[attr-folder="true"]`, function(e) { 4517 if($(e.target).closest('.cl-nav-depth').length > 0) return; 4518 4519 const $clickDropdown = $(e.target).closest('.dropdown'); 4520 const $clickSideMobile = $clickDropdown.closest('.clnav-sidemobile'); 4521 4522 const isOpen = $clickDropdown.hasClass('open'); 4523 const isAccordion = $clickDropdown.is('[data-style="accordion"]'); 4524 4525 if(isAccordion) { 4526 setSidemobileDropdownOpen($clickSideMobile.find('.dropdown').filter('.cl-nav-item, .clnav-mobile-btn').not($clickDropdown), false); 4527 } 4528 setSidemobileDropdownOpen($clickDropdown, !isOpen); 4529 }); 4530 $(document).on('click','.clnav-sidemobile .cl-nav-item.dropdown .cl-nav-depth', function(e) { 4531 if(e.target === null) return; 4532 4533 e.preventDefault(); 4534 e.stopImmediatePropagation(); 4535 4536 const $clickTarget = $(e.target);
4537 const $clickSideMobile = $clickTarget.closest('.clnav-sidemobile'); 4538 4539 const $clickDropdown = $clickTarget.closest('.cl-nav-item.dropdown'); 4540 const isOpen = $clickDropdown.hasClass('open'); 4541 const $dropdowns = $clickSideMobile.find('.dropdown').filter('.cl-nav-item, .clnav-mobile-btn'); 4542 4543 setSidemobileDropdownOpen($dropdowns.not($clickDropdown).filter('.open, .closing'), false); 4544 setSidemobileDropdownOpen($clickDropdown, !isOpen); 4545 }); 4546 $(document).on('click','.clnav-sidemobile',function(e) { 4547 if(e.target === null) return; 4548 4549 const $clickTarget = $(e.target); 4550 const $clickSideMobile = $clickTarget.closest('.clnav-sidemobile'); 4551 4552 let click_fn = ''; 4553 if ($clickTarget.is('.clnav-sidemobile') && 4554 !$clickTarget.is('[data-sidemobile^="fullscreen"]') 4555 ) { 4556 click_fn = 'close'; 4557 } 4558 else if ($clickTarget.closest('.clnav-mobile-btn').length) { 4559 const $clickBtn = $clickTarget.closest('.clnav-mobile-btn'); 4560 if ($clickBtn.hasClass('close')) click_fn = 'close'; 4561 else if ($clickBtn.hasClass('search')) click_fn = 'search'; 4562 else if ($clickBtn.hasClass('cart')) click_fn = 'cart'; 4563 else if ($clickBtn.hasClass('login')) click_fn = 'login'; 4564 else if ($clickBtn.hasClass('logout')) click_fn = 'logout'; 4565 } 4566 4567 switch(click_fn) { 4568 case 'close': 4569 $.clnav.setMode('sidemobile-open',false); 4570 break; 4571 4572 case 'search': 4573 break; 4574 4575 case 'cart': 4576 if(/^\/_cart/.test(window.location.pathname)) { 4577 $.clnav.setMode('sidemobile-open',false); 4578 } 4579 else { 4580 clickHeaderFixnav('cart'); 4581 } 4582 break; 4583 4584 case 'login': 4585 case 'logout': 4586 clickHeaderFixnav(click_fn); 4587 break; 4588 4589 default: 4590 break; 4591 } 4592 }); 4593 4594 // $(document).on('click','.clnav-sidemobile-backdrop',function(e) { 4595 // if(e.target === null) return; 4596 4597 // if($.clnav.checkLayout('meganav') 4598 // && $('body').outerWidth() > 767 4599 // ) { 4600 // if($('body').is('[data-clnav-mega="open"]')) $.clnav.setMode('mega-open',false); 4601 // } else { 4602 // if($('html').is('[data-clnav-sidemobile="open"]')) $.clnav.setMode('sidemobile-open',false); 4603 // } 4604 // }); 4605 /* 4606 $(document).on('click','.cl-nav-toggle, .clnav-sidemobile-close',function(e) { 4607 if(e.target === null) return; 4608 4609 if($('body').outerWidth() > 767 4610 && $(this).closest('header.cl-nav').is('[data-layout="meganav"]') 4611 ) { 4612 // mega open 4613 if($(this).is('.cl-nav-toggle') 4614 && ($('#el-menuConfig.open').length > 0 || !$.clnav.checkUsedArea('nav')) 4615 ) { 4616 return; 4617 } 4618 4619 var onoff = ($(this).is('.cl-nav-toggle') && !$('body').is('[data-clnav-mega="open"]')) ? true : false; 4620 $.clnav.setMode('mega-open',onoff); 4621 4622 } else { 4623 // sidemobile open 4624 var onoff = ($('html').is('[data-clnav-sidemobile="open"]')) ? false : true; 4625 $.clnav.setMode('sidemobile-open',onoff); 4626 } 4627 }); 4628 4629 $(document).on('click','.clnav-sidemobile .section-area.user',function(e) { 4630 if(e.target.classList.contains('user-menu')) { 4631 $(this).find('.profile').removeClass('open'); 4632 } 4633 4634 if(e.target.classList.contains('user-profile') || e.target.classList.contains('user-nick')) { 4635 if($(this).find('.profile').hasClass('open')) return; 4636 $(this).find('.profile').addClass('open'); 4637 } 4638 }); 4639 $(document).on('click','.clnav-sidemobile .clnav-section.bottom .cl-fixnav-item.dropdown.m-lang',function(e) { 4640 if(e.target.classList.contains('cl-fixsubnav-wrap') && e.target.classList.contains('dropdown-menu')) { 4641 $(this).removeClass('open'); 4642 } 4643 4644 if(this === e.target) { 4645 if($(this).hasClass('open')) return; 4646 $(this).addClass('open'); 4647 } 4648 }); 4649 */ 4650 4651 $(document).on('mouseenter','.cl-nav .cl-nav-item, .cl-nav .cl-mega-col', function(e) { 4652 const checkSample = $(this).closest('.navstyle-sample-item').length > 0 ? true : false; 4653 const $this = $(this); 4654 const $thisNav = (checkSample) ? $this.find('.navstyle-sample') : $this.closest('.cl-nav'); 4655 if($thisNav.is('[data-layout="meganav"]')) { 4656 const index = $this.index(); 4657 $thisNav.find('.cl-nav-list').each(function() { 4658 $(this).find('.cl-nav-item').eq(index).addClass('hover').siblings().removeClass('hover'); 4659 }); 4660 } 4661 4662 $.clnav.showHideNavStyle(this, e, 'enter'); 4663 }); 4664 $(document).on('mouseleave','.cl-nav .cl-nav-item, .cl-nav .cl-mega-col', function(e) { 4665 $.clnav.showHideNavStyle(this, e, 'leave'); 4666 }); 4667 $(document).on('mouseleave','.navstyle-sample-item, .cl-nav .cl-nav-list, .cl-nav .cl-mega-nav', function(e) { 4668 const checkSample = $(this).closest('.navstyle-sample-item').length > 0 ? true : false;
4669 const $this = $(this); 4670 const $thisNav = (checkSample) ? $this.find('.navstyle-sample') : $this.closest('.cl-nav'); 4671 $thisNav.removeAttr('data-nav-style-focus'); 4672 4673 $this.find('.cl-nav-item, .cl-mega-row').removeClass('hover last-hover'); 4674 }); 4675 4676 $(document).on('mouseenter','.cl-nav[data-behavior^="dropdown"] .cl-nav-item.dropdown',function(e) { 4677 if($('body').is('[data-bcmodal-preview="clnavsub"]') 4678 && $(this).closest('.cl-nav').find('.cl-nav-list ._bcmodalPreviewTarget').length > 0 4679 ) { 4680 $(this).closest('.cl-nav').find('.cl-nav-list ._bcmodalPreviewTarget').removeClass('_bcmodalPreviewTarget'); 4681 $(this).find('.cl-subnav-wrap').addClass('_bcmodalPreviewTarget'); 4682 } 4683 if($(this).closest('.cl-nav').is('[data-layout="sidenav"][data-behavior="dropdown-right"]')) { 4684 $.clnav.setSidenavListPosition($(this),true); 4685 } 4686 }); 4687 $(document).on('mousemove','.cl-nav[data-behavior^="dropdown"] .cl-nav-item.dropdown',function(e) { 4688 if($(this).closest('.cl-nav').is('[data-layout="sidenav"][data-behavior="dropdown-right"]')) { 4689 $.clnav.setSidenavListPosition($(this),true); 4690 } 4691 }); 4692 $(document).on('mouseleave','.cl-nav[data-behavior^="dropdown"] .cl-nav-item.dropdown',function(e) { 4693 if($(this).closest('.cl-nav').is('[data-layout="sidenav"][data-behavior="dropdown-right"]')) { 4694 $.clnav.setSidenavListPosition($(this),false); 4695 } 4696 }); 4697 $(document).on('mouseenter','.cl-nav .cl-fixnav-item.dropdown',function(e) { 4698 if($('body').is('[data-bcmodal-preview="clnavfix"]') 4699 && $(this).closest('.cl-nav').find('.cl-fixnav-list ._bcmodalPreviewTarget').length > 0 4700 ) { 4701 $(this).closest('.cl-nav').find('.cl-fixnav-list ._bcmodalPreviewTarget').removeClass('_bcmodalPreviewTarget'); 4702 $(this).find('.cl-fixsubnav-wrap').addClass('_bcmodalPreviewTarget'); 4703 } 4704 }); 4705 4706 $(document).on('click','.cl-fixnav-item.lang.dropdown .cl-fixsubnav-item a, .clnav-mobile-lang.dropdown .cl-fixsubnav-item a, .clnav-mobile-btn.lang.dropdown .cl-fixsubnav-item a', function(e) { 4707 if($(this).closest('.cl-sample').length > 0) return false; 4708 var slang_code = $(this).attr('data-code'); 4709 var tmp_mode = undefined; 4710 4711 if($.clnav.s.checkConfig) { 4712 tmp_mode = MODE; 4713 } else { 4714 if(LANGLINK) return; 4715 } 4716 4717 e.preventDefault(); 4718 changeLanguage(slang_code, tmp_mode); 4719 }); 4720 4721 $(document).on('click','.cl-fixnav-item.loginout a, .clnav-mobile-btn.login',function(e) { 4722 if($.clnav.s.checkConfig || $.clnav.s.checkRender) { 4723 e.preventDefault(); 4724 var msg = $.lang[LANG][`menu.loginout.no-support.${($.clnav.s.checkConfig) ? 'config' : 'render'}`]; 4725 $(this).showModalFlat($.lang[LANG]['config.information'], msg, true, false, '', 'ok', '', 'cl-cmmodal cl-s-btn w560 cl-p130 cl-p0 cl-okbtn-pbt70'); 4726 return false; 4727 } 4728 4729 if($(this).is('.clnav-mobile-btn.login') && $(this).closest('.clnav-sidemobile').length === 0) { 4730 e.preventDefault(); 4731 if(!clickHeaderFixnav('login')) { 4732 window.location.href = (location.port) ? '/_login' : `https://${location.host}/_login`; 4733 } 4734 } 4735 }); 4736 4737 $(document).on('click','.cl-fixnav-item.cart, .clnav-mobile-btn.cart',function(e) { 4738 if($(this).closest('.change-mobile-modal .preview-section').length > 0) { 4739 e.preventDefault(); 4740 e.stopImmediatePropagation(); 4741 return false; 4742 } 4743 4744 if($.clnav.s.checkConfig || $.clnav.s.checkRender) { 4745 e.preventDefault(); 4746 var msg = $.lang[LANG][`menu.cart.no-support.${($.clnav.s.checkConfig) ? 'config' : 'render'}`]; 4747 $(this).showModalFlat($.lang[LANG]['config.information'], msg, true, false, '', 'ok', '', 'cl-cmmodal cl-s-btn w560 cl-p130 cl-p0 cl-okbtn-pbt70'); 4748 return false; 4749 } 4750 4751 if($(this).is('.clnav-mobile-btn.cart') && $(this).closest('.clnav-sidemobile').length === 0) { 4752 clickHeaderFixnav('cart'); 4753 } 4754 }); 4755 4756 $(document).on('click','.cl-fixnav-item.search, .clnav-mobile-btn.search',function(e) { 4757 if($(this).find('.clnav-psearch[data-style="inline"]').length > 0) return; 4758 if($(this).closest('.change-mobile-modal .preview-section').length > 0) { 4759 e.preventDefault(); 4760 e.stopImmediatePropagation(); 4761 return false; 4762 } 4763 $.clnav.toggleFixnavSearch($(this),true); 4764 }); 4765 $(document).on('click','.clnav-psearch',function(e) { 4766 if(e.target === null) return; 4767 4768 if(e.target.classList.contains('clnav-psearch-btn')) { 4769 const psearchBtn = $(e.target); 4770 if(psearchBtn.hasClass('clicked')) return; 4771 4772 psearchBtn.addClass('clicked'); 4773 const psearchInput = $(e.target).closest('.input-group').find('.clnav-psearch-input'); 4774 const psearchError = $(e.target).closest('.clnav-psearch-body').find('.clnav-psearch-error'); 4775 4776 if($.clnav.s.checkConfig || $.clnav.s.checkRender) { 4777 e.preventDefault(); 4778 var msg = $.lang[LANG][`psearch.no-support.${($.clnav.s.checkConfig) ? 'config' : 'render'}`]; 4779 $(this).showModalFlat($.lang[LANG]['config.information'], msg, true, false, '', 'ok', '', 'cl-cmmodal cl-s-btn w560 cl-p130 cl-p0 cl-okbtn-pbt70', '', '', '', function() { psearchBtn.removeClass('clicked'); }); 4780 return false;
4781 } else { 4782 var psearch_regexp = new RegExp('^[a-zA-Z0-9ã±-ã ã -ã £ê°-í£\\?\\@\\!\\- ]*$'); 4783 var psearch_stx = (psearchInput?.val() ?? '').trim(); 4784 var psearch_error = ''; 4785 if(psearch_stx.length == 0) psearch_error = $.lang[LANG]['psearch.input.empty']; 4786 else if(!psearch_regexp.test(psearch_stx)) psearch_error = $.lang[LANG]['psearch.input.regexp']; 4787 4788 psearchBtn.removeClass('clicked'); 4789 if(psearch_error != '') { 4790 psearchError.html(`<i class="cl-icon alert02"></i> ${psearch_error}`); 4791 psearchInput.focus(); 4792 return false; 4793 } else { 4794 psearchError.empty(); 4795 4796 if($.clnav.s.settings.vpMode_onoff ?? false) { 4797 var viewportMode = $.clnav.s.settings.viewportMode; 4798 var vpmode = (typeof $('.mobilepc_ch').attr('data-desktop-option') != 'undefined') ? $('.mobilepc_ch').attr('data-desktop-option') : viewportMode; 4799 $.cookie('desktop-option',vpmode, { path: '/' }); 4800 } 4801 4802 var url = ($.clnav.s.checkSite) ? '' : '/render'; 4803 var href = url + '/psearch/num/1/stx/' + encodeURIComponent(psearch_stx); 4804 location.href = href; 4805 } 4806 4807 } 4808 } else if(e.target.classList.contains('clnav-psearch-input')) { 4809 // console.log('input click'); 4810 } else { 4811 $.clnav.toggleFixnavSearch($('.cl-nav .cl-fixnav-item.search'),false); 4812 } 4813 }); 4814 $(document).on('keydown','.clnav-psearch-input', function(e) { 4815 var psearchBtn = $(this).closest('.input-group').find('.clnav-psearch-btn'); 4816 if(!$.clnav.s.checkConfig 4817 && e.keyCode === 13 4818 ) { 4819 psearchBtn.click(); 4820 } 4821 }); 4822 4823 $(document).on('click','#element-display .cl-nav a, .preview-element .cl-nav a',function(e) { 4824 e.preventDefault(); 4825 e.stopImmediatePropagation(); 4826 }); 4827 4828 4829 4830 4831}); 4832 4833
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.