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   div.bio-div(
   8     role="dialog"
   9     :data-checkbox="'modalBio_' + uid"
  10   )
  11     .card
  12       div(v-if="st.user.id == uid")
  13         div.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
 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>