search_arrows.js

(function() {
  var SearchArrows = window.SearchArrows = function() {
    this.LI_SELECTOR = '.search-list-li';
    this.ACTIVE_CLASS = 'active';
    this.active = false;
    this.currentSelection = null;
    this.selectedLi = null;

    this.onKeydown = function(e)  {
      if (e.which === 40)  {
        e.preventDefault();
        this.onDownArrow();
      } else if (e.which === 38) {
        e.preventDefault();
        this.onUpArrow();
      } else if (e.which === 13)  {
        this.onEnter(e);
      }
    };
    this.onKeydownCb = this.onKeydown.bind(this);

    this.onUpArrow = function() {
      this.removeActiveClass();

      if (this.currentSelection === 0 || this.currentSelection == null) this.markLastItem();
      else  {
        if (this.currentSelection === 0) this.currentSelection = this.listLength - 1;
        else this.currentSelection -= 1;

        this.selectedLi = this.list[this.currentSelection];
        this.selectedLi.classList.add(this.ACTIVE_CLASS);
      }
    };

    this.onDownArrow = function() {
      this.removeActiveClass();

      if (this.currentSelection === this.listLength - 1 || this.currentSelection == null) this.markFirstItem();
      else  {
        if (this.currentSelection === this.listLength - 1) this.currentSelection = 0;
        else this.currentSelection += 1;

        this.selectedLi = this.list[this.currentSelection];
        this.selectedLi.classList.add(this.ACTIVE_CLASS);
      }
    };

    this.onEnter = function() {
      window.location.href = this.selectedLi.querySelector('a').getAttribute('href');
    };

    this.removeActiveClass = function() {
      if (this.selectedLi) this.selectedLi.classList.remove(this.ACTIVE_CLASS);
    };

    this.markFirstItem = function() {
      this.selectedLi = this.list[0];
      this.selectedLi.classList.add(this.ACTIVE_CLASS);
      this.currentSelection = 0;
    };

    this.markLastItem = function()  {
      this.selectedLi = this.list[this.list.length - 1];
      this.selectedLi.classList.add(this.ACTIVE_CLASS);
      this.currentSelection = this.listLength - 1;
    };
  };

  SearchArrows.prototype.init = function()  {
    if (this.isActive()) this.destroy();

    this.list = document.querySelectorAll(this.LI_SELECTOR);
    this.listLength = this.list.length;
    if (this.listLength === 0) return;

    window.addEventListener('keydown', this.onKeydownCb);
    this.active = true;
  };

  SearchArrows.prototype.destroy = function() {
    window.removeEventListener('keydown', this.onKeydownCb);
    this.active = false;
    this.currentSelection = null;
  };
  
  SearchArrows.prototype.isActive = function()  {
    return this.active;
  };

  SearchArrows.prototype.isOneOfKeys = function(keyCode) {
    return ([40, 38, 13].indexOf(keyCode) !== -1);
  }
})();