-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
feat(affix) #339
Closed
Closed
feat(affix) #339
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
cd47d37
feat(affix): Affix Directive with offsetTop
Nolanus b4d4113
fix(affix): Fix "Fallthrough case in switch." compilation error
Nolanus 6ea4b48
docs(affix): adjust documentation and example, add to demo page menu
Nolanus 24a625a
refactor(positionService): Update return type of position helper func…
Nolanus 848311c
feat(affix): add affix-bottom support
Nolanus 2e6b0b8
docs(affix): Mention offsetBottom support in documentation
Nolanus 777ab96
docs(affix): Add affix example to demo app
Nolanus 203381f
Merge branch 'master' of https://github.com/valor-software/ng2-bootst…
Nolanus File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export {Affix} from './affix/affix.directive'; | ||
export {AffixStatus} from './affix/affix.directive' | ||
export {AffixStatusChange} from './affix/affix.directive' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,174 @@ | ||
import {Directive, OnInit, Input, Output, EventEmitter, ElementRef, OnDestroy, HostBinding} from 'angular2/core'; | ||
import {positionService, ElemPosition} from '../position'; | ||
|
||
export enum AffixStatus {AFFIX, AFFIX_TOP, AFFIX_BOTTOM} | ||
|
||
export class AffixStatusChange { | ||
constructor(public oldStatus:AffixStatus, public newStatus:AffixStatus) { | ||
} | ||
} | ||
|
||
@Directive({ | ||
selector: '[affix]' | ||
}) | ||
export class Affix implements OnInit, OnDestroy { | ||
|
||
@Input() | ||
public affixOffsetTop:number = 0; | ||
@Input() | ||
public affixOffsetBottom:number = 0; | ||
|
||
@HostBinding('class.affix') | ||
private isAffix:boolean = true; | ||
@HostBinding('class.affix-top') | ||
private isAffixedTop:boolean = true; | ||
@HostBinding('class.affix-bottom') | ||
private isAffixedBottom:boolean = true; | ||
@HostBinding('style.top.px') | ||
private top:number = null; | ||
|
||
@Output() | ||
public affixChange:EventEmitter<AffixStatusChange> = new EventEmitter(false); | ||
|
||
private status:AffixStatus = null; | ||
private body:HTMLBodyElement; | ||
private window:Window; | ||
private pinnedOffset:number = null; | ||
private debouncedCheckPosition:Function = Affix.debounce(() => this.checkPosition(), 5); | ||
private eventListener:Function = (ev:UIEvent) => this.debouncedCheckPosition(); | ||
|
||
constructor(private el:ElementRef) { | ||
this.body = el.nativeElement.ownerDocument.body; | ||
this.window = el.nativeElement.ownerDocument.defaultView; | ||
} | ||
|
||
ngOnInit() { | ||
this.el.nativeElement.ownerDocument.defaultView.addEventListener('scroll', this.eventListener); | ||
this.checkPosition(); | ||
} | ||
|
||
ngOnDestroy():any { | ||
this.el.nativeElement.ownerDocument.defaultView.removeEventListener('scroll', this.eventListener); | ||
return undefined; | ||
} | ||
|
||
private checkPosition():void { | ||
let elemPos = positionService.position(this.el.nativeElement); | ||
if (elemPos.height === 0 || elemPos.width === 0) { | ||
// Element is not visible | ||
return; | ||
} | ||
let scrollHeight:number = Math.max(this.window.innerHeight, this.body.scrollHeight); | ||
let nativeElemPos:ElemPosition = positionService.offset(this.el.nativeElement); | ||
|
||
let newAffixStatus:AffixStatus = this.getState(scrollHeight, nativeElemPos, this.affixOffsetTop, this.affixOffsetBottom); | ||
|
||
if (this.status !== newAffixStatus) { | ||
|
||
this.top = newAffixStatus === AffixStatus.AFFIX_BOTTOM ? this.getPinnedOffset() : null; | ||
|
||
this.affixChange.emit(new AffixStatusChange(this.status, newAffixStatus)); | ||
this.status = newAffixStatus; | ||
this.isAffix = false; | ||
this.isAffixedBottom = false; | ||
this.isAffixedTop = false; | ||
switch (this.status) { | ||
case AffixStatus.AFFIX_TOP: | ||
this.isAffixedTop = true; | ||
break; | ||
case AffixStatus.AFFIX_BOTTOM: | ||
this.isAffixedBottom = true; | ||
break; | ||
default: | ||
this.isAffix = true; | ||
break; | ||
} | ||
} | ||
|
||
if (newAffixStatus === AffixStatus.AFFIX_BOTTOM) { | ||
this.top = scrollHeight - nativeElemPos.height - this.affixOffsetBottom; | ||
} | ||
} | ||
|
||
private getState(scrollHeight:number, nativeElemPos:ElemPosition, offsetTop:number, offsetBottom:number):AffixStatus { | ||
let scrollTop:number = this.body.scrollTop; // current scroll position in pixels from top | ||
let targetHeight:number = this.window.innerHeight; // Height of the window / viewport area | ||
|
||
if (offsetTop !== null && this.status === AffixStatus.AFFIX_TOP) { | ||
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as off-topic.
Sorry, something went wrong. |
||
if (scrollTop < offsetTop) { | ||
return AffixStatus.AFFIX_TOP; | ||
} | ||
return AffixStatus.AFFIX; | ||
} | ||
|
||
if (this.status === AffixStatus.AFFIX_BOTTOM) { | ||
if (offsetTop !== null) { | ||
if (scrollTop + this.pinnedOffset <= nativeElemPos.top) { | ||
return AffixStatus.AFFIX; | ||
} | ||
return AffixStatus.AFFIX_BOTTOM; | ||
} | ||
if (scrollTop + targetHeight <= scrollHeight - offsetBottom) { | ||
return AffixStatus.AFFIX; | ||
} | ||
return AffixStatus.AFFIX_BOTTOM; | ||
} | ||
|
||
if (offsetTop != null && scrollTop <= offsetTop) { | ||
return AffixStatus.AFFIX_TOP; | ||
} | ||
|
||
let initializing:boolean = this.status === null; | ||
let lowerEdgePosition:number = initializing ? scrollTop + targetHeight : nativeElemPos.top + nativeElemPos.height; | ||
if (offsetBottom != null && (lowerEdgePosition >= scrollHeight - offsetBottom)) { | ||
return AffixStatus.AFFIX_BOTTOM; | ||
} | ||
|
||
return AffixStatus.AFFIX; | ||
} | ||
|
||
private getPinnedOffset():number { | ||
if (this.pinnedOffset !== null) { | ||
return this.pinnedOffset; | ||
} | ||
let scrollTop:number = this.body.scrollTop; | ||
let position:ElemPosition = positionService.offset(this.el.nativeElement); | ||
|
||
this.pinnedOffset = position.top - scrollTop; | ||
return this.pinnedOffset; | ||
} | ||
|
||
private static debounce(func:Function, wait:number):Function { | ||
let timeout:any; | ||
let args:Array<any>; | ||
let timestamp:number; | ||
|
||
return function () { | ||
// save details of latest call | ||
args = [].slice.call(arguments, 0); | ||
timestamp = Date.now(); | ||
|
||
// this is where the magic happens | ||
let later = function () { | ||
|
||
// how long ago was the last call | ||
let last = Date.now() - timestamp; | ||
|
||
// if the latest call was less that the wait period ago | ||
// then we reset the timeout to wait for the difference | ||
if (last < wait) { | ||
timeout = setTimeout(later, wait - last); | ||
// or if not we can null out the timer and run the latest | ||
} else { | ||
timeout = null; | ||
func.apply(this, args); | ||
} | ||
}; | ||
|
||
// we only need to set the timer now if one isn't already running | ||
if (!timeout) { | ||
timeout = setTimeout(later, wait); | ||
} | ||
}; | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
### Usage | ||
```typescript | ||
import { Affix } from 'ng2-bootstrap/ng2-bootstrap'; | ||
``` | ||
|
||
### Annotations | ||
```typescript | ||
// class Affix | ||
|
||
@Directive({ | ||
selector: '[affix]' | ||
}) | ||
export class Affix implements OnInit, OnDestroy { | ||
|
||
@Input() | ||
public affixOffsetTop:number = 0; | ||
@Input() | ||
public affixOffsetBottom:number = 0; | ||
|
||
@Output() | ||
public affixChange:EventEmitter<AffixStatusChange> = new EventEmitter(false); | ||
} | ||
``` | ||
|
||
### Alert properties | ||
- `affixOffsetTop` (`?:number=0`) - Pixels to offset from document top when calculating position of scroll. | ||
- `affixOffsetBottom` (`?:number=0`) - Pixels to offset from document bottom when calculating position of scroll. | ||
|
||
### Affix events | ||
- `affixChange` - fired when the affix state changes. `$event` is an instance of `AffixStatusChange` class, having two properties `oldStatus` and `newStatus`. | ||
|
||
### CSS Positioning | ||
The affix directive toggles between three css-classes `affix`, `affix-top` and `affix-bottom` based on the current scrolling position in the document. In case of `affix-bottom` the CSS property `top` is set, however, additional theme-related positioning is required for expected usage. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
An example of the affix component can be seen on this page. The navigation bar at the top of the page uses the affix directive to switch between the affix-state ("fixed to top") and affix-top-state ("below purple header"). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import {Component} from 'angular2/core'; | ||
import {CORE_DIRECTIVES} from 'angular2/common'; | ||
|
||
import {TAB_DIRECTIVES} from '../../ng2-bootstrap'; | ||
import {AffixDemo} from './affix/affix-demo'; | ||
|
||
let name = 'Affix'; | ||
let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/affix/'; | ||
|
||
// webpack html imports | ||
let doc = require('../../components/affix/readme.md'); | ||
let titleDoc = require('../../components/affix/title.md'); | ||
|
||
let ts = require('!!prismjs?lang=typescript!./affix/affix-demo.ts'); | ||
let html = require('!!prismjs?lang=markup!./affix/affix-demo.html'); | ||
|
||
@Component({ | ||
selector: 'affix-section', | ||
template: ` | ||
<section id="${name.toLowerCase()}"> | ||
<h1>${name}<small>(<a href="${src}">src</a>)</small></h1> | ||
|
||
<hr> | ||
|
||
<div class="description">${titleDoc}</div> | ||
|
||
<br/> | ||
|
||
<div class="markup"> | ||
<tabset> | ||
<tab heading="Markup"> | ||
<div class="card card-block panel panel-default panel-body"> | ||
<pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre> | ||
</div> | ||
</tab> | ||
<tab heading="TypeScript"> | ||
<div class="card card-block panel panel-default panel-body"> | ||
<pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre> | ||
</div> | ||
</tab> | ||
</tabset> | ||
</div> | ||
|
||
<br/> | ||
|
||
<div class="api"> | ||
<h2>API</h2> | ||
<div class="card card-block panel panel-default panel-body">${doc}</div> | ||
</div> | ||
</section> | ||
`, | ||
directives: [AffixDemo, TAB_DIRECTIVES, CORE_DIRECTIVES] | ||
}) | ||
export class AffixSection { | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<nav id="mainNav" class="navbar navbar-default" affix affixOffsetTop="100" (affixChange)="onAffixChange($event)"> [...] </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import {Component} from 'angular2/core'; | ||
import {CORE_DIRECTIVES} from 'angular2/common'; | ||
import {Affix, AffixStatusChange} from '../../../ng2-bootstrap'; | ||
|
||
// webpack html imports | ||
let template = require('./affix-demo.html'); | ||
|
||
@Component({ | ||
selector: 'affix-demo', | ||
template: template, | ||
directives: [Affix, CORE_DIRECTIVES] | ||
}) | ||
export class AffixDemo { | ||
|
||
onAffixChange(event:AffixStatusChange) { | ||
console.log('Navbar changed from ' + event.oldStatus + ' to ' + event.newStatus); | ||
} | ||
|
||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This comment was marked as off-topic.
Sorry, something went wrong.