Browser back functionality

[rcsas]

I'm always frustrated when I hit the browser back button (or back gesture on mobile), and pigallery2 takes me back to the last page I visited.

For example, I select an album from the main gallery page, then open picture 10, and move forward to picture 15, one by one. If I go back using the browser button or gesture, it takes me to the previous images I've seen. So in reverse sequence it whould go to image 14, 13, 12 11, 10, then the album page and then the gallery main page.

What I'd like it to do is to navigate upwards in the hierarchy and not back.

If viewing a picture, I'd like it to close the picture viewer and show me the album I was browsing, at the picture position. If browsing an album, I'd like it to take me back to the list of albuns (or the search results), ideally scrolling to the position where the album is and not showing the top of the albuns page.

I've seen some sites behaving like this. I think that essentially, when opening the image, the URL won't change, but the image is opened in an internal container in the page.

Don't know it there are other ways to manipulate the browser back functionality

[bpatrik]

hi,

a while ago a spent a lot of time on this (maybe I even did a write up) unfortunately I could not find any working solution to fix this.

On Mon, Jan 22, 2024 at 5:32 PM rcsas @.***> wrote:

I'm always frustrated when I hit the browser back button (or back gesture on mobile), and pigallery2 takes me back to the last page I visited.

For example, I select an album from the main gallery page, then open picture 10, and move forward to picture 15, one by one. If I go back using the browser button or gesture, it takes me to the previous images I've seen. So in reverse sequence it whould go to image 14, 13, 12 11, 10, then the album page and then the gallery main page.

What I'd like it to do is to navigate upwards in the hierarchy and not back.

If viewing a picture, I'd like it to close the picture viewer and show me the album I was browsing, at the picture position. If browsing an album, I'd like it to take me back to the list of albuns (or the search results), ideally scrolling to the position where the album is and not showing the top of the albuns page.

I've seen some sites behaving like this. I think that essentially, when opening the image, the URL won't change, but the image is opened in an internal container in the page.

Don't know it there are other ways to manipulate the browser back functionality

— Reply to this email directly, view it on GitHub https://github.com/bpatrik/pigallery2/issues/819, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZKA5V3NS6QQBTBY6EWE33YP2IAPAVCNFSM6AAAAABCFQDZJ6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGA4TIMRZGUZTIMI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[EvanVV]

hi, a while ago a spent a lot of time on this (maybe I even did a write up) unfortunately I could not find any working solution to fix this. … On Mon, Jan 22, 2024 at 5:32 PM rcsas @.> wrote: I'm always frustrated when I hit the browser back button (or back gesture on mobile), and pigallery2 takes me back to the last page I visited. For example, I select an album from the main gallery page, then open picture 10, and move forward to picture 15, one by one. If I go back using the browser button or gesture, it takes me to the previous images I've seen. So in reverse sequence it whould go to image 14, 13, 12 11, 10, then the album page and then the gallery main page. What I'd like it to do is to navigate upwards in the hierarchy and not back. If viewing a picture, I'd like it to close the picture viewer and show me the album I was browsing, at the picture position. If browsing an album, I'd like it to take me back to the list of albuns (or the search results), ideally scrolling to the position where the album is and not showing the top of the albuns page. I've seen some sites behaving like this. I think that essentially, when opening the image, the URL won't change, but the image is opened in an internal container in the page. Don't know it there are other ways to manipulate the browser back functionality — Reply to this email directly, view it on GitHub <#819>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZKA5V3NS6QQBTBY6EWE33YP2IAPAVCNFSM6AAAAABCFQDZJ6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGA4TIMRZGUZTIMI . You are receiving this because you are subscribed to this thread.Message ID: @.>

Had the same problem, very much looking forward to this new feature!

[kermite607]

Hi, I found a solution to this issue last year, at the time I hadn't seen any issues for it, I assumed I was the only person annoyed by this and never bothered to formalize my code change into a pull request.

It took me a long time to research but eventually I discovered that angular has a not very well documented optional parameter skipLocationChange that you can pass to navigate calls. https://angular.io/api/router/NavigationBehaviorOptions#skipLocationChange

To support the requested behavior you only need three code changes on two files: (Unfortunately I cant easily give you a diff or line numbers because of other modifications to the code I've made) In grid.gallery.component.ts Function private renderUpToMedia(mediaStringId: string)
From

this.router.navigate([], {queryParams: this.queryService.getParams()});

To:

this.router.navigate([], {
        queryParams: this.queryService.getParams(),
        skipLocationChange: true,
      });

Function photoClicked(media: MediaDTO)

From

this.router.navigate([], {
      queryParams: this.queryService.getParams({media}),
    });

To

this.router.navigate([], {
      queryParams: this.queryService.getParams({media}),
      skipLocationChange: true,
    });

and in src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts

Function private navigateToPhoto(photoIndex: number)

From

.navigate([], {
        queryParams: this.queryService.getParams(
          {media: this.gridPhotoQL.get(photoIndex).gridMedia.media, playing: this.slideShowRunning}
        ),
      })

To

.navigate([], {
        queryParams: this.queryService.getParams(
          {media: this.gridPhotoQL.get(photoIndex).gridMedia.media, playing: this.slideShowRunning}
        ),
        skipLocationChange: true,
      })

I figure you could make this a user setting and pass that variable as the skipLocationChange value, just incase you want to keep functionality backwards compatible.

[bpatrik]

I know its technically possible, but I remember I run into some logical issue. I spent multiple days on this issue when I was updating the UI.

Let me try to reconstruct:

folder structure:

home
     | - vacations
        | - Rome
           | - img1.jpg
           | - img2.jpg
           | - img3.jpg

You navigate (> means clicking on the UI):

1. home > vacations > Rome > vacation
2. home > vacations > Rome > img1.jpg > img2.jpg
3. home > vacations > Rome > img1.jpg (closing img1 with the X) > Rome What should the back button do?

Technical limitations:

• you cannot access browser history, so you need to emulate one in session memory so that is not shared with other tabs, buck back button navigation does not kill it.

• You should be able to copy and paste the url, so it should contain the state of the site. (I assume skip location change would prevent it)

  • changing the URL adds a new entry to the history (probably possible to bypass)

  edit: these are not the best examples. I will try to think for better ones

[kermite607]

In the example provided if you took my code changes suggestions as is, clicking on the image (flows 2 and 3) wouldn't push a new navigation state to the browser navigation stack. Thus,

1. home > vacations > Rome > vacation
2. home > vacations > Rome > img1.jpg > img2.jpg (these two states wouldn't get pushed onto the browser navigation stack.)
3. home > vacations > Rome > img1.jpg (closing img1 with the X) > Rome (at this point were you to hit back it would just take you to vacations because the stack consists of home > vacations > Rome

But it is entirely possible I am misunderstanding your example.

I think the critical part you want is the ability to view an image and copy and paste the URL to share it. Therefore, yes you are correct, that this cannot be solved given those requirements, but I would question if everyone shares in having those same technical requirements.

This is why I believe that if you chose to implement this feature you should provide it as an optional user setting so that those who want image viewing to update browser history can have it, while those who do not can live with the side effects. Ultimately this is your project and you are free to develop it to your use cases.

[bpatrik]

Now I remember, my issue was that I want to represent the image in the URL. That is used by some ppl to share a single image (you can postfix the url after the sharing link text with the image and the given image will auto open).

Just had an other observation:

I was playing around with Facebook and it seems that they managed to properly implement it (not yet sure how tho).

• they have proper url setup
• back button navigates back to the main page from the profile, even if you opened a photo before and closed it
• if you are watching photos, back button navigates to previous image