-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathswipe.html
118 lines (87 loc) · 4.63 KB
/
swipe.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no,width=device-width" />
<title>HTML5Reader</title>
<script src="../events-2.0.js"></script>
<script src="assets/Resolutions.js"></script>
<script src="assets/sji.js"></script>
<script src="assets/customevents.js"></script>
<script src="assets/linklistener.js"></script>
<script src="assets/swipe.js"></script>
<link type="text/css" rel="stylesheet" href="assets/layout.css" />
</head>
<body>
<h1>HTML5 Web-Comic Reader, testing swipe...</h1>
<ul id="controls">
<li><a rel="switchComic" href="#ComicReader">Get Latest Image</a></li>
<li><a rel="prevEntry" href="#ComicReader">Get Previous Image</a></li>
<li><a rel="nextEntry" href="#ComicReader">Get Next Image</a></li>
<li><a rel="overlay" href="#options">Ω</a></li>
<li><select id="comicSelector"></select></li>
</ul>
<div id="ComicReader"><img src="about:blank" id="comicImage" /></div>
<div id="options">
<div class="dialog">
<h2>Options</h2>
<form id="debugOptionsForm">
<fieldset>
<legend>Landscape</legend>
<p>These are the settings for displaying images in landscape mode on your device. <em>These settings will not be shared among othe devices that may in the future share your comics settings.</em></p>
<label class="advanced" for="ls-ls-limit-width">Limit landscape width</label><input id="ls-ls-limit-width" type="checkbox" />
<label class="advanced" for="ls-ls-force-width">Force landscape width</label><input id="ls-ls-force-width" type="checkbox" />
<label class="advanced" for="ls-ls-force-height">Force landscape height</label><input id="ls-ls-force-height" type="checkbox" />
<label for="ls-p-limit-height">Limit portrait height</label><input id="ls-p-limit-height" type="checkbox" />
</fieldset>
<fieldset>
<legend>Portrait</legend>
<p>These are the settings for displaying images in portrait mode on your device. <em>These settings will not be shared among othe devices that may in the future share your comics settings.</em></p>
<label for="p-ls-limit-width">Limit landscape width</label><input id="p-ls-limit-width" type="checkbox" />
<label class="advanced" for="p-p-limit-height">Limit portrait height</label><input id="p-p-limit-height" type="checkbox" />
<label class="advanced" for="p-p-force-height">Force portrait height</label><input id="p-p-force-height" type="checkbox" />
<label class="advanced" for="p-p-force-width">Force portrait width</label><input id="p-p-force-width" type="checkbox" />
</fieldset>
<fieldset>
<legend>Online storage</legend>
<p>Here you may control how and/or where to store which comics you've read last. Be aware that the utmost care has been taken to make this as safe as possible, but such control may be somewhat limited.</p>
<label for="online-storage">Store last read comics online</label><input id="online-storage" type="checkbox" />
</fieldset>
<fieldset>
<legend>Debugging</legend>
<p>These settings are for developers use, they should provide you with extra information if you need to file a bug-report or figure out why your own developed comic does not work.</p>
<label for="debugOption">Debug</label><input id="debugOption" type="checkbox" />
<label for="advancedOption">Advanced</label><input id="advancedOption" type="checkbox" />
</fieldset>
</form>
<a id="optionsShutdown" class="control" rel="overlayShutdown" href="#ComicReader">Done</a>
</div>
</div>
<div id="auth">
<div class="dialog">
<h2>Authenticate</h2>
<form id="authenticationForm" action="#ComicReader">
<fieldset>
<p>Authenticate with a Delicious account to store/retrieve your last read comics. If you click 'cancel', such information will be store offline and can't be accessed from another device.</p>
<label for="auth-uid">Username / E-mail</label><input id="auth-uid" type="text" />
<label for="auth-pwd">Password</label><input id="auth-pwd" type="password" />
</fieldset>
</form>
<a id="authVerify" class="control" rel="authVerify" href="#authenticationForm">Authenticate</a>
<a id="authCancel" class="control" rel="authCancel" href="#authenticationForm">Cancel</a>
</div>
</div>
<script type="text/javascript">
(function() {
var b = document.getElementsByTagName( "body" )[0];
SwipeEvents.attach( b, SwipeEvents.LEFT, function( e ) {
console.log("Swiping left");
} );
SwipeEvents.attach( b, SwipeEvents.RIGHT, function( e ) {
console.log("Swiping right");
} );
SwipeEvents.blockDefaultActions();
})();
</script>
</body>
</html>