https://yousazoe.top/js/motion.js

1/* global NexT, CONFIG */
2
3NexT.motion = {};
4
5NexT.motion.integrator = {
6  queue: [],
7  init() {
8    this.queue = [];
9    return this;
10  },
11  add(fn) {
12    const sequence = fn();
13    this.queue.push(sequence);
14    return this;
15  },
16  bootstrap() {
17    if (!CONFIG.motion.async) this.queue = [this.queue.flat()];
18    this.queue.forEach(sequence => {
19      const timeline = window.anime.timeline({
20        duration: CONFIG.motion?.duration ?? 200,
21        easing  : 'linear'
22      });
23      sequence.forEach(item => {
24        if (item.deltaT) timeline.add(item, item.deltaT);
25        else timeline.add(item);
26      });
27    });
28  }
29};
30
31NexT.motion.middleWares = {
32  header() {
33    const sequence = [];
34
35    function getMistLineSettings(targets) {
36      sequence.push({
37        targets,
38        scaleX  : [0, 1],
39        duration: 500,
40        deltaT  : '-=200'
41      });
42    }
43
44    function pushToSequence(targets, sequenceQueue = false) {
45      sequence.push({
46        targets,
47        opacity: 1,
48        top    : 0,
49        deltaT : sequenceQueue ? '-=200' : '-=0'
50      });
51    }
52
53    pushToSequence('.column');
54    CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
55    CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
56    pushToSequence('.site-title');
57    pushToSequence('.site-brand-container .toggle', true);
58    pushToSequence('.site-subtitle');
59    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
60
61    const menuItemTransition = CONFIG.motion.transition.menu_item;
62    if (menuItemTransition) {
63      document.querySelectorAll('.menu-item').forEach(targets => {
64        sequence.push({
65          targets,
66          complete: () => targets.classList.add('animated', menuItemTransition),
67          deltaT  : '-=200'
68        });
69      });
70    }
71
72    return sequence;
73  },
74
75  subMenu() {
76    const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
77    if (subMenuItem.length > 0) {
78      subMenuItem.forEach(element => {
79        element.classList.add('animated');
80      });
81    }
82    return [];
83  },
84
85  postList() {
86    const sequence = [];
87    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
88
89    function animate(animation, elements) {
90      if (!animation) return;
91      elements.forEach(targets => {
92        sequence.push({
93          targets,
94          complete: () => targets.classList.add('animated', animation),
95          deltaT  : '-=100'
96        });
97      });
98    }
99
100    document.querySelectorAll('.post-block').forEach(targets => {
101      sequence.push({
102        targets,
103        complete: () => targets.classList.add('animated', post_block),
104        deltaT  : '-=100'
105      });
106      animate(coll_header, targets.querySelectorAll('.collection-header'));
107      animate(post_header, targets.querySelectorAll('.post-header'));
108      animate(post_body, targets.querySelectorAll('.post-body'));
109    });
110
111    animate(post_block, document.querySelectorAll('.pagination, .comments'));
112
113    return sequence;
114  },
115
116  sidebar() {
117    const sequence = [];
118    const sidebar = document.querySelectorAll('.sidebar-inner');
119    const sidebarTransition = CONFIG.motion.transition.sidebar;
120    // Only for desktop of Pisces | Gemini.
121    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && window.innerWidth >= 992) {
122      sidebar.forEach(targets => {
123        sequence.push({
124          targets,
125          complete: () => targets.classList.add('animated', sidebarTransition),
126          deltaT  : '-=100'
127        });
128      });
129    }
130    return sequence;
131  },
132
133  footer() {
134    return [{
135      targets: document.querySelector('.footer'),
136      opacity: 1
137    }];
138  }
139};