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