Skip to content

Commit 198313a

Browse files
author
Raphael Balet
committed
init - main
1 parent 001fbc0 commit 198313a

24 files changed

+13165
-0
lines changed

‎.editorconfig

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎.github/FUNDING.yml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# These are supported funding model platforms
2+
3+
github: rbalet
4+
# patreon: RaphaelBalet
5+
# open_collective: # Replace with a single Open Collective username
6+
# ko_fi: # Replace with a single Ko-fi username
7+
# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8+
# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9+
# liberapay: # Replace with a single Liberapay username
10+
# issuehunt: # Replace with a single IssueHunt username
11+
# otechie: # Replace with a single Otechie username
12+
# lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13+
custom: https://www.buymeacoffee.com/widness

‎.gitignore

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db
43+
node_modules

‎.prettierrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"printWidth": 100,
3+
"singleQuote": true,
4+
"trailingComma": "all",
5+
"semi": false,
6+
"arrowParens": "always"
7+
}

‎.vscode/extensions.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎.vscode/launch.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "pwa-chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎.vscode/tasks.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎README.md

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
# @ngx-href [![npm version](https://img.shields.io/npm/v/ngx-href.svg)](https://www.npmjs.com/package/ngx-href)
2+
3+
[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness)
4+
5+
A library that allows href to understand Angular's router while retaining its default functionality.
6+
1. Use `router.navigate()` for [internal link](#angular-routing)
7+
2. Support scroll with the `#` attributes and let you configure the [scrolling logic](#scroll-logic)
8+
3. Automatically append `rel="nooepener"` & `target="_blank"` to external link [if wished so](#installation)
9+
10+
- [@ngx-href ](#ngx-href-)
11+
- [Installation](#installation)
12+
- [Angular routing](#angular-routing)
13+
- [Scroll logic](#scroll-logic)
14+
- [Behavior](#behavior)
15+
- [defaultOffset](#defaultoffset)
16+
- [navbarOffset](#navbaroffset)
17+
- [External link](#external-link)
18+
- [Rel attribute](#rel-attribute)
19+
- [Target attribute](#target-attribute)
20+
- [target attribute](#target-attribute-1)
21+
- [Usage](#usage)
22+
- [Directive](#directive)
23+
- [Service](#service)
24+
- [Authors and acknowledgment](#authors-and-acknowledgment)
25+
26+
## Installation
27+
28+
```sh
29+
npm install ngx-href
30+
```
31+
32+
Inside your `app.module.ts` file.
33+
```typescript
34+
import { ngxHrefModule, ngxHrefService } from 'ngx-href'
35+
36+
imports: [
37+
/** Default
38+
* behavior="smooth"
39+
* defaultOffset="30"
40+
* navbarOffset="60"
41+
* rel="noopener"
42+
* target="_blank"
43+
**/
44+
ngxHrefModule.forRoot({}),
45+
46+
// Or
47+
ngxHrefModule.forRoot({
48+
behavior:"instant",
49+
defaultOffset:"30",
50+
navbarOffset:"60",
51+
rel:"noopener nofollow",
52+
target:"_self",
53+
}),
54+
],
55+
```
56+
57+
## Angular routing
58+
Nothing to do it should work out of the box
59+
60+
## Scroll logic
61+
### Behavior
62+
**Default:** `"smooth"`
63+
**Accepted value:** `ScrollBehavior` // ("auto" | "instant" | "smooth")
64+
65+
Can also be passed individually directly through html
66+
```html
67+
<a href="https://my-external-url.com" behavior="instant">
68+
```
69+
70+
### defaultOffset
71+
The standard offset to be added to your website `scrollTo` logic
72+
73+
**Default:** `30`
74+
**Accepted value:** `number`
75+
Together with the `navbarOffset` will be the total offset for the scroll.
76+
77+
### navbarOffset
78+
An additional offset calculated base on your navbar height
79+
80+
**Default:** `60`
81+
**Accepted value:** `number`
82+
Together with the `defaultOffset` will be the total offset for the scroll.
83+
84+
You can update this value after the navbar is rendered.
85+
86+
```html
87+
<navbar #navbar>
88+
<!-- My html code -->
89+
</navbar>
90+
```
91+
92+
```typescript
93+
@ViewChild('navbar', { static: true }) navbar: ElementRef
94+
95+
constructor(
96+
private _ngxHrefService: NgxHrefService,
97+
) {}
98+
99+
ngAfterContentInit(): void {
100+
this._ngxHrefService.navbarOffset = this.navbar.nativeElement.offsetHeight
101+
}
102+
```
103+
104+
105+
## External link
106+
### Rel attribute
107+
**Default:** `"noopener"`
108+
**Accepted value:** [string](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel)
109+
110+
Can also be passed individually directly through html
111+
```html
112+
<a href="https://my-external-url.com" rel="noopener nofollow">
113+
```
114+
115+
### Target attribute
116+
**Default:** `"_blank"`
117+
**Accepted value:** [string](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
118+
119+
Can also be passed individually directly through html
120+
```html
121+
<a href="https://my-external-url.com" target="_self">
122+
```
123+
124+
### target attribute
125+
126+
127+
## Usage
128+
Wherever you plan to use the href directive
129+
130+
```typescript
131+
import { ngxHrefModule } from 'ngx-href'
132+
133+
imports: [
134+
ngxHrefModule,
135+
]
136+
```
137+
138+
Then you can use it as you would normally use an `a` element
139+
140+
### Directive
141+
Normal use
142+
```html
143+
<!-- Angular router -->
144+
<a href="/angular/router/link">
145+
My internal link
146+
</a>
147+
148+
<!-- External link -->
149+
<a href="https://external-url.com">
150+
An external link
151+
</a>
152+
153+
154+
<!-- Scroll -->
155+
<a href="#myAnchor">
156+
My scroll to anchor
157+
</a>
158+
159+
<!-- Scroll in different page -->
160+
<a href="/angular/router#link">
161+
My internal link with anchor
162+
</a>
163+
```
164+
165+
166+
### Service
167+
```typescript
168+
// foo.component.ts
169+
import { ngxHrefService } from 'ngx-href'
170+
171+
// ...
172+
constructor(public ngxHrefService: ngxHrefService) {}
173+
```
174+
175+
Normal use
176+
```html
177+
<button (click)="ngxHrefService.scrollTo(#myAnchor)">
178+
Scroll to #myAnchor
179+
</button>
180+
181+
<!-- some html -->
182+
183+
<h2 id="myAnchor">A title</h2>
184+
```
185+
186+
## Authors and acknowledgment
187+
* maintainer [Raphaël Balet](https://github.com/rbalet)

‎angular.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"ngx-href": {
7+
"projectType": "library",
8+
"root": "projects",
9+
"sourceRoot": "projects/src",
10+
"prefix": "lib",
11+
"architect": {
12+
"build": {
13+
"builder": "@angular-devkit/build-angular:ng-packagr",
14+
"options": {
15+
"project": "projects/ng-package.json"
16+
},
17+
"configurations": {
18+
"production": {
19+
"tsConfig": "projects/tsconfig.lib.prod.json"
20+
},
21+
"development": {
22+
"tsConfig": "projects/tsconfig.lib.json"
23+
}
24+
},
25+
"defaultConfiguration": "production"
26+
},
27+
"test": {
28+
"builder": "@angular-devkit/build-angular:karma",
29+
"options": {
30+
"tsConfig": "projects/tsconfig.spec.json",
31+
"polyfills": [
32+
"zone.js",
33+
"zone.js/testing"
34+
]
35+
}
36+
}
37+
}
38+
}
39+
}
40+
}

0 commit comments

Comments
 (0)