logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

poll.vue (4186B)

    

  1. <template>
  2.   <div
  3.     class="poll"
  4.     :class="containerClass"
  5.   >
  6.     <div
  7.       :role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')"
  8.     >
  9.       <div
  10.         v-for="(option, index) in options"
  11.         :key="index"
  12.         class="poll-option"
  13.       >
  14.         <div
  15.           v-if="showResults"
  16.           :title="resultTitle(option)"
  17.           class="option-result"
  18.         >
  19.           <div class="option-result-label">
  20.             <span class="result-percentage">
  21.               {{ percentageForOption(option.votes_count) }}%
  22.             </span>
  23.             <RichContent
  24.               :html="option.title_html"
  25.               :handle-links="false"
  26.               :emoji="emoji"
  27.             />
  28.           </div>
  29.           <div
  30.             class="result-fill"
  31.             :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
  32.           />
  33.         </div>
  34.         <div
  35.           v-else
  36.           tabindex="0"
  37.           :role="poll.multiple ? 'checkbox' : 'radio'"
  38.           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
  39.           :aria-checked="choices[index]"
  40.           class="input unstyled"
  41.           @click="activateOption(index)"
  42.         >
  43.           <!-- TODO: USE CHECKBOX -->
  44.           <input
  45.             v-if="poll.multiple"
  46.             type="checkbox"
  47.             class="input -checkbox poll-checkbox"
  48.             :disabled="loading"
  49.             :value="index"
  50.           >
  51.           <input
  52.             v-else
  53.             type="radio"
  54.             :disabled="loading"
  55.             :value="index"
  56.             class="input -radio"
  57.           >
  58.           <label class="option-vote">
  59.             <RichContent
  60.               :id="`option-vote-${randomSeed}-${index}`"
  61.               :html="option.title_html"
  62.               :handle-links="false"
  63.               :emoji="emoji"
  64.             />
  65.           </label>
  66.         </div>
  67.       </div>
  68.     </div>
  69.     <div class="footer faint">
  70.       <button
  71.         v-if="!showResults"
  72.         class="btn button-default poll-vote-button"
  73.         type="button"
  74.         :disabled="isDisabled"
  75.         @click="vote"
  76.       >
  77.         {{ $t('polls.vote') }}
  78.       </button>
  79.       <span
  80.         v-if="poll.pleroma?.non_anonymous"
  81.         :title="$t('polls.non_anonymous_title')"
  82.       >
  83.         {{ $t('polls.non_anonymous') }}
  84.         &nbsp;·&nbsp;
  85.       </span>
  86.       <div class="total">
  87.         <template v-if="typeof poll.voters_count === 'number'">
  88.           {{ $t("polls.people_voted_count", { count: poll.voters_count }, poll.voters_count) }}
  89.         </template>
  90.         <template v-else>
  91.           {{ $t("polls.votes_count", { count: poll.votes_count }, poll.votes_count) }}
  92.         </template>
  93.         <span v-if="expiresAt !== null">
  94.           &nbsp;·&nbsp;
  95.         </span>
  96.       </div>
  97.       <span v-if="expiresAt !== null">
  98.         <i18n-t
  99.           scope="global"
  100.           :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
  101.         >
  102.           <Timeago
  103.             :time="expiresAt"
  104.             :auto-update="60"
  105.             :now-threshold="0"
  106.           />
  107.         </i18n-t>
  108.       </span>
  109.     </div>
  110.   </div>
  111. </template>
  113. <script src="./poll.js"></script>
  115. <style lang="scss">
  116. .poll {
  117.   .votes {
  118.     display: flex;
  119.     flex-direction: column;
  120.     margin: 0 0 0.5em;
  121.   }
  123.   .poll-option {
  124.     margin: 0.75em 0.5em;
  126.     .input {
  127.       line-height: inherit;
  128.     }
  129.   }
  131.   .option-result {
  132.     height: 100%;
  133.     display: flex;
  134.     flex-direction: row;
  135.     position: relative;
  136.     color: var(--textLight);
  137.   }
  139.   .option-result-label {
  140.     display: flex;
  141.     align-items: center;
  142.     padding: 0.1em 0.25em;
  143.     z-index: 1;
  144.     word-break: break-word;
  145.   }
  147.   .result-percentage {
  148.     width: 3.5em;
  149.     flex-shrink: 0;
  150.   }
  152.   .result-fill {
  153.     height: 100%;
  154.     position: absolute;
  155.     border-radius: var(--roundness);
  156.     top: 0;
  157.     left: 0;
  158.     transition: width 0.5s;
  159.   }
  161.   .option-vote {
  162.     display: flex;
  163.     align-items: center;
  164.   }
  166.   input {
  167.     width: 3.5em;
  168.   }
  170.   .footer {
  171.     display: flex;
  172.     align-items: center;
  173.   }
  175.   &.loading * {
  176.     cursor: progress;
  177.   }
  179.   .poll-vote-button {
  180.     padding: 0 0.5em;
  181.     margin-right: 0.5em;
  182.   }
  184.   .poll-checkbox {
  185.     display: none;
  186.   }
  187. }
  188. </style>