From 67fd915c24b61feaac4ac51b2512527e7bf4e0c1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 12 Mar 2016 19:20:00 +0100 Subject: [PATCH] switch to local copy of toc.js --- assets/_src/js/_faq.js | 3 +- assets/_src/js/vendor/toc.js | 193 +++++++++++++++++++++++++++++ assets/_src/less/ascribe/_faq.less | 6 + 3 files changed, 200 insertions(+), 2 deletions(-) create mode 100644 assets/_src/js/vendor/toc.js diff --git a/assets/_src/js/_faq.js b/assets/_src/js/_faq.js index 9719c68..8438faf 100644 --- a/assets/_src/js/_faq.js +++ b/assets/_src/js/_faq.js @@ -1,5 +1,5 @@ -//=include ../../../node_modules/toc/dist/toc.js +//=include vendor/toc.js var Faq = (function(w, d, $) { @@ -27,7 +27,6 @@ var Faq = (function(w, d, $) { _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 }); }, diff --git a/assets/_src/js/vendor/toc.js b/assets/_src/js/vendor/toc.js new file mode 100644 index 0000000..2961171 --- /dev/null +++ b/assets/_src/js/vendor/toc.js @@ -0,0 +1,193 @@ +/*! + * toc - jQuery Table of Contents Plugin + * v0.3.2 + * http://projects.jga.me/toc/ + * copyright Greg Allen 2014 + * MIT License + */ +/*! + * smooth-scroller - Javascript lib to handle smooth scrolling + * v0.1.2 + * https://github.com/firstandthird/smooth-scroller + * copyright First+Third 2014 + * MIT License + */ +//smooth-scroller.js + +(function($) { + $.fn.smoothScroller = function(options) { + options = $.extend({}, $.fn.smoothScroller.defaults, options); + var el = $(this); + + $(options.scrollEl).animate({ + scrollTop: el.offset().top - $(options.scrollEl).offset().top - options.offset + }, options.speed, options.ease, function() { + var hash = el.attr('id'); + + if (hash.length) { + if (history.pushState) { + history.pushState(null, null, '#' + hash); + } else { + document.location.hash = hash; + } + } + + el.trigger('smoothScrollerComplete'); + }); + + return this; + }; + + $.fn.smoothScroller.defaults = { + speed: 400, + ease: 'swing', + scrollEl: 'body,html', + offset: 0 + }; + + $('body').on('click', '[data-smoothscroller]', function(e) { + e.preventDefault(); + var href = $(this).attr('href'); + + if (href.indexOf('#') === 0) { + $(href).smoothScroller(); + } + }); +}(jQuery)); + +(function($) { + var verboseIdCache = {}; + $.fn.toc = function(options) { + var self = this; + var opts = $.extend({}, jQuery.fn.toc.defaults, options); + + var container = $(opts.container); + var headings = $(opts.selectors, container); + var headingOffsets = []; + var activeClassName = opts.activeClass; + + var scrollTo = function(e, callback) { + if (opts.smoothScrolling && typeof opts.smoothScrolling === 'function') { + e.preventDefault(); + var elScrollTo = $(e.target).attr('href'); + + opts.smoothScrolling(elScrollTo, opts, callback); + } + $('li', self).removeClass(activeClassName); + $(e.target).parent().addClass(activeClassName); + }; + + //highlight on scroll + var timeout; + var highlightOnScroll = function(e) { + if (timeout) { + clearTimeout(timeout); + } + timeout = setTimeout(function() { + var top = $(window).scrollTop(), + highlighted, closest = Number.MAX_VALUE, + index = 0; + + for (var i = 0, c = headingOffsets.length; i < c; i++) { + var currentClosest = Math.abs(headingOffsets[i] - top); + if (currentClosest < closest) { + index = i; + closest = currentClosest; + } + } + + $('li', self).removeClass(activeClassName); + highlighted = $('li:eq(' + index + ')', self).addClass(activeClassName); + opts.onHighlight(highlighted); + }, 50); + }; + if (opts.highlightOnScroll) { + $(window).bind('scroll', highlightOnScroll); + highlightOnScroll(); + } + + return this.each(function() { + //build TOC + var el = $(this); + var ul = $(opts.listType); + + headings.each(function(i, heading) { + var $h = $(heading); + headingOffsets.push($h.offset().top - opts.highlightOffset); + + var anchorName = opts.anchorName(i, heading, opts.prefix); + + //add anchor + if (heading.id !== anchorName) { + var anchor = $('').attr('id', anchorName).insertBefore($h); + } + + //build TOC item + var a = $('') + .text(opts.headerText(i, heading, $h)) + .attr('href', '#' + anchorName) + .bind('click', function(e) { + $(window).unbind('scroll', highlightOnScroll); + scrollTo(e, function() { + $(window).bind('scroll', highlightOnScroll); + }); + el.trigger('selected', $(this).attr('href')); + }); + + var li = $('
  • ') + .addClass(opts.itemClass(i, heading, $h, opts.prefix)) + .append(a); + + ul.append(li); + }); + el.html(ul); + }); + }; + + + jQuery.fn.toc.defaults = { + container: 'body', + listType: '
      ', + selectors: 'h1,h2,h3', + smoothScrolling: function(target, options, callback) { + $(target).smoothScroller({ + offset: options.scrollToOffset + }).on('smoothScrollerComplete', function() { + callback(); + }); + }, + scrollToOffset: 0, + prefix: 'toc', + activeClass: 'toc-active', + onHighlight: function() {}, + highlightOnScroll: true, + highlightOffset: 100, + anchorName: function(i, heading, prefix) { + if (heading.id.length) { + return heading.id; + } + + var candidateId = $(heading).text().replace(/[^a-z0-9]/ig, ' ').replace(/\s+/g, '-').toLowerCase(); + if (verboseIdCache[candidateId]) { + var j = 2; + + while (verboseIdCache[candidateId + j]) { + j++; + } + candidateId = candidateId + '-' + j; + + } + verboseIdCache[candidateId] = true; + + return prefix + '-' + candidateId; + }, + headerText: function(i, heading, $heading) { + return $heading.text(); + }, + itemClass: function(i, heading, $heading, prefix) { + return prefix + '-' + $heading[0].tagName.toLowerCase(); + } + + }; + +})(jQuery); diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less index e131236..805442c 100644 --- a/assets/_src/less/ascribe/_faq.less +++ b/assets/_src/less/ascribe/_faq.less @@ -103,9 +103,15 @@ @media (@screen-sm) { padding: 6px 0; } + + &:active, + &:focus { + outline: 0; + } } a:hover, + a:focus, .toc-active a { color: @link-hover-color; }