https://nju-cse-flyers.github.io/js/main.js

1(function(w, d) {
2
3    var body = d.body,
4        root = d.querySelector('html'),
5        gotop = d.getElementById('gotop'),
6        menu = d.getElementById('menu'),
7        header = d.getElementById('header'),
8        mask = d.getElementById('mask'),
9        menuToggle = d.getElementById('menu-toggle'),
10        menuOff = d.getElementById('menu-off'),
11        loading = d.getElementById('loading'),
12        animate = w.requestAnimationFrame,
13        ua = navigator.userAgent,
14        isMD = ua.indexOf('Mobile') !== -1 || ua.indexOf('Android') !== -1 || ua.indexOf('iPhone') !== -1 || ua.indexOf('iPad') !== -1 || ua.indexOf('KFAPWI') !== -1,
15        even = isMD ? 'touchstart' : 'click',
16        noop = function() {},
17        offset = function(el) {
18            var x = el.offsetLeft,
19                y = el.offsetTop;
20
21            if (el.offsetParent) {
22                var pOfs = arguments.callee(el.offsetParent);
23                x += pOfs.x;
24                y += pOfs.y;
25            }
26
27            return {
28                x: x,
29                y: y
30            };
31        },
32        docEl = ua.indexOf('Firefox') !== -1 ? d.documentElement : body;
33
34    var Blog = {
35        goTop: function() {
36            var top = docEl.scrollTop;
37            if (top > 400) {
38                docEl.scrollTop = top - 400;
39                animate(arguments.callee);
40            } else {
41                docEl.scrollTop = 0;
42            }
43        },
44        toggleGotop: function(top) {
45            if (top > w.innerHeight / 2) {
46                gotop.classList.add('in');
47            } else {
48                gotop.classList.remove('in');
49            }
50        },
51        toggleMenu: function(flag) {
52
53            if (flag) {
54                menu.classList.remove('hide');
55
56                if (w.innerWidth < 1241) {
57                    mask.classList.add('in');
58                    menu.classList.add('show');
59                    root.classList.add('lock');
60                }
61
62            } else {
63                menu.classList.remove('show');
64                mask.classList.remove('in');
65                root.classList.remove('lock');
66            }
67        },
68        fixedHeader: function(top) {
69            if (top > header.clientHeight) {
70                header.classList.add('fixed');
71            } else {
72                header.classList.remove('fixed');
73            }
74        },
75        fixedToc: (function() {
76            var toc = d.getElementById('post-toc');
77
78            if (!toc || !toc.children.length) {
79                return noop;
80            }
81
82            var tocOfs = offset(toc),
83                tocTop = tocOfs.y,
84                headerH = header.clientHeight,
85                titles = d.getElementById('post-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
86
87            toc.querySelector('a[href="#' + titles[0].id + '"]').parentNode.classList.add('active');  
88
89            [].forEach.call(toc.querySelectorAll('a[href*="#"]'), function(el){
90                
91                el.addEventListener('click', function(e){
92                    e.preventDefault();
93                    docEl.scrollTop = offset(d.querySelector('[id="'+ decodeURIComponent(this.hash).substr(1) +'"]')).y - headerH + 10;
94                })
95            });
96
97            function setActive(top) {
98
99                for (i = 0, len = titles.length; i < len; i++) {
100                    if (top > offset(titles[i]).y - headerH) {
101                        toc.querySelector('li.active').classList.remove('active');
102
103                        var active = toc.querySelector('a[href="#' + titles[i].id + '"]').parentNode;
104                        active.classList.add('active');
105
106                        if(active.offsetTop >= toc.clientHeight - headerH) {
107                            toc.scrollTop = active.offsetTop - toc.clientHeight + parseInt(w.innerHeight/3);
108                        } else {
109                            toc.scrollTop = 0;
110                        }
111                    } 
112                }
113
114                if(top < offset(titles[0]).y) {
115                    toc.querySelector('li.active').classList.remove('active');
116                    toc.querySelector('a[href="#' + titles[0].id + '"]').parentNode.classList.add('active');  
117                }
118            }
119
120            return function(top) {
121                if (top > tocTop - headerH) {
122                    toc.classList.add('fixed');
123                } else {
124                    toc.classList.remove('fixed');
125                    
126                }
127

128                setActive(top);
129
130            };
131        })(),
132        share: function() {
133
134            var share = d.getElementById('global-share'),
135                menuShare = d.getElementById('menu-share'),
136                div = d.createElement('div'),
137                sns = d.getElementsByClassName('share-sns'),
138                summary, api;
139
140            div.innerHTML = BLOG_SHARE.summary;
141            summary = div.innerText;
142            div = undefined;
143
144            api = 'http://www.jiathis.com/send/?webid={service}&url=' + BLOG_SHARE.url + '&title=' + BLOG_SHARE.title + '&summary=' + summary + '&pic=' + location.protocol + '//' + location.host + BLOG_SHARE.pic;
145
146            function goShare(service) {
147                w.open(encodeURI(api.replace('{service}', service)));
148            }
149
150            function show() {
151                mask.classList.add('in');
152                share.classList.add('in');
153            }
154
155            function hide() {
156                share.classList.remove('in');
157                mask.classList.remove('in');
158            }
159
160            [].forEach.call(sns, function(el) {
161                el.addEventListener('click', function() {
162                    goShare(this.dataset.service);
163                }, false);
164            });
165
166            menuShare.addEventListener(even, function() {
167                show();
168            }, false);
169
170            mask.addEventListener(even, function() {
171                hide();
172            }, false);
173        },
174        search: function() {
175            var searchWrap = d.getElementById('search-wrap');
176
177            function toggleSearch() {
178                searchWrap.classList.toggle('in');
179            }
180
181            d.getElementById('search').addEventListener(even, toggleSearch);
182        },
183        reward: (function(){
184
185            var reward = d.getElementById('reward');
186            var rewardBtn = d.getElementById('rewardBtn');
187            var rewardOff = d.getElementById('rewardOff');
188
189            if(!reward) {
190                return;
191            }
192
193            function show(){
194                mask.classList.add('in');
195                reward.classList.add('ready');
196                setTimeout(function(){
197                    reward.classList.add('in');
198                    d.addEventListener(even, hideByBody);
199                }, 0) 
200            }
201
202            function hide(){
203                mask.classList.remove('in');
204                reward.classList.remove('in');
205                setTimeout(function(){
206                    reward.classList.remove('ready');
207                    d.removeEventListener(even, hideByBody);
208                }, 300)
209            }
210
211            function hideByBody(e){
212                if(!reward.contains(e.target)) {
213                    hide();
214                }
215            }
216
217            rewardBtn.addEventListener(even, function(){
218                return reward.classList.contains('in') ? hide() : show();
219            });
220            rewardOff.addEventListener(even, hide);
221
222        })(),
223        fixNavMinH: (function(){
224            var nav = d.querySelector('.nav');
225
226            function calcH() {
227                nav.style.minHeight =  (nav.parentNode.clientHeight - nav.nextElementSibling.offsetHeight) + 'px';
228            }
229
230            return calcH;
231        })()
232    };
233
234    w.addEventListener('load', function() {
235        Blog.fixNavMinH();
236        loading.classList.remove('active');
237    });
238
239    w.addEventListener('resize', function() {
240        Blog.fixNavMinH();
241        Blog.toggleMenu();
242    });
243
244    gotop.addEventListener(even, function() {
245        animate(Blog.goTop);
246    }, false);
247
248    menuToggle.addEventListener(even, function(e) {
249        Blog.toggleMenu(true);
250        e.preventDefault();
251    }, false);
252
253    menuOff.addEventListener(even, function() {
254        menu.classList.add('hide');
255    }, false);
256
257    mask.addEventListener(even, function() {
258        Blog.toggleMenu();
259    }, false);
260
261    d.addEventListener('scroll', function() {
262        var top = docEl.scrollTop;
263        Blog.toggleGotop(top);
264        Blog.fixedHeader(top);
265        Blog.fixedToc(top);
266    }, false);
267
268    if (typeof BLOG_SHARE !== 'undefined') {
269        Blog.share();
270    }
271
272    Waves.init();
273    Waves.attach('.global-share li', ['waves-block']);
274    Waves.attach('.article-tag-list-link, #page-nav a, #page-nav span', ['waves-button']);
275
276})(window, document);