feat(): add experimental support to IE11 with legacyMode - still with…

… some bugs #144

README.md

@@ -248,9 +248,6 @@ Also, if you want to generate the `internal library documentation`, run `npm run
 - <a href="https://github.com/nikhil8krishnan">Nikhil Krishnan</a> - <a href="https://codepen.io/nikhil8krishnan/pen/dMEzGx">nikhil8krishnan example on codepen.io</a></li>
 - <a href="https://codepen.io/WebSonata/">Anastasiya Kuligina</a> - <a href="https://codepen.io/WebSonata/pen/bRaONB">Anastasiya Kuligina example on codepen.io</a></li>
 
-#### all authors of these projects
-- <a href="https://github.com/prettier/prettier">Prettier</a> for the style of its icon
-
 <br>
 
 ## :copyright: License :copyright:

projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts

@@ -65,6 +65,7 @@ import { AdvancedLayout, PlainGalleryConfig, PlainGalleryStrategy } from '../../
 import { PlayConfig } from '../../model/play-config.interface';
 import { CarouselConfig } from '../../model/carousel-config.interface';
 import { CarouselImageConfig } from '../../model/carousel-image-config.interface';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 /**
  * Component with configurable inline/plain carousel.
@@ -245,7 +246,14 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
     this.nextImage();
   }
 
-  constructor(@Inject(PLATFORM_ID) private _platformId, private _ngZone: NgZone, private galleryService: GalleryService, private ref: ChangeDetectorRef) {
+  constructor(
+    @Inject(PLATFORM_ID) private _platformId,
+    private _ngZone: NgZone,
+    private galleryService: GalleryService,
+    private ref: ChangeDetectorRef,
+    // sanitizer is used only to sanitize style before add it to background property when legacyIE11Mode is enabled
+    private sanitizer: DomSanitizer
+  ) {
     super();
   }
 
@@ -306,7 +314,8 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
       showArrows: true,
       objectFit: 'cover',
       keyboardEnable: true,
-      modalGalleryEnable: false
+      modalGalleryEnable: false,
+      legacyIE11Mode: false
     };
     const defaultCurrentCarouselPlay: PlayConfig = {
       autoPlay: true,
@@ -349,6 +358,11 @@ 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);
+  }
+
   /**
    * Method called when a dot is clicked and used to update the current image.
    * @param number index of the clicked dot

projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html

@@ -1,10 +1,12 @@
 <main id="carousel-container"
       [attr.aria-label]="accessibilityConfig.carouselContainerAriaLabel"
       [title]="accessibilityConfig.carouselContainerTitle"
-      ksSize [sizeConfig]="{width: configCarousel?.maxWidth,
-                                height: ''}">
+      ksMaxSize [sizeConfig]="{maxWidth: configCarousel?.maxWidth,
+                               maxHeight: ''}">
 
-  <figure id="current-figure"
+  <!-- Normal figure used by all browsers except for IE11, because
+    it doesn't support object-fit cover.-->
+  <figure class="current-figure" *ngIf="configCarousel?.legacyIE11Mode === false; else legacyMode"
           ksSize [sizeConfig]="{width: configCarousel?.maxWidth,
                                 height: ''}">
 
@@ -19,7 +21,7 @@
 
     <ng-content></ng-content>
 
-    <img id="current-image"
+    <img class="current-image"
          [style.object-fit]="configCarousel?.objectFit"
          ksMaxSize [sizeConfig]="{maxWidth: configCarousel?.maxWidth,
                                   maxHeight: configCarousel?.maxHeight}"
@@ -56,6 +58,53 @@
 
   </figure>
 
+  <!-- Legacy mode to support img cover also on IE11,
+    because it doesn't support natively object-fit cover. -->
+  <ng-template #legacyMode>
+    <div class="current-figure"
+         ksSize [sizeConfig]="{width: configCarousel?.maxWidth,
+                               height: ''}">
+
+      <a class="nav-left" *ngIf="configCarousel?.showArrows"
+         [attr.aria-label]="accessibilityConfig.carouselNextImageAriaLabel"
+         [tabindex]="isLastImage && !infinite ? -1 : 0" role="button"
+         (click)="onNavigationEvent('left', $event, clickAction)" (keyup)="onNavigationEvent('left', $event, keyboardAction)">
+        <div class="inside {{(isFirstImage && !infinite) || !configCarousel.showArrows ? 'empty-arrow-image' : 'left-arrow-image'}}"
+             aria-hidden="true"
+             [title]="accessibilityConfig.carouselNextImageTitle"></div>
+      </a>
+
+      <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'"
+           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>
+
+      <!--<figcaption *ngIf="getDescriptionToDisplay() !== ''"-->
+      <!--class="description"-->
+      <!--ksDescription [description]="configCurrentImageCarousel?.description"-->
+      <!--[innerHTML]="getDescriptionToDisplay()"></figcaption>-->
+
+      <a class="nav-right" *ngIf="configCarousel?.showArrows"
+         [attr.aria-label]="accessibilityConfig.carouselNextImageAriaLabel"
+         [tabindex]="isLastImage && !infinite ? -1 : 0" role="button"
+         (click)="onNavigationEvent('right', $event, clickAction)" (keyup)="onNavigationEvent('right', $event, keyboardAction)">
+        <div class="inside {{(isLastImage && !infinite) || !configCarousel.showArrows ? 'empty-arrow-image' : 'right-arrow-image'}}"
+             aria-hidden="true"
+             [title]="accessibilityConfig.carouselNextImageTitle"></div>
+      </a>
+
+    </div>
+  </ng-template>
+
 </main>
 
 <ks-carousel-previews [images]="images"

projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.scss

@@ -49,14 +49,13 @@ $figcaption-right: 0;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  //width: 100%; // required by Firefox
+  width: 100%;
 
-  > #current-figure {
+  > .current-figure {
     animation: fadein-visible $curr-img-animation-time;
     text-align: center;
     margin: $curr-img-margin;
     position: relative;
-    //width: 100%; // required by Firefox
 
     .nav {
       animation: animatezoom $nav-animation-time;
@@ -81,7 +80,8 @@ $figcaption-right: 0;
       right: $nav-right-position;
     }
 
-    > img {
+    > .current-image,
+    > .current-image {
       // max width is applied via Angular
       width: 100%;
       // max-width: 100%;

projects/ks89/angular-modal-gallery/src/lib/model/carousel-config.interface.ts

@@ -32,4 +32,5 @@ export interface CarouselConfig {
   objectFit: string;
   keyboardEnable: boolean;
   modalGalleryEnable: boolean;
+  legacyIE11Mode: boolean;
 }

src/app/carousel/carousel.component.html

@@ -1,54 +1,51 @@
 <h2 class="title">Carousel</h2>
 <hr>
 
+<p class="red-text">ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode.
+  For more info, please check the <a href="https://ks89.github.io/angular-modal-gallery-2018-v7.github.io/features/modal-gallery">official documentation</a>
+
 <h3>Basic examples</h3>
 <br>
 <section>
   <h3>A1 - (id=100) - carousel example (minimal with all defaults) without transclusion</h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
   <br>
   <ks-carousel [id]="100" [images]="imagesRect"></ks-carousel>
 </section>
 <br>
 <section>
   <h3>A2 - (id=101) - carousel example (minimal with all defaults)</h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
   <br>
   <ks-carousel [id]="101" [images]="imagesRect">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>A3 - (id=102) - carousel example without previews<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A3 - (id=102) - carousel example without previews</h3>
   <br>
   <ks-carousel [id]="102" [images]="imagesRect" [previewConfig]="{visible: false}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>A4 - (id=103) - carousel example without infinite sliding<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A4 - (id=103) - carousel example without infinite sliding</h3>
   <br>
   <ks-carousel [id]="103" [images]="imagesRect" [infinite]="false">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>A5 - (id=104) - carousel example without dots<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A5 - (id=104) - carousel example without dots</h3>
   <br>
   <ks-carousel [id]="104" [images]="imagesRect" [dotsConfig]="{visible: false}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>A6 - (id=105) - carousel example without auto-play<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A6 - (id=105) - carousel example without auto-play</h3>
   <br>
   <ks-carousel [id]="105" [images]="imagesRect"
                [playConfig]="{autoPlay: false}">
@@ -57,41 +54,37 @@ <h3>A6 - (id=105) - carousel example without auto-play<sup>*</sup></h3>
 </section>
 <br>
 <section>
-  <h3>A7 - (id=106) - carousel example with a custom playConfig (10s of interval and pauseOnHover disabled)<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A7 - (id=106) - carousel example with a custom playConfig (10s of interval and pauseOnHover disabled)</h3>
   <br>
   <ks-carousel [id]="106" [images]="imagesRect" [playConfig]="{autoPlay: true, interval: 10000, pauseOnHover: false}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>A8 - (id=107) - carousel example with a custom previewConfig (7 previews with 'auto' width and 100px of height)<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A8 - (id=107) - carousel example with a custom previewConfig (7 previews with 'auto' width and 100px of height)</h3>
   <br>
   <ks-carousel [id]="107" [images]="imagesRect" [previewConfig]="{number: 7, size: {width: 'auto', height: '100px'}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>A9 - (id=108) - carousel example with buttons to enable/disable autoplay, arrows and other properties<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>A9 - (id=108) - carousel example with buttons to enable/disable autoplay, arrows and other properties</h3>
   <p>Autoplay: <button class="btn btn-primary" (click)="onChangeAutoPlay()">{{autoPlay ? 'disable autoplay' : 'enable autoplay'}}</button></p>
   <p>Show Arrows: <button class="btn btn-primary" (click)="onChangeShowArrows()">{{showArrows ? 'Hide Arrows' : 'Show Arrows'}}</button></p>
   <p>Show Dots: <button class="btn btn-primary" (click)="onChangeShowDots()">{{showDots ? 'Hide Dots' : 'Show Dots'}}</button></p>
   <br>
   <ks-carousel [id]="108" [images]="imagesRect"
                [playConfig]="{autoPlay: autoPlay, interval: 3000, pauseOnHover: true}"
-               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: showArrows, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false}"
+               [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: showArrows, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: false}"
                [dotsConfig]="{visible: showDots}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
   <h3>A10 - (id=109) - carousel example (minimal with all defaults) with outputs</h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
   <br>
   <ks-carousel [id]="109" [images]="imagesRect"
     (show)="onShow($event)"
@@ -103,7 +96,7 @@ <h3>A10 - (id=109) - carousel example (minimal with all defaults) with outputs</
 
 <h3>Examples with custom style</h3>
 <section>
-  <h3>B1 - (id=110) - carousel example with fixed maxWidth (766px) and custom previews<sup>*</sup></h3>
+  <h3>B1 - (id=110) - carousel example with fixed maxWidth (766px) and custom previews</h3>
   <br>
   <ks-carousel [id]="110" [images]="imagesRect"
                [carouselConfig]="{maxWidth: '766px'}"
@@ -136,22 +129,52 @@ <h3>B3 - (id=112) - carousel example with fixed maxWidth (766px), custom preview
 
 <h3>Examples with custom current image</h3>
 <section>
-  <h3>C1 - (id=113) - carousel example with invert swipe on touchscreen devices<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>C1 - (id=113) - carousel example with invert swipe on touchscreen devices</h3>
   <br>
   <ks-carousel [id]="113" [images]="imagesRect" [carouselImageConfig]="{invertSwipe: true}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <section>
-  <h3>C2- (id=114) - carousel example with description<sup>*</sup></h3>
-  <p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
+  <h3>C2 - (id=114) - carousel example with description</h3>
   <br>
   <ks-carousel [id]="114" [images]="imagesRect" [carouselImageConfig]="{description: {strategy: 2}}">
     <div class="projected">This is my projected content!</div>
   </ks-carousel>
 </section>
 <br>
 <br>
+
+<h3>Examples with legacy mode enabled</h3>
+<section>
+  <h3>D1 - (id=115) - carousel example for IE11 (minimal with all defaults, but legacyMode enabled)</h3>
+  <p>Obviously, objectFit is ignored when legacyIE11Mode is enabled</p>
+  <br>
+  <ks-carousel [id]="115" [images]="imagesRect"
+    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: showArrows, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}">
+    <div class="projected">This is my projected content!</div>
+  </ks-carousel>
+</section>
+<br>
+<section>
+  <h3>D2 - (id=116) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews</h3>
+  <br>
+  <ks-carousel [id]="116" [images]="imagesRect"
+    [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: showArrows, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+    [previewConfig]="{number: 5, size: {width: 'auto', height: '100px'}}">
+    <div class="projected">This is my projected content!</div>
+  </ks-carousel>
+</section>
+<br>
+<section>
+  <h3>D3 - (id=117) - carousel example for IE11 with description and legacyMode enabled</h3>
+  <br>
+  <ks-carousel [id]="117" [images]="imagesRect"
+    [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: showArrows, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}"
+    [carouselImageConfig]="{description: {strategy: 2}}">
+    <div class="projected">This is my projected content!</div>
+  </ks-carousel>
+</section>
+<br>
 <br>

src/app/carousel/carousel.component.ts

@@ -43,41 +43,41 @@ export class CarouselComponent {
     new Image(
       0,
       {
-        img: '../assets/images/gallery/milan-pegasus-gallery-statue.jpg',
+        img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg',
         description: 'Description 1'
       },
-      { img: '../assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg' }
+      { img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg' }
     ),
-    new Image(1, { img: '../assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '../assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }),
+    new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }),
     new Image(
       2,
       {
-        img: '../assets/images/gallery/pexels-photo-52062.jpeg',
+        img: '/assets/images/gallery/pexels-photo-52062.jpeg',
         description: 'Description 3'
       },
       {
-        img: '../assets/images/gallery/thumbs/t-pexels-photo-52062.jpg',
+        img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg',
         description: 'Description 3'
       }
     ),
     new Image(
       3,
       {
-        img: '../assets/images/gallery/pexels-photo-66943.jpeg',
+        img: '/assets/images/gallery/pexels-photo-66943.jpeg',
         description: 'Description 4'
       },
-      { img: '../assets/images/gallery/thumbs/t-pexels-photo-66943.jpg' }
+      { img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg' }
     ),
-    new Image(4, { img: '../assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '../assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }),
+    new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }),
     new Image(
       5,
       {
-        img: '../assets/images/gallery/pexels-photo-94420.jpeg',
+        img: '/assets/images/gallery/pexels-photo-94420.jpeg',
         description: 'Description 6'
       },
-      { img: '../assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' }
+      { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' }
     ),
-    new Image(6, { img: '../assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '../assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' })
+    new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' })
   ];
 
   accessibilityConfig: AccessibilityConfig = {