feat: add Square thumbnails #76 - now you can choose between <img> or…

… <a> images
Ks89 · Dec 12, 2017 · 4ae5916 · 4ae5916
1 parent 00c21da
commit 4ae5916
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 29 deletions.
diff --git a/angular-modal-gallery/src/components/gallery/gallery.component.ts b/angular-modal-gallery/src/components/gallery/gallery.component.ts
@@ -64,6 +64,9 @@ export class GalleryComponent implements OnInit {
     size: {
       width: '50px',
       height: 'auto'
+    },
+    advanced: {
+      aTags: false
     }
   };
 

diff --git a/angular-modal-gallery/src/components/gallery/gallery.html b/angular-modal-gallery/src/components/gallery/gallery.html
@@ -5,12 +5,27 @@
 
   <ng-container *ngFor="let imgRow of imageGrid; let i = index">
     <ng-container *ngFor="let imgCol of imgRow; let j = index">
-      <img *ngIf="imgCol && imgCol.img"
-           [src]="imgCol.thumb ? imgCol.thumb : imgCol.img"
-           class="image"
+
+      <ng-container *ngIf="!configPlainGallery.advanced?.aTags; else aTags">
+        <img *ngIf="imgCol && imgCol.img"
+             [src]="imgCol.thumb ? imgCol.thumb : imgCol.img"
+             class="image"
+             ksSize [sizeConfig]="{width: configPlainGallery.size.width, height: configPlainGallery.size.height}"
+             alt="{{getAltDescriptionByIndex(j)}}"
+             (click)="showModalGallery(j)"/>
+      </ng-container>
+
+      <!-- Add directive to set background with the image url as param to pass thumb or img-->
+      <!-- to do something like this <a style="background: url('path to image') 50% 50%/cover">.-->
+      <ng-template #aTags>
+        <a *ngIf="imgCol && imgCol.img"
+           href="#"
+           class="aTagImage"
+           ksATagBgImage [image]="imgCol" [style]="'50% 50%/cover'"
            ksSize [sizeConfig]="{width: configPlainGallery.size.width, height: configPlainGallery.size.height}"
-           alt="{{getAltDescriptionByIndex(j)}}"
-           (click)="showModalGallery(j)"/>
+           (click)="showModalGallery(j)"></a>
+      </ng-template>
+
     </ng-container>
   </ng-container>
 

diff --git a/angular-modal-gallery/src/components/gallery/gallery.scss b/angular-modal-gallery/src/components/gallery/gallery.scss
@@ -2,7 +2,6 @@
  The MIT License (MIT)
 
  Copyright (c) 2017 Stefano Cappa (Ks89)
- Copyright (c) 2016 vimalavinisha
 
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
@@ -38,4 +37,12 @@
     margin-right: 2px;
     cursor: pointer;
   }
+
+  .aTagImage  {
+    //width: 50px;
+    //height: auto;
+    margin-left: 2px;
+    margin-right: 2px;
+    cursor: pointer;
+  }
 }
diff --git a/angular-modal-gallery/src/components/modal-gallery/modal-gallery.component.ts b/angular-modal-gallery/src/components/modal-gallery/modal-gallery.component.ts
@@ -2,7 +2,6 @@
  The MIT License (MIT)
 
  Copyright (c) 2017 Stefano Cappa (Ks89)
- Copyright (c) 2016 vimalavinisha (only for version 1)
 
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal

diff --git a/angular-modal-gallery/src/components/upper-buttons/upper-buttons.scss b/angular-modal-gallery/src/components/upper-buttons/upper-buttons.scss
@@ -4,7 +4,6 @@
  The MIT License (MIT)
 
  Copyright (c) 2017 Stefano Cappa (Ks89)
- Copyright (c) 2016 vimalavinisha
 
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal

diff --git a/angular-modal-gallery/src/directives/a-tag-bg-image.directive.ts b/angular-modal-gallery/src/directives/a-tag-bg-image.directive.ts
@@ -0,0 +1,26 @@
+import { Directive, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { Image } from '../interfaces/image.class';
+
+@Directive({
+  selector: '[ksATagBgImage]'
+})
+export class ATagBgImageDirective implements OnInit, OnChanges {
+
+  @Input() image: Image;
+  @Input() style: string;
+
+  constructor(private renderer: Renderer2, private el: ElementRef) {
+  }
+
+  ngOnInit() {
+    this.applyStyle();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.applyStyle();
+  }
+
+  private applyStyle() {
+    this.renderer.setStyle(this.el.nativeElement, 'background', `url('${this.image.thumb ? this.image.thumb : this.image.img}') ${this.style}`);
+  }
+}
diff --git a/angular-modal-gallery/src/directives/directives.ts b/angular-modal-gallery/src/directives/directives.ts
@@ -28,11 +28,13 @@ import { KeyboardNavigationDirective } from './keyboard-navigation.directive';
 import { ScrollStopDirective } from './scroll-stop.directive';
 import { WrapDirective } from './wrap.directive';
 import { DirectionDirective } from './direction.directive';
+import { ATagBgImageDirective } from './a-tag-bg-image.directive';
 
 /**
  * Array of all directives.
  */
 export const DIRECTIVES = [
   ClickOutsideDirective, SizeDirective, KeyboardNavigationDirective,
-  ScrollStopDirective, WrapDirective, DirectionDirective
+  ScrollStopDirective, WrapDirective, DirectionDirective,
+  ATagBgImageDirective
 ];
diff --git a/angular-modal-gallery/src/interfaces/plain-gallery-config.interface.ts b/angular-modal-gallery/src/interfaces/plain-gallery-config.interface.ts
@@ -6,6 +6,7 @@ export interface PlainGalleryConfig {
   strategy: PlainGalleryStrategy;
   layout: PlainGalleryLayout;
   size: Size;
+  advanced?: AdvancedConfig;
 }
 
 export class PlainGalleryLayout {
@@ -51,3 +52,7 @@ export interface BreakConfig {
   iconClass: string;
   wrap: boolean;
 }
+
+export interface AdvancedConfig {
+  aTags: boolean;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -19,6 +19,12 @@ <h3>Z1bis - row plain gallery layout space around (limit 2)</h3>
   <ks-modal-gallery [modalImages]="images"
                     [plainGalleryConfig]="plainGalleryRowSpaceAround"></ks-modal-gallery>
 </section>
+<section>
+  <h3>Z1tris - row plain gallery layout with a tags (limit 2)</h3>
+  <br>
+  <ks-modal-gallery [modalImages]="images"
+                    [plainGalleryConfig]="plainGalleryRowATags"></ks-modal-gallery>
+</section>
 <section>
   <h3>Z2 - column plain gallery layout (limit 3)</h3>
   <br>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -25,22 +25,8 @@
 import { Component } from '@angular/core';
 
 import {
-  AccessibilityConfig,
-  Action,
-  ButtonEvent,
-  ButtonsConfig,
-  ButtonsStrategy,
-  ButtonType,
-  Description,
-  DescriptionStrategy,
-  DotsConfig,
-  Image,
-  ImageModalEvent,
-  PreviewConfig,
-  PlainGalleryConfig,
-  LineLayout,
-  PlainGalleryStrategy,
-  GridLayout
+  AccessibilityConfig, Action, ButtonEvent, ButtonsConfig, ButtonsStrategy, ButtonType, Description, DescriptionStrategy, DotsConfig, GridLayout,
+  Image, ImageModalEvent, LineLayout, PlainGalleryConfig, PlainGalleryStrategy, PreviewConfig
 } from 'angular-modal-gallery';
 
 @Component({
@@ -55,24 +41,33 @@ export class AppComponent {
 
   plainGalleryRow: PlainGalleryConfig = {
     strategy: PlainGalleryStrategy.ROW,
-    layout:  new LineLayout({length: 2, iconClass: '', wrap: true}, 'flex-start'),
+    layout: new LineLayout({length: 2, iconClass: '', wrap: true}, 'flex-start'),
     size: {
       width: '80px',
       height: '80px'
     }
   };
   plainGalleryRowSpaceAround: PlainGalleryConfig = {
     strategy: PlainGalleryStrategy.ROW,
-    layout:  new LineLayout({length: 2, iconClass: '', wrap: true}, 'space-around'),
+    layout: new LineLayout({length: 2, iconClass: '', wrap: true}, 'space-around'),
     size: {
       width: '50px',
       height: '50px'
     }
   };
+  plainGalleryRowATags: PlainGalleryConfig = {
+    strategy: PlainGalleryStrategy.ROW,
+    layout: new LineLayout({length: 2, iconClass: '', wrap: true}, 'flex-start'),
+    size: {
+      width: '50px',
+      height: '50px'
+    },
+    advanced: {aTags: true}
+  };
 
   plainGalleryColumn: PlainGalleryConfig = {
     strategy: PlainGalleryStrategy.COLUMN,
-    layout:  new LineLayout({length: 3, iconClass: '', wrap: true}, 'flex-start'),
+    layout: new LineLayout({length: 3, iconClass: '', wrap: true}, 'flex-start'),
     size: {
       width: '50px',
       height: '50px'
@@ -81,7 +76,7 @@ export class AppComponent {
 
   plainGalleryGrid: PlainGalleryConfig = {
     strategy: PlainGalleryStrategy.GRID,
-    layout:  new GridLayout({length: 3, iconClass: '', wrap: true}),
+    layout: new GridLayout({length: 3, iconClass: '', wrap: true}),
     size: {
       width: '80px',
       height: '80px'