path: root/zalmy.ts

/// <reference path='touchEvent.d.ts' />

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;
        localStorage.setItem("curPsalm", JSON.stringify(this._cur_psalm));
      }
      else {
        this._cur_psalm = stored;
      }
    }

    return this._cur_psalm;
  }

  public set cur_psalm(value: number) {
    // Remove 'visible' style from the currently displayed psalm, if
    // there is any
    this.hide();

    if ((value > 0) && (value <= 150)) {
      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;
    console.log('distX = ' + distX);
    console.log('distY = ' + distY);

    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 the current Psalm
   *
   * @param number Number of the psalm to be displayed (optional)
   *
   * Displays the particular Psalm
   */
  display(new_date: number = this.cur_psalm) {
    console.log("cur_psalm = " + new_date);
    document.getElementById("Ps." + new_date).parentElement.
      classList.add('visible');
  }

  /**
   * Hides the current Psalm
   */
  hide() {
    document.getElementById("Ps." + this.cur_psalm).parentElement.
      classList.remove('visible');
  }

  next_psalm() {
    console.log("Next day!");
    this.cur_psalm += 1;
  }

  prev_psalm() {
    console.log("Previous day!");
    this.cur_psalm -= 1;
  }
}

var thisPsalm = new Psalm();