https://kee02p.github.io/js/events.js

1/* global Fluid */
2
3HTMLElement.prototype.wrap = function(wrapper) {
4  this.parentNode.insertBefore(wrapper, this);
5  this.parentNode.removeChild(this);
6  wrapper.appendChild(this);
7};
8
9Fluid.events = {
10
11  registerNavbarEvent: function() {
12    var navbar = jQuery('#navbar');
13    if (navbar.length === 0) {
14      return;
15    }
16    var submenu = jQuery('#navbar .dropdown-menu');
17    if (navbar.offset().top > 0) {
18      navbar.removeClass('navbar-dark');
19      submenu.removeClass('navbar-dark');
20    }
21    Fluid.utils.listenScroll(function() {
22      navbar[navbar.offset().top > 50 ? 'addClass' : 'removeClass']('top-nav-collapse');
23      submenu[navbar.offset().top > 50 ? 'addClass' : 'removeClass']('dropdown-collapse');
24      if (navbar.offset().top > 0) {
25        navbar.removeClass('navbar-dark');
26        submenu.removeClass('navbar-dark');
27      } else {
28        navbar.addClass('navbar-dark');
29        submenu.removeClass('navbar-dark');
30      }
31    });
32    jQuery('#navbar-toggler-btn').on('click', function() {
33      jQuery('.animated-icon').toggleClass('open');
34      jQuery('#navbar').toggleClass('navbar-col-show');
35    });
36  },
37
38  registerParallaxEvent: function() {
39    var ph = jQuery('#banner[parallax="true"]');
40    if (ph.length === 0) {
41      return;
42    }
43    var board = jQuery('#board');
44    if (board.length === 0) {
45      return;
46    }
47    var parallax = function() {
48      var pxv = jQuery(window).scrollTop() / 5;
49      var offset = parseInt(board.css('margin-top'), 10);
50      var max = 96 + offset;
51      if (pxv > max) {
52        pxv = max;
53      }
54      ph.css({
55        transform: 'translate3d(0,' + pxv + 'px,0)'
56      });
57      var sideCol = jQuery('.side-col');
58      if (sideCol) {
59        sideCol.css({
60          'padding-top': pxv + 'px'
61        });
62      }
63    };
64    Fluid.utils.listenScroll(parallax);
65  },
66
67  registerScrollDownArrowEvent: function() {
68    var scrollbar = jQuery('.scroll-down-bar');
69    if (scrollbar.length === 0) {
70      return;
71    }
72    scrollbar.on('click', function() {
73      Fluid.utils.scrollToElement('#board', -jQuery('#navbar').height());
74    });
75  },
76
77  registerScrollTopArrowEvent: function() {
78    var topArrow = jQuery('#scroll-top-button');
79    if (topArrow.length === 0) {
80      return;
81    }
82    var board = jQuery('#board');
83    if (board.length === 0) {
84      return;
85    }
86    var posDisplay = false;
87    var scrollDisplay = false;
88    // Position
89    var setTopArrowPos = function() {
90      var boardRight = board[0].getClientRects()[0].right;
91      var bodyWidth = document.body.offsetWidth;
92      var right = bodyWidth - boardRight;
93      posDisplay = right >= 50;
94      topArrow.css({
95        'bottom': posDisplay && scrollDisplay ? '20px' : '-60px',
96        'right' : right - 64 + 'px'
97      });
98    };
99    setTopArrowPos();
100    jQuery(window).resize(setTopArrowPos);
101    // Display
102    var headerHeight = board.offset().top;
103    Fluid.utils.listenScroll(function() {
104      var scrollHeight = document.body.scrollTop + document.documentElement.scrollTop;
105      scrollDisplay = scrollHeight >= headerHeight;
106      topArrow.css({
107        'bottom': posDisplay && scrollDisplay ? '20px' : '-60px'
108      });
109    });
110    // Click
111    topArrow.on('click', function() {
112      jQuery('body,html').animate({
113        scrollTop: 0,
114        easing   : 'swing'
115      });
116    });
117  },
118
119  registerImageLoadedEvent: function() {
120    if (!('NProgress' in window)) { return; }
121
122    var bg = document.getElementById('banner');
123    if (bg) {
124      var src = bg.style.backgroundImage;
125      var url = src.match(/\((.*?)\)/)[1].replace(/(['"])/g, '');
126      var img = new Image();
127      img.onload = function() {
128        window.NProgress && window.NProgress.inc(0.2);
129      };
130      img.src = url;
131      if (img.complete) { img.onload(); }
132    }
133
134    var notLazyImages = jQuery('main img:not([lazyload])');
135    var total = notLazyImages.length;
136    for (const img of notLazyImages) {
137      const old = img.onload;
138      img.onload = function() {
139        old && old();
140        window.NProgress && window.NProgress.inc(0.5 / total);
141      };
142      if (img.complete) { img.onload(); }
143    }
144  },
145
146  registerRefreshCallback: function(callback) {
147    if (!Array.isArray(Fluid.events._refreshCallbacks)) {
148      Fluid.events._refreshCallbacks = [];
149    }
150    Fluid.events._refreshCallbacks.push(callback);
151  },
152
153  refresh: function() {
154    if (Array.isArray(Fluid.events._refreshCallbacks)) {
155      for (var callback of Fluid.events._refreshCallbacks) {
156        if (callback instanceof Function) {
157          callback();
158        }
159      }
160    }
161  },
162
163  billboard: function() {
164    if (!('console' in window)) {
165      return;
166    }
167    // eslint-disable-next-line no-console
168    console.log(`
169------------------------------------------------
170|                                              |
171|     ________  __            _        __      |
172|    |_   __  |[  |          (_)      |  ]     |
173|      | |_ \\_| | | __   _   __   .--.| |      |
174|      |  _|    | |[  | | | [  |/ /'\`\\' |      |
175|     _| |_     | | | \\_/ |, | || \\__/  |      |
176|    |_____|   [___]'.__.'_/[___]'.__.;__]     |
177|                                              |
178|           Powered by Hexo x Fluid            |
179|         GitHub: https://git.io/JqpVD         |
180|                                              |
181------------------------------------------------
182    `);
183  }
184};