evui 3.1.53 → 3.1.57

package/src/components/window/uses.js

@@ -1,23 +1,18 @@
 import {
-  getCurrentInstance, ref, computed, reactive, watch, nextTick,
+  getCurrentInstance,
+  ref,
+  computed,
+  reactive,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
 } from 'vue';
 
 // 세로 스크롤 너비
 const getVScrollWidth = () => window.innerWidth - document.documentElement.clientWidth;
 // 가로 스크롤 너비
-const getHScrollWidth = () => window.innerHeight - document.documentElement.clientHeight;
-// 전체 문서 너비
-const getDocumentWidth = () => Math.max(
-  document.body.scrollWidth, document.documentElement.scrollWidth,
-  document.body.offsetWidth, document.documentElement.offsetWidth,
-  document.body.clientWidth, document.documentElement.clientWidth,
-);
-// 전체 문서 높이
-const getDocumentHeight = () => Math.max(
-  document.body.scrollHeight, document.documentElement.scrollHeight,
-  document.body.offsetHeight, document.documentElement.offsetHeight,
-  document.body.clientHeight, document.documentElement.clientHeight,
-);
+// const getHScrollWidth = () => window.innerHeight - document.documentElement.clientHeight;
 
 const useModel = () => {
   const { props, emit } = getCurrentInstance();
@@ -89,6 +84,8 @@ const useModel = () => {
   }));
 
   const setBasePosition = () => {
+    basePosition.position = 'fixed';
+
     if (props.fullscreen) {
       basePosition.width = '100%';
       basePosition.height = '100%';
@@ -97,22 +94,32 @@ const useModel = () => {
       return;
     }
 
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-      || document.body.scrollTop || 0;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-      || document.body.scrollLeft || 0;
+    const convertedWidth = removeUnit(props.width, 'horizontal');
+    const convertedMinWidth = removeUnit(props.minWidth, 'horizontal');
+    if (convertedWidth < convertedMinWidth) {
+      console.warn('Since width is less than min-width, it is replaced by min-width.');
+      basePosition.width = numberToUnit(props.minWidth);
+    } else {
+      basePosition.width = numberToUnit(props.width);
+    }
+
+    const convertedHeight = removeUnit(props.height, 'vertical');
+    const convertedMinHeight = removeUnit(props.minHeight, 'vertical');
+    if (convertedHeight < convertedMinHeight) {
+      console.warn('Since height is less than min-height, it is replaced by min-height.');
+      basePosition.height = numberToUnit(props.minHeight);
+    } else {
+      basePosition.height = numberToUnit(props.height);
+    }
 
-    basePosition.width = numberToUnit(props.width);
-    basePosition.height = numberToUnit(props.height);
-    basePosition.position = 'absolute';
-    basePosition.top = `calc(((100vh - ${basePosition.height}) / 2) + ${scrollTop}px)`;
-    basePosition.left = `calc(((100vw - ${basePosition.width}) / 2) + ${scrollLeft}px)`;
+    basePosition.top = `calc((100% - ${basePosition.height}) / 2)`;
+    basePosition.left = `calc((100% - ${basePosition.width}) / 2)`;
 
     if (removeUnit(props.width, 'horizontal') > window.innerWidth) {
       basePosition.left = 0;
     }
     if (removeUnit(props.height, 'vertical') > window.innerHeight) {
-      basePosition.top = `${scrollTop}px`;
+      basePosition.top = 0;
     }
   };
 
@@ -125,61 +132,32 @@ const useModel = () => {
   };
 
   const changeBodyCls = (isVisible) => {
-    const windowCnt = root?.getElementsByClassName('ev-window-wrapper')?.length;
     const hideScrollWindowCnt = root?.getElementsByClassName('scroll-lock')?.length;
-    const allowScrollWindowCnt = root?.getElementsByClassName('scroll-allow')?.length;
     const bodyElem = document.body;
 
-    if (isVisible) {
+    if (isVisible) { // window open
       if (props.hideScroll) {
-        // props.hideScroll === true 시,
-        // body 우측 padding 추가 & overflow hidden class 추가
+        // hideScroll 시, body 우측 padding 추가 & overflow hidden class 추가
         if (!hideScrollWindowCnt) {
           const scrollWidth = getVScrollWidth();
           bodyElem.style.paddingRight = `${scrollWidth}px`;
         }
         bodyElem.classList.add('ev-window-scroll-lock');
-      } else if (!props.hideScroll && !props.isModal) {
-        // !props.hideScroll && !props.isModal 시,
-        // body에 position: relative 추가, 스크롤 여부에 따라 overflow-x or y hidden 처리
-        const vScrollWidth = getVScrollWidth();
-        const hScrollWidth = getHScrollWidth();
-        const bodyClassName = ['ev-window-scroll-allow'];
-        if (vScrollWidth > 0 && hScrollWidth === 0) {
-          // 세로 스크롤만 있을 경우 - 가로 스크롤 막음
-          bodyClassName.push('horizontal-hide');
-        } else if (vScrollWidth === 0 && hScrollWidth > 0) {
-          // 가로 스크롤만 있을 경우 - 세로 스크롤 막음
-          bodyClassName.push('vertical-hide');
-        } else if (vScrollWidth === 0 && hScrollWidth === 0) {
-          // 둘다 없을 경우 - 가로&세로 스크롤 막음
-          bodyClassName.push('hide');
-        }
-
-        bodyElem.classList.add(...bodyClassName);
-      }
-      bodyElem.classList.add('ev-window-open');
-    } else {
-      if (hideScrollWindowCnt === 1) {
-        bodyElem.style.removeProperty('padding-right');
-        bodyElem.classList.remove('ev-window-scroll-lock');
-      }
-      if (allowScrollWindowCnt === 1) {
-        bodyElem.classList.remove('ev-window-scroll-allow', 'horizontal-hide', 'vertical-hide', 'hide');
-      }
-      if (windowCnt === 1) {
-        bodyElem.classList.remove('ev-window-open');
       }
+    } else if (props.hideScroll && hideScrollWindowCnt === 1) { // window close
+      bodyElem.style.removeProperty('padding-right');
+      bodyElem.classList.remove('ev-window-scroll-lock');
     }
   };
+
   setBasePosition();
 
   watch(
     () => props.visible,
-    (newVal) => {
+    async (newVal) => {
       changeBodyCls(newVal);
       if (newVal) {
-        nextTick(() => {
+        await nextTick(() => {
           setBasePosition();
         });
       }
@@ -211,8 +189,6 @@ const useMouseEvent = (param) => {
   const draggingMinSize = 50;
   const grabbingBorderSize = 5;
   const dragStyle = reactive({});
-  const documentWidth = ref(0);
-  const documentHeight = ref(0);
   const clickedInfo = reactive({
     state: '',
     pressedSpot: '',
@@ -417,6 +393,7 @@ const useMouseEvent = (param) => {
   // 브라우저 상하 위치 제약
   const getValidTop = (windowHeight, top) => {
     let tempTop = top;
+
     if (tempTop < 0) { // 상
       tempTop = 0;
     } else if (tempTop > windowHeight - draggingMinSize) { // 하
@@ -435,28 +412,6 @@ const useMouseEvent = (param) => {
     return tempLeft;
   };
 
-  // mousedown > wheel: 마우스 휠
-  const wheeling = (e) => {
-    const scrollTop = document.documentElement.scrollTop;
-    if (e.deltaY < 0 && scrollTop <= 0) {
-      return;
-    }
-
-    let tempTop = removeUnit(dragStyle.top) || clickedInfo.top;
-    tempTop += e.deltaY;
-
-    const windowHeight = props.hideScroll || props.isModal
-      ? document.documentElement.clientHeight : documentHeight.value;
-    tempTop = getValidTop(windowHeight, tempTop);
-
-    clickedInfo.top = tempTop;
-
-    setDragStyle({
-      top: `${tempTop}px`,
-      left: dragStyle.left,
-    });
-  };
-
   // mousedown > mousemove: 마우스 드래그
   const dragging = (e) => {
     e.preventDefault();
@@ -464,63 +419,14 @@ const useMouseEvent = (param) => {
 
     // window header를 통해 mouseMove 됐을 경우
     if (props.draggable && clickedInfo.pressedSpot === 'header') {
-      // 전체 문서 너비&높이 세팅 - mount 때와 드래그 시 수치 다르게 측정되기 때문에 드래그 초기 한번만 세팅
-      if (!documentWidth.value) {
-        documentWidth.value = getDocumentWidth();
-      }
-      if (!documentHeight.value) {
-        documentHeight.value = getDocumentHeight();
-      }
-
-      // 스크롤 있을 경우 전체 문서 기준, 없을 경우 clientWidth, Height 기준
-      const windowWidth = props.hideScroll || props.isModal
-        ? document.documentElement.clientWidth : documentWidth.value;
-      const windowHeight = props.hideScroll || props.isModal
-        ? document.documentElement.clientHeight : documentHeight.value;
-
+      const windowWidth = document.documentElement.clientWidth;
+      const windowHeight = document.documentElement.clientHeight;
       const diffTop = e.clientY - clickedInfo.clientY;
       const diffLeft = e.clientX - clickedInfo.clientX;
 
       let tempTop = clickedInfo.top + diffTop;
       let tempLeft = clickedInfo.left + diffLeft;
 
-      // 스크롤 허용 & 드래그 시 브라우저 상하단 위치에서 스크롤 이동
-      if (!props.hideScroll && !props.isModal) {
-        let [x, y] = [0, 0];
-        const moveScrollSize = 10;
-        const scrollTop = document.documentElement.scrollTop;
-
-        if (e.clientY < draggingMinSize && scrollTop > 0) { // 상
-          tempTop = draggedInfo.top || tempTop;
-          clickedInfo.clientY = e.clientY;
-          clickedInfo.top = tempTop;
-          y = -moveScrollSize;
-          tempTop -= moveScrollSize;
-        } else if (e.clientY > document.documentElement.clientHeight - draggingMinSize) { // 하
-          tempTop = draggedInfo.top || tempTop;
-          clickedInfo.clientY = e.clientY;
-          clickedInfo.top = tempTop;
-          y = moveScrollSize;
-          tempTop += moveScrollSize;
-        } else if (e.clientX < draggingMinSize) { // 좌
-          tempLeft = draggedInfo.left || tempLeft;
-          clickedInfo.clientX = e.clientX;
-          clickedInfo.left = tempLeft;
-          x = -moveScrollSize;
-          tempLeft -= moveScrollSize;
-        } else if (e.clientX > document.documentElement.clientWidth - draggingMinSize) { // 우
-          tempLeft = draggedInfo.left || tempLeft;
-          clickedInfo.clientX = e.clientX;
-          clickedInfo.left = tempLeft;
-          x = moveScrollSize;
-          tempLeft += moveScrollSize;
-        }
-
-        document.documentElement.scrollBy(x, y);
-        draggedInfo.top = tempTop;
-        draggedInfo.left = tempLeft;
-      }
-
       tempTop = getValidTop(windowHeight, tempTop);
       tempLeft = getValidLeft(windowWidth, tempLeft);
 
@@ -542,7 +448,6 @@ const useMouseEvent = (param) => {
 
     emit('mousedown-mouseup', e);
 
-    window.removeEventListener('wheel', wheeling);
     window.removeEventListener('mousemove', dragging);
     window.removeEventListener('mouseup', endDrag);
   };
@@ -594,7 +499,6 @@ const useMouseEvent = (param) => {
 
     emit('mousedown', { ...clickedInfo });
 
-    window.addEventListener('wheel', wheeling);
     window.addEventListener('mousemove', dragging);
     window.addEventListener('mouseup', endDrag);
   };
@@ -609,14 +513,7 @@ const useMouseEvent = (param) => {
   const clickExpandBtn = () => {
     isFullExpandWindow.value = !isFullExpandWindow.value;
     nextTick(() => {
-      if (!isFullExpandWindow.value) {
-        setDragStyle({
-          top: beforeExpandPosInfo.top,
-          left: beforeExpandPosInfo.left,
-          width: beforeExpandPosInfo.width,
-          height: beforeExpandPosInfo.height,
-        });
-      } else {
+      if (isFullExpandWindow.value) {
         beforeExpandPosInfo.top = windowRef.value.offsetTop;
         beforeExpandPosInfo.left = windowRef.value.offsetLeft;
         beforeExpandPosInfo.width = windowRef.value.offsetWidth;
@@ -628,7 +525,21 @@ const useMouseEvent = (param) => {
           width: document.body.clientWidth,
           height: document.body.clientHeight,
         });
+      } else {
+        setDragStyle({
+          top: beforeExpandPosInfo.top,
+          left: beforeExpandPosInfo.left,
+          width: beforeExpandPosInfo.width,
+          height: beforeExpandPosInfo.height,
+        });
       }
+
+      emit('expand', {
+        top: beforeExpandPosInfo.top,
+        left: beforeExpandPosInfo.left,
+        width: beforeExpandPosInfo.width,
+        height: beforeExpandPosInfo.height,
+      });
     });
   };
 
@@ -679,7 +590,308 @@ const useMouseEvent = (param) => {
   };
 };
 
+const activeWindows = (() => {
+  let windows = [];
+  let sequence = 0;
+
+  return {
+    add(activeWindow) {
+      if (activeWindow === null || activeWindow === undefined) return;
+
+      activeWindow.sequence = sequence++;
+      windows.push(activeWindow);
+
+      // eslint-disable-next-line consistent-return
+      return activeWindow.sequence;
+    },
+    remove(inactiveWindow) {
+      if (inactiveWindow === null || inactiveWindow === undefined) return;
+      windows = windows.filter(activeWindow => activeWindow.sequence !== inactiveWindow.sequence);
+    },
+
+    get windows() {
+      return windows.slice();
+    },
+    getWindowBySequence(targetSequence) {
+      return windows.find(activeWindow => activeWindow.sequence === targetSequence);
+    },
+
+    isEmpty() {
+      return windows.length <= 0;
+    },
+    isFirstWindowOpen() {
+      return sequence === 1;
+    },
+  };
+})();
+
+const zIndexService = (() => {
+  const LOWER = 700;
+  const UPPER = 750;
+
+  const INCREMENT = 1;
+  const PADDING = INCREMENT * 2;
+
+  const UPPER_LIMIT = UPPER - PADDING;
+
+  let current = LOWER;
+
+  return {
+    getNext() {
+      if (current >= UPPER_LIMIT) {
+        return UPPER_LIMIT;
+      }
+      current += INCREMENT;
+      return current;
+    },
+    getNextOverLimit() {
+      return UPPER_LIMIT + INCREMENT;
+    },
+    getPrevFrom(index) {
+      const prev = current - (index * INCREMENT);
+
+      if (prev <= LOWER) return LOWER;
+      return prev;
+    },
+    isUpperLimitClose() {
+      return current >= UPPER_LIMIT;
+    },
+    resetToLower() {
+      current = LOWER;
+    },
+    getAllocableCount() {
+      return Math.floor((UPPER_LIMIT - LOWER) / INCREMENT);
+    },
+  };
+})();
+
+const getZIndexFromElement = (element) => {
+  const zIndex = window.getComputedStyle(element).getPropertyValue('z-index').trim();
+
+  if (!zIndex || isNaN(zIndex)) return 700; // window 초기 z-index 값
+
+  return parseInt(zIndex);
+};
+
+const getActiveWindowsOrderByZIndexAsc = () => {
+  // zIndex 클수록, 최근에 열린 것일수록(sequence 클수록) 뒤에 위치
+  const compareByZIndex = (window1, window2) => {
+    if (window1.zIndex > window2.zIndex) return 1;
+    if (window1.zIndex < window2.zIndex) return -1;
+
+    if (window1.sequence > window2.sequence) return 1;
+    return -1;
+  };
+
+  const activeWindowsSorted = Array.prototype.map.call(activeWindows.windows, activeWindow => ({
+    ...activeWindow,
+    zIndex: getZIndexFromElement(activeWindow.elem),
+  })).sort(compareByZIndex);
+
+  return activeWindowsSorted;
+};
+
+const useEscCloseAndFocusable = ({ closeWin, windowRef }) => {
+  const { props } = getCurrentInstance();
+
+  let sequence = null;
+  let timer = null;
+
+  // escClose 관련 로직 시작
+  const addActiveWindow = () => {
+    const windowSequence = activeWindows.add({
+      sequence,
+      closeWin,
+      elem: windowRef.value,
+      escClose: props.escClose,
+    });
+    return windowSequence;
+  };
+
+  const removeInactiveWindow = (inactiveWindow) => {
+    activeWindows.remove(inactiveWindow);
+  };
+
+  const keydownEsc = (event) => {
+    if (activeWindows.isEmpty()) return;
+
+    const { code } = event;
+    if (code !== 'Escape') return;
+
+    const activeWindowsSorted = getActiveWindowsOrderByZIndexAsc();
+    const topActiveWindow = activeWindowsSorted[activeWindowsSorted.length - 1];
+
+    // 예시 상황) Nested에서 외부 Window의 escClose는 true이고, 내부 Window의 escClose는 false인 경우,
+    // esc 눌러도 외부 Window는 닫히지 않고, 가장 상단에 있는 내부 Window가 수동으로 닫힌 후에 닫히도록 하기 위해
+    if (!topActiveWindow.escClose) return;
+
+    topActiveWindow.closeWin();
+  };
+
+  const setWindowActive = () => {
+    sequence = addActiveWindow();
+    // DOM의 dataset에 sequence 값 추가해 식별 가능하도록
+    windowRef.value.dataset.sequence = sequence;
+
+    if (activeWindows.isFirstWindowOpen()) {
+      document.addEventListener('keydown', keydownEsc);
+    }
+  };
+
+  const setWindowInactive = () => {
+    const inactiveWindow = activeWindows.getWindowBySequence(sequence);
+    removeInactiveWindow(inactiveWindow);
+  };
+  // escClose 관련 로직 끝
+
+
+  // focusable 관련 로직 시작
+  const setZIndexToWindow = ({ elem, zIndex }) => {
+    // 모달인 경우에는 dim layer도 같이 z-index 높여준다.
+    if (props.isModal) {
+      const dimLayerElem = elem.parentElement.getElementsByClassName('ev-window-dim-layer')[0];
+      dimLayerElem.style.zIndex = zIndex;
+    }
+
+    elem.style.zIndex = zIndex;
+  };
+
+  const assignZIndex = () => {
+    // Window가 1번째로 열릴 때, z-index 값을 시작값으로 설정
+    if (activeWindows.windows.length === 1) {
+      zIndexService.resetToLower();
+    }
+
+    const nextZIndex = zIndexService.getNext();
+    setZIndexToWindow({ elem: windowRef.value, zIndex: nextZIndex });
+  };
+
+  const sameAsCurrent = windowData => String(windowData.sequence)
+    === windowRef.value.dataset.sequence;
+
+  // 할당하려는 z-index 값이 상한일 때
+  const reassignZIndex = () => {
+    const activeWindowsZIndexAsc = getActiveWindowsOrderByZIndexAsc();
+
+    const overCountLimit = activeWindows.windows.length > zIndexService.getAllocableCount();
+    // 할당 가능한 z-index 수보다 많은 Window를 띄웠을 때
+    if (overCountLimit) {
+      const activeWindowsZIndexDesc = activeWindowsZIndexAsc.reverse();
+
+      // z-index 기준 내림차순으로 정렬한 Window의 z-index 값을 UPPER에서 LOWER로 1씩 감소한 값 할당
+      let interval = 0;
+      activeWindowsZIndexDesc.forEach((activeWindow) => {
+        if (sameAsCurrent(activeWindow)) return;
+
+        const prevZIndex = zIndexService.getPrevFrom(interval++);
+        setZIndexToWindow({ elem: activeWindow.elem, zIndex: prevZIndex });
+      });
+
+      // 가장 상단으로 와야하는 현재 Window의 z-index 값을 최대로
+      const nextZIndex = zIndexService.getNextOverLimit();
+      setZIndexToWindow({ elem: windowRef.value, zIndex: nextZIndex });
+    } else {
+      zIndexService.resetToLower();
+
+      activeWindowsZIndexAsc.forEach((activeWindow) => {
+        if (sameAsCurrent(activeWindow)) return;
+
+        const nextZIndex = zIndexService.getNext();
+        setZIndexToWindow({ elem: activeWindow.elem, zIndex: nextZIndex });
+      });
+
+      // 가장 상단으로 와야하는 현재 Window의 z-index 값을 최대로
+      const nextZIndex = zIndexService.getNext();
+      setZIndexToWindow({ elem: windowRef.value, zIndex: nextZIndex });
+    }
+  };
+
+  const checkLimitAndSetZIndex = () => {
+    if (zIndexService.isUpperLimitClose()) {
+      reassignZIndex();
+    } else {
+      assignZIndex();
+    }
+  };
+
+  const setFocus = () => {
+    // X 버튼을 클릭했을 때
+    if (!windowRef.value) return;
+
+    // focusable prop이 false인 경우에는 z-index를 높이지 않는다.
+    if (!props.focusable) return;
+
+    const activeWindowsSorted = getActiveWindowsOrderByZIndexAsc();
+    const topActiveWindow = activeWindowsSorted[activeWindowsSorted.length - 1];
+
+    const isAlreadyTop = sameAsCurrent(topActiveWindow);
+    if (isAlreadyTop) return;
+
+    checkLimitAndSetZIndex();
+  };
+  // focusable 관련 로직 끝
+
+
+  /*
+    실행 시점(=Window 열림):
+      visible 초기값이 true일 때 watch를 실행시키지 않아 onMounted hook 사용
+  */
+  onMounted(() => {
+    if (props.visible) {
+      setWindowActive();
+      timer = setTimeout(checkLimitAndSetZIndex, 0);
+    }
+  });
+
+  /*
+    실행 시점(=Window 닫힘):
+      예시. 배열을 통해 Window 여러 개 띄울 때, 배열 원소 삭제로 인해 해당 Window가 닫히는 경우
+      unmount가 발생해서 watch를 실행히시키지 않아 onBeforeUnmount hook 사용
+  */
+  onBeforeUnmount(() => {
+    if (props.visible) {
+      setWindowInactive();
+      clearTimeout(timer);
+    }
+  });
+
+  /*
+    실행 시점:
+      1. visible 값이 false -> true로 변했을 때(=Window 열림)
+      2. visible 값이 true -> false로 변했을 때(=Window 닫힙)
+  */
+  watch(
+    () => props.visible,
+    (visible) => {
+      nextTick(() => {
+        if (visible) {
+          // visible 값이 false -> true로 변경되었을 때
+          setWindowActive();
+          timer = setTimeout(checkLimitAndSetZIndex, 0);
+        } else {
+          // visible 값이 true -> false로 변경되었을 때
+          setWindowInactive();
+          clearTimeout(timer);
+        }
+      });
+  });
+
+  watch(
+    () => props.escClose,
+    (escClose) => {
+      if (!props.visible) return;
+      const currentWindow = activeWindows.getWindowBySequence(sequence);
+      if (currentWindow) currentWindow.escClose = escClose;
+    },
+  );
+
+  return {
+    setFocus,
+  };
+};
+
 export {
   useModel,
   useMouseEvent,
+  useEscCloseAndFocusable,
 };