[mod] clean model-view-control
Christian Fraß authored 2 years ago
|
source/view.ts 1) namespace ns_view
source/view.ts 2) {
source/view.ts 3)
source/view.ts 4) /**
source/view.ts 5) * updates the state (switches between login, connecting and regular "page")
source/view.ts 6) */
source/view.ts 7) function update_state
source/view.ts 8) (
source/view.ts 9) model: type_model
source/view.ts 10) ): void
source/view.ts 11) {
source/view.ts 12) document.querySelector("body").setAttribute("class", model.state);
source/view.ts 13) }
source/view.ts 14)
source/view.ts 15)
source/view.ts 16) /**
source/view.ts 17) * updates the spots (channels and queries)
source/view.ts 18) */
source/view.ts 19) function update_spots
source/view.ts 20) (
source/view.ts 21) conf: type_conf,
source/view.ts 22) model: type_model
source/view.ts 23) ): void
source/view.ts 24) {
source/view.ts 25) let dom_spots: HTMLUListElement = document.querySelector("#spots");
source/view.ts 26) const spots: Array<type_spot> = (
source/view.ts 27) []
source/view.ts 28) .concat(Object.keys(model.channels).map((name) => ({"kind": "channel", "name": name})))
source/view.ts 29) .concat(Object.keys(model.queries).map((name) => ({"kind": "query", "name": name})))
source/view.ts 30) );
source/view.ts 31) dom_spots.textContent = "";
source/view.ts 32) for (const spot of spots)
source/view.ts 33) {
source/view.ts 34) let dom_spot: HTMLLIElement = document.createElement("li");
source/view.ts 35) dom_spot.classList.add("spot");
source/view.ts 36) {
source/view.ts 37) let dom_kind: HTMLSpanElement = document.createElement("span");
source/view.ts 38) dom_kind.classList.add("spot_kind");
source/view.ts 39) dom_kind.textContent = spot.kind;
source/view.ts 40) dom_spot.appendChild(dom_kind);
source/view.ts 41) }
source/view.ts 42) {
source/view.ts 43) let dom_name: HTMLSpanElement = document.createElement("span");
source/view.ts 44) dom_name.classList.add("spot_sender");
source/view.ts 45) dom_name.textContent = spot.name;
source/view.ts 46) dom_spot.appendChild(dom_name);
source/view.ts 47) }
source/view.ts 48) dom_spot.classList.toggle("spot_active", ((spot.kind === model.active.kind) && (spot.name === model.active.name)));
source/view.ts 49) dom_spot.setAttribute("rel", JSON.stringify(spot));
source/view.ts 50) dom_spots.appendChild(dom_spot);
source/view.ts 51) }
source/view.ts 52) // meeh…
source/view.ts 53) ns_control.setup(conf, model);
source/view.ts 54) }
source/view.ts 55)
source/view.ts 56)
source/view.ts 57) /**
source/view.ts 58) * updates the chat entries
source/view.ts 59) */
source/view.ts 60) function update_entries
source/view.ts 61) (
source/view.ts 62) model: type_model
source/view.ts 63) ): void
source/view.ts 64) {
source/view.ts 65) let dom_entries: HTMLUListElement = document.querySelector("#entries");
source/view.ts 66) let entries: Array<type_entry>;
source/view.ts 67) switch (model.active.kind)
source/view.ts 68) {
source/view.ts 69) case "channel":
source/view.ts 70) {
source/view.ts 71) entries = model.channels[model.active.name].entries;
source/view.ts 72) break;
source/view.ts 73) }
source/view.ts 74) case "query":
source/view.ts 75) {
source/view.ts 76) entries = model.queries[model.active.name].entries;
source/view.ts 77) break;
source/view.ts 78) }
source/view.ts 79) }
source/view.ts 80) dom_entries.textContent = "";
source/view.ts 81) for (const entry of entries)
source/view.ts 82) {
source/view.ts 83) let dom_entry: HTMLLIElement = document.createElement("li");
source/view.ts 84) dom_entry.classList.add("entry");
source/view.ts 85) {
source/view.ts 86) let dom_time: HTMLSpanElement = document.createElement("span");
source/view.ts 87) dom_time.classList.add("entry_time");
source/view.ts 88) dom_time.textContent = (new Date(entry.timestamp*1000)).toISOString().slice(11, 19);
source/view.ts 89) dom_entry.appendChild(dom_time);
source/view.ts 90) }
source/view.ts 91) {
source/view.ts 92) let dom_sender: HTMLSpanElement = document.createElement("span");
source/view.ts 93) dom_sender.classList.add("entry_sender");
source/view.ts 94) dom_sender.style.color = get_usercolor(entry.sender);
source/view.ts 95) dom_sender.textContent = entry.sender;
source/view.ts 96) dom_entry.appendChild(dom_sender);
source/view.ts 97) }
source/view.ts 98) {
source/view.ts 99) let dom_content: HTMLSpanElement = document.createElement("span");
source/view.ts 100) dom_content.classList.add("entry_content");
source/view.ts 101) dom_content.textContent = entry.content;
source/view.ts 102) dom_entry.appendChild(dom_content);
source/view.ts 103) }
source/view.ts 104) dom_entries.appendChild(dom_entry);
source/view.ts 105) }
source/view.ts 106) dom_entries.scrollTo(0, dom_entries["scrollTopMax"]);
source/view.ts 107) }
source/view.ts 108)
source/view.ts 109)
source/view.ts 110) /**
source/view.ts 111) * updates the user list
source/view.ts 112) */
source/view.ts 113) function update_users
source/view.ts 114) (
|
|
[add] possibility to open q...
Christian Fraß authored 2 years ago
|
source/logic/view.ts 115) conf: type_conf,
|
|
[mod] clean model-view-control
Christian Fraß authored 2 years ago
|
source/view.ts 116) model: type_model
source/view.ts 117) ): void
source/view.ts 118) {
source/view.ts 119) let dom_users: HTMLUListElement = document.querySelector("#users");
source/view.ts 120) dom_users.textContent = "";
source/view.ts 121) let users: Array<type_user>;
source/view.ts 122) switch (model.active.kind)
source/view.ts 123) {
source/view.ts 124) default:
source/view.ts 125) {
source/view.ts 126) console.warn("unhandled kind: " + model.active.kind);
source/view.ts 127) users = [];
source/view.ts 128) break;
source/view.ts 129) }
source/view.ts 130) case "channel":
source/view.ts 131) {
source/view.ts 132) users = model.channels[model.active.name].users;
source/view.ts 133) break;
source/view.ts 134) }
source/view.ts 135) case "query":
source/view.ts 136) {
source/view.ts 137) users = [{"name": model.nickname, "role": ""}, {"name": model.active.name, "role": ""}];
source/view.ts 138) break;
source/view.ts 139) }
source/view.ts 140) }
source/view.ts 141) const users_sorted: Array<type_user> = users.sort
source/view.ts 142) (
source/view.ts 143) (x, y) =>
source/view.ts 144) (
source/view.ts 145) (x.role >= y.role)
source/view.ts 146) ? -1
source/view.ts 147) : (
source/view.ts 148) (x.role === y.role)
source/view.ts 149) ? ((x.name < y.name) ? -1 : +1)
source/view.ts 150) : +1
source/view.ts 151) )
source/view.ts 152) )
source/view.ts 153) );
source/view.ts 154) for (const user of users_sorted)
source/view.ts 155) {
source/view.ts 156) let dom_user: HTMLLIElement = document.createElement("li");
source/view.ts 157) dom_user.classList.add("user");
source/view.ts 158) {
source/view.ts 159) let dom_role: HTMLSpanElement = document.createElement("span");
source/view.ts 160) dom_role.textContent = user.role;
source/view.ts 161) dom_user.appendChild(dom_role);
source/view.ts 162) }
source/view.ts 163) {
source/view.ts 164) let dom_name: HTMLSpanElement = document.createElement("span");
source/view.ts 165) dom_name.textContent = user.name;
source/view.ts 166) dom_name.style.color = get_usercolor(user.name);
source/view.ts 167) dom_user.appendChild(dom_name);
source/view.ts 168) }
|
|
[add] possibility to open q...
Christian Fraß authored 2 years ago
|
source/logic/view.ts 169) dom_user.setAttribute("rel", JSON.stringify(user.name));
|
|
[mod] clean model-view-control
Christian Fraß authored 2 years ago
|
source/view.ts 170) dom_users.appendChild(dom_user);
source/view.ts 171) }
|
|
[add] possibility to open q...
Christian Fraß authored 2 years ago
|
source/logic/view.ts 172) // meeh…
source/logic/view.ts 173) ns_control.setup(conf, model);
|
|
[mod] clean model-view-control
Christian Fraß authored 2 years ago
|
source/view.ts 174) }
source/view.ts 175)
source/view.ts 176)
source/view.ts 177) /**
source/view.ts 178) * clears the content and focus on the message content input
source/view.ts 179) */
source/view.ts 180) function clear_content
source/view.ts 181) (
source/view.ts 182) ): void
source/view.ts 183) {
source/view.ts 184) let dom_content: HTMLInputElement = document.querySelector<HTMLInputElement>("#content");
source/view.ts 185) dom_content.value = "";
source/view.ts 186) dom_content.focus();
source/view.ts 187) }
source/view.ts 188)
source/view.ts 189)
source/view.ts 190) /**
source/view.ts 191) * sets up the view
source/view.ts 192) */
source/view.ts 193) export function setup
source/view.ts 194) (
source/view.ts 195) conf: type_conf,
source/view.ts 196) model: type_model
source/view.ts 197) ): void
source/view.ts 198) {
source/view.ts 199) document.querySelector<HTMLInputElement>("#channel").value = conf.irc.predefined_channel;
source/view.ts 200) document.querySelector<HTMLInputElement>("#nickname").value = (conf.irc.predefined_nickname_prefix + (Math.random()*100).toFixed(0));
source/view.ts 201)
source/view.ts 202) ns_model.listen(model, "state_changed", () => {update_state(model);});
source/view.ts 203) ns_model.listen(model, "spots_changed", () => {update_spots(conf, model);});
source/view.ts 204) ns_model.listen(model, "entries_changed", () => {update_entries(model);});
|
|
[add] possibility to open q...
Christian Fraß authored 2 years ago
|
source/logic/view.ts 205) ns_model.listen(model, "users_changed", () => {update_users(conf, model);});
|
[mod] clean model-view-control