moving to a custom element

justinbmeyer · justinbmeyer · commit 51b9d52f928f · 2019-03-31T20:00:46.000-05:00
diff --git a/.jshintrc b/.jshintrc
@@ -24,6 +24,7 @@
 		"describe": true,
 		"it": true,
 		"beforeEach": true,
-		"afterEach": true
+		"afterEach": true,
+		"customElements": true
 	}
 }
diff --git a/attribute-connect.js b/attribute-connect.js
@@ -0,0 +1,16 @@
+var canString = require("can-string");
+
+module.exports = function(convertToProperty){
+	convertToProperty = convertToProperty || canString.camelize;
+
+	return {
+		attributeChangedCallback: function(name, oldValue, newValue){
+			this[convertToProperty(name)] = newValue;
+		},
+		initialize: function(node){
+			[].slice.call(node.attributes, 0).forEach(function(attrNode){
+				node[convertToProperty(attrNode.name)] = attrNode.value;
+			});
+		}
+	};
+};
diff --git a/demo.html b/demo.html
@@ -0,0 +1,42 @@
+<html>
+	<bit-toc></bit-toc>
+	<script>
+		console.log("executing");
+
+
+		console.log("executed");
+
+		function safeCustomElement(tag, constructor, prototype){
+			var Element = function(){
+				var result;
+				if(typeof Reflect !== "undefined") {
+					result = Reflect.construct(HTMLElement, [], new.target);
+				} else {
+					result = HTMLElement.apply(this, arguments);
+				}
+
+				return result;
+			}
+			if(typeof HTMLElement !== undefined) {
+				Element.prototype = Object.create(HTMLElement.prototype);
+			}
+			Object.getOwnPropertyNames(prototype).forEach(function(property){
+				Object.defineProperty(Element.prototype, property,
+					Object.getOwnPropertyDescriptor(prototype, property))
+			});
+			if(typeof customElements !== "undefined") {
+				customElements.define(tag, Element);
+			}
+
+			return Element;
+		}
+
+		var BitToc = safeCustomElement('bit-toc',function(){
+			console.log("constructor");
+		},{
+			connectedCallback: function(){
+				console.log("connected");
+			}
+		});
+	</script>
+</html>
diff --git a/make-tree.js b/make-tree.js
@@ -63,7 +63,8 @@ function makeTreeData(elements) {
 
 	return map.call(elements, function(element) {
 		var text = element.textContent;
-		var id = makeHeadingId(text);
+		var id = element.id || makeHeadingId(text);
+		element.id = id;
 		var level = getElementLevel(element);
 
 		// generate unique id for elements with same text
diff --git a/package.json b/package.json
@@ -27,6 +27,9 @@
   "homepage": "https://github.com/bit-docs/bit-docs-html-toc#readme",
   "dependencies": {
     "can-assign": "^1.3.1",
+    "can-define-lazy-value": "^1.1.0",
+    "can-dom-mutate": "^1.3.6",
+    "can-string": "^1.0.0",
     "can-view-target": "^4.1.2"
   },
   "devDependencies": {
diff --git a/safe-custom-element.js b/safe-custom-element.js
@@ -0,0 +1,33 @@
+
+function safeCustomElement(tag, constructor, prototype){
+	prototype = prototype || constructor.prototype;
+	var Element = function(){
+		var result;
+		if(typeof Reflect !== "undefined") {
+			result = Reflect.construct(HTMLElement, [], new.target);
+		} else {
+			result = HTMLElement.apply(this, arguments);
+		}
+		constructor.apply(result, arguments);
+		return result;
+	};
+	if(typeof HTMLElement !== undefined) {
+		Element.prototype = Object.create(HTMLElement.prototype);
+	}
+	Object.getOwnPropertyNames(prototype).forEach(function(property){
+		Object.defineProperty(Element.prototype, property,
+			Object.getOwnPropertyDescriptor(prototype, property));
+	});
+	if(typeof customElements !== "undefined") {
+		customElements.define(tag, Element);
+	}
+
+	return Element;
+}
+
+safeCustomElement.supported = (typeof Reflect !== "undefined") && 
+	(typeof HTMLElement !== undefined) &&
+	(typeof customElements !== "undefined");
+
+
+module.exports = safeCustomElement;
diff --git a/test/index.html b/test/index.html
@@ -2,6 +2,10 @@
 <html>
 	<head>
 		<title>bit-docs-html-toc</title>
+		<style>
+			.completed, .completed a {color: #dddddd;}
+			.active, .active a {color: green;}
+		</style>
 	</head>
 
 	<body>
diff --git a/test/toc-container-control-test.js b/test/toc-container-control-test.js
@@ -33,6 +33,7 @@ describe("TOCContainer", function() {
 		new TOCContainer($el.get(0));
 
 		var $items = $("#toc-container ul");
+		$("#toc-container li").removeAttr("class");
 		assert.equal(
 			$items.html(),
 			[
@@ -42,44 +43,14 @@ describe("TOCContainer", function() {
 			].join(""),
 			"should create table of contents from the headings inside container"
 		);
+		var ids = $.makeArray($("article h2").map(function(i, element) {
+			return element.id;
+		}));
+
+		assert.deepEqual(ids, ["usage","install","configure"]);
 
 		// remove headings container from the DOM
 		$("article").remove();
 	});
 
-	it("reads the headings container selector from the element", function() {
-		// set the container selector as a data-* attribute
-		$el.attr(
-			"data-headings-container-selector",
-			".my-custom-container"
-		);
-
-		var headings = [
-			'<div class="my-custom-container">',
-				"<h2>Usage</h2>",
-				"<h2>Install</h2>",
-				"<h2>Configure</h2>",
-				"<h2>Configure</h2>",
-			"</div>"
-		];
-
-		// append the headings to the DOM and then instantiate the control
-		$("body").append(headings.join(""));
-		new TOCContainer($el.get(0));
-
-		var $items = $("#toc-container ul");
-		assert.equal(
-			$items.html(),
-			[
-				'<li><a href="#usage">Usage</a></li>',
-				'<li><a href="#install">Install</a></li>',
-				'<li><a href="#configure">Configure</a></li>',
-				'<li><a href="#configure-1">Configure</a></li>'
-			].join(""),
-			"should create table of contents from the headings inside container"
-		);
-
-		// remove headings container from the DOM
-		$(".my-custom-container").remove();
-	});
 });
diff --git a/test/toc-control-test.js b/test/toc-control-test.js
@@ -1,22 +1,24 @@
 var $ = require("jquery");
 var assert = require("chai/chai").assert;
 var TableOfContents = require("../toc-control");
+var safeCustomElement = require("../safe-custom-element");
 
 require("steal-mocha");
 
 describe("TableOfContents", function() {
+	if(!safeCustomElement.supported) {
+		return;
+	}
 	var $el, $testArea;
 
 	beforeEach(function() {
-		$("body").append("<ul id=\"toc-test\"></ul>");
-
-		$el = $("#toc-test");
 		$testArea = $("#test-area");
+
 	});
 
 	afterEach(function() {
-		$el.remove();
 		$testArea.empty();
+
 	});
 
 	it("makes a flat list from headings", function() {
@@ -27,15 +29,16 @@ describe("TableOfContents", function() {
 			"<h2>Configure</h2>"
 		];
 
-		$testArea.html(headings.join(""));
+		$testArea.html("<article id='article'>"+headings.join("")+"</article>"+
+		"<bit-toc child-tag='ul' headings-container-selector='#article' depth='1'>");
 
-		new TableOfContents($el.get(0), {
+		/*new TableOfContents($el.get(0), {
 			tagName: "ul",
 			depth: 1,
 			headingsContainerSelector: "#test-area"
-		});
-
-		assert.equal($el.html(), [
+		});*/
+		$('bit-toc li').removeAttr("class"); // remove for nice html
+		assert.equal(document.querySelector('bit-toc ul').innerHTML, [
 			'<li><a href="#usage">Usage</a></li>',
 			'<li><a href="#install">Install</a></li>',
 			'<li><a href="#configure">Configure</a></li>',
@@ -53,13 +56,11 @@ describe("TableOfContents", function() {
 			"<h2>Writing Modules</h2>",
 		];
 
-		$testArea.html(headings.join(""));
 
-		new TableOfContents($el.get(0), {
-			tagName: "ul",
-			depth: 3,
-			headingsContainerSelector: "#test-area"
-		});
+		$testArea.html("<article id='article'>"+headings.join("")+"</article>"+
+		"<bit-toc child-tag='ul' headings-container-selector='#article' depth='3'>");
+
+		var $el = $('bit-toc>ul');
 
 		assert.equal($el.find(">li:eq(0) ul").length, 1, "bower has a nested list");
 		assert.equal($el.find(">li:eq(1) ul").length, 2, "npm two nested lists");
@@ -76,18 +77,79 @@ describe("TableOfContents", function() {
 			"<h2>Writing Modules</h2>"
 		];
 
-		$testArea.html(headings.join(""));
+		$testArea.html("<article id='article'>"+headings.join("")+"</article>"+
+		"<bit-toc child-tag='ul' headings-container-selector='#article' depth='1'>");
 
-		new TableOfContents($el.get(0), {
-			tagName: "ul",
-			depth: 1,
-			headingsContainerSelector: "#test-area"
-		});
+		var $el = $('bit-toc>ul');
+
+		$('bit-toc li').removeAttr("class"); // remove for nice html
 
 		assert.equal($el.html(), [
 			'<li><a href="#bower">Bower</a></li>',
 			'<li><a href="#npm">NPM</a></li>',
 			'<li><a href="#writing-modules">Writing Modules</a></li>'
 		].join(""));
 	});
+
+	it("highlights what has been completed", 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'></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")[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(600);
+			$("bit-toc")[0].highlight(); // so we don't have to wait for the throttling
+
+			assert.deepEqual(getCompletedAndActive(), {
+				active: ["NPM"],
+				completed: ["Bower"]
+			}, "initialized correctly");
+
+	});
 });
diff --git a/toc-container-control.js b/toc-container-control.js
diff --git a/toc-control.js b/toc-control.js
diff --git a/toc.js b/toc.js

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@`
`24`	`24`	`"describe": true,`
`25`	`25`	`"it": true,`
`26`	`26`	`"beforeEach": true,`
`27`		`- "afterEach": true`
	`27`	`+ "afterEach": true,`
	`28`	`+ "customElements": true`
`28`	`29`	`}`
`29`	`30`	`}`