feat(iframe-drawer): implement pressing Esc to close && focus on iframe when opened (#1008)

close #1008

src/_locales/cmn-CN.yml

@@ -49,6 +49,7 @@ common:
 iframe_drawer:
   open_in_new_tab: 在新标签页打开
   close: 关闭
+  press_esc_again_to_close: 再次按下 Esc 关闭
 
 settings:
   title: 设置

src/_locales/cmn-TW.yml

@@ -49,6 +49,7 @@ common:
 iframe_drawer:
   open_in_new_tab: 在新索引標籤開啟連結
   close: 關閉
+  press_esc_again_to_close: 再次按下 Esc 關閉
 
 settings:
   title: 設定

src/_locales/en.yml

@@ -49,6 +49,7 @@ common:
 iframe_drawer:
   open_in_new_tab: Open in new tab
   close: Close
+  press_esc_again_to_close: Press Esc again to close
 
 settings:
   title: Settings

src/_locales/jyut.yml

@@ -49,6 +49,7 @@ common:
 iframe_drawer:
   open_in_new_tab: 喺新嘅分頁度打開連結
   close: 關閉
+  press_esc_again_to_close: 撳多次 Esc 關閉
 
 settings:
   title: 設定

src/components/IframeDrawer.vue

@@ -27,6 +27,8 @@ nextTick(() => {
 onMounted(async () => {
   history.pushState(null, '', props.url)
   show.value = true
+  await nextTick()
+  iframeRef.value?.focus()
 })
 
 onBeforeUnmount(() => {
@@ -91,9 +93,25 @@ function handleOpenInNewTab() {
   window.open(props.url, '_blank')
 }
 
-onKeyStroke('Escape', (e: KeyboardEvent) => {
-  e.preventDefault()
-  handleClose()
+const isEscPressed = ref<boolean>(false)
+const escPressedTimer = ref<NodeJS.Timeout | null>(null)
+
+nextTick(() => {
+  onKeyStroke('Escape', (e: KeyboardEvent) => {
+    e.preventDefault()
+    if (isEscPressed.value) {
+      handleClose()
+    }
+    else {
+      isEscPressed.value = true
+      if (escPressedTimer.value) {
+        clearTimeout(escPressedTimer.value)
+      }
+      escPressedTimer.value = setTimeout(() => {
+        isEscPressed.value = false
+      }, 1300)
+    }
+  }, { target: iframeRef.value?.contentWindow })
 })
 
 // const keys = useMagicKeys()
@@ -101,7 +119,6 @@ onKeyStroke('Escape', (e: KeyboardEvent) => {
 
 // watch(() => ctrlAltT, (value) => {
 //   if (value) {
-//     console.log('ctrlAltT', value)
 //     handleOpenInNewTab()
 //   }
 // })
@@ -146,6 +163,7 @@ onKeyStroke('Escape', (e: KeyboardEvent) => {
           </div> -->
         </Button>
         <Button
+          v-if="!isEscPressed"
           style="
             --b-button-color: var(--bew-elevated-solid);
             --b-button-color-hover: var(--bew-elevated-solid-hover);
@@ -157,7 +175,18 @@ onKeyStroke('Escape', (e: KeyboardEvent) => {
             <i i-mingcute:close-line />
           </template>
           {{ $t('iframe_drawer.close') }}
-          <!-- <kbd>Esc</kbd> -->
+          <kbd>Esc</kbd>
+        </Button>
+        <Button
+          v-else
+          type="error"
+          @click="handleClose"
+        >
+          <template #left>
+            <i i-mingcute:close-line />
+          </template>
+          {{ $t('iframe_drawer.press_esc_again_to_close') }}
+          <kbd>Esc</kbd>
         </Button>
       </div>
     </Transition>