multilang using data-trans attribute

multilang-trans.js

var Lang = {
    name: undefined,
    availables: ['fr', 'en', 'de'],

    detect: function(){
        var languages = window.navigator.languages, preferredLanguage;

        if( languages ){
            languages = languages.map(function(language){
                var lang;

                if( language.indexOf('-') > -1 ){
                    lang = language.split('-')[0];
                }
                else if (language.indexOf('_') > -1 ){
                    lang = language.split('-')[0];
                }
                else{
                    lang = language;
                }

                return lang;
            });

            preferredLanguage = languages.find(function(language){
                return this.availables.indexOf(language) > -1;
            }, this);
        }

        if( !preferredLanguage ){
            preferredLanguage = this.availables[0];
        }

        return preferredLanguage;
    },

    queryLinkLang: function(name){
        return document.querySelector('.select-lang ul li a[lang=' + name + ']');
    },

    queryElementLangAll: function(name){
        return document.querySelectorAll('*[lang=' + name + ']');
    },

    queryElementNotLangAll: function(name){
        return document.querySelectorAll('*not([lang=' + name + '])');
    },

    update: function(oldName, name){
        document.querySelector('.select-lang>a>img').setAttribute(
            'src',
            this.queryLinkLang(name).querySelector('img').src
        );
        document.querySelector('.select-lang>a>.lang-name').innerHTML = this.queryLinkLang(name).querySelector('span').innerHTML;
        document.documentElement.setAttribute('lang', name);

        Array.prototype.forEach.call(
            document.querySelectorAll('*[lang]'),
            function(element){
                if( element.getAttribute('lang') != name && false === element.hasAttribute('hreflang') ){
                    element.style.display = 'none';
                }
                else{
                    element.style.display = '';
                }
            },
            this
        );
    },

    set: function(name){
        if( name != this.name ){
            this.update(this.name, name);
            this.name = name;
        }
    },

    setup: function(name){
        Array.prototype.forEach.call(document.querySelectorAll('.select-lang ul a'), function(link){
            link.addEventListener('click', function(e){
                e.preventDefault();
                Lang.set(link.getAttribute('lang'));
            });
        });

        this.queryLinkLang(name).click();
    }
};

var languages = ['fr', 'en', 'de'];

Promise.all(
    languages.map(function(lang){
        return window.fetch('./lang/' + lang + '.json').then(JSON.parse);
    })
).then(function(texts){
    return texts.map(function(texts, index){
        return {
            name: languages[index],
            texts: texts
        };
    });
}).then(function(languages){
    Array.prototype.forEach.call(document.querySelectorAll('*[data-trans]'), function(element){
        var key = element.getAttribute('data-trans');
        var translations = languages/*.filter(function(language){
            return key in language.texts;
        })*/.map(function(language){
            return {
                lang: language.name,
                text: key in language.texts ? language.texts[key] : '{undefined "' + key + '" in ' + language.name + '}'
            };
        }).forEach(function(translation){
            var span = '<span lang="{lang}">{text}</span>'.render(translation).toElement();
            element.appendChild(span);
        });
    });

    Lang.setup(Lang.detect());
});