@get-set/gs-sortable 0.0.6 → 0.0.8

package/dist/actions/calculate.js

@@ -1,28 +1,27 @@
-import constParams from "../constants/constParams";
-import types from "../constants/types";
+import constParams from '../constants/constParams';
+import types from '../constants/types';
 
 const calculate = (ref) => {
-  console.log("calculate");
   const params = ref.currentParams;
-  if (typeof ref.currentParams.beforeInit === "function") {
+  if (typeof ref.currentParams.beforeInit === 'function') {
     ref.currentParams.beforeInit();
   }
   const $items = [...ref.grid.children].filter(
-    (x) => !x.classList.contains("gs-sortable-item-inmove")
+    (x) => !x.classList.contains('gs-sortable-item-inmove')
   );
   const itemsCount = $items.length;
 
-  ref.grid.style.position = "relative";
-  if (params.gap != "") {
+  ref.grid.style.position = 'relative';
+  if (params.gap != '') {
     ref.grid.style.gap = params.gap;
   }
   const gridStyles = getComputedStyle(ref.grid);
   const cssGap = gridStyles.gap;
   let gapX = 0;
   let gapY = 0;
-  if (typeof cssGap !== "undefined" && cssGap !== null) {
-    const cssGapYValue = cssGap.includes(" ") ? cssGap.split(" ")[0] : cssGap;
-    const cssGapXValue = cssGap.includes(" ") ? cssGap.split(" ")[1] : cssGap;
+  if (typeof cssGap !== 'undefined' && cssGap !== null) {
+    const cssGapYValue = cssGap.includes(' ') ? cssGap.split(' ')[0] : cssGap;
+    const cssGapXValue = cssGap.includes(' ') ? cssGap.split(' ')[1] : cssGap;
 
     const gapYSize = parseInt(cssGapYValue);
     const gapXSize = parseInt(cssGapXValue);
@@ -44,11 +43,15 @@ const calculate = (ref) => {
 
   const containerWidth = ref.grid.clientWidth - containerPR - containerPL;
   let itemWidth = 0;
+  let strItemWidth = 'max-content';
   if (params.type == types.grid) {
     itemWidth = (containerWidth - (params.count - 1) * gapX) / params.count;
+    strItemWidth = itemWidth + 'px';
+  } else if (params.type == types.column) {
+    itemWidth = containerWidth;
+    strItemWidth = itemWidth + 'px';
   }
-
-  const transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms`;
+  ref.itemWidth = strItemWidth;
 
   let currentLeft = containerPL;
   let currentTop = containerPT;
@@ -57,14 +60,14 @@ const calculate = (ref) => {
   let currentWidth =
     containerPL + containerPR + borderLeftWidth + borderRightWidth;
   let maxHeight = 0;
+
   $items.map((el) => {
-    el.style.position = "absolute";
-    if (params.type == types.column) {
-      el.style.width = `${containerWidth}px`;
-    } else if (params.type == types.grid) {
-      el.style.width = `${itemWidth}px`;
+    if (
+      params.type != types.row ||
+      !el.classList.contains('gs-sortable-placeholder')
+    ) {
+      el.style.width = strItemWidth;
     }
-    el.style.transition = transition;
   });
   ref.uiData = {
     containerPT,

package/dist/actions/init.js

@@ -1,11 +1,15 @@
+import constParams from '../constants/constParams';
 import calculate from './calculate';
 import initDraggable from './initDraggable';
 
 const init = (ref) => {
+  const transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms`;
   ref.grid.classList.add('gs-sortable-instance');
   ref.grid.classList.add(`gs-sortable-${ref.currentParams.type}`);
   [...ref.grid.children].map((el) => {
     el.classList.add('gs-sortable-item');
+    el.style.transition = transition;
+    el.style.position = 'absolute';
 
     let resizeObserver = new ResizeObserver(() => {
       calculate(ref);

package/dist/actions/initDraggable.js

@@ -1,4 +1,5 @@
 import constParams from '../constants/constParams';
+import { getOffsetFromBody, getOffsetFromWindow } from './general';
 
 const initDraggable = (ref) => {
   const params = ref.currentParams;
@@ -32,6 +33,9 @@ const initDraggable = (ref) => {
           placeholder.style.border = elStyles.border;
           placeholder.style.borderRadius = elStyles.borderRadius;
           ref.grid.append(placeholder);
+
+          const elOffsetWindow = getOffsetFromWindow($el);
+
           let translateX = 0;
           let translateY = 0;
           if (!isNaN(parseFloat(top))) {
@@ -56,7 +60,10 @@ const initDraggable = (ref) => {
             placeholder,
             newLeft: left,
             newTop: top,
+            fromLeft: (e.clientX - elOffsetWindow.left) / $el.offsetWidth,
+            fromTop: (e.clientY - elOffsetWindow.top) / $el.offsetHeight,
           };
+
           $el.classList.add('gs-sortable-item-inmove');
           ref.grid.classList.add('gs-sortable-active');
           if (ref.grid.closest('.gs-sortable-item') != null) {

package/dist/actions/initMouseMove.js

@@ -1,9 +1,10 @@
-import { getTranslateCoord } from './general';
+import { getOffsetFromWindow, getTranslateCoord } from './general';
 import getItemPositionToContainer from './checkItemInContainer';
 import checkItemInContainer from './checkItemInContainer';
 import calculate from './calculate';
 import constParams from '../constants/constParams';
 import calculateOnSort from './calculateOnSort';
+import types from '../constants/types';
 
 const initMouseMove = (event) => {
   const info = window.GSSortableConfigue.draggableInfo;
@@ -37,24 +38,40 @@ const initMouseMove = (event) => {
           document.querySelector('.gs-sortable-placeholder').remove();
           calculate(window.GSSortableConfigue.overInItemRef);
         }
-
+        const oldRef = window.GSSortableConfigue.overInItemRef;
         window.GSSortableConfigue.overInItemRef = newRef;
+        info.$el.style.width =
+          window.GSSortableConfigue.overInItemRef.itemWidth;
+        const newWidth = info.$el.clientWidth;
+        const newHeight = info.$el.clientHeight;
+
+        const newContainerOffset = getOffsetFromWindow(
+          window.GSSortableConfigue.takeFrom.grid
+        );
+
+        const translateY =
+          event.clientY - newContainerOffset.top - newHeight * info.fromTop;
+        const translateX =
+          event.clientX - newContainerOffset.left - newWidth * info.fromLeft;
+
         const elStyles = getComputedStyle(info.$el);
         const placeholder = document.createElement('div');
         const top = parseFloat(elStyles.top);
         const left = parseFloat(elStyles.left);
         placeholder.classList.add('gs-sortable-placeholder');
         placeholder.style.position = elStyles.position;
+        info.$el.style.transform = `translate(${translateX}px, ${translateY}px)`;
         placeholder.style.transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms`;
-        placeholder.style.width = `${info.$el.offsetWidth}px`;
-        placeholder.style.height = `${info.$el.offsetHeight}px`;
+
         placeholder.style.top = `${top}px`;
         placeholder.style.left = `${left}px`;
         placeholder.style.border = elStyles.border;
         placeholder.style.borderRadius = elStyles.borderRadius;
-        newRef.grid.append(placeholder);
         info.placeholder = placeholder;
         info.ref = newRef;
+        placeholder.style.width = `${info.$el.offsetWidth}px`;
+        placeholder.style.height = `${info.$el.offsetHeight}px`;
+        newRef.grid.append(placeholder);
         calculate(newRef);
         return;
       }
@@ -93,7 +110,6 @@ const initMouseMove = (event) => {
     $el.style.transform = `translate(${tranlateX}px, ${tranlateY}px)`;
 
     if (findedRef != '') {
-      console.log('calculateOnSort');
       calculateOnSort(window.GSSortableConfigue.overInItemRef);
     }
     //}

package/dist/components/GSSortable.js

@@ -8,32 +8,30 @@ import defaultParams from '../constants/defaultParams';
 import initMouseMove from "../actions/initMouseMove";
 import initSortEnd from "../actions/initSortEnd";
 import initScroll from "../actions/initScroll";
+import types from '../constants/types';
 
 const params = {
   reference: PropTypes.string,
+  handler: PropTypes.string,
   gap: PropTypes.string,
+  allowOutOfBox: PropTypes.bool,
   count: PropTypes.number,
-  resetSortHandler: PropTypes.number,
-  resetFilterHandler: PropTypes.number,
+  type: types.column | types.row | types.grid,
 };
 
+
+
+
 /**
  * GSSortable component to display a customizable sortable.
  *
  * @component
  * @param {Object} props - The props object.
  * @param {string} props.gap - Allows set gap among elements.
+ * @param {string} props.handler - selector of target element to move.
  * @param {number} props.count - Shows items count per row.
- * @param {Object} props.resetSortHandler - This is the ref of that element which should reset order.
- * @param {Object} props.resetFilterHandler - This is the ref of that element which should reset filter.
- * @param {Array<Object>} [props.sortByOptions] - Array of sort options.
- * @param {number} props.sortByOptions[].handler - This is the ref of that element which should change order.
- * @param {string} props.sortByOptions[].prop - this is the name of data attribute of element like data-[prop].
- * @param {'number' | 'string'} props.sortByOptions[].type - this is the type of prop.
- * @param {Array<Object>} [props.filterByOptions] - Array of filter options.
- * @param {number} props.filterByOptions[].handler - This is the ref of that element which should change filter.
- * @param {string} props.filterByOptions[].prop - This is the name of data attribute of element like data-[prop].
- * @param {'number' | 'string'} props.filterByOptions[].value - This is the value of prop for element.
+ * @param {'row' | 'column' | 'grid'} props.type - this is the type of prop.
+ * @param {Array<Object>} [props.acceptFrom] - Array of that GSSortable references which can accept element from this.
  * @param {Array<Object>} [props.responsive] - Array of responsive configurations based on window size.
  * @param {number} props.responsive[].windowSize - Minimum window size for this configuration.
  * @param {Object} props.responsive[].params - The responsive configuration for the grid.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@get-set/gs-sortable",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Get-Set Sortable",
   "main": "index.js",
   "author": "Get-Set",