"use strict"; /* --- Anita Config --- */ const anita_config = { /* --- Header and Main Menu --- */ // Main Menu config for quick and same result for all pages. // Use 'Label' : 'url' for menu items and 'Label' : { ... } for Submenus. Don't forget about commas after each item. main_menu: { 'ABOUT US': '../sub01/about.php?topmenu=01', 'BRAND EXPERIENCE': '../sub02/bx.php?topmenu=02', 'CREATIVE X PERFORMANCE': '../sub03/creative.php?topmenu=03', 'DATA DRIVEN': '../sub04/menu1.php?topmenu=04', 'MUCHAE SSAM': '../sub05/muchae.php?topmenu=05', 'CONTACT US': '../sub06/menu01.php?topmenu=06' }, // Option to stick the header to the top of the page sticky_header: true, // Menu items appear delay in milliseconds fs_menu_delay: 100, /* --- Social Links --- */ /* --- Content Features --- */ // Page background Spotlight Effect spotlight: true, // Back to Top Button back2top: true, // Interractive Cursor int_cursor: true, /* --- Protection Options --- */ // Right Click Protection disable_right_click: true, // Protect Images from Drag image_drag_protection: true, /* --- Localization --- */ l10n: { // Footer Copyright string copyright: 'Copyright © 2022. All Rights Reserved.', // The message that appears when visitors try to open context menu rcp_message: 'Thank you for visiting our site.', // The Button Label for Context Menu blocker rcp_button: 'Close', // Back to Top Label b2t_label: 'Back to Top' } } /* --- Activate Preloader --- */ jQuery('body').append('
'); jQuery('body').addClass('is-loading'); /* --- Checking WebGL2 Availability --- */ function Anita_isWebGL2Available() { try { const canvas = document.createElement( 'canvas' ); return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) ); } catch ( e ) { return false; } } /* --- Class: Pan Axis Class --- */ class Anita_PanAxis { constructor( sens ) { let this_class = this; this.xs = 0; this.xd = 0; this.ys = 0; this.yd = 0; this.ax = 0; this.sens = sens; document.addEventListener('touchstart', function(e) { this_class.xs = e.touches[0].clientX; this_class.ys = e.touches[0].clientY; }, false); document.addEventListener('touchmove', function(e) { if ( ! this_class.ax ) { // X if ( this_class.xs ) { this_class.xd = this_class.xd + Math.abs( this_class.xs - e.touches[0].clientX ); this_class.xs = e.touches[0].clientX; } if ( this_class.ys ) { this_class.yd = this_class.yd + Math.abs( this_class.ys - e.touches[0].clientY ); this_class.ys = e.touches[0].clientY; } // Check Axis if (this_class.xd > this_class.sens) { this_class.ax = 'x'; } if (this_class.yd > this_class.sens) { this_class.ax = 'y'; } } }, false); document.addEventListener('touchend', function(e) { // Reset Values this_class.xs = 0; this_class.xd = 0; this_class.ys = 0; this_class.yd = 0; this_class.ax = 0; }, false); } getAxis() { return this.ax; } } const anita_axis = new Anita_PanAxis( 10 ); /* --- Anita Clock --- */ class Anita_Clock { constructor(autoStart = true) { this.autoStart = autoStart; this.startTime = 0; this.oldTime = 0; this.elapsedTime = 0; this.running = false; } start() { this.startTime = this.now(); this.oldTime = this.startTime; this.elapsedTime = 0; this.running = true; } stop() { this.getElapsedTime(); this.running = false; this.autoStart = false; } getElapsedTime() { this.getDelta(); return this.elapsedTime; } getDelta() { let diff = 0; if (this.autoStart && !this.running) { this.start(); return 0; } if (this.running) { const newTime = this.now(); diff = (newTime - this.oldTime) / 1000; this.oldTime = newTime; this.elapsedTime += diff; } return diff; } now() { return (typeof performance === 'undefined' ? Date : performance).now() } } /* --- Class: Lazy Loader --- */ class Anita_Lazy { constructor( options = {}) { let _self = this; this.items = new Array(); if ('IntersectionObserver' in window) { this.observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if ( ! entry.isIntersecting ) { return; } else { _self.preloadImage( entry.target ); _self.observer.unobserve( entry.target ); } }); }, options); } else { this.observer = false; } } addItem( $el ) { let $item; if ($el instanceof jQuery) { $item = $el; } else { $item = jQuery($el); } if ( ! this.observer ) { $item.attr('src', $item.attr('data-src')); } else { $item.wrap('
').removeClass('anita-lazy'); if ( $item.attr('width') && $item.attr('height') ) { let r = $item.attr('height')/$item.attr('width'), $p = $item.parent('.anita-lazy-wrapper'); $p.height($p.width() * r); } this.observer.observe($item[0]); } } preloadImage( this_img ) { const src = this_img.getAttribute('data-src'); if ( ! src ) { console.warn('Can not load image. No image src defined.'); return; } let img = new Image(); img.src = src; img.addEventListener('load', function(e) { this_img.src = src; jQuery(this_img).parent('.anita-lazy-wrapper').addClass('is-loaded').removeAttr('style'); if ( jQuery(this_img).hasClass('anita-flat-carousel-image') && anita ) { anita.carousel.layout(); } if ( jQuery(this_img).attr('data-id') && anita ) { anita.$el.brickwall[jQuery(this_img).attr('data-id')].layout(); } }); } } /* --- Class: Before and After --- */ class Anita_Before_After { constructor($obj) { if ($obj instanceof jQuery) { let this_class = this; this.$el = { $wrap: $obj, $before : jQuery('
').appendTo($obj), $after : jQuery('
').appendTo($obj), $divider : jQuery('
\ \ \ \
').appendTo($obj), }; this.$el.$after.append(this_class.$el.$wrap.children('img').clone()); this.offset = this.$el.$wrap.offset().left; this.size = this.$el.$wrap.width(); this.current = 50; this.target = 50; this.isDown = false; this.$el.$before.css('background-image', 'url('+ this.$el.$wrap.attr('data-img-before') +')'); this.$el.$after.children('img').wrap('
'); this.$el.$after.children('.anita-after-img').css('background-image', 'url('+ this.$el.$wrap.attr('data-img-after') +')'); // Mouse Events this.$el.$wrap.on('mousedown', function(e) { e.preventDefault(); this_class.isDown = true; }).on('mousemove', function(e) { e.preventDefault(); if (this_class.isDown) { let position = e.pageX - this_class.offset, newTarget = position/this_class.size; if (newTarget > 1) { newTarget = 1; } if (newTarget < 0) { newTarget = 0; } this_class.target = newTarget * 100; } }).on('mouseleave', function(e) { e.preventDefault(); this_class.isDown = false; }).on('mouseup', function(e) { e.preventDefault(); this_class.isDown = false; }); // Touch Events this.$el.$wrap[0].addEventListener('touchstart', function(e) { this_class.isDown = true; }, false); this.$el.$wrap[0].addEventListener('touchmove', function(e) { let axis = anita_axis.getAxis(); if ( 'x' == axis ) { e.preventDefault(); if (this_class.isDown) { let position = e.touches[0].clientX - this_class.offset, newTarget = position/this_class.size; if (newTarget > 1) { newTarget = 1; } if (newTarget < 0) { newTarget = 0; } this_class.target = newTarget * 100; } } }, false); this.$el.$wrap[0].addEventListener('touchend', function(e) { this_class.isDown = false; }, false); // Window Events jQuery(window).on('resize', function() { this_class.layout(); this_class.reset(); }).on('load', function() { this_class.layout(); }); // Layout this.layout(); // Run Animation this.requestAnimation(); } else { return false; } } layout() { let this_class = this; this.offset = this.$el.$wrap.offset().left; this.size = this.$el.$wrap.width(); this.$el.$after.children('.anita-after-img').width( this_class.$el.$wrap.width() ).height( this_class.$el.$wrap.height() ); } reset() { this.current = 50; this.target = 50; } requestAnimation() { this.animation = requestAnimationFrame(() => this.animate()); } animate() { this.current += ((this.target - this.current) * 0.1); this.$el.$after.css('width', parseFloat(this.current).toFixed(1) +'%'); this.$el.$divider.css('left', parseFloat(this.current).toFixed(1) +'%'); this.requestAnimation(); } } /* --- Class: Anita (Core Class) --- */ class Anita { constructor ( cfg = false ) { let _self = this; // Default Option Values this.options = { logo_size: { w: 96, h: 40 }, // Header main_menu: false, sticky_header: true, fs_menu_delay: 100, // Content socials: false, spotlight: true, back2top: true, // Protection disable_right_click: true, image_drag_protection: true, // Interractive Cursor int_cursor: true, cursorHover: 'a, button, input[type="submit"], .anita-before-after, .anita-toggles-item--title, .anita-hover', cursorscrollEW: '.anita-scrollEW, .pswp__scroll-wrap, .owl-stage-outer', cursorscrollNS: '.anita-scrollNS', cursorFollow: '.anita-menu-toggler, .anita-back2top, .anita-socials-list a, .owl-dot, .anita-gallery-nav, .pswp__button', // Localization l10n: { copyright: '', rcp_message: 'Context menu is not allowed on this website', rcp_button: 'Got it!', b2t_label: 'Back to Top' } } // Apply Custom Config Values if ( cfg ) { for (const [key, value] of Object.entries(cfg)) { this.options[key] = value; } } // Detect Environment this.isTouchDevice = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); this.iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/); this.isFirefox = (navigator.userAgent.indexOf("Firefox") > -1) ? true : false; this.isChrome = (navigator.userAgent.indexOf("Chrome") > -1) ? true : false; // Anita Elements this.$el = { head: jQuery('head'), body: jQuery('body'), header: jQuery('header#anita-header'), nav: jQuery('nav.anita-nav'), main: jQuery('main.anita-main'), footer: jQuery('footer#anita-footer'), win: jQuery(window), brickwall: {} } // Define Links Exception this.linksException = [ '.shadowcore-lightbox-link', '.anita-lightbox-link', '.comment-reply-link', '.anita-noanim-link' ]; // Define Variables this.scrollLockPoint = jQuery(window).scrollTop(); this.scrollLocked = false; this.init(); this.init_page(); // Back to Top if ( _self.options.back2top ) { _self.$el.b2t = jQuery('') .appendTo(_self.$el.body) .wrap('
') .append('' + _self.options.l10n.b2t_label + '') .on('click', function(e) { e.preventDefault(); jQuery('html, body').stop().animate( { scrollTop: 0 }, 500 ); }); } // Spotlight if ( _self.options.spotlight ) { _self.$el.body.append('
'); } // Events _self.$el.win.on('load', function() { _self.layout(); }).on('resize', function() { _self.layout(); }).on('scroll', function() { if ( _self.$el.win.scrollTop() > 40 ) { _self.$el.header.addClass('is-scrolled'); } else { _self.$el.header.removeClass('is-scrolled'); } if ( _self.scrollLocked ) { window.scrollTo({ top: _self.scrollLockPoint }); } else { // Check Back 2 Top State if (_self.$el.b2t) { if ( _self.$el.win.scrollTop() > window.innerHeight ) { _self.$el.b2t.parent().addClass('is-visible'); } else { _self.$el.b2t.parent().removeClass('is-visible'); } if ( _self.$el.win.scrollTop() >= _self.maxScroll ) { _self.$el.b2t.parent().addClass('is-fixed'); } else { _self.$el.b2t.parent().removeClass('is-fixed'); } } } }); // Keyboard Events jQuery(document).on('keyup', function(e) { if (e.keyCode == 27) { if ( _self.$el.body.hasClass('anita-show-menu') ) { _self.scrollLocked = false; _self.$el.body.removeClass('anita-show-menu'); } if ( _self.$el.body.hasClass('anita-rcp-message-show') ) { _self.$el.body.removeClass('anita-rcp-message-show'); } } }); } contentOrigin() { if ( this.$el.main.children('.anita-container').length ) { this.$el.main.children('.anita-container').css('transform-origin', '50% ' + (window.scrollY + 0.5 * window.innerHeight) + 'px'); } } generateID() { return '_' + Math.random().toString(36).substr(2, 9); } inView( this_el ) { let rect = this_el.getBoundingClientRect() return ( ( rect.height > 0 || rect.width > 0) && rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) ) } // Anita Init init() { let _self = this; // Max Scroll for Back to Top this.maxScroll = this.$el.body.height() - this.$el.footer.height() - this.$el.win.height(); if (this.$el.b2t) { if (this.$el.win.scrollTop() >= this.maxScroll ) { this.$el.b2t.parent().addClass('is-fixed'); } if ( this.$el.win.scrollTop() > window.innerHeight ) { this.$el.b2t.parent().addClass('is-visible'); } else { this.$el.b2t.parent().removeClass('is-visible'); } } // Right Click Protection if ( _self.options.disable_right_click ) { // Append DOM _self.$el.body.append('\
\
\
\

'+ _self.options.l10n.rcp_message +'

\ '+ _self.options.l10n.rcp_button +'\
\
'); // Disable Context Menu jQuery(document).on('contextmenu', function (e) { e.preventDefault(); if ( jQuery('.anita-rcp-message').length ) { _self.$el.body.addClass('anita-rcp-message-show'); } }); if ( jQuery('.anita-rcp-message').length ) { jQuery('.anita-rcp-message').on('click', '.anita-rcpm-overlay, .anita-rcpm-box', function(e) { e.preventDefault(); _self.$el.body.removeClass('anita-rcp-message-show'); }); } } // Image Drag Protection if ( _self.options.image_drag_protection ) { jQuery(document).on('mousedown', 'a', function (e) { if ( jQuery(this).attr('href').indexOf('.png') || jQuery(this).attr('href').indexOf('.gif') || jQuery(this).attr('href').indexOf('.jpg') ) { e.preventDefault(); } }); jQuery(document).on('mousedown', 'img', function (e) { e.preventDefault(); }); } // Header Options if ( _self.options.sticky_header ) { _self.$el.header.addClass('is-sticky'); } // Set Retina Logo if ( jQuery('.anita-logo.is-retina').length ) { jQuery('.anita-logo.is-retina').each(function() { let $this = jQuery(this); $this.css({ 'width' : $this.children('img').attr('width') ? (0.5 * $this.children('img').attr('width')) : _self.options.logo_size.w, 'height' : $this.children('img').attr('height') ? (0.5 * $this.children('img').attr('height')) : _self.options.logo_size.h, }) }); } // Main Menu Setup let anita_fullscreen_menu = function() { // Menu Numbers let count = 1; _self.$el.nav.children('ul.main-menu').children('li').each(function() { jQuery(this).addClass('is-hidden').children('a').prepend(''+ ( count < 10 ? '0' + count : count) +'.'); count++; }); // Sub-Menu Accordion if ( _self.$el.nav.find('.menu-item-has-children').length ) { _self.$el.nav.find('.menu-item-has-children').children('ul.sub-menu').slideUp(1); _self.$el.nav.on('click', '.menu-item-has-children > a', function(e) { e.preventDefault(); jQuery(this).parent().toggleClass('is-open').children('ul.sub-menu').slideToggle(300); }); } _self.$el.nav.show_menu = function() { // Show Menu Items Function let items_length = _self.$el.nav.children('ul.main-menu').children('li').length - 1; _self.$el.body.addClass('anita-show-menu'); _self.scrollLockPoint = _self.$el.win.scrollTop(); _self.scrollLocked = true; _self.$el.nav.children('ul.main-menu').children('li').each(function(i) { let $this = jQuery(this); setTimeout(function() { $this.removeClass('is-hidden'); if ( i == items_length ) { _self.$el.body.removeClass('is-locked'); } }, i * _self.options.fs_menu_delay, $this); }); } _self.$el.nav.hide_menu = function() { // Hide Menu Items Function let items_length = _self.$el.nav.children('ul.main-menu').children('li').length - 1; _self.scrollLocked = false; _self.$el.body.removeClass('is-locked'); _self.$el.body.removeClass('anita-show-menu'); _self.$el.nav.children('ul.main-menu').children('li').addClass('is-hidden'); } // Menu Open/Close Event jQuery('.anita-menu-toggler').on('click', function() { _self.$el.body.addClass('is-locked'); _self.contentOrigin(); if (! _self.$el.body.hasClass('anita-show-menu') ) { _self.$el.nav.show_menu(); } else { // Hide Items _self.$el.nav.hide_menu(); } }); jQuery('.anita-menu-overlay').on('click', function() { _self.scrollLocked = false; _self.$el.body.removeClass('anita-show-menu'); }); } let anita_mobile_menu = function() { // Create Mobile Menu _self.$el.mobileMenu = jQuery('
').appendTo(_self.$el.body); _self.$el.mobileMenu.append(_self.$el.nav.clone()); _self.$el.mobileMenuNav = _self.$el.mobileMenu.children('nav'); _self.$el.mobileMenuNav.removeClass('anita-simple-nav'); _self.$el.mobileMenu.append('
'); // Items Counter _self.$el.mobileMenuNav.children('ul.main-menu').children('li').each(function(i) { i++; jQuery(this).addClass('is-hidden').children('a').prepend(''+ ( i < 10 ? '0' + i : i) +'.'); }); // Sub-Menu Accordion if ( _self.$el.mobileMenuNav.find('.menu-item-has-children').length ) { _self.$el.mobileMenuNav.find('.menu-item-has-children').children('ul.sub-menu').slideUp(1); _self.$el.mobileMenuNav.on('click', '.menu-item-has-children > a', function(e) { e.preventDefault(); jQuery(this).parent().toggleClass('is-open').children('ul.sub-menu').slideToggle(300); }); } // Show Hide Menu _self.$el.mobileMenuNav.show_menu = function() { // Show Menu Items Function let items_length = _self.$el.nav.children('ul.main-menu').children('li').length - 1; _self.$el.body.addClass('anita-show-menu'); _self.scrollLockPoint = _self.$el.win.scrollTop(); _self.scrollLocked = true; _self.$el.mobileMenuNav.children('ul.main-menu').children('li').each(function(i) { let $this = jQuery(this); setTimeout(function() { $this.removeClass('is-hidden'); if ( i == items_length ) { _self.$el.body.removeClass('is-locked'); } }, i * _self.options.fs_menu_delay, $this); }); } _self.$el.mobileMenuNav.hide_menu = function() { // Hide Menu Items Function let items_length = _self.$el.nav.children('ul.main-menu').children('li').length - 1; _self.scrollLocked = false; _self.$el.body.removeClass('is-locked'); _self.$el.body.removeClass('anita-show-menu'); _self.$el.mobileMenuNav.children('ul.main-menu').children('li').addClass('is-hidden'); } // Mobile Menu Button _self.$el.header.find('.anita-menu-wrapper').append(''); _self.$el.header.on('click', '.anita-mobile-menu-toggler', function() { if (! _self.$el.body.hasClass('anita-show-menu') ) { _self.$el.mobileMenuNav.show_menu(); } else { // Hide Items _self.$el.mobileMenuNav.hide_menu(); } }); } // Create JS Menu let anita_js_menu = function() { if ( _self.options.main_menu !== null ) { let current_page = window.location.pathname.split("/").pop(); if (current_page == '') { current_page = 'index'; } let $main_menu = jQuery('