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