Work on docs for intersects/isinview

Author: jlukic

docs/src/examples/query/dimensions/query-intersects/page.css

@@ -6,16 +6,26 @@
   margin: 50px;
   border-radius: var(--border-radius);
   overflow: auto;
+
+  /* force scroll */
+  .filler {
+    width: 500px;
+    height: 500px;
+  }
 }
 
 .box {
   position: absolute;
   padding: 15px;
+  text-align: center;
+  align-content: center;
   border-radius: var(--border-radius);
   text-align: center;
   font-weight: bold;
   cursor: pointer;
   user-select: none;
+  transition: var(--transition);
+  transition-property: border, background;
 
   &.source {
     width: 100px;
@@ -35,11 +45,25 @@
     background: var(--orange-background-color);
     border: var(--orange-border);
     color: var(--orange-text-color);
+
+  }
+
+  &.overlap {
+    opacity: 0;
+    background: var(--red-background-color);
+    padding: 0px;
+    border: var(--red-border);
+    color: var(--red-text-color);
+    z-index: 2;
+    font-size: 7px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &.intersecting {
     background: var(--green-background-color);
-    border-color: var(--green-30);
+    border-color: var(--green-border);
     color: var(--green-text-color);
   }
 }

docs/src/examples/query/dimensions/query-intersects/page.html

@@ -1,6 +1,10 @@
 <div class="container">
+  <div class="target box">
+    Target
+    <div class="overlap box">Intersection</div>
+  </div>
   <div class="source box">Source</div>
-  <div class="target box">Target</div>
+  <div class="filler"></div>
 </div>
 
 <div class="output">

docs/src/examples/query/dimensions/query-intersects/page.js

@@ -1,48 +1,12 @@
 import { $ } from '@semantic-ui/query';
-
-function checkIntersection() {
-  const result = $('.source').intersects('.target', {
-    returnDetails: true,
-  });
-  console.log(result);
-  const info = `INTERSECTION DETAILS:
-
-Intersects: ${result.intersects ? '✓ YES' : '✗ NO'}
-Overlap Ratio: ${(result.ratio * 100).toFixed(1)}%
-
-Side Detection:
-  Top: ${result.top ? '✓' : '✗'}
-  Bottom: ${result.bottom ? '✓' : '✗'}
-  Left: ${result.left ? '✓' : '✗'}
-  Right: ${result.right ? '✓' : '✗'}
-
-${
-    result.rect
-      ? `Intersection Rectangle:
-  X: ${result.rect.left.toFixed(1)}px
-  Y: ${result.rect.top.toFixed(1)}px
-  Width: ${result.rect.width.toFixed(1)}px
-  Height: ${result.rect.height.toFixed(1)}px`
-      : 'Intersection Rectangle: None'
-  }`;
-
-  $('.output pre').text(info);
-
-  // Update visual state
-  const $boxes = $('.box');
-  if (result.intersects) {
-    $boxes.addClass('intersecting');
-  }
-  else {
-    $boxes.removeClass('intersecting');
-  }
-}
+import { mapObject, roundNumber } from '@semantic-ui/utils';
 
 // Drag functionality
 let isDragging = false;
 let $dragged = null;
 let offset = { top: 0, left: 0 };
 
+// handle drag and drop start
 $('.box').on('mousedown', function(event) {
   event.preventDefault();
   isDragging = true;
@@ -55,6 +19,7 @@ $('.box').on('mousedown', function(event) {
   moveElementToMouse(event);
 });
 
+// handle drag & drop
 $(document)
   .on('pointermove', function(event) {
     if (isDragging && $dragged) {
@@ -70,11 +35,66 @@ function moveElementToMouse(event) {
   const container = $('.container').dimensions();
   $dragged.position({
     relativeTo: '.container',
-    top: event.clientY - container.top - offset.top,
-    left: event.clientX - container.left - offset.left,
+    top: event.clientY - container.top + container.scrollTop - offset.top,
+    left: event.clientX - container.left + container.scrollLeft - offset.left,
   });
   checkIntersection();
 }
 
 // Initial check
 checkIntersection();
+
+function checkIntersection() {
+  const result = $('.source').intersects('.target', {
+    returnDetails: true,
+  });
+  const rect = (result.rect)
+    ? mapObject(result.rect, val => `${roundNumber(val)}px`)
+    : null;
+  const info = `INTERSECTION DETAILS:
+
+Intersects: ${result.intersects ? '✓ YES' : '✗ NO'}
+Overlap Ratio: ${(result.ratio * 100).toFixed(1)}%
+
+Side Detection:
+  Top: ${result.top ? '✓' : '✗'}
+  Bottom: ${result.bottom ? '✓' : '✗'}
+  Left: ${result.left ? '✓' : '✗'}
+  Right: ${result.right ? '✓' : '✗'}
+
+${
+    result.rect
+      ? `Intersection Rectangle:
+  X: ${roundNumber(rect.left)}
+  Y: ${roundNumber(rect.top)}
+  Width: ${roundNumber(rect.width)}
+  Height: ${roundNumber(rect.height)}`
+      : 'Intersection Rectangle: None'
+  }`;
+
+  $('.output pre').text(info);
+
+  if (rect) {
+    $('.overlap').css({
+      opacity: 1,
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+    });
+  }
+  else {
+    $('.overlap').css({
+      opacity: 0,
+    });
+  }
+
+  // Update visual state
+  const $boxes = $('.box').not('.overlap');
+  if (result.intersects) {
+    $boxes.addClass('intersecting');
+  }
+  else {
+    $boxes.removeClass('intersecting');
+  }
+}

docs/src/examples/query/visibility/query-is-in-view/page.js

@@ -24,13 +24,13 @@ function checkViewportStatus(options = {}) {
     if (isVisible) {
       $element.addClass('in-viewport');
     }
-    else if ($element.isInViewport()) {
+    else if ($element.isInView()) {
       $element.addClass('partially-visible');
     }
   });
 
   // Check all elements together
-  const allVisible = $('.test-element').isInViewport(options);
+  const allVisible = $('.test-element').isInView(options);
   info += `\nAll elements visible in container: ${allVisible ? '✓ YES' : '✗ NO'}`;
 
   $('#viewport-info').text(info);