bit-docs-html-toc
Advanced tools
Comparing version 0.4.0 to 0.5.0
@@ -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 @@ |
225
toc.js
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
12995
2
15
333
39
6
1
- Removedcan-stache-bindings@^3.0.0-pre.8
- Removedcan-simple-observable@1.0.2(transitive)
- Removedcan-stache-bindings@3.11.12(transitive)
- Removedcan-view-model@3.5.2(transitive)
Updatedcan-control@^3.0.3
Updatedcan-stache@^3.0.7