angular-magic-breadcrumb
Version:
AngularMagicBreadcrumb is a library for self-generated breadcrumb in angular 7
334 lines (327 loc) • 13.4 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, Component, Input, NgModule } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { Location, CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/angular-magic-breadcrumb.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AngularMagicBreadcrumbService {
constructor() {
// variables of type Behaviour Subject are created, this is because this type allows us to create observables of this variables
this.breadcrumbStructure = new BehaviorSubject([]);
this.breadcrumbStructure_ = this.breadcrumbStructure.asObservable();
this.showBreadCrumbStructure = new BehaviorSubject(true);
this.showBreadcrumbStructure_ = this.showBreadCrumbStructure.asObservable();
}
/**
* creates a copy of the structure of breadcrumb, and sets the newValue param in the structure in the specified index
* @param {?} newValue
* @param {?} index
* @return {?}
*/
setItemBreadcrumbStructure(newValue, index) {
/** @type {?} */
const newBreadCrumb = this.getBreadcrumbStructure();
newBreadCrumb[index] = newValue;
this.breadcrumbStructure.next(newBreadCrumb);
}
/**
* returns the value(full structure) of the breadcrumb
* @return {?}
*/
getBreadcrumbStructure() {
return this.breadcrumbStructure.value;
}
/**
* Sets an empty value to the breadcrumb (resets it)
* @return {?}
*/
resetBreadcrumbStructure() {
this.breadcrumbStructure.next([]);
}
/**
* Sets the value (boolean) to the variable that indicates if the breadcrumb must be visible or not
* @param {?} value
* @return {?}
*/
changeVisibilityBreadcrumb(value) {
this.showBreadCrumbStructure.next(value);
}
}
AngularMagicBreadcrumbService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
AngularMagicBreadcrumbService.ctorParameters = () => [];
/** @nocollapse */ AngularMagicBreadcrumbService.ngInjectableDef = ɵɵdefineInjectable({ factory: function AngularMagicBreadcrumbService_Factory() { return new AngularMagicBreadcrumbService(); }, token: AngularMagicBreadcrumbService, providedIn: "root" });
if (false) {
/**
* @type {?}
* @private
*/
AngularMagicBreadcrumbService.prototype.breadcrumbStructure;
/** @type {?} */
AngularMagicBreadcrumbService.prototype.breadcrumbStructure_;
/**
* @type {?}
* @private
*/
AngularMagicBreadcrumbService.prototype.showBreadCrumbStructure;
/** @type {?} */
AngularMagicBreadcrumbService.prototype.showBreadcrumbStructure_;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/custom-breadcrumb.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CustomBreadcrumbComponent {
/**
* @param {?} router
* @param {?} breadcrumbService
* @param {?} location
*/
constructor(router, breadcrumbService, location) {
this.router = router;
this.breadcrumbService = breadcrumbService;
this.location = location;
// this variable will handle the current url split into a list structure
this.currentsplitUrl = [];
// this variable will handle the full breadcrumb itself, this variable will be used in the HTML template
this.breadcumValue = [];
// this variable is a flag that indicates if the Breadcrumb must be shown in a specific view
this.showBreadcrum = true;
}
/**
* @return {?}
*/
ngOnInit() {
this.setUrls();
this.getBreadcrum();
}
/**
* Checks if the part of the breadcrumb is active or not, and make the redirection to the specific url of the part
* @param {?} breadcrum -> part of the full breadcrumb
* @return {?}
*/
redirectToView(breadcrum) {
if (breadcrum.active) {
return;
}
this.router.navigate([breadcrum.url]);
}
/**
* Make the subscriptions to the two observables, and saves the value of them into a specific variable
* saves the breadcrumb and if should be shown or not
* @return {?}
*/
getBreadcrum() {
this.breadcrumbService.breadcrumbStructure_.subscribe((/**
* @param {?} value
* @return {?}
*/
value => {
/** @type {?} */
let newBreadcrum = [];
value.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.show == true) {
newBreadcrum.push(item);
}
}));
this.breadcumValue = newBreadcrum;
}));
this.breadcrumbService.showBreadcrumbStructure_.subscribe((/**
* @param {?} value
* @return {?}
*/
value => {
this.showBreadcrum = value;
}));
}
/**
* @return {?}
*/
setUrls() {
this._mainRoot = this.mainRoot;
this.router.events.pipe(
// Just executed when an navigation event ends
filter((/**
* @param {?} event
* @return {?}
*/
event => event instanceof NavigationEnd))).subscribe((/**
* @return {?}
*/
() => {
// returns and save the breadcrumb into a new temporal variable
/** @type {?} */
const currentBreadCrumStructure = this.getBreadcrumbStructure();
// resets the structure of the breadcrumb
this.breadcrumbService.resetBreadcrumbStructure();
// this variable will hold the url to add to the breadcrumb structure
/** @type {?} */
let setsUrl = '';
/** @type {?} */
const pathnameUrl = this.location.path().split('#')[0].split('?')[0];
// this condition is when the breadcrumb is in a platform that has got a route that we don't want to show in the breadcrumb
if (pathnameUrl.includes('/' + this._mainRoot + '/')) {
setsUrl = '/' + this._mainRoot;
}
if (pathnameUrl != this.lastPathname) {
// the breadcrumb must be shown if the first item change
this.showBreadcrum = true;
}
// splits the url by the route on the condition above and splits it by the '/' separator
// Removes the /plataforma/ and params if the url have one of them
/** @type {?} */
let splitUrl = pathnameUrl.split('/' + this._mainRoot + '/').join('').split('/');
// this line assure us that the url split has no blanks or null or empty elements
splitUrl = splitUrl.filter(Boolean);
splitUrl.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
setsUrl = setsUrl + '/' + item;
// a variable that holds the new part that will be added to the breadcrumb
/** @type {?} */
let newBreadcrum = {};
// if one part of the breadcrumb did'nt change, the last known value will be added (remains the same)
if (this.currentsplitUrl[index] === item) {
newBreadcrum = currentBreadCrumStructure[index];
}
else {
// else... a new structure is created
newBreadcrum = {
value: item,
url: setsUrl,
active: splitUrl.length - 1 === index,
show: true
};
}
// the new part of the breadcrumb is added to the structure that will be shown
this.setItemBreadcrumbStructure(newBreadcrum, index);
if (splitUrl.length - 1 === index) {
// in the last item of the route, the current route split is setted into the variable, to use it later when another navigation
// event happens
this.currentsplitUrl = splitUrl;
}
}));
this.lastPathname = pathnameUrl;
}));
}
/**
* @param {?} newBreadcrum
* @param {?} index
* @return {?}
*/
setItemBreadcrumbStructure(newBreadcrum, index) {
this.breadcrumbService.setItemBreadcrumbStructure(newBreadcrum, index);
}
/**
* @return {?}
*/
getBreadcrumbStructure() {
return this.breadcrumbService.getBreadcrumbStructure();
}
/**
* @param {?} value
* @return {?}
*/
changeVisibilityBreadcrumb(value) {
this.breadcrumbService.changeVisibilityBreadcrumb(value);
}
}
CustomBreadcrumbComponent.decorators = [
{ type: Component, args: [{
selector: 'lng-self-generated-breadcrumb',
template: "<div class=\"dynamic-breadcrumb\">\r\n <nav aria-label=\"breadcrumb\" class=\"navigation\" *ngIf=\"showBreadcrum\">\r\n <ol class=\"breadcrumb\">\r\n <li class=\"breadcrumb-item\" [class.active]=\"breadcrum.active\"\r\n (click)=\"redirectToView(breadcrum)\"\r\n style=\"text-transform: capitalize\"\r\n *ngFor=\"let breadcrum of breadcumValue\">{{breadcrum.value}}</li>\r\n </ol>\r\n </nav>\r\n</div>\r\n",
providers: [AngularMagicBreadcrumbService],
styles: [".dynamic-breadcrumb{background-color:#fff}.navigation{display:block}.breadcrumb{display:flex;flex-wrap:wrap;list-style:none;border-radius:.25rem;background-color:#fff;font-size:15px;padding:31px 30px 10px;color:#898989;font-weight:300;max-width:1216px;margin:0 auto}.breadcrumb .breadcrumb-item+.breadcrumb-item::before{display:inline-block;color:#6c757d;content:\"/\";padding-right:5px}.breadcrumb .breadcrumb-item{padding-left:5px}.breadcrumb .breadcrumb-item:not(.active){cursor:pointer}.breadcrumb .breadcrumb-item.active{color:#707070;font-weight:400}@media (min-width:768px){.breadcrumb{padding-left:30px;padding-bottom:22px}}@media (min-width:992px){.breadcrumb{padding-left:45px}}@media (min-width:1200px){.breadcrumb{font-size:17px;padding:40px 50px 10px}}"]
}] }
];
/** @nocollapse */
CustomBreadcrumbComponent.ctorParameters = () => [
{ type: Router },
{ type: AngularMagicBreadcrumbService },
{ type: Location }
];
CustomBreadcrumbComponent.propDecorators = {
mainRoot: [{ type: Input }]
};
if (false) {
/** @type {?} */
CustomBreadcrumbComponent.prototype.mainRoot;
/** @type {?} */
CustomBreadcrumbComponent.prototype._mainRoot;
/** @type {?} */
CustomBreadcrumbComponent.prototype.lastPathname;
/** @type {?} */
CustomBreadcrumbComponent.prototype.currentsplitUrl;
/** @type {?} */
CustomBreadcrumbComponent.prototype.breadcumValue;
/** @type {?} */
CustomBreadcrumbComponent.prototype.showBreadcrum;
/**
* @type {?}
* @private
*/
CustomBreadcrumbComponent.prototype.router;
/** @type {?} */
CustomBreadcrumbComponent.prototype.breadcrumbService;
/**
* @type {?}
* @private
*/
CustomBreadcrumbComponent.prototype.location;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/angular-magic-breadcrumb.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AngularMagicBreadcrumbModule {
constructor() { }
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: AngularMagicBreadcrumbModule,
providers: []
};
}
}
AngularMagicBreadcrumbModule.decorators = [
{ type: NgModule, args: [{
declarations: [CustomBreadcrumbComponent],
imports: [
CommonModule
],
exports: [CustomBreadcrumbComponent]
},] }
];
/** @nocollapse */
AngularMagicBreadcrumbModule.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: angular-magic-breadcrumb.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { AngularMagicBreadcrumbModule, CustomBreadcrumbComponent as ɵa, AngularMagicBreadcrumbService as ɵb };
//# sourceMappingURL=angular-magic-breadcrumb.js.map