logo

pleroma-fe

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

post_status_form.vue (13758B)

    

  1. <template>
  2.   <div
  3.     ref="form"
  4.     class="post-status-form"
  5.   >
  6.     <form
  7.       autocomplete="off"
  8.       @submit.prevent
  9.       @dragover.prevent="fileDrag"
  10.     >
  11.       <div class="form-group">
  12.         <i18n-t
  13.           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
  14.           keypath="post_status.account_not_locked_warning"
  15.           tag="p"
  16.           class="visibility-notice"
  17.           scope="global"
  18.         >
  19.           <button
  20.             class="button-unstyled -link"
  21.             @click="openProfileTab"
  22.           >
  23.             {{ $t('post_status.account_not_locked_warning_link') }}
  24.           </button>
  25.         </i18n-t>
  26.         <p
  27.           v-if="!hideScopeNotice && newStatus.visibility === 'public'"
  28.           class="visibility-notice notice-dismissible"
  29.         >
  30.           <span>{{ $t('post_status.scope_notice.public') }}</span>
  31.           <a
  32.             class="fa-scale-110 fa-old-padding dismiss"
  33.             :title="$t('post_status.scope_notice_dismiss')"
  34.             role="button"
  35.             tabindex="0"
  36.             @click.prevent="dismissScopeNotice()"
  37.           >
  38.             <FAIcon icon="times" />
  39.           </a>
  40.         </p>
  41.         <p
  42.           v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
  43.           class="visibility-notice notice-dismissible"
  44.         >
  45.           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
  46.           <a
  47.             class="fa-scale-110 fa-old-padding dismiss"
  48.             :title="$t('post_status.scope_notice_dismiss')"
  49.             role="button"
  50.             tabindex="0"
  51.             @click.prevent="dismissScopeNotice()"
  52.           >
  53.             <FAIcon icon="times" />
  54.           </a>
  55.         </p>
  56.         <p
  57.           v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
  58.           class="visibility-notice notice-dismissible"
  59.         >
  60.           <span>{{ $t('post_status.scope_notice.private') }}</span>
  61.           <a
  62.             class="fa-scale-110 fa-old-padding dismiss"
  63.             :title="$t('post_status.scope_notice_dismiss')"
  64.             role="button"
  65.             tabindex="0"
  66.             @click.prevent="dismissScopeNotice()"
  67.           >
  68.             <FAIcon icon="times" />
  69.           </a>
  70.         </p>
  71.         <p
  72.           v-else-if="newStatus.visibility === 'direct'"
  73.           class="visibility-notice"
  74.         >
  75.           <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
  76.           <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
  77.         </p>
  78.         <div
  79.           v-if="isEdit"
  80.           class="visibility-notice edit-warning"
  81.         >
  82.           <p>{{ $t('post_status.edit_remote_warning') }}</p>
  83.           <p>{{ $t('post_status.edit_unsupported_warning') }}</p>
  84.         </div>
  85.         <div
  86.           v-if="!disablePreview"
  87.           class="preview-heading faint"
  88.         >
  89.           <a
  90.             class="preview-toggle faint"
  91.             @click.stop.prevent="togglePreview"
  92.           >
  93.             {{ $t('post_status.preview') }}
  94.             <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
  95.           </a>
  96.           <div
  97.             v-show="previewLoading"
  98.             class="preview-spinner"
  99.           >
  100.             <FAIcon
  101.               class="fa-old-padding"
  102.               spin
  103.               icon="circle-notch"
  104.             />
  105.           </div>
  106.           <div
  107.             v-if="quotable"
  108.             role="radiogroup"
  109.             class="btn-group reply-or-quote-selector"
  110.           >
  111.             <button
  112.               :id="`reply-or-quote-option-${randomSeed}-reply`"
  113.               class="btn button-default reply-or-quote-option"
  114.               :class="{ toggled: !newStatus.quoting }"
  115.               tabindex="0"
  116.               role="radio"
  117.               :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
  118.               :aria-checked="!newStatus.quoting"
  119.               @click="newStatus.quoting = false"
  120.             >
  121.               {{ $t('post_status.reply_option') }}
  122.             </button>
  123.             <button
  124.               :id="`reply-or-quote-option-${randomSeed}-quote`"
  125.               class="btn button-default reply-or-quote-option"
  126.               :class="{ toggled: newStatus.quoting }"
  127.               tabindex="0"
  128.               role="radio"
  129.               :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
  130.               :aria-checked="newStatus.quoting"
  131.               @click="newStatus.quoting = true"
  132.             >
  133.               {{ $t('post_status.quote_option') }}
  134.             </button>
  135.           </div>
  136.         </div>
  137.         <div
  138.           v-if="showPreview"
  139.           class="preview-container"
  140.         >
  141.           <div
  142.             v-if="!preview"
  143.             class="preview-status"
  144.           >
  145.             {{ $t('general.loading') }}
  146.           </div>
  147.           <div
  148.             v-else-if="preview.error"
  149.             class="preview-status preview-error"
  150.           >
  151.             {{ preview.error }}
  152.           </div>
  153.           <StatusContent
  154.             v-else
  155.             :status="preview"
  156.             class="preview-status"
  157.           />
  158.         </div>
  159.         <EmojiInput
  160.           v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
  161.           v-model="newStatus.spoilerText"
  162.           enable-emoji-picker
  163.           :suggest="emojiSuggestor"
  164.           class="input form-control"
  165.         >
  166.           <template #default="inputProps">
  167.             <input
  168.               v-model="newStatus.spoilerText"
  169.               type="text"
  170.               :placeholder="$t('post_status.content_warning')"
  171.               :disabled="posting && !optimisticPosting"
  172.               v-bind="propsToNative(inputProps)"
  173.               size="1"
  174.               class="input form-post-subject"
  175.             >
  176.           </template>
  177.         </EmojiInput>
  178.         <EmojiInput
  179.           ref="emoji-input"
  180.           v-model="newStatus.status"
  181.           :suggest="emojiUserSuggestor"
  182.           :placement="emojiPickerPlacement"
  183.           class="input form-control main-input"
  184.           enable-sticker-picker
  185.           enable-emoji-picker
  186.           hide-emoji-button
  187.           :newline-on-ctrl-enter="submitOnEnter"
  188.           @input="onEmojiInputInput"
  189.           @sticker-uploaded="addMediaFile"
  190.           @sticker-upload-failed="uploadFailed"
  191.           @shown="handleEmojiInputShow"
  192.         >
  193.           <template #default="inputProps">
  194.             <textarea
  195.               ref="textarea"
  196.               v-model="newStatus.status"
  197.               :placeholder="placeholder || $t('post_status.default')"
  198.               rows="1"
  199.               cols="1"
  200.               :disabled="posting && !optimisticPosting"
  201.               class="input form-post-body"
  202.               :class="{ 'scrollable-form': !!maxHeight }"
  203.               v-bind="propsToNative(inputProps)"
  204.               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
  205.               @keydown.meta.enter="postStatus($event, newStatus)"
  206.               @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
  207.               @input="resize"
  208.               @compositionupdate="resize"
  209.               @paste="paste"
  210.             />
  211.             <p
  212.               v-if="hasStatusLengthLimit"
  213.               class="character-counter faint"
  214.               :class="{ error: isOverLengthLimit }"
  215.             >
  216.               {{ charactersLeft }}
  217.             </p>
  218.           </template>
  219.         </EmojiInput>
  220.         <div
  221.           v-if="!disableScopeSelector"
  222.           class="visibility-tray"
  223.         >
  224.           <scope-selector
  225.             v-if="!disableVisibilitySelector"
  226.             :show-all="showAllScopes"
  227.             :user-default="userDefaultScope"
  228.             :original-scope="copyMessageScope"
  229.             :initial-scope="newStatus.visibility"
  230.             :on-scope-change="changeVis"
  231.           />
  233.           <div
  234.             v-if="postFormats.length > 1"
  235.             class="text-format"
  236.           >
  237.             <Select
  238.               v-model="newStatus.contentType"
  239.               class="input form-control"
  240.               :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
  241.             >
  242.               <option
  243.                 v-for="postFormat in postFormats"
  244.                 :key="postFormat"
  245.                 :value="postFormat"
  246.               >
  247.                 {{ $t(`post_status.content_type["${postFormat}"]`) }}
  248.               </option>
  249.             </Select>
  250.           </div>
  251.           <div
  252.             v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
  253.             class="text-format"
  254.           >
  255.             <span class="only-format">
  256.               {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
  257.             </span>
  258.           </div>
  259.         </div>
  260.       </div>
  261.       <poll-form
  262.         v-if="pollsAvailable"
  263.         ref="pollForm"
  264.         :visible="pollFormVisible"
  265.         :params="newStatus.poll"
  266.       />
  267.       <span
  268.         v-if="!disableDraft && shouldAutoSaveDraft"
  269.         class="auto-save-status"
  270.       >
  271.         {{ autoSaveState }}
  272.       </span>
  273.       <div
  274.         ref="bottom"
  275.         class="form-bottom"
  276.       >
  277.         <div class="form-bottom-left">
  278.           <media-upload
  279.             ref="mediaUpload"
  280.             class="media-upload-icon"
  281.             :drop-files="dropFiles"
  282.             :disabled="uploadFileLimitReached"
  283.             @uploading="startedUploadingFiles"
  284.             @uploaded="addMediaFile"
  285.             @upload-failed="uploadFailed"
  286.             @all-uploaded="finishedUploadingFiles"
  287.           />
  288.           <button
  289.             class="emoji-icon button-unstyled"
  290.             :title="$t('emoji.add_emoji')"
  291.             @click="showEmojiPicker"
  292.           >
  293.             <FAIcon icon="smile-beam" />
  294.           </button>
  295.           <button
  296.             v-if="pollsAvailable"
  297.             class="poll-icon button-unstyled"
  298.             :class="{ selected: pollFormVisible }"
  299.             :title="$t('polls.add_poll')"
  300.             @click="togglePollForm"
  301.           >
  302.             <FAIcon icon="poll-h" />
  303.           </button>
  304.         </div>
  305.         <div class="btn-group post-button-group">
  306.           <button
  307.             class="btn button-default post-button"
  308.             :disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"
  309.             @click.stop.prevent="postStatus($event, newStatus)"
  310.           >
  311.             <template v-if="posting">
  312.               {{ $t('post_status.posting') }}
  313.             </template>
  314.             <template v-else>
  315.               {{ $t('post_status.post') }}
  316.             </template>
  317.           </button>
  318.           <Popover
  319.             v-if="!hideExtraActions"
  320.             class="more-post-actions"
  321.             :normal-button="true"
  322.             trigger="click"
  323.             placement="bottom"
  324.             :offset="{ y: 5 }"
  325.           >
  326.             <template #trigger>
  327.               <FAIcon
  328.                 class="fa-scale-110 fa-old-padding"
  329.                 icon="chevron-down"
  330.               />
  331.             </template>
  332.             <template #content="{close}">
  333.               <div
  334.                 class="dropdown-menu"
  335.                 role="menu"
  336.               >
  337.                 <button
  338.                   v-if="!hideDraft || !disableDraft"
  339.                   class="menu-item dropdown-item"
  340.                   role="menu"
  341.                   :disabled="!safeToSaveDraft && saveable"
  342.                   :class="{ disabled: !safeToSaveDraft }"
  343.                   @click.prevent="saveDraft"
  344.                   @click="close"
  345.                 >
  346.                   <template v-if="closeable">
  347.                     {{ $t('post_status.save_to_drafts_and_close_button') }}
  348.                   </template>
  349.                   <template v-else>
  350.                     {{ $t('post_status.save_to_drafts_button') }}
  351.                   </template>
  352.                 </button>
  353.               </div>
  354.             </template>
  355.           </Popover>
  356.         </div>
  357.       </div>
  358.       <div
  359.         v-show="showDropIcon !== 'hide'"
  360.         :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
  361.         class="drop-indicator"
  362.         @dragleave="fileDragStop"
  363.         @drop.stop="fileDrop"
  364.       >
  365.         <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
  366.       </div>
  367.       <div
  368.         v-if="error"
  369.         class="alert error"
  370.       >
  371.         Error: {{ error }}
  372.         <button
  373.           class="button-unstyled"
  374.           @click="clearError"
  375.         >
  376.           <FAIcon
  377.             class="fa-scale-110 fa-old-padding"
  378.             icon="times"
  379.           />
  380.         </button>
  381.       </div>
  382.       <gallery
  383.         v-if="newStatus.files && newStatus.files.length > 0"
  384.         class="attachments"
  385.         :grid="true"
  386.         :nsfw="false"
  387.         :attachments="newStatus.files"
  388.         :descriptions="newStatus.mediaDescriptions"
  389.         :set-media="() => $store.dispatch('setMedia', newStatus.files)"
  390.         :editable="true"
  391.         :edit-attachment="editAttachment"
  392.         :remove-attachment="removeMediaFile"
  393.         :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
  394.         :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
  395.         @play="$emit('mediaplay', attachment.id)"
  396.         @pause="$emit('mediapause', attachment.id)"
  397.       />
  398.       <div
  399.         v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
  400.         class="upload_settings"
  401.       >
  402.         <Checkbox v-model="newStatus.nsfw">
  403.           {{ $t('post_status.attachments_sensitive') }}
  404.         </Checkbox>
  405.       </div>
  406.     </form>
  407.     <DraftCloser
  408.       ref="draftCloser"
  409.       @save="saveAndCloseDraft"
  410.       @discard="discardAndCloseDraft"
  411.     />
  412.   </div>
  413. </template>
  415. <script src="./post_status_form.js"></script>
  417. <style src="./post_status_form.scss" lang="scss"></style>