/* Template & Designed by Orihashi Ren */
/* http://kerry.php.xdomain.jp/ */
drop
document.addEventListener('DOMContentLoaded', function () {
/* page loader ---------------------------------------------- */
if (document.querySelector('.page-loader') != null) {
setTimeout(function () {
document.querySelector('.page-loader').classList.add('fadeOut');
if (document.querySelector('.wrp') != null) {
document.querySelector('.wrp').classList.add('show');
};
}, 500);
}
if (document.querySelector('.loader') != null) {
setTimeout(function () {
document.querySelector('.loader').classList.add('fadeOut');
document.querySelector('.wrp').classList.add('show');
}, 500);
}
if (document.querySelector('.index-loader') != null) {
setTimeout(function () {
document.querySelector('.index-loader').classList.add('fadeOut');
document.querySelector('.wrp').classList.add('show');
}, 700);
}
/* page loader ------------------------------------------ end */
});
/* vh height -------------------------------------------------- */
let height = window.innerHeight;
document.documentElement.style.setProperty('--vh', height / 100 + 'px');
/* vh height ---------------------------------------------- end */
/* vw height -------------------------------------------------- */
let width = window.innerWidth;
document.documentElement.style.setProperty('--vw', width / 100 + 'px');
/* vw height ---------------------------------------------- end */
/* rem -------------------------------------------------------- */
function convertRemToPx(rem) {
let fontSize = getComputedStyle(document.documentElement).fontSize;
return rem * parseFloat(fontSize);
}
/* rem --------------------------------------------------- end- */
/* device width ------------------------------------------------ */
let winW = window.innerWidth,
winH = window.innerHeight,
devW = 767,
notr = 0,
head = document.querySelector('html head');
/* device width -------------------------------------------- end */
document.addEventListener('DOMContentLoaded', function () {
/* smooth scroll --------------------------------------------- */
let Ease = {
easeInOut: function (t) {
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
},
duration = 1200;
if (document.querySelector('a[href^="#"]') != null) {
let smoothScrollTriggers = [].slice.call(document.querySelectorAll('a[href^="#"]'));
smoothScrollTriggers.forEach(function (smoothScrollTrigger) {
smoothScrollTrigger.addEventListener('click', function (e) {
href = smoothScrollTrigger.getAttribute('href');
e.preventDefault();
e.stopPropagation();
smooth();
});
});
document.addEventListener('click', function (e) {
let trigger = e.target;
if (trigger.tagName.toLowerCase() === 'a' && trigger.getAttribute('href') != null && trigger.getAttribute('href').match(/^#([a-zA-Z0-9!-/:-@Â\[-`{-~]*$)/)) {
href = trigger.getAttribute('href');
e.preventDefault();
e.stopPropagation();
smooth();
}
});
}
function smooth() {
let targetElement = document.getElementById(href.replace('#', ''));
if (targetElement) {
let currentPosition = document.documentElement.scrollTop || document.body.scrollTop,
targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
let startTime = performance.now();
let loop = function (nowTime) {
let time = nowTime - startTime,
normalizedTime = time / duration;
if (normalizedTime < 1) {
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
requestAnimationFrame(loop);
} else {
window.scrollTo(0, targetPosition);
}
}
requestAnimationFrame(loop);
}
}
/* smooth scroll ----------------------------------------- end */
/* page-top / bottom button ---------------------------------- */
let Btn = document.getElementById('page-all'),
topBtn = document.getElementById('page-top'),
bottomBtn = document.getElementById('page-bottom');
window.addEventListener('scroll', function () {
if (Btn != null) {
if (document.documentElement.scrollTop || document.body.scrollTop > 1000) {
Btn.classList.add('fadeIn');
Btn.classList.remove('fadeOut');
} else {
Btn.classList.remove('fadeIn');
Btn.classList.add('fadeOut');
};
};
})
if (topBtn != null) {
topBtn.addEventListener("click", function foo() {
let nowY = window.pageYOffset;
window.scrollTo(0, Math.floor(nowY * .9));
if (nowY > 0) {
window.setTimeout(foo, 10);
}
});
}
if (bottomBtn != null) {
bottomBtn.addEventListener("click", function foo() {
const goalOffset = document.body.scrollHeight - document.body.clientHeight;
let nowY = goalOffset - window.pageYOffset;
window.scrollTo(0, goalOffset - Math.floor(nowY * .9));
if (nowY > 0) {
window.setTimeout(foo, 10);
}
});
};
/* page-top / bottom button ------------------------------ end */
/* navigation ------------------------------------------------ */
document.addEventListener("click", function (e) {
if (e.target && e.target.id === 'nav-toggle') {
notr = (notr + 1);
if (notr % 2 !== 0) {
document.querySelector('html body').classList.add('open');
document.querySelector('html body').classList.remove('close');
window.setTimeout(function () {
document.querySelector('html').classList.add("is-fixed");
}, 500);
} else {
document.querySelector('html body').classList.remove('open');
document.querySelector('html body').classList.add('close');
window.setTimeout(function () {
document.querySelector('html').classList.remove("is-fixed");
}, 500);
}
};
})
/* navigation --------------------------------------------- end */
/* animation -------------------------------------------------- */
const animationFunc = function () {
const target = document.querySelectorAll('.animation');
const position = Math.floor(window.innerHeight * .85);
for (let i = 0; i < target.length; i = (i + 1)) {
let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
let offsetBottom = Math.floor(target[i].getBoundingClientRect().bottom);
if (offsetTop < position) {
target[i].classList.add('effect');
}
if (offsetTop > Math.floor(window.innerHeight * .95)) {
target[i].classList.remove('effect');
}
if (offsetBottom < Math.floor(window.innerHeight * .0)) {
target[i].classList.remove('effect');
}
}
}
if (document.getElementsByClassName('animation')[0] != null) {
window.addEventListener('scroll', animationFunc, false);
}
/* animation --------------------------------------------- end */
/* table -------------------------------------------------- */
if (document.querySelector('.fade-reverse') != null) {
const fadeTables = document.querySelectorAll('.fade-reverse');
fadeTables.forEach(function (fadeTable) {
fadeTable.inview(
function () {
setTimeout(function () {
fadeTable.classList.add('off');
}, 3000);
});
});
}
/* table ---------------------------------------------- end */
/* spinner -------------------------------------------------- */
if (document.querySelector('.spinner') != null) {
const lazyImgs = document.querySelectorAll('.spinner');
lazyImgs.forEach(function (lazyImg) {
lazyImg.inview(
function () {
setTimeout(function () {
lazyImg.classList.remove('spinner');
}, 500);
});
});
}
/* spinner ---------------------------------------------- end */
});
/* append DOM ---------------------------------------------------- */
function waitForElement(selector, text = null) {
return new Promise(resolve => {
const nodes = document.querySelectorAll(selector);
for (const node of nodes) {
if (node.nodeType === 1 && (text === null || node.textContent === text)) {
return resolve(node);
}
}
const observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.nodeType !== 1) {
// needs ELEMENT_NODE only. exclude TEXT_NODE and other stuff.
continue;
}
if (node.matches(selector) && (text === null || node.textContent === text)) {
observer.disconnect();
return resolve(node);
}
}
}
});
observer.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false,
});
});
}
/* append DOM ------------------------------------------------ end */
/* in view ------------------------------------------------------- */
if (!HTMLElement.prototype.inview) {
Object.defineProperty(HTMLElement.prototype, "inview", {
configurable: true,
enumerable: false,
writable: true,
value: function (callbackInView, callbackOutView) {
const options = {
root: null,
rootMargin: '0%',
threshold: [0.5]
};
const observer = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting && Object.prototype.toString.call(callbackInView) === '[object Function]') {
callbackInView(e);
} else if (!e.isIntersecting && Object.prototype.toString.call(callbackOutView) === '[object Function]') {
callbackOutView(e);
}
}
}, options);
observer.observe(this);
}
});
}
/* in view --------------------------------------------------- end */