Add Keyboard shortcuts

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

package-lock.json

@@ -4796,6 +4796,11 @@
 				"array-find-index": "^1.0.1"
 			}
 		},
+		"custom-event-polyfill": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+			"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+		},
 		"cyclist": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5140,6 +5145,11 @@
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.395.tgz",
 			"integrity": "sha512-kdn2cX6hZXDdz/O2Q8tZscITlsSv1a/7bOq/fQs7QAJ9iaRlnhZPccarNhxZv1tXgmgwCnKp/1lJNYLOG8Dxiw=="
 		},
+		"element-matches": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/element-matches/-/element-matches-0.1.2.tgz",
+			"integrity": "sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ=="
+		},
 		"elliptic": {
 			"version": "6.5.2",
 			"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
@@ -13797,6 +13807,15 @@
 			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
 			"integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
 		},
+		"vue-shortkey": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/vue-shortkey/-/vue-shortkey-3.1.7.tgz",
+			"integrity": "sha512-Wm/vPXXS+4Wl/LoYpD+cZc0J0HIoVlY8Ep0JLIqqswmAya3XUBtsqKbhzEf9sXo+3rZ5p1YsUyZfXas8XD7YjQ==",
+			"requires": {
+				"custom-event-polyfill": "^1.0.7",
+				"element-matches": "^0.1.2"
+			}
+		},
 		"vue-style-loader": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -67,6 +67,7 @@
 		"vue-click-outside": "^1.1.0",
 		"vue-clipboard2": "^0.3.1",
 		"vue-router": "^3.1.6",
+		"vue-shortkey": "^3.1.7",
 		"vuex": "^3.3.0",
 		"vuex-router-sync": "^5.0.0"
 	},

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue

@@ -23,11 +23,13 @@
 <template>
 	<div class="datepicker-button-section">
 		<button
+			v-shortkey="previousShortKeyConf"
 			:aria-label="previousLabel"
 			class="datepicker-button-section__previous button icon icon-leftarrow"
 			:title="previousLabel"
 			type="button"
-			@click="navigateToPreviousTimeRange" />
+			@click="navigateToPreviousTimeRange"
+			@shortkey="navigateToPreviousTimeRange" />
 		<button
 			class="datepicker-button-section__datepicker-label button datepicker-label"
 			@click.stop.prevent="toggleDatepicker"
@@ -43,11 +45,13 @@
 			:open.sync="isDatepickerOpen"
 			@change="navigateToDate" />
 		<button
+			v-shortkey="nextShortKeyConf"
 			:aria-label="nextLabel"
 			class="datepicker-button-section__next button icon icon-rightarrow"
 			:title="nextLabel"
 			type="button"
-			@click="navigateToNextTimeRange" />
+			@click="navigateToNextTimeRange"
+			@shortkey="navigateToNextTimeRange" />
 	</div>
 </template>
 
@@ -81,6 +85,12 @@ export default {
 		selectedDate() {
 			return getDateFromFirstdayParam(this.$route.params.firstDay)
 		},
+		previousShortKeyConf() {
+			return {
+				previous_p: ['p'],
+				previous_k: ['k'],
+			}
+		},
 		previousLabel() {
 			switch (this.view) {
 			case 'timeGridDay':
@@ -94,6 +104,12 @@ export default {
 				return this.$t('calendar', 'Previous month')
 			}
 		},
+		nextShortKeyConf() {
+			return {
+				next_j: ['j'],
+				next_n: ['n'],
+			}
+		},
 		nextLabel() {
 			switch (this.view) {
 			case 'timeGridDay':

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue

@@ -21,7 +21,11 @@
   -->
 
 <template>
-	<button class="button primary new-event" @click="newEvent">
+	<button
+		v-shortkey="['c']"
+		class="button primary new-event"
+		@click="newEvent"
+		@shortkey="newEvent">
 		{{ $t('calendar', '+ New event') }}
 	</button>
 </template>

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue

@@ -22,10 +22,12 @@
 
 <template>
 	<button
+		v-shortkey="['t']"
 		:aria-label="title"
 		class="button today"
 		:title="title"
-		@click="today()">
+		@shortkey="today"
+		@click="today">
 		{{ $t('calendar', 'Today') }}
 	</button>
 </template>

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderViewMenu.vue

@@ -20,7 +20,11 @@
   -->
 
 <template>
-	<Actions :default-icon="defaultIcon" menu-align="right">
+	<Actions
+		v-shortkey="shortKeyConf"
+		:default-icon="defaultIcon"
+		menu-align="right"
+		@shortkey.native="selectViewFromShortcut">
 		<ActionButton
 			v-for="view in views"
 			:key="view.id"
@@ -57,6 +61,16 @@ export default {
 				label: this.$t('calendar', 'Month'),
 			}]
 		},
+		shortKeyConf() {
+			return {
+				timeGridDay: ['d'],
+				timeGridDay_Num: [1],
+				timeGridWeek: ['w'],
+				timeGridWeek_Num: [2],
+				dayGridMonth: ['m'],
+				dayGridMonth_Num: [3],
+			}
+		},
 		defaultIcon() {
 			for (const view of this.views) {
 				if (view.id === this.$route.params.view) {
@@ -81,6 +95,9 @@ export default {
 
 			this.$router.push({ name, params })
 		},
+		selectViewFromShortcut(event) {
+			this.selectView(event.srcKey.split('_')[0])
+		},
 	},
 }
 </script>

src/main.js

@@ -34,12 +34,14 @@ import { translate, translatePlural } from '@nextcloud/l10n'
 import ClickOutside from 'vue-click-outside'
 import VueClipboard from 'vue-clipboard2'
 import VTooltip from 'v-tooltip'
+import VueShortKey from 'vue-shortkey'
 import windowTitleService from './services/windowTitleService.js'
 
 // register global components
 Vue.directive('ClickOutside', ClickOutside)
 Vue.use(VTooltip)
 Vue.use(VueClipboard)
+Vue.use(VueShortKey)
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line