haptics

android/app/capacitor.build.gradle

@@ -9,7 +9,8 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-dialog')
+    implementation project(':capacitor-haptics')
 
 }
 

android/capacitor.settings.gradle

@@ -1,3 +1,9 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-dialog'
+project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')
+
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')

ios/App/Podfile

@@ -11,7 +11,8 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-
+  pod 'CapacitorDialog', :path => '../../node_modules/@capacitor/dialog'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
 end
 
 target 'App' do

package-lock.json

@@ -11,6 +11,7 @@
         "@capacitor/android": "^5.0.4",
         "@capacitor/core": "^5.0.4",
         "@capacitor/dialog": "^5.0.2",
+        "@capacitor/haptics": "^5.0.2",
         "@capacitor/ios": "^5.0.4",
         "@ckeditor/ckeditor5-autoformat": "^37.1.0",
         "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
@@ -275,6 +276,14 @@
         "@capacitor/core": "^5.0.0"
       }
     },
+    "node_modules/@capacitor/haptics": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.2.tgz",
+      "integrity": "sha512-HGkvL3a8yW26YVR7pfgMpkJrspD0+9sUrBB77SWR/GqQV+m32FTx9ECGlw+sHhwLnv0XtFx4PocIL5SlU1m3Vw==",
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
     "node_modules/@capacitor/ios": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-5.0.4.tgz",
@@ -13357,6 +13366,12 @@
       "integrity": "sha512-9SCknNv2Z9Q3MazjA2a8uZbbmbsGViO0k6OcKgirccXbJoz0uj2x8XiNqOaqLZKeZn0zSD3Lu7J4eJYmLFH+AQ==",
       "requires": {}
     },
+    "@capacitor/haptics": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.2.tgz",
+      "integrity": "sha512-HGkvL3a8yW26YVR7pfgMpkJrspD0+9sUrBB77SWR/GqQV+m32FTx9ECGlw+sHhwLnv0XtFx4PocIL5SlU1m3Vw==",
+      "requires": {}
+    },
     "@capacitor/ios": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-5.0.4.tgz",

package.json

@@ -18,6 +18,7 @@
     "@capacitor/android": "^5.0.4",
     "@capacitor/core": "^5.0.4",
     "@capacitor/dialog": "^5.0.2",
+    "@capacitor/haptics": "^5.0.2",
     "@capacitor/ios": "^5.0.4",
     "@ckeditor/ckeditor5-autoformat": "^37.1.0",
     "@ckeditor/ckeditor5-basic-styles": "^37.1.0",

src/components/Note/NoteEditor.vue

@@ -15,6 +15,7 @@ import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote, addNote } from '@/composables/useNotes'
 import Autocomplete from '@/components/Note/Autocomplete.vue'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
 
 const props = defineProps<{ note: Note }>()
 
@@ -61,12 +62,13 @@ const editorElement = ref<HTMLInputElement | null>(null)
 watch(editorData, () => emit('update', htmlToMd(editorData.value)))
 let editorInstance: any
 
-const handleClick = ({ data }: { data: any }) => {
+const handleClick = async ({ data }: { data: any }) => {
   if (!data.domTarget.hasAttribute('data-contexted-link')) return
   const noteTitle = data.domTarget.textContent as string
   let note: BaseNote | Note | undefined = getNoteByTitle(noteTitle)
   if (!note) note = addNote(noteTitle, '')
   setActiveNote(note.id)
+  await Haptics.impact({ style: ImpactStyle.Light })
 }
 
 const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null)

src/components/Note/NoteToolbar.vue

@@ -2,6 +2,7 @@
 import { Capacitor } from '@capacitor/core'
 import { Dialog } from '@capacitor/dialog'
 import type { ConfirmOptions } from '@capacitor/dialog'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
 
 const props = defineProps<{
   note: Note
@@ -43,6 +44,7 @@ const emit = defineEmits<{
 const openModal = async (open: () => void, modal: ModalOptions) => {
   if (['android', 'ios'].includes(Capacitor.getPlatform())) {
     const { value: confirmed } = await Dialog.confirm(modal.confirmOptions)
+    await Haptics.impact({ style: ImpactStyle.Light });
     if (confirmed) emit('execute', modal.key)
   } else {
     open()