2019-02-21 04:18:16 +05:30
|
|
|
import * as html from "./html.js";
|
|
|
|
|
|
|
|
class UIView {
|
2019-02-27 03:15:58 +05:30
|
|
|
mount() {}
|
|
|
|
unmount() {}
|
|
|
|
update(_value) {}
|
|
|
|
// can only be called between a call to mount and unmount
|
|
|
|
root() {}
|
|
|
|
}
|
2019-02-21 04:18:16 +05:30
|
|
|
|
2019-02-27 03:15:58 +05:30
|
|
|
function insertAt(parentNode, idx, childNode) {
|
2019-02-27 03:57:34 +05:30
|
|
|
const isLast = idx === parentNode.childElementCount;
|
2019-02-27 03:15:58 +05:30
|
|
|
if (isLast) {
|
|
|
|
parentNode.appendChild(childNode);
|
|
|
|
} else {
|
2019-02-27 03:57:34 +05:30
|
|
|
const nextDomNode = parentNode.children[idx];
|
2019-02-27 03:15:58 +05:30
|
|
|
parentNode.insertBefore(childNode, nextDomNode);
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class ListView {
|
2019-02-28 03:20:08 +05:30
|
|
|
constructor({list, onItemClick}, childCreator) {
|
|
|
|
this._onItemClick = onItemClick;
|
|
|
|
this._list = list;
|
2019-02-21 04:18:16 +05:30
|
|
|
this._root = null;
|
|
|
|
this._subscription = null;
|
|
|
|
this._childCreator = childCreator;
|
|
|
|
this._childInstances = null;
|
2019-02-28 03:20:08 +05:30
|
|
|
this._onClick = this._onClick.bind(this);
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
|
2019-02-27 03:15:58 +05:30
|
|
|
root() {
|
2019-02-21 04:18:16 +05:30
|
|
|
return this._root;
|
|
|
|
}
|
|
|
|
|
2019-02-28 03:20:08 +05:30
|
|
|
update(attributes) {
|
|
|
|
if (attributes.hasOwnProperty("list")) {
|
|
|
|
if (this._subscription) {
|
|
|
|
this._unloadList();
|
|
|
|
while (this._root.lastChild) {
|
|
|
|
this._root.lastChild.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this._list = attributes.list;
|
|
|
|
this._loadList();
|
|
|
|
}
|
|
|
|
}
|
2019-02-27 03:15:58 +05:30
|
|
|
|
2019-02-21 04:18:16 +05:30
|
|
|
mount() {
|
|
|
|
this._root = html.ul({className: "ListView"});
|
2019-02-28 03:20:08 +05:30
|
|
|
this._loadList();
|
|
|
|
if (this._onItemClick) {
|
|
|
|
this._root.addEventListener("click", this._onClick);
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
return this._root;
|
|
|
|
}
|
|
|
|
|
|
|
|
unmount() {
|
2019-02-28 03:20:08 +05:30
|
|
|
this._unloadList();
|
|
|
|
}
|
|
|
|
|
|
|
|
_onClick(event) {
|
|
|
|
let childNode = event.target;
|
|
|
|
while (childNode.parentNode !== this._root) {
|
|
|
|
childNode = childNode.parentNode;
|
|
|
|
}
|
|
|
|
const index = Array.prototype.indexOf.call(this._root.childNodes, childNode);
|
|
|
|
const childView = this._childInstances[index];
|
2019-02-28 03:51:00 +05:30
|
|
|
this._onItemClick(childView, event);
|
2019-02-28 03:20:08 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
_unloadList() {
|
2019-02-21 04:18:16 +05:30
|
|
|
this._subscription = this._subscription();
|
|
|
|
for (let child of this._childInstances) {
|
|
|
|
child.unmount();
|
|
|
|
}
|
|
|
|
this._childInstances = null;
|
|
|
|
}
|
|
|
|
|
2019-02-28 03:20:08 +05:30
|
|
|
_loadList() {
|
|
|
|
if (!this._list) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this._subscription = this._list.subscribe(this);
|
|
|
|
this._childInstances = [];
|
|
|
|
for (let item of this._list) {
|
|
|
|
const child = this._childCreator(item);
|
|
|
|
this._childInstances.push(child);
|
|
|
|
const childDomNode = child.mount();
|
|
|
|
this._root.appendChild(childDomNode);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-27 03:15:58 +05:30
|
|
|
onAdd(idx, value) {
|
2019-02-21 04:18:16 +05:30
|
|
|
const child = this._childCreator(value);
|
2019-02-27 03:15:58 +05:30
|
|
|
this._childInstances.splice(idx, 0, child);
|
|
|
|
insertAt(this._root, idx, child.mount());
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
|
2019-02-27 03:15:58 +05:30
|
|
|
onRemove(idx, _value) {
|
|
|
|
const [child] = this._childInstances.splice(idx, 1);
|
|
|
|
child.root().remove();
|
2019-02-21 04:18:16 +05:30
|
|
|
child.unmount();
|
|
|
|
}
|
|
|
|
|
|
|
|
onMove(fromIdx, toIdx, value) {
|
2019-02-27 03:15:58 +05:30
|
|
|
const [child] = this._childInstances.splice(fromIdx, 1);
|
|
|
|
this._childInstances.splice(toIdx, 0, child);
|
|
|
|
child.root().remove();
|
|
|
|
insertAt(this._root, toIdx, child.root());
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
|
2019-02-27 04:20:15 +05:30
|
|
|
onUpdate(i, value, params) {
|
|
|
|
this._childInstances[i].update(value, params);
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
}
|