intersection_observer 1.0.0

  • README.md
  • Example
  • Installing
  • Versions
  • 0

intersection_observer

A Dart wrapper for the Intersection Observer API

example/main.dart

import 'dart:html';
import "package:js/js.dart";
import 'package:intersection_observer/intersection_observer.dart' as io;

void main() {
  Element output = querySelector('#output');
  var blocks = querySelectorAll('.block');
  for (var b in blocks) {
    b.setAttribute('intersecting','false');
  }
  io.IntersectionObserverCallback callback = (List<io.IntersectionObserverEntry> entries,
      io.IntersectionObserver observer) {
    entries.forEach((io.IntersectionObserverEntry entry) {
      entry.target.setAttribute('intersecting', entry.isIntersecting.toString());

      // print('''
      // boundingClientRect: ${entry.boundingClientRect}
      // intersectionRatio: ${entry.intersectionRatio}
      // intersectionRect: ${entry.intersectionRect}
      // isIntersecting: ${entry.isIntersecting}
      // rootBounds: ${entry.rootBounds}
      // target: ${entry.target}
      // time: ${entry.time}

      // observer.root ${observer.root}
      // observer.rootMargin ${observer.rootMargin}
      // observer.thresholds ${observer.thresholds}
      
      // ''');
    });
    var redInView = blocks.where((Element el) => el.getAttribute('intersecting') == 'true' && el.classes.contains('red')).length;
    var greenInView = blocks.where((Element el) => el.getAttribute('intersecting') == 'true' && el.classes.contains('green')).length;
    output.innerHtml = '${redInView} red blocks in view <br> ${greenInView} green blocks in view';
  };
  io.IntersectionObserver observer = new io.IntersectionObserver(callback);
  querySelectorAll('.block').forEach((Element el) {
    observer.observe(el);
  });
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  intersection_observer: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:intersection_observer/intersection_observer.dart';
  
Version Uploaded Documentation Archive
1.0.0 Oct 27, 2017 Go to the documentation of intersection_observer 1.0.0 Download intersection_observer 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
0
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.22.1 <2.0.0