open-index/open-npm huggingface dataset:
npm package: @loadingio/ldpage
Description: Pagination library
Author: zbryikt
Latest version: 0.0.4

# ldpage

Pagination library.


# Usage

```
    mypal = new ldpage do
      fetch: ->
        ld$.fetch '...' , {}, {type: \json}
          .then -> return it
```

you can process fetched data directly in the fetch function:

```
    mypal = new ldpage do
      fetch: ->
        ld$.fetch '...' , {}, {type: \json}
          .then ->
            render(it)
            return it
```

see src/sample.ls.


## Configuration

 * host - scrolling host. for entire document, use `window`.
 * fetch-on-scroll - should ldpage fetch data when scrolling to the bottom of the host. default false.
 * fetch - custom function to fetch data according to ldpage's status.
   - use this.limit and this.offset to control the current position of fetch progress.
   - should return the list fetched for ldpage to count progress.
 * fetch-delay - delay before fetching when fetch is called.
 * enabled - default true. set to false to disable fetching by default until explicitly enabled with toggle(v),
 * boundary - default 0. if fetch-on-scroll, fetch is triggered only if remaining space for scrolling is smaller than `boundary`. larger `boundary` makes fetch triggered earlier.


## Method

 * reset(opt) - reset page. opt:
   - data - data for use in this bunch of fetch.
 * init(opt) - reset page. deprecated. ( use reset instead )
 * fetch - fetch data again.
 * isEnd - is there anything to fetch.
 * setHost(node) - set scrolling host. for entire document, use `window`.
 * toggle(v) - flip enabled/disabled statue. force set to v if v(true or false) is provided.


## Events

 * empty - fired when ldpage confirms that the list is empty.
 * finish - fired when ldpage confirms that all items are fetched.
 * fetch - fired when ldpage fetch a new list of data
 * scroll.fetch - fired when ldpage fetch a new list of data triggered by scrolling. can happen along with `fetch` event.
 * fetching - fired before fetch is called.

# License

MIT.
npm package: @loadingio/loading-bar
Description:  ====== Progress Bar Library by loading.io ====== 
Author: tkirby
Latest version: 0.1.1

loading-Bar
=============

loading-Bar is a highly flexible, open sourced progress bar library based on SVG. For demo and documentation, check out the official website: [https://loading.io/progress/](https://loading.io/progress/)



Example
=============

![progress bar sample](https://raw.githubusercontent.com/loadingio/loading-bar/master/img/sample.gif)



Usage
=============

download and include the required [JS](https://raw.githubusercontent.com/loadingio/loading-bar/master/dist/loading-bar.js) and [CSS](https://raw.githubusercontent.com/loadingio/loading-bar/master/dist/loading-bar.css) files:

    <link rel="stylesheet" type="text/css" href="loading-bar.css"/>
    <script type="text/javascript" src="loading-bar.js"><script>
    <div class="ldBar"></div>


Building
=============

### Install prerequisites

```
sudo npm install -g gulp
```

### Build

```
git clone https://github.com/loadingio/loading-bar
cd loading-bar
npm install
gulp
```

Built files will be written into `./build` directory


LICENSE
=============

MIT License
npm package: @loadingio/loading.css
Description: 60+ handcrafted css animation dedicated for repeatable, infinitely playing.
Author: zbryikt
Latest version: 3.2.1

# loading.css

![loading.css preview](https://github.com/loadingio/loading.css/blob/master/preview.gif?raw=true)

60+ Handcrafted CSS animations that are seamless repeatable. All animations in loading.css are designed for both one time and infinitely played. Online demo could be found [here (Loading.css - 50+ Seamless Repeatable CSS Animation · Loading.io ).](https://loading.io/animation/)

Loading.css is used in building GIF, APNG and animated SVG in loading.io. Check following links to see how it works:

 * [GIF / SVG Animation Generator from Any Image](https://loading.io/animation/icon/) - upload your own image and generate GIF or APNG images with transition.css and loading.css.
 * [Loading.io Animated Icons Library](https://loading.io/icon/) - Customizable, animatable Loading.io's icon library powered by loading.css and transition.css.
 * [Loading Patterns](https://loading.io/pattern/) - Customizable, animatable Loading.io's pattern library powered by loading.css and transition.css.
 * [Animated Text Generator](https://loading.io/animation/text/) - convert your text into GIF / SVG animations.

You can find more about animation generation in [loading.io](https://loading.io/).


## Usage

1. download and include [loading.css](https://raw.githubusercontent.com/loadingio/loading.css/v2.0.0/dist/loading.min.css):

```
    <link rel="stylesheet" type="text/css" href="loading.css"/>
```

you an use a CDN, such as, from jsDelivr:

```
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/loadingio/loading.css@v2.0.0/dist/loading.min.css"/>
```



2. Check the [loading.css animation gallery](https://loading.io/animation/) for the animations you want to use. For example, say you want to use the `spin` animation 

3. Use the name as a CSS class prefixed with `ld` on the element you want to animate:

```
    <div class="ld ld-spin"></div>
```

4. For more information, check out [loading.css animation documentation](https://loading.io/animation/).


## Notice

Animations involving fliping ( e.g., rotateX, rotateY, rotateZ ) cause blinking glitches in Safari ( up to version 15.1 ). It's not a loading.css bug but a browser issue which is not yet solved.

A simple workaround is to wrap animated elements within a container with following style:

    transform: translate3d(0,0,0)

However this creates a stacking context and may not work well with fixed positioned elements.


## LICENSE

MIT License
npm package: @loadingio/polling
Description: tiny polling library
Author: zbryikt
Latest version: 0.0.2

# polling.js

Promise based, vanilla JS polling library. Features:

 - Implemented via setTimeout
 - Polling paused when page is not visible ( checked with page visibility api )
 - Promise based ( resolved when polling ends. )
 - Object-aware, can be used in object member function.


## Usage


install via npm:

    npm install --save @loadingio/polling

or include directly the dist file:

    <script src="path/to/polling/index.js"></script>

To periodically invoke a function with certain interval(in millisecond): `polling(function, interval)()` or `polling(interval, function)()`

example:

    poll = polling(function() { console.log("print every 2 seconds."); }, 2000)
    poll();

Return true in your function to stop the polling, which will be used to resolve the pending promise:

    polling(function() {
      if(Math.random() > 0.9) { return "hit!"; }
    }, 1000)()
    .then(function(msg) {
      console.log("message: ", msg);
    })


You can also force it to stop by calling "stop" on the returned object directly:

    var poll = polling(f, 1000);
    poll();
    poll.stop();


It also works as a member function of object:

    var myobj = {
      poll: polling(function() {
        if(this.data == true) {
          return true;
        } else {
          console.log("polling");
        }
        return false;
      },
      data: false
    };
    myobj.poll();


## License

MIT
npm package: @loadingio/svgtool
Description: svg tools
Author: zbryikt
Latest version: 0.0.1

# @loadingio/svgtool

this repo is expected to provide common svg tools. Currently in its early stage so everything will be unstable.


## Reference

There are already libraries doing similar things:

 - https://github.com/stadline/svg-flatten
 - https://github.com/thednp/svg-path-commander
 - https://github.com/paperjs/paper.js


## License

MIT
npm package: @loadingio/transition.css
Description: handcrafted css animation dedicated for transitional effect.
Author: zbryikt
Latest version: 3.0.0

# transition.css

![transition.css preview](https://github.com/loadingio/transition.css/blob/master/preview.gif?raw=true)

60+ Handcrafted CSS animations dedicated for transitional effect. Online demo could be found here: [transition.css](https://loading.io/transition/)

Transition.css also plays a core part in loading.io online animation generation service. You can find some examples here:
 * [GIF / SVG Animation Generator from Any Image](https://loading.io/animation/icon/) - upload your own image and generate GIF or APNG images with transition.css and loading.css.
 * [Loading.io Animated Icons Library](https://loading.io/icon/) - Customizable, animatable Loading.io's icon library powered by loading.css and transition.css.
 * [Loading Patterns](https://loading.io/pattern/) - Customizable, animatable Loading.io's pattern library powered by loading.css and transition.css.
 * [Animated Text Generator](https://loading.io/animation/text/) - convert your text into GIF / SVG animations.

You can find more about animation generation in [loading.io](https://loading.io/).


## Usage

1. download and include [transition.css](https://github.com/loadingio/transition.css/releases/latest/download/transition.min.css):

```
    <link rel="stylesheet" type="text/css" href="transition.css"/>
```

You can also use CDN, such as, from jsDelivr:

```
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/loadingio/transition.css@v2.0.0/dist/transition.min.css"/>
```


2. check [transition.css animation gallery](https://loading.io/transition/) for the name of animations you want to use. for example, `ld-bounce-in`.

3. use the name as css class on the element you want to animate:

```
    <div class="ld ld-bounce-in"></div>
```

4. for more information, check out [transition.css animation documentation](https://loading.io/transition/).


## LICENSE

MIT License
npm package: @loadingio/vscroll
Description: Remove elements that are not near visible regions while maintain the scroll bar height and position.
Author: zbryikt
Latest version: 0.0.11

# vscroll

Remove elements that are not near visible regions while maintain the scroll bar height and position.


## Why

Reflow is expensive especially when there are too many elements in webpage. By only inserting elements in visible ranges, we can effectively limit the amount of elements.

This is designed to be an alternative or replacement for `Clusterize.js`. The reason for making an alternative is because `Clusterize.js` uses GPL License and you have to purchase license for commercial use, thus is not suitable as a fundamental dependency of other open source projects.


## Install

    npm install --save @loadingio/vscroll


## Usage

include required js file:

    <script src="path-to-dist/index.js"></script>


initialize by passing the container element:

    vs = new vscroll.fixed({root: mycontainer});
    vs.update!


You can update child elements just as if it is a regular DOM element. Just remember to call `update` after:

    vs.insertBefore(newNode, vs.childNodes[0]);
    vs.removeChild(vs.childNodes[vs.childNodes.length - 1]);
    vs.update();


Please note that:

 - we expect the container ( root parameter ) is limited in height and scrollable.
 - we expect nodes to be visible when calling `update`, otherwise we can't correctly calcualte its diemsion.

Also, `update` may still take a long time if there are many children since it scans all children to determine line height and row count. Even a simple `getBoundingClientRect` takes quite long.

Thus, pass an optional `probe-len` option to limit the size of test set of children:

    vs.update(30);

`probe-len` should at least larger than the count of child in a row, but may need a longer length if children's position may be different ( e.g., in a flexbox ) when there are not enough amount of children.


You can always re-calculate the content to be shown by calling `locate()`:

    vs.locate();


## Variations

`vscroll` (plans to) provides different types of virtual scroller, based on how they handle scroll events and manage DOM elements.


### vscroll.fixed

Only attach elements that are near visible region of the container. Expect following conditions:

 - height per row are the same
 - amount of element per row are the same


### vscroll.dummy

A dummy scroll wrapper. No virtualization, reflects DOM operations directly to `root`.


## License

MIT