|
1 | 1 | import { $ } from '@semantic-ui/query'; |
2 | 2 |
|
3 | | -function checkViewportStatus(options = {}) { |
4 | | - let info = 'CLIPPING PARENT VISIBILITY CHECK'; |
| 3 | +// Drag functionality |
| 4 | +let isDragging = false; |
| 5 | +let $dragged = null; |
| 6 | +let offset = { top: 0, left: 0 }; |
5 | 7 |
|
6 | | - if (options.threshold !== undefined) { |
7 | | - info += ` (${Math.round(options.threshold * 100)}% threshold)`; |
8 | | - } |
9 | | - if (options.fully) { |
10 | | - info += ' (fully visible only)'; |
11 | | - } |
12 | | - |
13 | | - info += ':\n\n'; |
14 | | - |
15 | | - $('.test-element').each((element) => { |
16 | | - const $element = $(element); |
17 | | - const name = $element.attr('data-name'); |
18 | | - const isVisible = $element.isInView(options); |
19 | | - |
20 | | - info += `${name}: ${isVisible ? '✓ VISIBLE IN CONTAINER' : '✗ NOT VISIBLE IN CONTAINER'}\n`; |
| 8 | +// handle drag and drop start |
| 9 | +$('.box').on('mousedown', function(event) { |
| 10 | + event.preventDefault(); |
| 11 | + isDragging = true; |
| 12 | + $dragged = $(this); |
| 13 | + const bounds = $dragged.bounds(); |
| 14 | + offset = { |
| 15 | + top: event.clientY - bounds.top, |
| 16 | + left: event.clientX - bounds.left, |
| 17 | + }; |
| 18 | + moveElementToMouse(event); |
| 19 | +}); |
21 | 20 |
|
22 | | - // Visual feedback |
23 | | - $element.removeClass('in-viewport partially-visible'); |
24 | | - if (isVisible) { |
25 | | - $element.addClass('in-viewport'); |
26 | | - } |
27 | | - else if ($element.isInView()) { |
28 | | - $element.addClass('partially-visible'); |
| 21 | +// handle drag & drop |
| 22 | +$(document) |
| 23 | + .on('pointermove', function(event) { |
| 24 | + if (isDragging && $dragged) { |
| 25 | + moveElementToMouse(event); |
29 | 26 | } |
| 27 | + }) |
| 28 | + .on('pointerup', function() { |
| 29 | + isDragging = false; |
| 30 | + $dragged = null; |
30 | 31 | }); |
31 | 32 |
|
32 | | - // Check all elements together |
33 | | - const allVisible = $('.test-element').isInView(options); |
34 | | - info += `\nAll elements visible in container: ${allVisible ? '✓ YES' : '✗ NO'}`; |
| 33 | +// handle scroll |
| 34 | +$('.container').on('scroll', checkVisibility); |
35 | 35 |
|
36 | | - $('#viewport-info').text(info); |
| 36 | +function moveElementToMouse(event) { |
| 37 | + const container = $('.container').dimensions(); |
| 38 | + $dragged.position({ |
| 39 | + relativeTo: '.container', |
| 40 | + top: event.clientY - container.top + container.scrollTop - offset.top, |
| 41 | + left: event.clientX - container.left + container.scrollLeft - offset.left, |
| 42 | + }); |
| 43 | + checkVisibility(); |
37 | 44 | } |
38 | 45 |
|
39 | | -// Event handlers using Query |
40 | | -$('#check-viewport').on('click', () => { |
41 | | - checkViewportStatus(); |
42 | | -}); |
| 46 | +// Initial check |
| 47 | +requestAnimationFrame(() => checkVisibility()); |
43 | 48 |
|
44 | | -$('#check-threshold').on('click', () => { |
45 | | - checkViewportStatus({ threshold: 0.5 }); |
46 | | -}); |
| 49 | +function checkVisibility() { |
| 50 | + const $box = $('.draggable'); |
| 51 | + const $container = $('.container'); |
47 | 52 |
|
48 | | -$('#check-fully').on('click', () => { |
49 | | - checkViewportStatus({ fully: true }); |
50 | | -}); |
| 53 | + // Check visibility with different thresholds |
| 54 | + const basicCheck = $box.isInView({ viewport: $container }); |
| 55 | + const halfVisible = $box.isInView({ viewport: $container, threshold: 0.5 }); |
| 56 | + const fullyVisible = $box.isInView({ viewport: $container, fully: true }); |
51 | 57 |
|
52 | | -$('#scroll-to-middle').on('click', () => { |
53 | | - const container = $('#scroll-area').el(); |
54 | | - const scrollHeight = container.scrollHeight; |
55 | | - const clientHeight = container.clientHeight; |
56 | | - container.scrollTop = (scrollHeight - clientHeight) / 2; |
| 58 | + const containerDims = $container.dimensions(); |
57 | 59 |
|
58 | | - // Check after scroll |
59 | | - setTimeout(() => checkViewportStatus(), 100); |
60 | | -}); |
| 60 | + const info = `VISIBILITY STATUS: |
61 | 61 |
|
62 | | -// Check on scroll |
63 | | -$('#scroll-area').on('scroll', () => { |
64 | | - checkViewportStatus(); |
65 | | -}); |
| 62 | +In View: ${basicCheck ? '✓ YES' : '✗ NO'} |
| 63 | +50% Visible: ${halfVisible ? '✓ YES' : '✗ NO'} |
| 64 | +Fully Visible: ${fullyVisible ? '✓ YES' : '✗ NO'} |
66 | 65 |
|
67 | | -// Initial check |
68 | | -checkViewportStatus(); |
| 66 | +Container Scroll: |
| 67 | + Top: ${containerDims.scrollTop}px |
| 68 | + Left: ${containerDims.scrollLeft}px`; |
| 69 | + |
| 70 | + $('.output pre').text(info); |
| 71 | + |
| 72 | + // Update visual state |
| 73 | + $box.removeClass('in-view partially-in-view out-of-view'); |
| 74 | + if (fullyVisible) { |
| 75 | + $box.addClass('in-view'); |
| 76 | + } |
| 77 | + else if (basicCheck) { |
| 78 | + $box.addClass('partially-in-view'); |
| 79 | + } |
| 80 | + else { |
| 81 | + $box.addClass('out-of-view'); |
| 82 | + } |
| 83 | +} |
0 commit comments