feat(widget): show floating toc on mobile devices

ppoffice · Nov 5, 2018 · b138ed3 · b138ed3 · ppoffice · Nov 5, 2018
1 parent bcf1ca6
commit b138ed3
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 12 deletions.
diff --git a/includes/helpers/layout.js b/includes/helpers/layout.js
@@ -7,6 +7,15 @@
 *     <%- column_count() %>
  */
 module.exports = function (hexo) {
+    hexo.extend.helper.register('has_widget', function (type) {
+        const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
+        if (!hasWidgets) {
+            return false;
+        }
+        const widgets = hexo.extend.helper.get('get_config').bind(this)('widgets');
+        return widgets.some(widget => widget.hasOwnProperty('type') && widget.type === type);
+    });
+
     hexo.extend.helper.register('get_widgets', function (position) {
         const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
         if (!hasWidgets) {

diff --git a/layout/common/navbar.ejs b/layout/common/navbar.ejs
@@ -32,6 +32,11 @@
                     </a>
                     <% } %>
                 <% } %>
+                <% if (get_config('toc') === true && has_widget('toc') && (page.layout === 'page' || page.layout === 'post')) { %>
+                <a class="navbar-item is-hidden-tablet catalogue" title="<%= _p('widget.catalogue', Infinity) %>" href="javascript:;">
+                    <i class="fas fa-list-ul"></i>
+                </a>
+                <% } %>
                 <% if (has_config('search.type')) { %>
                 <a class="navbar-item search" title="<%= __('search.search') %>" href="javascript:;">
                     <i class="fas fa-search"></i>

diff --git a/layout/widget/toc.ejs b/layout/widget/toc.ejs
@@ -24,7 +24,7 @@ function buildToc(toc) {
         result += '</li>';
     }
     return result;
-}    
+}
 %>
 <div class="card widget" id="toc">
     <div class="card-content">

diff --git a/source/css/style.styl b/source/css/style.styl
@@ -1,5 +1,10 @@
 family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
 family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
+gap = 64px
+screen-tablet = 769px
+screen-desktop = 1088px
+screen-widescreen = 1280px
+screen-fullhd = 1472px
 
 /* ---------------------------------
  *       Override CSS Framework
@@ -13,20 +18,20 @@ body
 body, button, input, select, textarea
     font-family: family-sans
 
-@media screen and (min-width: 1280px)
+@media screen and (min-width: screen-widescreen)
     .is-1-column .container
     .is-2-column .container
-        max-width: 960px
-        width: 960px
-@media screen and (min-width: 1472px)
+        max-width: screen-desktop - 2 * gap
+        width: screen-desktop - 2 * gap
+@media screen and (min-width: screen-fullhd)
     .is-2-column .container
-        max-width: 1152px
-        width: 1152px
+        max-width: screen-widescreen - 2 * gap
+        width: screen-widescreen - 2 * gap
     .is-1-column .container
-        max-width: 960px
-        width: 960px
+        max-width: screen-desktop - 2 * gap
+        width: screen-desktop - 2 * gap
 
-@media screen and (max-width: 768px)
+@media screen and (max-width: screen-tablet - 1)
     .section
         padding: 1.5rem 1rem
 
@@ -85,7 +90,7 @@ img.thumbnail
         &.is-active
             color: hsl(217, 71%, 53%)
             background-color: transparent
-    @media screen and (max-width: 1087px)
+    @media screen and (max-width: screen-desktop - 1)
         .navbar-menu
             justify-content: center
             box-shadow: none
@@ -170,6 +175,32 @@ img.thumbnail
                 margin-left: 0.75rem
                 margin-right: 0
 
+@media screen and (max-width: screen-tablet - 1)
+    #toc
+        display: none
+        position: fixed
+        margin: 1rem
+        left: 0
+        right: 0
+        bottom: 0
+        z-index: 100
+        max-height: calc(100vh - 2rem)
+        overflow-y: auto
+    #toc-mask
+        display: none
+        position: fixed
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        z-index: 99
+        background: rgba(0, 0, 0, 0.7)
+    #toc,
+    #toc-mask
+        &.is-active
+            display: block
+
+
 /* ---------------------------------
  *         Custom modifiers
  * --------------------------------- */
@@ -233,7 +264,7 @@ img.thumbnail
 .has-link-black-ter
     color: hsl(0, 0%, 14%) !important
 
-@media screen and (max-width: 768px)
+@media screen and (max-width: screen-tablet - 1)
     .has-text-centered-mobile
         text-align: center !important
     .is-flex-center-mobile

diff --git a/source/js/main.js b/source/js/main.js
@@ -25,4 +25,21 @@
     }
     adjustNavbar();
     $(window).resize(adjustNavbar);
+
+    var $toc = $('#toc');
+    if ($toc.length > 0) {
+    var $mask = $('<div>');
+        $mask.attr('id', 'toc-mask');
+
+        $('body').append($mask);
+
+        function toggleToc() {
+            $toc.toggleClass('is-active');
+            $mask.toggleClass('is-active');
+        }
+
+        $toc.on('click', toggleToc);
+        $mask.on('click', toggleToc);
+        $('.navbar-main .catalogue').on('click', toggleToc);
+    }
 })(jQuery);