add open image link

src/app/components/media-viewer/media-viewer.component.html

@@ -1,5 +1,7 @@
-<div class="media-viewer-canvas" (click)="close()">
-    <button class="media-viewer-canvas__close media-viewer-canvas__button" title="close">
+<div class="media-viewer-canvas noselect">
+    <div class="background__close" (click)="close()"></div>
+
+    <button class="media-viewer-canvas__close media-viewer-canvas__button" title="close" (click)="close()">
         <fa-icon [icon]="faTimes"></fa-icon>
     </button>
 
@@ -13,16 +15,17 @@
         <fa-icon [icon]="faAngleRight"></fa-icon>
     </button>
 
-    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement" [ngClass]="{ 'collapsed': currentIndex !== att.index }">
-        <img *ngIf="att.type === 'image'" 
-            src="{{att.url}}" class="media-viewer-canvas__image" (click)="blockClick($event)" />
+    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement"
+        [ngClass]="{ 'collapsed': currentIndex !== att.index }">
+        <a href="{{att.url}}" target="_blank" title="open image">
+            <img *ngIf="att.type === 'image'" src="{{att.url}}" class="media-viewer-canvas__image" />
+        </a>
 
-        <video *ngIf="att.type === 'gifv'" 
-            class="media-viewer-canvas__image"  role="application" loop autoplay (click)="blockClick($event)">
+        <video *ngIf="att.type === 'gifv'" class="media-viewer-canvas__image" role="application" loop autoplay>
             <source src="{{att.url}}" type="video/mp4">
         </video>
-        <video *ngIf="att.type === 'video'" 
-            class="media-viewer-canvas__image" role="application" loop autoplay controls="controls" (click)="blockClick($event)">
+        <video *ngIf="att.type === 'video'" class="media-viewer-canvas__image" role="application" loop autoplay
+            controls="controls">
             <source src="{{att.url}}" type="video/mp4">
         </video>
     </div>

src/app/components/media-viewer/media-viewer.component.scss

@@ -1,12 +1,13 @@
 @import "variables";
+@import "commons";
 @import "mixins";
 
 .media-viewer-canvas {
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
+    // background-color: rgba(0, 0, 0, 0.8);
     overflow: hidden;
-    position: relative;
+    position: relative;   
     
     &__button {
         @include clearButton;
@@ -61,11 +62,13 @@
     }
 
     &__attachement {
-        max-width: 100%;
-        height: 100vh;    
+        // max-width: 100%;
+        // height: 100vh;    
     }
 
     &__image {
+        z-index: 10;
+
         @media screen and (min-width: $screen-break) {
             max-width: 85%;
         }
@@ -89,6 +92,16 @@
     }
 }
 
+.background__close {
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
 .collapsed {
     height: 0;
 }

src/sass/_commons.scss

@@ -1,7 +1,7 @@
 .waiting-icon {
     width: 40px;
     display: block;
-    margin:  5px auto;    
+    margin: 5px auto;
 }
 
 .flexcroll {
@@ -12,9 +12,11 @@
     scrollbar-darkshadow-color: #08090d;
     scrollbar-track-color: #08090d;
     scrollbar-arrow-color: #08090d;
+
     &::-webkit-scrollbar {
         width: 7px;
     }
+
     &::-webkit-scrollbar-thumb {
         -webkit-border-radius: 0px;
         border-radius: 0px;
@@ -35,4 +37,19 @@
     width: 20px;
     height: 20px;
     vertical-align: middle;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently supported by Chrome and Opera */
 }