/**
* Barlog theme javaScript.
*/
'use strict'; // prevent global namespace pollution
(function (elmPrototype, docPrototype) {
var scopeRegex = /:scope\b/gi;
function patchElement(method) {
var native = elmPrototype[method];
elmPrototype[method] = function (selector) {
var element = this;
var id = element.id || 'qsid' + new Date().getTime();
var needsId = !element.id;
var hasScope = scopeRegex.test(selector);
try {
if (hasScope) {
if (needsId) {
element.id = id;
}
selector = selector.replace(scopeRegex, '#' + id);
}
return native.call(this, selector);
} finally {
if (needsId) {
element.id = null;
}
}
};
}
function patchDocument(method) {
var native = docPrototype[method];
docPrototype[method] = function (selector) {
// In context of document, :scope is the same
// as :root so can just be stripped
// https://www.w3.org/TR/selectors4/#scope-pseudo
return native.call(this, selector.replace(scopeRegex, ''));
};
}
try {
document.querySelector(':scope');
} catch (err) {
patchElement('querySelector');
patchElement('querySelectorAll');
patchDocument('querySelector');
patchDocument('querySelectorAll');
}
})(Element.prototype, Document.prototype);
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('append')) {
return;
}
Object.defineProperty(item, 'append', {
configurable: true,
enumerable: true,
writable: true,
value: function append() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.appendChild(docFrag);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
(function () {
if (typeof NodeList.prototype.forEach === 'function') return false;
NodeList.prototype.forEach = Array.prototype.forEach;
})();
/**
* matches() pollyfil
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
*/
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
/**
* closest() pollyfil
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
*/
if (!Element.prototype.closest) {
Element.prototype.closest = function (s) {
var el = this;
if (!document.documentElement.contains(el)) {
return null;
}
do {
if (el.matches(s)) {
return el;
}
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
/**
* Main Barlog Scripts
*/
(function () {
var Barlog = function () {
this.options = {
menuToggleDuration: 300
};
this.menuSidebarState = 'closed';
this.isPreviewing = document.body.classList.contains('customize-previewing');
this.init();
};
/**
* Add body class to check touch screen.
*/
Barlog.prototype.checkTouchScreen = function () {
if ('ontouchstart' in document.documentElement) {
document.body.classList.add('ontouch-screen');
} else {
document.body.classList.add('not-touch-screen');
}
};
/**
* Check if current mobile viewing.
*
* @return bool
*/
Barlog.prototype.isMobile = function () {
if (
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/Windows Phone/i)
) {
return true;
} else {
return false;
}
};
/**
* Init mobile sidebar.
*
* @todo Move menu sidebar to body.
* @todo Add events to menu buttons.
*/
Barlog.prototype.initMenuSidebar = function () {
var themeMenuSidebar;
const that = this;
if (document.body.classList.contains('menu_sidebar_dropdown')) {
// $( '#header-menu-sidebar' ).insertAfter( "#masthead" );
} else {
themeMenuSidebar = document.getElementById('header-menu-sidebar');
if (themeMenuSidebar) {
document.body.append(themeMenuSidebar);
}
}
document.addEventListener(
'customize_section_opened',
function (e) {
if (e.detail === 'header_sidebar') {
this.toggleMenuSidebar(false);
}
}.bind(this)
);
var menuMobileToggleButtons = document.querySelectorAll('.menu-mobile-toggle');
/**
* When click to toggle buttons.
*/
this.addEvent(
menuMobileToggleButtons,
'click',
function (e) {
e.preventDefault();
this.toggleMenuSidebar();
}.bind(this)
);
var closeButtons = document.querySelectorAll('#header-menu-sidebar .close-panel, .close-sidebar-panel');
/**
* When click close buttons.
*/
this.addEvent(
closeButtons,
'click',
function (e) {
e.preventDefault();
this.closeMenuSidebar();
}.bind(this)
);
/**
* When click to ouside of menu sidebar.
*/
this.addEvent(
document,
'click',
function (e) {
if (document.body.classList.contains('is-menu-sidebar')) {
var menuSidebar = document.getElementById('header-menu-sidebar');
var buttons = document.querySelectorAll('.menu-mobile-toggle');
var outside = false;
var isClickInside = menuSidebar.contains(e.target);
if (!isClickInside) {
outside = true;
}
// If the click happened inside the the container, bail
if (!e.target.closest('#header-menu-sidebar') && e.target !== menuSidebar) {
// Outside menu sidebar.
outside = true;
}
// Check if not click to menu toggle buttons.
var onButton = false;
if (buttons.length) {
for (var i = 0; i < buttons.length; i++) {
// If click on toggle button.
if (e.target.closest('.menu-mobile-toggle') || e.target === buttons[i]) {
onButton = true;
}
}
}
if (outside && !onButton) {
this.closeMenuSidebar();
}
}
}.bind(this)
);
this.addEvent(
document,
'keyup',
function (e) {
if (e.keyCode === 27) {
this.closeMenuSidebar();
}
}.bind(this)
);
/**
* When click to anchor links.
* @since 0.3.9
*/
this.addEvent(
document.querySelectorAll('.menu a[href*="#"]'),
'click',
function (e) {
let el = e.target.tagName === 'A' ? e.target : e.target.closest('a');
let url = new URL(el.href);
if (url.origin + url.pathname === window.location.origin + window.location.pathname) {
let elTo = document.querySelector(url.hash);
if (elTo) {
e.preventDefault();
that.closeMenuSidebar();
window.scrollTo({
top: elTo.getBoundingClientRect().y,
left: 0,
behavior: 'smooth'
})
window.history.pushState({}, null, url.href);
}
}
}
);
};
/**
* Init mobile search form
*
* @todo Need check
*/
Barlog.prototype.initMobieSearchForm = function () {
var mobileSearchForm = document.querySelector('.search-form--mobile');
if (mobileSearchForm) {
mobileSearchForm.classList.add('mobile-search-form-sidebar menu-sidebar-panel');
mobileSearchForm.classList.remove('hide-on-mobile hide-on-tablet');
document.body.prepend(mobileSearchForm);
}
};
Barlog.prototype.toggleMobileSubmenu = function (e) {
e.preventDefault();
var that = this;
var li = e.target.closest('li');
var firstSubmenu = li.querySelectorAll(':scope > .sub-menu');
if (!li.classList.contains('open-sub')) {
// Show the sub menu.
li.classList.add('open-sub');
if (firstSubmenu.length) {
for (var i = 0; i < firstSubmenu.length; i++) {
that.slideDown(firstSubmenu[i], this.options.menuToggleDuration, function () {
li.classList.add('open-sub');
});
}
}
} else {
// Hide the sub menu.
if (firstSubmenu.length) {
for (var i = 0; i < firstSubmenu.length; i++) {
that.slideUp(firstSubmenu[i], this.options.menuToggleDuration, function () {
li.classList.remove('open-sub');
});
}
}
}
};
/**
* Add events listener for mobile toggle button.
*
* @param Element toggleIcon
*/
Barlog.prototype.toggleMobileSubmenuEvents = function (toggleIcon) {
toggleIcon.addEventListener('click', this.toggleMobileSubmenu.bind(this));
};
/**
* Inital mobile submenu.
*/
Barlog.prototype.initMobileSubMenu = function () {
var menuChildren = document.querySelectorAll('#header-menu-sidebar .nav-menu-mobile .menu-item-has-children');
if (menuChildren.length) {
for (var i = 0; i < menuChildren.length; i++) {
var child = menuChildren[i];
if (!child.classList.contains('toggle--added')) {
child.classList.add('toggle--added');
var fistLink = child.querySelector(':scope > a');
var d = fistLink.cloneNode(true);
if (this.isPreviewing) {
}
var toggleButton = document.createElement('span');
toggleButton.classList.add('nav-toggle-icon');
toggleButton.innerHTML = '';
fistLink.parentNode.insertBefore(toggleButton, fistLink);
var submenu = child.querySelector(':scope > .sub-menu');
var firstSubmenu = child.querySelectorAll(':scope > .sub-menu');
if (firstSubmenu.length) {
for (var j = 0; j < firstSubmenu.length; j++) {
this.slideUp(firstSubmenu[j], 0);
}
}
this.toggleMobileSubmenuEvents(toggleButton);
}
}
}
};
/**
* SideUp
*
* @param Element element
* @param number duration
* @param function callBack
*/
Barlog.prototype.slideUp = function (element, duration, callBack) {
if (typeof duration !== 'number') {
duration = 0;
}
// if ( element._sideUpTimeOut ) {
// clearTimeout( element._sideUpTimeOut );
// element._sideUpTimeOut = false;
// }
if (element._slideDownTimeOut) {
clearTimeout(element._slideDownTimeOut);
element._slideDownTimeOut = false;
}
// Get orignal height.
var offset = element.getBoundingClientRect();
// Back to default.
element.style.overflow = 'hidden';
element.style.height = offset.height + 'px';
element.style.transition = 'height ' + duration + 'ms linear';
setTimeout(function () {
element.style.height = '0px';
}, 20);
element._sideUpTimeOut = setTimeout(function () {
element.style.transition = '';
if (typeof callBack === 'function') {
callBack.call(this);
}
}, duration + 20);
};
/**
*
* @param Element element
* @param number duration
* @param function callBack
*/
Barlog.prototype.slideDown = function (element, duration, callBack) {
if (typeof duration !== 'number') {
duration = 0;
}
if (element._sideUpTimeOut) {
clearTimeout(element._sideUpTimeOut);
element._sideUpTimeOut = false;
}
// if ( element._slideDownTimeOut ) {
// clearTimeout( element._slideDownTimeOut );
// element._slideDownTimeOut = false;
// }
// Reset element styling to get orignal height.
element.style.height = 'initial';
element.style.overflow = 'initial';
element.style.transition = '';
// Get orignal height.
var offset = element.getBoundingClientRect();
// Back to default.
element.style.height = '0px';
element.style.overflow = 'hidden';
element.style.transition = 'height ' + duration + 'ms linear';
setTimeout(function () {
element.style.height = offset.height + 'px';
}, 50);
element._sideUpTimeOut = setTimeout(function () {
element.style.height = '';
element.style.overflow = '';
element.style.transition = '';
if (typeof callBack === 'function') {
callBack.call(this);
}
}, duration);
};
Barlog.prototype.insertMenuOverlayClass = function () {
var navMobile = document.querySelector('.nav-menu-mobile');
if (navMobile) {
if (document.body.classList.contains('menu_sidebar_slide_overlay')) {
navMobile.classList.add('nav-menu-overlay');
} else {
navMobile.classList.remove('nav-menu-overlay');
}
}
};
Barlog.prototype.setupMobileItemAnimations = function (element) {
var h = window.height;
if (typeof element === 'undefined') {
element = document.getElementById('header-menu-sidebar');
}
var t = 0.2;
var index = 0;
var itemsInner = element.querySelectorAll('.item--inner');
if (itemsInner.length) {
for (var i = 0; i < itemsInner.length; i++) {
index++;
itemsInner[i].style.transitionDelay = index * t + 's';
}
}
};
/**
* Toogle Element class name.
*
* @param Element element
* @param string className
*/
Barlog.prototype.toggleClass = function (element, className) {
if (element instanceof NodeList) {
for (var i = 0; i < element.length; i++) {
if (element[i].classList.contains(className)) {
element[i].classList.remove(className);
} else {
element[i].classList.add(className);
}
}
} else if (element instanceof Node || element instanceof Element) {
if (element.classList.contains(className)) {
element.classList.remove(className);
} else {
element.classList.add(className);
}
}
};
/**
* Add class to element.
*
* @param Element element
* @param string className
*/
Barlog.prototype.addClass = function (element, className) {
if (element instanceof NodeList) {
for (var i = 0; i < element.length; i++) {
element[i].classList.add(className);
}
} else if (element instanceof Node || element instanceof Element) {
element.classList.add(className);
}
};
/**
* Remove class name from element.
*
* @param Element element
* @param string className
*/
Barlog.prototype.removeClass = function (element, className) {
// Split each class by space.
var classes = className.split(' ');
if (element instanceof NodeList) {
for (var i = 0; i < element.length; i++) {
for (var j = 0; j < classes.length; j++) {
element[i].classList.remove(classes[j]);
}
}
} else if (element instanceof Node || element instanceof Element) {
for (var j = 0; j < classes.length; j++) {
element.classList.remove(classes[j]);
}
}
};
/**
* Add event handle to elements.
*
* @param Element element
* @param string event
* @param function callBack
*/
Barlog.prototype.addEvent = function (element, event, callBack) {
if (element instanceof NodeList) {
for (var i = 0; i < element.length; i++) {
element[i].addEventListener(event, callBack);
}
} else if (element instanceof Node || element instanceof Element) {
element.addEventListener(event, callBack);
}
};
/**
* Close menu sidebar.
*/
Barlog.prototype.closeMenuSidebar = function () {
document.body.classList.add('hiding-header-menu-sidebar');
document.body.classList.remove('is-menu-sidebar');
var toggleButtons = document.querySelectorAll('.menu-mobile-toggle, .menu-mobile-toggle .hamburger');
this.removeClass(toggleButtons, 'is-active');
/**
* For dropdown sidebar.
*/
if (document.body.classList.contains('menu_sidebar_dropdown')) {
this.removeClass(document.body, 'hiding-header-menu-sidebar');
var menuSidebar = document.getElementById('header-menu-sidebar');
var menuSidebarInner = document.getElementById('header-menu-sidebar-inner');
var offset = menuSidebarInner.getBoundingClientRect();
var h = offset.height;
this.slideUp(
menuSidebar,
300,
function () {
menuSidebar.style.height = 0;
menuSidebar.style.display = 'block';
}.bind(this)
);
} else {
// Else slide sidebar.
setTimeout(
function () {
this.removeClass(document.body, 'hiding-header-menu-sidebar');
}.bind(this),
1000
);
}
};
/**
* Toggle menu sidebar.
*
* @param bool open use animation or not.
*/
Barlog.prototype.toggleMenuSidebar = function (toggle) {
if (typeof toggle === 'undefined') {
toggle = true;
}
document.body.classList.remove('hiding-header-menu-sidebar');
if (!toggle) {
document.body.classList.add('is-menu-sidebar');
} else {
this.toggleClass(document.body, 'is-menu-sidebar');
}
if (document.body.classList.contains('menu_sidebar_dropdown')) {
var buttons = document.querySelectorAll('.menu-mobile-toggle, .menu-mobile-toggle .hamburger');
if (toggle) {
this.toggleClass(buttons, 'is-active');
} else {
this.addClass(buttons, 'is-active');
}
if (document.body.classList.contains('is-menu-sidebar')) {
var menuSidebar = document.getElementById('header-menu-sidebar');
var menuSidebarInner = document.getElementById('header-menu-sidebar-inner');
var offset = menuSidebarInner.getBoundingClientRect();
var h = offset.height;
this.slideDown(menuSidebar, 300, function () {
menuSidebar.style.height = h + 'px';
});
} else {
if (toggle) {
this.closeMenuSidebar();
}
}
}
};
/**
* Auto align search form.
*/
Barlog.prototype.searchFormAutoAlign = function () {
var searchItems = document.querySelectorAll('.header-search_icon-item');
var w = window.innerWidth;
for (var i = 0; i < searchItems.length; i++) {
var container = searchItems[i];
var button = container.querySelector('.search-icon');
var buttonOffset = button.getBoundingClientRect();
this.removeClass(container, 'search-right search-left');
if (buttonOffset.left > w / 2) {
this.removeClass(container, 'search-right');
this.addClass(container, 'search-left');
} else {
this.removeClass(container, 'search-left');
this.addClass(container, 'search-right');
}
}
};
/**
* Search form.
*/
Barlog.prototype.initSearchForm = function () {
var searchItems = document.querySelectorAll('.header-search_icon-item');
var that = this;
searchItems.forEach(function (container) {
if (!container.classList.contains('js-added')) {
that.addClass(container, 'js-added');
that.removeClass(container, 'active');
var icon = container.querySelector('.search-icon');
var iconSearchClick = function (e) {
e.preventDefault();
var inputField = container.querySelector('.search-field');
if (!container.classList.contains('active')) {
container.classList.add('active');
inputField.blur();
} else {
this.removeClass(container, 'active');
inputField.focus();
}
};
var clickOutSideSearchIcon = function (e) {
// if the target of the click isn't the container nor a descendant of the container
if (!(container === e.target) && !container.contains(e.target)) {
that.removeClass(container, 'active');
}
};
icon.removeEventListener('click', iconSearchClick);
//document.removeEventListener("click", clickOutSideSearchIcon);
/**
* Add event handle when click to icon.
*/
that.addEvent(icon, 'click', iconSearchClick.bind(that));
/**
* When click outside search form.
*/
that.addEvent(document, 'click', clickOutSideSearchIcon.bind(that));
}
});
that.searchFormAutoAlign();
};
/**
* Wrapper element
*
* @param Element element
* @param strig tag Tag name.
*
* @return Element
*/
Barlog.prototype.wrapper = function (element, tag) {
if (typeof tag === 'undefined') {
tag = 'div';
}
var wrapper = document.createElement(tag);
element.parentNode.replaceChild(wrapper, element);
wrapper.appendChild(element);
return wrapper;
};
/**
* Responsive table.
*/
Barlog.prototype.responsiveTable = function () {
var tables = document.querySelectorAll('.entry-content table');
for (var i = 0; i < tables.length; i++) {
if (!tables[i].parentNode.classList.contains('table-wrapper')) {
// Wrap table by each div.table-wrapper
var dWrapper = document.createElement('div');
dWrapper.classList.add('table-wrapper');
tables[i].parentNode.replaceChild(dWrapper, tables[i]);
dWrapper.appendChild(tables[i]);
}
}
};
/**
* Reponsive video style.
*/
Barlog.prototype.responsiveVideos = function () { };
/**
* Inittial
*/
Barlog.prototype.init = function () {
this.checkTouchScreen();
this.initMobieSearchForm();
this.initMobileSubMenu();
this.insertMenuOverlayClass();
this.setupMobileItemAnimations();
this.initMenuSidebar();
this.initSearchForm();
this.responsiveTable();
this.responsiveVideos();
/**
* Add action when Header Panel rendered by customizer.
*/
document.addEventListener(
'header_builder_panel_changed',
function () {
this.initMobileSubMenu();
this.insertMenuOverlayClass();
}.bind(this)
);
// Add actions when window resize.
var tf;
window.addEventListener(
'resize',
function () {
// Resetup mobile animations
this.setupMobileItemAnimations();
// Resetup search form alignmenet.
this.removeClass(document.querySelectorAll('.header-search_icon-item'), 'active');
if (tf) {
clearTimeout(tf);
}
tf = setTimeout(this.searchFormAutoAlign.bind(this), 100);
}.bind(this)
);
document.addEventListener(
'selective-refresh-content-rendered',
function (e) {
console.log('e.detail', e.detail);
if ('barlog_customize_render_header' === e.detail) {
var oldMenu = document.querySelector('body > .header-menu-sidebar');
if (null !== oldMenu) {
oldMenu.remove();
}
this.initMobieSearchForm();
this.initMobileSubMenu();
this.insertMenuOverlayClass();
this.setupMobileItemAnimations();
this.initMenuSidebar();
this.initSearchForm();
console.log('header_change');
}
if ('Barlog_Builder_Item_Search_Icon__render' === e.detail) {
this.initMobieSearchForm();
this.initSearchForm();
this.setupMobileItemAnimations();
}
}.bind(this)
);
};
/**
* Check is mobile.
* This may use in plugins.
*
* @deprecated 0.2.6
*/
function barlog_is_mobile() {
return Barlog.isMobile();
}
window.barlog_is_mobile = barlog_is_mobile;
window.Barlog = new Barlog();
/**
* Fix viewport units on Mobile.
*/
(function () {
if (window.Barlog.isMobile()) {
/**
* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
*/
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
var vh = window.innerHeight * 0.01;
var vw = window.innerWidth * 0.01;
// Then we set the value in the --vh, --vw custom property to the root of the document
document.documentElement.style.setProperty('--vh', vh + 'px');
document.documentElement.style.setProperty('--vw', vw + 'px');
window.addEventListener('resize', function () {
var vh = window.innerHeight * 0.01;
var vw = window.innerWidth * 0.01;
document.documentElement.style.setProperty('--vh', vh + 'px');
document.documentElement.style.setProperty('--vw', vw + 'px');
});
}
})();
})();
/**
*
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
(function () {
var container, button, menu, links, i, len;
container = document.getElementById('site-navigation-main-desktop');
if (!container) {
return;
}
menu = container.getElementsByTagName('ul')[0];
// Hide menu toggle button if menu is empty and return early.
if ('undefined' === typeof menu) {
return;
}
menu.setAttribute('aria-expanded', 'false');
if (-1 === menu.className.indexOf('nav-menu')) {
menu.className += ' nav-menu';
}
// Get all the link elements within the menu.
links = menu.getElementsByTagName('a');
// Each time a menu link is focused or blurred, toggle focus.
for (i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('focus', toggleFocus, true);
links[i].addEventListener('blur', toggleFocus, true);
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while (-1 === self.className.indexOf('nav-menu')) {
// On li elements toggle the class .focus.
if ('li' === self.tagName.toLowerCase()) {
if (-1 !== self.className.indexOf('focus')) {
self.className = self.className.replace(' focus', '');
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
/**
* Toggles `focus` class to allow submenu access on tablets.
*/
(function (container) {
var touchStartFn,
i,
parentLink = container.querySelectorAll('.menu-item-has-children > a, .page_item_has_children > a');
if ('ontouchstart' in window) {
touchStartFn = function (e) {
var menuItem = this.parentNode,
i;
if (!menuItem.classList.contains('focus')) {
e.preventDefault();
for (i = 0; i < menuItem.parentNode.children.length; ++i) {
if (menuItem === menuItem.parentNode.children[i]) {
continue;
}
menuItem.parentNode.children[i].classList.remove('focus');
}
menuItem.classList.add('focus');
} else {
menuItem.classList.remove('focus');
}
};
for (i = 0; i < parentLink.length; ++i) {
parentLink[i].addEventListener('touchstart', touchStartFn, false);
}
}
})(container);
})();
/**
*
* Helps with accessibility for keyboard only users.
*
* Learn more: https://git.io/vWdr2
*/
(function () {
var isIe = /(trident|msie)/i.test(navigator.userAgent);
if (isIe && document.getElementById && window.addEventListener) {
window.addEventListener(
'hashchange',
function () {
var id = location.hash.substring(1),
element;
if (!/^[A-z0-9_-]+$/.test(id)) {
return;
}
element = document.getElementById(id);
if (element) {
if (!/^(?:a|select|input|button|textarea)$/i.test(element.tagName)) {
element.tabIndex = -1;
}
element.focus();
}
},
false
);
}
})();