Develop Reference

Custom vanilla JS for translation does not work on Android Chrome

I've been really struggling to use any (literally any!) client-side (e.g. web browser) translation library. Tested several: jquery-i18next, jquery.i18n, localizejs, translate-js. And guess what - none really worked as expected, not a single one would be just a plug-n-play solution. That's why I decided to write a vanilla Javascript code which would work as a simplest alternative. Here's the code:
let locale;
let dict = {
'en': {...},
'fr': {...}
};
function detectNavigatorLocale() {
const languageString = navigator.language || '';
const language = languageString.split(/[_-]/)[0].toLowerCase();
switch (language) {
case 'en':
return 'en';
case 'de':
return 'de';
default:
return 'en';
}
}
// replacement to $(document).ready() in jQuery
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
// helper to get nested value in JSON-like object by dot-path string
function findProp(obj, prop, defval) {
if (typeof defval == 'undefined') defval = null;
prop = prop.split('.');
for (var i = 0; i < prop.length; i++) {
if (typeof obj[prop[i]] == 'undefined')
return defval;
obj = obj[prop[i]];
}
return obj;
}
let switchers = document.querySelectorAll('[data-locale]');
for (let i = 0; i < switchers.length; i++) {
switchers[i].onclick = function () {
let newLocale = switchers[i].getAttribute('data-locale');
locale = newLocale;
translate();
};
}
function translate(newLocale) {
let els = document.querySelectorAll('[data-i18n]');
for (let i = 0; i < els.length; i++) {
let path = els[i].getAttribute('data-i18n');
let translatation = findProp(dict[locale], path, 'undefined');
els[i].innerHTML = translatation;
}
// trigger repainting
window.dispatchEvent(new Event('resize'));
};
docReady(function () {
locale = detectNavigatorLocale();
translate();
});
And to make it work, the only thing to do in HTML is to add attributes to the elements which require translation as <p data-i18n="some.path.in.dictionary">fallback text</p>. To change the language I used <li data-locale="en">EN</li> and similar.
But here's the tricky part: why Desktop browser shows expected results, but several tested mobile browsers refuse to a) emit event on the locale switcher element and b) in some (Brave, Dolphin) even navbar in collapsed state does not unfold. I expect that latter is related to the JS handling in general in the selected browser, but why in Chrome for example the same code does not work?

First of all I replaced the bad practice of setting onclick with the following:
function switchLocale(loc) {
locale = loc;
translate();
}
let switchers = document.querySelectorAll('[data-locale]');
switchers.forEach(
function(switcher) {
switcher.addEventListener("click", function() {
// alert(switcher.id);
switchLocale(switcher.getAttribute('data-locale'));
})
}
)
and tested that it works fine. But the actual problem was that z-index was too low and the image below was overlayered above mobile nav. :)

Needing some visitor-like design pattern

I will give you a sample example of my problem to remove the logical complexity and let you be focus on the important part. Of course, this example will be a bit useless...
I have a tree structure where node are like that
{
path: "...",
childs : []
}
Now, I have to write all the full paths from root to each leaf in an array.
My design is very poor:
function listPaths(node) {
var result = [];
function listForNode(n, parentFullPath) {
var thisPath = parentFullPath + "/" + n.path;
result.push(thisPath);
n.childs.forEach(function (child) {
listForNode(child, thisPath);
});
}
listForNode(node, "");
return result;
}
It could be nice but I can't write the test with Mocha without having an insane 600 line code test file. At this moment, you should be asking why. The reason is the complexity of the real purpose, that's not relevant for my question. My goal is to having something 'mockable' cause I'm used to. (Java dev). But I fail.
Do you have any pattern that I can use to resolve this one? I'm not really good at JS patterns. :/
Visitor? Making an Y Combinator? So many possibility...
Thank you for reading me

You need to remember that functions are first class citizens in javascript.
I see that essentially what you have is something like
function createVisitor(parentsAccumulatorInitialValue, parentsAccumulator){
var visitor = function myVisitor (node) {
var result;
function listForNode(n, parentsAcc) {
var thisPath = parentsAccumulator(parentsAcc, n);
result.push(thisPath);
n.childs && n.childs.forEach(function (child) {
listForNode(child, thisPath);
});
}
result = [];
listForNode(node, parentsAccumulatorInitialValue());
return result;
}
return visitor;
}
var listPaths = createVisitor(
function parentInit () {
return "";
},
function parentAcc (parentFullPath, n) {
return parentFullPath + "/" + n.path;
});
But that's not the only abstraction you could take care of:
function createVisitor2(
totalAccumulatorInitialValue,
totalAccumulator,
parentsAccumulatorInitialValue,
parentsAccumulator){
var visitor = function myVisitor (node) {
var total;
function listForNode(n, parentsAcc) {
var thisPath = parentsAccumulator(parentsAcc, n);
total = totalAccumulator(total, thisPath, n);
n.childs && n.childs.forEach(function (child) {
listForNode(child, thisPath);
});
}
total = totalAccumulatorInitialValue();
listForNode(node, parentsAccumulatorInitialValue());
return total;
}
return visitor;
}
var listPaths2 = createVisitor2(
function totalInit() {
return [];
},
function totalAcc(total, thisPath, n){
total.push(thisPath);
return total;
},
function parentInit () {
return "";
},
function parentAcc (parentFullPath, n) {
return parentFullPath + "/" + n.path;
});
Which might be pretty reasonable, but as you can see, I'm already beginning to have trouble finding appropriate names for these variables. In fact, I'd say the name of our function is bad, as doesn't create anything strictly like a visitor object I know of. However, it does work (BTW, I've slightly modified it to handle nulls as well as empty arrays):
> listPaths( { path:"foo",
childs: [{path:"bar", childs: null}, {path:"bob", childs: null}]})
["/foo", "/foo/bar", "/foo/bob"]
It can be modified even further so that your trees don't strictly even have the same structure... but we're already at 4 parameters, which isn't great. It'd be better if your visitor creator were passed a single extensible object with all the necessary methods or values. For instance, maybe (pseudocode):
function createVisitor3(opts) {
//assume we've defined GetDefaults() somewhere local to createVisitor3
// as well as assume that extend is defined somewhere that copies properties
// into a new object like various previously existing libraries do.
opts = extend({}, GetDefaults(), opts);
var totalAccumulatorInitialValue = opts.totalAccumulatorInitialValue;
var totalAccumulator = opts.totalAccumulator;
var parentsAccumulatorInitialValue = opts.parentsAccumulatorInitialValue;
var parentsAccumulator = opts.parentsAccumulator;
var childrenGetter = opts.childrenGetter;
/// etc.
...
}

Implementing eachChild for a specefic case

I have a few places in my code that are very similar to this snippet:
tag_iter = hold_tags_el.firstChild;
do {
if (tag_iter === null) {
hold_tags_el.appendChild(paragraph_el);
break;
}
if (par_el.innerHTML < tag_iter.innerHTML) {
hold_tags_el.insertBefore(paragraph_el, tag_iter);
break;
}
if (tag_iter === hold_tags_el.lastChild) {
NS.insertAfter(tag_iter, paragraph_el);
break;
}
tag_iter = tag_iter.nextSibling;
} while (tag_iter !== null);
This can be abstracted to:
tag_iter = ref_el.firstChild;
do {
// loop logic
tag_iter = tag_iter.nextSibling;
} while (tag_iter !== null);
In a function form this would look like:
The Call:
eachChild(par_el, function (tag_iter, par_el) {
// loop logic
});
The Definition:
NS.eachChild = function (par_el, func, context) {
var iter_el = par_el.firstChild,
result;
do {
result = func.call(context, iter_el, par_el);
if (result) {
break;
}
iter_el = iter_el.nextSibling;
} while (iter_el !== null);
}
Is there a library that implements this pattern / idiom?
What improvements can be made to eachChild?
Are there any errors in eachChild?
Applying the idiom we have:
Snippet A
NS.eachChild(el, function(tag_iter, par_el){
// first
if (tag_iter === null) {
par_el.appendChild(paragraph_el);
return true;
}
// middle
if (par_el.innerHTML < tag_iter.innerHTML) {
par_el.insertBefore(paragraph_el, tag_iter);
return true;
}
// last
if (tag_iter === hold_tags_el.lastChild) {
par_el.appendChild(paragraph_el);
return true;
}
});

What improvements can be made?
Many. Your snippet with its do-while loop and the many breaks is overly complicated and hard to understand. It can be simplified to
var tag_iter = hold_tags_el.firstChild,
search = par_el.innerHTML;
while (tag_iter !== null && search >= tag_iter.innerHTML)
tag_iter = tag_iter.nextSibling;
hold_tags_el.insertBefore(paragraph_el, tag_iter);
Notice that insertBefore with null as second argument, insertAfter(lastChild) and appendChild do exactly the same thing.
With that simplification, you don't need that eachChild function any more. But maybe a little different one:
NS.findChild = function(parent, condition) {
var child = parent.firstChild;
for (var i=0; child!==null && condition(child, i); i++)
child = child.nextSibling;
return child;
};
// then simply:
var el = NS.findChild(hold_tags_el, function(tag_iter) {
return tag_iter.innerHTML < par_el.innerHTML;
});
hold_tags_el.insertBefore(paragraph_el, el);
Is there a library that implements this pattern / idiom?
I don't know any. But there are many libs with generic iterator methods (some of them with break functionality) that can easily be applied on childNodes collections.
Are there any errors in eachChild?
It calls the callback even when there is no firstChild (with null as argument). That's at least unconventional, if not wrong - not what you would expect from an iteration. If you think to need it, this should better be made a separate case (a separate callback); otherwise it requires an extra condition in the callback. However in the given usecase you do not need it, as that is a search - see the findChild function above - where eachChild is inappropriate.
What improvements can be made to eachChild?
Additionally to parEl maybe a counter argument might be nice - check the signature of the standard forEach Array method.

Can I shrink this code with an array or loop?

Forgive me, I hope this question isn't too obvious, I'm a javascript noob.
I have javascript code that takes numbers from an xml sheet and displays them in td elements on an html page. It works but I think it could be condensed into an array or a loop to be more efficient.
Is there a better way to write this code?
window.onload=function displayPrices()
{
twentyFourK=(x[i].getElementsByTagName("twentyFourK")[0].childNodes[0].nodeValue);
document.getElementById("twentyFourK").innerHTML=toCurrency(twentyFourK);
oneOzGold=(x[i].getElementsByTagName("oneOzGold")[0].childNodes[0].nodeValue);
document.getElementById("oneOzGold").innerHTML=toCurrency(oneOzGold);
fiveOzGold=(x[i].getElementsByTagName("fiveOzGold")[0].childNodes[0].nodeValue);
document.getElementById("fiveOzGold").innerHTML=toCurrency(fiveOzGold);
tenOzGold=(x[i].getElementsByTagName("tenOzGold")[0].childNodes[0].nodeValue);
document.getElementById("tenOzGold").innerHTML=toCurrency(tenOzGold);
oneKiloGold=(x[i].getElementsByTagName("oneKiloGold")[0].childNodes[0].nodeValue);
document.getElementById("oneKiloGold").innerHTML=toCurrency(oneKiloGold);
//etc.
}

Yes, a function could make things much easier for you:
window.onload = function() {
function loadCurrency(name) {
document.getElementById(name).innerHTML = toCurrency(x[i].getElementsByTagName(name)[0].firstChild.nodeValue);
}
loadCurrency('twentyFourK');
loadCurrency('oneOzGold');
loadCurrency('fiveOzGold');
loadCurrency('tenOzGold');
loadCurrency('oneKiloGold');
};
Also, if you have many items to load:
window.onload = function() {
function loadCurrency(name) {
document.getElementById(name).innerHTML = toCurrency(x[i].getElementsByTagName(name)[0].firstChild.nodeValue);
}
var items = ['twentyFourK', 'oneOzGold', 'fiveOzGold', 'tenOzGold', 'oneKiloGold'];
items.forEach(loadCurrency);
};
That requires Array.forEach, which is only available in ECMAScript 5, so here's a fallback:
Array.prototype.forEach = function(action, thisArg) {
for(var i = 0, l = this.length; i < l; i++) {
if(i in this) {
action.call(thisArg, this[i], i, this);
}
}
};

I would place the currency setting into its own method. This will be cleaner visually and will also allow for implementation changes in the future:
window.onload = function displayPrices() {
SetCurrency("twentyFourK");
SetCurrency("oneOzGold");
//etc.
}
function SetCurrency(name) {
var elements = x[i].getElementsByTagName(name);
if ((elements != null) && (elements.length != 0)) {
elements[0].innerHTML = toCurrency(elements[0].childNodes[0].nodeValue);
}
}

You could create a function with a list of element in parameter, and you just have to create a loop going through your list of elements (twentyFourK, oneKiloGold and so on)

Javascript - Remove references to my object from external arrays

I have a problem with dereferencing a Javascript object and setting it to NULL.
Here, I have a Folder implementation that supports recursive subdirectory removal. Please see my comments to understand my dilemma.
function Folder(name, DOM_rows) {
this.name = name;
this.files = [].concat(DOM_rows);
this.subdirs = [];
}
Folder.prototype.AddDir(name, DOM_rows) {
this.subdirs.push(new Folder(name, DOM_rows));
}
Folder.prototype.RemoveDir(folder) {
var stack = [folder];
while(stack.length > 0) {
var cur = stack.pop();
// do a post-order depth-first traversal, so dig to the deepest subdir:
if(cur.subdirs.length > 0) {
while(cur.subdirs.length > 0) { stack.push(cur.subdirs.pop()); }
} else {
// arrived at a leaf-level:
cur.files = null;
// now how do I delete cur from it's parent's subdirs array?
// the only way I know how is to keep a "cur.parentDir" reference,
// then find parent.subdirs[ index of cur ] and slice it out.
// How can I do the JS-equivalent of *cur = NULL?
}
}
}

Note that you don't have as big a problem as you suspect, since all subdirectories but folder in your RemoveDir will be deleted from their parent's subdir by the stack.push(cur.subdirs.pop()); line
To find a subdirectory in a parent, you could make use an object-as-dictionary rather than an array for subdirs:
function Folder(name, DOM_rows, parent) {
this.name = name;
this.parent = parent;
this.files = [].concat(DOM_rows);
this.subdirs = {};
this.subdirCount = 0;
}
Folder.prototype.AddDir = function (name, DOM_rows) {
if (this.subdirs[name]) {
return null;
}
++this.subdirCount;
return this.subdirs[name] = new Folder(name, DOM_rows, this);
}
Given a folder, you can remove the folder from the parent with:
delete folder.parent.subdirs[folder.name];
Here's a preorder version:
Folder.prototype.RemoveDir = function (folder) {
if (this.subdirs[folder.name] === folder) {
var stack = [folder];
while(stack.length > 0) {
var cur = stack.pop();
// pre-order
delete cur.files;
// if there's other processing to be done, now's the time to do it
for (subdir in cur.subdirs) {
stack.push(cur.subdirs[subdir]);
delete cur.subdirs[subdir];
}
// it's unnecessary to set subdir count, since 'cur' has been deleted
//cur.subdirCount = 0;
}
delete this.subdirs[folder.name];
--this.subdirCount;
}
}
And the recursive post-order version:
Folder.prototype.RemoveChildren = function () {
for (subdir in this.subdirs) {
this.RemoveDir(this.subdirs[subdir]);
}
}
Folder.prototype.RemoveDir = function (folder) {
if (this.subdirs[folder.name] === folder) {
folder.RemoveChildren();
folder.files = [];
delete this.subdirs[folder.name];
--this.subdirCount;
}
}
And the iterative post-order version:
Array.prototype.top = function () { return this[this.length-1]; }
Folder.prototype.RemoveDir = function (folder) {
if (this.subdirs[folder.name] === folder) {
var stack = [folder];
while(stack.length > 0) {
var cur = stack.top();
if (cur.subdirCount > 0) {
for (subdir in cur.subdirs) {
stack.push(cur.subdirs[subdir]);
delete cur.subdirs[subdir];
}
cur.subdirCount = 0;
} else {
stack.pop();
delete cur.files;
// other post-order processing
}
}
delete this.subdirs[folder.name];
}
}
Though, unless you need to take additional steps when processing deleted files & folders, a simple:
Folder.prototype.RemoveDir = function (folder) {
if (this.subdirs[folder.name] === folder) {
delete this.subdirs[folder.name];
}
}
should suffice.

Everything is javascript is passed by value, so "*cur=NULL" is not possible. You basically have the following options here
use parentID as you suggested
if your Folder hierarchy has a well-known root, browse from that root to find the parent object
use something like DOM removeChild (which is called on parent), instead of removeNode (which is called on the node itself).

I was trying to do the same thing today.
I've worked around it by storing the object's index as a property of the object itself.
When you add it:
myObj.ID = myArr.push(myObj);
So to remove it you
myArr[myObj.ID] = null;
I guess you solved it by now, but you could do almost the same; and it's simpler than using objects.