- scatter/demos/mobile.html
- 3 KB
- 130
1<!-- Scatter v0.1 | (c) Peter Boughton | License: LGPLv3 | https://www.sorcerersisle.com/software/scatter -->
2<!doctype html><meta charset=utf-8 />
3<title>Mobile Scatter Demo</title>
4
5<h1>Mobile Scatter Demo</h1>
6<p>Uses touch/swipe events and scaling to maintain usability on a mobile device.
7<p>Press to select, then swipe left and right to navigate between items, swipe upto discard.
8<p>(On a non-touch device, enable mobile/touch simulation mode and use click-drag.)
9
10<p><i>(View source to see markup, script and CSS used.)</i>
11<script src="../scatter.js"></script>
12
13
14<style>
15 body
16 {
17 font-family:sans-serif;
18 background:#CCC;
19 }
20
21 #MobileGallery
22 {
23 width:100%;
24 height:300px;
25 display:block;
26 background:#EEE;
27 overflow:hidden;
28 }
29
30 .polaroid
31 {
32 background:#FCFCFC;
33 color:black;
34 width:226px;
35 height:274px;
36 padding:12px;
37 padding-top:20px;
38
39 box-shadow: 0 0 3px rgba(0,0,0,0.8);
40 cursor:pointer;
41 transition: 0.3s;
42 }
43
44 .polaroid.selected
45 {
46 box-shadow: 0 0 5px rgba(50,50,50,0.5);
47 cursor:default;
48 }
49
50 .polaroid img
51 {
52 display:block;
53 background:black;
54 width:226px;
55 height:226px;
56 margin: auto;
57 }
58
59 .polaroid figcaption
60 {
61 text-align:center;
62 margin:1em;
63 }
64</style>
65
66<div id="MobileGallery">
67 <figure class="polaroid"><img /><figcaption>image 1</figcaption></figure>
68 <figure class="polaroid"><img /><figcaption>image 2</figcaption></figure>
69 <figure class="polaroid"><img /><figcaption>image 3</figcaption></figure>
70 <figure class="polaroid"><img /><figcaption>image 4</figcaption></figure>
71 <figure class="polaroid"><img /><figcaption>image 5</figcaption></figure>
72 <figure class="polaroid"><img /><figcaption>image 6</figcaption></figure>
73 <figure class="polaroid"><img /><figcaption>image 7</figcaption></figure>
74 <figure class="polaroid"><img /><figcaption>image 8</figcaption></figure>
75 <figure class="polaroid"><img /><figcaption>image 9</figcaption></figure>
76 <figure class="polaroid"><img /><figcaption>image 10</figcaption></figure>
77</div>
78
79<script>
80 window.onload=(function()
81 {
82 var MobileOptions =
83 { Mode : 'random'
84 , Scale : 0.5
85 , SelectedScale : 1
86 , ContainerEvents: {click:doNothing,dblclick:'arrange'}
87 };
88
89 var MobileScatter = new Scatter('#MobileGallery',MobileOptions);
90 MobileScatter.arrange();
91
92
93 var MobileGallery = document.getElementById('MobileGallery');
94
95 MobileGallery.addEventListener('touchstart',registerPosition);
96 MobileGallery.addEventListener('touchend',checkSwipe);
97
98 var StartPos = {};
99
100 function doNothing(event)
101 {
102 event.preventDefault();
103 }
104
105 function registerPosition(event)
106 {
107 StartPos.x = event.changedTouches[0].pageX;
108 StartPos.y = event.changedTouches[0].pageY;
109 }
110
111 function checkSwipe(event)
112 {
113 var DistX = event.changedTouches[0].pageX - StartPos.x;
114 var DistY = event.changedTouches[0].pageY - StartPos.y;
115 var MinDrag = 30;
116
117 if ( DistX > MinDrag && Math.abs(DistY) < MinDrag )
118 {
119 MobileScatter.prev();
120 }
121 else if ( DistX < -MinDrag && Math.abs(DistY) < MinDrag )
122 {
123 MobileScatter.next();
124 }
125 else if ( DistY < -MinDrag )
126 {
127 MobileScatter.discard();
128 }
129 }
130 });
131</script>
