Files
remanso/src/hooks/useLinks.hook.ts

75 lines
1.6 KiB
TypeScript

import { noteEventBus } from '@/bus/noteEventBus'
import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
import { onUnmounted } from '@vue/runtime-core'
const LINKS = ['http://', 'https://']
export const useLinks = (className: string, sha?: string) => {
const store = useUserRepoStore()
const linkNote: EventListener = (event) => {
event.preventDefault()
const target = event.target as HTMLElement
const href = target.getAttribute('href')
console.log(target, href)
if (!href) {
return
}
if (LINKS.some((link) => href.startsWith(link))) {
window.open(href, '_blank')
return
}
noteEventBus.emit({
path: href,
currentNoteSHA: sha,
user: store.user,
repo: store.repo
})
}
const selector = `.${className} a`
const removeListeners = () => {
const elements = document.querySelectorAll(selector)
elements.forEach((element) => {
element.removeEventListener('click', linkNote)
})
}
const listenToClick = () => {
removeListeners()
const elements = document.querySelectorAll(selector)
elements.forEach((element) => {
const href = element.getAttribute('href')
if (!href) {
return
}
const isExternalLink = LINKS.some((link) => href.startsWith(link))
if (isExternalLink) {
element.classList.add('external-link')
}
})
elements.forEach((element) => {
element.addEventListener('click', linkNote)
})
}
onUnmounted(() => {
removeListeners()
})
return {
listenToClick
}
}