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.

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

Allow elements inside tabs to be dragged/scrolled before tabs swipe event is triggered #243

Merged
merged 4 commits into from
Jan 25, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ _(optional)_ Advanced configuration.
Param | Description | Default
--- | --- | ---
`dragThreshold` | The number of pixels that the user must swipe through before the drag event triggers. | `20`
`allowElementScroll` | Allow elements inside tabs to be dragged before triggering the tab swipe event. | `false`
`maxDragAngle` | The maximum angle that the user can drag at for the drag event to trigger. | `40`
`transitionEase` | The transition timing function to use in animations. | `'cubic-bezier(0.35, 0, 0.25, 1)'`
`transitionDuration` | The duration of animations in milliseconds. | `300`
Expand Down
11 changes: 11 additions & 0 deletions src/components/super-tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ export interface SuperTabsConfig {
* Defaults to 20
*/
dragThreshold?: number;
/**
* Allows elements inside tabs to be dragged, defaults to false
*/
allowElementScroll?: boolean;
/**
* Defaults to ease-in-out
*/
Expand Down Expand Up @@ -287,6 +291,7 @@ export class SuperTabs implements OnInit, AfterContentInit, AfterViewInit, OnDes
ngOnInit() {
const defaultConfig: SuperTabsConfig = {
dragThreshold: 10,
allowElementScroll: false,
maxDragAngle: 40,
sideMenuThreshold: 50,
transitionDuration: 300,
Expand All @@ -299,6 +304,12 @@ export class SuperTabs implements OnInit, AfterContentInit, AfterViewInit, OnDes
}

this.config = defaultConfig;

if(this.config.allowElementScroll === true){
if(this.config.dragThreshold < 110){
this.config.dragThreshold = 110;
}
}

this.id = this.id || `super-tabs-${++superTabsIds}`;
this.superTabsCtrl.registerInstance(this);
Expand Down
6 changes: 4 additions & 2 deletions src/super-tabs-pan-gesture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,10 @@ export class SuperTabsPanGesture {
}

// stop anything else from capturing these events, to make sure the content doesn't slide
ev.stopPropagation();
ev.preventDefault();
if(this.config.allowElementScroll !== true){
ev.stopPropagation();
ev.preventDefault();
}

// get delta X
const deltaX: number = this.lastPosX - coords.x;
Expand Down