From a8001235fa0b234fdd6cf75f9f67c05137967720 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 19 Aug 2024 17:33:27 +0200 Subject: [PATCH 1/2] chore(docs): add documentation section for composables Signed-off-by: Maksim Sukharev --- docs/composables.md | 27 +++++++++++++++++++++++++++ styleguide.config.cjs | 7 +++++++ 2 files changed, 34 insertions(+) create mode 100644 docs/composables.md diff --git a/docs/composables.md b/docs/composables.md new file mode 100644 index 0000000000..07980cfcdc --- /dev/null +++ b/docs/composables.md @@ -0,0 +1,27 @@ + + +### Registration + +To use any composable, import and use it according to documentation or Vue guidelines, for example: + +```js static +import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js' + +export default { + setup() { + return { + isMobile: useIsMobile(), + } + }, +} +``` +or in ` + + +``` diff --git a/src/composables/index.js b/src/composables/index.js index 4ef76388f5..016a4d0496 100644 --- a/src/composables/index.js +++ b/src/composables/index.js @@ -6,3 +6,4 @@ export * from './useIsFullscreen/index.js' export * from './useIsMobile/index.js' export * from './useFormatDateTime.ts' +export * from './useHotKey/index.js' diff --git a/src/composables/useHotKey/index.js b/src/composables/useHotKey/index.js new file mode 100644 index 0000000000..0f78ee32d3 --- /dev/null +++ b/src/composables/useHotKey/index.js @@ -0,0 +1,81 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import { onKeyStroke } from '@vueuse/core' + +const disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.() + +/** + * Check if event target (active element) is editable (allows input from keyboard) or NcModal is open + * If true, a hot key should not trigger the callback + * TODO discuss if we should abort on another interactive elements (button, a, e.t.c) + * + * @param {KeyboardEvent} event keyboard event + * @return {boolean} whether it should prevent callback + */ +function shouldIgnoreEvent(event) { + if (event.target instanceof HTMLInputElement + || event.target instanceof HTMLTextAreaElement + || event.target instanceof HTMLSelectElement + || event.target?.isContentEditable) { + return true + } + /** Abort if any modal/dialog opened */ + return document.getElementsByClassName('modal-mask').length !== 0 +} + +const eventHandler = (callback, options) => (event) => { + if (!!options.ctrl !== event.ctrlKey) { + // Ctrl is required and not pressed, or the opposite + return + } else if (!!options.alt !== event.altKey) { + // Alt is required and not pressed, or the opposite + return + } else if (!!options.shift !== event.shiftKey) { + // Shift is required and not pressed, or the opposite + return + } else if (shouldIgnoreEvent(event)) { + // Keyboard shortcuts are disabled, because active element assumes input + return + } + + if (options.prevent) { + event.preventDefault() + } + if (options.stop) { + event.stopPropagation() + } + callback(event) +} + +/** + * @param {string} key - keyboard key or keys to listen to + * @param {Function} callback - callback function + * @param {object} options - composable options + * @see docs/composables/usekeystroke.md + */ +export function useHotKey(key, callback = () => {}, options = {}) { + if (disableKeyboardShortcuts) { + // Keyboard shortcuts are disabled + return () => {} + } + + const stopKeyDown = onKeyStroke(key, eventHandler(callback, options), { + eventName: 'keydown', + dedupe: true, + passive: !options.prevent, + }) + + const stopKeyUp = options.push + ? onKeyStroke(key, eventHandler(callback, options), { + eventName: 'keyup', + passive: !options.prevent, + }) + : () => {} + + return () => { + stopKeyDown() + stopKeyUp() + } +} diff --git a/styleguide.config.cjs b/styleguide.config.cjs index e41ce93c0d..0ad025ba93 100644 --- a/styleguide.config.cjs +++ b/styleguide.config.cjs @@ -140,6 +140,10 @@ module.exports = async () => { content: 'docs/composables.md', sectionDepth: 1, sections: [ + { + name: 'useHotKey', + content: 'docs/composables/useHotKey.md', + }, ], }, {