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