141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
/* global NexT, CONFIG */
|
|
|
|
NexT.motion = {};
|
|
|
|
NexT.motion.integrator = {
|
|
queue: [],
|
|
init : function() {
|
|
this.queue = [];
|
|
return this;
|
|
},
|
|
add: function(fn) {
|
|
const sequence = fn();
|
|
if (CONFIG.motion.async) this.queue.push(sequence);
|
|
else this.queue = this.queue.concat(sequence);
|
|
return this;
|
|
},
|
|
bootstrap: function() {
|
|
if (!CONFIG.motion.async) this.queue = [this.queue];
|
|
this.queue.forEach(sequence => {
|
|
const timeline = window.anime.timeline({
|
|
duration: 200,
|
|
easing : 'linear'
|
|
});
|
|
sequence.forEach(item => {
|
|
if (item.deltaT) timeline.add(item, item.deltaT);
|
|
else timeline.add(item);
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
NexT.motion.middleWares = {
|
|
header: function() {
|
|
const sequence = [];
|
|
|
|
function getMistLineSettings(targets) {
|
|
sequence.push({
|
|
targets,
|
|
scaleX : [0, 1],
|
|
duration: 500,
|
|
deltaT : '-=200'
|
|
});
|
|
}
|
|
|
|
function pushToSequence(targets, sequenceQueue = false) {
|
|
sequence.push({
|
|
targets,
|
|
opacity: 1,
|
|
top : 0,
|
|
deltaT : sequenceQueue ? '-=200' : '-=0'
|
|
});
|
|
}
|
|
|
|
pushToSequence('.column');
|
|
CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
|
|
CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
|
|
pushToSequence('.site-title');
|
|
pushToSequence('.site-brand-container .toggle', true);
|
|
pushToSequence('.site-subtitle');
|
|
(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
|
|
|
|
const menuItemTransition = CONFIG.motion.transition.menu_item;
|
|
if (menuItemTransition) {
|
|
document.querySelectorAll('.menu-item').forEach(targets => {
|
|
sequence.push({
|
|
targets,
|
|
complete: () => targets.classList.add('animated', menuItemTransition),
|
|
deltaT : '-=200'
|
|
});
|
|
});
|
|
}
|
|
|
|
return sequence;
|
|
},
|
|
|
|
subMenu: function() {
|
|
const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
|
|
if (subMenuItem.length > 0) {
|
|
subMenuItem.forEach(element => {
|
|
element.classList.add('animated');
|
|
});
|
|
}
|
|
return [];
|
|
},
|
|
|
|
postList: function() {
|
|
const sequence = [];
|
|
const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
|
|
|
|
function animate(animation, elements) {
|
|
if (!animation) return;
|
|
elements.forEach(targets => {
|
|
sequence.push({
|
|
targets,
|
|
complete: () => targets.classList.add('animated', animation),
|
|
deltaT : '-=100'
|
|
});
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.post-block').forEach(targets => {
|
|
sequence.push({
|
|
targets,
|
|
complete: () => targets.classList.add('animated', post_block),
|
|
deltaT : '-=100'
|
|
});
|
|
animate(coll_header, targets.querySelectorAll('.collection-header'));
|
|
animate(post_header, targets.querySelectorAll('.post-header'));
|
|
animate(post_body, targets.querySelectorAll('.post-body'));
|
|
});
|
|
|
|
animate(post_block, document.querySelectorAll('.pagination, .comments'));
|
|
|
|
return sequence;
|
|
},
|
|
|
|
sidebar: function() {
|
|
const sequence = [];
|
|
const sidebar = document.querySelectorAll('.sidebar-inner');
|
|
const sidebarTransition = CONFIG.motion.transition.sidebar;
|
|
// Only for Pisces | Gemini.
|
|
if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
|
|
sidebar.forEach(targets => {
|
|
sequence.push({
|
|
targets,
|
|
complete: () => targets.classList.add('animated', sidebarTransition),
|
|
deltaT : '-=100'
|
|
});
|
|
});
|
|
}
|
|
return sequence;
|
|
},
|
|
|
|
footer: function() {
|
|
return [{
|
|
targets: document.querySelector('.footer'),
|
|
opacity: 1
|
|
}];
|
|
}
|
|
};
|