Move all JavaScript to the external file

generated from TypeScript, BTW.

1 files changed, 161 insertions, 0 deletions

diff --git a/zalmy.ts b/zalmy.ts
new file mode 100644
index 0000000..de638ce
--- /dev/null
+++ b/zalmy.ts
@@ -0,0 +1,161 @@
+/// <reference path='touchEvent.d.ts' />
+
+//  <script type="text/javascript">
+//      function showPsalm() {
+//          var curPsalm = localStorage.getItem('curPsalm');
+//          console.log('curPsalm = ' + curPsalm);
+//          if (curPsalm === null) {
+//              curPsalm = 1;
+//          }
+//          console.log('curPsalm = ' + curPsalm);
+//          var searchId = 'Ps.' + curPsalm;
+//          console.log('searchId = ' + searchId);
+//          var h1El = document.getElementById(searchId);
+//          console.log('h1El = ' + h1El);
+//          h1El.parentElement.style.display = 'block';
+//      }
+//  </script>
+
+class Psalm {
+  private _cur_psalm: number = null;
+  private swipe_pos_x = 0;
+  private swipe_pos_y = 0;
+
+  constructor() {
+    // Swipe event handlers
+    document.body.addEventListener("dblclick",
+        () => {
+          console.log("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];
+          console.log("touchend; end_pos = " + end_pos.screenX +
+            " / " + end_pos.screenY);
+          // 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",
+        () => {
+          console.log("touchcancel");
+          this.swipe_pos_x = 0;
+          this.swipe_pos_y = 0;
+        }, false);
+
+    this.display();
+  }
+
+  public get cur_psalm(): number {
+    // If this._cur_psalm has not been initialized yet, do it
+    if (this._cur_psalm === null) {
+      var stored = JSON.parse(localStorage.getItem("curPsalm"));
+      if (stored === null) {
+        this._cur_psalm = 1;
+      }
+      else {
+        this._cur_psalm = stored;
+      }
+    }
+
+    return this._cur_psalm;
+  }
+
+  public set cur_psalm(value: number) {
+    // FIXME Remove 'visible' style from the currently displayed psalm,
+    // if there is any
+    // Also, check for negative values, values higher than 150, and
+    // similar junk.
+    this._cur_psalm = value;
+
+    localStorage.setItem("curPsalm", JSON.stringify(this._cur_psalm));
+
+    // set the parameter directly to avoid call to getter.
+    this.display(this._cur_psalm);
+  }
+
+  // Methods
+
+  /**
+   * 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 = 50;
+
+    if (distX < -negligible) {
+      console.log("swipe left");
+      this.next_psalm();
+    }
+    else if (distX > negligible) {
+      console.log("swipe right");
+      this.prev_psalm();
+    }
+    else if (Math.abs(distY) > negligible) {
+      console.log("jump to today!");
+      this.display();
+    }
+  }
+
+  /**
+   * Display losungen for given day
+   *
+   * @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(new_date: number = this.cur_psalm) {
+    console.log("cur_psalm = " + this.cur_psalm);
+    // FIXME Add class 'visible' rather than setting .style directly
+    document.getElementById("Ps." + this.cur_psalm).style.display = 'block';
+  }
+
+  next_psalm() {
+    console.log("Next day!");
+    this.cur_psalm += 1;
+  }
+
+  prev_psalm() {
+    console.log("Previous day!");
+    this.cur_psalm -= 1;
+  }
+}
+
+var thisPsalm = new Psalm();