<commit_before><dom-module id="vaadin-grid-column-reordering-themability-styles">
  <template>
    <style>
      :host([reordering]) .vaadin-grid-cell {
        background: #000;
      }

      :host([reordering]) .vaadin-grid-cell:not([detailscell]) ::content > .cell-content {
        transition: opacity 300ms;
        transform: translateZ(0);
        opacity: 0.8;
      }

      .vaadin-grid-cell[reorder-status="allowed"] ::content > .cell-content.cell-content {
        opacity: 1;
      }

      .vaadin-grid-cell[reorder-status="dragging"] {
        background: var(--primary-color);
      }

      .vaadin-grid-cell[reorder-status="dragging"] ::content > .cell-content {
        opacity: 0.8;
      }
    </style>
  </template>
</dom-module>

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

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

    properties: {

      /**
       * Set to true to allow column reordering.
       */
      columnReorderingAllowed: {
        type: Boolean,
        value: false
      }

    }

  };

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

    properties: {

      _orderBaseScope: {
        type: Number,
        value: 10000000
      }

    },

    listeners: {
      'dragstart': '_onDragStart',
      'dragover': '_onDragOver',
      'dragend': '_onDragEnd'
    },

    observers: [
      '_updateOrders(columnTree, columnTree.*)',
    ],

    _updateOrders: function(columnTree, splices) {
      // Set order numbers to top-level columns
      columnTree[0].forEach(function(column, index) {
        column._order = (index + 1) * this._orderBaseScope;
      }, this);
    },

    _onDragStart: function(e) {
      var cell = this._getCellByCellContent(e.target);
      if (cell) {
        this.toggleAttribute('reordering', true);
        this._draggedColumn = cell.column;
        this._setSiblingsReorderStatus(this._draggedColumn, 'allowed');
        this._draggedColumn._reorderStatus = 'dragging';

        // Need to set any data to enable D&D on Firefox
        e.dataTransfer.setData('text', '');
        e.dataTransfer.effectAllowed = 'move';
      }
    },

    _setSiblingsReorderStatus: function(column, status) {
      Polymer.dom(Polymer.dom(column).parentNode).children.filter(function(child) {
        return /column/.test(child.localName) && this._isSwapAllowed(child, column);
      }, this).forEach(function(sibling) {
        sibling._reorderStatus = status;
      });
    },

    _onDragOver: function(e) {
      e.preventDefault();
      var targetCell = this._getCellByCellContent(e.target);
      var targetColumn = this._getTargetColumn(targetCell, this._draggedColumn);

      if (targetColumn &&
        this._isSwapAllowed(this._draggedColumn, targetColumn) &&
        this._isSwappableByPosition(targetColumn, e.clientX)) {
        this._swapColumnOrders(this._draggedColumn, targetColumn);
      }
    },

    _onDragEnd: function(e) {
      this.toggleAttribute('reordering', false);
      this._draggedColumn._reorderStatus = '';
      this._setSiblingsReorderStatus(this._draggedColumn, '');
      this._draggedColumn = null;
    },

    _isSwapAllowed: function(column1, column2) {
      if (column1 && column2) {
        var differentColumns = column1 !== column2;
        var sameParent = column1.parentElement === column2.parentElement;
        var sameFrozen = column1.frozen === column2.frozen;
        return differentColumns && sameParent && sameFrozen;
      }
    },

    _isSwappableByPosition: function(targetColumn, clientX) {
      var targetCell = Polymer.dom(this.$.header).querySelectorAll('th').filter(function(cell) {<commit_msg>Automatic horizontal scrolling on reorder drag<commit_after><dom-module id="vaadin-grid-column-reordering-themability-styles">
  <template>
    <style>
      :host([reordering]) .vaadin-grid-cell {
        background: #000;
      }

      :host([reordering]) .vaadin-grid-cell:not([detailscell]) ::content > .cell-content {
        transition: opacity 300ms;
        transform: translateZ(0);
        opacity: 0.8;
      }

      .vaadin-grid-cell[reorder-status="allowed"] ::content > .cell-content.cell-content {
        opacity: 1;
      }

      .vaadin-grid-cell[reorder-status="dragging"] {
        background: var(--primary-color);
      }

      .vaadin-grid-cell[reorder-status="dragging"] ::content > .cell-content {
        opacity: 0.8;
      }
    </style>
  </template>
</dom-module>

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

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

    properties: {

      /**
       * Set to true to allow column reordering.
       */
      columnReorderingAllowed: {
        type: Boolean,
        value: false
      }

    }

  };

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

    properties: {

      _orderBaseScope: {
        type: Number,
        value: 10000000
      }

    },

    listeners: {
      'dragstart': '_onDragStart',
      'dragover': '_onDragOver',
      'dragend': '_onDragEnd'
    },

    observers: [
      '_updateOrders(columnTree, columnTree.*)',
    ],

    _updateOrders: function(columnTree, splices) {
      // Set order numbers to top-level columns
      columnTree[0].forEach(function(column, index) {
        column._order = (index + 1) * this._orderBaseScope;
      }, this);
    },

    _onDragStart: function(e) {
      var cell = this._getCellByCellContent(e.target);
      if (cell) {
        this.toggleAttribute('reordering', true);
        this._draggedColumn = cell.column;
        this._setSiblingsReorderStatus(this._draggedColumn, 'allowed');
        this._draggedColumn._reorderStatus = 'dragging';

        // Need to set any data to enable D&D on Firefox
        e.dataTransfer.setData('text', '');
        e.dataTransfer.effectAllowed = 'move';

        this._autoScroller();
      }
    },

    _setSiblingsReorderStatus: function(column, status) {
      Polymer.dom(Polymer.dom(column).parentNode).children.filter(function(child) {
        return /column/.test(child.localName) && this._isSwapAllowed(child, column);
      }, this).forEach(function(sibling) {
        sibling._reorderStatus = status;
      });
    },

    _onDragOver: function(e) {
      e.preventDefault();
      var targetCell = this._getCellByCellContent(e.target);
      var targetColumn = this._getTargetColumn(targetCell, this._draggedColumn);

      if (targetColumn &&
        this._isSwapAllowed(this._draggedColumn, targetColumn) &&
        this._isSwappableByPosition(targetColumn, e.clientX)) {
        this._swapColumnOrders(this._draggedColumn, targetColumn);
      }

      this._lastDragClientX = e.clientX;
    },

    _autoScroller: function() {
      if (this._lastDragClientX) {
        var rightDiff = this._lastDragClientX - this.getBoundingClientRect().right + 50;
        var leftDiff = this.getBoundingClientRect().left - this._lastDragClientX + 50;

        if (rightDiff > 0) {
          this.$.table.scrollLeft += rightDiff / 10;
        } else if (leftDiff > 0) {
          this.$.table.scrollLeft -= leftDiff / 10;
        }
        this._scrollHandler();
      }

      if (this._draggedColumn) {
        this.async(this._autoScroller, 10);
      }
    },

    _onDragEnd: function(e) {
      this.toggleAttribute('reordering', false);
      this._draggedColumn._reorderStatus = '';
      this._setSiblingsReorderStatus(this._draggedColumn, '');
      this._draggedColumn = null;
      this._lastDragClientX = null;
    },

    _isSwapAllowed: function(column1, column2) {
      if (column1 && column2) {
        var differentColumns = column1 !== column2;
        var sameParent = column1.parentElement === column2.parentElement;
        var sameFrozen = column1.frozen === column2.frozen;
        return differentColumns && sameParent && sameFrozen;
      }
    },

    _isSwappableByPosition: function(targetColumn, clientX) {
      var targetCell = Polymer.dom(this.$.header).querySelectorAll('th').filter(function(cell) {
{'fraction_non_alphanumeric': 0.131430584918957, 'fraction_numerical': 0.008926474042753112, 'mean_word_length': 2.6797752808988764, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3822635', 'n_tokens_mistral': 2719, 'n_tokens_neox': 2576, 'n_words': 414}