feat: tidy style and layout

assets/js/blog.js

@@ -5,8 +5,8 @@ jQuery(function($) {
     var _Blog = window._Blog || {};
 
     _Blog.toggleMobileMenu = function() {
-        $('.menu-toggle').on('click', () => {
-            $('.menu-toggle').toggleClass('active');
+        $('#menu-toggle').on('click', () => {
+            $('#menu-toggle').toggleClass('active');
             $('#mobile-menu').toggleClass('active');
         });
     };
@@ -32,29 +32,48 @@ jQuery(function($) {
 
     _Blog.dynamicToTop = function() {
         const min = 300;
-        const speed = 300;
-        const fade_in = 600;
-        const fade_out = 400;
         var $toTop = $('#dynamic-to-top');
-        $toTop.click(function() {
-          $('html, body').stop().animate({
-            scrollTop: 0
-          }, speed, 'linear');
-          return false;
-        });
         $(window).scroll(function() {
-          var scrollTop = $(window).scrollTop();
-          if (typeof document.body.style.maxHeight === 'undefined') {
-            $toTop.css({
-              'position': 'absolute',
-              'top': scrollTop + $(window).height() - 20,
-            });
-          }
-          if (scrollTop > min) {
-            $toTop.fadeIn(fade_in);
-          } else {
-            $toTop.fadeOut(fade_out);
-          }
+            var scrollTop = $(window).scrollTop();
+            if (typeof document.body.style.maxHeight === 'undefined') {
+                $toTop.css({
+                    'position': 'absolute',
+                    'top': scrollTop + $(window).height() - 20,
+                });
+            }
+            if (scrollTop > min) {
+                (function fadeIn(el, display){
+                    display = display || "block";
+                    if (el.style.display !== display) {
+                        el.style.opacity = 0;
+                        el.style.display = display;
+                        (function fade() {
+                            var val = parseFloat(el.style.opacity);
+                            if (!((val += .1) > 1)) {
+                                el.style.opacity = val;
+                                requestAnimationFrame(fade);
+                            }
+                        })();
+                    }
+                })(document.getElementById('dynamic-to-top'));
+            } else {
+                (function fadeOut(el){
+                    if (el.style.display !== "none") {
+                        el.style.opacity = 1;
+                        (function fade() {
+                            if ((el.style.opacity -= .1) < 0) {
+                                el.style.display = "none";
+                            } else {
+                                requestAnimationFrame(fade);
+                            }
+                        })();
+                    }
+                })(document.getElementById('dynamic-to-top'));
+            }
+        });
+        new SmoothScroll('#dynamic-to-top', {
+            speed: 300,
+            speedAsDuration: true,
         });
     };
 
@@ -106,10 +125,10 @@ jQuery(function($) {
     };
 
     _Blog._initToc = function() {
-        const $toc = $('.post-toc');
+        const $toc = $('#post-toc');
         if ($toc.length && $toc.css('display') !== 'none') {
             const SPACING = 100;
-            const $footer = $('.post-footer');
+            const $footer = $('#post-footer');
             const minTop = $toc.position().top;;
             const mainTop = $('main').position().top;
             const minScrollTop = minTop + mainTop - SPACING;
@@ -212,25 +231,28 @@ jQuery(function($) {
             }
             echartsArr = [];
             Object.keys(echartsMap).forEach(function(id) {
-                let myChart = echarts.init(document.getElementById(id), isDark ? 'dark' : 'light');
+                let myChart = echarts.init(document.getElementById(id), window.isDark ? 'dark' : 'macarons', {renderer: 'svg'});
                 myChart.setOption(echartsMap[id]);
                 echartsArr.push(myChart);
             });
+            window.addEventListener("resize", function() {
+                this.setTimeout(function(){
+                    for (let i = 0; i < echartsArr.length; i++) {
+                        echartsArr[i].resize();
+                    }
+                }, 0);
+            }, false);
         }
     }
 
     _Blog.countdown = function() {
         if (window.countdownMap) {
             Object.keys(countdownMap).forEach(function(id) {
-              $(`#${id}`).countdown(countdownMap[id], {elapse: true})
-                .on('update.countdown', function(event) {
-                  var $this = $(this).html(event.strftime(''
-                    + '<span>%D</span> 天 <br />'
-                    + '<span>%H</span> 时 '
-                    + '<span>%M</span> 分 '
-                    + '<span>%S</span> 秒'));
-              });
-          });
+                $(`#${id}`).countdown(countdownMap[id]['date'], {elapse: true})
+                    .on('update.countdown', function(event) {
+                    $(this).html(event.strftime(countdownMap[id]['pattern']));
+                });
+            });
         }
     };
 

assets/js/lib/VERSION

@@ -8,4 +8,5 @@ echarts@4.2.1
 typeit@6.0.3
 jquery-countdown@2.2.0
 aplayer@1.10.1
-meting@2.0.1
+meting@2.0.1
+smooth-scroll@16.1.0

assets/js/lib/echarts/macarons.js

@@ -0,0 +1,217 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ];
+
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#008acd'
+            }
+        },
+
+        visualMap: {
+            itemWidth: 15,
+            color: ['#5ab1ef','#e0ffff']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: colorPalette[0]
+                }
+            }
+        },
+
+        tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            axisPointer : {
+                type : 'line',
+                lineStyle : {
+                    color: '#008acd'
+                },
+                crossStyle: {
+                    color: '#008acd'
+                },
+                shadowStyle : {
+                    color: 'rgba(200,200,200,0.2)'
+                }
+            }
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#efefff',
+            fillerColor: 'rgba(182,162,222,0.2)',
+            handleColor: '#008acd'
+        },
+
+        grid: {
+            borderColor: '#eee'
+        },
+
+        categoryAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        valueAxis: {
+            axisLine: {
+                lineStyle: {
+                    color: '#008acd'
+                }
+            },
+            splitArea : {
+                show : true,
+                areaStyle : {
+                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: ['#eee']
+                }
+            }
+        },
+
+        timeline : {
+            lineStyle : {
+                color : '#008acd'
+            },
+            controlStyle : {
+                normal : { color : '#008acd'},
+                emphasis : { color : '#008acd'}
+            },
+            symbol : 'emptyCircle',
+            symbolSize : 3
+        },
+
+        line: {
+            smooth : true,
+            symbol: 'emptyCircle',
+            symbolSize: 3
+        },
+
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#d87a80',
+                    color0: '#2ec7c9',
+                    lineStyle: {
+                        color: '#d87a80',
+                        color0: '#2ec7c9'
+                    }
+                }
+            }
+        },
+
+        scatter: {
+            symbol: 'circle',
+            symbolSize: 4
+        },
+
+        map: {
+            label: {
+                normal: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderColor: '#eee',
+                    areaColor: '#ddd'
+                },
+                emphasis: {
+                    areaColor: '#fe994e'
+                }
+            }
+        },
+
+        graph: {
+            color: colorPalette
+        },
+
+        gauge : {
+            axisLine: {
+                lineStyle: {
+                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
+                    width: 10
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length :15,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length :22,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer : {
+                width : 5
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons', theme);
+}));