adds scroll-selector

Author: justinbmeyer

README.md

@@ -79,6 +79,20 @@ can be configured like:
 <bit-toc child-tag="ol"></bit-toc>
 ```
 
+### scroll-selector
+
+If present, will scroll the `<bit-toc>` element with the `heading-container-selector`:
+
+```html
+<bit-toc scroll-selector></bit-toc>
+```
+
+`scroll-selector` can also be set to some other element to scroll:
+
+```html
+<bit-toc scroll-selector="#some-parent"></bit-toc>
+```
+
 ## Methods
 
 Call `.highlight()` to force an update of the `active` or `completed`

test/toc-control-test.js

@@ -18,7 +18,6 @@ describe("TableOfContents", function() {
 
 	afterEach(function() {
 		$testArea.empty();
-
 	});
 
 	it("makes a flat list from headings", function() {
@@ -152,4 +151,69 @@ describe("TableOfContents", function() {
 			}, "initialized correctly");
 
 	});
+
+	it("can scroll the container", function(){
+		var headings = [
+			"<h2>Bower</h2>",
+			"<p>Install</p>",
+			"<h2>NPM</h2>",
+			"<p>Install</p>",
+			"<h2>Configure</h2>",
+			"<p>xyz</p>",
+			"<h2>Writing Modules</h2>",
+			"<p>writing modules</p>",
+			"<h2>Extra</h2>",
+			"<p>final</p>"
+		];
+
+		$testArea.html("<article id='article'>"+headings.join("")+"</article>"+
+			"<bit-toc headings-container-selector='#article' scroll-selector></bit-toc>");
+
+			$("article").css({
+				position: "fixed",
+				top: 0,
+				height: 200,
+				left: 200,
+				width: 600,
+				backgroundColor: "gray",
+				overflowY: "auto"
+			});
+
+			$("article p").css({
+				height: "500px",
+				border: "solid 1px red"
+			});
+
+			$("bit-toc").css({
+				display: "block",
+				height: "50px",
+				overflow: "auto"
+			})[0].highlight();
+
+			function getCompletedAndActive(){
+				var result = {completed: [], active: []}
+				$("bit-toc li").each(function(i, node){
+					if(node.classList.contains("completed")) {
+						result.completed.push(node.textContent)
+					}
+					if(node.classList.contains("active")) {
+						result.active.push(node.textContent)
+					}
+				});
+				return result;
+			}
+
+			assert.deepEqual(getCompletedAndActive(), {
+				active: ["Bower"],
+				completed: []
+			}, "initialized correctly");
+
+			$("#article").scrollTop(1200);
+			$("bit-toc")[0].highlight(); // so we don't have to wait for the throttling
+
+
+			assert.ok( $("bit-toc")[0].scrollTop > 0, "scrollTop has moved");
+
+	});
+
 });

toc-control.js

@@ -78,8 +78,6 @@ var prototype = {
 		if (!titles.length) {
 			this.parentNode.removeChild(this);
 			return;
-		} else {
-			this.parentNode.style.display = 'block';
 		}
 
 		// Append our template
@@ -112,6 +110,16 @@ var prototype = {
 			return (typeof depth === "number" ? Math.min(depth, 6) : 1);
 		}
 	},
+	get outlineScrollElement(){
+		if(this.scrollSelector === "true" || this.scrollSelector === "") {
+			return this;
+		} else if(this.scrollSelector) {
+			return document.querySelector(this.scroll);
+		}
+		else {
+			return;
+		}
+	},
 	get containerSelector(){
 		return this.headingsContainerSelector || "article";
 	},
@@ -131,7 +139,7 @@ var prototype = {
 	setupHighlighting: function(){
 		this.article = document.querySelector(this.containerSelector);
 		if(this.article) {
-			var highlight =  debounce(this.highlight.bind(this),50);
+			var highlight =  debounce(this.highlight.bind(this),1);
 			this.article.addEventListener("scroll",highlight);
 			this.teardowns.push(function(){
 				this.article.removeEventListener("scroll", highlight);
@@ -188,6 +196,13 @@ var prototype = {
 				position.button.classList.add("active");
 			}
 		});
+		var elementToScroll = this.outlineScrollElement;
+
+		if(elementToScroll) {
+			// find out where the midpoint is
+			var distance = (this.article.scrollTop + this.article.offsetHeight / 2) / this.article.scrollHeight;
+			elementToScroll.scrollTop = (elementToScroll.scrollHeight * distance) - (elementToScroll.offsetHeight / 2);
+		}
 	},
 	disconnectedCallback: function(){
 		this.teardowns.forEach(function(teardown){