89c146abe00574c270f41f678a14ff99feae8f43
[vchess.git] / client / src / components / UserBio.vue
1 <template lang="pug">
2 div(:id="'player_' + uid")
3 input.modal(
4 :id="'modalBio_' + uid"
5 type="checkbox"
6 )
7 .bio-div(
8 role="dialog"
9 :data-checkbox="'modalBio_' + uid"
10 )
11 .card
12 div(v-if="st.user.id == uid")
13 .buttons
14 button(@click="toggleEdit()")
15 | {{ st.tr[modeEdit ? "Cancel" : "Edit"] }}
16 button(
17 v-show="modeEdit"
18 @click="sendBio()"
19 )
20 | {{ st.tr["Send"] }}
21 fieldset(v-if="userBio !== undefined && modeEdit")
22 textarea(
23 @input="adjustHeight()"
24 v-model="userBio"
25 )
26 h3 {{ uname }}
27 .bio-content(
28 v-if="userBio !== undefined"
29 v-html="parseHtml(userBio)"
30 @click="modeEdit = !modeEdit"
31 )
32 .dialog.text-center {{ st.tr[infoMsg] }}
33 span(
34 :class="{ clickable: !!uname }"
35 @click="showBio()"
36 )
37 | {{ uname || "@nonymous" }}
38 </template>
39
40 <script>
41 import { store } from "@/store";
42 import { ajax } from "@/utils/ajax";
43 import { processModalClick } from "@/utils/modalClick.js";
44 export default {
45 name: "my-user-bio",
46 props: ["uid", "uname"],
47 data: function() {
48 return {
49 st: store.state,
50 userBio: undefined,
51 infoMsg: "",
52 modeEdit: false
53 };
54 },
55 methods: {
56 parseHtml: function(txt) {
57 return !txt.match(/<[/a-zA-Z]+>/)
58 ?
59 // No HTML tag
60 txt.replace(/\n\n/g, "<br/><div class='br'></div>")
61 .replace(/\n/g, "<br/>")
62 : txt;
63 },
64 adjustHeight: function() {
65 // https://stackoverflow.com/a/48460773
66 let t = document.querySelector("#player_" + this.uid + " textarea");
67 t.style.height = "";
68 t.style.height = (t.scrollHeight + 3) + "px";
69 },
70 toggleEdit: function() {
71 this.modeEdit = !this.modeEdit;
72 if (this.modeEdit) this.$nextTick(this.adjustHeight);
73 },
74 showBio: function() {
75 if (!this.uname)
76 // Anonymous users have no bio:
77 return;
78 this.infoMsg = "";
79 document.querySelector("#modalBio_" + this.uid).checked = true;
80 if (this.userBio === undefined) {
81 ajax(
82 "/userbio",
83 "GET",
84 {
85 data: { id: this.uid },
86 success: (res) => {
87 this.userBio = res.bio;
88 }
89 }
90 );
91 document.querySelector("#player_" + this.uid + " > .bio-div")
92 .addEventListener("click", processModalClick);
93 }
94 else if (this.modeEdit) this.adjustHeight();
95 },
96 sendBio: function() {
97 this.modeEdit = false;
98 ajax(
99 "/userbio",
100 "PUT",
101 {
102 data: { bio: this.userBio },
103 success: () => {
104 this.infoMsg = "Modifications applied!";
105 }
106 }
107 );
108 }
109 }
110 };
111 </script>
112
113 <style lang="sass">
114 // bio-content HTML elements are added after initial rendering
115 .bio-content
116 text-align: left
117 margin: 0 var(--universal-margin)
118 p, ul, ol, pre, table, h3, h4, h5, h6, blockquote
119 margin: var(--universal-margin) 0
120 .br
121 display: block
122 margin: 10px 0
123 </style>
124
125 <style lang="sass" scoped>
126 [type="checkbox"].modal+div .card
127 max-width: 500px
128 max-height: 100%
129
130 .buttons
131 text-align: center
132 & > button
133 margin-bottom: 0
134
135 h3
136 text-align: center
137 margin-bottom: 5px
138
139 textarea
140 display: block
141 margin: 0 var(--universal-margin)
142 width: calc(100% - 2 * var(--universal-margin))
143 min-height: 100px
144
145 .dialog
146 padding: 5px
147 color: blue
148 </style>