ember-cli-notifications icon indicating copy to clipboard operation
ember-cli-notifications copied to clipboard

links in notifications doesn't redirect to links' target

Open frinyvonnick opened this issue 5 years ago • 3 comments

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.

bug-ember-cli-notifications

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 avatar Mar 26 '20 08:03 frinyvonnick

@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 avatar Sep 30 '21 15:09 jacobq

@jacobq This is still an issue in the latest version (8.0).

btecu avatar May 25 '22 22:05 btecu

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

jacobq avatar May 25 '22 22:05 jacobq