feat: Add dotsPosition option, closes #211

MurhafSousli · Nov 17, 2018 · 263d297 · 263d297
1 parent e2e58b6
commit 263d297
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/projects/core/src/lib/components/gallery-core.component.ts b/projects/core/src/lib/components/gallery-core.component.ts
@@ -68,4 +68,7 @@ export class GalleryCoreComponent {
     return this.config.imageSize;
   }
 
-}
+  /** Set gallery dots position */
+  @HostBinding('attr.dotsPosition') get dotsPosition(): 'top' | 'bottom' {
+    return this.config.dotsPosition;
+  }
diff --git a/projects/core/src/lib/models/config.model.ts b/projects/core/src/lib/models/config.model.ts
@@ -21,6 +21,7 @@ export interface GalleryConfig {
   thumbTemplate?: TemplateRef<any>;
   thumbMode?: 'strict' | 'free';
   imageSize?: 'cover' | 'contain';
+  dotsPosition?: 'top' | 'bottom';
   slidingDirection?: 'horizontal' | 'vertical';
   loadingStrategy?: 'preload' | 'lazy' | 'default';
   thumbPosition?: 'top' | 'left' | 'right' | 'bottom';

diff --git a/projects/core/src/lib/styles/dots.scss b/projects/core/src/lib/styles/dots.scss
@@ -1,4 +1,10 @@
 ::ng-deep {
+  gallery-core[dotsPosition='top'] gallery-dots {
+    top: 0;
+  }
+  gallery-core[dotsPosition='bottom'] gallery-dots {
+    bottom: 0;
+  }
   gallery-dots {
     display: flex;
     justify-content: center;

diff --git a/projects/core/src/lib/utils/gallery.default.ts b/projects/core/src/lib/utils/gallery.default.ts
@@ -27,6 +27,7 @@ export const defaultConfig: GalleryConfig = {
   panSensitivity: 25,
   disableThumb: false,
   playerInterval: 3000,
+  dotsPosition: 'bottom',
   imageSize: ImageSize.Contain,
   thumbMode: ThumbnailsMode.Strict,
   thumbPosition: ThumbnailsPosition.Bottom,