<commit_before># collection-view

A container for displaying large ordered collections of data items and presenting them using
arbitrary layouts. Large collections can be scrolled smoothly by displaying only a limited
number of elements. [Changes to the data](#changing-the-data) (remove, add, move) and
[changes to the layout](#changing-the-layout) are properly animated by the collection view.
The library is inspired by iOS'
[UICollectionView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/)
and Android's RecyclerView.

The collection view gets its data from the [delegate](#delegate) and gets its visual information
from the layout. Currently there is a [grid layout](#grid-layout), which presents the collection
in rows and columns, and a simple [list layout](#list-layout), which presents the collection
in rows, but [custom layouts](#custom-layout) can be implemented easily. Contributions are welcome!

![Scrolling](demo/scroll.gif)

The collection view also handles resizing of the container properly, maintaining the current
position in the collection.

![Resizing](demo/resize.gif)


## Usage

```js
import { CollectionView, GridLayout } from 'collection-view'

class Delegate {
  constructor(items) {
    this.items = items
  }

  getCount() {
    return this.items.length
  }
  
  configureElement(element, index) {
    element.textContent = this.items[index]
  }
}

let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let delegate = new Delegate(items)
let layout = new GridLayout()
let contentElement = document.getElementById('content')
let view = new CollectionView(contentElement, layout, delegate)
```

Implement a [delegate](#delegate) for your collection. Instantiate a layout, like
a [grid](#grid-layout) or [list](#list-layout), and configure it. Finally, instantiate
a collection view, providing the DOM element which should contain the elements representing
the items in the collection, the layout, and the delegate.

If the grid or list layouts do not fit your needs you can also
[implement a custom layout](#custom-layout).


## Delegate

The delegate object is responsible for defining how many items the collection view should display
and configuring the elements corresponding to the items.

- **getCount(): _Number_**

  Return the number of items in the collection.

  Similar to [`UICollectionViewDataSource.collectionView(numberOfItemsInSection:)`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewDataSource_protocol/#//apple_ref/occ/intfm/UICollectionViewDataSource/collectionView:numberOfItemsInSection:)

- **configureElement(element: _Element_, index: _Number_)**

  Configure the DOM element that corresponds to the item in the collection at the given index.
  The element might have previously been used to represent another item in the collection,
  so ensure to properly restore it to its initial state (e.g., remove previously registered
  event listeners).

  Similar to
[`UICollectionViewDataSource.collectionView(cellForItemAtIndexPath:)`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewDataSource_protocol/#//apple_ref/occ/intfm/UICollectionViewDataSource/collectionView:cellForItemAtIndexPath:)
<commit_msg>document optional onScroll delegate method<commit_after># collection-view

A container for displaying large ordered collections of data items and presenting them using
arbitrary layouts. Large collections can be scrolled smoothly by displaying only a limited
number of elements. [Changes to the data](#changing-the-data) (remove, add, move) and
[changes to the layout](#changing-the-layout) are properly animated by the collection view.
The library is inspired by iOS'
[UICollectionView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/)
and Android's RecyclerView.

The collection view gets its data from the [delegate](#delegate) and gets its visual information
from the layout. Currently there is a [grid layout](#grid-layout), which presents the collection
in rows and columns, and a simple [list layout](#list-layout), which presents the collection
in rows, but [custom layouts](#custom-layout) can be implemented easily. Contributions are welcome!

![Scrolling](demo/scroll.gif)

The collection view also handles resizing of the container properly, maintaining the current
position in the collection.

![Resizing](demo/resize.gif)


## Usage

```js
import { CollectionView, GridLayout } from 'collection-view'

class Delegate {
  constructor(items) {
    this.items = items
  }

  getCount() {
    return this.items.length
  }
  
  configureElement(element, index) {
    element.textContent = this.items[index]
  }
}

let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let delegate = new Delegate(items)
let layout = new GridLayout()
let contentElement = document.getElementById('content')
let view = new CollectionView(contentElement, layout, delegate)
```

Implement a [delegate](#delegate) for your collection. Instantiate a layout, like
a [grid](#grid-layout) or [list](#list-layout), and configure it. Finally, instantiate
a collection view, providing the DOM element which should contain the elements representing
the items in the collection, the layout, and the delegate.

If the grid or list layouts do not fit your needs you can also
[implement a custom layout](#custom-layout).


## Delegate

The delegate object is responsible for defining how many items the collection view should display
and configuring the elements corresponding to the items.

- **getCount(): _Number_** (required)

  Return the number of items in the collection.

  Similar to [`UICollectionViewDataSource.collectionView(numberOfItemsInSection:)`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewDataSource_protocol/#//apple_ref/occ/intfm/UICollectionViewDataSource/collectionView:numberOfItemsInSection:)

- **configureElement(element: _Element_, index: _Number_)** (required)

  Configure the DOM element that corresponds to the item in the collection at the given index.
  The element might have previously been used to represent another item in the collection,
  so ensure to properly restore it to its initial state (e.g., remove previously registered
  event listeners).

  Similar to
[`UICollectionViewDataSource.collectionView(cellForItemAtIndexPath:)`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewDataSource_protocol/#//apple_ref/occ/intfm/UICollectionViewDataSource/collectionView:cellForItemAtIndexPath:)

- **onScroll(view: _CollectionView_)** (optional)

  Callback when the collection view is scrolled.

  Similar to [`UIScrollViewDelegate.scrollViewDidScroll:`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIScrollViewDelegate_Protocol/#//apple_ref/occ/intfm/UIScrollViewDelegate/scrollViewDidScroll:)

{'fraction_non_alphanumeric': 0.08798035249927766, 'fraction_numerical': 0.003178272175671771, 'mean_word_length': 5.56831119544592, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 7, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3123190', 'n_tokens_mistral': 1852, 'n_tokens_neox': 1753, 'n_words': 679}