@eutrepe/is-in-viewport
Directive for Angular 8 based on Intersection observe to detect element in viewport
Last updated a year ago by eutrepe .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @eutrepe/is-in-viewport 
SYNC missed versions from official npm registry.

NgxEutrepeIsInViewport

  • Directive for Angular 8 based on Intersection observe to detect element in viewport.

Installation

npm i --save @eutrepe/is-in-viewport@8

You also need polyfill

npm i --save intersection-observer

and add this in your src/polyfills.ts file

import 'intersection-observer';

Usage

1) Register the NgxEutrepeIsInViewportModule in your app module.

import { NgxEutrepeIsInViewportModule } from '@eutrepe/is-in-viewport'

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { NgxEutrepeIsInViewportModule } from '@eutrepe/is-in-viewport';
import { WINDOW_IN_VIEWPORT } from '@eutrepe/is-in-viewport';

@NgModule({
    declarations: [
      AppComponent
    ],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        NgxEutrepeIsInViewportModule
    ],
     providers: [
      {provide: WINDOW_IN_VIEWPORT, useValue: window},
    ],
    bootstrap: [ AppComponent ],
    exports: []
})
export class AppModule { }



2) Use the directive (ngxEutrepeIsInViewport)

If element is visible in viewport the directive add in-viewport class to the element or custom class

Basic

<section class="section1" ngxEutrepeIsInViewport>
 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, facere.</p>
</section>

Advanced

<section class="section1"
   [ngxEutrepeIsInViewport]="{threshold: [0, 0.5, 1]}"
   [eutrepeOnActiveCallback]="onActive.bind(this)"
   [eutrepeOnUnactiveCallback]="onUnactive.bind(this)"
   [eutrepeOnActiveCallbackParams]="['some_text', 1, true]"
   [eutrepeOnUnactiveCallbackParams]="[100, false]"
   [eutrepeInvokeOnce]="false"
   [eutrepeActiveClass]="'my-class'"
   (eutrepeViewportChange)="onChanage($event)"
   >
 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, facere.</p>
</section>

<!-- Use .bind(this) for callbacks if you want use scoped variables -->

API

Directive:

Input Type Required Description
[ngxEutrepeIsInViewport] IIntersectionConfig YES , default Intersection Observe configuration* Run the plugin with user configuration or default configuration
[eutrepeInvokeOnce] boolean Optional, default: true If true directive invoke just once
[eutrepeOnActiveCallback] Function Optional, default: null The function is started when element is in viewport
[eutrepeOnUnactiveCallback] Function Optional, default: null The function is started when element is out viewport
[eutrepeOnActiveCallbackParams] Array Optional, default: [] Array of custom argumments for onActive callback
[eutrepeOnUnactiveCallbackParams] Array Optional, default: [] Array of custom argumments for onUnactive callback
[eutrepeActiveClass] string Optional, default: 'in-viewport' Custom class for visible element

*Intersection Observe: developer.mozilla.org


Intersection Observe default config:

const defaultConfig: IIntersectionConfig = {
    root      : null,
    rootMargin: '0px 0px -30%',
    threshold : [0]
  }

Interfaces

eutrepeViewportChange event:

export interface IIntersectionConfig  {
  root?: HTMLElement;
  rootMargin?: string;
  threshold?: Array<number>
}

ngxEutrepeIsInViewport config:

export interface IViewportEvent  {
  el: HTMLElement;
  status: boolean;
}

Current Tags

  • 8.1.0                                ...           latest (a year ago)

7 Versions

  • 8.1.0                                ...           a year ago
  • 8.0.0                                ...           a year ago
  • 4.1.3                                ...           a year ago
  • 4.1.2                                ...           a year ago
  • 4.1.1                                ...           a year ago
  • 4.1.0                                ...           a year ago
  • 4.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |