feat: ability to disable a bredcurmb link in between the stack

udayvunnam · May 30, 2020 · 5704fde · 5704fde
1 parent 730a309
commit 5704fde
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 15 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.com/
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -1,4 +1,8 @@
-# xng-breadcrumb
+<h1 align="center" style="color: teal">xng-breadcrumb</h1>
+
+<div align="center">
+
+> A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. https://www.npmjs.com/package/xng-breadcrumb
 
 [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
 ![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb)
@@ -8,7 +12,7 @@
 [![CircleCI](https://circleci.com/gh/udayvunnam/xng-breadcrumb.svg?shield&circle-token=:circle-token)](https://circleci.com/gh/udayvunnam/xng-breadcrumb)
 ![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)
 
-> A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. https://www.npmjs.com/package/xng-breadcrumb
+</div>
 
 ## About
 
@@ -18,7 +22,10 @@
 ## Demo
 
 [Live Demo](https://xng-breadcrumb.netlify.com/dashboard) - A demo app showcasing `xng-breadcrumb` usage in an Angular app. Navigate through different links to see breadcrumbs behavior.
-![image](https://user-images.githubusercontent.com/20707504/68575589-61287880-0492-11ea-9084-80587321c5c4.png)
+
+<p align="center">
+  <a href="https://xng-breadcrumb.netlify.com/dashboard" rel="noopener" target="_blank" ><img width="500" style="box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)" src="https://user-images.githubusercontent.com/20707504/68575589-61287880-0492-11ea-9084-80587321c5c4.png" alt="xng-breadcrumb usage"></a></p>
+</p>
 
 ## Features
 

diff --git a/projects/xng-breadcrumb-app/src/app/app-routing.module.ts b/projects/xng-breadcrumb-app/src/app/app-routing.module.ts
@@ -46,7 +46,12 @@ export const appRoutes: Routes = [
   },
   {
     path: 'connect',
-    loadChildren: './connect/connect.module#ConnectModule'
+    loadChildren: './connect/connect.module#ConnectModule',
+    data: {
+      breadcrumb: {
+        disable: true
+      }
+    }
   },
   { path: '**', pathMatch: 'full', component: PageNotFoundComponent }
 ];

diff --git a/projects/xng-breadcrumb-app/src/app/mentor/mentor-routing.module.ts b/projects/xng-breadcrumb-app/src/app/mentor/mentor-routing.module.ts
@@ -17,6 +17,11 @@ const routes: Routes = [
       },
       {
         path: ':id',
+        data: {
+          breadcrumb: {
+            disable: true
+          }
+        },
         children: [
           {
             path: '',

diff --git a/projects/xng-breadcrumb/src/lib/breadcrumb.component.html b/projects/xng-breadcrumb/src/lib/breadcrumb.component.html
@@ -2,7 +2,13 @@
   <ol class="xng-breadcrumb-list">
     <ng-container *ngFor="let breadcrumb of breadcrumbs; last as isLast; first as isFirst">
       <li class="xng-breadcrumb-item">
-        <a *ngIf="!isLast" [routerLink]="[breadcrumb.routeLink]" class="xng-breadcrumb-link">
+        <a
+          *ngIf="!isLast"
+          [routerLink]="[breadcrumb.routeLink]"
+          class="xng-breadcrumb-link"
+          [ngClass]="{ 'xng-breadcrumb-link-disabled': breadcrumb.disable }"
+          [attr.aria-disabled]="breadcrumb.disable"
+        >
           <ng-container
             *ngTemplateOutlet="itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst }"
           ></ng-container>

diff --git a/projects/xng-breadcrumb/src/lib/breadcrumb.component.scss b/projects/xng-breadcrumb/src/lib/breadcrumb.component.scss
@@ -34,6 +34,11 @@
   text-decoration: underline;
 }
 
+.xng-breadcrumb-link-disabled {
+  pointer-events: none;
+  cursor: disabled;
+}
+
 .xng-breadcrumb-separator {
   display: flex;
   user-select: none;

diff --git a/projects/xng-breadcrumb/src/lib/breadcrumb.service.ts b/projects/xng-breadcrumb/src/lib/breadcrumb.service.ts
@@ -81,7 +81,7 @@ export class BreadcrumbService {
   private setBaseBreadcrumb() {
     const baseConfig = this.router.config.find(pathConfig => pathConfig.path === '');
     if (baseConfig && baseConfig.data) {
-      let { label, alias, skip = false, info } = this.getBreadcrumbOptions(baseConfig.data);
+      let { label, alias, skip = false, info, disable = false } = this.getBreadcrumbOptions(baseConfig.data);
 
       let isAutoGeneratedLabel = false;
       if (typeof label !== 'string' && !label) {
@@ -93,6 +93,7 @@ export class BreadcrumbService {
         label,
         alias,
         skip,
+        disable,
         info,
         routeLink: this.baseHref,
         isAutoGeneratedLabel
@@ -140,7 +141,7 @@ export class BreadcrumbService {
     const queryParamsString = this.resolveQueryParams(activatedRoute);
     const routeLink = `${routeLinkPrefix}${resolvedPath}${queryParamsString}`;
 
-    let { label, alias, skip, info } = this.getFromStore(breadcrumb.alias, routeLink);
+    let { label, alias, skip, disable, info } = this.getFromStore(breadcrumb.alias, routeLink);
     let isAutoGeneratedLabel = false;
 
     if (typeof label !== 'string') {
@@ -156,6 +157,7 @@ export class BreadcrumbService {
       label,
       alias: alias || breadcrumb.alias,
       skip: skip || breadcrumb.skip,
+      disable: disable || breadcrumb.disable,
       info: info || breadcrumb.info,
       routeLink,
       isAutoGeneratedLabel