Basics of rewrite to TypeScript

1 files changed, 119 insertions, 0 deletions

diff --git a/activePage.ts b/activePage.ts
new file mode 100644
index 0000000..a1adf01
--- /dev/null
+++ b/activePage.ts
@@ -0,0 +1,119 @@
+/// <reference path='touchEvent.d.ts' />
+
+export class ActivePage {
+  // The idea behind this property that it could basically anything, but
+  // whoever inherits this class must override next(), prev(), and display() methods,
+  // if necessary; just in the end, its value probably corresponds to the IDs of the
+  // individual elements in the page.
+  public cur_section = 0;
+  private swipe_pos_x = 0;
+  private swipe_pos_y = 0;
+
+  constructor(appName: string) {
+    // Swipe event handlers
+    document.body.addEventListener("dblclick",
+      () => {
+        this.display();
+      }, false);
+
+    document.body.addEventListener("mousedown",
+      (evt: MouseEvent) => {
+        this.swipe_pos_x = evt.screenX;
+        this.swipe_pos_y = evt.screenY;
+        console.log("mousedown; pos = " + this.swipe_pos_x +
+          " / " + this.swipe_pos_y);
+      }, false);
+
+    document.body.addEventListener("mouseup",
+      (evt: MouseEvent) => {
+        console.log("mouseup; end_pos = " + evt.screenX +
+          " / " + evt.screenY);
+        this.handle_move(this.swipe_pos_x - evt.screenX,
+          this.swipe_pos_y - evt.screenY);
+      }, false);
+
+    document.body.addEventListener("touchstart",
+      (evt: TouchEvent) => {
+        this.swipe_pos_x = evt.changedTouches[0].screenX;
+        this.swipe_pos_y = evt.changedTouches[0].screenY;
+        console.log("touchstart; pos = " + this.swipe_pos_x +
+          " / " + this.swipe_pos_y);
+      }, false);
+
+    document.body.addEventListener("touchend",
+      (evt: TouchEvent) => {
+        var end_pos = evt.changedTouches[evt.changedTouches.length - 1];
+        // We want't opposite direction to Mouse gestures here
+        // so the difference should be opposite
+        this.handle_move(end_pos.screenX - this.swipe_pos_x,
+          end_pos.screenY - this.swipe_pos_y);
+      }, false);
+
+    document.body.addEventListener("touchcancel",
+      () => {
+        this.swipe_pos_x = 0;
+        this.swipe_pos_y = 0;
+      }, false);
+
+    // applicationCache.addEventListener("updateready",
+    //   () => { location.reload(); }
+    //   );
+
+    this.display();
+  }
+
+  /**
+   * Display current item
+   *
+   * @param new_date String with ISO formatted date (optional)
+   *    or Number with the relative distance of the day from the date
+   *    currently displayed.
+   *
+   * Displays the Losungen for the given date (or today if not defined)
+   */
+  display() {
+    var visibleElems = document.getElementsByClassName("visible");
+    Array.prototype.forEach.call(visibleElems, function(e) {
+      e.classList.remove("visible");
+    });
+  }
+
+  /**
+   * react to the discovered distance of swipe
+   *
+   * @param distX Number distance in points in direction X
+   * @param distY Number distance in points in direction Y
+   *
+   * There is a preference for the horizontal swipe; if that doesn't
+   * happen (i.e., the distance travelled horizontally is less than
+   * negligible), then the vertical swipe (in either direction) means
+   * jump to today.
+   */
+  handle_move(distX: number, distY: number) {
+    var negligible = 100;
+    console.log('distX = ' + distX);
+    console.log('distY = ' + distY);
+
+    if (distX < -negligible) {
+      console.log("swipe left");
+      this.next();
+    }
+    else if (distX > negligible) {
+      console.log("swipe right");
+      this.prev();
+    }
+  }
+
+  next() {
+    console.log("Next!");
+    this.cur_section += 1;
+    this.display();
+  }
+
+  prev() {
+    console.log("Previous!");
+    this.cur_section -= 1;
+    this.display();
+  }
+
+}