What's nice about Hype is that you don't have to wait for the next major version to add advanced features. The “Multilingual” template was created before Hype 4. Even though we're now waiting for Hype 5, this free template is still quite relevant. Although, I did update the code a bit, as I've gotten better at JavaScript since May 9, 2017.
Basically, wouldn't it be nice to add multiple languages to a Hype project? This is not a native feature of Hype, but this tutorial shows how to add it. While the template appears to be extremely technical, as it uses multidimensional arrays, the core technique is straightforward — get the browser language, then change elements based on that language.
Hopefully this extremely detailed video helps you to add multiple languages to your Hype project, as while English is the most spoken language in the world, it's not the only language in the world.
Although I have used arrays like this in the past and still do at times.
They can become hard to manage and keep in line. As well as read.
I would use Associated Arrays. key value pairing.
They normally are easier to manage and read.
And you do not need to track down and index ( in most cases) . You can use the key to get the exact value.
// Get and display the Browser Language
var nl = navigator.language;
hypeDocument.getElementById("Language").innerHTML = "Browser Language: " + nl;
var data = {
"en-US": {
"Country": "United States",
"Welcome": "Hey there!",
"Message": "This is an example of using multiple languages in Hype.",
"Emoji": "👱🏻",
"Animal": "🐻"
},
"en-GB": {
"Country": "Great Britain",
"Welcome": "Hello",
"Message": "This posh Hype template is ready for your perusal",
"Emoji": "💂🏻",
"Animal": "🦁"
},
"en-AU": {
"Country": "Australia",
"Welcome": "G’day mate!",
"Message": "I reckon this template could help some poor blokes learn JavaScript.",
"Emoji": "🕵🏻",
"Animal": "🐨"
}
}
/*If Function was run by scene loading
"en-US" is the default language
*/
var countryDefault = "en-US"
// Check if a flag was selected or the language has been set already
if (element.classList.contains("flag-button")) {
// Save the preferred Navigator Language column ID number.
countryDefault = element.id;
localStorage.countryDefault = countryDefault;
} else if (localStorage.hasOwnProperty('countryDefault')) {
// Use the Local Storage
countryDefault = localStorage.countryDefault;
} else if (data.hasOwnProperty(nl)) {
// Function called by Scene load - Use the Local Language if the Data object has it.
countryDefault = nl;
}
// Function for setting innerHTML of all language related elements
function inny() {
var obj =data[countryDefault]
for (const key in obj ) {
hypeDocument.getElementById(key).innerHTML = obj[key];
};
}
inny();
I can see the advantages of that method. The idea here is that you edit your data in a spreadsheet. Then once it's converted to be more JavaScript friendly, it's not edited.
I don't prefer name–value pairing here because it's a lot of text redundancy. It might be easier to read if you're looking at an individual language, but overall that's a lot more text and a lot more scrolling.
Hype is favored by advertisers, where file size matters. That's a lot of extra and unnecessary words. It might not matter with 3 languages and 5 elements, but with 20 languages and 100 elements, then it could make a big difference.
(Although, I suppose the advertisers could make separate targeted banners for each language.)
However, this template was first created in 2017, back when Internet Explorer support was still common. And while much of the world has moved on from Internet Explorer, it's not clear if Hype has moved on. So, I've been avoiding things like "forEach", as it doesn't have the greater compatibility… "forEach" | Can I use... Support tables for HTML5, CSS3, etc
I actually wrote a language changer that used spread sheet exports and then it edited the raw hype plist to update all the elements. ( for an advertiser )
It was used by someone on the forum, not sure if they still use it.
Don't know how many people would want to rewrite spreads sheets to JS friendly text manually.
But is is done and Arrays makes sense then if you are doing that.
When you say a lot more word I assume you mean the repeat keys, granted but the use of key pairs. is normal and should be expected i.e json.
forEach was just the first iterator I stared typing.
Seems compatible enough!.
The are a few others that I could have easily used a straight for loop ( should have, much simpler )
var obj =data[countryDefault]
for (const key in obj ) {
hypeDocument.getElementById(key).innerHTML = obj[key];
}
Changed in the above code now.
Any way this was not me poo, pooing any thing. Just when I looked at it I could not understand why you used the Arrays for the reason I mention. But understand now.
That's where I mention… Mr Data Converter …and you can change the options. It doesn't have to be “Row Arrays”, but then the code needs to be changed accordingly.
