https://github.com/mjancarik/infinite-circle

The utility for synchronising writing operation in browser.
https://github.com/mjancarik/infinite-circle

Last synced: 6 months ago
JSON representation

The utility for synchronising writing operation in browser.

• Host: GitHub
• URL: https://github.com/mjancarik/infinite-circle
• Owner: mjancarik
• Created: 2018-05-14T15:27:09.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-01-12T16:38:11.000Z (over 3 years ago)
• Last Synced: 2025-02-10T13:22:08.549Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 32.2 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# infinite-circle

[![Build Status](https://travis-ci.org/mjancarik/infinite-circle.svg?branch=master)](https://travis-ci.org/mjancarik/infinite-circle) [![dependencies Status](https://david-dm.org/mjancarik/infinite-circle/status.svg)](https://david-dm.org/mjancarik/infinite-circle)

[![Coverage Status](https://coveralls.io/repos/github/mjancarik/infinite-circle/badge.svg?branch=master)](https://coveralls.io/github/mjancarik/infinite-circle?branch=master)

[![NPM package version](https://img.shields.io/npm/v/infinite-circle/latest.svg)](https://www.npmjs.com/package/infinite-circle)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

The utility for synchronising reading and writing operation in browser. The infinite is a smart and automatic on and off loop for saving resources. It's use full for reading a writing operation on DOM which may normally cause layout thrashing.

## Installation

```

npm i infinite-circle --save

```

## Usage

```javascript

import { Circle, Infinite } from 'infinite-circle';

// defined action which cause running read and write operation

let visibilityCircle = new Circle({

    listen: notify => {

        window.addEventListener('scroll', notify);

        window.addEventListener('resize', notify);

    },

    unlisten: notify => {

        window.removeEventListener('scroll', notify);

        window.removeEventListener('resize', notify);

    }

});

// defined read and write operation

const img1 = document.querySelector('.img1');

let img1CircleId = visibilityCircle.register({

    read: () => {

        let rect = img1.getBoundingClientRect();

        return intersectionPercentage(rect);

    },

    write({ payload }) => {

        if (payload > 0) {

            loadImage(img1);

            visibilityCircle.unregister(img1CircleId);

        }

    }

});

// register more elements

// register circle to synchronising infinite loop

let infinite = new Infinite();

infinite.add(visibilityCircle);

// other functions

function intersectionPercentage(rect) {

    .

    .

    .

    return percent;

}

function loadImage(imageElement) {

    .

    .

    .

}

```