From 944160353a13720b21d287ab6c252047e2fe9a66 Mon Sep 17 00:00:00 2001
From: Benjamin Brandmeier <bdvlop@gmail.com>
Date: Sat, 8 Apr 2023 15:40:00 +0200
Subject: [PATCH] add optional parameter [includeViewer] to support use cases
 where viewer is placed outside the gallery component manually

---
 README.md                                     | 34 ++++++++++++++++---
 projects/angular2-image-gallery/package.json  |  2 +-
 .../src/lib/gallery/gallery.component.html    |  2 +-
 .../src/lib/gallery/gallery.component.ts      |  1 +
 src/app/demo.component.html                   |  4 ++-
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index d0e7ebb..4154f87 100644
--- a/README.md
+++ b/README.md
@@ -68,13 +68,19 @@ Additional optional parameter to support multiple galleries. Add it if you want
     [flexImageSize]="7"
     [galleryName]="'yourGalleryName'"
     [maxRowsPerPage]="100"
-    (viewerChange)="yourNotificationFunction($event)">
-</gallery>
+    (viewerChange)="yourNotificationFunction($event)"
+    [includeViewer]="true"
+></gallery>
 ```
 
-All parameters are optional. You may play around on the demo site to find out what parameters suit your needs.
+All parameters are optional.
 
-The viewerChange event fires once the viewer component gets opened or closed.
+* **[flexBorderSize]** used to define the border thickness between the images within the gallery.
+* **[flexImageSize]** used to define the size of the images with the gallery (not the viewer).
+* **[galleryName]** used when having multiple galleries.
+* **[maxRowsPerPage]** maximum rows per gallery, this will add navigation arrows once the threshold is reached.
+* **[viewerChange]** event fires once the viewer component gets opened or closed.
+* **[includeViewer]** provides an option to manually place the viewer outside the default DOM structure. Defaults to true.
 
 ## Different use cases
 ### Fetching images from an external data source
@@ -90,3 +96,23 @@ This is possible, but not the intent of this project. Please [CLICK HERE](https:
 If the conversion process fails, make sure you have enough swap space provided.
 
 If you experience any other issues, please raise an issue on GitHub.
+
+## Changelog
+
+### 15.1.0
+
+* Adding optional parameter [includeViewer] to support use cases where viewer is placed outside the gallery component manually
+
+### 15.0.0
+
+* Angular 15 support
+* Performance improvements
+
+### 14.1.0
+
+* Refactor convert script entirely
+* Provide smoother output for image conversion process
+
+### 14.0.0
+
+* Angular 14 support
diff --git a/projects/angular2-image-gallery/package.json b/projects/angular2-image-gallery/package.json
index 9454c0d..f724585 100644
--- a/projects/angular2-image-gallery/package.json
+++ b/projects/angular2-image-gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular2-image-gallery",
-  "version": "15.0.0",
+  "version": "15.1.0",
   "description": "Responsive Angular 15 image gallery",
   "repository": {
     "type": "git",
diff --git a/projects/angular2-image-gallery/src/lib/gallery/gallery.component.html b/projects/angular2-image-gallery/src/lib/gallery/gallery.component.html
index 8d2b8d5..077285e 100644
--- a/projects/angular2-image-gallery/src/lib/gallery/gallery.component.html
+++ b/projects/angular2-image-gallery/src/lib/gallery/gallery.component.html
@@ -31,4 +31,4 @@
   </div>
 </div>
 
-<viewer></viewer>
+<viewer *ngIf="includeViewer"></viewer>
diff --git a/projects/angular2-image-gallery/src/lib/gallery/gallery.component.ts b/projects/angular2-image-gallery/src/lib/gallery/gallery.component.ts
index 80a47a3..9ee1180 100644
--- a/projects/angular2-image-gallery/src/lib/gallery/gallery.component.ts
+++ b/projects/angular2-image-gallery/src/lib/gallery/gallery.component.ts
@@ -41,6 +41,7 @@ export class GalleryComponent implements OnInit, OnDestroy, OnChanges {
   @Input('galleryName') providedGalleryName: string = ''
   @Input('metadataUri') providedMetadataUri: string = undefined
   @Input('maxRowsPerPage') rowsPerPage: number = 200
+  @Input('includeViewer') includeViewer = true
 
   @Output() viewerChange = new EventEmitter<boolean>()
 
diff --git a/src/app/demo.component.html b/src/app/demo.component.html
index 6b6a006..2efd4e3 100644
--- a/src/app/demo.component.html
+++ b/src/app/demo.component.html
@@ -23,5 +23,7 @@
   [flexBorderSize]="flexBorderSize"
   [flexImageSize]="flexImageSize"
   [maxRowsPerPage]="15"
-  [galleryName]="galleryName"></gallery>
+  [galleryName]="galleryName"
+  [includeViewer]="false">
+</gallery>
 <br /><br />