[mod] clean model-view-control
Christian Fraß authored 3 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) {
|
|
[mod] added view for info e...
Christian Fraß authored 3 years ago
|
source/logic/view.ts 83) switch (entry.kind)
|
|
[mod] clean model-view-control
Christian Fraß authored 3 years ago
|
source/view.ts 84) {
|
|
[mod] added view for info e...
Christian Fraß authored 3 years ago
|
source/logic/view.ts 85) default:
source/logic/view.ts 86) {
source/logic/view.ts 87) console.warn(`unhandled entry kind '${entry.kind}'`);
source/logic/view.ts 88) break;
source/logic/view.ts 89) }
source/logic/view.ts 90) case enum_entrykind.info:
source/logic/view.ts 91) {
source/logic/view.ts 92) let dom_entry: HTMLLIElement = document.createElement("li");
source/logic/view.ts 93) dom_entry.classList.add("entry");
source/logic/view.ts 94) dom_entry.classList.add("entry_info");
source/logic/view.ts 95) {
source/logic/view.ts 96) let dom_time: HTMLSpanElement = document.createElement("span");
source/logic/view.ts 97) dom_time.classList.add("entry_time");
source/logic/view.ts 98) dom_time.textContent = (new Date(entry.timestamp*1000)).toISOString().slice(11, 19);
source/logic/view.ts 99) dom_entry.appendChild(dom_time);
source/logic/view.ts 100) }
source/logic/view.ts 101) {
source/logic/view.ts 102) let dom_content: HTMLSpanElement = document.createElement("span");
source/logic/view.ts 103) dom_content.classList.add("entry_content");
source/logic/view.ts 104) dom_content.textContent = `-- ${entry.content}`;
source/logic/view.ts 105) dom_entry.appendChild(dom_content);
source/logic/view.ts 106) }
source/logic/view.ts 107) dom_entries.appendChild(dom_entry);
source/logic/view.ts 108) break;
source/logic/view.ts 109) }
source/logic/view.ts 110) case enum_entrykind.message:
source/logic/view.ts 111) {
source/logic/view.ts 112) let dom_entry: HTMLLIElement = document.createElement("li");
source/logic/view.ts 113) dom_entry.classList.add("entry");
source/logic/view.ts 114) dom_entry.classList.add("entry_message");
source/logic/view.ts 115) {
source/logic/view.ts 116) let dom_time: HTMLSpanElement = document.createElement("span");
source/logic/view.ts 117) dom_time.classList.add("entry_time");
source/logic/view.ts 118) dom_time.textContent = (new Date(entry.timestamp*1000)).toISOString().slice(11, 19);
source/logic/view.ts 119) dom_entry.appendChild(dom_time);
source/logic/view.ts 120) }
source/logic/view.ts 121) {
source/logic/view.ts 122) let dom_sender: HTMLSpanElement = document.createElement("span");
source/logic/view.ts 123) dom_sender.classList.add("entry_sender");
source/logic/view.ts 124) dom_sender.style.color = get_usercolor(entry.sender);
source/logic/view.ts 125) dom_sender.textContent = entry.sender;
source/logic/view.ts 126) dom_entry.appendChild(dom_sender);
source/logic/view.ts 127) }
source/logic/view.ts 128) {
source/logic/view.ts 129) let dom_content: HTMLSpanElement = document.createElement("span");
source/logic/view.ts 130) dom_content.classList.add("entry_content");
source/logic/view.ts 131) dom_content.textContent = entry.content;
source/logic/view.ts 132) dom_entry.appendChild(dom_content);
source/logic/view.ts 133) }
source/logic/view.ts 134) dom_entries.appendChild(dom_entry);
source/logic/view.ts 135) break;
source/logic/view.ts 136) }
|
|
[mod] clean model-view-control
Christian Fraß authored 3 years ago
|
source/view.ts 137) }
source/view.ts 138) }
source/view.ts 139) dom_entries.scrollTo(0, dom_entries["scrollTopMax"]);
source/view.ts 140) }
source/view.ts 141)
source/view.ts 142)
source/view.ts 143) /**
source/view.ts 144) * updates the user list
source/view.ts 145) */
source/view.ts 146) function update_users
source/view.ts 147) (
|
|
[add] possibility to open q...
Christian Fraß authored 3 years ago
|
source/logic/view.ts 148) conf: type_conf,
|
|
[mod] clean model-view-control
Christian Fraß authored 3 years ago
|
source/view.ts 149) model: type_model
source/view.ts 150) ): void
source/view.ts 151) {
source/view.ts 152) let dom_users: HTMLUListElement = document.querySelector("#users");
source/view.ts 153) dom_users.textContent = "";
source/view.ts 154) let users: Array<type_user>;
source/view.ts 155) switch (model.active.kind)
source/view.ts 156) {
source/view.ts 157) default:
source/view.ts 158) {
source/view.ts 159) console.warn("unhandled kind: " + model.active.kind);
source/view.ts 160) users = [];
source/view.ts 161) break;
source/view.ts 162) }
source/view.ts 163) case "channel":
source/view.ts 164) {
source/view.ts 165) users = model.channels[model.active.name].users;
source/view.ts 166) break;
source/view.ts 167) }
source/view.ts 168) case "query":
source/view.ts 169) {
source/view.ts 170) users = [{"name": model.nickname, "role": ""}, {"name": model.active.name, "role": ""}];
source/view.ts 171) break;
source/view.ts 172) }
source/view.ts 173) }
source/view.ts 174) const users_sorted: Array<type_user> = users.sort
source/view.ts 175) (
source/view.ts 176) (x, y) =>
source/view.ts 177) (
source/view.ts 178) (x.role >= y.role)
source/view.ts 179) ? -1
source/view.ts 180) : (
source/view.ts 181) (x.role === y.role)
source/view.ts 182) ? ((x.name < y.name) ? -1 : +1)
source/view.ts 183) : +1
source/view.ts 184) )
source/view.ts 185) )
source/view.ts 186) );
source/view.ts 187) for (const user of users_sorted)
source/view.ts 188) {
source/view.ts 189) let dom_user: HTMLLIElement = document.createElement("li");
source/view.ts 190) dom_user.classList.add("user");
source/view.ts 191) {
source/view.ts 192) let dom_role: HTMLSpanElement = document.createElement("span");
source/view.ts 193) dom_role.textContent = user.role;
source/view.ts 194) dom_user.appendChild(dom_role);
source/view.ts 195) }
source/view.ts 196) {
source/view.ts 197) let dom_name: HTMLSpanElement = document.createElement("span");
source/view.ts 198) dom_name.textContent = user.name;
source/view.ts 199) dom_name.style.color = get_usercolor(user.name);
source/view.ts 200) dom_user.appendChild(dom_name);
source/view.ts 201) }
|
|
[add] possibility to open q...
Christian Fraß authored 3 years ago
|
source/logic/view.ts 202) dom_user.setAttribute("rel", JSON.stringify(user.name));
|
|
[mod] clean model-view-control
Christian Fraß authored 3 years ago
|
source/view.ts 203) dom_users.appendChild(dom_user);
source/view.ts 204) }
|
|
[add] possibility to open q...
Christian Fraß authored 3 years ago
|
source/logic/view.ts 205) // meeh…
source/logic/view.ts 206) ns_control.setup(conf, model);
|
|
[mod] clean model-view-control
Christian Fraß authored 3 years ago
|
source/view.ts 207) }
source/view.ts 208)
source/view.ts 209)
source/view.ts 210) /**
source/view.ts 211) * clears the content and focus on the message content input
source/view.ts 212) */
source/view.ts 213) function clear_content
source/view.ts 214) (
source/view.ts 215) ): void
source/view.ts 216) {
source/view.ts 217) let dom_content: HTMLInputElement = document.querySelector<HTMLInputElement>("#content");
source/view.ts 218) dom_content.value = "";
source/view.ts 219) dom_content.focus();
source/view.ts 220) }
source/view.ts 221)
source/view.ts 222)
source/view.ts 223) /**
source/view.ts 224) * sets up the view
source/view.ts 225) */
source/view.ts 226) export function setup
source/view.ts 227) (
source/view.ts 228) conf: type_conf,
source/view.ts 229) model: type_model
source/view.ts 230) ): void
source/view.ts 231) {
source/view.ts 232) document.querySelector<HTMLInputElement>("#channel").value = conf.irc.predefined_channel;
source/view.ts 233) document.querySelector<HTMLInputElement>("#nickname").value = (conf.irc.predefined_nickname_prefix + (Math.random()*100).toFixed(0));
source/view.ts 234)
source/view.ts 235) ns_model.listen(model, "state_changed", () => {update_state(model);});
source/view.ts 236) ns_model.listen(model, "spots_changed", () => {update_spots(conf, model);});
source/view.ts 237) ns_model.listen(model, "entries_changed", () => {update_entries(model);});
|
|
[add] possibility to open q...
Christian Fraß authored 3 years ago
|
source/logic/view.ts 238) ns_model.listen(model, "users_changed", () => {update_users(conf, model);});
|
[mod] clean model-view-control