2 div(:id="'player_' + uid")
4 :id="'modalBio_' + uid"
9 :data-checkbox="'modalBio_' + uid"
12 div(v-if="st.user.id == uid")
14 button(@click="modeEdit = !modeEdit")
15 | {{ st.tr[modeEdit ? "Cancel" : "Edit"] }}
21 fieldset(v-if="userBio !== undefined && modeEdit")
23 @input="adjustHeight($event)"
28 v-if="userBio !== undefined"
29 v-html="parseHtml(userBio)"
30 @click="modeEdit = !modeEdit"
32 .dialog.text-center {{ st.tr[infoMsg] }}
34 :class="{ clickable: !!uname }"
37 | {{ uname || "@nonymous" }}
41 import { store } from "@/store";
42 import { ajax } from "@/utils/ajax";
43 import { processModalClick } from "@/utils/modalClick.js";
46 props: ["uid", "uname"],
56 parseHtml: function(txt) {
57 return !txt.match(/<[/a-zA-Z]+>/)
58 ? txt.replace(/\n/g, "<br/>") //no HTML tag
61 adjustHeight: function(e) {
62 // https://stackoverflow.com/a/48460773
65 t.style.height = t.scrollHeight + "px";
69 // Anonymous users have no bio:
72 document.querySelector("#modalBio_" + this.uid).checked = true;
73 if (this.userBio === undefined) {
78 data: { id: this.uid },
80 this.userBio = res.bio;
84 document.querySelector("#player_" + this.uid + " > .bio-div")
85 .addEventListener("click", processModalClick);
93 data: { bio: this.userBio },
95 this.infoMsg = this.st.tr["Modifications applied!"];
105 // bio-content HTML elements are added after initial rendering
108 margin: 0 var(--universal-margin)
110 margin: var(--universal-margin) 0
113 <style lang="sass" scoped>
114 [type="checkbox"].modal+div .card
120 margin: 0 var(--universal-margin)
121 width: calc(100% - 2 * var(--universal-margin))