initial impl of plain gallery #91 #49

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

@@ -22,8 +22,9 @@
  SOFTWARE.
  */
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Image } from '../../interfaces/image.class';
+import { GridLayout, LineLayout, PlainGalleryConfig, PlainGalleryStrategy } from '../../interfaces/plain-gallery-config.interface';
 
 /**
  * Component with the gallery of thumbs.
@@ -37,13 +38,55 @@ import { Image } from '../../interfaces/image.class';
   templateUrl: 'gallery.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class GalleryComponent {
+export class GalleryComponent implements OnInit {
 
   @Input() images: Image[];
   @Input() showGallery: boolean;
+  @Input() plainGalleryConfig: PlainGalleryConfig;
 
   @Output() show: EventEmitter<number> = new EventEmitter<number>();
 
+  configPlainGallery: PlainGalleryConfig;
+
+  imageGrid: Image[][];
+
+  private defaultLayout: LineLayout = new LineLayout({length: 5, iconClass: '', otherCount: 2}, false);
+
+  private defaultPlainConfig: PlainGalleryConfig = {
+    strategy: PlainGalleryStrategy.ROW,
+    layout: this.defaultLayout,
+    size: {
+      width: 50,
+      height: 50,
+      unit: 'px'
+    }
+  };
+
+  ngOnInit() {
+    const config: PlainGalleryConfig = Object.assign({}, this.defaultPlainConfig, this.plainGalleryConfig);
+    console.log('plainGalleryConfig config', config);
+    // validate
+    if (config.layout instanceof LineLayout) {
+      if (config.strategy !== PlainGalleryStrategy.ROW && config.strategy !== PlainGalleryStrategy.COLUMN) {
+        throw new Error('LineLayout requires strategy: ROW or COLUMN');
+      }
+    }
+
+    if (config.layout instanceof GridLayout) {
+      if (config.strategy !== PlainGalleryStrategy.GRID && config.strategy !== PlainGalleryStrategy.ADVANCED_GRID) {
+        throw new Error('GridLayout requires strategy: GRID or ADVANCED_GRID');
+      }
+    }
+
+    // init
+    this.configPlainGallery = config;
+
+    console.log('plainGalleryConfig this.configPlainGallery', this.configPlainGallery);
+
+    // init imageGrid
+    // this.imageGrid = this.images;
+  }
+
   showModalGallery(index: number) {
     this.show.emit(index);
   }

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

@@ -51,6 +51,7 @@ import { KeyboardService } from '../../services/keyboard.service';
 import { DotsConfig } from '../../interfaces/dots-config.interface';
 import { CurrentImageComponent, ImageLoadEvent } from '../current-image/current-image.component';
 import { InternalLibImage } from '../../interfaces/image-internal.class';
+import { PlainGalleryConfig } from '../../interfaces/plain-gallery-config.interface';
 
 
 /**
@@ -153,6 +154,9 @@ export class ModalGalleryComponent implements OnInit, OnDestroy, OnChanges {
    */
   @Input() keyboardConfig: KeyboardConfig;
 
+  // TODO add doc
+  @Input() plainGalleryConfig: PlainGalleryConfig;
+
   /**
    * Output to emit an event when the modal gallery is closed.
    */

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

@@ -1,4 +1,7 @@
-<ks-gallery [images]="images" [showGallery]="showGallery" (show)="onShowModalGallery($event)"></ks-gallery>
+<ks-gallery [images]="images"
+            [showGallery]="showGallery"
+            [plainGalleryConfig]="plainGalleryConfig"
+            (show)="onShowModalGallery($event)"></ks-gallery>
 
 <ks-background [isOpen]="opened"
                [accessibilityConfig]="accessibilityConfig"></ks-background>

angular-modal-gallery/src/interfaces/plain-gallery-config.interface.ts

@@ -0,0 +1,59 @@
+/**
+ * Interface `PlainGalleryConfig` to configure
+ * plain-gallery features.
+ */
+export interface PlainGalleryConfig {
+  strategy: PlainGalleryStrategy;
+  layout: PlainGalleryLayout;
+  size: Size;
+}
+
+export class PlainGalleryLayout {
+  breakConfig: BreakConfig;
+
+  constructor(breakConfig: BreakConfig) {
+    this.breakConfig = breakConfig;
+  }
+}
+
+export class LineLayout extends PlainGalleryLayout {
+  reverse: boolean;
+
+  constructor(breakConfig: BreakConfig, reverse: boolean) {
+    super(breakConfig);
+    this.reverse = reverse;
+  }
+}
+
+export class GridLayout extends PlainGalleryLayout {
+  rows: number;
+  cols: number;
+
+  constructor(breakConfig: BreakConfig, rows: number, cols: number) {
+    super(breakConfig);
+    this.rows = rows;
+    this.cols = cols;
+  }
+}
+
+export enum PlainGalleryStrategy {
+  // don't use 0 here
+  // the first index is 1 and all of the following members are auto-incremented from that point on
+  ROW = 1,
+  COLUMN,
+  GRID,
+  ADVANCED_GRID
+}
+
+export interface Size {
+  width: number;
+  height: number;
+  unit: string;
+}
+
+
+export interface BreakConfig {
+  length: number;
+  iconClass: string;
+  otherCount: number;
+}