ember-cli-notifications
ember-cli-notifications copied to clipboard
links in notifications doesn't redirect to links' target
Hi,
First of all, thank you for all your work 🙏
We use your library on pix. But we encountered a small bug. It happens when you enable html content, put a link in a notification and click on it. It doesn't redirect to the link's target as you can see in the following gif.

I'm new to ember, it can't figure out why it doesn't work by reading the codebase. Maybe if you put me on track I could do something to fix it and open a pull request.
@frinyvonnick Are you still seeing this in v7.x? Today I tried the mainline version of this instead of https://github.com/mansona/ember-cli-notifications/pull/270 and links seem to work now (not sure if this is also because I'm running 3.28 now)
@jacobq This is still an issue in the latest version (8.0).
Hmm, I suppose a window.open onclick hack isn't going to cut it 😉
<a
onclick="window.open('https://www.example.com/', '_self')"
href="https://www.example.com/too-bad-this-gets-preventDefault'd"
>Awful hack</a>
(Seems like I am always finding myself writing ugly hacks...maybe someday I will graduate to "real software engineering" 🤣)
~~I haven't tested again in my app, but it does appear to be a problem with whatever version is running on the interactive docs site (presumably the latest?).~~ I just checked in my application and confirmed that I am still using / needing to use a work-around.
// work-around for making links open looks something like this
// (I was using `data-href` because the content was rendered in a template, but you wouldn't have to do that)
import { service } from '@ember/service';
import { htmlSafe } from '@ember/template';
import NotificationsService from 'ember-cli-notifications/services/notifications';
export default class TweakedNotificationService extends NotificationsService {
@service notifications;
showLink(notificationMethod, originalHtml) {
const modifiedHtml = originalHtml.replace(/data-href="([^"]*)"/gi, 'data-href="$1" onclick="javascript:openExternal(\'$1\');"')
this.notifications[notificationMethod](htmlSafe(modifiedHtml));
}
}
// elsewhere
@service('tweaked-notification-service ') notifications;
// ...
this.notifications.showLink('info', '<a href="#" data-href="https://www.example.com">Example link</a>');
https://user-images.githubusercontent.com/1633459/170380052-ab8c8710-dbce-4185-8cea-1bdd41a91a70.mov