angular-magic-breadcrumb
Version:
AngularMagicBreadcrumb is a library for self-generated breadcrumb in angular 7
408 lines (401 loc) • 16.7 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
*/
var AngularMagicBreadcrumbService = /** @class */ (function () {
function AngularMagicBreadcrumbService() {
// 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
*/
/**
* 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 {?}
*/
AngularMagicBreadcrumbService.prototype.setItemBreadcrumbStructure = /**
* 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 {?}
*/
function (newValue, index) {
/** @type {?} */
var newBreadCrumb = this.getBreadcrumbStructure();
newBreadCrumb[index] = newValue;
this.breadcrumbStructure.next(newBreadCrumb);
};
/**
* returns the value(full structure) of the breadcrumb
*/
/**
* returns the value(full structure) of the breadcrumb
* @return {?}
*/
AngularMagicBreadcrumbService.prototype.getBreadcrumbStructure = /**
* returns the value(full structure) of the breadcrumb
* @return {?}
*/
function () {
return this.breadcrumbStructure.value;
};
/**
* Sets an empty value to the breadcrumb (resets it)
*/
/**
* Sets an empty value to the breadcrumb (resets it)
* @return {?}
*/
AngularMagicBreadcrumbService.prototype.resetBreadcrumbStructure = /**
* Sets an empty value to the breadcrumb (resets it)
* @return {?}
*/
function () {
this.breadcrumbStructure.next([]);
};
/**
* Sets the value (boolean) to the variable that indicates if the breadcrumb must be visible or not
* @param value
*/
/**
* Sets the value (boolean) to the variable that indicates if the breadcrumb must be visible or not
* @param {?} value
* @return {?}
*/
AngularMagicBreadcrumbService.prototype.changeVisibilityBreadcrumb = /**
* Sets the value (boolean) to the variable that indicates if the breadcrumb must be visible or not
* @param {?} value
* @return {?}
*/
function (value) {
this.showBreadCrumbStructure.next(value);
};
AngularMagicBreadcrumbService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
AngularMagicBreadcrumbService.ctorParameters = function () { return []; };
/** @nocollapse */ AngularMagicBreadcrumbService.ngInjectableDef = ɵɵdefineInjectable({ factory: function AngularMagicBreadcrumbService_Factory() { return new AngularMagicBreadcrumbService(); }, token: AngularMagicBreadcrumbService, providedIn: "root" });
return AngularMagicBreadcrumbService;
}());
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
*/
var CustomBreadcrumbComponent = /** @class */ (function () {
function CustomBreadcrumbComponent(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 {?}
*/
CustomBreadcrumbComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
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
*/
/**
* 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 {?}
*/
CustomBreadcrumbComponent.prototype.redirectToView = /**
* 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 {?}
*/
function (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
*/
/**
* 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 {?}
*/
CustomBreadcrumbComponent.prototype.getBreadcrum = /**
* 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 {?}
*/
function () {
var _this = this;
this.breadcrumbService.breadcrumbStructure_.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newBreadcrum = [];
value.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.show == true) {
newBreadcrum.push(item);
}
}));
_this.breadcumValue = newBreadcrum;
}));
this.breadcrumbService.showBreadcrumbStructure_.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) {
_this.showBreadcrum = value;
}));
};
/**
* @return {?}
*/
CustomBreadcrumbComponent.prototype.setUrls = /**
* @return {?}
*/
function () {
var _this = this;
this._mainRoot = this.mainRoot;
this.router.events.pipe(
// Just executed when an navigation event ends
filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event instanceof NavigationEnd; }))).subscribe((/**
* @return {?}
*/
function () {
// returns and save the breadcrumb into a new temporal variable
/** @type {?} */
var 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 {?} */
var setsUrl = '';
/** @type {?} */
var 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 {?} */
var 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 {?}
*/
function (item, index) {
setsUrl = setsUrl + '/' + item;
// a variable that holds the new part that will be added to the breadcrumb
/** @type {?} */
var 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 {?}
*/
CustomBreadcrumbComponent.prototype.setItemBreadcrumbStructure = /**
* @param {?} newBreadcrum
* @param {?} index
* @return {?}
*/
function (newBreadcrum, index) {
this.breadcrumbService.setItemBreadcrumbStructure(newBreadcrum, index);
};
/**
* @return {?}
*/
CustomBreadcrumbComponent.prototype.getBreadcrumbStructure = /**
* @return {?}
*/
function () {
return this.breadcrumbService.getBreadcrumbStructure();
};
/**
* @param {?} value
* @return {?}
*/
CustomBreadcrumbComponent.prototype.changeVisibilityBreadcrumb = /**
* @param {?} value
* @return {?}
*/
function (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 = function () { return [
{ type: Router },
{ type: AngularMagicBreadcrumbService },
{ type: Location }
]; };
CustomBreadcrumbComponent.propDecorators = {
mainRoot: [{ type: Input }]
};
return CustomBreadcrumbComponent;
}());
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
*/
var AngularMagicBreadcrumbModule = /** @class */ (function () {
function AngularMagicBreadcrumbModule() {
}
/**
* @return {?}
*/
AngularMagicBreadcrumbModule.forRoot = /**
* @return {?}
*/
function () {
return {
ngModule: AngularMagicBreadcrumbModule,
providers: []
};
};
AngularMagicBreadcrumbModule.decorators = [
{ type: NgModule, args: [{
declarations: [CustomBreadcrumbComponent],
imports: [
CommonModule
],
exports: [CustomBreadcrumbComponent]
},] }
];
/** @nocollapse */
AngularMagicBreadcrumbModule.ctorParameters = function () { return []; };
return AngularMagicBreadcrumbModule;
}());
/**
* @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