<commit_before># HeavenScroll
> Heaven scroll provides an InfinateScroll with amazing performance and experiance improvements

## Pre-requisites
Install the package dependencies by running the following command
```bash
npm install
```

## Development
```
npm run start
```

Then view this project at http://localhost:8080

## Demo
To create a packagable demo, use the following command.
```bash
npm run build
```

This will create a demo project in the dist folder

## Publishing
```
NODE_ENV=production npm run build
npm publish
```

## How to use

## Install plugin

```
npm install jquery-heaven-scroll
```

This plugin requires some information to be passed to it in order to work.

### Option 1 using arguments values (will overwrite option 2 values)

One way to send this information is passing an array as argument to the method, like:

```
/**
 * Returns html to be written inside .pageSingle
 * -
 * div that holds .pageSingle must have a data atrribuite of data-page-number that has value of options.pageNumber
 * - 
 * function deals with receiving a single page, or an array of pages to add 
 * -
 * @param {object} options
 * @param {string} options.pageClassName
 * @param {integer} options.pageNumber
 * @param {function} cb
 */
function productTileFetcher(options, cb) {
	// (...)
}

var $pagesContainer = $('.your-selector-classname');

$pagesContainer.heavenScroll({
		maxPagesNumber: 3, // maximum number of pages shown
		pageHeight: 1584, // page height
		startPage: 1, // page to start (gets overwritten if url has query parameter)
		endPage: 10,
		pageClassName: 'pageSingle', // page class
		urlQueryParamName: 'startPage', // page to start url query parameter name
		loadPageFunction: productTileFetcher  // function that returns the html to be shown
    });
```

NOTE: the `loadPageFunction` value must be passed in option 1.

### Option 2 using data attributes values

Another way to send this information is by using data-attributes in the `$pagesContainer` element, like:

```
<div class="pagesContainer"
	 data-max-pages="3"
	 data-page-height="1584"
	 data-start-page="1"
	 data-end-page="10"
	 data-page-class-name="pageSingle"
	 data-url-query-param-name="startPage">
</div>
```

## NOTE: For an example check the `demo` folder<commit_msg>Update README file<commit_after># HeavenScroll
> Heaven scroll provides an InfinateScroll with amazing performance and experiance improvements

## Pre-requisites
Install the package dependencies by running the following command
```bash
npm install
```

## Development
```
npm run start
```

Then view this project at http://localhost:8080

## Demo
To create a packagable demo, use the following command.
```bash
npm run build
```

This will create a demo project in the dist folder

## Publishing
```
NODE_ENV=production npm run build
npm publish
```

## How to use

## Install plugin

```
npm install jquery-heaven-scroll
```

This plugin requires some information to be passed to it in order to work.

### Option 1 using arguments values (will overwrite option 2 values)

One way to send this information is passing an array as argument to the method, like:

```
/**
 * Returns html to be written inside .pageSingle
 * -
 * div that holds .pageSingle must have a data atrribuite of data-page-number that has value of options.pageNumber
 * - 
 * function deals with receiving a single page, or an array of pages to add 
 * -
 * @param {object} options
 * @param {string} options.pageClassName
 * @param {integer|array} options.pageNumber
 * @param {function} cb
 */
function productTileFetcher(options, cb) {
	// (...)
}

var $pagesContainer = $('.your-selector-classname');

$pagesContainer.heavenScroll({
		fadeInValue: 1500, // page fade in duration
		maxPagesNumber: 3, // maximum number of pages shown
		pageHeight: 1584, // page height
		startPage: 1, // page to start (gets overwritten if url has query parameter)
		endPage: 10,
		pageClassName: 'pageSingle', // page class
		urlQueryParamName: 'startPage', // page to start url query parameter name
		loadPageFunction: productTileFetcher,  // function that returns the html to be shown
		spinnerClassName: 'Spinner' // default class name 'Spinner'
    });
```

NOTE: the `loadPageFunction` value must be passed in option 1.

### Option 2 using data attributes values

Another way to send this information is by using data-attributes in the `$pagesContainer` element, like:

```
<div class="pagesContainer"
	 data-max-pages="3"
	 data-page-height="1584"
	 data-start-page="1"
	 data-end-page="10"
	 data-page-class-name="pageSingle"
	 data-url-query-param-name="startPage">
</div>
```

## NOTE: For an example check the `demo` folder
{'fraction_non_alphanumeric': 0.1036036036036036, 'fraction_numerical': 0.011154011154011155, 'mean_word_length': 4.175360710321865, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6826186', 'n_tokens_mistral': 1413, 'n_tokens_neox': 1291, 'n_words': 547}