@itfin/components 1.2.85 → 1.2.87

package/src/components/sortable/sortable-item-list/mocked-sortable-item-list.js

@@ -0,0 +1,415 @@
+import getRelativePosition from '../utils/get-relative-position';
+import { AXIS } from './axis';
+
+export const CURSOR_ITEM_OFFSET = {
+  x: 5,
+  y: 5
+};
+
+export const ATTRIBUTE_SKIP_SORTING = 'sortable-skip';
+
+/**
+ * Logic for cloned original item list to perform sorting
+ */
+export default class MockedSortableItemList {
+  /**
+   * @param {HTMLElement} element
+   */
+  setContainer (element) {
+    this.elContainer = element;
+    /**
+     * @type {number}
+     */
+    this.fromPosition = null;
+    /**
+     * @type {number}
+     */
+    this.toPosition = null;
+    /**
+     * @type {string}
+     */
+    this.axis = null;
+    /**
+     * @type {HTMLElement}
+     */
+    this.sourceItem = null;
+    /**
+     * @type {HTMLElement}
+     */
+    this.cursorItem = null;
+    /**
+     * @type {object}
+     */
+    this.cursorOffset = null;
+  }
+
+  /**
+   * @param {string} axis
+   */
+  setAxis (axis) {
+    this.axis = axis;
+  }
+
+  hide () {
+    this.elContainer.classList.add('hidden');
+  }
+
+  reset () {
+    this.elContainer.classList.remove('hidden');
+    while (this.elContainer.hasChildNodes()) {
+      this.elContainer.removeChild(this.elContainer.lastChild);
+    }
+    this.toPosition = null;
+    this.fromPosition = null;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  isSorted () {
+    return (
+      this.toPosition !== null &&
+      this.fromPosition !== null &&
+      this.toPosition !== this.fromPosition
+    );
+  }
+
+  /**
+   * @returns {number}
+   */
+  getFromPosition () {
+    return this.fromPosition;
+  }
+
+  /**
+   * @returns {number}
+   */
+  getToPosition () {
+    return this.toPosition;
+  }
+
+  /**
+   * @return {HTMLElement}
+   */
+  getContainer () {
+    return this.elContainer;
+  }
+
+  /**
+   * @param position
+   * @returns {Element}
+   */
+  getItem (position) {
+    return this.elContainer.children[position + 1];
+  }
+
+  getItemCount () {
+    return this.elContainer.children.length - 1;
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} from
+   * @returns {number}
+   */
+  getItemIndexByX (x, from = 0) {
+    let i = from;
+    let skip = 0;
+    while (i + skip < this.getItemCount() - 1) {
+      const currentItem = this.getItem(i + skip);
+      const nextItem = this.getItem(i + skip + 1);
+      if (this.isToSkip(currentItem) || this.isToSkip(nextItem)) {
+        skip += 1;
+        // eslint-disable-next-line no-continue
+        continue;
+      } else {
+        i += skip;
+        skip = 0;
+      }
+      if (
+        currentItem.offsetWidth > nextItem.offsetWidth &&
+        currentItem !== this.sourceItem
+      ) {
+        const keepItemLeft = currentItem.classList.contains('keep-item-left');
+        const width = keepItemLeft ? 0 : nextItem.offsetWidth;
+        if (currentItem.offsetLeft + width > x) {
+          break;
+        }
+      } else if (nextItem.offsetLeft > x) {
+        break;
+      }
+      if (
+        currentItem.offsetLeft + currentItem.offsetWidth / 2 >=
+        nextItem.offsetLeft
+      ) {
+        break;
+      }
+      i += 1;
+    }
+    return i;
+  }
+
+  /**
+   * @param {number} y
+   * @returns {number}
+   */
+  getItemIndexByY (y) {
+    let i = 0;
+    let result = 0;
+    let skip = 0;
+    while (i + skip < this.getItemCount() - 1) {
+      const currentItem = this.getItem(i + skip);
+      const nextItem = this.getItem(i + skip + 1);
+      if (this.isToSkip(currentItem) || this.isToSkip(nextItem)) {
+        skip += 1;
+        // eslint-disable-next-line no-continue
+        continue;
+      } else {
+        i += skip;
+        skip = 0;
+      }
+      if (
+        currentItem.offsetHeight > nextItem.offsetHeight &&
+        currentItem !== this.sourceItem
+      ) {
+        if (currentItem.offsetTop + nextItem.offsetHeight > y) {
+          break;
+        }
+      } else if (nextItem.offsetTop > y) {
+        break;
+      }
+      i += 1;
+      // catch next row border
+      result =
+        currentItem.offsetTop + currentItem.offsetHeight / 2 <
+        nextItem.offsetTop
+          ? i
+          : result;
+    }
+    while (
+      result < this.getItemCount() - 1 &&
+      this.isToSkip(this.getItem(result))
+    ) {
+      result += 1;
+    }
+    return result;
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @returns {number}
+   */
+  getItemIndexByXY (x, y) {
+    const from = this.getItemIndexByY(y);
+    return this.getItemIndexByX(x, from);
+  }
+
+  /**
+   * @param {number} fromPosition
+   * @param {Event} event
+   * @param {string} cursorClass
+   * @param {string} cursorSelector
+   */
+  createCursorItem (fromPosition, event, cursorClass, cursorSelector) {
+    this.fromPosition = fromPosition;
+    this.toPosition = fromPosition;
+    this.sourceItem = this.elContainer.children[fromPosition];
+    this.cursorOffset = getRelativePosition(event, this.sourceItem);
+    this.cursorItem = this.sourceItem.cloneNode(true);
+    const style = getComputedStyle(this.sourceItem);
+    if (style.display === 'block') {
+      this.cursorItem.style.setProperty(
+        'width',
+        `${this.sourceItem.clientWidth}px`
+      );
+      this.cursorItem.style.setProperty('top', '0');
+      this.cursorItem.style.setProperty('margin-top', '0');
+    }
+    this.sourceItem.classList.add('up-source-item');
+    this.cursorItem.classList.add('up-cursor-item');
+    const cursorItemPresentation = cursorSelector
+      ? this.cursorItem.querySelector(cursorSelector)
+      : this.cursorItem;
+    cursorItemPresentation.classList.add('up-cursor-item-presentation');
+    if (cursorClass) {
+      cursorItemPresentation.classList.add(cursorClass);
+    }
+    this.sourceItem.setAttribute('aria-hidden', 'true');
+    this.cursorItem.setAttribute('aria-role', 'button');
+    this.cursorItem.setAttribute('aria-pressed', 'true');
+    this.cursorItem.setAttribute('tabindex', '0');
+    this.elContainer.prepend(this.cursorItem);
+    if (event.type.indexOf('key') === 0) {
+      this.applyMovement();
+      this.cursorItem.focus();
+      this.stickCursorItemToSourceItem();
+    } else {
+      this.move(event);
+    }
+  }
+
+  /**
+   * @param {Event} event
+   */
+  move (event) {
+    if (this.getItemCount() > 0) {
+      const containerPosition = getRelativePosition(event, this.elContainer);
+      let offsetX =
+        containerPosition.x - this.cursorOffset.x - containerPosition.pl;
+      let offsetY =
+        containerPosition.y - this.cursorOffset.y - containerPosition.pt;
+      switch (this.axis) {
+      case AXIS.x:
+        offsetY = 0;
+        this.toPosition = this.getItemIndexByX(containerPosition.x);
+        break;
+      case AXIS.y:
+        offsetX = 0;
+        this.toPosition = this.getItemIndexByY(containerPosition.y);
+        break;
+      case AXIS.xy:
+        this.toPosition = this.getItemIndexByXY(
+          containerPosition.x,
+          containerPosition.y
+        );
+        break;
+      default:
+        // eslint-disable-next-line no-throw-literal
+        throw `Unknown axis was passed '${this.axis}'`;
+      }
+      this.cursorItem.style.setProperty(
+        'transform',
+        `translate(${offsetX + 5}px, ${offsetY + 5}px)`
+      );
+      this.applyMovement();
+    }
+  }
+
+  moveUp () {
+    const prevPosition = this.searchPosition(this.toPosition, -1);
+    if (prevPosition !== false) {
+      this.toPosition = prevPosition;
+      this.applyMovement();
+      this.stickCursorItemToSourceItem();
+    }
+  }
+
+  moveDown () {
+    const nextPosition = this.searchPosition(this.toPosition, 1);
+    if (nextPosition !== false) {
+      this.toPosition = nextPosition;
+      this.applyMovement();
+      this.stickCursorItemToSourceItem();
+      return true;
+    }
+    return false;
+  }
+
+  searchPosition (position, step) {
+    let newPosition = position;
+    while (
+      newPosition + step >= 0 &&
+      newPosition + step < this.getItemCount()
+    ) {
+      newPosition += step;
+      if (!this.isToSkip(this.getItem(newPosition))) {
+        return newPosition;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * @private
+   */
+  stickCursorItemToSourceItem () {
+    const style = window.getComputedStyle(this.elContainer);
+    const x =
+      this.axis !== AXIS.y
+        ? this.sourceItem.offsetLeft - parseFloat(style.paddingLeft)
+        : CURSOR_ITEM_OFFSET.x;
+    const y =
+      this.axis !== AXIS.x
+        ? this.sourceItem.offsetTop - parseFloat(style.paddingTop)
+        : CURSOR_ITEM_OFFSET.y;
+    this.cursorItem.style.setProperty('transform', `translate(${x}px, ${y}px)`);
+  }
+
+  /**
+   * @private
+   */
+  applyMovement () {
+    let targetItem = this.getItem(this.toPosition);
+    if (targetItem !== this.sourceItem) {
+      if (targetItem && this.toPosition < this.getItemCount() - 1) {
+        if (this.toPosition > 0) {
+          const previousItem = this.getItem(this.toPosition - 1);
+          if (previousItem === this.sourceItem) {
+            targetItem = this.getItem(this.toPosition + 1);
+          }
+        }
+        const targetItemBefore = targetItem.getBoundingClientRect();
+        const isMoveBack =
+          targetItem.offsetTop < this.sourceItem.offsetTop ||
+          (targetItem.offsetTop === this.sourceItem.offsetTop &&
+            targetItem.offsetLeft < this.sourceItem.offsetLeft);
+        this.elContainer.insertBefore(this.sourceItem, targetItem);
+        if (isMoveBack) {
+          const targetItemAfter = targetItem.getBoundingClientRect();
+          /* istanbul ignore next */
+          if (
+            targetItemBefore.left === targetItemAfter.left &&
+            targetItemBefore.top === targetItemAfter.top
+          ) {
+            targetItem.classList.add('keep-item-left');
+          }
+        }
+      } else {
+        this.elContainer.appendChild(this.sourceItem);
+      }
+    }
+  }
+
+  /**
+   * @param {HTMLElement} item
+   * @returns {boolean}
+   */
+  /* eslint class-methods-use-this: "off" */
+  isToSkip (item) {
+    return (
+      item.hasAttribute(ATTRIBUTE_SKIP_SORTING) &&
+      [true, 'true', ATTRIBUTE_SKIP_SORTING].includes(item.getAttribute(ATTRIBUTE_SKIP_SORTING))
+    );
+  }
+
+  getCursorPageX () {
+    if (this.cursorItem) {
+      const rect = this.cursorItem.getBoundingClientRect();
+      /* istanbul ignore next */
+      const scrollLeft = document.documentElement.scrollLeft
+        ? document.documentElement.scrollLeft
+        : document.body.scrollLeft;
+      return rect.left + scrollLeft;
+    }
+    return 0;
+  }
+
+  getCursorPageY () {
+    if (this.cursorItem) {
+      const rect = this.cursorItem.getBoundingClientRect();
+      /* istanbul ignore next */
+      const scrollTop = document.documentElement.scrollTop
+        ? document.documentElement.scrollTop
+        : document.body.scrollTop;
+      return rect.top + scrollTop;
+    }
+    return 0;
+  }
+
+  finishSorting () {
+    this.elContainer.querySelectorAll('.keep-item-left').forEach((item) => {
+      item.classList.remove('keep-item-left');
+    });
+  }
+}

package/src/components/sortable/sortable-item-list/original-sortable-item-list.js

@@ -0,0 +1,105 @@
+const SORTABLE_ATTRIBUTE = 'sortable';
+const SORTABLE_DATA_ATTRIBUTE = 'data-sortable';
+/**
+ * Original item list from default slot - clone to specified container,
+ * show after sorting, detect if item is sortable
+ */
+export default class OriginalSortableItemList {
+  constructor () {
+    /**
+     * @type {HTMLElement}
+     */
+    this.container = null;
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  setContainer (element) {
+    this.container = element;
+  }
+
+  hide () {
+    this.container.classList.add('hidden');
+  }
+
+  /**
+   * @param {number} positionToFocus
+   */
+  restore (positionToFocus) {
+    this.container.classList.remove('hidden');
+    if (positionToFocus !== null) {
+      const item = this.container.children.item(positionToFocus);
+      const focusedItem =
+        item && !item.hasAttribute('tabindex')
+          ? item.querySelector('[tabindex]')
+          : item;
+      if (focusedItem) {
+        focusedItem.focus();
+      }
+    }
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  cloneTo (element) {
+    for (let i = 0; i < this.container.children.length; i += 1) {
+      const originalElement = this.container.children.item(i);
+      const clonedElement = originalElement.cloneNode(true);
+      clonedElement.removeAttribute('v-for');
+      element.appendChild(clonedElement);
+    }
+  }
+
+  /**
+   * @param {HTMLElement} target
+   * @param {boolean} requireSortableAttribute
+   * @returns {boolean}
+   */
+  isSortable (target, requireSortableAttribute) {
+    if (
+      (target.tagName === 'A' ||
+        target.tagName === 'BUTTON' ||
+        target.tagName === 'INPUT') &&
+      !requireSortableAttribute
+    ) {
+      return false;
+    }
+    if (requireSortableAttribute) {
+      const attribute = SORTABLE_ATTRIBUTE;
+      if (
+        target.getAttribute(attribute) === 'true' ||
+        target.getAttribute(attribute) === attribute ||
+        target.getAttribute(SORTABLE_DATA_ATTRIBUTE) === 'true'
+      ) {
+        return true;
+      }
+      return target.parentElement
+        ? this.isSortable(target.parentElement, requireSortableAttribute)
+        : false;
+    }
+    return true;
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @returns {number}
+   */
+  getItemIndexByElement (element) {
+    return Array.prototype.indexOf.call(this.container.children, element);
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @returns {object|null}
+   */
+  getSortItem (element) {
+    if (element.parentElement === this.container) {
+      return element;
+    }
+    return element.parentElement
+      ? this.getSortItem(element.parentElement)
+      : null;
+  }
+}

package/src/components/sortable/utils/event-outside.js

@@ -0,0 +1,30 @@
+/**
+ * On any event which is not addressed to element
+ * @param element
+ * @param eventList
+ * @param callback
+ */
+export function onEventOutside (element, eventList, callback) {
+  function handler (event) {
+    if (!element.contains(event.target)) {
+      return callback(event);
+    }
+    return null;
+  }
+  eventList.forEach((event) => {
+    document.body.addEventListener(event, handler);
+  });
+  return () => {
+    eventList.forEach((event) => {
+      document.body.removeEventListener(event, handler);
+    });
+  };
+}
+
+export function onClickOutside (element, callback) {
+  return onEventOutside(element, ['click'], callback);
+}
+
+export function onDropOutside (element, callback) {
+  return onEventOutside(element, ['mouseup', 'touchend'], callback);
+}

package/src/components/sortable/utils/get-relative-position.js

@@ -0,0 +1,41 @@
+/**
+ * Get `event.target` relative position to `element`. Provide `element` paddings
+ * @param {Event} event
+ * @param {HTMLElement} element
+ * @returns {object}
+ */
+export default function getRelativePosition (event, element) {
+  const rect = element.getBoundingClientRect();
+  /* istanbul ignore next */
+  const scrollTop = document.documentElement.scrollTop
+    ? document.documentElement.scrollTop
+    : document.body.scrollTop;
+  /* istanbul ignore next */
+  const scrollLeft = document.documentElement.scrollLeft
+    ? document.documentElement.scrollLeft
+    : document.body.scrollLeft;
+  const elementLeft = rect.left + scrollLeft;
+  const elementTop = rect.top + scrollTop;
+  let x = 0;
+  let y = 0;
+  if (event.type.indexOf('mouse') === 0) {
+    const mouseEvent = event;
+    x = mouseEvent.pageX - elementLeft;
+    y = mouseEvent.pageY - elementTop;
+  } else if (event.type.indexOf('touch') === 0) {
+    const touchEvent = event;
+    x = touchEvent.targetTouches[0].pageX - elementLeft;
+    y = touchEvent.targetTouches[0].pageY - elementTop;
+  }
+  x = x < 0 ? 0 : x;
+  y = y < 0 ? 0 : y;
+  x = x > rect.width ? rect.width : x;
+  y = y > rect.height ? rect.height : y;
+  const style = window.getComputedStyle(element);
+  return {
+    x,
+    y,
+    pl: parseFloat(style.paddingLeft),
+    pt: parseFloat(style.paddingTop)
+  };
+}

package/src/components/sortable/utils/sort-item-list.js

@@ -0,0 +1,13 @@
+/**
+ * Apply sorting from `fromPosition` to `toPosition`
+ * @param {object[]} itemList
+ * @param {number} fromPosition
+ * @param {number}
+ * @returns {object[]}
+ */
+export default function sortItemList (itemList, fromPosition, toPosition) {
+  const items = [...itemList];
+  const item = items.splice(fromPosition, 1)[0];
+  items.splice(toPosition, 0, item);
+  return items;
+}

package/src/components/sortable/utils/stop-event.js

@@ -0,0 +1,16 @@
+/**
+ * Stop `event` when `condition` is true
+ * @param {Event} event
+ * @param {boolean} condition
+ * @returns {false|null}
+ */
+export default function stopEvent (event, condition = true) {
+  if (condition) {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+    return false;
+  }
+  return undefined;
+}

package/src/components/sortable/utils/vibrate.js

@@ -0,0 +1,18 @@
+/**
+ * Vibrate when sorting started/stopped
+ * @param {number} duration
+ * @returns boolean
+ */
+export default function vibrate (duration = 50) {
+  /* istanbul ignore next */
+  if (navigator.vibrate) {
+    navigator.vibrate(duration);
+    return true;
+  }
+  /* istanbul ignore next */
+  if (navigator.mozVibrate) {
+    navigator.mozVibrate(duration);
+    return true;
+  }
+  return false;
+}