This was indeed the right hint to a solution. However, the solution turned out to be even easier.
As I wrote, I’m no expert at all in web technologies, and that even implies that I wasn’t aware that window.location isn’t read-only, but can be written as well. Shame on me, and sorry!
This simple fact immediately solves the whole issue, as it brings the selected (language) scene in Hype and the page URL in sync, thus getting rid of all the problems I described.
Here is a new and working version of the demo Hype document:
LanguageSelection.hype.zip (207.9 KB)
The basic concept is that once the language is determined, a #en or #de hash is always appended to the home page URL (i.e. from then on it’s always index.html#en or index.html#de).
The script from above is extended as follows:
function languageSelection(hypeDocument, element, event) {
var hash = window.location.hash;
if(hash == '#en') hypeDocument.showSceneNamed("en");
else if(hash == '#de') hypeDocument.showSceneNamed("de");
else // no known language setting in the URL hash;
// determine language automatically
{
var lang = window.navigator.language.substring(0, 2);
if(lang == "de")
{
hypeDocument.showSceneNamed("de");
window.location = '#de';
}
else
{
hypeDocument.showSceneNamed("en");
window.location = '#en';
}
}
}
The additional first few lines check if a known language hash is already appended to the URL. If so, the corresponding Hype scene is displayed and the script exits. This allows links and manual URL input in the browser’s address field to directly address the desired language of the home page.
All links in the language specific subpages that lead back to the home page must also always use index.html#en or index.html#de and never index.html.
If no known language hash is appended to the URL, the previously already used JavaScript function to determine the user language is executed, the corresponding Hype scene is displayed and the corresponding hash is appended to the URL.
This makes sure that the displayed home page will always be either index.html#en or index.html#de and never index.html alone. Thus, the browser’s Back button will also always work correctly.
However, there’s still one thing missing: An additional function that makes sure the URL stays in sync with the selected language when the user switches the language manually in one of the Hype scenes.
This is this function:
function adjustURL(hypeDocument, element, event) {
if(element.id == 1) window.location = '#en';
else if(element.id == 2) window.location = '#de';
}
It is called when clicking either the Switch to English button (which is assigned a Unique Element ID of 1 in the Identity Inspector) or the Switch to German button (which is assigned a Unique Element ID of 2).
Together, these functions make sure everything is always consistent, without storing any state information locally (which might be legally important if you think of the recent, (at least in the EU) insane cookie laws).
Note: If you download the demo Hype document and test it from within Hype, you can, of course, not actually call the example subpages; empty pages will appear instead and you’ll have to “simulate” clicking the link back to the home page by entering the index.html#en or index.html#de URLs manually.
To fully test this demo, you must export it to a server root directory (if you still have your Apache running on macOS, it could be ~/Sites, called with http ://localhost/~yourUserName). I have added a demo site directory within the archive, with the Hype demo already exported, LanguageSelection.html renamed to index.html, and two demo subpages.
I hope that helps those with a similar problem.
Uli
) about this already. There is no “best architectural approach” (based on the info above) in my opinion. I would just start building and see what problems arise.
