v1.0

README.md

@@ -13,20 +13,14 @@ Install the npm package.
         
 Import module:
 
-    import { NgModule }         from '@angular/core';
-    import { BrowserModule }    from '@angular/platform-browser';
-    import { AppComponent }     from './app.component';
-    import { PinchZoomDirective } from 'ngx-pinch-zoom/components';
+    import { PinchZoomComponent } from 'ngx-pinch-zoom/components';
      
     @NgModule({
-        imports:      [ BrowserModule ],
-        declarations: [ AppComponent, PinchZoomDirective ],
-        bootstrap:    [ AppComponent ]
+        declarations: [ PinchZoomComponent ]
     })
-    export class AppModule { } 
 
 ## Usage
 
-    <div pinch-zoom>
-        <img src="/assets/example.jpg" width="100%" />
-    </div>
+    <pinch-zoom height="100%">
+        <img src="path_to_image" /> 
+    </pinch-zoom>

src/app/app.component.html

@@ -1,5 +1,10 @@
-<div class="image" pinch-zoom>
-	<!--<img src="/assets/Iceland_ZackSeckler-11.jpg" width="100%" />-->
 
-	<img src="/assets/example.jpg" height="100%" /> 
-</div>
+<!--
+<div pinch-zoom >
+	<img src="/assets/paul-earle-39322-unsplash.jpg" /> 
+</div>
+-->
+
+<pinch-zoom height="100%">
+	<img src="/assets/paul-earle-39322-unsplash.jpg" /> 
+</pinch-zoom>

src/app/app.module.ts

@@ -4,12 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { PinchZoomDirective } from './pinch-zoom.directive'; 
+import { PinchZoomComponent } from './pinch-zoom.component'; 
 
 @NgModule({
   declarations: [
     AppComponent,
-    PinchZoomDirective
+    PinchZoomComponent
   ],
   imports: [
     BrowserModule,

src/app/pinch-zoom.component.html

@@ -0,0 +1,3 @@
+<div #content>
+	<ng-content></ng-content>
+</div>

src/app/pinch-zoom.directive.ts → src/app/pinch-zoom.component.ts

@@ -1,12 +1,14 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Component, HostBinding, ElementRef, HostListener, OnInit, ViewChild, Input } from '@angular/core';
 
-@Directive({
-    selector: '[pinch-zoom]'
+@Component({
+    selector: 'pinch-zoom, [pinch-zoom]',
+    templateUrl: './pinch-zoom.component.html'
 })
 
-export class PinchZoomDirective{
+export class PinchZoomComponent {
 
     elem: any;
+    parentElem: any;
     eventType: any;
 
     scale: any = 1;
@@ -25,14 +27,30 @@ export class PinchZoomDirective{
 
     distance: any;
     initialDistance: any;
+
+    tagName: string;
+
+    @Input('height') containerHeight: string;
+
+    @HostBinding('style.display') hostDisplay:string;
+    @HostBinding('style.overflow') hostOverflow:string;
+    @HostBinding('style.height') hostHeight:string;
+
+    @ViewChild('content') contentEl: ElementRef;
 
     constructor(private elementRef: ElementRef){
-        this.elem = this.elementRef.nativeElement;
+        this.tagName = this.elementRef.nativeElement.tagName.toLowerCase();
+    }
+
+    ngOnInit() {
+        this.elem = this.contentEl.nativeElement;
+        this.parentElem = this.elem.parentNode;
+
+        this.setBasicStyles();
     }
 
     @HostListener('window:resize', ['$event'])
     onResize(event) {
-
         this.transformElem(200); 
     }
 
@@ -98,20 +116,20 @@ export class PinchZoomDirective{
         } 
 
         if (img && this.scale > 1){
-            let imgHeight = this.getElemHeight();
-            let imgWidth = this.getElemWidth();
+            let imgHeight = this.getImageHeight();
+            let imgWidth = this.getImageWidth();
             let imgOffsetTop = ((imgHeight - this.elem.offsetHeight) * this.scale) / 2;
 
-            if (imgHeight * this.scale < window.innerHeight){
-                this.moveY = (window.innerHeight - this.elem.offsetHeight * this.scale) / 2;
+            if (imgHeight * this.scale < this.parentElem.offsetHeight){
+                this.moveY = (this.parentElem.offsetHeight - this.elem.offsetHeight * this.scale) / 2;
 
-            } else if (imgWidth * this.scale < window.innerWidth) {
-                this.moveX = (window.innerWidth - this.elem.offsetWidth * this.scale) / 2;
+            } else if (imgWidth * this.scale < this.parentElem.offsetWidth) {
+                this.moveX = (this.parentElem.offsetWidth - this.elem.offsetWidth * this.scale) / 2;
             } else if (this.eventType == 'swipe') {
                 if (this.moveY > imgOffsetTop){
                     this.moveY = imgOffsetTop;
-                } else if ((imgHeight * this.scale + Math.abs(imgOffsetTop) - window.innerHeight) + this.moveY < 0){
-                    this.moveY = - (imgHeight * this.scale + Math.abs(imgOffsetTop) - window.innerHeight);
+                } else if ((imgHeight * this.scale + Math.abs(imgOffsetTop) - this.parentElem.offsetHeight) + this.moveY < 0){
+                    this.moveY = - (imgHeight * this.scale + Math.abs(imgOffsetTop) - this.parentElem.offsetHeight);
                 }
             }
         }
@@ -138,14 +156,36 @@ export class PinchZoomDirective{
         return Math.sqrt( Math.pow(touches[0].pageX - touches[1].pageX, 2) + Math.pow(touches[0].pageY - touches[1].pageY, 2));
     }
 
-    getElemHeight(){
+    getImageHeight(){
         return this.elem.getElementsByTagName("img")[0].offsetHeight;
     }
 
-    getElemWidth(){
+    getImageWidth(){
         return this.elem.getElementsByTagName("img")[0].offsetWidth;
     }
 
+    setBasicStyles():void {
+        this.elem.style.display = "flex";
+        this.elem.style.height = "100%";
+        this.elem.style.alignItems = "center";
+        this.elem.style.justifyContent = "center";
+
+        this.hostDisplay = "block";
+        this.hostOverflow = "hidden";
+        this.hostHeight = this.containerHeight;
+
+        this.setImageWidth();
+    }
+
+    setImageWidth():void {
+        let imgElem = this.elem.getElementsByTagName("img");
+
+        if (imgElem.length){
+            imgElem[0].style.maxWidth = '100%';
+            imgElem[0].style.maxHeight = '100%';
+        }
+    }
+
     transformElem(duration: any = 50){
         this.elem.style.transition = 'all '+ duration +'ms';
         this.elem.style.transform = 'matrix('+ Number(this.scale) +','+ 0 +','+ 0 +','+ Number(this.scale) +','+ Number(this.moveX) +','+ Number(this.moveY) +')';

src/index.html

@@ -5,7 +5,7 @@
   <title>PinchZoomApp</title>
   <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>

src/styles.css

@@ -1,20 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+html {
+  height: 100%;
+}
+
 body {
   margin: 0;
   background: #000;
-} 
-
-.image {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-    font: 0/0 a;
-}
-
-img {
-    max-width: 100%;
-    max-height: 100%;
+  height: 100%;
 }