Dismiss Notification with TouchSwipe

[kestrep123]

I would like to dismiss the notify with TouchSwipe . Or some other way.
I am currently using PNotify notification. It works on mobile and can swipe notices away to dismiss them.

Does anyone have any ideas how to do this?

[MilosPaunovic]

Take a look at the TouchSwipe directive:
https://quasar.dev/vue-directives/touch-swipe

[kestrep123]

Yes I know about TouchSwipe.
But I do not know how to handle $q.notify with TouchSwipe directive. For my understanding I need somehow to handle the area of notification and track this area with TouchSwipe. Does $q.notify has some handle area?
Do you have any example?
$q.notify({ message: "Error message", color: "negative", icon: "warning" });

[pdanpdan]

Hmm, to be honest I don't think it can be done in any simple way.
I think you should add the touch event listeners on the notifications container (in the application main component mounted hook) and then use delegation to detect if swipe was performed and on which notification. You'll need to get the VM instance from the din element for this, I think (or make a weakMap from Dom element to notify dismiss function)
You can start simply by hiding on click - to avoid complications of swipe, and then improve it

[kestrep123]

Thank you for answer.
I think it is too hard for me to do this without an example.
It would be good what Swipe-Dismiss function would be integrated inside $q.notify plugin out of the box
In general $q.notify plugin is very good and I like it. Just missing Swipe-Dismiss function

[bake09]

Yes. This Funktionality would be great.

@pdanpdan Could make a small example on codepen? how to achieve "dismiss on click"? Then i would go an start on touch-swipe...

Thank you!

[bake09]

I have a working solution.
I've created a boot-file, where i hook into the create method, and select the div '.q-notification'.
Here i implemented native swipe right OR left to "dismiss".

Hope you enjoy ;)

`export default boot(() => {
const originalNotify = Notify.create

Notify.create = function (options) {
const notification = originalNotify(options)

requestAnimationFrame(() => {
  const notifEls = document.querySelectorAll('.q-notification')
  const el = notifEls[notifEls.length - 1]
  if (!el) return

  let startX = 0
  let currentX = 0
  let translateX = 0
  let isDragging = false

  const threshold = 100 // Distanz in px zum Dismiss
  const maxOffset = 500 // Wie weit das Element beim Dismiss fliegt

  const resetStyle = () => {
    el.style.transition = 'all 0.2s ease'
    el.style.transform = 'translateX(0)'
    el.style.opacity = '1'
  }

  const dismiss = (direction) => {
    el.style.transition = 'all 0.2s ease'
    el.style.transform = `translateX(${direction > 0 ? maxOffset : -maxOffset}px)`
    el.style.opacity = '0'
    setTimeout(() => notification(), 150)
  }

  const handleMoveCommon = (deltaX) => {
    if (!isDragging) return
    translateX = deltaX
    el.style.transform = `translateX(${translateX}px)`
    el.style.opacity = `${1 - Math.min(Math.abs(translateX) / 150, 0.8)}`
  }

  const handleEndCommon = () => {
    if (!isDragging) return
    isDragging = false
    if (Math.abs(translateX) > threshold) {
      dismiss(translateX)
    } else {
      resetStyle()
    }
  }

  // --- Touch Events (Mobile)
  el.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX
    isDragging = true
    el.style.transition = 'none'
  }, { passive: true })

  el.addEventListener('touchmove', (e) => {
    handleMoveCommon(e.touches[0].clientX - startX)
  }, { passive: true })

  el.addEventListener('touchend', handleEndCommon, { passive: true })

  // --- Mouse Events (Desktop)
  el.addEventListener('mousedown', (e) => {
    startX = e.clientX
    isDragging = true
    el.style.transition = 'none'
    document.body.style.userSelect = 'none' // verhindert Textauswahl
  })

  window.addEventListener('mousemove', (e) => {
    if (!isDragging) return
    handleMoveCommon(e.clientX - startX)
  })

  window.addEventListener('mouseup', () => {
    if (!isDragging) return
    document.body.style.userSelect = ''
    handleEndCommon()
  })
})

return notification

}
})`

Hope you enjoy ;)