@chris-lewis/fitbit-utils/app/ui.js

Common utility modules for common tasks across projects.

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

import { display } from 'display';
import * as document from 'document';
/**
 * Get an element by 'id'
 *
 * @param {string} id - Element ID.
 * @returns {HTMLElement} The element. If it's already an object, the object is returned.
 */

export var get = function get(id) {
  return _typeof(id) === 'object' ? id : document.getElementById(id);
};
/**
 * Set an element's visibility.
 *
 * @param {string} id - Element 'id' to show/hide.
 * @param {boolean} visible - Set to 'true' to show, 'false' to hide.
 */

export var setVisible = function setVisible(id, visible) {
  get(id).style.display = visible ? 'inline' : 'none';
};
/**
 * Set the 'text' of an element.
 *
 * @param {string} id - Element 'id' to update.
 * @param {string} text - Text to show.
 */

export var setText = function setText(id, text) {
  get(id).text = text;
};
/**
 * Trigger an element's associated animation.
 *
 * @param {string} id - Element ID.
 */

export var animate = function animate(id) {
  return get(id).animate('enable');
};
/**
 * Windows collect multiple elements by ID using a parent <svg> element,
 * allow showing/hiding of the whole tree in one go, provide update routines,
 * and start hidden.
 *
 * opts.setup is called immediately
 * opts.update is called at the developer's discretion to update all elements at once.
 *
 * @param {Object} opts - Options (see below)
 * @returns {Function} Window 'class'.
 */

export function Window(_ref) {
  var _this = this;

  var id = _ref.id,
      setup = _ref.setup,
      update = _ref.update;
  this.id = id;

  this.show = function () {
    return setVisible(_this.id, true);
  };

  this.hide = function () {
    return setVisible(_this.id, false);
  };

  this.hide();

  if (update) {
    this.update = update;
  }

  if (setup) {
    setup();
  }
}
/**
 * Get a child element of a parent by its own ID.
 *
 * @param {HTMLElement} element - Element object parent.
 * @param {string} id - ID of the child element.
 * @returns {HTMLElement} Child element.
 */

var getChild = function getChild(element, id) {
  return element.getElementById(id);
};
/**
 * Cards are a single instance, multiple reuse element with child elements.
 * Associated SVG is not included, but goes something like this:
 *
 *  <defs>
 *    <symbol id="card">
 *      <image id="bg" class="card-bg" href="./resources/bg-rounded.png"/>
 *      <text id="index" class="card-index">0/0</text>
 *      <text id="index" class="card-index">0/0</text>
 *      <rect pointer-events="visible">
 *        <textarea id="title" class="card-title">TITLE</textarea>
 *        <textarea id="description" class="card-description">DESC</textarea>
 *      </rect>
 *      <rect class="card-div-line"/>
 *      <text id="date" class="card-date">date</text>
 *    </symbol>
 *  </defs>
 *
 * And used as so:
 *
 *  <use href="#tile-list-item">
 *    <use id="card[0]" href="#card"/>
 *  </use>
 */


export function Card(id) {
  this.root = get(id);

  this.setText = function (id, text) {
    getChild(this.root, id).text = text;
  };

  this.get = function (id) {
    return getChild(this.root, id);
  };
  /**
   * Choose whether the title or description are visible.
   */


  this.setVisibleElement = function (id) {
    setVisible(this.get('title'), false);
    setVisible(this.get('description'), false);
    setVisible(this.get(id), true);
  };
}
;
/**
 * When the display state changes.
 *
 * @param {Function} cb - Callback to be called.
 */

export var onDisplayChange = function onDisplayChange(cb) {
  display.addEventListener('change', function () {
    return cb(display.on);
  });
};