fix: fullscreen shortcut (#198)

slidevjs · May 29, 2021 · c2af0b1 · c2af0b1
1 parent 1d6d7b9
commit c2af0b1
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/packages/client/internals/Editor.vue b/packages/client/internals/Editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEventListener, throttledWatch } from '@vueuse/core'
 import { computed, watch, ref, onMounted } from 'vue'
-import { activeElement, showEditor, editorWidth, isInputing } from '../state'
+import { activeElement, showEditor, editorWidth, isInputting } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentRoute, currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
@@ -21,7 +21,7 @@ watch(
   (v) => {
     frontmatter.value = v?.frontmatter || {}
 
-    if (!isInputing.value) {
+    if (!isInputting.value) {
       note.value = (v?.note || '').trim()
       content.value = (v?.content || '').trim()
       dirty.value = false

diff --git a/packages/client/internals/Play.vue b/packages/client/internals/Play.vue
@@ -2,14 +2,14 @@
 import { ref, computed, shallowRef } from 'vue'
 import { showEditor, windowSize, isScreenVertical, slideScale } from '../state'
 import { isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
-import { registerShotcuts } from '../logic/shortcuts'
+import { registerShortcuts } from '../logic/shortcuts'
 import { themeVars } from '../env'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesShow from './SlidesShow.vue'
 
-registerShotcuts()
+registerShortcuts()
 
 const root = ref<HTMLDivElement>()
 function onClick(e: MouseEvent) {

diff --git a/packages/client/internals/Presenter.vue b/packages/client/internals/Presenter.vue
@@ -5,7 +5,7 @@ import { useTimestamp } from '@vueuse/core'
 import { total, currentPage, currentRoute, nextRoute, clicks, useSwipeControls, clicksTotal, hasNext } from '../logic/nav'
 import { showOverview } from '../state'
 import { configs, themeVars } from '../env'
-import { registerShotcuts } from '../logic/shortcuts'
+import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
@@ -15,7 +15,7 @@ import Goto from './Goto.vue'
 import SlidesShow from './SlidesShow.vue'
 import SlideWrapper from './SlideWrapper.vue'
 
-registerShotcuts()
+registerShortcuts()
 
 useHead({
   title: configs.title ? `Presenter - ${configs.title} - Slidev` : 'Presenter - Slidev',

diff --git a/packages/client/logic/shortcuts.ts b/packages/client/logic/shortcuts.ts
@@ -1,10 +1,10 @@
-import { Fn, not, and } from '@vueuse/core'
+import { Fn, not, and, onKeyStroke, KeyFilter } from '@vueuse/core'
 import { watch } from 'vue'
-import { fullscreen, magicKeys, shortcutsEnabled, isInputing, toggleOverview, showGotoDialog, showOverview, isOnFocus } from '../state'
+import { fullscreen, magicKeys, shortcutsEnabled, isInputting, toggleOverview, showGotoDialog, showOverview, isOnFocus } from '../state'
 import { toggleDark } from './dark'
 import { next, nextSlide, prev, prevSlide } from './nav'
 
-const _shortcut = and(not(isInputing), not(isOnFocus), shortcutsEnabled)
+const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
 
 export function shortcut(key: string, fn: Fn, autoRepeat = false) {
   const source = and(magicKeys[key], _shortcut)
@@ -26,7 +26,14 @@ export function shortcut(key: string, fn: Fn, autoRepeat = false) {
   return watch(source, trigger, { flush: 'sync' })
 }
 
-export function registerShotcuts() {
+export function strokeShortcut(key: KeyFilter, fn: Fn) {
+  return onKeyStroke(key, (ev) => {
+    if (!ev.repeat)
+      fn()
+  })
+}
+
+export function registerShortcuts() {
   // global shortcuts
   shortcut('space', next, true)
   shortcut('right', next, true)
@@ -38,7 +45,7 @@ export function registerShotcuts() {
   shortcut('shift_left', () => prevSlide(false), true)
   shortcut('shift_right', nextSlide, true)
   shortcut('d', toggleDark)
-  shortcut('f', () => fullscreen.toggle())
+  strokeShortcut('f', () => fullscreen.toggle())
   shortcut('o', toggleOverview)
   shortcut('escape', () => showOverview.value = false)
   shortcut('g', () => showGotoDialog.value = !showGotoDialog.value)

diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts
@@ -15,7 +15,7 @@ export const isScreenVertical = computed(() => windowSize.height.value - windowS
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
-export const isInputing = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
+export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
 export const currentCamera = useStorage<string>('slidev-camera', 'default')