Sha256: b286fe86c51b5a6f2ebba639e18df4a380669900f82dd8c2ad9d72a44b05a094
Contents?: true
Size: 1.6 KB
Versions: 2
Compression:
Stored size: 1.6 KB
Contents
import { Env, Views } from "loco-js"; import Room from "models/Room"; class Show extends Views.Base { constructor(opts = {}) { super(opts); this.roomId = opts.id; } render() { this.connectWith(Room); this._handleSendingMessage(); } renderMembers(members) { for (const member of members) { this._memberJoined(member); } } receivedMessage(message, author) { const renderedMessage = `<p><b>${author}</b>: ${message}</p>`; document .getElementById("messages") .insertAdjacentHTML("beforeend", renderedMessage); } receivedSignal(signal, data) { switch (signal) { case "Room member_joined": if (data.room_id !== this.roomId) return; this._memberJoined(data.member); break; case "Room member_left": if (data.room_id !== this.roomId) return; this._memberLeft(data.member); } } _handleSendingMessage() { document .querySelector("[data-behavior~=room-speaker]") .addEventListener("keypress", event => { if (event.keyCode !== 13) return; event.preventDefault(); Env.loco.emit({ signal: "message", txt: event.target.value, room_id: this.roomId }); event.target.value = ""; }); } _memberJoined(member) { const li = `<li id='user_${member.id}'>${member.username}</li>`; document.getElementById("members").insertAdjacentHTML("beforeend", li); } _memberLeft(member) { const node = document.querySelector(`#members li#user_${member.id}`); node.parentNode.removeChild(node); } } export default Show;
Version data entries
2 entries across 2 versions & 1 rubygems
Version | Path |
---|---|
loco-rails-3.0.5 | test/dummy/frontend/js/views/user/rooms/Show.js |
loco-rails-3.0.4 | test/dummy/frontend/js/views/user/rooms/Show.js |