@eturnity/eturnity_reusable_components 7.51.14 → 7.51.15-EPDM-10679.0

package/src/components/infoText/index.vue

@@ -1,382 +1,488 @@
-<template>
-  <PageContainer ref="container">
-    <div
-      ref="icon"
-      data-test-id="infoText_trigger"
-      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-    >
-      <IconComponent
-        :color="iconColor || computedIconColor"
-        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-        :disabled="isDisabled"
-        :name="iconName"
-        :size="size"
-      />
-    </div>
-    <Teleport v-if="isVisible" to="body">
-      <TextWrapper :style="wrapperStyle">
-        <TextOverlay ref="infoBox" :image="image" :style="boxStyle">
-          <OverlayImage
-            v-if="image"
-            ref="infoImage"
-            alt="Info Image"
-            :src="image"
-            @load="onImageLoad"
-          />
-          <span ref="textContent" :style="textStyle">
-            <slot>
-              <span v-html="text"></span>
-            </slot>
-          </span>
-        </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
-      </TextWrapper>
-    </Teleport>
-  </PageContainer>
-</template>
-
-<script>
-  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-  //To use:
-  // <info-text
-  //     text="Veritatis et quasi architecto beatae vitae"
-  //     size="20px"
-  //     openTrigger="onClick"
-  //     buttonType="error"
-  //     image="path/to/image.jpg"
-  // />
-  import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
-  import IconComponent from '../icon'
-  import styled from 'vue3-styled-components'
-  import theme from '../../assets/theme.js'
-
-  const TextOverlay = styled('div')`
-    background-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
-    color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
-    font-size: ${(props) => (props.image ? '12px' : '13px')};
-    border-radius: 4px;
-    padding: 10px;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-    width: 100%; // Ensure the TextOverlay takes full width of its parent
-    box-shadow: ${(props) =>
-      props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
-
-    a {
-      color: ${(props) => props.theme.colors.blue};
-    }
-
-    img + span {
-      margin-top: 10px;
-      display: block;
-    }
-  `
-
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid
-      ${(props) =>
-        props.image ? props.theme.colors.white : props.theme.colors.black};
-    filter: ${(props) =>
-      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  `
-
-  const PageContainer = styled('div')`
-    display: inline-block;
-    position: relative;
-  `
-
-  const TextWrapper = styled('div')`
-    z-index: 99999;
-    position: absolute;
-  `
-
-  const OverlayImage = styled('img')`
-    width: 100%;
-    height: auto;
-  `
-
-  export default {
-    name: 'InfoText',
-    components: {
-      IconComponent,
-      TextOverlay,
-      Arrow,
-      PageContainer,
-      TextWrapper,
-      OverlayImage,
-    },
-    props: {
-      text: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      size: {
-        type: String,
-        default: '14px',
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
-        type: String,
-      },
-      maxWidth: {
-        default: '400px',
-        type: String,
-      },
-      openTrigger: {
-        type: String,
-        default: 'onHover',
-        validator: (value) => ['onHover', 'onClick'].includes(value),
-      },
-      buttonType: {
-        type: String,
-        default: 'regular',
-        validator: (value) => ['regular', 'error'].includes(value),
-      },
-      image: {
-        type: String,
-        default: '',
-      },
-      iconName: {
-        type: String,
-        default: 'info',
-      },
-      iconColor: {
-        type: String,
-        default: null,
-        required: false,
-      },
-      isDisabled: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-    },
-    setup(props) {
-      const isVisible = ref(false)
-      const container = ref(null)
-      const icon = ref(null)
-      const infoBox = ref(null)
-      const textContent = ref(null)
-      const infoImage = ref(null)
-      const infoBoxWidth = ref(0)
-      const infoBoxHeight = ref(0)
-      const boxStyle = ref({})
-      const arrowStyle = ref({})
-      const wrapperStyle = ref({})
-      const isMobile = ref(window.innerWidth <= 768)
-
-      const textStyle = computed(() => ({
-        fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
-        textAlign: props.image ? 'right' : 'left',
-      }))
-
-      const calculatePosition = (width) => {
-        if (!icon.value) return {}
-
-        const iconRect = icon.value.getBoundingClientRect()
-        const windowHeight = window.innerHeight
-        const windowWidth = window.innerWidth
-
-        let top = iconRect.bottom + 10
-        let left = iconRect.left
-
-        // Adjust left based on the infoBoxWidth
-        if (left + width > windowWidth) {
-          left = windowWidth - width - 10
-        }
-
-        // Ensure there's enough space below or place above if not
-        const isAbove = top + infoBoxHeight.value > windowHeight
-        if (isAbove) {
-          top = iconRect.top - infoBoxHeight.value - 10
-        }
-
-        // Calculate arrow position
-        let arrowLeft = iconRect.left - left + iconRect.width / 2 - 8
-
-        // Adjust arrow position if it's too close to the edges
-        const edgeThreshold = 2 // pixels from the edge to start adjusting
-        if (arrowLeft < edgeThreshold) {
-          arrowLeft = edgeThreshold
-        } else if (arrowLeft > width - 16 - edgeThreshold) {
-          arrowLeft = width - 16 - edgeThreshold
-        }
-
-        const arrowTop = isAbove ? 'auto' : '-7px'
-        const arrowBottom = isAbove ? '-7px' : 'auto'
-
-        arrowStyle.value = {
-          left: `${arrowLeft}px`,
-          top: arrowTop,
-          bottom: arrowBottom,
-          transform: isAbove ? 'none' : 'rotate(180deg)',
-        }
-
-        wrapperStyle.value = {
-          position: 'fixed',
-          top: `${top}px`,
-          left: `${left}px`,
-          transform: 'none',
-          width: `${width}px`, // Set a fixed width for the wrapper
-        }
-
-        return {
-          width: '100%', // Always use 100% width for the TextOverlay
-          maxWidth: props.maxWidth,
-          overflowY: 'auto',
-          backgroundColor: props.image
-            ? theme.colors.white
-            : theme.colors.black,
-        }
-      }
-
-      const showInfo = async () => {
-        isVisible.value = true
-        await nextTick()
-        updatePosition()
-      }
-
-      const hideInfo = () => {
-        isVisible.value = false
-      }
-
-      const toggleInfo = () => {
-        isVisible.value ? hideInfo() : showInfo()
-      }
-
-      const handleScroll = () => {
-        if (isVisible.value) {
-          hideInfo()
-        }
-        updatePosition()
-      }
-
-      const isIconInView = () => {
-        if (!icon.value) return false
-        const rect = icon.value.getBoundingClientRect()
-        return (
-          rect.top >= 0 &&
-          rect.left >= 0 &&
-          rect.bottom <=
-            (window.innerHeight || document.documentElement.clientHeight) &&
-          rect.right <=
-            (window.innerWidth || document.documentElement.clientWidth)
-        )
-      }
-
-      const updatePosition = async () => {
-        if (infoBox.value && textContent.value) {
-          await nextTick()
-
-          if (isIconInView()) {
-            const contentWidth = textContent.value.offsetWidth
-            infoBoxWidth.value = Math.min(
-              Math.max(contentWidth, 200), // Set a minimum width of 200px
-              parseInt(props.maxWidth, 10)
-            )
-            infoBoxHeight.value = infoBox.value.$el.offsetHeight
-            boxStyle.value = calculatePosition(infoBoxWidth.value)
-
-            // Now make it visible if it should be
-            if (isVisible.value) {
-              infoBox.value.$el.style.visibility = 'visible'
-            }
-          } else if (isVisible.value) {
-            hideInfo()
-          }
-        }
-      }
-
-      const onImageLoad = () => {
-        if (infoImage.value) {
-          infoBoxHeight.value = infoBox.value.$el.offsetHeight
-          updatePosition()
-        }
-      }
-
-      const handleClickOutside = (event) => {
-        if (
-          (props.openTrigger === 'onClick' || isMobile.value) &&
-          isVisible.value
-        ) {
-          const clickedElement = event.target
-          if (
-            infoBox.value &&
-            !infoBox.value.$el.contains(clickedElement) &&
-            !icon.value.contains(clickedElement)
-          ) {
-            hideInfo()
-          }
-        }
-      }
-
-      const handleResize = () => {
-        isMobile.value = window.innerWidth <= 768
-        updatePosition()
-      }
-
-      onMounted(() => {
-        window.addEventListener('scroll', handleScroll, { passive: true })
-        window.addEventListener('resize', handleResize)
-        document.addEventListener('scroll', handleScroll, {
-          passive: true,
-          capture: true,
-        })
-        document.addEventListener('click', handleClickOutside)
-      })
-
-      onUnmounted(() => {
-        window.removeEventListener('scroll', handleScroll)
-        window.removeEventListener('resize', handleResize)
-        document.removeEventListener('scroll', handleScroll, { capture: true })
-        document.removeEventListener('click', handleClickOutside)
-      })
-
-      watch(isVisible, (newValue) => {
-        if (newValue) {
-          updatePosition()
-        }
-      })
-
-      return {
-        isVisible,
-        boxStyle,
-        arrowStyle,
-        showInfo,
-        hideInfo,
-        toggleInfo,
-        container,
-        icon,
-        infoBox,
-        textContent,
-        infoImage,
-        infoBoxWidth,
-        infoBoxHeight,
-        wrapperStyle,
-        textStyle,
-        onImageLoad,
-        isMobile,
-      }
-    },
-    computed: {
-      computedIconColor() {
-        return this.buttonType === 'error'
-          ? theme.colors.red
-          : theme.colors.mediumGray
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer ref="container">
+    <div
+      ref="icon"
+      data-test-id="infoText_trigger"
+      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+    >
+      <IconComponent
+        :color="iconColor || computedIconColor"
+        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+        :disabled="isDisabled"
+        :name="iconName"
+        :size="size"
+      />
+    </div>
+    <Teleport v-if="isVisible" to="body">
+      <TextWrapper :style="wrapperStyle">
+        <TextOverlay
+          ref="infoBox"
+          :image="image"
+          :style="boxStyle"
+          :width="infoBoxWidth"
+        >
+          <OverlayImage
+            v-if="image"
+            ref="infoImage"
+            alt="Info Image"
+            :src="image"
+            @load="onImageLoad"
+          />
+          <span ref="textContent" :style="textStyle">
+            <slot>
+              <span v-html="text"></span>
+            </slot>
+          </span>
+        </TextOverlay>
+        <Arrow :image="image" :style="arrowStyle" />
+      </TextWrapper>
+    </Teleport>
+  </PageContainer>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     size="20px"
+  //     openTrigger="onClick"
+  //     buttonType="error"
+  //     image="path/to/image.jpg"
+  // />
+  import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
+  import IconComponent from '../icon'
+  import styled from 'vue3-styled-components'
+  import theme from '../../assets/theme.js'
+
+  const TextOverlay = styled('div')`
+    background-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
+    color: ${(props) =>
+      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
+    font-size: ${(props) => (props.image ? '12px' : '13px')};
+    border-radius: 4px;
+    padding: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    width: ${(props) => (props.width ? `${props.width}px` : '100%')};
+    box-shadow: ${(props) =>
+      props.image ? '0 2px 10px rgba(0, 0, 0, 0.1)' : 'none'};
+
+    a {
+      color: ${(props) => props.theme.colors.blue};
+    }
+
+    img + span {
+      margin-top: 10px;
+      display: block;
+    }
+  `
+
+  const Arrow = styled('div')`
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-top-color: ${(props) =>
+      props.image ? props.theme.colors.white : props.theme.colors.black};
+    filter: ${(props) =>
+      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  `
+
+  const PageContainer = styled('div')`
+    display: inline-block;
+    position: relative;
+  `
+
+  const TextWrapper = styled('div')`
+    z-index: 99999;
+    position: absolute;
+  `
+
+  const OverlayImage = styled('img')`
+    width: 100%;
+    height: auto;
+  `
+
+  export default {
+    name: 'InfoText',
+    components: {
+      IconComponent,
+      TextOverlay,
+      Arrow,
+      PageContainer,
+      TextWrapper,
+      OverlayImage,
+    },
+    props: {
+      text: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      size: {
+        type: String,
+        default: '14px',
+      },
+      infoPosition: {
+        required: false,
+        default: 'bottom',
+        type: String,
+      },
+      maxWidth: {
+        default: '400px',
+        type: String,
+      },
+      openTrigger: {
+        type: String,
+        default: 'onHover',
+        validator: (value) => ['onHover', 'onClick'].includes(value),
+      },
+      buttonType: {
+        type: String,
+        default: 'regular',
+        validator: (value) => ['regular', 'error'].includes(value),
+      },
+      image: {
+        type: String,
+        default: '',
+      },
+      iconName: {
+        type: String,
+        default: 'info',
+      },
+      iconColor: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+    setup(props) {
+      const isVisible = ref(false)
+      const container = ref(null)
+      const icon = ref(null)
+      const infoBox = ref(null)
+      const textContent = ref(null)
+      const infoImage = ref(null)
+      const infoBoxWidth = ref(0)
+      const infoBoxHeight = ref(0)
+      const boxStyle = ref({})
+      const arrowStyle = ref({})
+      const wrapperStyle = ref({})
+      const isMobile = ref(window.innerWidth <= 768)
+
+      const textStyle = computed(() => ({
+        fontSize: props.image ? '12px' : '13px',
+        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        textAlign: props.image ? 'right' : 'left',
+      }))
+
+      const calculatePosition = (width) => {
+        if (!icon.value || !width) return {}
+
+        const iconRect = icon.value.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+        const windowWidth = window.innerWidth
+
+        // Calculate available space in all directions
+        const spaceBelow = windowHeight - iconRect.bottom - 10
+        const spaceAbove = iconRect.top - 10
+        const spaceRight = windowWidth - iconRect.right - 10
+        const spaceLeft = iconRect.left - 10
+
+        // Determine the best position based on available space
+        const positions = [
+          { position: 'bottom', space: spaceBelow },
+          { position: 'top', space: spaceAbove },
+          { position: 'right', space: spaceRight },
+          { position: 'left', space: spaceLeft },
+        ].sort((a, b) => b.space - a.space)
+
+        const bestPosition = positions[0].position
+
+        let top, left, arrowPosition
+
+        switch (bestPosition) {
+          case 'bottom':
+            top = Math.round(iconRect.bottom + 10)
+            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
+            arrowPosition = {
+              left: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
+                  width - 18
+                )
+              )}px`,
+              top: '-7px',
+              bottom: 'auto',
+              transform: 'rotate(180deg)',
+            }
+            break
+
+          case 'top':
+            top = Math.round(iconRect.top - infoBoxHeight.value - 10)
+            left = Math.round(Math.min(iconRect.left, windowWidth - width - 10))
+            arrowPosition = {
+              left: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2),
+                  width - 18
+                )
+              )}px`,
+              top: 'auto',
+              bottom: '-7px',
+              transform: 'none',
+            }
+            break
+
+          case 'right':
+            top = Math.round(
+              Math.max(
+                Math.min(
+                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
+                  windowHeight - infoBoxHeight.value - 10
+                ),
+                10
+              )
+            )
+            left = Math.round(iconRect.right + 10)
+            arrowPosition = {
+              left: '-7px',
+              top: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
+                  infoBoxHeight.value - 18
+                )
+              )}px`,
+              bottom: 'auto',
+              transform: 'rotate(90deg)',
+            }
+            break
+
+          case 'left':
+            top = Math.round(
+              Math.max(
+                Math.min(
+                  iconRect.top - (infoBoxHeight.value - iconRect.height) / 2,
+                  windowHeight - infoBoxHeight.value - 10
+                ),
+                10
+              )
+            )
+            left = Math.round(iconRect.left - width - 10)
+            arrowPosition = {
+              left: 'auto',
+              right: '-7px',
+              top: `${Math.round(
+                Math.min(
+                  Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2),
+                  infoBoxHeight.value - 18
+                )
+              )}px`,
+              bottom: 'auto',
+              transform: 'rotate(-90deg)',
+            }
+            break
+        }
+
+        // Set arrow styles
+        arrowStyle.value = arrowPosition
+
+        // Set wrapper styles
+        wrapperStyle.value = {
+          position: 'fixed',
+          top: `${top}px`,
+          left: `${left}px`,
+          transform: 'none',
+          width: `${width}px`,
+        }
+
+        return {
+          width: '100%',
+          maxWidth: props.maxWidth,
+          overflowY: 'auto',
+          backgroundColor: props.image
+            ? theme.colors.white
+            : theme.colors.black,
+        }
+      }
+
+      const showInfo = async () => {
+        isVisible.value = true
+        // Wait for two render cycles to ensure content is stable
+        await nextTick()
+        await nextTick()
+        await updatePosition()
+      }
+
+      const hideInfo = () => {
+        isVisible.value = false
+        infoBoxWidth.value = 0 // Reset width when hiding
+      }
+
+      const toggleInfo = () => {
+        isVisible.value ? hideInfo() : showInfo()
+      }
+
+      const handleScroll = () => {
+        if (isVisible.value) {
+          hideInfo()
+        }
+        updatePosition()
+      }
+
+      const isIconInView = () => {
+        if (!icon.value) return false
+        const rect = icon.value.getBoundingClientRect()
+        return (
+          rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.bottom <=
+            (window.innerHeight || document.documentElement.clientHeight) &&
+          rect.right <=
+            (window.innerWidth || document.documentElement.clientWidth)
+        )
+      }
+
+      const updatePosition = async () => {
+        console.log('updatePosition')
+        if (!infoBox.value || !textContent.value) return
+
+        // First make the content visible but hidden to get accurate measurements
+        if (infoBox.value.$el) {
+          infoBox.value.$el.style.visibility = 'hidden'
+          infoBox.value.$el.style.display = 'block'
+        }
+
+        await nextTick()
+
+        if (!isIconInView()) {
+          if (isVisible.value) hideInfo()
+          return
+        }
+
+        // Create a temporary clone to measure true width
+        const clone = textContent.value.cloneNode(true)
+        clone.style.position = 'absolute'
+        clone.style.visibility = 'hidden'
+        clone.style.width = 'auto'
+        clone.style.maxWidth = 'none'
+        clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
+        document.body.appendChild(clone)
+
+        // Get fresh content width from clone
+        const contentWidth = clone.offsetWidth
+        document.body.removeChild(clone)
+
+        // Calculate new width
+        const calculatedWidth = Math.min(
+          Math.max(contentWidth, 200),
+          parseInt(props.maxWidth, 10)
+        )
+
+        // Set new dimensions
+        infoBoxWidth.value = calculatedWidth
+
+        // Wait for width to be applied
+        await nextTick()
+
+        infoBoxHeight.value = infoBox.value.$el.offsetHeight
+
+        // Calculate and apply position
+        boxStyle.value = calculatePosition(calculatedWidth)
+
+        // Make visible after position is set
+        if (isVisible.value && infoBox.value.$el) {
+          infoBox.value.$el.style.visibility = 'visible'
+        }
+      }
+
+      const onImageLoad = () => {
+        if (infoImage.value) {
+          infoBoxHeight.value = infoBox.value.$el.offsetHeight
+          updatePosition()
+        }
+      }
+
+      const handleClickOutside = (event) => {
+        if (
+          (props.openTrigger === 'onClick' || isMobile.value) &&
+          isVisible.value
+        ) {
+          const clickedElement = event.target
+          if (
+            infoBox.value &&
+            !infoBox.value.$el.contains(clickedElement) &&
+            !icon.value.contains(clickedElement)
+          ) {
+            hideInfo()
+          }
+        }
+      }
+
+      const handleResize = () => {
+        isMobile.value = window.innerWidth <= 768
+        updatePosition()
+      }
+
+      onMounted(() => {
+        window.addEventListener('scroll', handleScroll, { passive: true })
+        window.addEventListener('resize', handleResize)
+        document.addEventListener('scroll', handleScroll, {
+          passive: true,
+          capture: true,
+        })
+        document.addEventListener('click', handleClickOutside)
+      })
+
+      onUnmounted(() => {
+        window.removeEventListener('scroll', handleScroll)
+        window.removeEventListener('resize', handleResize)
+        document.removeEventListener('scroll', handleScroll, { capture: true })
+        document.removeEventListener('click', handleClickOutside)
+      })
+
+      watch(isVisible, (newValue) => {
+        if (newValue) {
+          updatePosition()
+        }
+      })
+
+      return {
+        isVisible,
+        boxStyle,
+        arrowStyle,
+        showInfo,
+        hideInfo,
+        toggleInfo,
+        container,
+        icon,
+        infoBox,
+        textContent,
+        infoImage,
+        infoBoxWidth,
+        infoBoxHeight,
+        wrapperStyle,
+        textStyle,
+        onImageLoad,
+        isMobile,
+      }
+    },
+    computed: {
+      computedIconColor() {
+        return this.buttonType === 'error'
+          ? theme.colors.red
+          : theme.colors.mediumGray
+      },
+    },
+  }
+</script>