Hey, it works for Upworthy, right?
Yesterday in a weak moment Dhananjay Garg asked me on Twitter to help him with a coding issue and I had some time to do that. Here’s a quick write-up of what I created and why.
Dhananjay had posted his problem on StackOverflow and promptly got an answer that wasn’t really solving or explaining the issue, but at least linked to W3Schools to make matters worse (no, I am not bitter about the success of either resource).
The problem was solved, yes (assignment instead of comparison – = instead of === ) but the code was still far from efficient or easily maintainable which was something he asked about.
The thing Dhananjay wanted to achieve was to have a language selector for a web site that would redirect to documents in different languages and store the currently selected one in localStorage to redirect automatically on subsequent visits. The example posted has lots and lots of repetition in it:
function english()
{
if(typeof(Storage)!=="undefined")
{
localStorage.clear();
localStorage.language="English";
window.location.reload();
}
}
function french()
{
if(typeof(Storage)!=="undefined")
{
localStorage.clear();
localStorage.language="French";
window.location.href = "french.html";
}
}
window.onload = function() {
if (localStorage.language === "Language")
{
window.location.href = "language.html";
}
else if (localStorage.language === "English")
{
window.location.href = "eng.html";
}
else if (localStorage.language === "French")
{
window.location.href = "french.html";
}
else if (localStorage.language === "Spanish")
{
window.location.href = "spanish.html";
}
|
This would be done for 12 languages, meaning you’ll have 12 functions all doing the same with different values assigned to the same property. That’s the first issue here, we have parameters on functions to avoid this. Instead of having a function for each language, you write a generic one:
function setLanguage(language, url) {
localStorage.clear();
localStorage.language = language;
window.location.href = url;
}
}
|
Then you could call for example setLanguage(‘French’, ‘french.html’) to set the language to French and do a redirect. However, it seems dangerous to clear the whole of localStorage every time when you simply redefine one of its properties.
The onload handler reading from localStorage and redirecting accordingly is again riddled with repetition. The main issue I see here is that both the language values and the URLs to redirect to are hard-coded and a repetition of what has been defined in the functions setting the respective languages. This would make it easy to make a mistake as you repeat values.
A proposed solution
Assuming we really want to do this in JavaScript (I’d probably do a .htaccess re-write on a GET parameter and use a cookie) here’s the solution I came up with.
First of all, text links to set a language seem odd as a choice and do take up a lot of space. This is why I decided to go with a select box instead. As our functionality is dependent on JavaScript to work, I do not create any static HTML at all but just use a placeholder form in the document to add our language selector to:
<form id="languageselect"></form>
|
Instead of repeating the same information in the part of setting the language and reading out which one has been set onload, I store the information in one singular object:
var locales = {
'us': {label: 'English',location:'english.html'},
'de': {label: 'German',location: 'german.html'},
'fr': {label: 'Français',location: 'french.html'},
'nl': {label: 'Nederlands',location: 'dutch.html'}
};
|
I also create locale strings instead of using the name of the language as the condition. This makes it much easier to later on change the label of the language.
This is generally always a good plan. If you find yourself doing lots of “if – else if” in your code use an object instead. That way to get to the information all you need to do is test if the property exists in your object. In this case:
if (locales['de']) { // or locales.de - the bracket allows for spaces
console.log(locales.de.label) // -> "German"
}
|
The rest is then all about using that data to populate the select box options and to create an accessible form. I explained in the comments what is going on:
// let's not leave globals
(function(){
// when the browser knows about local storage…
if ('localStorage' in window) {
// Define a single object to hold all the locale
// information - notice that it is a good idea
// to go for a language code as the key instead of
// the text that is displayed to allow for spaces
// and all kind of special characters
var locales = {
'us': {label: 'English',location:'english.html'},
'de': {label: 'German',location: 'german.html'},
'fr': {label: 'Français',location: 'french.html'},
'nl': {label: 'Nederlands',location: 'dutch.html'}
};
// get the current locale. If nothing is stored in
// localStorage, preset it to 'en'
var currentlocale = window.localStorage.locale || 'en';
// Grab the form element
var selectorContainer = document.querySelector('#languageselect');
// Add a label for the select box - this is important
// for accessibility
selectorContainer.innerHTML = '<label for="languageselectdd">'+
'Select Language</label>';
// Create a select box
var selector = document.createElement('select');
selector.name = 'language';
selector.id = 'languageselectdd';
var html = '';
// Loop over all the locales and put the right data into
// the options. If the locale matches the current one,
// add a selected attribute to the option
for (var i in locales) {
var selected = (i === currentlocale) ? 'selected' : '';
html += '<option value="'+i+'" '+selected+'>'+
locales[i].label+'</option>';
}
// Set the options of the select box and add it to the
// form
selector.innerHTML = html;
selectorContainer.appendChild(selector);
// Finish the form HTML with a submit button
selectorContainer.innerHTML += '<input type="submit" value="go">';
// When the form gets submitted…
selectorContainer.addEventListener('submit', function(ev) {
// grab the currently selected option's value
var currentlocale = this.querySelector('select').value;
// Store it in local storage as 'locale'
window.localStorage.locale = currentlocale;
// …and redirect to the document defined in the locale object
alert('Redirect to: '+locales[currentlocale].location);
//window.location = locales[currentlocale].location;
// don't send the form
ev.preventDefault();
}, false);
}
})();
|
Surely there are different ways to achieve the same, but the important part here is that an object is a great way to store information like this and simplify the whole process. If you want to add a language now, all you need to do is to modify the locales object. Everything is maintained in one place.
View full post on Christian Heilmann
VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
