prototype all the thing: FAQ layout, auto TOC, scroll anchors

assets/_src/js/_faq.js

@@ -0,0 +1,66 @@
+
+//=include ../../../node_modules/toc/dist/toc.js
+
+var Faq = (function(w, d, $) {
+
+    'use strict'
+
+    var app, _private, _config
+
+    _config = {
+        faqQuestion:  $('.faq__question'),
+        faqAnswer:    $('.faq__answer'),
+        faqTitle:     $('.faq__title'),
+        faqTocColumn: $('.grid__col--toc'),
+        faqToc:       $('#toc'),
+        minWidth:     768 // $screen-sm
+    }
+
+    _private = {
+        faqToggle: function() {
+            _config.faqQuestion.click(function() {
+                $(this).toggleClass('open');
+                $(this).next(_config.faqAnswer).toggleClass('open');
+            });
+        },
+        faqTocInit: function() {
+            _config.faqToc.toc({
+                'selectors': _config.faqTitle, // elements to use as headings
+                'container': 'body', // element to find all selectors in
+                'smoothScrolling': true, // enable or disable smooth scrolling on click
+                'highlightOffset': 200, // offset to trigger the next headline
+            });
+        },
+        faqTocSticky: function() {
+            var win = $(window);
+
+            win.on('load resize scroll',function(e) {
+                if (_private.isWide()) {
+                    if ( win.scrollTop() > _config.faqTocColumn.offset().top) {
+                        _config.faqToc.addClass('sticky');
+                    } else {
+                        _config.faqToc.removeClass('sticky');
+                    }
+
+                    // TODO: remove sticky when bottom of content has been reached
+                }
+            });
+        },
+        isWide: function() {
+            return $(window).width() >= _config.minWidth;
+        }
+
+        // TODO: actually make section jumps work
+    }
+
+    app = {
+        init: function() {
+            _private.faqToggle();
+            _private.faqTocInit();
+            _private.faqTocSticky();
+        }
+    }
+
+    return app
+
+})(window, document, jQuery)

assets/_src/js/ascribe.js

@@ -1,8 +1,11 @@
 
+//=include _faq.js
+
 $(document).ready(function(){
 
+    Faq.init();
+
     slider();
-    faqToggle();
     marketplaces();
     tourNav();
     mobileNav();
@@ -40,13 +43,6 @@ $(document).ready(function(){
         });
     }
 
-    function faqToggle() {
-        $('.faq__question').click(function() {
-            $(this).toggleClass('open');
-            $(this).next('.faq__answer').toggleClass('open');
-        });
-    }
-
     function marketplaces() {
         $('.top-tab').click(function(){
             $('.top-tab').removeClass('active');

assets/_src/less/ascribe/_faq.less

@@ -1,5 +1,5 @@
 
-.subtemplate--faq {
+.section-faq {
     padding-top: @spacer;
     padding-bottom: @spacer;
 }
@@ -8,7 +8,10 @@
     margin-left: 20px;
 }
 
-.faq__title { margin-top: 0; }
+.faq__title {
+    &:extend(.h2);
+    margin-top: 0;
+}
 
 .faq__question {
     &:extend(.bold);
@@ -54,3 +57,57 @@
     border-color: transparent transparent transparent @greySocial;
     transition: .2s ease-out;
 }
+
+.grid__col--toc {
+    @media (@screen-sm) {
+        flex: 0 0 33% !important;
+    }
+}
+
+.grid__col--toc {
+    position: relative;
+}
+
+#toc {
+    margin-top: @spacer;
+
+    &.sticky {
+        position: fixed;
+        top: 0;
+        padding-top: @spacer;
+    }
+
+    ul {
+        &:extend(.list-unstyled all);
+
+        li,
+        a {
+            line-height: @line-height-base;
+        }
+
+        li {
+            display: inline-block;
+
+            @media (@screen-sm) {
+                display: block;
+            }
+        }
+
+        a {
+            &:extend(.h4);
+            color: @link-color;
+            display: block;
+            margin: 0;
+            padding: 8px 12px;
+
+            @media (@screen-sm) {
+                padding: 6px 0;
+            }
+        }
+
+        a:hover,
+        .toc-active a {
+            color: @link-hover-color;
+        }
+    }
+}

assets/_src/less/ascribe/_typography.less

@@ -105,6 +105,11 @@ h1, h2, h3, h4, h5, h6,
     color: @black;
 }
 
+.page-title {
+    margin-top: 0;
+    text-align: center;
+}
+
 
 
 // Reset fonts for relevant elements

content-main.php

@@ -1,4 +1,24 @@
 <?php $controller = new Controller(); ?>
-<main class="above-chevron">
-    <?php echo $controller->loopSubtemplates(); ?>
+
+<main class="main above-chevron">
+
+    <?php if ( is_page('faq') ) { ?>
+        <div class="subtemplate row subtemplate--faq">
+
+            <h1 class="page-title"><?php the_title(); ?></h1>
+
+            <div class="grid grid--gutters grid--full grid-small--fit">
+                <div class="grid__col grid__col--toc">
+                    <div id="toc"></div>
+                </div>
+
+                <div class="grid__col">
+                    <?php echo $controller->loopSubtemplates(); ?>
+                </div>
+
+        </div>
+    <?php } else {
+        echo $controller->loopSubtemplates();
+    } ?>
+
 </main>

controller/classes/Subtemplate.php

@@ -691,8 +691,11 @@ class Subtemplate {
             $regularFAQ .= "</dl>";
         }
 
-        $result = "<section class='subtemplate row row--content content subtemplate--faq'>
-                        <h1 class='faq__title'>{$subtemplateTitle}</h1>
+        // create ID for section jumps from lowercased & sanitized title
+        $subtemplateTitleID = strtolower(sanitize_html_class($subtemplateTitle));
+
+        $result = "<section class='section-faq'>
+                        <h1 class='faq__title' id='{$subtemplateTitleID}'>{$subtemplateTitle}</h1>
                         {$featuredFAQ}
                         {$regularFAQ}
                     </section>";

package.json

@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "normalize-css": ">=2.3.1",
-    "normalize-opentype.css": ">=0.2.4"
+    "normalize-opentype.css": ">=0.2.4",
+    "toc": "jgallen23/toc"
   },
   "devDependencies": {
     "browser-sync": "^2.10.0",