# phaser-plugin-list-view

> ## Demos * [GridView](https://iamchristopher.github.io/phaser-plugin-list-view/grid.html) * [ListView](https://iamchristopher.github.io/phaser-plugin-list-view/list.html)

Latest version **1.1.0** (published 2019-02-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install phaser-plugin-list-view
pnpm add phaser-plugin-list-view
yarn add phaser-plugin-list-view
bun add phaser-plugin-list-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-02-28 |
| First published | 2018-07-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Maintainers | iamchristopher |

## Links

- npm: https://www.npmjs.com/package/phaser-plugin-list-view
- Repository: https://github.com/iamchristopher/phaser-plugin-list-view
- Homepage: https://github.com/iamchristopher/phaser-plugin-list-view#readme
- Issues: https://github.com/iamchristopher/phaser-plugin-list-view/issues
- npm.io page: https://npm.io/package/phaser-plugin-list-view

## Recent versions

- 1.1.0 (latest) — 2019-02-28
- 1.0.0-alpha03 (alpha03) — 2019-01-21
- 1.0.0 — 2019-01-22
- 1.0.0-alpha02 — 2018-07-22
- 1.0.0-alpha01 — 2018-07-22

## README

# Phaser ListView Plugin

## Demos
* [GridView](https://iamchristopher.github.io/phaser-plugin-list-view/grid.html)
* [ListView](https://iamchristopher.github.io/phaser-plugin-list-view/list.html)

## Installation
```
npm i phaser-plugin-list-view -S
```
Then add to your game config:
```js
import ListViewPlugin from 'phaser-plugin-list-view';

new Phaser.Game({
  plugins: [
    scene: [
      {
        key: 'ListView',
        plugin: ListViewPlugin,
        start: true
      }
    ]
  ]
});
```

## Basic Usage
The plugin registers a new custom `Game Object` that is available from within your scenes:
```js
const listItems = new Array(15)
    .fill()
    .map((_, i) =>
        this.add.text(0, 0, `Item #${i} (x1)`, {
            fontSize: 20,
            fontFamily: 'Arial'
        })
            .setPadding({ bottom: 12 })
    );

const listview = this.add.listview(0, 0, 200, 400)
    .on('pointerdown', (item, i, items) => console.log(`Item #${i} was clicked`))
    .add(listItems);
```

## API

### `ListView.add(child)`
#### Arguments
* **child** (GameObject|GameObject[]) — The child to add to the bottom of the list

**Returns** a `ListView` object.

### `ListView.remove(item)`
#### Arguments
* **item** (GameObject) — The child to remove

**Returns** a `ListView` object.

### `ListView.removeAt(index)`
#### Arguments
* **index** (Number) — The index of the child to remove

**Returns** a `ListView` object.

### `ListView.setScrollbarEnabled(config)`
#### Arguments
* **config** (Boolean|Object) — Can either be a `Boolean` specifying if a scrollbar should be rendered or an `Object` containing the following optional properties:
  * **alpha** (Number) — The alpha to render the scrollbar  
  * **colour** — The colour to render the scrollbar
  * **hideWhenEmpty** (Boolean) — Sets whether the scrollbar should be visible when there are no items to display. Default value is `false`
  * **width** (Number) — The width to render the scrollbar

**Returns** a `ListView` object.

### `ListView.on(event, fn)`
#### Arguments
* **event** (String) — Any Phaser v3 GameObject event (ie, `pointerdown`) that will be attached to each list item. Refer to [the documentation](https://photonstorm.github.io/phaser3-docs/index.html) for details 
* **fn(item, index, items)** (Function) — The callback function for the event

**Returns** a `ListView` object.

### `ListView.settle()`
Updates children positions after a mutation occurs. Primarily used for internal operations but is available to you for special occasions.

**Returns** a `ListView` object.

## Limitations
This plugin utilizes Phaser's GameObject exclusion to create the scrolling effect. As of this writing, Phaser only [supports 31 unique cameras](https://github.com/photonstorm/phaser/blob/master/src/cameras/2d/CameraManager.js#L58-L62) before being unable to support GameObject exclusion. This means that your game can only contain a limited amount of `ListViews` (31 minus however many cameras you've added yourself).

## TODO
- [ ] Add items at specified position
- [ ] Additional documentation
- [ ] Component demos
- [ ] 9-slice scrollbar support
- [ ] Touch controls/ draggable scroll
- [ ] Item separator
- [ ] Integration with ScaleManager
- [ ] Tests
- [ ] Grid layout support

---
_Source: https://npm.io/package/phaser-plugin-list-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._