change the isVisible utility name to isInViewport

Author: mrholek

packages/coreui-vue/src/components/carousel/CCarousel.ts

@@ -11,7 +11,7 @@ import {
   watch,
 } from 'vue'
 
-import { isVisible } from './../../utils'
+import { isInViewport } from './../../utils'
 
 const CCarousel = defineComponent({
   name: 'CCarousel',
@@ -133,7 +133,7 @@ const CCarousel = defineComponent({
     const nextItemWhenVisible = () => {
       // Don't call next when the page isn't visible
       // or the carousel or its parent isn't visible
-      if (!document.hidden && isVisible(carouselRef.value)) {
+      if (!document.hidden && isInViewport(carouselRef.value)) {
         handleControlClick('next')
       }
     }
@@ -156,7 +156,7 @@ const CCarousel = defineComponent({
     }
 
     const handleScroll = () => {
-      if (!document.hidden && isVisible(carouselRef.value)) {
+      if (!document.hidden && isInViewport(carouselRef.value)) {
         visible.value = true
       } else {
         visible.value = false

packages/coreui-vue/src/components/sidebar/CSidebar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { CBackdrop } from '../backdrop'
 
-import { isVisible } from './../../utils'
+import { isInViewport } from './../../utils'
 
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
@@ -88,15 +88,15 @@ const CSidebar = defineComponent({
 
     onMounted(() => {
       mobile.value = isOnMobile(sidebarRef.value)
-      inViewport.value = isVisible(sidebarRef.value)
+      inViewport.value = isInViewport(sidebarRef.value)
 
       window.addEventListener('resize', () => handleResize())
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
       sidebarRef.value.addEventListener('mouseup', handleOnClick)
       sidebarRef.value.addEventListener('transitionend', () => {
-        inViewport.value = isVisible(sidebarRef.value)
+        inViewport.value = isInViewport(sidebarRef.value)
       })
     })
 
@@ -107,7 +107,7 @@ const CSidebar = defineComponent({
 
       sidebarRef.value.removeEventListener('mouseup', handleOnClick)
       sidebarRef.value.removeEventListener('transitionend', () => {
-        inViewport.value = isVisible(sidebarRef.value)
+        inViewport.value = isInViewport(sidebarRef.value)
       })
     })
 
@@ -118,7 +118,7 @@ const CSidebar = defineComponent({
 
     const handleResize = () => {
       mobile.value = isOnMobile(sidebarRef.value)
-      inViewport.value = isVisible(sidebarRef.value)
+      inViewport.value = isInViewport(sidebarRef.value)
     }
 
     const handleKeyup = (event: Event) => {

packages/coreui-vue/src/utils/index.ts

@@ -1,3 +1,3 @@
-import isVisible from './isVisible'
+import isInViewport from './isInViewport'
 
-export { isVisible }
+export { isInViewport }

packages/coreui-vue/src/utils/isInViewport.ts

@@ -0,0 +1,11 @@
+const isInViewport = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    Math.floor(rect.top) >= 0 &&
+    Math.floor(rect.left) >= 0 &&
+    Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+    Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export default isInViewport