emit('history:stateChange') not working with client-side routing in Safari

[ruby-hill]

Hello!
Firstly thanks for writing such a neat colour picker library!

My application uses client-side routing and I've encountered the dreaded black wheel when using Safari browsers. This only occurs when the URL has additional hash parameters, for example, 'www.mydomain.com/' displays fine. Whilst 'www.mydomain.com/#somehash' produces a functional but black wheel the same as in the closed issue 18.

I create a new instance of the colour picker after the hash navigation and then use call emit('history:stateChange') to update the SVG gradient URLs. The hash navigation doesn't change whilst the colour picker is in use. Code below.

`var colourPicker = new iro.ColorPicker('#colour-picker', {
width: 300,
height: 300,
color: "#f00",
});

colourPicker.emit('history:stateChange');`

I've stepped through the .emit function and I can see the SVG URLs being updated but the dreaded black wheel doesn't update. Can you help me pinpoint whats going on?

[jaames]

Hey! Thank you very much! Sorry that you've been having problems with it.

That's actually a really silly mistake on my behalf -- as noted in #18, Safari requires SVG gradient URLs to include the full page path when certain client-side routing libraries are used. My solution was to prepend location.href to these URLs, but that also includes the url hash and other unwanted parameters... so the gradient URLs would be invalid in this case.

Here's the part where location.href is used, I think it might be more correct to use some combination of location.hostname and location.path here? I'll do some extra research to make sure that's right, but it should be a really simple fix!

@recklessruby91 I'll make a new branch to work on this fix later this evening. Would you be okay to test it before I push it into the main branch? Of course, if you want to submit a Pull Request that's totally welcome too :)

[ruby-hill]

Thanks for the speedy response!

That makes sense! I was seeing the url hash being passed to the SVG gradient URL when I was stepping through.

I'm more than happy to test it before you push it to the main branch. Let me know when it's ready!

[jaames]

In the end I went with location.protocol + "//" + location.host + location.pathname as a replacement for location.href. I think this should fix it, so please try dist/iro.js from this branch if you can!

[ruby-hill]

Works like a charm! I've tested with Safari on Mac and also on Safari iOS.

Thank you sooo much for sorting this!!

[jaames]

No problem! Thanks for flagging the problem and helping to test the fix!

I'll go ahead and push it into the main branch now. :>

[jaames]

Tiny update on this: with the latest version of the library (version 4.0.0), colorPicker.emit('history:stateChange') has now been deprecated for the more catch-all colorPicker.forceUpdate() method. Cheers!