Bookmarkable hash pages
Being able to bookmark something like a hash URL that contains a popped up image is not a simple thing to implement.
In Active CSS, all that is needed once you have set up all your underlying page, is to add a further declaration into a @pages declaration to make your hashed page bookmarkable and able to respond to all the browser navigation events as expected.
The hash doesn't have to open up a modal window - it can do whatever you want - but a common use case is for a popped up image, so this is the example that is used here.
You don't even need to convert your whole site into an SPA for this to work. You just need to have your underlying page already set up in @pages.
See the other documentation or the tutorial on how to do that.
This method will work on both types of SPA that Active CSS supports, regular ajax websites and offline interactive websites.
- User clicks on a link that contains a hash in the URL.
- The underlying page is drawn, per the previous documentation method.
- The event then runs that opens up your modal, and that event is retrieved from @pages. If you want it can be in an embedded ACSS tag stored in the underlying page if you happen to have more than one hash with the same name. Example of a hash event:
That's about all there is to it. The rest of the code that you need is more directly related to event interactions and not to this bookmarkable/SPA aspect.
Let's say you had an image that opened up a modal, like this one from the full example below:
<img id="imgHorse" data-hash="horse" src="/images/horse_tn.jpg" data-pop-img="/images/horse.jpg" alt="horse">
Now that doesn't do anything by itself - it's from the full example at the bottom of the page and there are events set up to open up a modal window and display the image (see the full example at the bottom of the page). Those events are not really anything to do with the SPA aspect of what is being talked about here.
This next bit is the important bit. To make the popped up image bookmarkable, you need to add the event into @pages that will open up the modal window.
Internally, the underlying page is drawn and then any associated "hash events" are run.
That's all you have to do to make the page bookmarkable and responsive to browser navigation. I'll do a full tutorial on this at some point, but basically if you already have an SPA written in Active CSS, you only need to add the @pages declaration for the hash event to make your hash URLs bookmarkable.
Here is the full example (try it out by using the browser arrows and hitting refresh):