mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-24 12:04:57 +01:00
keep the DOM small, avoid a node for reactions on every message
This commit is contained in:
parent
4ef5afc011
commit
2878208e94
@ -17,6 +17,7 @@ limitations under the License.
|
|||||||
|
|
||||||
import {renderStaticAvatar} from "../../../avatar.js";
|
import {renderStaticAvatar} from "../../../avatar.js";
|
||||||
import {tag} from "../../../general/html.js";
|
import {tag} from "../../../general/html.js";
|
||||||
|
import {mountView} from "../../../general/utils.js";
|
||||||
import {TemplateView} from "../../../general/TemplateView.js";
|
import {TemplateView} from "../../../general/TemplateView.js";
|
||||||
import {Popup} from "../../../general/Popup.js";
|
import {Popup} from "../../../general/Popup.js";
|
||||||
import {Menu} from "../../../general/Menu.js";
|
import {Menu} from "../../../general/Menu.js";
|
||||||
@ -36,10 +37,10 @@ export class BaseMessageView extends TemplateView {
|
|||||||
unverified: vm.isUnverified,
|
unverified: vm.isUnverified,
|
||||||
continuation: vm => vm.isContinuation,
|
continuation: vm => vm.isContinuation,
|
||||||
}}, [
|
}}, [
|
||||||
|
// dynamically added and removed nodes are handled below
|
||||||
this.renderMessageBody(t, vm),
|
this.renderMessageBody(t, vm),
|
||||||
// should be after body as it is overlayed on top
|
// should be after body as it is overlayed on top
|
||||||
t.button({className: "Timeline_messageOptions"}, "⋯"),
|
t.button({className: "Timeline_messageOptions"}, "⋯"),
|
||||||
t.ifView(vm => vm.reactions, vm => new ReactionsView(vm.reactions)),
|
|
||||||
]);
|
]);
|
||||||
// given that there can be many tiles, we don't add
|
// given that there can be many tiles, we don't add
|
||||||
// unneeded DOM nodes in case of a continuation, and we add it
|
// unneeded DOM nodes in case of a continuation, and we add it
|
||||||
@ -55,6 +56,21 @@ export class BaseMessageView extends TemplateView {
|
|||||||
li.insertBefore(tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName), li.firstChild);
|
li.insertBefore(tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName), li.firstChild);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
// similarly, we could do this with a simple ifView,
|
||||||
|
// but that adds a comment node to all messages without reactions
|
||||||
|
let reactionsView = null;
|
||||||
|
t.mapSideEffect(vm => vm.reactions, reactions => {
|
||||||
|
if (reactions && !reactionsView) {
|
||||||
|
reactionsView = new ReactionsView(vm.reactions);
|
||||||
|
this.addSubView(reactionsView);
|
||||||
|
li.appendChild(mountView(reactionsView));
|
||||||
|
} else if (!reactions && reactionsView) {
|
||||||
|
li.removeChild(reactionsView.root());
|
||||||
|
reactionsView.unmount();
|
||||||
|
this.removeSubView(reactionsView);
|
||||||
|
reactionsView = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
return li;
|
return li;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user