@mathieustan/vue-datepicker - npm Package Compare versions

Comparing version 0.1.0-rc.6 to 0.1.0-rc.7

package.json

 {
   "name": "@mathieustan/vue-datepicker",
   "description": "A clean datepicker made with VueJs",
-  "version": "0.1.0-rc.6",
+  "version": "0.1.0-rc.7",
   "author": "Mathieu Stanowski <[e-mail]>",
@@ -6,0 +6,0 @@ "keywords": [

src/utils/positions.js

@@ -10,3 +10,3 @@ export {
 
-function getDynamicPosition (element, parent, offset) {
+function getDynamicPosition (element, parent) {
   // -------------------------------
@@ -16,19 +16,14 @@ // Select parent (datepicker container) to get position
   const parentRect = parent.getBoundingClientRect();
-
+  const parentOffsets = getParentOffset(parentRect);
+  const spacesAroundParent = getSpacesAroundParent(parentRect);
   // -------------------------------
-  // Compute offsets
-  // -------------------------------
-  const { parentOffsetTop, parentOffsetLeft } = getParentOffset(parentRect);
-  const { spaceBelow, spaceAbove, spaceLeft, spaceRight } = getSpacesAroundParent(parentRect);
-
-  // -------------------------------
   // Detect space around element
   // -------------------------------
-  const elementHeight = element.offsetHeight;
-  const elementWidth = element.offsetWidth;
-  const isThereEnoughSpaceBelow = spaceBelow - elementHeight > 0;
-  const isThereEnoughtSpaceLeft = spaceLeft - elementWidth > 0;
-  const isThereEnoughtSpaceRight = spaceRight - elementWidth > 0;
-  const isThereEnoughSpaceAbove = spaceAbove - elementHeight > 0;
-
+  const placesAvailable = detectPlacesAvailable(element, spacesAroundParent);
+  const {
+    isThereEnoughSpaceBelow,
+    isThereEnoughtSpaceLeft,
+    isThereEnoughtSpaceRight,
+    isThereEnoughSpaceAbove,
+  } = placesAvailable;
   // -------------------------------
@@ -42,25 +37,12 @@ // If there is not enought space above, below, left & right
     !isThereEnoughtSpaceRight) {
-    return getElementCenteredPosition(elementHeight, elementWidth);
+    return getElementCenteredPosition(element);
   }
-  // -------------------------------
-  // If there is not enought space above & below & enought space on left : placement => LEFT
-  // Else placement => RIGHT
-  // -------------------------------
-  if (!isThereEnoughSpaceBelow && !isThereEnoughSpaceAbove) {
-    const missingSpaceToShowAbove = Math.abs(spaceAbove - elementHeight);
-    return {
-      top: parentOffsetTop + (missingSpaceToShowAbove + parentRect.height) - elementHeight,
-      left: parentOffsetLeft + (isThereEnoughtSpaceLeft ? -elementWidth - offset : parentRect.width),
-      origin: isThereEnoughtSpaceLeft ? 'top right' : 'bottom left',
-    };
-  }
-  // -------------------------------
-  // If there is not enought space below : placement => TOP
-  // If there is not enought space above : placement => BOTTOM
-  // -------------------------------
-  return {
-    top: parentOffsetTop + (isThereEnoughSpaceBelow ? parentRect.height : -elementHeight),
-    left: parentOffsetLeft + (parentRect.width - elementWidth) / 2,
-    origin: isThereEnoughSpaceBelow ? 'top center' : 'bottom center', // for animation only
-  };
+
+  return getElementPosition(
+    element,
+    parentRect,
+    parentOffsets,
+    spacesAroundParent,
+    placesAvailable
+  );
 }
@@ -90,8 +72,63 @@
 
-function getElementCenteredPosition (elementHeight, elementWidth) {
+function detectPlacesAvailable (element, { spaceBelow, spaceAbove, spaceLeft, spaceRight }) {
   return {
-    top: window.pageYOffset + (window.innerHeight - elementHeight) / 2,
-    left: window.pageXOffset + (window.innerWidth - elementWidth) / 2,
+    isThereEnoughSpaceBelow: spaceBelow - element.offsetHeight > 0,
+    isThereEnoughtSpaceLeft: spaceLeft - element.offsetWidth > 0,
+    isThereEnoughtSpaceRight: spaceRight - element.offsetWidth > 0,
+    isThereEnoughSpaceAbove: spaceAbove - element.offsetHeight > 0,
+  };
+}
+
+function getElementCenteredPosition ({ offsetHeight, offsetWidth }) {
+  return {
+    top: window.pageYOffset + (window.innerHeight - offsetHeight) / 2,
+    left: window.pageXOffset + (window.innerWidth - offsetWidth) / 2,
     origin: 'center center', // for animation only
   };
 }
+
+function getElementPosition (element, parentRect, parentOffsets, spacesAroundParent, placesAvailable) {
+  const elementHeight = element.offsetHeight;
+  const elementWidth = element.offsetWidth;
+  const { parentOffsetTop, parentOffsetLeft } = parentOffsets;
+  const { spaceAbove } = spacesAroundParent;
+  const {
+    isThereEnoughSpaceBelow,
+    isThereEnoughtSpaceLeft,
+    isThereEnoughtSpaceRight,
+    isThereEnoughSpaceAbove,
+  } = placesAvailable;
+
+  const missingSpaceToShowAbove = Math.abs(spaceAbove - elementHeight);
+  const couldBeShowBelowOrAbove = isThereEnoughSpaceBelow || isThereEnoughSpaceAbove;
+
+  if (!couldBeShowBelowOrAbove && isThereEnoughtSpaceRight) {
+    return {
+      top: parentOffsetTop + (missingSpaceToShowAbove + parentRect.height) - elementHeight,
+      left: parentOffsetLeft + parentRect.width,
+      origin: 'left center',
+    };
+  }
+
+  if (!couldBeShowBelowOrAbove && isThereEnoughtSpaceLeft) {
+    return {
+      top: parentOffsetTop + (missingSpaceToShowAbove + parentRect.height) - elementHeight,
+      left: parentOffsetLeft - elementWidth,
+      origin: 'right center',
+    };
+  }
+
+  if (couldBeShowBelowOrAbove && isThereEnoughtSpaceLeft && !isThereEnoughtSpaceRight) {
+    return {
+      top: parentOffsetTop + (isThereEnoughSpaceBelow ? parentRect.height : -elementHeight),
+      left: parentOffsetLeft + parentRect.width - elementWidth,
+      origin: isThereEnoughSpaceBelow ? 'top right' : 'bottom right',
+    };
+  }
+
+  return {
+    top: parentOffsetTop + (isThereEnoughSpaceBelow ? parentRect.height : -elementHeight),
+    left: parentOffsetLeft,
+    origin: isThereEnoughSpaceBelow ? 'top left' : 'bottom left',
+  };
+}

No alert changes

Improved metrics

Total package byte prevSize

620989

increased by0.55%

Lines of code

8530

increased by1.03%

No dependency changes