Commit | Line | Data |
---|---|---|
dd10eb93 | 1 | <template lang="pug"> |
3c24a27d BA |
2 | div(:id="'player_' + uid") |
3 | input.modal( | |
4 | :id="'modalBio_' + uid" | |
5 | type="checkbox" | |
6 | ) | |
7 | div.bio-div( | |
dd10eb93 | 8 | role="dialog" |
3c24a27d | 9 | :data-checkbox="'modalBio_' + uid" |
dd10eb93 BA |
10 | ) |
11 | .card | |
3c24a27d BA |
12 | div(v-if="st.user.id == uid") |
13 | div | |
14 | button(@click="modeEdit = !modeEdit") | |
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($event)" | |
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> | |
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", | |
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]+>/) | |
58 | ? txt.replace(/\n/g, "<br/>") //no HTML tag | |
59 | : txt; | |
60 | }, | |
61 | adjustHeight: function(e) { | |
62 | // https://stackoverflow.com/a/48460773 | |
63 | let t = e.target; | |
64 | t.style.height = ""; | |
65 | t.style.height = t.scrollHeight + "px"; | |
66 | }, | |
dd10eb93 | 67 | showBio: function() { |
80b38d46 BA |
68 | if (!this.uname) |
69 | // Anonymous users have no bio: | |
70 | return; | |
dd10eb93 | 71 | this.infoMsg = ""; |
3c24a27d | 72 | document.querySelector("#modalBio_" + this.uid).checked = true; |
dd10eb93 BA |
73 | if (this.userBio === undefined) { |
74 | ajax( | |
75 | "/userbio", | |
76 | "GET", | |
77 | { | |
80b38d46 | 78 | data: { id: this.uid }, |
dd10eb93 BA |
79 | success: (res) => { |
80 | this.userBio = res.bio; | |
81 | } | |
82 | } | |
83 | ); | |
3c24a27d BA |
84 | document.querySelector("#player_" + this.uid + " > .bio-div") |
85 | .addEventListener("click", processModalClick); | |
dd10eb93 BA |
86 | } |
87 | }, | |
88 | sendBio: function() { | |
89 | ajax( | |
90 | "/userbio", | |
91 | "PUT", | |
92 | { | |
93 | data: { bio: this.userBio }, | |
94 | success: () => { | |
95 | this.infoMsg = this.st.tr["Modifications applied!"]; | |
96 | } | |
97 | } | |
98 | ); | |
99 | } | |
100 | } | |
101 | }; | |
102 | </script> | |
103 | ||
3c24a27d BA |
104 | <style lang="sass"> |
105 | // bio-content HTML elements are added after initial rendering | |
106 | .bio-content | |
107 | text-align: left | |
108 | margin: 0 var(--universal-margin) | |
109 | p, ul, ol | |
110 | margin: var(--universal-margin) 0 | |
111 | </style> | |
112 | ||
dd10eb93 BA |
113 | <style lang="sass" scoped> |
114 | [type="checkbox"].modal+div .card | |
3c24a27d | 115 | max-width: 500px |
dd10eb93 BA |
116 | max-height: 100% |
117 | ||
3c24a27d BA |
118 | textarea |
119 | display: block | |
120 | margin: 0 var(--universal-margin) | |
121 | width: calc(100% - 2 * var(--universal-margin)) | |
122 | min-height: 100px | |
dd10eb93 | 123 | |
3c24a27d | 124 | .dialog |
dd10eb93 BA |
125 | padding: 5px |
126 | color: blue | |
127 | </style> |