fix(): trying to fix ie11 using legacyIE11Mode without object-fit but…

… with image background #144
Ks89 · Oct 21, 2018 · e223e61 · e223e61
1 parent 16e6f8f
commit e223e61
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 21 deletions.
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
@@ -49,6 +49,7 @@ import { CarouselConfig } from '../../../model/carousel-config.interface';
 import { NEXT, PREV } from '../../../utils/user-input.util';
 import { getIndex } from '../../../utils/image.util';
 import { Action } from '../../../model/action.enum';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 /**
  * Component with image previews
@@ -142,6 +143,13 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
    */
   end: number;
 
+  constructor(
+    // sanitizer is used only to sanitize style before add it to background property when legacyIE11Mode is enabled
+    private sanitizer: DomSanitizer
+  ) {
+    super();
+  }
+
   /**
    * Method ´ngOnInit´ to build `configPreview` applying a default value and also to
    * init the `previews` array.
@@ -306,6 +314,11 @@ 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);
+  }
+
   /**
    * Private method to init previews based on the currentImage and the full array of images.
    * The current image in mandatory to show always the current preview (as highlighted).

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,18 +14,40 @@
 
   <div class="preview-inner-container">
     <ng-container *ngFor="let preview of previews; trackBy: trackById; let index = index">
-      <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"
-           ksSize [sizeConfig]="{width: configPreview?.size?.width,
+      <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"
+             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)"/>
+             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)"/>
+      </ng-container>
+      <ng-template #legacyMode>
+        <img *ngIf="preview?.modal?.img"
+             [style.background-color]="'transparent'"
+             [style.background-image]="sanitizeStyle('url(' + 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)"/>
+      </ng-template>
     </ng-container>
   </div>
 

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
@@ -21,7 +21,7 @@
 
     <ng-content></ng-content>
 
-    <img class="current-image"
+    <img id="current-image"
          [style.object-fit]="configCarousel?.objectFit"
          ksMaxSize [sizeConfig]="{maxWidth: configCarousel?.maxWidth,
                                   maxHeight: configCarousel?.maxHeight}"
@@ -77,21 +77,26 @@
       <ng-content></ng-content>
 
       <div id="current-image-legacy"
-           [style.background]="sanitizeStyle('transparent url(' + currentImage.modal.img + ') no-repeat center center scroll')"
-           [style.background-size]="'cover'"
+           [style.background-color]="'transparent'"
+           [style.background-image]="sanitizeStyle('url(' + currentImage.modal.img + ')')"
+           [style.background-position]="'center center'"
+           [style.background-size]="configCarousel?.maxWidth + ' ' + (configCarousel?.maxWidth === '100%' ? 'auto' : configCarousel?.maxHeight)"
+           [style.background-repeat]="'no-repeat'"
+           [style.background-attachment]="'scroll'"
            ksSize [sizeConfig]="{width: configCarousel?.maxWidth,
                                  height: configCarousel?.maxHeight}"
            [attr.aria-label]="currentImage.modal.ariaLabel"
            [title]="currentImage.modal.title ? currentImage.modal.title : getTitleToDisplay()"
            [tabindex]="0" role="img"
            (click)="onClickCurrentImage()"
            (swipeleft)="swipe($event.type)"
-           (swiperight)="swipe($event.type)"></div>
+           (swiperight)="swipe($event.type)">
 
-      <!--<figcaption *ngIf="getDescriptionToDisplay() !== ''"-->
-      <!--class="description"-->
-      <!--ksDescription [description]="configCurrentImageCarousel?.description"-->
-      <!--[innerHTML]="getDescriptionToDisplay()"></figcaption>-->
+        <div *ngIf="getDescriptionToDisplay() !== ''"
+             class="description-ie11"
+             ksDescription [description]="configCurrentImageCarousel?.description"
+             [innerHTML]="getDescriptionToDisplay()"></div>
+      </div>
 
       <a class="nav-right" *ngIf="configCarousel?.showArrows"
          [attr.aria-label]="accessibilityConfig.carouselNextImageAriaLabel"

diff --git a/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.scss b/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.scss
@@ -80,15 +80,30 @@ $figcaption-right: 0;
       right: $nav-right-position;
     }
 
-    > .current-image,
-    > .current-image {
+    > #current-image {
       // max width is applied via Angular
       width: 100%;
       // max-width: 100%;
       height: auto;
       display: block;
     }
 
+    > #current-image-legacy {
+      // max width is applied via Angular
+      width: 100%;
+      // max-width: 100%;
+      height: auto;
+      display: block;
+
+      > .description-ie11 {
+        bottom: 0;
+        width: 100%;
+        position: absolute;
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+
     > figcaption {
       padding: $figcaption-padding;
       position: $figcaption-position;