path: root/activePage.es

var cur_section = Symbol();

export class ActivePage {

  constructor(appName) {
    // 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.
    this[cur_section] = null;
    this.swipe_pos_x = 0;
    this.swipe_pos_y = 0;
    this.app_record = null;

    // Swipe event handlers
    var cur_location = window.location.href;
    console.log('cur_location = ' + cur_location);
    var last_slash = cur_location.lastIndexOf('/');
    var base_url = cur_location.slice(0, last_slash + 1) +
        appName + '.webapp';
    console.log('base_url = ' + base_url);
    this.app_record = null;

    if (!!navigator.mozApps) {
      var chk_inst_req = navigator.mozApps.getSelf();

      chk_inst_req.onsuccess = function(e) {
        console.log('chk_inst_req.result = ' + chk_inst_req.result);
        if (!chk_inst_req.result) {
          var install_but_loc = document.getElementById('installButton');
          console.log('install_but_loc = ' + install_but_loc);
          install_but_loc.style.display = 'block';
          install_but_loc.innerHTML =
            '<button id="installAction">Install App</button>';
        }
        document.getElementById('installAction').addEventListener('click',
          (evt) => {
            var install_req = navigator.mozApps.install(base_url);
            install_req.onsuccess = function() {
              this.app_record = this.result;
              console.log('Installed with success!');
            };
            install_req.onerror = function() {
              console.log('I cannot install the app!');
            };
          }, false);
      };
      chk_inst_req.onerror = function(e) {
        // Most likely we are not on Firefox or something.
        console.log('Cannot check whether the app has been installed.');
      };
    }


    document.body.addEventListener("dblclick",
      () => {
        console.log("dblclick");
        this.display();
      }, false);

    document.body.addEventListener("mousedown",
      (evt) => {
        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) => {
        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) => {
        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) => {
        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);

    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() {
    // first scroll then switch to avoid blinking of the page
    window.scroll(0, 0);

    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, distY) {
    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();
  }

}