Skip to content

Commit b4f2714

Browse files
author
Danil Moroz
committed
Updated structure, added copy.sh, scripts. Updated tsconfig to exclude breadcrumbs component in dev.
1 parent 1146a21 commit b4f2714

30 files changed

+393
-190
lines changed

.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
node_modules
33
dist
44
build
5-
/develop
65

76
### Files
87
.env

Readme.md

Lines changed: 148 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,149 @@
1-
# Angular-breadcrumbs-light
21

3-
Angular Breadcrumbs customizable and easy to use component & service
2+
# Angular Breadcrumbs Light
3+
4+
[![GitHub version](https://img.shields.io/badge/version-1.1.4-yellow.svg)](https://github.com/mopcweb/angular-breadcrumbs-light/releases) [![npm version](https://img.shields.io/npm/v/angular-breadcrumbs-light.svg)](https://www.npmjs.com/package/angular-breadcrumbs-light) [![GitHub demo](https://img.shields.io/badge/demo-available-green.svg)](https://mopcweb.github.io/angular-breadcrumbs-light) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mopcweb/angular-breadcrumbs-light/blob/master/LICENSE)
5+
6+
## Demo
7+
8+
[See demo here](https://mopcweb.github.io/angular-breadcrumbs-light)
9+
10+
## Description
11+
12+
Easy to use breadcrumbs for Angular.
13+
14+
The package includes:
15+
16+
- Service: just call it in some root component and it will be returning current breadcrumbs array
17+
- Breadcrumbs component: just import and use it. Could be manually configured and styled
18+
- TS Types for both
19+
20+
## Installation
21+
22+
```bash
23+
24+
npm i angular-breadcrumbs-light
25+
26+
```
27+
28+
## Breadcrumbs service
29+
30+
Provides function getBreadcrumbs, which returns an array of breadcrumbs.
31+
32+
Example ([Argument Routes is specified in next subsection](#routes)):
33+
34+
```js
35+
36+
// Usage
37+
const crumbs = getBreadcrumbs(Routes, window.location.pathname);
38+
39+
// Returned array
40+
[
41+
{ link: '/', title: 'Home', icon: 'person', iconClass: 'material-icons' },
42+
{ link: '/clients', title: 'Clients', icon: '...' },
43+
{ link: '/clients/1', title: 'Client № - 1, welcome!', icon: '...' }
44+
]
45+
46+
```
47+
48+
There is only __1 required__ arguments and 5 optional:
49+
50+
| Title | Type | Description | Default |
51+
| :-----: | :------: | :----------------------------------------: | :------------------: |
52+
| __routes *__ | _array_ | array of route objects ([see example below](#routes)) | - |
53+
| fullUrl | _string_ | current location full path | ([see example below](#fullurl)) |
54+
| base | _string_ | if project's base-href is provided manually, put it here also | - |
55+
| notFoundTitle | _string_ | title for not found route | 'Page Not Found' |
56+
| notFoundIcon | _string_ | icon for not found route | undefined |
57+
| notFoundClass | _string_ | icon class for not found route | undefined |
58+
59+
### Routes
60+
61+
Example:
62+
63+
```js
64+
65+
const Routes = [
66+
{ title: 'Home', link: '/', icon: 'string', iconClass: 'material-icons' },
67+
{ title: 'Clients', link: '/clients', icon: '...', children: [
68+
{ title: 'Client № - ', suffix: ', welcome!', link: '/clients/:id', icon: '...' },
69+
{ title: 'Settings', link: '/clients/settings', icon: '...' }
70+
] }
71+
];
72+
73+
```
74+
75+
__Fields:__
76+
77+
| Title | Type | Description |
78+
| :---------: | :------: | :---------------------------------------------------------------: |
79+
| __link *__ | _string_ | breadcrumb link |
80+
| title | _string_ | breadcrumb title |
81+
| suffix | _string_ | breadcrumb suffix (added at the end of output breadcrumb title) |
82+
| icon | _string_ | breadcrumb icon |
83+
| iconClass | _string_ | breadcrumb icon class |
84+
| children | _array_ | array of objects, similar to Routes, for nested routes |
85+
86+
__Features__:
87+
88+
- If __title__ is not provided, link will be used as breadcrumb title (First letter uppercased)
89+
- For root route ('' or '/') if __title__ not provided, the crumb title will be 'Root' by default
90+
- __link__ field may contain dynamic routes (ex.: '/route/:id')
91+
- For dynamic routes 'title' field will be used as prefix for current pathname (first letter uppercased), if provided
92+
93+
### FullUrl
94+
95+
It should be a current location. __DEFAULT VALUE IS: window.location.pathname__.
96+
97+
### Important
98+
99+
Example ([Play with example here](https://stackblitz.com/edit/angular-breadcrumbs-light-custom-crumbs?embed=1&file=src/app/app.component.ts):
100+
101+
```js
102+
103+
```
104+
105+
## Breadcrumbs component
106+
107+
Provides a ready to use component. Can be styled and configured.
108+
109+
[Play with example here](https://stackblitz.com/edit/angular-breadcrumbs-light?embed=1&file=src/app/app.component.ts).
110+
111+
```html
112+
113+
<angular-breadcrumbs-light [routes]="routes"></angular-breadcrumbs-light>
114+
115+
```
116+
117+
There is only 1 __required__ argument. And bunch of optional:
118+
119+
| Title | Type | Description | Default |
120+
| :---------------: | :-------: | :-----------------------------------------------: | :--------: |
121+
| __routes *__ | _array_ | array of route objects ([see example above](#routes))| - |
122+
| base | _string_ | if project's base-href is provided manually, put it here also | - |
123+
| separator | _string_ | separator for crumbs | / |
124+
| separatorClass | _string_ | separator class for crumbs | - |
125+
| icons | _boolean_ | whether to show icons | true |
126+
| titles | _boolean_ | whether to show titles | true |
127+
| noTitlesOnMobile | _boolean_ | if _true_ - hide titles when device width <= 600px (do not forget to provide icons in such case)| false |
128+
| notFoundTitle | _string_ | title for not found pages | 'Page Not Found' |
129+
| notFoundIcon | _string_ | icon for not found pages | - |
130+
| notFoundIconClass | _string_ | icon class for not found pages | - |
131+
| customClasses | _object_ | [classes](#customclasses) for each element of Breadcrumbs component | - |
132+
133+
Similar to first required argument for Breadcrumbs service - __Routes__ array.
134+
135+
#### customClasses
136+
137+
| Title | Type | Description | Html Element |
138+
| ----------- | ------- | ----------------------------- | ------------------------- |
139+
| root | string | class for root element | nav |
140+
| list | string | class for list element | ul |
141+
| link | string | class for link element | a |
142+
| currentLink | string | class for currentLink element | li |
143+
| icon | string | class for icon element | span (holder for icon) |
144+
| title | string | class for title element | span |
145+
| separator | string | class for separator element | li (holder for separator) |
146+
147+
## License
148+
149+
This project is licensed under the terms of the [MIT license](https://github.com/mopcweb/angular-breadcrumbs-light/blob/master/LICENSE).

angular.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": 1,
44
"newProjectRoot": "projects",
55
"projects": {
6-
"client": {
6+
"ngx-breadcrumbs-light": {
77
"root": "",
88
"sourceRoot": "src",
99
"projectType": "application",
@@ -17,7 +17,7 @@
1717
"build": {
1818
"builder": "@angular-devkit/build-angular:browser",
1919
"options": {
20-
"outputPath": "dist/client",
20+
"outputPath": "dist/ngx-breadcrumbs-light",
2121
"index": "src/index.html",
2222
"main": "src/main.ts",
2323
"polyfills": "src/polyfills.ts",
@@ -63,18 +63,18 @@
6363
"serve": {
6464
"builder": "@angular-devkit/build-angular:dev-server",
6565
"options": {
66-
"browserTarget": "client:build"
66+
"browserTarget": "ngx-breadcrumbs-light:build"
6767
},
6868
"configurations": {
6969
"production": {
70-
"browserTarget": "client:build:production"
70+
"browserTarget": "ngx-breadcrumbs-light:build:production"
7171
}
7272
}
7373
},
7474
"extract-i18n": {
7575
"builder": "@angular-devkit/build-angular:extract-i18n",
7676
"options": {
77-
"browserTarget": "client:build"
77+
"browserTarget": "ngx-breadcrumbs-light:build"
7878
}
7979
},
8080
"test": {
@@ -109,7 +109,7 @@
109109
}
110110
}
111111
},
112-
"client-e2e": {
112+
"ngx-breadcrumbs-light-e2e": {
113113
"root": "e2e/",
114114
"projectType": "application",
115115
"prefix": "",
@@ -118,11 +118,11 @@
118118
"builder": "@angular-devkit/build-angular:protractor",
119119
"options": {
120120
"protractorConfig": "e2e/protractor.conf.js",
121-
"devServerTarget": "client:serve"
121+
"devServerTarget": "ngx-breadcrumbs-light:serve"
122122
},
123123
"configurations": {
124124
"production": {
125-
"devServerTarget": "client:serve:production"
125+
"devServerTarget": "ngx-breadcrumbs-light:serve:production"
126126
}
127127
}
128128
},
@@ -208,5 +208,5 @@
208208
}
209209
}
210210
},
211-
"defaultProject": "client"
212-
}
211+
"defaultProject": "ngx-breadcrumbs-light"
212+
}

copy.sh

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Copy interfaces
2+
cp -r src/app/interfaces/ projects/angular-breadcrumbs-light/src/lib/interfaces;
3+
4+
# Copy component
5+
cp -r src/app/components/ projects/angular-breadcrumbs-light/src/lib/components;
6+
7+
# Copy services
8+
cp src/app/services/breadcrumbs.service.ts projects/angular-breadcrumbs-light/src/lib/services/
9+
cp src/app/services/helpers.service.ts projects/angular-breadcrumbs-light/src/lib/services/

package-lock.json

Lines changed: 10 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
{
2-
"name": "ngs-breadcrumbs-light",
3-
"version": "1.0.0",
2+
"name": "ngx-breadcrumbs-light",
3+
"version": "1.0.1",
44
"description": "Angular Breadcrumbs customizable and easy to use component & service",
55
"scripts": {
66
"ng": "ng",
7+
"copy": ". ./copy.sh",
78
"start": "ng serve",
8-
"build": "ng build AngularBreadcrumbsLight",
9+
"base": "ng serve --base-href=\"/angular-breadcrumbs-light/\"",
10+
"build:demo": "ng build --prod --base-href=\"https://mopcweb.github.io/angular-breadcrumbs-light/\"",
11+
"build:lib": "npm run copy && ng build AngularBreadcrumbsLight",
912
"test": "ng test",
1013
"lint": "tslint -p tsconfig.json",
1114
"e2e": "ng e2e",
12-
"deploy": "ng build --prod --base-href \"https://mopcweb.github.io/angular-breadcrumbs-light\"",
13-
"release": "npm run build && cd dist/angular-breadcrumbs-light && npm publish"
15+
"deploy": "npm run copy && npm run build:demo && ngh --dir dist/ngx-breadcrumbs-light",
16+
"release": "npm run build:lib && cd dist/angular-breadcrumbs-light && npm publish"
1417
},
1518
"private": true,
1619
"dependencies": {
@@ -24,6 +27,7 @@
2427
"@angular/platform-browser": "~7.2.0",
2528
"@angular/platform-browser-dynamic": "~7.2.0",
2629
"@angular/router": "~7.2.0",
30+
"angular-breadcrumbs-light": "^1.0.1",
2731
"axios": "^0.19.0",
2832
"core-js": "^2.5.4",
2933
"hammerjs": "^2.0.8",

0 commit comments

Comments
 (0)