import { Component, ViewEncapsulation, Renderer2 } from '@angular/core';
@Component({
selector: 'in-vp-example',
encapsulation: ViewEncapsulation.None,
template: `
<main>
<section>
<div *ngFor="let item of items" class="item"
in-viewport
[inViewportOptions]="{ partial: true }"
(inViewportAction)="action($event)">
{{ item }}
</div>
</section>
<section #secondSection>
<div *ngFor="let item of items" class="item"
in-viewport
[inViewportOptions]="{ rootElement: secondSection, partial: true }"
(inViewportAction)="action($event)">
{{ item }}
</div>
</section>
</main>
`,
styles: [`
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
main {
width: 100%;
min-height: 100vh;
margin: 0 auto;
padding: 10px;
display: flex;
flex-flow: row nowrap;
background-color: #f4f4f4;
}
section {
margin: 0;
padding: 10px;
display: block;
flex: 1 0 auto;
border: 1px solid #bdbdbd;
}
section:not(:first-of-type) {
margin-left: 10px;
}
section:nth-of-type(2) {
height: 80vh;
overflow: auto;
}
.item {
width: 100%;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #cccccc;
font-size: 2em;
font-weight: bold;
color: #ffffff;
transition: background-color 250ms linear;
}
.item:not(:first-child) {
margin-top: 10px;
}
.item.active {
background-color: #00a42f;
}
`]
})
export class InVpExampleComponent {
items: number[];
constructor(private renderer: Renderer2) {
this.items = Array(100).fill(void 0).map((v, i) => (i + 1));
}
action(event) {
if (event.value) {
this.renderer.addClass(event.target, 'active');
this.renderer.removeClass(event.target, 'inactive');
} else {
this.renderer.addClass(event.target, 'inactive');
this.renderer.removeClass(event.target, 'active');
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InViewportModule } from 'ng-in-viewport';
import { InVpExampleComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
InViewportModule.forRoot()
],
declarations: [ InVpExampleComponent ],
bootstrap: [ InVpExampleComponent ]
})
export class InVpExampleAppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { InVpExampleAppModule } from './app/app.module';
import 'intersection-observer';
platformBrowserDynamic().bootstrapModule(InVpExampleAppModule);
<!DOCTYPE html>
<html>
<head>
<title>NgInViewport Example</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {color:#369;font-family: Arial,Helvetica,sans-serif;}
</style>
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<in-vp-example>Loading NgInViewport example...</in-vp-example>
</body>
</html>
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'app': 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'intersection-observer': 'npm:intersection-observer@0.2.1/intersection-observer.js',
'ng-in-viewport': 'npm:ng-in-viewport@1.2.0/index.js',
'rxjs': 'npm:rxjs@5.0.1',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
'intersection-observer': {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load){
var url = document.createElement('a');
url.href = load.address;
var basePathParts = url.pathname.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
var baseHref = document.createElement('a');
baseHref.href = this.baseURL;
baseHref = baseHref.pathname;
basePath = basePath.replace(baseHref, '');
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url){
let resolvedUrl = url;
if (url.startsWith('.')) {
resolvedUrl = basePath + url.substr(1);
}
return 'templateUrl: "' + resolvedUrl + '"';
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith('.')) {
urls.push('"' + basePath + match[2].substr(1) + '"');
} else {
urls.push('"' + match[2] + '"');
}
}
return "styleUrls: [" + urls.join(', ') + "]";
});
return load;
};