Merge pull request #1 from twogate/feature/flexible-button

projects/core/src/lib/components/lightbox/lightbox.component.html

@@ -22,6 +22,7 @@
           <button class="pswp__button pswp__button--share" title="Share"></button>
           <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
           <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+          <div class="pswp__button--unique"></div>
           <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
           <!-- element will get class pswp__preloader--active when preloader is running -->
           <div class="pswp__preloader">

projects/core/src/lib/components/lightbox/lightbox.component.scss

@@ -74,7 +74,7 @@
     width: $toolbar-height;
     &::before {
       background-color: rgba(black, .5);
-      border-radius: 50%;
+      border-radius: calc(#{$toolbar-height} / 2);
       bottom: 0;
       content: '';
       left: 0;
@@ -117,4 +117,21 @@
   .pswp__caption__center {
     min-height: 40px;
   }
+  .pswp__button--unique {
+    height: $toolbar-height;
+    min-width: calc(#{$toolbar-height} + 8px);
+    .pswp__button {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 60%;
+    }
+  }
+  .pswp__button--no-image {
+    background-image: unset !important;
+    color: white;
+    min-width: $toolbar-height;
+    padding: 0 8px;
+    white-space: nowrap;
+    width: auto;
+  }
 }

projects/core/src/lib/directives/photo-gallery-group.directive.ts

@@ -3,7 +3,8 @@ import PhotoSwipe from 'photoswipe';
 import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
 
 import { PhotoGalleryConfig } from '../interfaces/config';
-import { GalleryImage, GalleryItem, GalleryOptions } from '../interfaces/photoswipe';
+import { GalleryImage, GalleryItem, ExpandedGalleryOptions, GalleryOptions } from '../interfaces/photoswipe';
+import { ExpandedOptionsService } from '../services/expanded-options.service';
 import { LightboxService } from '../services/lightbox.service';
 
 export const DEFAULT_OPTIONS = {
@@ -27,11 +28,15 @@ export class PhotoGalleryGroupDirective {
   private galleryItems: { [key: string]: GalleryItem } = {};
   private galleryItemIds: Set<string> = new Set<string>();
   private galleryImages: GalleryImage[] = [];
-  @Input('photoGalleryGroup') options: GalleryOptions;
+  @Input('photoGalleryGroup') options: ExpandedGalleryOptions;
   @Output() onPhotoGalleryInit = new EventEmitter();
   @Output() onPhotoGalleryDestroy = new EventEmitter();
 
-  constructor(@Optional() private photoGalleryConfig: PhotoGalleryConfig, private lightboxService: LightboxService) {
+  constructor(
+    @Optional() private photoGalleryConfig: PhotoGalleryConfig,
+    private lightboxService: LightboxService,
+    private expandedOptionsService: ExpandedOptionsService
+  ) {
     this.defaultOptions = { ...DEFAULT_OPTIONS, ...this.photoGalleryConfig?.defaultOptions };
   }
 
@@ -67,7 +72,7 @@ export class PhotoGalleryGroupDirective {
 
     this.galleryImages = [...this.galleryItemIds].map((key) => this.galleryItems[key].image);
     const idx = this.galleryImages.findIndex((image) => image.id === id);
-    const options: GalleryOptions = { ...this.defaultOptions, ...this.options };
+    const options: ExpandedGalleryOptions = { ...this.defaultOptions, ...this.options };
     options.index = idx;
     options.getThumbBoundsFn = (imageIndex: number) => {
       const key = this.galleryImages[imageIndex].id;
@@ -112,7 +117,10 @@ export class PhotoGalleryGroupDirective {
     this.gallery.listen('destroy', () => {
       this.onPhotoGalleryDestroy.emit();
     });
-    this.onPhotoGalleryInit.emit();
+
+    this.expandedOptionsService.initExpandedOptions(this.gallery, options);
+
+    this.onPhotoGalleryInit.emit(this.gallery);
     this.gallery.init();
   }
 

projects/core/src/lib/interfaces/photoswipe.ts

@@ -75,3 +75,16 @@ export interface GalleryOptions {
   getTextForShare?: (shareButtonData: GalleryShareButton[]) => string;
   parseShareButtonOut?: (shareButtonData: GalleryShareButton[], shareButtonOut: string) => string;
 }
+
+export interface ExpandedGalleryOptions extends GalleryOptions {
+  uniqueButtonEl?: boolean;
+  uniqueButtonOptions: UniqueButtonOption[];
+}
+
+export interface UniqueButtonOption {
+  title: string;
+  text?: string;
+  image?: string;
+  eventName: string;
+  eventFn?: (pswp: any, lightbox: HTMLElement) => void;
+}

projects/core/src/lib/services/expanded-options.service.ts

@@ -0,0 +1,66 @@
+import {
+  Injectable,
+  Renderer2,
+  RendererFactory2,
+} from '@angular/core';
+
+import { ExpandedGalleryOptions, UniqueButtonOption } from '../interfaces/photoswipe';
+
+import { LightboxService } from './lightbox.service';
+
+@Injectable({ providedIn: 'root' })
+export class ExpandedOptionsService {
+  private renderer: Renderer2;
+  private gallery: any;
+  private lightbox: HTMLElement;
+
+  constructor(
+    private _renderer: RendererFactory2,
+    private lightboxService: LightboxService
+  ) {
+    this.renderer = _renderer.createRenderer(null, null);
+  }
+
+  initExpandedOptions(_gallery: any, options: ExpandedGalleryOptions): void {
+    this.gallery = _gallery;
+    this.lightbox = this.lightboxService.getLightboxElement();
+
+    this.initUniqueButtonEl(options?.uniqueButtonEl, options?.uniqueButtonOptions);
+  }
+
+  private initUniqueButtonEl(hasUniqueButtonEl: boolean, uniqueButtonOptions: UniqueButtonOption[])  {
+    const uniqueButtonEl: Element = this.lightbox.getElementsByClassName('pswp__button--unique')[0];
+    if (!hasUniqueButtonEl || !uniqueButtonOptions.length || !uniqueButtonEl) {
+      return;
+    }
+
+    const buttons = [];
+    uniqueButtonOptions.forEach((option) => {
+      const button = this.renderer.createElement('button');
+      this.renderer.addClass(button, 'pswp__button');
+      this.renderer.addClass(button, `pswp__button--${this.camel2Kebab(option.eventName)}`);
+      if (option?.image) {
+        this.renderer.setStyle(button, 'background-image', `url(${option.image}`);
+      } else if (option?.text) {
+        this.renderer.addClass(button, 'pswp__button--no-image');
+        this.renderer.appendChild(button, this.renderer.createText(option.text));
+      }
+      this.renderer.setAttribute(button, 'title', option.title);
+      this.renderer.listen(button, 'click', () => {
+        return option?.eventFn && option?.eventFn(this.gallery, this.lightbox);
+      });
+      this.renderer.appendChild(uniqueButtonEl, button);
+      buttons.push(button);
+    });
+
+    // onDestroy
+    this.gallery.listen('destroy', () => {
+      buttons.forEach((button) => this.renderer.removeChild(uniqueButtonEl, button));
+    });
+  }
+  private camel2Kebab(camel: string): string {
+    return camel
+      .replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
+      .replace(/^-+/, () => '');
+  }
+}