v0.2.0: A lot done

README.md

@@ -27,27 +27,30 @@ npm install ionic-gallery-modal --save
 and then, within your application module 
 
 ```
-import { GalleryModal } from 'ionic-gallery-modal';
-import { ZoomableImage } from 'ionic-gallery-modal';
+import { GalleryModalModule, GalleryModalHammerConfig } from 'ionic-gallery-modal';
+import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 ```
 
-and add it to your declarations
+and add the `GalleryModalModule` to your imports
 
 ```
-declarations: [
+imports: [
  //...
- GalleryModal,
- ZoomableImage,
+ GalleryModalModule,
  //...
 ],
 ```
 
-and to your entryComponents
+and to your providers
 
 ```
-entryComponents: [
+providers: [
+ //...
+ {
+ provide: HAMMER_GESTURE_CONFIG,
+ useClass: GalleryModalHammerConfig,
+ },
  //...
- GalleryModal,
 ],
 ```
 
@@ -74,7 +77,10 @@ The possible options for it are:
 
 ```
 {
- photos: Array[{ url: string }],
+ photos: Array[{ 
+ url: string, 
+ type: string,
+ }],
  closeIcon: string,
  initialSlide: number,
 }
@@ -85,6 +91,11 @@ Let us know or submit a PR! And, please, don't hesitate to contribute. :heart:
 
 ## Changelog
 
+#### v0.2.0
+ * Added the GalleryModalModule
+ * Made it possible to close the modal by swiping down
+ * Gallery items can now have title (as a description)
+
 #### v0.1.0
  * Changed to work with Ionic 3.2
  * Fixed an issue that was causing an error when building ionic app with `--prod` flag on

package.json

@@ -1,9 +1,9 @@
 {
  "name": "ionic-gallery-modal",
- "version": "0.1.1",
- "description": "Ionic 2/3 Gallery Modal (to preview photos)",
+ "version": "0.2.0",
+ "description": "Ionic Gallery Modal (to preview photos)",
  "main": "dist/index.js",
- "types": "dist/index.qd.ts",
+ "types": "dist/index.d.ts",
  "scripts": {
  "build": "gulp build",
  "build:watch": "gulp",
@@ -26,43 +26,45 @@
  },
  "license": "MIT",
  "dependencies": {
- "ionic-angular": "3.3.0"
+ "ionic-angular": "3.5.3"
  },
  "devDependencies": {
- "@angular/common": "^4.1.3",
- "@angular/compiler": "^4.1.3",
- "@angular/compiler-cli": "^4.1.3",
- "@angular/core": "^4.1.3",
- "@angular/platform-browser": "^4.1.3",
- "@angular/platform-browser-dynamic": "^4.1.3",
- "@compodoc/compodoc": "^1.0.0-beta.7",
- "@types/jasmine": "2.5.38",
- "@types/node": "~6.0.60",
- "codelyzer": "~2.0.0",
+ "@angular/common": "4.1.3",
+ "@angular/compiler": "4.1.3",
+ "@angular/compiler-cli": "4.1.3",
+ "@angular/core": "4.1.3",
+ "@angular/forms": "4.1.3",
+ "@angular/http": "4.1.3",
+ "@angular/platform-browser": "4.1.3",
+ "@angular/platform-browser-dynamic": "4.1.3",
+ "@compodoc/compodoc": "^1.0.0-beta.12",
+ "@types/jasmine": "2.5.53",
+ "@types/node": "^8.0.10",
+ "codelyzer": "~3.1.2",
  "core-js": "^2.4.1",
- "del": "^2.2.2",
+ "del": "^3.0.0",
  "gulp": "^3.9.1",
  "gulp-rename": "^1.2.2",
- "gulp-rollup": "^2.11.0",
- "jasmine-core": "~2.5.2",
- "jasmine-spec-reporter": "~3.2.0",
- "karma": "~1.4.1",
- "karma-chrome-launcher": "~2.0.0",
+ "gulp-rollup": "^2.14.0",
+ "jasmine-core": "~2.6.4",
+ "jasmine-spec-reporter": "~4.1.1",
+ "karma": "~1.7.0",
+ "karma-chrome-launcher": "~2.2.0",
  "karma-cli": "~1.0.1",
- "karma-coverage-istanbul-reporter": "^0.2.0",
+ "karma-coverage-istanbul-reporter": "^1.3.0",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "node-sass": "^4.5.3",
  "node-sass-tilde-importer": "^1.0.0",
- "node-watch": "^0.5.4",
+ "node-watch": "^0.5.5",
  "protractor": "^5.1.2",
- "rollup": "^0.41.6",
- "run-sequence": "^1.2.2",
- "rxjs": "^5.1.1",
- "ts-node": "~2.0.0",
- "tslint": "~4.5.0",
- "typescript": "2.3.3",
- "zone.js": "^0.8.11"
+ "rollup": "^0.45.2",
+ "run-sequence": "^2.0.0",
+ "rxjs": "^5.4.2",
+ "ts-node": "~3.2.0",
+ "tslint": "~5.5.0",
+ "typescript": "2.4.2",
+ "zone.js": "0.8.14"
  },
  "files": [
  "dist",

src/directives/touch-events.ts

@@ -17,7 +17,8 @@ export class TouchEventsDirective implements OnInit, OnDestroy {
  @Output() onpan = new EventEmitter();
  @Output() panup = new EventEmitter();
  @Output() pandown = new EventEmitter();
- @Output() panstart = new EventEmitter();
+ @Output() panleft = new EventEmitter();
+ @Output() panright = new EventEmitter();
  @Output() panend = new EventEmitter();
  @Output() pancancel = new EventEmitter();
  @Output() doubletap = new EventEmitter();
@@ -28,6 +29,7 @@ export class TouchEventsDirective implements OnInit, OnDestroy {
  ngOnInit() {
  this.gestureListener = new Gesture(this.el.nativeElement, {
  domEvents: false,
+ enable: true,
  direction: this.direction,
  threshold: this.threshold,
  });
@@ -50,8 +52,11 @@ export class TouchEventsDirective implements OnInit, OnDestroy {
  this.gestureListener.on('pandown', (event) => {
  this.pandown.emit(event);
  });
- this.gestureListener.on('panstart', (event) => {
- this.panstart.emit(event);
+ this.gestureListener.on('panleft', (event) => {
+ this.panleft.emit(event);
+ });
+ this.gestureListener.on('panright', (event) => {
+ this.panright.emit(event);
  });
  this.gestureListener.on('panend', (event) => {
  this.panend.emit(event);

src/gallery-modal/gallery-modal.html

@@ -20,6 +20,12 @@
  *ngIf="photos.length"
  [initialSlide]="initialSlide"
  [ngStyle]="slidesStyle"
+ touch-events
+ (ionSlideDrag)="slidesDrag($event)"
+ (panup)="panUpDownEvent($event)"
+ (pandown)="panUpDownEvent($event)"
+ (panend)="panEndEvent($event)"
+ (pancancel)="panEndEvent($event)"
  >
  <ion-slide *ngFor="let photo of photos;">
  <zoomable-image
@@ -29,6 +35,11 @@
  (enableScroll)="enableScroll($event)"
  [parentSubject]="parentSubject"
  ></zoomable-image>
+
+ <div
+ class="gallery-item-title"
+ *ngIf="photo.title"
+ >{{ photo.title }}</div>
  </ion-slide>
  </ion-slides>
 </ion-content>

src/gallery-modal/gallery-modal.scss

@@ -1,12 +1,14 @@
 :host {
  .gallery-modal {
  position: relative;
+ overflow: hidden;
 
  .close-button {
  position: absolute;
  top: 10px;
  left: 5px;
  background: none;
+ box-shadow: none;
  z-index: 10;
 
  &.button-ios {
@@ -16,8 +18,22 @@
 
  .slider {
  /deep/ .slide-zoom {
+ position: relative;
  height: 100%;
  }
+
+ .gallery-item-title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: 15px;
+ background-color: rgba(0, 0, 0, 0.3);
+ color: white;
+ font-size: 14px;
+ line-height: 18px;
+ z-index: 1;
+ }
  }
 
  .image-on-top {

src/gallery-modal/gallery-modal.ts

@@ -19,6 +19,10 @@ export class GalleryModal {
  private sliderLoaded: boolean = false;
  private closeIcon: string = 'arrow-back';
  private parentSubject: Subject<any> = new Subject();
+ private slidesDragging: boolean = false;
+ private panUpDownRatio: number = 0;
+ private panUpDownDeltaY: number = 0;
+ private dismissed: boolean = false;
 
  private width: number = 0;
  private height: number = 0;
@@ -30,6 +34,9 @@ export class GalleryModal {
  backgroundColor: 'rgba(0, 0, 0, 1)',
  };
 
+ private transitionDuration: string = '200ms';
+ private transitionTimingFunction: string = 'cubic-bezier(0.33, 0.66, 0.66, 1)';
+
  constructor(private viewCtrl: ViewController, params: NavParams, private element: ElementRef, private platform: Platform) {
  this.photos = params.get('photos') || [];
  this.closeIcon = params.get('closeIcon') || 'arrow-back';
@@ -95,25 +102,43 @@ export class GalleryModal {
  }
  }
 
+ private slidesDrag(event) {
+ this.slidesDragging = true;
+ }
+
  /**
  * Called when the user pans up/down
  *
  * @param {Hammer.Event} event
  */
  private panUpDownEvent(event) {
+ if (this.slidesDragging || this.sliderDisabled) {
+ return;
+ }
+
  let ratio = (event.distance / (this.height / 2));
  if (ratio > 1) {
  ratio = 1;
  } else if (ratio < 0) {
  ratio = 0;
  }
- const scale = 1 - (ratio * 0.2);
- const opacity = 1 - (ratio * 0.2);
- const backgroundOpacity = 1 - (ratio * 0.8);
+ const scale = (event.deltaY < 0 ? 1 : 1 - (ratio * 0.2));
+ const opacity = (event.deltaY < 0 ? 1 - (ratio * 0.5) : 1 - (ratio * 0.2));
+ const backgroundOpacity = (event.deltaY < 0 ? 1 : 1 - (ratio * 0.8));
+
+ this.panUpDownRatio = ratio;
+ this.panUpDownDeltaY = event.deltaY;
 
  this.slidesStyle.transform = `translate(0, ${event.deltaY}px) scale(${scale})`;
  this.slidesStyle.opacity = opacity;
  this.modalStyle.backgroundColor = `rgba(0, 0, 0, ${backgroundOpacity})`;
+
+ delete this.slidesStyle.transitionProperty;
+ delete this.slidesStyle.transitionDuration;
+ delete this.slidesStyle.transitionTimingFunction;
+ delete this.modalStyle.transitionProperty;
+ delete this.modalStyle.transitionDuration;
+ delete this.modalStyle.transitionTimingFunction;
  }
 
  /**
@@ -122,8 +147,27 @@ export class GalleryModal {
  * @param {Hammer.Event} event
  */
  private panEndEvent(event) {
- this.slidesStyle.transform = 'none';
- this.slidesStyle.opacity = 1;
- this.modalStyle.backgroundColor = 'rgba(0, 0, 0, 1)';
+ this.slidesDragging = false;
+
+ this.panUpDownRatio += event.velocityY * 30;
+
+ if (this.panUpDownRatio >= 0.65 && this.panUpDownDeltaY > 0) {
+ if (!this.dismissed) {
+ this.dismiss();
+ }
+ this.dismissed = true;
+ } else {
+ this.slidesStyle.transitionProperty = 'transform';
+ this.slidesStyle.transitionTimingFunction = this.transitionTimingFunction;
+ this.slidesStyle.transitionDuration = this.transitionDuration;
+
+ this.modalStyle.transitionProperty = 'background-color';
+ this.modalStyle.transitionTimingFunction = this.transitionTimingFunction;
+ this.modalStyle.transitionDuration = this.transitionDuration;
+
+ this.slidesStyle.transform = 'none';
+ this.slidesStyle.opacity = 1;
+ this.modalStyle.backgroundColor = 'rgba(0, 0, 0, 1)';
+ }
  }
 }

src/index.ts

@@ -1,12 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { IonicModule } from 'ionic-angular';
 
 import { ZoomableImage } from './zoomable-image/zoomable-image';
 import { GalleryModal } from './gallery-modal/gallery-modal';
 
 import { TouchEventsDirective } from './directives/touch-events';
 
+import { GalleryModalHammerConfig } from './overrides/gallery-modal-hammer-config';
+
 @NgModule({
  imports: [
  CommonModule,
@@ -28,4 +31,4 @@ import { TouchEventsDirective } from './directives/touch-events';
  ],
 })
 export class GalleryModalModule {}
-export { ZoomableImage, GalleryModal }
+export { ZoomableImage, GalleryModal, GalleryModalHammerConfig }

src/interfaces/photo-interface.ts

@@ -1,4 +1,5 @@
 // Photo interface
 export interface Photo {
  url: string;
+ title: string;
 }

src/overrides/gallery-modal-hammer-config.ts

@@ -0,0 +1,12 @@
+import { HammerGestureConfig } from '@angular/platform-browser';
+
+export class GalleryModalHammerConfig extends HammerGestureConfig {
+ public overrides = {
+ pan: {
+ direction: 30,
+ },
+ press: {
+ time: 300,
+ },
+ }
+}