spatial-navigation/lib/Element.js

A javascript-based implementation of Spatial Navigation.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _EventAggregator = require('./EventAggregator');

var _EventAggregator2 = _interopRequireDefault(_EventAggregator);

var _ElementCollection = require('./ElementCollection');

var _ElementCollection2 = _interopRequireDefault(_ElementCollection);

var _KeyMapNavigation = require('./KeyMapNavigation');

var _KeyMapNavigation2 = _interopRequireDefault(_KeyMapNavigation);

var _Container = require('./Container');

var _Container2 = _interopRequireDefault(_Container);

var _Keyboard = require('./Keyboard');

var _Keyboard2 = _interopRequireDefault(_Keyboard);

var _Navigation = require('./Navigation');

var _Navigation2 = _interopRequireDefault(_Navigation);

var _constants = require('./util/constants');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Element = function () {

  // TODO wtf is hasCollection here?
  // TODO wtf is collectionSettings here? It never used in ElementCollection!
  function Element(domEl) {
    var _this = this;

    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
        keyBindings = _ref.keyBindings,
        autoFocus = _ref.autoFocus,
        hasCollection = _ref.hasCollection,
        collectionSettings = _ref.collectionSettings;

    _classCallCheck(this, Element);

    this.domEl = domEl || null;
    this.disabled = false;
    /**
     * @type {null|Container|Element}
     */
    this.parent = null;
    // TODO wtf is hasCollection here?
    // TODO if there is Boolean when condition is wrong!
    this.collection = hasCollection || collectionSettings ? new _ElementCollection2.default(this, collectionSettings) : null;

    if (domEl) {
      this.connectDomEl(domEl);
    }

    if (keyBindings) {
      this.bindKeyAction(keyBindings);
    }

    if (autoFocus) {
      if (this.collection) {
        this.collection.eventAggregator.once(_constants.EVENT_PREFIX + 'addElement', function (element) {
          if (element === _this) {
            _this.focus();
            return true;
          }
          return false;
        });
      } else {
        this.focus();
      }
    }
  }

  /**
   * @param domEl
   * @param settings
   */


  _createClass(Element, [{
    key: 'connectDomEl',
    value: function connectDomEl(domEl) {
      this.domEl = domEl;
      this.designDomEl();
      this.bindListeners();
    }
  }, {
    key: 'designDomEl',
    value: function designDomEl() {
      this.domEl.setAttribute('tabindex', '-1');
      this.domEl.style.outline = 'none';
    }
  }, {
    key: 'bindListeners',
    value: function bindListeners() {
      this.domEl.addEventListener('click', this.onUserClick.bind(this));
    }
  }, {
    key: 'unbindListeners',
    value: function unbindListeners() {
      this.domEl.removeEventListener('click', this.onUserClick.bind(this));
    }
  }, {
    key: 'bindKeyAction',
    value: function bindKeyAction(mapping) {
      var normailizedMap = _Keyboard2.default.addToMap(mapping);

      _KeyMapNavigation2.default.addRelation(normailizedMap, this);
    }
  }, {
    key: 'disable',
    value: function disable() {
      this.disabled = true;
    }
  }, {
    key: 'enable',
    value: function enable() {
      this.disabled = false;
    }
  }, {
    key: 'focus',
    value: function focus() {
      // going inside
      if (Boolean(this.collection)) {
        this.collection.focus();
      }
      // going outside
      else {
          this.domEl.focus();
          this.parent.collection.setFocusedIndex(this);

          if (this.parent.constructor.name === 'Element') {
            this.parent.parent.collection.setFocusedIndex(this.parent);
          }

          if (_Navigation2.default.focusedElement) {
            var focusedContainer = _Navigation2.default.focusedElement.getContainer();
            if (focusedContainer != this.getContainer()) {
              focusedContainer.blur();
            }
          }

          // used in Navigation to set focusedElement
          _EventAggregator2.default.dispatchEvent(_constants.EVENT_PREFIX + 'focusElement', this);
        }
    }
  }, {
    key: 'onUserClick',
    value: function onUserClick(event) {
      event.stopPropagation();

      if (this.disabled || Boolean(this.collection)) {
        return;
      }

      _Navigation2.default.focusInstance(this);
    }
  }, {
    key: 'blur',
    value: function blur() {
      this.domEl.blur();
      _EventAggregator2.default.dispatchEvent(_constants.EVENT_PREFIX + 'blurElement', this);
    }
  }, {
    key: 'getContainer',
    value: function getContainer() {
      var parent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.parent;

      if (!parent || !Boolean(parent.constructor.name === 'Container')) {
        return this.getContainer(parent.parent);
      }

      return parent;
    }
  }, {
    key: 'destroy',
    value: function destroy() {
      this.unbindListeners();
    }
  }]);

  return Element;
}();

Element.create = function (domEl, settings) {
  return new Element(domEl, settings);
};

exports.default = Element;
module.exports = exports['default'];