Merge pull request #113 from plank/112-copy-html-button-supports-mult…

…iple-file-types #112 handle various file types
plank · Mar 2, 2023 · 247f224 · 247f224
2 parents 5244ce4 + 9e2a098
commit 247f224
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=f4d8afadebce22452363",
+    "/app.js": "/app.js?id=4d9e32631e182a3f8786",
     "/app.css": "/app.css?id=dc258845c11ff8f92ee0",
     "/images/icon-add.svg": "/images/icon-add.svg?id=f35ff7376a119c2d780b",
     "/images/icon-arrow-back.svg": "/images/icon-arrow-back.svg?id=963a92661eaa72c7bfd3",

diff --git a/resources/js/components/slidepanel/mm-slidepanel.vue b/resources/js/components/slidepanel/mm-slidepanel.vue
@@ -76,7 +76,7 @@
         <span>{{ this.data.created_at | moment("MMMM Do, YYYY") }}</span>
       </p>
       <div class="mm__slidepanel-infos__buttons">
-        <button :style="styleBtnDefault"  class="btn btn-default" v-on:click="copyImageHtml(data)">Copy Html</button>
+        <button :style="styleBtnDefault"  class="btn btn-default" v-on:click="copyHtml(data)">Copy Html</button>
         <button v-if="isAttached" :style="styleBtnDefault"  class="btn btn-default"
         v-on:click="removeAttachment(data, tag, model, model_id)">Remove attachment</button>
       </div>
@@ -197,8 +197,42 @@ export default {
         handleContent(this.$store.state.selectedElem);
         this.close();
     },
-    copyImageHtml: function(image) {
-      let imageHtml = `<div><img ${getAttributes(image)} /> </div>`;
+    copyHtml: function(file) {
+      let content = ``;
+
+      switch(file.aggregate_type) {
+
+        case 'image':
+        case 'vector':
+          content = `<img ${getAttributes(file)}/>`;
+          break;
+
+        case 'video':
+          content = `<video width="100%" height="240" controls>
+              <source src="${file.url}" type="video/mp4"/>
+              <source src="${file.url}" type="video/ogg"/>
+              Your browser does not support the video tag.
+            </video>`;
+          break;
+
+        case 'audio':
+          content = `<audio controls>
+              <source src="${file.url}" type="audio/ogg"/>
+              <source src="${file.url}" type="audio/mpeg"/>
+              Your browser does not support the audio element.
+            </audio>`;
+          break;
+
+        case 'pdf':
+        case 'spreadsheet':
+          content = `<iframe src="${file.url}" width="640" height="1500" align="center" frameborder="0"/>`;
+          break;
+
+        default:
+          content = `<a href="${file.url}">Open ${file.title}</a>`
+      }
+
+      let html = `<div>` + content + `</div>`;
 
       let dummyTextarea = document.createElement( "textarea" );
 
@@ -208,7 +242,7 @@ export default {
       dummyTextarea.style.position = "fixed";
 
       document.body.append(dummyTextarea);
-      dummyTextarea.innerHTML = imageHtml;
+      dummyTextarea.innerHTML = html;
       dummyTextarea.select();
       dummyTextarea.focus();