https://chaserw.github.io/js/motion.js

1/* global NexT, CONFIG, Velocity */
2
3if (window.$ && window.$.Velocity) window.Velocity = window.$.Velocity;
4
5NexT.motion = {};
6
7NexT.motion.integrator = {
8  queue : [],
9  cursor: -1,
10  init  : function() {
11    this.queue = [];
12    this.cursor = -1;
13    return this;
14  },
15  add: function(fn) {
16    this.queue.push(fn);
17    return this;
18  },
19  next: function() {
20    this.cursor++;
21    var fn = this.queue[this.cursor];
22    typeof fn === 'function' && fn(NexT.motion.integrator);
23  },
24  bootstrap: function() {
25    this.next();
26  }
27};
28
29NexT.motion.middleWares = {
30  logo: function(integrator) {
31    var sequence = [];
32    var brand = document.querySelector('.brand');
33    var image = document.querySelector('.custom-logo-image');
34    var title = document.querySelector('.site-title');
35    var subtitle = document.querySelector('.site-subtitle');
36    var logoLineTop = document.querySelector('.logo-line-before i');
37    var logoLineBottom = document.querySelector('.logo-line-after i');
38
39    brand && sequence.push({
40      e: brand,
41      p: {opacity: 1},
42      o: {duration: 200}
43    });
44
45    function getMistLineSettings(element, translateX) {
46      return {
47        e: element,
48        p: {translateX},
49        o: {
50          duration     : 500,
51          sequenceQueue: false
52        }
53      };
54    }
55
56    function pushImageToSequence() {
57      sequence.push({
58        e: image,
59        p: {opacity: 1, top: 0},
60        o: {duration: 200}
61      });
62    }
63
64    CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom
65    && sequence.push(
66      getMistLineSettings(logoLineTop, '100%'),
67      getMistLineSettings(logoLineBottom, '-100%')
68    );
69
70    CONFIG.scheme === 'Muse' && image && pushImageToSequence();
71
72    title && sequence.push({
73      e: title,
74      p: {opacity: 1, top: 0},
75      o: {duration: 200}
76    });
77
78    subtitle && sequence.push({
79      e: subtitle,
80      p: {opacity: 1, top: 0},
81      o: {duration: 200}
82    });
83
84    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushImageToSequence();
85
86    if (sequence.length > 0) {
87      sequence[sequence.length - 1].o.complete = function() {
88        integrator.next();
89      };
90      Velocity.RunSequence(sequence);
91    } else {
92      integrator.next();
93    }
94
95    if (CONFIG.motion.async) {
96      integrator.next();
97    }
98  },
99
100  menu: function(integrator) {
101    Velocity(document.querySelectorAll('.menu-item'), 'transition.slideDownIn', {
102      display : null,
103      duration: 200,
104      complete: function() {
105        integrator.next();
106      }
107    });
108
109    if (CONFIG.motion.async) {
110      integrator.next();
111    }
112  },
113
114  subMenu: function(integrator) {
115    var subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
116    if (subMenuItem.length > 0) {
117      subMenuItem.forEach(element => {
118        element.style.opacity = 1;
119      });
120    }
121    integrator.next();
122  },
123
124  postList: function(integrator) {
125    var postBlock = document.querySelectorAll('.post-block, .pagination, .comments');
126    var postBlockTransition = CONFIG.motion.transition.post_block;
127    var postHeader = document.querySelectorAll('.post-header');
128    var postHeaderTransition = CONFIG.motion.transition.post_header;
129    var postBody = document.querySelectorAll('.post-body');
130    var postBodyTransition = CONFIG.motion.transition.post_body;
131    var collHeader = document.querySelectorAll('.collection-header');
132    var collHeaderTransition = CONFIG.motion.transition.coll_header;
133
134    if (postBlock.length > 0) {
135      var postMotionOptions = window.postMotionOptions || {
136        stagger : 100,
137        drag    : true,
138        complete: function() {
139          integrator.next();
140        }
141      };
142
143      if (CONFIG.motion.transition.post_block) {
144        Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions);
145      }
146      if (CONFIG.motion.transition.post_header) {
147        Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions);
148      }
149      if (CONFIG.motion.transition.post_body) {
150        Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions);
151      }
152      if (CONFIG.motion.transition.coll_header) {
153        Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
154      }
155    }
156    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') {
157      integrator.next();
158    }
159  },
160
161  sidebar: function(integrator) {
162    var sidebarAffix = document.querySelector('.sidebar-inner');
163    var sidebarAffixTransition = CONFIG.motion.transition.sidebar;
164    // Only for Pisces | Gemini.
165    if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
166      Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
167        display : null,
168        duration: 200,
169        complete: function() {
170          // After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini.
171          sidebarAffix.style.transform = 'initial';
172        }
173      });
174    }
175    integrator.next();
176  }
177};