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

Comparing version 0.4.0 to 0.5.0

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);
-}
+};

package.json

 {
   "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"
   }
 }

readme.md

 # 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 @@

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]
 );

New alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

12995

26.39%

Dependency count

2

-33.33%

Number of package files

15

87.5%

Lines of code

333

8.12%

Number of lines in readme file

39

21.88%

Worsened metrics

Dev dependency count

6

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  can-stache-bindings@^3.0.0-pre.8

• - Removed

  can-simple-observable@1.0.2
  (transitive)

• - Removed

  can-stache-bindings@3.11.12
  (transitive)

• - Removed

  can-view-model@3.5.2
  (transitive)

• Updated

  can-control@^3.0.3

• Updated

  can-stache@^3.0.7