How to control Tify-related query strings in URL

[arjanski]

Hello there,

is it possible to control wether/when Tify pushes its query data into the URL? The issue is that once Tify is loaded, it pushes its query string into the URL (which is generally nice to have). However, when closing a modal containing the tify div, this query then stays in the URL.

Page without tify query
http://localhost:8000/data/letter/letter_06010

Example with tify query (tify div on display)
http://localhost:8000/data/letter/letter_06010?tify={%22view%22:%22scan%22}

When tify-div is closed, the query stays
http://localhost:8000/data/letter/letter_06010?tify={%22panX%22:0.001,%22panY%22:0.001,%22view%22:%22scan%22,%22zoom%22:747.714}

Is this an error in our setup? Or is it an issue with the plugin itself?

Thank you very much for your help.

---

Vue version: 2.5.15
Vue Router version: 3.0.1
Tify version: 0.20.0

[smuehlh]

Dear @arjanski
I am afraid you would have to add URL manipulation on your side using custom JavaScript. It is not possible for Tify to detect open/close events of the modal it is loaded into.

On a second note, I keep wondering if removal of Tify query string from the URL would be an useful feature altogether. I can, for example, imagine a user re-opening/closing the modal wanting to resume viewing the same image in same zoom level etc. For this work seamlessly, the query params are vital.

I hope this is of any help at all.

[hrvoj3e]

I used this

    tifyUrlClean = () => {
        let url, uri = window.location.href, regex = /([?&])tify=.*?(&|$)/;
        if (uri.match(regex)) {
            url = uri.replace(regex, '$2');
            window.history.replaceState({}, '', url);
        }
    };

[arjanski]

Great stuff @hrvoj3e, thanks ! Where/how did you implement it in your component? I was thinking beforeRouteLeave (Vue Router Navigation Guard), so that the URL gets cleaned before navigating to a different route/component, but that does not seem to work.

[smuehlh]

Closing the Tify-containing modal won't trigger naviagtion guards or lifecycle hooks. Instead, bind the function to modal close (in your website, not in Tify ...).

[polyrainbow]

Maybe Tify could provide a way to toggle query strings in the URL. Tify setting these parameters in my app without asking or way of prevention seems somewhat intrusive to me. Imagine, every plugin I'm using does that. In the worst case, this could even be incompatible with the routing system of the app.

Or even better: Tify fires an event when the user changes zoom or coordinates of the image. The app then can handle this how it wants to.

[hrvoj3e]

@arjanski I used it in a non Vue project. Calling Tify in modal and cleaning after close.
@SebastianZimmer +1 for events

[t11r]

With one of the next releases, TIFY will get an option which allows to disable storing parameters in the URL.

[mw0000]

I've just used this:

tifyUrlClean() { window.location.href = window.location.origin + window.location.pathname }

within destroyed() hook

[t11r]

With the latest release, an option urlQueryKey has been added. The feature is now disabled by default.