fix(): many fixes fot IE11 with legacyIE11Mode enabled #144

Ks89 · Oct 21, 2018 · 2b60f4b · 2b60f4b
1 parent a5ebd7d
commit 2b60f4b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...odal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts b/...odal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts
@@ -314,9 +314,9 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
     return item.id;
   }
 
-  sanitizeStyle(unsafeStyle: string): SafeStyle {
-    // Method used only  to sanitize style before add it to background property when legacyIE11Mode is enabled
-    return this.sanitizer.bypassSecurityTrustStyle(unsafeStyle);
+  sanitizeUrlBgStyle(unsafeStyle: string): SafeStyle {
+    // Method used only to sanitize background-image style before add it to background property when legacyIE11Mode is enabled
+    return this.sanitizer.bypassSecurityTrustStyle('url(' + unsafeStyle + ')');
   }
 
   /**

diff --git a/...ngular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html b/...ngular-modal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.html
@@ -14,7 +14,7 @@
 
   <div class="preview-inner-container">
     <ng-container *ngFor="let preview of previews; trackBy: trackById; let index = index">
-      <ng-container *ngIf="carouselConfig?.legacyIE11Mode; else legacyMode">
+      <ng-container *ngIf="!carouselConfig?.legacyIE11Mode; else legacyMode">
         <img *ngIf="preview?.modal?.img"
              class="inside preview-image {{isActive(preview) ? 'active' : ''}}{{!configPreview.clickable ? ' unclickable' : ''}}"
              [src]="preview.plain?.img ? preview.plain.img : preview.modal.img"
@@ -29,24 +29,21 @@
              (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"/>
       </ng-container>
       <ng-template #legacyMode>
-        <img *ngIf="preview?.modal?.img"
+        <div *ngIf="preview?.modal?.img"
              [style.background-color]="'transparent'"
-             [style.background-image]="sanitizeStyle('url(' + preview.plain?.img ? preview.plain.img : preview.modal.img + ')')"
+             [style.background-image]="sanitizeUrlBgStyle(preview.plain?.img ? preview.plain.img : preview.modal.img)"
              [style.background-position]="'center center'"
              [style.background-size]="carouselConfig?.maxWidth + ' ' + (carouselConfig?.maxWidth === '100%' ? 'auto' : carouselConfig?.maxHeight)"
              [style.background-repeat]="'no-repeat'"
              [style.background-attachment]="'scroll'"
-             class="inside preview-image {{isActive(preview) ? 'active' : ''}}{{!configPreview.clickable ? ' unclickable' : ''}}"
-             [src]="preview.plain?.img ? preview.plain.img : preview.modal.img"
              ksSize [sizeConfig]="{width: configPreview?.size?.width,
                                  height: configPreview?.size?.height}"
              ksMargin [marginLeft]="carouselConfig?.maxWidth !== '100%' ? '0px' : '2px'"
              [marginRight]="carouselConfig?.maxWidth !== '100%' ? '0px' : '2px'"
              [attr.aria-label]="preview.modal.ariaLabel ? preview.modal.ariaLabel : ''"
              [title]="preview.modal.title ? preview.modal.title : ''"
-             alt="{{preview.modal.alt ? preview.modal.alt : ''}}"
              [tabindex]="0" role="img"
-             (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"/>
+             (click)="onImageEvent(preview, $event, clickAction)" (keyup)="onImageEvent(preview, $event, keyboardAction)"></div>
       </ng-template>
     </ng-container>
   </div>

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts
@@ -358,9 +358,9 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
     }
   }
 
-  sanitizeStyle(unsafeStyle: string): SafeStyle {
-    // Method used only  to sanitize style before add it to background property when legacyIE11Mode is enabled
-    return this.sanitizer.bypassSecurityTrustStyle(unsafeStyle);
+  sanitizeUrlBgStyle(unsafeStyle: string): SafeStyle {
+    // Method used only to sanitize background-image style before add it to background property when legacyIE11Mode is enabled
+    return this.sanitizer.bypassSecurityTrustStyle('url(' + unsafeStyle + ')');
   }
 
   /**

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html
@@ -78,7 +78,7 @@
 
       <div id="current-image-legacy"
            [style.background-color]="'transparent'"
-           [style.background-image]="sanitizeStyle('url(' + currentImage.modal.img + ')')"
+           [style.background-image]="sanitizeUrlBgStyle(currentImage.modal.img + '')"
            [style.background-position]="'center center'"
            [style.background-size]="configCarousel?.maxWidth + ' ' + (configCarousel?.maxWidth === '100%' ? 'auto' : configCarousel?.maxHeight)"
            [style.background-repeat]="'no-repeat'"