Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ng 17 support #325

Merged
merged 7 commits into from
Dec 22, 2023
Merged

Ng 17 support #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
92df581
fix: allow for compilation in ivy for test app to work
Dec 18, 2023
f26634c
feat: made the directive and component standalone and updated documen…
Dec 15, 2023
4966714
fix: package lock
Dec 18, 2023
ea3b99c
fix: merge
Dec 15, 2023
a9add39
fix: linting for project and unit tests
Dec 15, 2023
eb4f2aa
feat: made component onpush
Dec 15, 2023
5cc977e
fix: updated ci to use node 18
Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,27 @@ name: Node.js CI

on:
push:
branches: [ develop ]
branches: [develop]
pull_request:
branches: [ develop ]
branches: [develop]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [16.x]
node-version: [18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm run test ngx-drag-scroll -- --watch=false --browsers=ChromeHeadless
- run: npm run build ngx-drag-scroll
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm run test ngx-drag-scroll -- --watch=false --browsers=ChromeHeadless
- run: npm run build ngx-drag-scroll
161 changes: 97 additions & 64 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ Lightweight drag to scroll carousel for Angular
[![Build Status](https://travis-ci.org/bfwg/ngx-drag-scroll.svg?branch=master)](https://travis-ci.org/bfwg/ngx-drag-scroll)
[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bfwg/ngx-drag-scroll/blob/master/LICENSE)


*Scroll on drag!*
_Scroll on drag!_

![Scroll](https://user-images.githubusercontent.com/12819525/31459582-73565738-ae78-11e7-8b45-83f686123b63.gif)

Expand All @@ -30,60 +29,93 @@ This project needs `Angular 5+` as dependencies though.

# Setup

You'll need to add `DragScrollModule` to your application module.
Our component and directive are standalone now!
You'll need to import `DragScrollComponent` and/or `DragScrollDirective` to your application module or component.

## Module:

```typescript
import { DragScrollModule } from 'ngx-drag-scroll';
import { DragScrollComponent, DragScrollDirective } from 'ngx-drag-scroll';
import { DragScrollDirective } from './ngx-drag-scroll-item';

...

@NgModule({
declarations: [
AppComponent
],
imports: [
DragScrollModule,
DragScrollComponent,
DragScrollItemDirective,
...
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [ AppComponent ]
})

export class AppModule {
}

```
Add the `drag-scroll` attribute to a scrollable element:

## Component:

```typescript
import { DragScrollComponent, DragScrollDirective } from 'ngx-drag-scroll';

@Component({
selector: 'sample',
template:`
<drag-scroll style="width: 100px; height: 10px">
Big text goes here...
<drag-scroll>
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
</drag-scroll>
`,
styles: [`
standalone: true,
imports: [
DragScrollComponent,
DragScrollItemDirective,
...
]
})
class Sample {}
```

Add the `drag-scroll` attribute to a scrollable element:

```typescript
@Component({
selector: 'sample',
template: ` <drag-scroll style="width: 100px; height: 10px"> Big text goes here... </drag-scroll> `,
styles: [
`
drag-scroll {
height: 50px
width: 100px
}
`]
`
]
})
class SampleBigText {}
```

That's it! Now you can scroll it by dragging.

If you want to group items into a carousel, you will need to add `drag-scroll-item` to the carsousel items.

```typescript
@Component({
selector: 'sample',
template:`
<drag-scroll>
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
</drag-scroll>
template: `
<drag-scroll>
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
</drag-scroll>
`,
styles: [`
styles: [
`
drag-scroll {
height: 50px
width: 100px
Expand All @@ -92,64 +124,64 @@ If you want to group items into a carousel, you will need to add `drag-scroll-it
height: 50px
width: 50px
}
`]
`
]
})
class SampleCarousel {}
```


## API REFERENCE

### DragScrollComponent

| Name | Type | Description |Default|
|------------------------|---------|-------------------------------------------------------------------------------|-------|
| scrollbar-hidden | @Input | Whether the scroll bar for this element is hidden. | false |
| drag-scroll-disabled | @Input | Whether all draging and scrolling events is disabled. | false |
| drag-scroll-x-disabled | @Input | Whether horizontally dragging and scrolling events is disabled. | false |
| scroll-x-wheel-enabled | @Input | Whether scrolling horizontally with mouse wheel is enabled | false |
| drag-scroll-y-disabled | @Input | Whether vertically dragging and scrolling events is disabled. | false |
| drag-disabled | @Input | Whether draging is disabled. | false |
| snap-disabled | @Input | Whether snapping is disabled. | false |
| snap-offset | @Input | Pixels of previous element to show on snap or moving left and right. | 0 |
| snap-duration | @Input | Duration of snap animation in milliseconds. | 500 |
| reachesLeftBound | @Output | Whether reaching the left carousel bound. | n/a |
| reachesRightBound | @Output | Whether reaching the right carousel bound. | n/a |
| dragStart | @Output | Executes when drag start. | n/a |
| dragEnd | @Output | Executes when drag end. | n/a |
| snapAnimationFinished | @Output | The snap animation for the new selection has finished. | n/a |
| indexChanged | @Output | Executes when the current index of the carousel changes. | n/a |
| dsInitialized | @Output | Executes when the drag scroll component has been initialized. | n/a |

___

### DragScrollItemDirective

| Name | Type | Description |Default|
|------------------------|---------|-------------------------------------------------------------------------------|-------|
| drag-disabled | @Input | Whether draging on the item is disabled. | false |

___
### DragScrollComponent

| Name | Type | Description | Default |
| ---------------------- | ------- | -------------------------------------------------------------------- | ------- |
| scrollbar-hidden | @Input | Whether the scroll bar for this element is hidden. | false |
| drag-scroll-disabled | @Input | Whether all draging and scrolling events is disabled. | false |
| drag-scroll-x-disabled | @Input | Whether horizontally dragging and scrolling events is disabled. | false |
| scroll-x-wheel-enabled | @Input | Whether scrolling horizontally with mouse wheel is enabled | false |
| drag-scroll-y-disabled | @Input | Whether vertically dragging and scrolling events is disabled. | false |
| drag-disabled | @Input | Whether draging is disabled. | false |
| snap-disabled | @Input | Whether snapping is disabled. | false |
| snap-offset | @Input | Pixels of previous element to show on snap or moving left and right. | 0 |
| snap-duration | @Input | Duration of snap animation in milliseconds. | 500 |
| reachesLeftBound | @Output | Whether reaching the left carousel bound. | n/a |
| reachesRightBound | @Output | Whether reaching the right carousel bound. | n/a |
| dragStart | @Output | Executes when drag start. | n/a |
| dragEnd | @Output | Executes when drag end. | n/a |
| snapAnimationFinished | @Output | The snap animation for the new selection has finished. | n/a |
| indexChanged | @Output | Executes when the current index of the carousel changes. | n/a |
| dsInitialized | @Output | Executes when the drag scroll component has been initialized. | n/a |

---

### DragScrollItemDirective

| Name | Type | Description | Default |
| ------------- | ------ | ---------------------------------------- | ------- |
| drag-disabled | @Input | Whether draging on the item is disabled. | false |

---

## Add navigation button

```typescript
@Component({
selector: 'sample',
template:`
<drag-scroll #nav>
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
</drag-scroll>
<button (click)="moveLeft()">Left</button>
<button (click)="moveRight()">Right</button>
<button (click)="moveTo(2)">Last</button>
template: `
<drag-scroll #nav>
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
<img drag-scroll-item src="some-url" />
</drag-scroll>
<button (click)="moveLeft()">Left</button>
<button (click)="moveRight()">Right</button>
<button (click)="moveTo(2)">Last</button>
`
})
class Sample {
@ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
@ViewChild('nav', { read: DragScrollComponent }) ds: DragScrollComponent;

moveLeft() {
this.ds.moveLeft();
}
Expand All @@ -171,13 +203,14 @@ class Sample {
}
```


### Contributing

Clone the repository, and run `npm install`, `npm run build ngx-drag-scroll`, `npm start`. The demo app will starts on port :4200. I usually do my development on the demo app.

I'll accept pretty much everything so feel free to open a Pull-Request.
I'll accept pretty much everything so feel free to open a Pull-Request.

We use commitlint for managing our commits. Check out [Contributing](CONTRIBUTING.md) for more details.

# License
[MIT](/LICENSE)

[MIT](/LICENSE)
5 changes: 4 additions & 1 deletion angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,10 @@
}
},
"lint": {
"builder": "@angular-eslint/builder:lint"
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
Expand Down
Loading