ADDED: hide details with touch

mgreg89 · May 1, 2019 · de12bd7 · de12bd7
1 parent 6def1e3
commit de12bd7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ionic-img-viewer",
-  "version": "2.9.6",
+  "version": "2.9.10",
   "description": "Ionic 2 component providing a Twitter inspired experience to visualize pictures.",
   "main": "./dist/es2015/ionic-img-viewer.js",
   "typings": "./dist/es2015/ionic-img-viewer.d.ts",
@@ -40,6 +40,8 @@
     "ionic-angular": "~3.9.0"
   },
   "dependencies": {
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^2.0.1",
     "moment": "^2.22.2",
     "ionic-angular": "^3.9.5"
   }

diff --git a/src/image-viewer.component.ts b/src/image-viewer.component.ts
@@ -34,6 +34,13 @@ import * as moment from 'moment';
 @Component({
 	selector: 'image-viewer',
 	template: `
+	<style>
+		.hideDetails {
+			bottom: -80px;
+			transition: 0.5s ease;
+			visibility: hidden;
+		}
+	</style>
 		<ion-header no-border>
 			<ion-navbar>
 				<div *ngIf="gamepicturerelation">
@@ -48,19 +55,19 @@ import * as moment from 'moment';
 
 		<ion-backdrop (click)="bdClick()"></ion-backdrop>
 
-		<div class="image-wrapper">
+		<div class="image-wrapper" (click)="toggleDetails()">
 			<div class="image" #imageContainer>
 				<img [src]="imageUrl" tappable #image />
 			</div>
 		</div>
-		<div *ngIf="gamepicturerelation">
-			<ion-item style="z-index: 10;" >
+		<div *ngIf="gamepicturerelation" [ngClass]="{'hideDetails': !showDetails}>
+			<ion-item style="z-index: 10; position: absolute;" >
 				<ng-container *ngIf="gamepicturerelation.fk_pictureid">{{gamepicturerelation.fk_pictureid.picturedescription}}</ng-container>
 				<p>
 					<ion-grid>
 						<ion-row>
-							<ion-col *ngIf="gamepicturerelation.fk_pictureid && gamepicturerelation.fk_pictureid.fk_picturetypeid">
-								{{'PICTURETYPE_CONSTANTS.' + gamepicturerelation.fk_pictureid.fk_picturetypeid.constantvalue | translate}}
+							<ion-col *ngIf="gamepicturerelation.fk_pictureid && gamepicturerelation.fk_picturetypeid">
+								{{'PICTURETYPE_CONSTANTS.' + gamepicturerelation.fk_picturetypeid.constantvalue | translate}}
 							</ion-col>
 							<ion-col *ngIf="gamepicturerelation.fk_pictureid">
 								{{getCreatedFormatted(gamepicturerelation.fk_pictureid.created)}}
@@ -70,8 +77,8 @@ import * as moment from 'moment';
 				</p>
 			</ion-item>				
 		</div>
-		<div *ngIf="picture && !gamepicturerelation">
-			<ion-item style="z-index: 10;" *ngIf="picture">
+		<div *ngIf="picture && !gamepicturerelation" [ngClass]="{'hideDetails': !showDetails}>
+			<ion-item style="z-index: 10; position: absolute;" *ngIf="picture">
 				{{picture.picturedescription}}
 				<p>{{getCreatedFormatted(picture.created)}}</p>
 			</ion-item>				
@@ -85,6 +92,8 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte
 
 	public picture;
 	public gamepicturerelation;
+
+	private showDetails: boolean = true;
 
 	public dragGesture: ImageViewerTransitionGesture;
 
@@ -157,4 +166,9 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte
 			this._nav.pop();
 		}
 	}
+
+	toggleDetails() {
+	console.log("gamepicturerelation", this.gamepicturerelation)
+		this.showDetails = !this.showDetails;
+	}
 }
diff --git a/src/module.ts b/src/module.ts
@@ -4,9 +4,24 @@ import { IonicModule, Config } from 'ionic-angular';
 import { ImageViewerDirective } from './image-viewer.directive';
 import { ImageViewerComponent } from './image-viewer.component';
 import { ImageViewerController } from './image-viewer.controller';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
-	imports: [IonicModule],
+	imports: [IonicModule,
+	TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    })],
 	declarations: [
 		ImageViewerComponent,
 		ImageViewerDirective