From d601cac6e697fbac43dde5621239af31e7809737 Mon Sep 17 00:00:00 2001
From: sej-dev <wndmstla1@gmail.com>
Date: Tue, 28 Dec 2021 14:11:24 +0900
Subject: [PATCH] =?UTF-8?q?[#994]=20[3.0]=20EVUI=20>=20Window=20ESC=20?=
 =?UTF-8?q?=EB=88=84=EB=A5=B4=EB=A9=B4=20=EB=8B=AB=ED=9E=88=EA=B2=8C=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20###############=201.=20Window.vue=EC=97=90?=
 =?UTF-8?q?=20default=EA=B0=92=20false=EC=9D=B8=20escClose=20prop=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=202.=20uses.js=EC=97=90=20esc=20keydown=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B4=80=EB=A6=AC=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20useEscKeydownEvent=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/window/Window.vue |  10 ++-
 src/components/window/uses.js    | 132 ++++++++++++++++++++++++++++++-
 2 files changed, 140 insertions(+), 2 deletions(-)

diff --git a/src/components/window/Window.vue b/src/components/window/Window.vue
index 64caebdf5..978b4029c 100644
--- a/src/components/window/Window.vue
+++ b/src/components/window/Window.vue
@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import { useModel, useMouseEvent } from './uses';
+import { useEscKeydownEvent, useModel, useMouseEvent } from './uses';
 
 export default {
   name: 'EvWindow',
@@ -149,6 +149,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    escClose: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     'update:visible',
@@ -159,6 +163,7 @@ export default {
   ],
   setup() {
     const {
+      inputRef,
       windowRef,
       headerRef,
       isFullExpandWindow,
@@ -182,7 +187,10 @@ export default {
       removeUnit,
     });
 
+    useEscKeydownEvent({ closeWin, windowRef });
+
     return {
+      inputRef,
       windowRef,
       headerRef,
       baseStyle,
diff --git a/src/components/window/uses.js b/src/components/window/uses.js
index 9e6cf848a..8daf47798 100644
--- a/src/components/window/uses.js
+++ b/src/components/window/uses.js
@@ -1,5 +1,5 @@
 import {
-  getCurrentInstance, ref, computed, reactive, watch, nextTick,
+  getCurrentInstance, ref, computed, reactive, watch, nextTick, onMounted,
 } from 'vue';
 
 // 세로 스크롤 너비
@@ -679,7 +679,137 @@ const useMouseEvent = (param) => {
   };
 };
 
+const openWindows = (() => {
+  let windows = [];
+
+  return {
+    add(openWindow) {
+      if (openWindow == null) return;
+      windows.push(openWindow);
+    },
+    remove(closeWindow) {
+      if (closeWindow == null) return;
+      windows = windows.filter(openWindow => openWindow.sequence !== closeWindow.sequence);
+    },
+    get windows() {
+      return windows.slice();
+    },
+    getWindowBySequence(sequence) {
+      return windows.find(openWindow => openWindow.sequence === sequence);
+    },
+    isEmpty() {
+      return windows.length <= 0;
+    },
+    isFirstWindowOpen() {
+      return windows.length === 1;
+    },
+    isLastWindowClose() {
+      return windows.length === 0;
+    },
+  };
+})();
+
+const getNextSequence = (() => {
+  let sequence = 0;
+  return () => sequence++;
+})();
+
+const getZIndexFromElement = (element) => {
+  const zIndex = window.getComputedStyle(element).getPropertyValue('z-index');
+
+  if (Number.isNaN(zIndex)) return 700; // window 초기 z-index 값
+
+  return parseInt(zIndex);
+};
+
+const useEscKeydownEvent = ({ closeWin, windowRef }) => {
+  const { props } = getCurrentInstance();
+
+  let sequence = null;
+
+  const addOpenWindow = () => {
+    sequence = getNextSequence();
+
+    openWindows.add({
+      sequence,
+      closeWin,
+      elem: windowRef.value,
+      escClose: props.escClose,
+    });
+  };
+
+  const removeCloseWindow = (closeWindow) => {
+    openWindows.remove(closeWindow);
+  };
+
+  const keydownEsc = (event) => {
+    if (openWindows.isEmpty()) return;
+
+    const { code } = event;
+    if (code !== 'Escape') return;
+
+    // zIndex 클수록, 최근에 열린 것일수록(sequence 클수록) 앞에 위치
+    const compare = (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 openWindowSorted = Array.prototype.map.call(openWindows.windows, openWindow => ({
+      ...openWindow,
+      zIndex: getZIndexFromElement(openWindow.elem),
+    })).sort(compare);
+
+    const topOpenWindow = openWindowSorted[0];
+
+    // 예시 상황) Nested에서 외부 Window의 escClose는 true이고, 내부 Window의 escClose는 false인 경우,
+    // esc 눌러도 외부 Window는 닫히지 않고, 내부 Window 수동으로 닫힌 후에 닫히도록 하기 위해
+    if (topOpenWindow.escClose === false) return;
+
+    topOpenWindow.closeWin();
+  };
+
+  const addKeydownEvtHandler = () => {
+    if (openWindows.isFirstWindowOpen()) {
+      document.addEventListener('keydown', keydownEsc);
+    }
+  };
+
+  const removeKeydownEvtHandler = () => {
+    if (openWindows.isLastWindowClose()) {
+      document.removeEventListener('keydown', keydownEsc);
+    }
+  };
+
+  onMounted(() => {
+    // visible 초기값이 true
+    if (props.visible === true) {
+      addOpenWindow();
+      addKeydownEvtHandler();
+    }
+  });
+
+  watch(
+    () => props.visible,
+    (newVal) => {
+      nextTick(() => {
+        if (newVal === true) {
+          addOpenWindow();
+          addKeydownEvtHandler();
+        } else {
+          const closeWindow = openWindows.getWindowBySequence(sequence);
+          removeCloseWindow(closeWindow);
+          removeKeydownEvtHandler();
+        }
+      });
+    },
+  );
+};
+
 export {
   useModel,
   useMouseEvent,
+  useEscKeydownEvent,
 };