Attachment click handler (#3077)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/attachment-resources/src/components/AttachmentPresenter.svelte

@@ -44,28 +44,48 @@
       contentType.startsWith('application/msword')
     )
   }
+
+  function clickHandler (e: MouseEvent) {
+    if (!openEmbedded(value.type)) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.metaKey || e.ctrlKey) {
+      window.open((e.target as HTMLAnchorElement).href, '_blank')
+      return
+    }
+    closeTooltip()
+    showPopup(
+      PDFViewer,
+      { file: value.file, name: value.name, contentType: value.type, value },
+      isImage(value.type) ? 'centered' : 'float'
+    )
+  }
+
+  function middleClickHandler (e: MouseEvent) {
+    if (e.button !== 1) return
+    e.preventDefault()
+    e.stopPropagation()
+    window.open((e.target as HTMLAnchorElement).href, '_blank')
+  }
 </script>
 
 <div class="flex-row-center attachment-container">
-  {#if openEmbedded(value.type)}
+  <a
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    class="no-line"
-    <div
+    href={getFileUrl(value.file)}
-      class="flex-center icon"
+    download={value.name}
-      on:click={() => {
+    on:click={clickHandler}
-        closeTooltip()
+    on:mousedown={middleClickHandler}
-        showPopup(
+  >
-          PDFViewer,
+    <div class="flex-center icon">
-          { file: value.file, name: value.name, contentType: value.type, value },
-          isImage(value.type) ? 'centered' : 'float'
-        )
-      }}
-    >
       {iconLabel(value.name)}
       {#if removable}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="remove-btn"
-          on:click|preventDefault={(ev) => {
+          on:click={(ev) => {
             ev.stopPropagation()
+            ev.preventDefault()
             dispatch('remove')
           }}
         >
@@ -73,45 +93,13 @@
         </div>
       {/if}
     </div>
-  {:else}
+  </a>
-    <a class="no-line" href={getFileUrl(value.file)} download={value.name}>
-      <div class="flex-center icon">
-        {iconLabel(value.name)}
-        {#if removable}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <div
-            class="remove-btn"
-            on:click={(ev) => {
-              ev.stopPropagation()
-              ev.preventDefault()
-              dispatch('remove')
-            }}
-          >
-            <Icon icon={IconClose} size={'medium'} />
-          </div>
-        {/if}
-      </div>
-    </a>
-  {/if}
   <div class="flex-col info">
-    {#if openEmbedded(value.type)}
+    <div class="name">
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <a href={getFileUrl(value.file)} download={value.name} on:click={clickHandler} on:mousedown={middleClickHandler}>
-      <div
-        class="name"
-        on:click={() => {
-          closeTooltip()
-          showPopup(
-            PDFViewer,
-            { file: value.file, name: value.name, contentType: value.type, value },
-            isImage(value.type) ? 'centered' : 'float'
-          )
-        }}
-      >
         {trimFilename(value.name)}
-      </div>
+      </a>
-    {:else}
+    </div>
-      <div class="name"><a href={getFileUrl(value.file)} download={value.name}>{trimFilename(value.name)}</a></div>
-    {/if}
     <div class="type">{filesize(value.size)}</div>
   </div>
 </div>