feat: make uploading and adding image to posts possible

epochtalk · Nov 20, 2021 · f02e906 · f02e906
1 parent 2fb16c2
commit f02e906
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/src/components/images/ImageUploader.vue b/src/components/images/ImageUploader.vue
@@ -71,7 +71,7 @@ Promise.each = async (arr, fn) => { for(const item of arr) await fn(item) }
 
 export default {
   name: 'image-uploader',
-  props: ['onUpload-success', 'onUpload-error', 'onHover-stop', 'purpose', 'showDropzone'],
+  props: ['onUpload-success', 'onUpload-error', 'onHover-stop', 'purpose', 'showDropzone', 'onDone'],
   components: { Modal },
   setup(props, { emit }) { //, { emit }) {
     /* View Methods */
@@ -158,7 +158,10 @@ export default {
                 let imageRoot = image.policy.storageType === 'local' ? window.images_local_root : ''
                 emit('upload-success', imageRoot + url)
               }
-              else v.images.push(image)
+              else {
+                v.images.push(image)
+                fireDone(image)
+              }
             })
             .catch(function(err) {
               updateImagesUploading(index)
@@ -220,7 +223,11 @@ export default {
       if (v.uploadingImages <= 0) v.imagesUploading = false
     }
 
-    const fireDone = () => console.log('done')
+    const fireDone = image => {
+      image.added = true
+      props.onDone(image.url.indexOf('/') === 0 ? imageUrl(image) : image.url)
+      setTimeout(() => image.added = false, 1000)
+    }
 
     const v = reactive({
       hover: false,

diff --git a/src/components/layout/Editor.vue b/src/components/layout/Editor.vue
@@ -157,7 +157,7 @@
 
           <div class="editor-body" @dragenter.prevent="showDropzone = true" @dragover.prevent="showDropzone = true">
             <div class="editor-column-input" :class="{ 'hidden': preview }">
-              <textarea class="editor-input" v-if="threadEditorMode" v-model="threadCopy.body" :class="{ 'rtl': rightToLeft }" placeholder="Write someting interesting! (BTW, you can drag and drop images directly into the editor panel)" :maxlength="postMaxLength || 10000"></textarea>
+              <textarea class="editor-input" v-if="threadEditorMode" v-model="threadCopy.body" :class="{ 'rtl': rightToLeft }" placeholder="Write someting interesting! (BTW, you can drag and drop images directly into the editor panel)" :maxlength="postMaxLength || 10000" ref="threadEditorEl"></textarea>
               <textarea class="editor-input" v-if="postEditorMode" v-model="posting.post.body" :class="{ 'rtl': rightToLeft }" placeholder="Enter your reply here. (BTW, you can drag and drop images directly into the editor panel)" :maxlength="postMaxLength || 10000" ref="postEditorEl"></textarea>
               <textarea class="editor-input" v-if="editorConvoMode || (!threadEditorMode && !editorConvoMode && !postEditorMode)" v-model="newMessage.content.body" :class="{ 'rtl': rightToLeft }" :placeholder="editorConvoMode ? 'Enter your message here. (BTW, you can drag and drop images directly into the editor panel)' : 'Enter your reply here. (BTW, you can drag and drop images directly into the editor panel)'" :maxlength="postMaxLength || 10000" ref="messageEditorEl"></textarea>
               <div class="editor-drag-container" :class="{ 'visible': showDropzone}">
@@ -174,7 +174,7 @@
 
           <div class="editor-footer">
             <div class="editor-image-uploader">
-              <image-uploader purpose="editor" @upload-success="() => {}" @upload-error="() => {}" :show-dropzone="showDropzone" @hover-stop="showDropzone = false" />
+              <image-uploader purpose="editor" @upload-success="() => {}" @upload-error="() => {}" :show-dropzone="showDropzone" @hover-stop="showDropzone = false" :on-done="insertImageUrl" />
             </div>
           </div>
           <!-- END EDITOR -->
@@ -192,10 +192,10 @@
           <button class="inverted-button cancel" @click="cancel()">
             Cancel
           </button>
-          <button class="no-animate send" v-if="editorConvoMode" @click.prevent="createAction(newMessage).then(closeEditor)" :disabled="!canCreate() || !newMessage.content.body.length || !newMessage.content.subject.length || !newMessage.receiver_ids.length">
+          <button class="no-animate send" v-if="editorConvoMode" @click.prevent="createAction(newMessage).then(closeEditor)" :disabled="!canCreate() || !newMessage?.content?.body?.length || !newMessage?.content?.subject?.length || !newMessage?.receiver_ids?.length">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Send
           </button>
-          <button class="no-animate send" v-if="!editorConvoMode" @click.prevent="updateAction(newMessage).then(closeEditor)" :disabled="!canUpdate() || !newMessage.content.body.length">
+          <button class="no-animate send" v-if="!editorConvoMode" @click.prevent="updateAction(newMessage).then(closeEditor)" :disabled="!canUpdate() || !newMessage?.content?.body?.length">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;Send Reply
           </button>
 
@@ -293,23 +293,31 @@ export default {
       }
     }
 
-    const loadDraft = (postBody) => {
+    const loadDraft = body => {
       if (v.editMode || v.quoteMode) return
       let draftPromise
       if (props.postEditorMode || props.threadEditorMode) {
         draftPromise = postsApi.getPostDraft
       }
       else draftPromise = messagesApi.getMessageDraft
       draftPromise().then(data => {
-        if (data.draft && !postBody && confirm('Load Draft?')) {
+        if (data.draft && body !== data.draft && confirm('Load Draft?')) {
           if (props.postEditorMode) v.posting.post.body = data.draft
           else if (props.threadEditorMode) v.threadCopy.body = data.draft
           else v.newMessage.content.body = data.draft
         }
-        else if (data.draft && postBody !== data.draft && props.postEditorMode && confirm('Load Draft?')) v.posting.post.body = data.draft
       })
     }
 
+    const insertImageUrl = url => {
+      if (!url) return
+      let imageCode = '[img]' + url + '[/img]'
+      v.preview = false // show compose tab
+      if (props.threadEditorMode) v.threadCopy.body = v.threadCopy.body + imageCode
+      else if (props.postEditorMode) v.posting.post.body = v.posting.post.body + imageCode
+      else if (props.currentMessage) v.newMessage.content.body = v.newMessage.content.body + imageCode
+    }
+
     /* View Data */
     const v = reactive({
       isMinimized: true,
@@ -329,6 +337,7 @@ export default {
       newMessage: { receiver_ids: [], conversation_id: null, content: { subject: '', body: '' } },
       rightToLeft: false,
       threadTitleEl: null,
+      threadEditorEl: null,
       postEditorEl: null,
       messageReceiverEl: null,
       messageEditorEl: null,
@@ -402,7 +411,7 @@ export default {
       })
     })
 
-    return { ...toRefs(v), cancel, closeEditor, onPollValidation }
+    return { ...toRefs(v), cancel, closeEditor, insertImageUrl, onPollValidation }
   }
 }
 </script>

diff --git a/src/views/Posts.vue b/src/views/Posts.vue
@@ -1094,7 +1094,7 @@ $postWidth__mobile: calc(100vw - 2rem);
   ul, ol { @include pad(0 0 0 1.15rem); }
   ul { white-space: normal }
   img.loaded { opacity: 1; }
-  img { @include transition(opacity 0.5s ease-in); opacity: 0; }
+  img { @include transition(opacity 0.5s ease-in); opacity: 1; }
   & table {
     display: block;
     overflow-x: scroll;