fix(stark-demo): fix for links in table-of-contents

- improved styling
NationalBankBelgium · Mar 7, 2019 · 01257d9 · 01257d9
1 parent ad12b5a
commit 01257d9
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 65 deletions.
diff --git a/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.html b/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.html
@@ -2,8 +2,8 @@
 	<div class="table-of-contents-heading">Contents</div>
 	<nav>
 		<a
-			(click)="scrollToAnchor('#' + link.id)"
 			*ngFor="let link of links; trackBy: trackItem"
+			[href]="getHref(link)"
 			class="table-of-contents-level-{{ link.type }} table-of-contents-link"
 			[class.table-of-contents-active-link]="link.active"
 		>

diff --git a/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.scss b/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.scss
@@ -1,14 +1,3 @@
-:host {
-  font-size: 13px;
-  // Width is container width minus content width
-  width: 19%;
-  position: sticky;
-  top: 0;
-  padding-left: 25px;
-  box-sizing: border-box;
-  display: inline-flex;
-}
-
 .table-of-contents-heading {
   margin: 8px 5px 0;
   padding: 0;
@@ -17,43 +6,34 @@
 }
 
 .table-of-contents-link {
-  line-height: 20px;
-  margin: 8px 8px 0;
   position: relative;
-  text-decoration: none;
   display: block;
-  width: 100%;
-  overflow: hidden;
+  margin: 8px 8px 0;
+
+  text-decoration: none;
+  line-height: 20px;
+
   cursor: pointer;
 }
 
-@media #{$desktop-lg-query} {
-  .table-of-contents-container {
-    padding: 5px 0 10px 10px;
-    width: 200px;
-    position: fixed;
-    top: 145px;
-    right: 20px;
-  }
-}
+.table-of-contents-container {
+  position: inherit;
 
-@media #{$handset-toc-query-screen} {
-  .table-of-contents-container {
-    padding: 5px 0 10px 10px;
-    width: 500px;
-    left: 40px;
-    position: inherit;
-    display: inline-table;
-  }
+  width: 100%;
+
+  box-sizing: border-box;
+  padding: 5px 10px 10px 10px;
+
+  display: inline-table;
 }
 
-@media #{$tablet-toc-query-screen} {
+@media #{$desktop-query} {
   .table-of-contents-container {
-    padding: 5px 0 10px 10px;
     position: fixed;
-    top: 145px;
+    top: 150px;
+    right: 20px;
+
     width: 200px;
     display: inline-table;
-    right: 0;
   }
 }
diff --git a/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.spec.ts b/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.spec.ts
@@ -24,27 +24,28 @@ describe("TableOfContents", () => {
 		expect(header).toBeNull();
 	});
 
-	it("should scroll to the right position", () => {
-		component.links = [
-			{
-				type: "h2",
-				id: "test",
-				name: "test",
-				top: 52,
-				active: false
-			}
-		];
-
-		fixture.detectChanges();
-		const myAnchor: string = component.links[0].id;
-		spyOn(document, "querySelector").and.returnValue(document);
-
-		component.scrollToAnchor(myAnchor);
-		const pos: number =
-			((<HTMLElement>document.documentElement).scrollTop || document.body.scrollTop) +
-			(<HTMLElement>document.documentElement).offsetHeight;
-		expect(pos).toBe(52);
-	});
+	// TODO: Refactor test https://github.com/NationalBankBelgium/stark/issues/1172
+	// it("should scroll to the right position", () => {
+	// 	component.links = [
+	// 		{
+	// 			type: "h2",
+	// 			id: "test",
+	// 			name: "test",
+	// 			top: 52,
+	// 			active: false
+	// 		}
+	// 	];
+	//
+	// 	fixture.detectChanges();
+	// 	const myAnchor: string = component.links[0].id;
+	// 	spyOn(document, "querySelector").and.returnValue(document);
+	//
+	// 	component.scrollToAnchor(myAnchor);
+	// 	const pos: number =
+	// 		((<HTMLElement>document.documentElement).scrollTop || document.body.scrollTop) +
+	// 		(<HTMLElement>document.documentElement).offsetHeight;
+	// 	expect(pos).toBe(52);
+	// });
 
 	it("should have header and links", () => {
 		component.links = [

diff --git a/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.ts b/showcase/src/app/shared/components/table-of-contents/table-of-contents.component.ts
@@ -139,6 +139,7 @@ export class TableOfContentsComponent implements OnInit, AfterViewInit, OnDestro
 	 * @param currentLink - the Link we are analysing
 	 * @param nextLink - the Link that follows the currentLink
 	 * @returns - if the link is active (true) or not (false)
+	 * FIXME: No longer works see https://github.com/NationalBankBelgium/stark/issues/1172
 	 */
 	private isLinkActive(currentLink: TableOfContentLink, nextLink: TableOfContentLink): boolean {
 		// A link is considered active if the page is scrolled passed the anchor without also
@@ -148,13 +149,12 @@ export class TableOfContentsComponent implements OnInit, AfterViewInit, OnDestro
 	}
 
 	/**
-	 * Method used to scroll to a link directly.
-	 * We cannot use the classical href with id's method because it would logoff the user from the application.
-	 * @param anchor - the title to scroll to
+	 * 	Hacky way to prevent redirect to homepage when clicking an anchor.
+	 * 	@ignore
 	 */
-	public scrollToAnchor(anchor: string): void {
-		const anchorPosition: number = (<HTMLElement>document.querySelector(anchor)).offsetTop;
-		window.scrollTo(0, anchorPosition);
+	public getHref(link: TableOfContentLink): string {
+		const { origin, pathname }: { origin: string; pathname: string } = window.location;
+		return `${origin}${pathname}#${link.id}`;
 	}
 
 	/**