spotlight icon indicating copy to clipboard operation
spotlight copied to clipboard

Unable to change hash upon close

Open sayontan opened this issue 3 years ago • 0 comments

Hello, Firstly, I would like to thank you for an exceptional lightbox! I am the author of a WordPress plugin that lets you use a variety of lightbox scripts with custom galleries, and I have found Spotlight to be the best lightbox, hands-down! It offers more features than lightboxes that are 5 times heavier than it, and it looks fantastic too.

Now, to the problem I am facing.

As a part of my script, I have a custom hash functionality. I generate a hash based on which photo is being clicked or navigated to, and I change the browser's location.hash using this.

In case of Spotlight, I have the hash tied to the onchange event. This works well: I am able to see a hash come up when I click on a thumbnail, and as I navigate, I can see the hash being modified. However, the problem occurs when I try to close the lightbox. I have code in the onclose event, which sets location.hash to an empty string, but for some reason, this is not shown in the browser. I tried printing the value in my code after I am blanking out the hash, and that prints the correct value, but in the browser's address bar, I am still seeing the hash. I am not sure if the fix you put in for #17 somehow is conflicting with this.

I also see some code in your close function that says history.go(hashchange === true ? -1 : -2). This might be causing the conflict too, though I am not sure.

For reference, this is the type of code that I have:

			spotlight.show(gallery, {
				index: index + 1,
				infinite: true,
				autoslide: true,
				play: 5,
				download: true,
				autohide: true,
				onchange: (idx, options) => {
					const current = gallery[idx - 1]; // idx is 1-based, not 0-based
					const title = document.querySelector("#spotlight .spl-title");
					title.innerHTML = current.title;
					self.setHash(current.deep); // "setHash" is a custom function, "self" is assigned before this code block, and "deep" has the deep-link / hash.
				},
				onclose: (idx) => {
					self.unsetHash(); 
					/* for the above, I have tried:
						history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));
					And:
						window.location.hash = '';
					Neither seems to work */
				}
			});

sayontan avatar Apr 10 '22 17:04 sayontan