Extended set of examples

drozhzhin-n-e · Jun 27, 2021 · 644c033 · 644c033
1 parent 8df825b
commit 644c033
Show file tree

Hide file tree

Showing 2 changed files with 321 additions and 3 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,185 @@
-<pinch-zoom>
-  <img src="https://images.unsplash.com/photo-1444927714506-8492d94b4e3d" />
-</pinch-zoom>
+<div class="wrapper">
+    <h1>Properties</h1>
+
+    <!-- transition-duration -->
+  <div class="demo">
+    <h2>transition-duration: 1000</h2>
+    <p>Defines the speed of the animation of positioning and transforming.</p>
+    <pinch-zoom [transition-duration]="1000">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- limit-zoom -->
+  <div class="demo">
+    <h2>limit-zoom: 2</h2>
+    <p>Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size.</p>
+    <pinch-zoom [limit-zoom]="2">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- minScale -->
+  <div class="demo">
+    <h2>minScale: 1</h2>
+    <p>Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan.</p>
+    <pinch-zoom [minScale]="1">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- auto-zoom-out -->
+  <div class="demo">
+    <h2>auto-zoom-out: true</h2>
+    <p>Automatic restoration of the original size of an image after its zooming in by two fingers.</p>
+    <pinch-zoom [auto-zoom-out]="true">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- double-tap -->
+  <div class="demo">
+    <h2>double-tap: false</h2>
+    <p>Zooming in and zooming out of an image, depending on its current condition, with double tap.</p>
+    <pinch-zoom [double-tap]="false">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- double-tap-scale -->
+  <div class="demo">
+    <h2>double-tap-scale: 4</h2>
+    <p>Double tap scaling factor.</p>
+    <pinch-zoom [double-tap-scale]="4">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- disabled -->
+  <div class="demo">
+    <h2>disabled: true</h2>
+    <pinch-zoom [disabled]="true">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- disablePan -->
+  <div class="demo">
+    <h2>disablePan: true</h2>
+    <p>Turn off panning with one finger.</p>
+    <pinch-zoom [disablePan]="true">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- minPanScale -->
+  <div class="demo">
+    <h2>minPanScale: 2</h2>
+    <p>Minimum zoom at which panning is enabled.</p>
+    <pinch-zoom [minPanScale]="2">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- overflow -->
+  <div class="demo">
+    <h2>overflow: 'visible'</h2>
+    <p>hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box.</p>
+    <pinch-zoom [overflow]="'visible'">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- disableZoomControl -->
+  <div class="demo">
+    <h2>disableZoomControl: 'disable'</h2>
+    <p>Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices.</p>
+    <pinch-zoom [disableZoomControl]="'disable'">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- zoomControlScale -->
+  <div class="demo">
+    <h2>zoomControlScale: 2</h2>
+    <p>Zoom factor when using zoom controls.</p>
+    <pinch-zoom [zoomControlScale]="2">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- backgroundColor -->
+  <div class="demo">
+    <h2>backgroundColor: 'rgba(0,0,0,0.65)'</h2>
+    <p>The background color of the container.</p>
+    <pinch-zoom [backgroundColor]="'rgba(0,0,0,0.65)'">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- limitPan -->
+  <div class="demo">
+    <h2>limitPan: true</h2>
+    <p>Stop panning when the edge of the image reaches the edge of the screen.</p>
+    <pinch-zoom [limitPan]="true">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- listeners -->
+  <div class="demo">
+    <h2>listeners: 'auto'</h2>
+    <p>By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen.</p>
+    <pinch-zoom [listeners]="'auto'">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- wheel -->
+  <div class="demo">
+    <h2>wheel: false</h2>
+    <p>Scale with the mouse wheel.</p>
+    <pinch-zoom [wheel]="false">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- wheelZoomFactor -->
+  <div class="demo">
+    <h2>wheelZoomFactor: 0.5</h2>
+    <p>Zoom factor when zoomed in with the mouse wheel.</p>
+    <pinch-zoom [wheelZoomFactor]="0.5">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+    <!-- autoHeight -->
+  <div class="demo">
+    <h2>autoHeight: true</h2>
+    <p>Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the <img> tag. When setting the property value to `true`, a subscription to the window resize listener will be created.</p>
+    <pinch-zoom [autoHeight]="true">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80" width="752" height="500">
+    </pinch-zoom>
+  </div>
+
+    <!-- draggableImage -->
+  <div class="demo">
+    <h2>draggableImage: true</h2>
+    <p>Sets the attribute draggable to the img tag.</p>
+    <pinch-zoom [draggableImage]="true">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+  </div>
+
+  <!-- Methods -->
+  <h1>Methods</h1>
+  <div class="demo">
+    <pinch-zoom #myPinch="pinchZoom">
+      <img src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80">
+    </pinch-zoom>
+    <div class="actions">
+      <button class="btn btn-small btn-outline btn-rounded" (click)="myPinch.toggleZoom()">toggleZoom()</button>
+      <button class="btn btn-small btn-outline btn-rounded" (click)="myPinch.destroy()">destroy()</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/app.component.sass b/src/app/app.component.sass
@@ -0,0 +1,136 @@
+.wrapper
+  max-width: 500px
+  margin: 0 auto
+  font-family: system-ui
+
+.demo
+  margin-bottom: 60px
+
+.actions
+  padding-top: 20px
+
+h1 
+  font-size: 30px
+h2 
+  font-size: 20px
+
+/* Colors */
+
+$black: #00000a
+$white: #fff
+$dark-white: rgba(0, 0, 0, 0.75)
+$blue: #0366d6
+$dark-blue: #035cbf
+$green: #7cae7a
+$dark-green: #709a6e
+$gray: rgba(0, 0, 0, 0.5)
+$light-shadow: rgba(0, 0, 0, 0.15)
+
+/* Buttons */
+
+.btn
+  display: inline-block 
+  min-width: 190px
+  line-height: 56px
+  font-weight: 500
+  border-radius: 6px
+  text-align: center
+  margin: 0 15px 15px 0
+  background: none
+  transition: all 200ms
+  color: $black
+  outline: none
+  font-size: 15px
+  letter-spacing: 1px
+  text-transform: uppercase
+  font-weight: 600
+  background: $white
+.btn:hover 
+  color: $dark-white
+  text-decoration: none
+  cursor: pointer 
+  box-shadow: 0px 3px 10px $light-shadow
+.btn:active
+  position: relative
+  top: 2px
+
+.btn-small
+  line-height: 32px
+  font-weight: normal
+  padding: 0 8px
+  font-size: 14px
+  letter-spacing: 0px
+  min-width: auto
+  text-transform: none
+
+.btn-outline
+  border: 1px solid #999
+.btn-outline:hover 
+  border-color: $dark-white
+.btn-rounded
+  border-radius: 100px
+.btn[disabled]
+  cursor: default 
+  box-shadow: none
+
+.btn-light 
+  color: $white
+.btn-light:hover 
+  color: rgba(255, 255, 255, 0.75)
+.btn-light.btn-outline
+  border: 1px solid $white
+.btn-light.btn-outline:hover 
+  border-color: rgba(255, 255, 255, 0.75)
+
+.btn-green
+  background: $green
+  color: $white
+  border: none 
+.btn-green.btn-outline
+  border: 1px solid $green
+  color: $green
+  background: none
+.btn-green.btn-clear
+  color: $green
+.btn-green:hover
+  background: $dark-green
+  color: $white
+.btn-green.btn-outline:hover 
+  background: none 
+  border-color: $dark-green
+  color: $dark-green
+.btn-green.btn-clear:hover 
+  color: $dark-green
+.btn-green[disabled]
+  background: #aaa
+.btn-green.btn-outline[disabled]
+  background: none
+  border-color: #aaa
+  color: #aaa
+
+.btn-blue
+  background: $blue
+  color: $white
+  border: none 
+.btn-blue.btn-outline
+  border: 1px solid $blue
+  color: $blue
+  background: none 
+.btn-blue.btn-clear
+  color: $blue
+  background: none
+.btn-blue:hover
+  background: $dark-blue
+  color: $white
+.btn-blue.btn-outline:hover 
+  background: none 
+  border-color: $dark-blue
+  color: $dark-blue
+.btn-blue.btn-clear:hover 
+  color: $dark-blue
+
+.btn-clear
+  background: none
+  border: none
+.btn-clear:hover
+  background: none