draw()

in js/layout/renderer/fixed-header.js [25:97]

• 60 lines of code
• 7 McCabe index (conditional complexity)

  draw(data, cb) {
    data.vpMeasures = measure.viewport.call(this.layout);

    const $el = this.layout.$el;
    const offset = _.result(this.layout, 'top', 0);
    const isSticky = (data.vpMeasures.viewportTop + offset) > data.vpMeasures.boundsTop;
    const newState = isSticky ? 'sticky' : 'normal';

    data.canSkipDraw = newState === this.state;
    data.isSticky = isSticky;

    cb(undefined, data);

    $el.find('table.grid').css({ tableLayout: 'fixed' });

    if (isSticky) {
      const $tableStickyHeader = $el.find('table.grid-sticky-header');
      const $tableContent = $el.find('table.grid-content');
      const $thLastRow = $tableStickyHeader.find('thead > tr:last-child').children();
      const $tdFirstRow = $tableContent.find('tbody > tr:first-child').children();

      if (this.state === 'normal') {
        const $stickyHeaderFiller = $el.find('.sticky-header-filler');
        $stickyHeaderFiller.css({
          height: $tableStickyHeader.outerHeight(),
        });
      }

      const setColumnWidth = (tableWidth, columnWidth) => {
        _.each([
          $thLastRow,
          $tdFirstRow,
        ], ($elems) => _.each($elems, (el, index) => {
          $(el).css({
            width: _.result(columnWidth, index, ''),
          });
        }));

        $el.find('table.grid').css({
          width: tableWidth,
        });
      };

      const unfreezeColumnWidth = () => {
        setColumnWidth('', null);
      };

      const freezeColumnWidth = this.freezeColumnWidth = () => {
        if (!this.columnWidth || Math.abs($(window).width() - this.windowWidth) >= 1) {
          unfreezeColumnWidth();
          this.windowWidth = $(window).width();
          this.tableWidth = $tableContent.outerWidth();
          this.columnWidth = _.map($tdFirstRow, (td) => $(td).outerWidth());
        }

        setColumnWidth(this.tableWidth, this.columnWidth);
      };

      freezeColumnWidth();
      $tableStickyHeader.css({
        top: offset,
        left: $tableContent.offset().left - window.scrollX,
        position: 'fixed',
      });
    } else {
      this.freezeColumnWidth = null;
    }

    if (this.state !== newState) {
      this.layout.grid.trigger('change:header-state', newState);
      this.state = newState;
    }
  }