Source: ui/widget.js

var inherit = require('../inherit');
var sceneObject = require('../sceneObject');
var $ = require('jquery');

/**
 * @typedef {object} geo.gui.widget.position
 * @property {string|number} [top] The position to the top of the container.
 *   A string css position or a number in pixels.
 * @property {string|number} [right] The position to the right of the
 *   container.  A string css position or a number in pixels.
 * @property {string|number} [bottom] The position to the bottom of the
 *   container.  A string css position or a number in pixels.
 * @property {string|number} [left] The position to the left of the container.
 * @property {string|number} [top] The position to the top of the container.
 * @property {*} [...] Additional css properties that affect position are
 *   allowed.  See the css specification for details.
 */

/**
 * @typedef {object} geo.gui.widget.spec
 *
 * @property {geo.layer} [layer] Layer associated with the widget.
 * @property {geo.gui.widget.position} [position] Location of the widget.
 * @property {geo.gui.widget} [parent] Optional parent widget.
 */

/**
 * Create a new instance of class widget.
 *
 * @class
 * @alias geo.gui.widget
 * @extends {geo.sceneObject}
 * @param {geo.gui.widget.spec} [arg] Options for the widget.
 * @returns {geo.gui.widget}
 */
var widget = function (arg) {
  'use strict';
  if (!(this instanceof widget)) {
    return new widget(arg);
  }
  arg = arg || {};
  sceneObject.call(this, arg);

  var geo_event = require('../event');

  var m_this = this,
      s_exit = this._exit,
      m_layer = arg.layer,
      m_canvas = null,
      m_position = arg.position === undefined ? { left: 0, top: 0 } : arg.position;

  if (arg.parent !== undefined && !(arg.parent instanceof widget)) {
    throw new Error('Parent must be of type geo.gui.widget');
  } else if (arg.parent) {
    m_this.parent(arg.parent);
  }

  /**
   * Initialize the widget.
   *
   * @returns {this}
   */
  this._init = function () {
    m_this.modified();
    return m_this;
  };

  /**
   * Clean up the widget.
   */
  this._exit = function () {
    m_this.children().forEach(function (child) {
      m_this.removeChild(child);
      child._exit();
    });

    m_this.layer().geoOff(geo_event.pan, m_this.repositionEvent);
    if (m_this.parentCanvas().removeChild && m_this.canvas()) {
      try {
        m_this.parentCanvas().removeChild(m_this.canvas());
      } catch (err) {
        // fail gracefully if the canvas is not a child of the parentCanvas
      }
    }
    s_exit();
  };

  /**
   * Return the layer associated with this widget.
   *
   * @returns {geo.layer}
   */
  this.layer = function () {
    return m_layer || (m_this.parent() && m_this.parent().layer());
  };

  /**
   * Create the canvas this widget will operate on.
   */
  this._createCanvas = function () {
    throw new Error('Must be defined in derived classes');
  };

  /**
   * Get/Set the canvas for the widget.
   *
   * @param {HTMLElement} [val] If specified, set the canvas, otherwise get
   *    the canvas.
   * @returns {HTMLElement|this} If getting the canvas, return the current
   *    value; otherwise, return this widget.
   */
  this.canvas = function (val) {
    if (val === undefined) {
      return m_canvas;
    }
    m_canvas = val;
    return m_this;
  };

  /**
   * Appends the canvas to the parent canvas.
   * The widget determines how to append itself to a parent, the parent can
   * either be another widget, or the UI Layer.
   */
  this._appendCanvasToParent = function () {
    m_this.parentCanvas().appendChild(m_this.canvas());
  };

  /**
   * Get the parent canvas (top level widgets define their layer as their
   * parent canvas).
   *
   * @returns {HTMLElement} The canvas of the widget's parent.
   */
  this.parentCanvas = function () {
    if (!m_this.parent()) {
      return m_this.layer().canvas();
    }
    return m_this.parent().canvas();
  };

  /**
   * Get or set the CSS positioning that a widget should be placed at.
   *
   * @param {geo.gui.widget.position} [pos] If unspecified, return the current
   *    position.  Otherwise, set the current position.
   * @param {boolean} [actualValue] If getting the position, if this is truthy,
   *    always return the stored value, not a value adjusted for display.
   * @returns {geo.gui.widget.position|this} Either the position or the widget
   *    instance.  If this is the position and `actualValue` is falsy,
   *    positions that specify an explicit `x` and `y` parameter will be
   *    converted to a value that can be used by the display css.
   */
  this.position = function (pos, actualValue) {
    if (pos !== undefined) {
      m_this.layer().geoOff(geo_event.pan, m_this.repositionEvent);
      var clearPosition = {};
      for (var attr in m_position) {
        if (m_position.hasOwnProperty(attr)) {
          clearPosition[attr] = null;
        }
      }
      m_position = pos;
      if (m_position.hasOwnProperty('x') && m_position.hasOwnProperty('y')) {
        m_this.layer().geoOn(geo_event.pan, m_this.repositionEvent);
      }
      m_this.reposition($.extend(clearPosition, m_this.position()));
      return m_this;
    }
    if (m_position.hasOwnProperty('x') && m_position.hasOwnProperty('y') && !actualValue) {
      var position = m_this.layer().map().gcsToDisplay(m_position);

      return {
        left: position.x,
        top: position.y,
        right: null,
        bottom: null
      };
    }

    return m_position;
  };

  /**
   * Repositions a widget.
   *
   * @param {geo.gui.widget.position} [position] The new position for the
   *    widget.  `undefined` uses the stored position value.
   * @returns {this}
   */
  this.reposition = function (position) {
    position = position || m_this.position();
    if (m_this.canvas() && m_this.canvas().style) {
      m_this.canvas().style.position = 'absolute';

      for (var cssAttr in position) {
        if (position.hasOwnProperty(cssAttr)) {
          // if the property is a number, add px to it, otherwise set it to the
          // specified value.  Setting a property to null clears it.  Setting to
          // undefined doesn't alter it.
          if (/^\s*(-|\+)?(\d+(\.\d*)?|\d*\.\d+)([eE](-|\+)?\d+)?\s*$/.test(position[cssAttr])) {
            // this ensures that the number is a float with no more than 3
            // decimal places (Chrome does this automatically, but doing so
            // explicitly makes testing more consistent).  It will be an
            // integer when possible.
            m_this.canvas().style[cssAttr] = parseFloat(parseFloat(position[cssAttr]).toFixed(3)) + 'px';
          } else {
            m_this.canvas().style[cssAttr] = position[cssAttr];
          }
        }
      }
    }
    return m_this;
  };

  /**
   * If the position is based on map coordinates, this gets called when the
   * map is panned to resposition the widget.
   *
   * @returns {this}
   */
  this.repositionEvent = function () {
    return m_this.reposition();
  };

  /**
   * Report if the top left of widget (or its current x, y position) is within
   * the viewport.
   *
   * @returns {boolean} True if the widget is within the viewport.
   */
  this.isInViewport = function () {
    var position = m_this.position();
    var layer = m_this.layer();

    return ((position.left >= 0 && position.top >= 0) &&
            (position.left <= layer.width() && position.top <= layer.height()));
  };

  if (m_position.hasOwnProperty('x') && m_position.hasOwnProperty('y')) {
    this.layer().geoOn(geo_event.pan, m_this.repositionEvent);
  }
};
inherit(widget, sceneObject);
module.exports = widget;