Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bit-docs-html-toc

Package Overview
Dependencies
Maintainers
3
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bit-docs-html-toc - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

.jshintrc

6

bit-docs.js

@@ -1,6 +0,6 @@

var path = require("path");
var tags = require("./tags");
module.exports = function(bitDocs){
module.exports = function(bitDocs) {
var pkg = require("./package.json");
var dependencies = {};

@@ -14,2 +14,2 @@ dependencies[pkg.name] = pkg.version;

bitDocs.register("tags", tags);
}
};
{
"name": "bit-docs-html-toc",
"version": "0.4.0",
"version": "0.5.0",
"description": "table of contents bit-docs plugin",
"main": "toc.js",
"scripts": {
"test": "echo 'testing'",
"jshint": "jshint *.js --config .jshintrc",
"test": "npm run jshint && testee test/index.html --browsers firefox --reporter Spec",
"postversion": "git push --tags && git push",

@@ -16,3 +17,3 @@ "release:pre": "npm version prerelease && npm publish",

"type": "git",
"url": "git+https://github.com/bit-docs/bit-docs-prettify.git"
"url": "git+https://github.com/bit-docs/bit-docs-html-toc.git"
},

@@ -25,11 +26,20 @@ "keywords": [

"bugs": {
"url": "https://github.com/bit-docs/bit-docs-prettify/issues"
"url": "https://github.com/bit-docs/bit-docs-html-toc/issues"
},
"homepage": "https://github.com/bit-docs/bit-docs-prettify#readme",
"system": {},
"homepage": "https://github.com/bit-docs/bit-docs-html-toc#readme",
"system": {
"npmAlgorithm": "flat"
},
"dependencies": {
"can-control": "^3.0.0-pre.5",
"can-stache": "^3.0.0-pre.11",
"can-stache-bindings": "^3.0.0-pre.8"
"can-control": "^3.0.3",
"can-stache": "^3.0.7"
},
"devDependencies": {
"chai": "^3.5.0",
"jquery": "^3.1.1",
"jshint": "^2.9.4",
"steal": "^0.16.41",
"steal-mocha": "0.0.3",
"testee": "^0.3.0-pre.2"
}
}
# bit-docs-html-toc
[![npm version](https://badge.fury.io/js/bit-docs-html-toc.svg)](https://badge.fury.io/js/bit-docs-html-toc)
[![Build Status](https://travis-ci.org/bit-docs/bit-docs-html-toc.svg?branch=master)](https://travis-ci.org/bit-docs/bit-docs-html-toc)
A table of contents for use with [bit-docs-generate-html](https://github.com/bit-docs/bit-docs-generate-html).
![toc](https://cloud.githubusercontent.com/assets/361671/18181878/6dd11318-705b-11e6-88e1-133c355742c9.gif)
![screen shot 2016-11-10 at 10 16 55](https://cloud.githubusercontent.com/assets/724877/20181326/830b44a2-a73c-11e6-923c-5c880164383b.png)
![screen shot 2016-11-10 at 10 15 51](https://cloud.githubusercontent.com/assets/724877/20181334/887fbbe8-a73c-11e6-929b-0ba411cdd63b.png)
![screen shot 2016-11-09 at 17 02 17](https://cloud.githubusercontent.com/assets/724877/20152767/612903ae-a69e-11e6-9fe0-6d781567fd6f.png)
## Use

@@ -8,0 +15,0 @@

@@ -1,222 +0,35 @@

var stache = require("can-stache");
require("can-stache-bindings");
var Control = require("can-control");
var TableOfContents = require("./toc-control");
var template = stache("{{#each titles}}" +
"<li><a ($click)='scrollTo(., %event)' href='#{{id}}'>{{text}}</a></li>" +
"{{/each}}");
var TOCContainer = Control.extend({
init: function(el) {
el.style.display = "none";
function throttle(fn, ms){
var wait = false;
return function(){
if(!wait) {
wait = true;
var val = fn.apply(this, arguments);
setTimeout(function(){
wait = false;
}, ms);
return val;
}
};
}
var depth = this.getOutlineDepth();
var tagName = this.getOutlineTagName();
var toc = document.createElement(tagName);
function makeAnchorHeadingId(anchorText) {
return (anchorText || "")
.replace(/\s/g, "-") // replace spaces with dashes
.replace(/[^\w\-]/g, "") // remove punctuation
.toLowerCase();
}
toc.className = "on-this-page";
el.appendChild(toc);
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}
var TableOfContents = Control.extend({
init: function(el, options){
this.scroller = document.body;
this.container = this.element.parentNode;
var depth = window.docObject.outline && window.docObject.outline.depth;
this.depth = typeof depth === "number" ? depth : 1;
this.navHeight = this.getNavHeight();
this.titles = this.collectTitles();
// If there are no titles, bail
if(!this.titles.length) {
el.parentNode.removeChild(el);
return;
} else {
el.parentNode.style.display = 'block';
}
this.titleIndex = 0;
this.calculateActive();
// Append our template
var toc = this;
this.element.appendChild(template({
titles: this.titles,
scrollTo: function(item, ev){
ev.preventDefault();
toc.disabled(true);
var pos = item.pos + toc.TOCHeight;
window.scrollTo(0, pos + 1);
toc.calculateActive();
requestAnimationFrame(function(){
toc.disabled(false);
});
}
}));
this.setActive(this.titleIndex);
this.TOCHeight = this.getTOCHeight();
this.container.style.height = this.TOCHeight + 'px';
// Wait until we've appended the TOC so it can be part of the calculation
this.fixed(!this.isFirstTitleVisible());
window.addEventListener("scroll", this);
},
getNavHeight: function(){
var nav = document.querySelector(".navbar");
return nav.clientHeight;
},
getTOCHeight: function(){
return outerHeight(this.element);
},
isFirstTitleVisible: function(){
var firstPosition = this.titles[0].pos + this.element.clientHeight +
this.navHeight;
return firstPosition > this.scroller.scrollTop;
},
collectTitles: function(){
var selector = this.getHeadings().map(function(h){
return "article " + h;
}).join(",");
var titles = selector ? document.querySelectorAll(selector) : [];
var curScroll = this.scroller.scrollTop;
var navHeight = this.navHeight;
var headings = {};
return [].map.call(titles, function(title, idx) {
var txt = title.textContent;
var id = makeAnchorHeadingId(txt);
var count = headings[id] || 0;
// add unique id if we get headings with the same text
title.id = makeAnchorHeadingId(txt) + (count > 0 ? "-" + count : "");
headings[id] = count + 1;
return {
id: title.id,
index: idx,
text: txt,
pos: title.getBoundingClientRect().top + curScroll - navHeight
};
new TableOfContents(toc, {
depth: depth,
tagName: tagName,
headingsContainerSelector: "article"
});
},
getHeadings: function(){
var headings = [];
for(var i = 0; i < this.depth; i++) {
headings.push("h" + (i + 2));
}
return headings;
getOutlineTagName: function() {
var outline = window.docObject.outline || {};
return (outline.tag === "ol") ? "ol" : "ul";
},
fixed: function(fixed){
if(fixed === this._fixed) {
return;
}
this._fixed = fixed;
this.element.classList[fixed ? "add" : "remove"]("fixed");
},
disabled: function(disabled){
this.element.classList[disabled ? "add" : "remove"]("disabled");
},
getTitle: function(idx){
return this.titles[idx] || {};
},
setActive: function(idx){
var lastIndex = this.titleIndex;
var lis = this.element.querySelectorAll("li");
[].forEach.call(lis, function(li, index){
li.classList[index === idx ? "add" : "remove"]("active");
});
this.titleIndex = idx;
},
handleEvent: throttle(function(ev){
switch(ev.type){
case "scroll":
this.handleScroll(ev);
break;
}
}, 20),
handleScroll: function(ev){
// Determine if we should show the TOC
this.fixed(!this.isFirstTitleVisible());
this.calculateActive();
},
calculateActive: function(){
var scrollTop = this.scroller.scrollTop;
var TOCHeight = this.TOCHeight;
// Determine which h2 should be showing
var prev = this.getTitle(this.titleIndex);
var next = this.getTitle(this.titleIndex + 1);
// See if we need to jump to the next when scrolling down
var cur, nextPos = next.pos + TOCHeight;
while(scrollTop > nextPos) {
cur = next;
next = this.getTitle(cur.index + 1);
nextPos = next.pos + TOCHeight;
}
// See if we need to move to the previous when scrolling up
if(!cur) {
var curPos;
do {
cur = prev;
curPos = cur.pos + TOCHeight;
prev = this.getTitle(prev.index - 1);
} while(scrollTop < curPos);
}
if(typeof cur.pos !== "undefined") {
this.setActive(cur.index);
}
getOutlineDepth: function() {
var depth = window.docObject.outline && window.docObject.outline.depth;
return (typeof depth === "number" ? Math.min(depth, 6) : 1);
}
});
var TOCContainer = Control.extend({
init: function(el){
el.style.display = 'none';
var toc = document.createElement("ul");
toc.className = "on-this-page";
el.appendChild(toc);
new TableOfContents(toc);
}
});
new TOCContainer(
document.getElementsByClassName("on-this-page-container")[0]
);

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc