vaadin-grid-keyboard-navigation-behavior.html

<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">

<dom-module id="vaadin-grid-navigation-themability-styles">
  <template>
    <style>
      :host(:focus) {
        outline: none;
      }

      :host([navigating]:not([interacting])) [focused] > tr[focused] > [focused] ::content > vaadin-grid-cell-content {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3);
        @apply(--vaadin-grid-focused-cell);
      }
    </style>
  </template>
</dom-module>

<script>
  window.vaadin = window.vaadin || {};
  vaadin.elements = vaadin.elements || {};
  vaadin.elements.grid = vaadin.elements.grid || {};

  /**
   * @polymerBehavior vaadin.elements.grid.KeyboardNavigationBehaviorImpl
   */
  vaadin.elements.grid.KeyboardNavigationBehaviorImpl = {
    hostAttributes: {
      // keys can be listened only when vaadin-grid is focusable
      'tabindex': -1,
      'role': 'application'
    },

    keyBindings: {
      'ctrl+home': '_onCtrlHome',
      'ctrl+end': '_onCtrlEnd',
      'down': '_onArrowDown',
      'end': '_onEnd',
      'enter': '_onEnter',
      'esc': '_onEscape',
      'f2': '_onF2',
      'home': '_onHome',
      'left': '_onArrowLeft',
      'pagedown': '_onPageDown',
      'pageup': '_onPageUp',
      'right': '_onArrowRight',
      'shift+tab': '_onShiftTab',
      'space': '_onSpace',
      'tab': '_onTab',
      'up': '_onArrowUp'
    },

    attached: function() {
      Polymer.IronA11yAnnouncer.requestAvailability();
    },

    _onEnd: function(e) {
      this.$.scroller._onEnd(e);
    },

    _onEnter: function(e) {
      this.$.scroller._onEnter(e);
    },

    _onEscape: function(e) {
      this.$.scroller._onEscape(e);
    },

    _onF2: function(e) {
      this.$.scroller._onF2(e);
    },

    _onTab: function(e) {
      this.$.scroller._onTab(e);
    },

    _onShiftTab: function(e) {
      this.$.scroller._onShiftTab(e);
    },

    _onArrowDown: function(e) {
      this.$.scroller._onArrowDown(e);
    },

    _onArrowUp: function(e) {
      this.$.scroller._onArrowUp(e);
    },

    _onArrowRight: function(e) {
      this.$.scroller._onArrowRight(e);
    },

    _onArrowLeft: function(e) {
      this.$.scroller._onArrowLeft(e);
    },

    _onHome: function(e) {
      this.$.scroller._onHome(e);
    },

    _onCtrlHome: function(e) {
      this.$.scroller._onCtrlHome(e);
    },

    _onCtrlEnd: function(e) {
      this.$.scroller._onCtrlEnd(e);
    },

    _onPageDown: function(e) {
      this.$.scroller._onPageDown(e);
    },

    _onPageUp: function(e) {
      this.$.scroller._onPageUp(e);
    },

    _onSpace: function(e) {
      this.$.scroller._onSpace(e);
    },
  };

  /**
   * @polymerBehavior vaadin.elements.grid.KeyboardNavigationBehavior
   */
  vaadin.elements.grid.KeyboardNavigationBehavior = [vaadin.elements.grid.KeyboardNavigationBehaviorImpl, Polymer.IronA11yKeysBehavior];


  /**
   * @polymerBehavior vaadin.elements.grid.TableKeyboardBehavior
   */
  vaadin.elements.grid.TableKeyboardBehavior = {

    properties: {
      _virtualFocus: {
        type: Object,
        observer: '_virtualFocusChanged'
      },

      interacting: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      },

      navigating: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      }
    },

    listeners: {
      'cell-focus': '_onCellFocus',
      'cell-content-focus': '_onCellContentFocus'
    },

    _isFooterVisible: function() {
      return this.$.footer._rows.filter(function(row) {
        return !row.hidden;
      }).length > 0;
    },

    _onFocusout: function(e) {
      this.navigating = false;
      this.interacting = false;
    },

    _onHeaderFocus: function(e) {
      this.navigating = true;
      this.interacting = false;
      this.$.header._focusedCellIndex = this.$.header._focusedCellIndex || 0;
      this.$.header._focusedRowIndex = this.$.header._focusedRowIndex || 0;
      this._virtualFocus = this.$.header;
    },

    _onBodyFocus: function(e) {
      this.navigating = true;
      this.interacting = false;
      this.$.items._focusedCellIndex = this.$.items._focusedCellIndex || 0;
      this.$.items._focusedRowIndex = this.$.items._focusedRowIndex || 0;
      this._virtualFocus = this.$.items;
    },

    _onFooterFocus: function(e) {
      if (this._isFooterVisible()) {
        this.navigating = true;
        this.interacting = false;

        this.$.footer._focusedCellIndex = this.$.footer._focusedCellIndex || 0;
        this.$.footer._focusedRowIndex = this.$.footer._focusedRowIndex || 0;
        this._virtualFocus = this.$.footer;
      } else if (!this._virtualFocus) {
        this.$.bodyFocusTrap.focus();
      }
    },

    _virtualFocusChanged: function(virtualFocus, oldVirtualFocus) {
      if (oldVirtualFocus) {
        oldVirtualFocus.focused = false;
      }
      if (virtualFocus) {
        virtualFocus.focused = true;

        if (virtualFocus === this.$.items) {
          this._ensureVirtualFocusInViewport();
        }
      }
    },

    _onTab: function(e) {
      if (this.interacting || !this._virtualFocus) {
        return;
      }

      if (this.navigating) {
        switch (this._virtualFocus) {
          case this.$.header:
            this.$.bodyFocusTrap.focus();
            e.preventDefault();
            break;

          case this.$.items:
            this.$.footerFocusTrap.focus();
            if (this._isFooterVisible()) {
              this._virtualFocus = this.$.footer;
              e.preventDefault();
            } else {
              // IE11 doesn't handle the footer trap `focus` event above syncronously
              // which means that virtualFocus gets set to null before the handler is run
              // causing focus being transferred back to body focus trap.
              this.async(function() {
                this._virtualFocus = null;
              }, 1);
            }
            break;

          case this.$.footer:
            this._virtualFocus = null;
            break;
        }
      } else {
        switch (this._virtualFocus) {
          case this.$.header:
            this.$.headerFocusTrap.focus();
            break;

          case this.$.items:
            this.$.bodyFocusTrap.focus();
            break;

          case this.$.footer:
            this.$.footerFocusTrap.focus();
            break;
        }
        e.preventDefault();
      }
    },

    _onShiftTab: function(e) {
      if (this.interacting) {
        return;
      }

      if (this.navigating) {
        switch (this._virtualFocus) {
          case this.$.footer:
            this.$.bodyFocusTrap.focus();
            e.preventDefault();
            break;
          case this.$.items:
            this.$.headerFocusTrap.focus();
            e.preventDefault();
            break;
          case this.$.header:
            this._virtualFocus = null;
            break;
        }
      } else {
        switch (this._virtualFocus) {
          case this.$.footer:
            this.$.footerFocusTrap.focus();
            break;
          case this.$.items:
            this.$.bodyFocusTrap.focus();
            break;
          case this.$.header:
            this.$.headerFocusTrap.focus();
            break;
        }
        e.preventDefault();
      }
    },

    _isAboveViewport: function(index) {
      return this.firstVisibleIndex > index;
    },

    _onArrowDown: function(e) {
      if(this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusDown();

      this._ensureVirtualFocusInViewport();
    },

    _scrollPageDown: function() {
      var headerRect = this.$.header.getBoundingClientRect();
      var footerRect = this.$.footer.getBoundingClientRect();

      this.$.table.scrollTop += footerRect.top - headerRect.bottom;
      this._scrollHandler();
    },

    _onPageDown: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      if (this._virtualFocus === this.$.items) {
        var prevLastVisible = this.lastVisibleIndex;
        this._scrollPageDown();
        this._virtualFocus._focusedRowIndex += (this.lastVisibleIndex - prevLastVisible) ||
         (this.lastVisibleIndex - this._virtualFocus._focusedRowIndex);
        this._ensureVirtualFocusInViewport();
      } else {
        this._virtualFocus.focusPageDown();
      }
    },

    _scrollPageUp: function() {
      var headerRect = this.$.header.getBoundingClientRect();
      var footerRect = this.$.footer.getBoundingClientRect();

      this.$.table.scrollTop -= footerRect.top - headerRect.bottom;
      this._scrollHandler();
    },

    _onPageUp: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      if (this._virtualFocus === this.$.items) {
        var prevLastVisibleIndex = this.lastVisibleIndex;
        this._scrollPageUp();
        this._virtualFocus._focusedRowIndex -= (prevLastVisibleIndex - this.lastVisibleIndex) ||
         this._virtualFocus._focusedRowIndex;
        this._ensureVirtualFocusInViewport();
      } else {
        this._virtualFocus.focusPageUp();
      }
    },

    _onArrowUp: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusUp();

      this._ensureVirtualFocusInViewport();
    },

    _onArrowRight: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusRight();

      this._ensureVirtualFocusInViewport();
    },

    _onArrowLeft: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusLeft();

      this._ensureVirtualFocusInViewport();
    },

    _onHome: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusHome();

      this._ensureVirtualFocusInViewport();
    },

    _onEnd: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusEnd();

      this._ensureVirtualFocusInViewport();
    },

    _moveFocusToFocusTarget: function() {
      var content = this._virtualFocus._focusedCell._cellContent;

      var focusTarget = content.querySelector('[focus-target]') || content.firstElementChild;
      if (focusTarget) {
        focusTarget.focus();
      }
    },

    _onEnter: function(e) {
      if (!this.interacting) {
        e.preventDefault();
        this._moveFocusToFocusTarget();
      } else if (e.detail.keyboardEvent.target.localName === 'input' &&
                 e.detail.keyboardEvent.target.type === 'text') {
        this.interacting = false;
        this._onTab(e); // revert to navigation
      }
    },

    _onEscape: function(e) {
      if (this.interacting) {
        this.interacting = false;
        this._onTab(e); // revert to navigation
      } else if (this.navigating) {
        this.domHost.focus();
      }
    },

    _onF2: function(e) {
      e.preventDefault();
      if (!this.interacting) {
        this._moveFocusToFocusTarget();
      } else {
        this.interacting = false;
        this._onTab(e); // revert to navigation
      }
    },

    _onCtrlHome: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusFirst();

      this._ensureVirtualFocusInViewport();
    },

    _onCtrlEnd: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      this.navigating = true;
      this._virtualFocus.focusLast();

      this._ensureVirtualFocusInViewport();
    },

    _onSpace: function(e) {
      if (this.interacting) {
        return;
      }

      e.preventDefault();

      var focusedCell = this._virtualFocus._focusedCell;
      var firstElementChild = focusedCell.getContentChildren('content')[0].firstElementChild;
      if (firstElementChild) {
        firstElementChild.click();
      } else if (this.navigating) {
        this.fire('cell-activate', {
          model: focusedCell.instance
        });
      }
    },

    _onCellContentFocus: function(e) {
      this.interacting = true;
      this._onCellFocus(e);
    },

    _onCellFocus: function(e) {
      var cell = e.detail.cell;
      var row = cell.parentElement;
      var container = row.parentElement;

      var rowIndex = Polymer.dom(container).children.indexOf(row);
      if (container === this.$.items) {
        rowIndex = row.index;
      }

      container._focusedRowIndex = rowIndex;
      container._focusedCellIndex = Polymer.dom(row).children.indexOf(cell);
      this._virtualFocus = container;

      if (cell.hasAttribute('detailscell')) {
        container._focusedCellIndex = 0;
        container._moveFocusToDetailsCell();
      }
    },


    _ensureVirtualFocusInViewport: function() {
      var scaledVirtualStart = this._vidxOffset + this._virtualStart;
      var focusedIndex = this._virtualFocus._focusedRowIndex;

      if (this._virtualFocus === this.$.items && ((focusedIndex < scaledVirtualStart) ||
          (focusedIndex > scaledVirtualStart + this._physicalCount))) {
        this.scrollToScaledIndex(focusedIndex);
        // force resetting _focusedCell in case element reordering has happened.
        this._virtualFocus._focusedCellChanged(focusedIndex, this._virtualFocus._focusedCellIndex);
      } else {
        this._ensureElementInViewport(this._virtualFocus._focusedCell);
      }
    },

    _ensureElementInViewport: function(element) {
      var elementRect = element.getBoundingClientRect();

      // Vertical
      if (this._virtualFocus === this.$.items) {
        var maxBottom = this.$.footer.getBoundingClientRect().top;
        var minTop = this.$.header.getBoundingClientRect().bottom;
        if (elementRect.bottom > maxBottom) {
          this.$.table.scrollTop += (elementRect.bottom - maxBottom);
        } else if (elementRect.top < minTop) {
          this.$.table.scrollTop += (elementRect.top - minTop);
        }
      }

      // skip horizontal scrolling when focusing on row details cell to avoid
      // unintentional scrolling.
      if (element.hasAttribute('detailscell')) {
        return;
      }

      // Horizontal
      var maxRight = this.$.table.getBoundingClientRect().right;
      var minLeft = this.$.table.getBoundingClientRect().left;
      var lastFrozen = this._virtualFocus._focusedRow.querySelector('[last-frozen]');
      if (lastFrozen) {
        minLeft = lastFrozen.getBoundingClientRect().right;
      }

      if (elementRect.right > maxRight) {
        this.$.table.scrollLeft += (elementRect.right - maxRight);
      } else if (elementRect.left < minLeft) {
        this.$.table.scrollLeft += (elementRect.left - minLeft);
      }
    }
  };
</script>