-
-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(viewport): added new Viewport module
viewport helps to check if an element is in viewport or not
- Loading branch information
Showing
26 changed files
with
1,128 additions
and
225 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
38 changes: 38 additions & 0 deletions
38
libs/experiments/src/lib/containers/viewport/viewport.component.html
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,38 @@ | ||
<div class="static-header"> | ||
<h2>Scroll to load more images</h2> | ||
<p> | ||
Total images displayed: <strong>{{ totalImagesShown }}</strong> | ||
</p> | ||
<small>Picture courtesy: <a href="https://unsplash.com/">Unsplash</a></small> | ||
</div> | ||
<div class="images"> | ||
<div | ||
class="image-container" | ||
*ngFor="let image of imageItemCollection" | ||
[oneTime]="true" | ||
(inViewport)="show($event, image)" | ||
> | ||
<ng-container *ngIf="image.show"> <img name="beautiful-image" src="{{ image.url }}" /> </ng-container> | ||
</div> | ||
</div> | ||
<!-- Animation demo --> | ||
<div> | ||
<div class="images"> | ||
<img | ||
(inViewport)="anim($event, 'cowboy')" | ||
src="https://d33wubrfki0l68.cloudfront.net/87e1bf9b49ec8a0ae7b343fce4f95fba32eb2cf8/0a3e5/images/cowboy.svg" | ||
width="275" | ||
height="275" | ||
class="animate-me cowboy" | ||
/> | ||
</div> | ||
<div class="images"> | ||
<img | ||
(inViewport)="anim($event, 'chef')" | ||
src="https://d33wubrfki0l68.cloudfront.net/185c274053d2803726663cad3aac7245f90aa3fe/7df55/images/chef.svg" | ||
width="275" | ||
height="275" | ||
class="animate-me chef" | ||
/> | ||
</div> | ||
</div> |
59 changes: 59 additions & 0 deletions
59
libs/experiments/src/lib/containers/viewport/viewport.component.scss
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,59 @@ | ||
a { | ||
text-decoration: none; | ||
} | ||
|
||
.static-header { | ||
position: fixed; | ||
z-index: 1000; | ||
background: #eee; | ||
text-align: center; | ||
width: 100%; | ||
|
||
padding: 10px; | ||
} | ||
|
||
.images { | ||
padding-top: 110px; | ||
left: 0; | ||
right: 0; | ||
text-align: center; | ||
} | ||
|
||
.images img { | ||
max-width: 500px; | ||
} | ||
|
||
.images .image-container, .images img { | ||
height: 350px; | ||
} | ||
|
||
// animation demo | ||
|
||
.cowboy.fancy { | ||
animation: anim1 .7s ease-out; | ||
} | ||
.chef.fancy { | ||
animation: anim2 .7s ease-out; | ||
} | ||
|
||
@keyframes anim1 { | ||
0% { | ||
opacity: 0; | ||
transform: translateX(-30rem) rotate(-45deg); | ||
} | ||
100% { | ||
opacity: 1; | ||
transform: scale(1) rotate(0deg); | ||
} | ||
} | ||
|
||
@keyframes anim2 { | ||
0% { | ||
opacity: 0; | ||
transform: translateX(30rem) rotate(45deg); | ||
} | ||
100% { | ||
opacity: 1; | ||
transform: scale(1) rotate(0deg); | ||
} | ||
} |
99 changes: 99 additions & 0 deletions
99
libs/experiments/src/lib/containers/viewport/viewport.component.ts
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,99 @@ | ||
import { Component, OnInit } from '@angular/core'; | ||
|
||
interface ImageItem { | ||
id: number; | ||
url: string; | ||
show: boolean; | ||
} | ||
@Component({ | ||
selector: 'ngx-viewport', | ||
templateUrl: './viewport.component.html', | ||
styleUrls: ['./viewport.component.scss'], | ||
}) | ||
export class ViewportComponent implements OnInit { | ||
// prettier-ignore | ||
// tslint:disable:max-line-length | ||
imageItemCollection: ImageItem[] = [ | ||
{ | ||
id: 1, | ||
url: 'https://images.unsplash.com/photo-1512672378591-74fbb56b1d28?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=111881731843c98860fd6ede341337d7&auto=format&fit=crop&w=1350&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 2, | ||
url: 'https://images.unsplash.com/photo-1486495939893-f384c2860f55?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bf36a4694839666ab094bcdd0bb88651&auto=format&fit=crop&w=1350&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 3, | ||
url: 'https://images.unsplash.com/photo-1514913274516-4aa04f176f8c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6940b0c53d64fc564bed31bb6aa8d9b&auto=format&fit=crop&w=1760&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 4, | ||
url: 'https://images.unsplash.com/photo-1523286877159-d9636545890c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f44497f72d77b9e8e27e87521e025edc&auto=format&fit=crop&w=1351&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 5, | ||
url: 'https://images.unsplash.com/photo-1459886757952-87e191b82aeb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6c977d9f0c074c220a31f1e89449c3aa&auto=format&fit=crop&w=1350&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 6, | ||
url: 'https://images.unsplash.com/photo-1519423961530-9131478718db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e6132d79c5060ba00caa99cf39457da6&auto=format&fit=crop&w=1350&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 7, | ||
url: 'https://images.unsplash.com/photo-1482510356941-d087154c2931?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cd6c067c548407960ec92f1e820775ee&auto=format&fit=crop&w=1355&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 8, | ||
url: 'https://images.unsplash.com/photo-1520507215037-061ed0f37178?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0b0ee4f4dcd684859da448cc26c707a2&auto=format&fit=crop&w=1350&q=80', | ||
show: false, | ||
}, | ||
{ | ||
id: 9, | ||
url: 'https://images.unsplash.com/photo-1522447984233-657d56c465d8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b2efa4e73b38094995897590487ba5b4&auto=format&fit=crop&w=1350&q=80', | ||
show: false, | ||
}, | ||
]; | ||
|
||
constructor() {} | ||
|
||
ngOnInit() {} | ||
|
||
get totalImagesShown(): number { | ||
return (this.imageItemCollection.filter(imageItem => imageItem.show) || []).length; | ||
} | ||
|
||
show(event: Partial<IntersectionObserverEntry>, image: ImageItem) { | ||
if (event.intersectionRatio >= 0.5) { | ||
image.show = true; | ||
console.log( | ||
`in-view ==> image: ${image.id}, intersectionRatio: ${event.intersectionRatio}, isIntersecting: ${ | ||
event.isIntersecting | ||
}`, | ||
); | ||
} else { | ||
console.log( | ||
`out-of-view <== image: ${image.id}, intersectionRatio: ${event.intersectionRatio}, isIntersecting: ${ | ||
event.isIntersecting | ||
}`, | ||
); | ||
} | ||
} | ||
|
||
anim(event: Partial<IntersectionObserverEntry>, element: string) { | ||
console.log( | ||
`anim: ${element} intersectionRatio: ${event.intersectionRatio}, isIntersecting: ${event.isIntersecting}`, | ||
); | ||
if (event.intersectionRatio >= 0.5) { | ||
event.target.classList.add('fancy'); | ||
} else { | ||
event.target.classList.remove('fancy'); | ||
} | ||
} | ||
} |
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
Oops, something went wrong.