diff options
author | Matěj Cepl <mcepl@redhat.com> | 2012-11-19 11:56:08 +0100 |
---|---|---|
committer | Matěj Cepl <mcepl@redhat.com> | 2012-11-19 12:07:59 +0100 |
commit | c6bd8af531a83fb876d4540e615bcb4d0a1c2718 (patch) | |
tree | 380fa653151d8e23617f847b6a3d83f6c72f8c4e | |
parent | 3d0c8ac713ec35e943f001308bc7b9590a06eeef (diff) | |
download | hesla-c6bd8af531a83fb876d4540e615bcb4d0a1c2718.tar.gz |
Preliminary attempt to do swipe handling.
No work on mobile browser.
-rw-r--r-- | Makefile | 4 | ||||
-rw-r--r-- | hesla.js | 52 | ||||
-rw-r--r-- | templates/base.html | 2 |
3 files changed, 54 insertions, 4 deletions
@@ -4,10 +4,10 @@ FILES=hesla.js icon-128.png index_de.html index.html screen.css \ all: index.html index_de.html -index.html: generate_html_cs.py hes12-01.xml templates/czech.html +index.html: generate_html_cs.py hes12-01.xml templates/czech.html templates/base.html ./generate_html_cs.py hes12-01.xml >$@ -index_de.html: generate_html_de.py hernnhut-2012.xml templates/german.html +index_de.html: generate_html_de.py hernnhut-2012.xml templates/german.html templates/base.html ./generate_html_de.py hernnhut-2012.xml >$@ install: $(FILES) @@ -24,6 +24,8 @@ if (!Date.prototype.toISODateString) { function Page() { var that = this; this.cur_date = null; + this.swipe_pos = 0; + document.getElementById("czech_nav").addEventListener("click", function(evt) { localStorage.language = "cs"; @@ -36,32 +38,80 @@ if (!Date.prototype.toISODateString) { that.lang_reload(); }, false); + document.body.addEventListener("dblclick", + function(evt) { + that.display(); + }, false); + + document.body.addEventListener("mousedown", + function(evt) { + that.swipe_pos = evt.screenX; + console.log("swipe start; pos = " + that.swipe_pos); + }, false); + + document.body.addEventListener("mouseup", + function(evt) { + console.log("end_pos = " + evt.screenX); + that.handle_move(that.swipe_pos - evt.screenX); + }, false); + + document.body.addEventListener("touchstart", + function(evt) { + that.swipe_pos = evt.touches[0].screenX; + console.log("swipe start; pos = " + that.swipe_pos); + }, false); + + document.body.addEventListener("touchend", + function(evt) { + console.log("end_pos = " + evt.screenX); + that.handle_move(that.swipe_pos - evt.touches[evt.touches.length-1].screenX); + }, false); + } + Page.prototype.handle_move = function handle_move(dist) { + var negligible = 10; + + if (dist < -negligible) { + console.log("swipe left"); + that.next_day(); + } + else if (dist > negligible) { + console.log("swipe right"); + that.prev_day(); + } + }; + // Display cur_date losungen Page.prototype.display = function display(new_date) { if (this.cur_date !== null) { document.getElementById(this.cur_date.toISODateString()).style.display = 'none'; } + console.log("new_date = " + new_date + ", cur_date = " + this.cur_date); if (new_date === undefined) { this.cur_date = new Date(); } else if (typeof new_date === 'number') { - this.cur_date.day += new_date; + if (this.cur_date) { + this.cur_date.setDate(this.cur_date.getDate() + new_date); + } } else { this.cur_date = new Date(new_date); } + console.log("cur_date = " + this.cur_date); document.getElementById(this.cur_date.toISODateString()).style.display = 'block'; }; Page.prototype.next_day = function next_day() { + console.log("Next day!"); this.display(+1); }; Page.prototype.prev_day = function prev_day() { + console.log("Previous day!"); this.display(-1); }; diff --git a/templates/base.html b/templates/base.html index 86b153f..0d79a90 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,7 +6,7 @@ <html manifest="hesla.appcache"> <head> <meta charset="utf-8"/> - <meta content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" name="viewport"/> + <meta content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" name="viewport"/> <link href="screen.css" type="text/css" rel="stylesheet"/> <title>{{ title }}</title> <script src="hesla.js" type="text/javascript" defer="defer"> |