forked from Neovici/cosmoz-image-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cosmoz-image-viewer-overlay.html
64 lines (56 loc) · 1.3 KB
/
cosmoz-image-viewer-overlay.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
<link rel="import" href="cosmoz-image-viewer.html">
<dom-module id="cosmoz-image-viewer-overlay">
<template>
<style>
:host {
background: rgb(0, 0, 0);
height: 100vh;
width: 100vw;
}
</style>
<cosmoz-image-viewer
on-track="_trackHandler"
on-close-tapped="close"
images="[[images]]"
sizing="contain"
current-image-index="[[currentImageIndex]]"
show-nav show-zoom show-close show-detach="[[showDetach]]" loop="[[loop]]">
</cosmoz-image-viewer>
</template>
<script>
Polymer({
is: 'cosmoz-image-viewer-overlay',
behaviors: [
Polymer.IronOverlayBehavior
],
hostAttributes: {
noCancelOnOutsideClick: true
},
properties: {
images: {
type: Array
},
currentImageIndex: {
type: Number
},
showDetach: {
type: Boolean
},
loop: {
type: Boolean
}
},
_trackHandler(e) {
if (e.detail.state !== 'end') {
return;
}
// Swipe down to close
if (e.detail.dy > window.innerHeight * 0.4) {
this.close();
}
}
});
</script>
</dom-module>