@danielgindi/dgtable.js 2.0.5 → 2.0.7

package/dist/lib.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/dgtable.js 2.0.5
+ * @danielgindi/dgtable.js 2.0.7
  * git://github.com/danielgindi/dgtable.js.git
  */
 'use strict';
@@ -2382,6 +2382,7 @@ const HoverOutEventSymbol = Symbol('hover_out');
 const RowClickEventSymbol = Symbol('row_click');
 const PreviewCellSymbol = Symbol('preview_cell');
 const OriginalCellSymbol = Symbol('cell');
+const RelatedTouch = Symbol('related_touch');
 
 function webkitRenderBugfix(el) {
   // BUGFIX: WebKit has a bug where it does not relayout, and this affects us because scrollbars
@@ -2450,7 +2451,7 @@ class DGTable {
       this.el.classList.add(options.className || 'dgtable-wrapper');
     }
 
-    p.eventsSink.add(this.el, 'dragend.colresize', this._onEndDragColumnHeader.bind(this));
+    p.eventsSink.add(this.el, 'dragend.colresize', this._onDragEndColumnHeader.bind(this));
 
     /**
      * @private
@@ -4899,10 +4900,10 @@ class DGTable {
   /**previousElementSibling
    * Reverse-calculate the column to resize from mouse position
    * @private
-   * @param {MouseEvent} event mouse event
+   * @param {MouseEvent|TouchEvent} event mouse event
    * @returns {string|null} name of the column which the mouse is over, or null if the mouse is not in resize position
    */
-  _getColumnByResizePosition(event) {
+  _getColumnByResizePosition(event) {var _ref, _event$RelatedTouch, _event$changedTouches;
     let o = this._o,
       rtl = this._isTableRtl();
 
@@ -4918,7 +4919,8 @@ class DGTable {
 
     let firstCol = !previousElementSibling;
 
-    let mouseX = (event.pageX || event.clientX) - Css_js.getElementOffset(headerCell).left;
+    const positionHost = (_ref = (_event$RelatedTouch = event[RelatedTouch]) !== null && _event$RelatedTouch !== void 0 ? _event$RelatedTouch : (_event$changedTouches = event.changedTouches) === null || _event$changedTouches === void 0 ? void 0 : _event$changedTouches[0]) !== null && _ref !== void 0 ? _ref : event;
+    let mouseX = (positionHost.pageX || positionHost.clientX) - Css_js.getElementOffset(headerCell).left;
 
     if (rtl) {
       if (!firstCol && Css_js.getElementWidth(headerCell, true, true, true) - mouseX <= o.resizeAreaWidth / 2) {
@@ -4962,23 +4964,8 @@ class DGTable {
       clearTimeout(tapAndHoldTimeout);
     };
 
-    let fakeMouseEvent = (name, ...args) => {
-      for (const k of event)
-      event[k];
-
-      for (const obj of args) {
-        for (const key of ['target', 'clientX', 'clientY', 'offsetX', 'offsetY', 'screenX', 'screenY', 'pageX', 'pageY', 'which']) {
-          if (obj[key] != null)
-          obj[key];
-        }
-      }
-
-      return new MouseEvent(name, event);
-    };
-
-    cellEl.dispatchEvent(
-      fakeMouseEvent('mousedown', event.changedTouches[0], { button: 0, target: event.target })
-    );
+    event[RelatedTouch] = event.changedTouches[0];
+    this._onMouseDownColumnHeader(event);
 
     tapAndHoldTimeout = setTimeout(() => {
       unbind();
@@ -4999,16 +4986,13 @@ class DGTable {
 
       if (distanceTravelled < distanceTreshold) {
         this.cancelColumnResize();
-
-        cellEl.dispatchEvent(
-          fakeMouseEvent('mouseup', event.changedTouches[0], { button: 2, target: event.target })
-        );
+        this._triggerColumnHeaderContextMenu(event);
       }
 
     }, 500);
 
     p.eventsSink.
-    add(cellEl, 'touchend.colheader', (event) => {
+    add(cellEl, 'touchend.colheader', (/**TouchEvent*/event) => {
       let touch = find(event.changedTouches, (touch) => touch.identifier === p.currentTouchId);
       if (!touch) return;
 
@@ -5022,18 +5006,13 @@ class DGTable {
       let distanceTravelled = Math.sqrt(Math.pow(Math.abs(currentPos.x - startPos.x), 2) + Math.pow(Math.abs(currentPos.y - startPos.y), 2));
 
       if (distanceTravelled < distanceTreshold || p.resizer) {
-        cellEl.dispatchEvent(
-          fakeMouseEvent('mouseup', touch, { 0: 2, target: event.target })
-        );
-
-        cellEl.dispatchEvent(
-          fakeMouseEvent('click', touch, { button: 0, target: event.target })
-        );
+        event[RelatedTouch] = touch;
+        this._onSortOnColumnHeaderEvent(event);
       }
 
     }).
     add(cellEl, 'touchcancel.colheader', unbind).
-    add(cellEl, 'touchmove.colheader', (event) => {
+    add(cellEl, 'touchmove.colheader', (/**TouchEvent*/event) => {
       let touch = find(event.changedTouches, (touch) => touch.identifier === p.currentTouchId);
       if (!touch) return;
 
@@ -5043,18 +5022,18 @@ class DGTable {
       if (p.resizer) {
         event.preventDefault();
 
-        cellEl.dispatchEvent(
-          fakeMouseEvent('mousemove', touch, { target: event.target })
-        );
+        event[RelatedTouch] = touch;
+        this._onMouseMoveColumnHeader(event);
       }
     });
   }
 
   /**
-   * @param {MouseEvent} event
+   * @param {MouseEvent|TouchEvent} event
    */
   _onMouseDownColumnHeader(event) {
-    if (event.button !== 0) return this; // Only treat left-clicks
+    if (event.type === 'mousedown' && event.button !== 0)
+    return;
 
     let o = this._o,
       p = this._p,
@@ -5121,48 +5100,61 @@ class DGTable {
 
       p.eventsSink.
       add(document, 'mousemove.colresize', this._onMouseMoveResizeArea.bind(this)).
-      add(document, 'mouseup.colresize', this._onEndDragColumnHeader.bind(this));
+      add(document, 'touchmove.colresize', this._onMouseMoveResizeArea.bind(this)).
+      add(document, 'mouseup.colresize', this._onResizerPointerUpColumnHeader.bind(this)).
+      add(document, 'touchend.colresize', this._onResizerPointerUpColumnHeader.bind(this));
 
       event.preventDefault();
     }
   }
 
   /**
-   * @param {MouseEvent} event event
+   * @param {MouseEvent|TouchEvent} event event
    */
   _onMouseMoveColumnHeader(event) {
-    let o = this._o,
+    const o = this._o,
       p = this._p;
 
-    if (o.resizableColumns) {
-      let col = this._getColumnByResizePosition(event);
-      let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
-      if (!col || !p.columns.get(col).resizable) {
-        headerCell.style.cursor = '';
-      } else {
-        headerCell.style.cursor = 'e-resize';
-      }
+    if (!o.resizableColumns)
+    return;
+
+    let col = this._getColumnByResizePosition(event);
+    let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+    if (!col || !p.columns.get(col).resizable) {
+      headerCell.style.cursor = '';
+    } else {
+      headerCell.style.cursor = 'e-resize';
     }
   }
 
   /**
-   * @param {MouseEvent} event
+   * @param {MouseEvent|TouchEvent} event
    */
   _onMouseUpColumnHeader(event) {
-    if (event.button === 2) {
-      let o = this._o;
-      let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
-      let bounds = Css_js.getElementOffset(headerCell);
-      bounds['width'] = Css_js.getElementWidth(headerCell, true, true, true);
-      bounds['height'] = Css_js.getElementHeight(headerCell, true, true, true);
-      this.emit('headercontextmenu', {
-        columnName: headerCell['columnName'],
-        pageX: event.pageX,
-        pageY: event.pageY,
-        bounds: bounds
-      });
-    }
-    return this;
+    if (event.button !== 2)
+    return;
+
+    this._triggerColumnHeaderContextMenu(event);
+  }
+
+  /**
+   * @param {MouseEvent|TouchEvent} event
+   */
+  _triggerColumnHeaderContextMenu(event) {var _ref2, _event$RelatedTouch2, _event$changedTouches2;
+    const o = this._o;
+
+    const positionHost = (_ref2 = (_event$RelatedTouch2 = event[RelatedTouch]) !== null && _event$RelatedTouch2 !== void 0 ? _event$RelatedTouch2 : (_event$changedTouches2 = event.changedTouches) === null || _event$changedTouches2 === void 0 ? void 0 : _event$changedTouches2[0]) !== null && _ref2 !== void 0 ? _ref2 : event;
+
+    let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+    let bounds = Css_js.getElementOffset(headerCell);
+    bounds['width'] = Css_js.getElementWidth(headerCell, true, true, true);
+    bounds['height'] = Css_js.getElementHeight(headerCell, true, true, true);
+    this.emit('headercontextmenu', {
+      columnName: headerCell['columnName'],
+      pageX: positionHost.pageX,
+      pageY: positionHost.pageY,
+      bounds: bounds
+    });
   }
 
   /**
@@ -5177,41 +5169,43 @@ class DGTable {
 
   /**
    * @private
-   * @param {MouseEvent} event event
+   * @param {MouseEvent|TouchEvent} event event
    */
-  _onClickColumnHeader(event) {
+  _onSortOnColumnHeaderEvent(event) {
     if (isInputElementEvent(event))
     return;
 
-    if (!this._getColumnByResizePosition(event)) {
-      let o = this._o,
-        p = this._p;
+    if (this._getColumnByResizePosition(event))
+    return;
 
-      let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
-      if (o.sortableColumns) {
-        let column = p.columns.get(headerCell['columnName']);
-        let currentSort = p.rows.sortColumn;
-        if (column && column.sortable) {
-          let shouldAdd = true;
+    const o = this._o,
+      p = this._p;
+
+    let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+    if (!o.sortableColumns)
+    return;
 
-          let lastSort = currentSort.length ? currentSort[currentSort.length - 1] : null;
+    let column = p.columns.get(headerCell['columnName']);
+    let currentSort = p.rows.sortColumn;
+    if (column && column.sortable) {
+      let shouldAdd = true;
 
-          if (lastSort && lastSort.column === column.name) {
-            if (!lastSort.descending || !o.allowCancelSort) {
-              lastSort.descending = !lastSort.descending;
-            } else {
-              shouldAdd = false;
-              currentSort.splice(currentSort.length - 1, 1);
-            }
-          }
+      let lastSort = currentSort.length ? currentSort[currentSort.length - 1] : null;
 
-          if (shouldAdd) {
-            this.sort(column.name, undefined, true).render();
-          } else {
-            this.sort(); // just refresh current situation
-          }
+      if (lastSort && lastSort.column === column.name) {
+        if (!lastSort.descending || !o.allowCancelSort) {
+          lastSort.descending = !lastSort.descending;
+        } else {
+          shouldAdd = false;
+          currentSort.splice(currentSort.length - 1, 1);
         }
       }
+
+      if (shouldAdd) {
+        this.sort(column.name, undefined, true).render();
+      } else {
+        this.sort(); // just refresh current situation
+      }
     }
   }
 
@@ -5242,9 +5236,9 @@ class DGTable {
 
   /**
    * @private
-   * @param {MouseEvent} event event
+   * @param {MouseEvent|TouchEvent} event event
    */
-  _onMouseMoveResizeArea(event) {
+  _onMouseMoveResizeArea(event) {var _ref3, _event$RelatedTouch3, _event$changedTouches3;
 
     let p = this._p;
 
@@ -5265,7 +5259,8 @@ class DGTable {
 
     let isBoxing = selectedHeaderCellStyle.boxSizing === 'border-box';
 
-    let actualX = event.pageX - posRelative.left;
+    const positionHost = (_ref3 = (_event$RelatedTouch3 = event[RelatedTouch]) !== null && _event$RelatedTouch3 !== void 0 ? _event$RelatedTouch3 : (_event$changedTouches3 = event.changedTouches) === null || _event$changedTouches3 === void 0 ? void 0 : _event$changedTouches3[0]) !== null && _ref3 !== void 0 ? _ref3 : event;
+    let actualX = positionHost.pageX - posRelative.left;
     let minX = posCol.left;
 
     minX -= Math.ceil(resizerWidth / 2);
@@ -5302,125 +5297,136 @@ class DGTable {
    * @private
    * @param {DragEvent} event event
    */
-  _onEndDragColumnHeader(event) {
+  _onDragEndColumnHeader(event) {
+    let p = this._p;
+
+    if (!p.resizer) {
+      event.target.style.opacity = null;
+    }
+  }
 
+  /**
+   * @private
+   * @param {MouseEvent|TouchEvent} event event
+   */
+  _onResizerPointerUpColumnHeader(event) {var _ref4, _event$RelatedTouch4, _event$changedTouches4;
     let o = this._o,
       p = this._p;
 
-    if (!p.resizer) {
-      event.target.style.opacity = null;
-    } else {
-      p.eventsSink.remove(document, '.colresize');
+    if (!p.resizer)
+    return;
 
-      let column = p.columns.get(p.resizer['columnName']);
-      let rtl = this._isTableRtl();
+    p.eventsSink.remove(document, '.colresize');
 
-      let selectedHeaderCell = column.element,
-        selectedHeaderCellInner = selectedHeaderCell.firstChild,
-        commonAncestor = p.resizer.parentNode;
+    let column = p.columns.get(p.resizer['columnName']);
+    let rtl = this._isTableRtl();
 
-      const commonAncestorStyle = getComputedStyle(commonAncestor);
-      const selectedHeaderCellStyle = getComputedStyle(selectedHeaderCell);
+    let selectedHeaderCell = column.element,
+      selectedHeaderCellInner = selectedHeaderCell.firstChild,
+      commonAncestor = p.resizer.parentNode;
 
-      let posCol = Css_js.getElementOffset(selectedHeaderCell),
-        posRelative = Css_js.getElementOffset(commonAncestor);
-      posRelative.left += parseFloat(commonAncestorStyle.borderLeftWidth) || 0;
-      posCol.left -= posRelative.left;
-      let resizerWidth = Css_js.getElementWidth(p.resizer, true, true, true);
+    const commonAncestorStyle = getComputedStyle(commonAncestor);
+    const selectedHeaderCellStyle = getComputedStyle(selectedHeaderCell);
 
-      let isBoxing = selectedHeaderCellStyle.boxSizing === 'border-box';
+    let posCol = Css_js.getElementOffset(selectedHeaderCell),
+      posRelative = Css_js.getElementOffset(commonAncestor);
+    posRelative.left += parseFloat(commonAncestorStyle.borderLeftWidth) || 0;
+    posCol.left -= posRelative.left;
+    let resizerWidth = Css_js.getElementWidth(p.resizer, true, true, true);
 
-      let actualX = event.pageX - posRelative.left;
-      let baseX = posCol.left,minX = posCol.left;
-      let width = 0;
+    let isBoxing = selectedHeaderCellStyle.boxSizing === 'border-box';
 
-      baseX -= Math.ceil(resizerWidth / 2);
+    const positionHost = (_ref4 = (_event$RelatedTouch4 = event[RelatedTouch]) !== null && _event$RelatedTouch4 !== void 0 ? _event$RelatedTouch4 : (_event$changedTouches4 = event.changedTouches) === null || _event$changedTouches4 === void 0 ? void 0 : _event$changedTouches4[0]) !== null && _ref4 !== void 0 ? _ref4 : event;
+    let actualX = positionHost.pageX - posRelative.left;
+    let baseX = posCol.left,minX = posCol.left;
+    let width = 0;
 
-      if (rtl) {
-        if (!isBoxing) {
-          actualX += this._horizontalPadding(selectedHeaderCell);
-          const innerComputedStyle = getComputedStyle(selectedHeaderCellInner || selectedHeaderCell);
-          actualX += parseFloat(innerComputedStyle.borderLeftWidth) || 0;
-          actualX += parseFloat(innerComputedStyle.borderRightWidth) || 0;
-          actualX += column.arrowProposedWidth || 0; // Sort-arrow width
-        }
+    baseX -= Math.ceil(resizerWidth / 2);
 
-        baseX += Css_js.getElementWidth(selectedHeaderCell, true, true, true);
+    if (rtl) {
+      if (!isBoxing) {
+        actualX += this._horizontalPadding(selectedHeaderCell);
+        const innerComputedStyle = getComputedStyle(selectedHeaderCellInner || selectedHeaderCell);
+        actualX += parseFloat(innerComputedStyle.borderLeftWidth) || 0;
+        actualX += parseFloat(innerComputedStyle.borderRightWidth) || 0;
+        actualX += column.arrowProposedWidth || 0; // Sort-arrow width
+      }
 
-        minX = baseX - (column.ignoreMin ? 0 : this._o.minColumnWidth);
-        if (actualX > minX) {
-          actualX = minX;
-        }
+      baseX += Css_js.getElementWidth(selectedHeaderCell, true, true, true);
 
-        width = baseX - actualX;
-      } else {
-        if (!isBoxing) {
-          actualX -= this._horizontalPadding(selectedHeaderCell);
-          const innerComputedStyle = getComputedStyle(selectedHeaderCellInner || selectedHeaderCell);
-          actualX -= parseFloat(innerComputedStyle.borderLeftWidth) || 0;
-          actualX -= parseFloat(innerComputedStyle.borderRightWidth) || 0;
-          actualX -= column.arrowProposedWidth || 0; // Sort-arrow width
-        }
+      minX = baseX - (column.ignoreMin ? 0 : this._o.minColumnWidth);
+      if (actualX > minX) {
+        actualX = minX;
+      }
 
-        minX = baseX + (column.ignoreMin ? 0 : this._o.minColumnWidth);
-        if (actualX < minX) {
-          actualX = minX;
-        }
+      width = baseX - actualX;
+    } else {
+      if (!isBoxing) {
+        actualX -= this._horizontalPadding(selectedHeaderCell);
+        const innerComputedStyle = getComputedStyle(selectedHeaderCellInner || selectedHeaderCell);
+        actualX -= parseFloat(innerComputedStyle.borderLeftWidth) || 0;
+        actualX -= parseFloat(innerComputedStyle.borderRightWidth) || 0;
+        actualX -= column.arrowProposedWidth || 0; // Sort-arrow width
+      }
 
-        width = actualX - baseX;
+      minX = baseX + (column.ignoreMin ? 0 : this._o.minColumnWidth);
+      if (actualX < minX) {
+        actualX = minX;
       }
 
-      p.resizer.remove();
-      p.resizer = null;
+      width = actualX - baseX;
+    }
 
-      let sizeToSet = width;
+    p.resizer.remove();
+    p.resizer = null;
 
-      if (column.widthMode === ColumnWidthMode.RELATIVE) {
-        let sizeLeft = this._calculateWidthAvailableForColumns();
-        //sizeLeft -= p.table.offsetWidth - p.table.clientWidth;
+    let sizeToSet = width;
 
-        let totalRelativePercentage = 0;
-        let relatives = 0;
+    if (column.widthMode === ColumnWidthMode.RELATIVE) {
+      let sizeLeft = this._calculateWidthAvailableForColumns();
+      //sizeLeft -= p.table.offsetWidth - p.table.clientWidth;
 
-        for (let i = 0; i < p.visibleColumns.length; i++) {
-          let col = p.visibleColumns[i];
-          if (col.name === column.name) continue;
+      let totalRelativePercentage = 0;
+      let relatives = 0;
 
-          if (col.widthMode === ColumnWidthMode.RELATIVE) {
-            totalRelativePercentage += col.width;
-            relatives++;
-          } else {
-            sizeLeft -= col.actualWidth;
-          }
+      for (let i = 0; i < p.visibleColumns.length; i++) {
+        let col = p.visibleColumns[i];
+        if (col.name === column.name) continue;
+
+        if (col.widthMode === ColumnWidthMode.RELATIVE) {
+          totalRelativePercentage += col.width;
+          relatives++;
+        } else {
+          sizeLeft -= col.actualWidth;
         }
+      }
 
-        sizeLeft = Math.max(1, sizeLeft);
-        if (sizeLeft === 1)
-        sizeLeft = p.table.clientWidth;
-        sizeToSet = width / sizeLeft;
+      sizeLeft = Math.max(1, sizeLeft);
+      if (sizeLeft === 1)
+      sizeLeft = p.table.clientWidth;
+      sizeToSet = width / sizeLeft;
 
-        if (relatives > 0) {
-          // When there's more than one relative overall,
-          //   we can do relative enlarging/shrinking.
-          // Otherwise, we can end up having a 0 width.
+      if (relatives > 0) {
+        // When there's more than one relative overall,
+        //   we can do relative enlarging/shrinking.
+        // Otherwise, we can end up having a 0 width.
 
-          let unNormalizedSizeToSet = sizeToSet / ((1 - sizeToSet) / totalRelativePercentage);
+        let unNormalizedSizeToSet = sizeToSet / ((1 - sizeToSet) / totalRelativePercentage);
 
-          totalRelativePercentage += sizeToSet;
+        totalRelativePercentage += sizeToSet;
 
-          // Account for relative widths scaling later
-          if (totalRelativePercentage < 1 && o.relativeWidthGrowsToFillWidth ||
-          totalRelativePercentage > 1 && o.relativeWidthShrinksToFillWidth) {
-            sizeToSet = unNormalizedSizeToSet;
-          }
+        // Account for relative widths scaling later
+        if (totalRelativePercentage < 1 && o.relativeWidthGrowsToFillWidth ||
+        totalRelativePercentage > 1 && o.relativeWidthShrinksToFillWidth) {
+          sizeToSet = unNormalizedSizeToSet;
         }
-
-        sizeToSet *= 100;
-        sizeToSet += '%';
       }
 
-      this.setColumnWidth(column.name, sizeToSet);
+      sizeToSet *= 100;
+      sizeToSet += '%';
     }
+
+    this.setColumnWidth(column.name, sizeToSet);
   }
 
   /**
@@ -5649,7 +5655,7 @@ class DGTable {
     columnEl.addEventListener('mouseleave', this._onMouseLeaveColumnHeader.bind(this));
     columnEl.addEventListener('touchstart', this._onTouchStartColumnHeader.bind(this));
     columnEl.addEventListener('dragstart', this._onStartDragColumnHeader.bind(this));
-    columnEl.addEventListener('click', this._onClickColumnHeader.bind(this));
+    columnEl.addEventListener('click', this._onSortOnColumnHeaderEvent.bind(this));
     columnEl.addEventListener('contextmenu', (event) => {event.preventDefault();});
     inner.addEventListener('dragenter', this._onDragEnterColumnHeader.bind(this));
     inner.addEventListener('dragover', this._onDragOverColumnHeader.bind(this));