awesome-image-viewer
Advanced tools
awesome-image-viewer - npm Package Compare versions
Comparing version 1.0.50 to 1.0.51
| { | ||
| "name": "awesome-image-viewer", | ||
| "description": "React, Angular, Vue, and Typescript compatible image viewer", | ||
| "version": "1.0.50", | ||
| "version": "1.0.51", | ||
| "author": "Mostafa Mohammadzadeh", | ||
@@ -6,0 +6,0 @@ "license": "MIT", |
@@ -77,3 +77,3 @@ "use strict"; | ||
| <div class="imagesWrapper"></div> | ||
| <button class="swipeSurface"></button> | ||
| <button class="touchSurface"></button> | ||
| <div class="toolbar"> | ||
@@ -174,7 +174,7 @@ <button class="defaultButton closeButton" title="Close"><div><svg fill="#bfbfbf" width="21" height="21" viewBox="-1 -2 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m11.2929 3.29289c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02369 0 1.41422l-3.29289 3.29289 3.29289 3.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-3.2929-3.29289-3.29289 3.29289c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l3.2929-3.2929-3.2929-3.29289c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0l3.29289 3.2929z" fill-rule="evenodd"/></svg></div></button> | ||
| //navigation with arrow buttons: | ||
| const imageContainers = this.view.querySelectorAll('.imageContainer, .arrowButton, .thumbnailContainer'); | ||
| const firstContainer = imageContainers[0]; | ||
| setTimeout(() => firstContainer.focus(), 100); | ||
| imageContainers.forEach(container => { | ||
| container.addEventListener('keydown', e => { | ||
| const elements = this.view.querySelectorAll('.touchSurface, .imageContainer, .arrowButton, .thumbnailContainer'); | ||
| const firstElement = elements[0]; | ||
| setTimeout(() => firstElement.focus(), 100); | ||
| elements.forEach(element => { | ||
| element.addEventListener('keydown', e => { | ||
| const event = e; | ||
@@ -279,4 +279,4 @@ if (event.key === 'ArrowLeft') { | ||
| //events: | ||
| const swipeSurface = this.view.getElementsByClassName('swipeSurface')[0]; | ||
| swipeSurface.addEventListener('touchstart', e => { | ||
| const touchSurface = this.view.getElementsByClassName('touchSurface')[0]; | ||
| touchSurface.addEventListener('touchstart', e => { | ||
| if (this.isInZoom) | ||
@@ -292,3 +292,3 @@ return; | ||
| }); | ||
| swipeSurface.addEventListener('touchmove', e => { | ||
| touchSurface.addEventListener('touchmove', e => { | ||
| if (this.isInZoom) | ||
@@ -304,3 +304,3 @@ return; | ||
| }); | ||
| swipeSurface.addEventListener('touchend', e => { | ||
| touchSurface.addEventListener('touchend', e => { | ||
| if (this.isInZoom) | ||
@@ -338,4 +338,4 @@ return; | ||
| addEventToHudAndZoom() { | ||
| const swipeSurface = this.view.getElementsByClassName('swipeSurface')[0]; | ||
| swipeSurface.addEventListener('click', e => { | ||
| const touchSurface = this.view.getElementsByClassName('touchSurface')[0]; | ||
| touchSurface.addEventListener('click', e => { | ||
| e.stopPropagation(); | ||
@@ -681,3 +681,3 @@ if (!this.dbcWaiting) { | ||
| } | ||
| .imageViewer > .container > .swipeSurface { | ||
| .imageViewer > .container > .touchSurface { | ||
| width: 100%; | ||
@@ -684,0 +684,0 @@ height: 100%; |
@@ -131,3 +131,3 @@ //custom types: | ||
| <div class="imagesWrapper"></div> | ||
| <button class="swipeSurface"></button> | ||
| <button class="touchSurface"></button> | ||
| <div class="toolbar"> | ||
@@ -237,7 +237,7 @@ <button class="defaultButton closeButton" title="Close"><div><svg fill="#bfbfbf" width="21" height="21" viewBox="-1 -2 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m11.2929 3.29289c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02369 0 1.41422l-3.29289 3.29289 3.29289 3.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-3.2929-3.29289-3.29289 3.29289c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l3.2929-3.2929-3.2929-3.29289c-.39052-.39053-.39052-1.02369 0-1.41422.39053-.39052 1.02369-.39052 1.41422 0l3.29289 3.2929z" fill-rule="evenodd"/></svg></div></button> | ||
| //navigation with arrow buttons: | ||
| const imageContainers = this.view.querySelectorAll('.imageContainer, .arrowButton, .thumbnailContainer'); | ||
| const firstContainer = <HTMLElement> imageContainers[0]; | ||
| setTimeout(() => firstContainer.focus(), 100); | ||
| imageContainers.forEach(container => { | ||
| container.addEventListener('keydown', e => { | ||
| const elements = this.view.querySelectorAll('.touchSurface, .imageContainer, .arrowButton, .thumbnailContainer'); | ||
| const firstElement = <HTMLElement> elements[0]; | ||
| setTimeout(() => firstElement.focus(), 100); | ||
| elements.forEach(element => { | ||
| element.addEventListener('keydown', e => { | ||
| const event = <KeyboardEvent> e; | ||
@@ -346,4 +346,4 @@ if(event.key === 'ArrowLeft'){ | ||
| //events: | ||
| const swipeSurface = <HTMLElement> this.view.getElementsByClassName('swipeSurface')[0]; | ||
| swipeSurface.addEventListener('touchstart', e => { | ||
| const touchSurface = <HTMLElement> this.view.getElementsByClassName('touchSurface')[0]; | ||
| touchSurface.addEventListener('touchstart', e => { | ||
| if(this.isInZoom) return; | ||
@@ -358,3 +358,3 @@ let touch = e.touches[0]; | ||
| }); | ||
| swipeSurface.addEventListener('touchmove', e => { | ||
| touchSurface.addEventListener('touchmove', e => { | ||
| if(this.isInZoom) return; | ||
@@ -369,3 +369,3 @@ e.preventDefault(); | ||
| }); | ||
| swipeSurface.addEventListener('touchend', e => { | ||
| touchSurface.addEventListener('touchend', e => { | ||
| if(this.isInZoom) return; | ||
@@ -400,4 +400,4 @@ //horizontal detection: | ||
| protected addEventToHudAndZoom(){ | ||
| const swipeSurface = <HTMLElement> this.view.getElementsByClassName('swipeSurface')[0]; | ||
| swipeSurface.addEventListener('click', e => { | ||
| const touchSurface = <HTMLElement> this.view.getElementsByClassName('touchSurface')[0]; | ||
| touchSurface.addEventListener('click', e => { | ||
| e.stopPropagation(); | ||
@@ -749,3 +749,3 @@ if(!this.dbcWaiting){ | ||
| } | ||
| .imageViewer > .container > .swipeSurface { | ||
| .imageViewer > .container > .touchSurface { | ||
| width: 100%; | ||
@@ -752,0 +752,0 @@ height: 100%; |
Worsened metrics
- Total package byte prevSize
- decreased by-0.03%
94839