{# ------------------------------------------------------- #} {# ONE OFF VIEW faq #} {# This page can use any data from http:localhost:2000/cms/#/form/faq/ #} {# Webhook uses the SWIG.js (like Djagno/Twig) templating system. Their documentation is here: #} {# http://paularmstrong.github.io/swig/docs/tags/ #} {# Learn about calling data into Webhook pages here: #} {# http://www.webhook.com/docs/template-rules-and-filters/ #} {# ------------------------------------------------------- #} {# Confused what extends and blocks do? Watch a primer: #} {# http://www.webhook.com/docs/template-inheritance-blocks/ #} {% extends "templates/partials/base.html" %} {# This sets our page . It will append this faq's name to the site title defined in base.html #} {% block title %}{% parent %} - {{ cms.faq.name }}{% endblock %} {% block content %} <article class="faq-body row"> <div class="col-xs-12 col-sm-8"> <h1>{{ cms.faq.name }}</h1> {{ cms.faq.wysiwyg_text|safe }} </div> <div id="js-toc" class="col-xs-12 col-sm-4"></div> </article> <script> // toc var will contain all of the combined html we are creating for the TOC var toc = "<nav role='navigation' class='faq-toc'>" + "<ul>"; var newLine, el, title,level, link; $("article h2, article h3").each(function() { el = $(this); title = el.text(); // If an hs lets make the toc differentiate that with a strong tag if (el.is( "h2" ) ) { level = "toc-hdr"; } else { level = "toc-sub"; }; // Change link and id values for anchors to lower case and remove spaces link = title.toLowerCase(); link = link.replace(/[&\/\\#,+()$~%.'":*?<>{}\s+]/g,'-'); // Add the contents of each h2,h3 as an id on to itself since people in the cms won't be adding them with the html el.attr('id', link); newLine = "<li class='" + level + "'><a href='#" + link + "'>" + title + "</a></li>"; toc += newLine; }); toc += "</ul>" + "</nav>"; $("#js-toc").append(toc); $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 500); return false; } } }); </script> {% endblock %}