2019-06-15 03:16:18 +05:30
|
|
|
import {tag} from "./html.js";
|
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
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-29 13:30:51 +05:30
|
|
|
const MOUNT_ARGS = {parentProvidesUpdates: true};
|
|
|
|
|
2020-04-21 00:56:39 +05:30
|
|
|
export class ListView {
|
2019-06-16 18:51:20 +05:30
|
|
|
constructor({list, onItemClick, className}, childCreator) {
|
2019-02-28 03:20:08 +05:30
|
|
|
this._onItemClick = onItemClick;
|
|
|
|
this._list = list;
|
2019-06-16 18:51:20 +05:30
|
|
|
this._className = className;
|
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;
|
2019-06-16 20:58:51 +05:30
|
|
|
this.loadList();
|
2019-02-28 03:20:08 +05:30
|
|
|
}
|
|
|
|
}
|
2019-02-27 03:15:58 +05:30
|
|
|
|
2019-02-21 04:18:16 +05:30
|
|
|
mount() {
|
2019-06-16 18:51:20 +05:30
|
|
|
const attr = {};
|
|
|
|
if (this._className) {
|
|
|
|
attr.className = this._className;
|
|
|
|
}
|
|
|
|
this._root = tag.ul(attr);
|
2019-06-16 20:58:51 +05:30
|
|
|
this.loadList();
|
2019-02-28 03:20:08 +05:30
|
|
|
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) {
|
2019-02-28 03:51:16 +05:30
|
|
|
if (event.target === this._root) {
|
|
|
|
return;
|
|
|
|
}
|
2019-02-28 03:20:08 +05:30
|
|
|
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-06-16 20:58:51 +05:30
|
|
|
loadList() {
|
2019-02-28 03:20:08 +05:30
|
|
|
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);
|
2020-04-29 13:30:51 +05:30
|
|
|
const childDomNode = child.mount(MOUNT_ARGS);
|
2019-02-28 03:20:08 +05:30
|
|
|
this._root.appendChild(childDomNode);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-27 03:15:58 +05:30
|
|
|
onAdd(idx, value) {
|
2019-06-16 18:51:20 +05:30
|
|
|
this.onBeforeListChanged();
|
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);
|
2020-04-29 13:30:51 +05:30
|
|
|
insertAt(this._root, idx, child.mount(MOUNT_ARGS));
|
2019-06-16 18:51:20 +05:30
|
|
|
this.onListChanged();
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
|
2019-02-27 03:15:58 +05:30
|
|
|
onRemove(idx, _value) {
|
2019-06-16 18:51:20 +05:30
|
|
|
this.onBeforeListChanged();
|
2019-02-27 03:15:58 +05:30
|
|
|
const [child] = this._childInstances.splice(idx, 1);
|
|
|
|
child.root().remove();
|
2019-02-21 04:18:16 +05:30
|
|
|
child.unmount();
|
2019-06-16 18:51:20 +05:30
|
|
|
this.onListChanged();
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
onMove(fromIdx, toIdx, value) {
|
2019-06-16 18:51:20 +05:30
|
|
|
this.onBeforeListChanged();
|
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-06-16 18:51:20 +05:30
|
|
|
this.onListChanged();
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
|
|
|
|
2019-02-27 04:20:15 +05:30
|
|
|
onUpdate(i, value, params) {
|
2019-06-16 19:09:24 +05:30
|
|
|
if (this._childInstances) {
|
|
|
|
const instance = this._childInstances[i];
|
|
|
|
instance && instance.update(value, params);
|
|
|
|
}
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|
2019-06-16 18:51:20 +05:30
|
|
|
|
|
|
|
onBeforeListChanged() {}
|
|
|
|
onListChanged() {}
|
2019-02-21 04:18:16 +05:30
|
|
|
}
|