2020-08-05 22:08:55 +05:30
|
|
|
/*
|
|
|
|
Copyright 2020 Bruno Windels <bruno@windels.cloud>
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
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-21 00:56:39 +05:30
|
|
|
export class ListView {
|
2020-05-08 13:01:41 +05:30
|
|
|
constructor({list, onItemClick, className, parentProvidesUpdates = true}, 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;
|
2020-05-08 12:42:33 +05:30
|
|
|
this._mountArgs = {parentProvidesUpdates};
|
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() {
|
2020-05-05 01:54:10 +05:30
|
|
|
if (this._list) {
|
|
|
|
this._unloadList();
|
|
|
|
}
|
2019-02-28 03:20:08 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
_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-05-08 12:42:33 +05:30
|
|
|
const childDomNode = child.mount(this._mountArgs);
|
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-05-08 12:42:33 +05:30
|
|
|
insertAt(this._root, idx, child.mount(this._mountArgs));
|
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
|
|
|
}
|