chore(plugin): clean back to top code and name major columns

layout/common/widget.ejs

@@ -14,7 +14,10 @@
     }
     return '';
 } %>
-<div class="column <%= position === 'left' ? 'has-order-1' : 'has-order-3' %> <%= side_column_class() %> <%= visibility_class() %>">
+<% function order_class() {
+    return position === 'left' ? 'has-order-1' : 'has-order-3';
+} %>
+<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %>">
     <% get_widgets(position).forEach(widget => {%>
         <%- partial('widget/' + widget.type, { widget, post: page }) %>
     <% }) %>

layout/layout.ejs

@@ -18,8 +18,8 @@
     } %>
     <section class="section">
         <div class="container">
-            <div class="columns main">
+            <div class="columns">
-                <div class="column <%= main_column_class() %> has-order-2"><%- body %></div>
+                <div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
                 <%- partial('common/widget', { position: 'left' }) %>
                 <%- partial('common/widget', { position: 'right' }) %>
             </div>

layout/plugin/animejs.ejs

@@ -14,9 +14,9 @@
     $(document).ready(function () {
         $('body').css('opacity', 1);
         if (!isIE()) {
-            ['.main > .column:first-child .card',
+            ['.column-main > .card',
-            '.main > .column:nth-child(2) .card',
+             '.column-left > .card',
-            '.main > .column:last-child .card'].map(function(target) {
+             '.column-right > .card'].map(function(target) {
                 anime({
                     targets: target,
                     scale: [0.8, 1],

layout/plugin/back-to-top.ejs

@@ -1,17 +1,16 @@
 <% if (plugin !== false) { %>
 <% if (!head) { %>
-<a id="back-to-top" class="card has-text-centered" title="<%= __('plugin.backtotop') %>" href="javascript:;">
+<a id="back-to-top" title="<%= __('plugin.backtotop') %>" href="javascript:;">
     <i class="material-icons">keyboard_arrow_up</i>
 </a>
 <style>
 #back-to-top {
     position: fixed;
-    bottom: 20px;
-    width: 64px;
     padding: 8px 0;
     transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
     opacity: 0;
     font-size: 0;
+    outline: none;
     transform: translateY(120px);
 }
 #back-to-top.fade-in {
@@ -20,79 +19,7 @@
 #back-to-top.rise-up {
     transform: translateY(0);
 }
-@media screen and (max-width: 1087px) {
-    #back-to-top {
-        right: 1rem;
-    }
-}
-@media screen and (max-width: 768px) {
-    #back-to-top {
-        right: .75rem;
-    }
-}
 </style>
-<script>
+<%- js('js/back-to-top') %>
-    $(document).ready(function () {
-        var $button = $('#back-to-top');
-        var $footer = $('footer.footer');
-        var $mainColumn = $('.main .has-order-2');
-        var $leftColumn = $('.main .has-order-1');
-        var $rightColumn = $('.main .has-order-3');
-        var lastScrollTop = 0;
-
-        function update() {
-            // desktop mode or tablet mode with only right sidebar enabled
-            if (window.innerWidth > 1077 || (window.innerWidth > 768 && $leftColumn.length === 0 && $rightColumn.length === 1)) {
-                var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
-                var left = $mainColumn.offset().left + $mainColumn.outerWidth() + padding;
-                left = Math.min(left, document.documentElement.clientWidth - $button.outerWidth(true) - padding);
-                $button.css('left', left);
-                var minScrollTop = 0;
-                if ($rightColumn.length > 0) {
-                    minScrollTop = Math.max.apply(null, $rightColumn.find('.widget').map(function () {
-                        return $(this).offset().top + $(this).outerHeight(true);
-                    }));
-                }
-                if ($(window).scrollTop() + $(window).height() >= minScrollTop + padding + $button.outerHeight(true)) {
-                    $button.addClass('fade-in');
-                } else {
-                    $button.removeClass('fade-in');
-                }
-                if ($footer.offset().top - $(window).scrollTop() + $button.outerHeight(true) / 2 + 20 < document.documentElement.clientHeight) {
-                    $button.css('bottom', $(window).scrollTop() + document.documentElement.clientHeight - $footer.offset().top - $button.outerHeight(true) / 2);
-                    $button.css('width', '40px');
-                    $button.css('border-radius', '50%');
-                } else {
-                    $button.css('width', '64px');
-                    $button.css('bottom', '20px');
-                    $button.css('border-radius', '4px');
-                }
-                $button.addClass('rise-up');
-            } else {
-                // mobile and tablet mode
-                $button.css('width', '64px');
-                $button.css('bottom', '20px');
-                $button.css('border-radius', '4px');
-                $button.addClass('fade-in');
-                $button.css('left', '');
-                var scrollTop = $(window).scrollTop();
-                if (scrollTop > lastScrollTop || scrollTop === 0) {
-                    $('#back-to-top').removeClass('rise-up');
-                } else {
-                    $('#back-to-top').addClass('rise-up');
-                }
-                lastScrollTop = scrollTop;
-            }
-        }
-
-        update();
-        $(window).resize(update);
-        $(window).scroll(update);
-
-        $('#back-to-top').on('click', function () {
-            $('body, html').animate({ scrollTop: 0 }, 400);
-        });
-    });
-</script>
 <% } %>
 <% } %>

layout/widget/links.ejs

@@ -9,7 +9,7 @@
         <ul class="menu-list">
         <% for (let i in links) { %>
             <li>
-                <a class="level" href="<%- links[i] %>" target="_blank">
+                <a class="level is-mobile" href="<%- links[i] %>" target="_blank">
                     <span class="level-left">
                         <span class="level-item"><%= i %></span>
                     </span>

source/js/back-to-top.js

@@ -0,0 +1,134 @@
+$(document).ready(function () {
+    var $button = $('#back-to-top');
+    var $footer = $('footer.footer');
+    var $mainColumn = $('.column-main');
+    var $leftSidebar = $('.column-left');
+    var $rightSidebar = $('.column-right');
+    var lastScrollTop = 0;
+    var rightMargin = 20;
+    var bottomMargin = 20;
+
+    var state = {
+        base: {
+            classname: 'card has-text-centered',
+            left: '',
+            width: 64,
+            bottom: bottomMargin,
+            'border-radius': 4
+        }
+    };
+    state['desktop-hidden'] = Object.assign({}, state.base, {
+        classname: state.base.classname + ' rise-up',
+    });
+    state['desktop-visible'] = Object.assign({}, state['desktop-hidden'], {
+        classname: state['desktop-hidden'].classname + ' fade-in',
+    });
+    state['desktop-dock'] = Object.assign({}, state['desktop-visible'], {
+        classname: state['desktop-visible'].classname + ' fade-in',
+        width: 40,
+        'border-radius': '50%'
+    });
+    state['mobile-hidden'] = Object.assign({}, state.base, {
+        classname: state.base.classname + ' fade-in',
+        right: rightMargin
+    });
+    state['mobile-visible'] = Object.assign({}, state['mobile-hidden'], {
+        classname: state['mobile-hidden'].classname + ' rise-up',
+    });
+
+    function applyState(state) {
+        $button.attr('class', state.classname);
+        for (let prop in state) {
+            if (prop === 'classname') {
+                continue;
+            }
+            $button.css(prop, state[prop]);
+        }
+    }
+
+    function isDesktop() {
+        return window.innerWidth >= 1078;
+    }
+
+    function isTablet() {
+        return window.innerWidth >= 768 && !isDesktop();
+    }
+
+    function isScrollUp() {
+        return $(window).scrollTop() < lastScrollTop && $(window).scrollTop() > 0;
+    }
+
+    function hasLeftSidebar() {
+        return $leftSidebar.length > 0;
+    }
+
+    function hasRightSidebar() {
+        return $rightSidebar.length > 0;
+    }
+
+    function getRightSidebarBottom() {
+        if (!hasRightSidebar()) {
+            return 0;
+        }
+        return Math.max.apply(null, $rightSidebar.find('.widget').map(function () {
+            return $(this).offset().top + $(this).outerHeight(true);
+        }));
+    }
+
+    function getScrollBottom() {
+        return $(window).scrollTop() + $(window).height();
+    }
+
+    function getButtonWidth() {
+        return $button.outerWidth(true);
+    }
+
+    function getButtonHeight() {
+        return $button.outerHeight(true);
+    }
+
+    function updateScrollTop() {
+        lastScrollTop = $(window).scrollTop();
+    }
+
+    function update() {
+        // desktop mode or tablet mode with only right sidebar enabled
+        if (isDesktop() || (isTablet() && !hasLeftSidebar() && hasRightSidebar())) {
+            var nextState;
+            var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
+            var maxLeft = $(window).width() - getButtonWidth() - rightMargin;
+            var maxBottom = $footer.offset().top + getButtonHeight() / 2 + bottomMargin;
+            if (getScrollBottom() < getRightSidebarBottom() + padding + getButtonHeight()) {
+                nextState = state['desktop-hidden'];
+            } else if (getScrollBottom() < maxBottom) {
+                nextState = state['desktop-visible'];
+            } else {
+                nextState = Object.assign({}, state['desktop-dock'], {
+                    bottom: getScrollBottom() - maxBottom + bottomMargin
+                });
+            }
+
+            var left = $mainColumn.offset().left + $mainColumn.outerWidth() + padding;
+            nextState = Object.assign({}, nextState, {
+                left: Math.min(left, maxLeft)
+            });
+            applyState(nextState);
+        } else {
+            // mobile and tablet mode
+            if (!isScrollUp()) {
+                applyState(state['mobile-hidden']);
+            } else {
+                applyState(state['mobile-visible']);
+            }
+            updateScrollTop();
+        }
+    }
+
+    update();
+    $(window).resize(update);
+    $(window).scroll(update);
+
+    $('#back-to-top').on('click', function () {
+        $('body, html').animate({ scrollTop: 0 }, 400);
+    });
+});