feat: image pointer feature to provide a custom plain gallery #49

angular-modal-gallery/src/components/gallery/gallery.html

@@ -20,7 +20,7 @@
       <ng-template #aTags>
         <a *ngIf="imgCol && imgCol.img"
            href="#"
-           class="aTagImage"
+           class="a-tag-image"
            ksATagBgImage [image]="imgCol" [style]="'50% 50%/cover'"
            ksSize [sizeConfig]="{width: configPlainGallery.size.width, height: configPlainGallery.size.height}"
            (click)="showModalGallery(j)"></a>

angular-modal-gallery/src/components/gallery/gallery.scss

@@ -23,26 +23,26 @@
  */
 
 .plain-container {
-  display: flex;
   align-items: center;
+  display: flex;
 
   // defined via Angular using DirectionDirective
   //flex-direction: row;
   //justify-content: flex-start;
 
   .image {
-    width: 50px;
+    cursor: pointer;
     height: auto;
     margin-left: 2px;
     margin-right: 2px;
-    cursor: pointer;
+    width: 50px;
   }
 
-  .aTagImage  {
+  .a-tag-image {
+    cursor: pointer;
     //width: 50px;
     //height: auto;
     margin-left: 2px;
     margin-right: 2px;
-    cursor: pointer;
   }
 }

angular-modal-gallery/src/components/modal-gallery/modal-gallery.component.ts

@@ -23,17 +23,7 @@
  */
 
 import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  PLATFORM_ID,
-  SimpleChanges,
+  ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, PLATFORM_ID, SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
@@ -103,6 +93,11 @@ export class ModalGalleryComponent implements OnInit, OnDestroy, OnChanges {
    * this library with all images, thumbs and so on.
    */
   @Input() modalImages: Image[];
+
+  // TODO add docs
+  @Input() modalOpenerByIndex = -1;
+  @Input() hideDefaultPlainGallery = false;
+
   /**
    * Boolean required to enable image download with both ctrl+s/cmd+s and download button.
    * If you want to show enable button, this is not enough. You have to use also `buttonsConfig`.
@@ -231,13 +226,26 @@ export class ModalGalleryComponent implements OnInit, OnDestroy, OnChanges {
    * @param changes `SimpleChanges` object of current and previous property values provided by Angular.
    */
   ngOnChanges(changes: SimpleChanges) {
-    // TODO probably I should check changes.something
+    // TODO probably I should check changes.modalImages.previousValue and currentValue
+    // TODO also using changes.modalImages.firstChange to check if it is the first
+    // TODO change of this property
+
     if (this.modalImages) {
       // I pass `false` as parameter, because I DON'T want to emit `hasData`
       // event (preventing multiple hasData events while initializing).
       // `hasData` should be emitted only one time.
       this.initImages(false);
     }
+
+    console.log('changes', changes);
+    if (changes && changes.modalOpenerByIndex) {
+      const prevModalOpenerIndex: number = changes.modalOpenerByIndex.previousValue;
+      const currModalOpenerIndex: number = changes.modalOpenerByIndex.currentValue;
+      if (prevModalOpenerIndex !== currModalOpenerIndex && currModalOpenerIndex !== -1) {
+        console.log('opening modal gallery from custom plain gallery, index: ', currModalOpenerIndex);
+        this.showModalGallery(currModalOpenerIndex);
+      }
+    }
   }
 
   /**

angular-modal-gallery/src/components/modal-gallery/modal-gallery.html

@@ -1,5 +1,5 @@
 <ks-gallery [images]="images"
-            [showGallery]="showGallery"
+            [showGallery]="showGallery && !hideDefaultPlainGallery"
             [plainGalleryConfig]="plainGalleryConfig"
             (show)="onShowModalGallery($event)"></ks-gallery>
 

src/app/app.component.html

@@ -32,11 +32,37 @@ <h3>Z2 - column plain gallery layout (limit 3)</h3>
                     [plainGalleryConfig]="plainGalleryColumn"></ks-modal-gallery>
 </section>
 <section>
-  <h3>Z3 - grid plain gallery layout  and custom size</h3>
+  <h3>Z3 - grid plain gallery layout and custom size</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [plainGalleryConfig]="plainGalleryGrid"></ks-modal-gallery>
 </section>
+<section>
+  <h3>Z4 - full custom plain gallery with image pointer</h3>
+  <br>
+  <div class="my-app-custom-plain-container">
+    <ng-container *ngFor="let img of images; let i = index">
+      <div *ngIf="i <= 2"> <!-- 2 is a fixed value that I'm using to display only two images -->
+        <a class="more" *ngIf="i==2" (click)="openImageModal(img)"> +{{images.length - 2 - 1}} more </a>
+        <img *ngIf="img.thumb; else noThumb"
+             class="my-app-custom-image"
+             [src]="img.thumb"
+             (click)="openImageModal(img)"
+             [alt]="img.description"/>
+
+        <ng-template #noThumb>
+          <img class="my-app-custom-image"
+               [src]="img.img"
+               (click)="openImageModal(img)"
+               [alt]="img.description"/>
+        </ng-template>
+      </div>
+    </ng-container>
+  </div>
+  <ks-modal-gallery [modalImages]="images"
+                    [modalOpenerByIndex]="currentIndexCustomLayout"
+                    [hideDefaultPlainGallery]="true"></ks-modal-gallery>
+</section>
 <br>
 <hr>
 <br>
@@ -258,7 +284,8 @@ <h3>C8 - Advanced demo - preview custom configuration not clickable</h3>
                     [previewConfig]="previewConfigNoClickable"></ks-modal-gallery>
 </section>
 <section>
-  <h3>C9 - Advanced demo - preview custom configuration always center <span style="color:red;">STILL NOT IMPLEMENTED</span></h3>
+  <h3>C9 - Advanced demo - preview custom configuration always center <span
+    style="color:red;">STILL NOT IMPLEMENTED</span></h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [previewConfig]="previewConfigAlwaysCenter"></ks-modal-gallery>
@@ -279,7 +306,8 @@ <h3>C11 - Advanced demo - accessibility config</h3>
 </section>
 
 <section>
-  <h3>C12 - Advanced demo - buttons config FULL strategy (all buttons) + listen for buttonBeforeHook and buttonAfterHook</h3>
+  <h3>C12 - Advanced demo - buttons config FULL strategy (all buttons) + listen for buttonBeforeHook and
+    buttonAfterHook</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [buttonsConfig]="buttonsConfigFull"

src/app/app.component.scss

@@ -1,31 +1,62 @@
-.more {
-  position: absolute;
-  margin-top: 2px;
-  background: rgba(0, 0, 0, 0.7);
-  height: 50px;
-  width: 50px;
-  padding-left: 0;
-  padding-top: 2px;
-  text-align: center;
-}
+/*
+ The MIT License (MIT)
 
-.list-img {
-  height: 50px;
-  margin-top: 2px;
-  cursor: pointer;
-}
+ Copyright (c) 2017 Stefano Cappa (Ks89)
 
-.float-left {
-  float: left;
-  margin-right: 5px;
-  color: #ffffff;
-}
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
 
-.float-left a:hover {
-  color: red;
-  cursor: pointer;
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+
+$text-color: #fff;
+$background: rgba(0, 0, 0, .7);
+
+.my-app-custom-plain-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  .my-app-custom-image {
+    cursor: pointer;
+    height: auto;
+    margin-right: 2px;
+    width: 50px;
+
+    &.after {
+      border-top: 2px;
+      cursor: pointer;
+      display: none;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
 }
 
-.white {
-  color: white;
+.more {
+  background: $background;
+  cursor: pointer;
+  color: $text-color;
+  padding-top: 4px;
+  height: 46px;
+  position: absolute;
+  text-align: center;
+  width: 50px;
 }

src/app/app.component.ts

@@ -36,8 +36,7 @@ import {
 })
 export class AppComponent {
 
-  openModalWindow = false;
-  imagePointer = 0;
+  currentIndexCustomLayout = -1;
 
   plainGalleryRow: PlainGalleryConfig = {
     strategy: PlainGalleryStrategy.ROW,
@@ -341,8 +340,12 @@ export class AppComponent {
   };
 
   openImageModal(image: Image) {
-    this.imagePointer = this.images.indexOf(image);
-    this.openModalWindow = true;
+    console.log('Opening modal gallery from custom plain gallery, with image: ', image);
+    if (image) {
+      this.currentIndexCustomLayout = this.images.indexOf(image);
+    } else {
+      this.currentIndexCustomLayout = -1;
+    }
   }
 
   onButtonBeforeHook(event: ButtonEvent) {
@@ -406,7 +409,7 @@ export class AppComponent {
   onCloseImageModal(event: ImageModalEvent) {
     console.log('onClose action: ' + Action[event.action]);
     console.log('onClose result:' + event.result);
-    this.openModalWindow = false;
+    this.currentIndexCustomLayout = -1;
   }
 
   addRandomImage() {