Language variant UI (fixes #82)

Author: sushain97

assets/css/translation.css

@@ -6,6 +6,16 @@ html[dir='rtl'] .languageName {
     padding-right: .5em;
 }
 
+html[dir='ltr'] .languageVariant {
+    font-size: 12px;
+    padding-left: 2.5em;
+}
+
+html[dir='rtl'] .languageVariant {
+    font-size: 12px;
+    padding-right: 2.5em;
+}
+
 .languageName {
     position: relative;
 }

assets/js/compat.js

@@ -184,3 +184,30 @@ if (!String.prototype.trim) {
 if (!Date.now) {
     Date.now = function() { return new Date().getTime(); };
 }
+
+// From: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some#Polyfill
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+
+    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
+    for (var i = 0; i < len; i++) {
+      if (i in t && fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}

assets/js/translator.js

@@ -533,6 +533,9 @@ function populateTranslationList() {
     sortTranslationList();
     $('.languageCol').remove();
 
+    function isVariant(lang) {
+        return lang.indexOf('_') !== -1;
+    }
     var minColumnWidth = TRANSLATION_LIST_MAX_WIDTH / TRANSLATION_LIST_MAX_COLUMNS;
 
     // figure out how much space is actually available for the columns
@@ -560,36 +563,52 @@ function populateTranslationList() {
         dstLangsPerCol = Math.ceil(dstLangs.length / numDstCols);
 
     for(var i = 0; i < numSrcCols; i++) {
-        var numSrcLang = Math.ceil(srcLangs.length / numSrcCols) * i;
+        while(isVariant(srcLangs[i * srcLangsPerCol])) {
+            srcLangsPerCol++;
+        }
+    }
+
+    for(i = 0; i < numDstCols; i++) {
+        while(isVariant(dstLangs[i * dstLangsPerCol])) {
+            dstLangsPerCol++;
+        }
+    }
+
+    for(i = 0; i < numSrcCols; i++) {
+        var numSrcLang = srcLangsPerCol * i;
         var srcLangCol = $('<div class="languageCol">').appendTo($('#srcLanguages .row'));
 
-        for(var j = numSrcLang; j < numSrcLang + srcLangsPerCol; j++) {
-            if(numSrcLang < srcLangs.length) {
-                var langCode = srcLangs[j];
-                var langName = getLangByCode(langCode);
-                srcLangCol.append(
-                    $('<div class="languageName"></div>')
-                        .attr('data-code', langCode)
-                        .text(langName)
-                );
+        for(var j = numSrcLang; j < srcLangs.length && j < numSrcLang + srcLangsPerCol; j++) {
+            var langCode = srcLangs[j];
+            var langName = getLangByCode(langCode);
+            var langClasses = 'languageName';
+            if(isVariant(langCode)) {
+                langClasses += ' languageVariant';
             }
+            srcLangCol.append(
+                $('<div class="' + langClasses + '"></div>')
+                    .attr('data-code', langCode)
+                    .text(langName)
+            );
         }
     }
 
     for(i = 0; i < numDstCols; i++) {
-        var numDstLang = Math.ceil(dstLangs.length / numDstCols) * i;
+        var numDstLang = dstLangsPerCol * i;
         var dstLangCol = $('<div class="languageCol">').appendTo($('#dstLanguages .row'));
 
-        for(j = numDstLang; j < numDstLang + dstLangsPerCol; j++) {
-            if(numDstLang < dstLangs.length) {
-                langCode = dstLangs[j];
-                langName = getLangByCode(langCode);
-                dstLangCol.append(
-                    $('<div class="languageName"></div>')
-                        .attr('data-code', langCode)
-                        .text(langName)
-                );
+        for(j = numDstLang; j < dstLangs.length && j < numDstLang + dstLangsPerCol; j++) {
+            langCode = dstLangs[j];
+            langName = getLangByCode(langCode);
+            langClasses = 'languageName';
+            if(isVariant(langCode)) {
+                langClasses += ' languageVariant';
             }
+            dstLangCol.append(
+                $('<div class="' + langClasses + '"></div>')
+                    .attr('data-code', langCode)
+                    .text(langName)
+            );
         }
     }
 
@@ -600,10 +619,18 @@ function populateTranslationList() {
 
     $('.langSelect option[value!=detect]').remove();
     $.each(srcLangs, function () {
-        $('#srcLangSelect').append($('<option></option>').prop('value', this).text(getLangByCode(this)));
+        $('#srcLangSelect').append(
+            $('<option></option>')
+                .prop('value', this)
+                .html((isVariant(this) ? '&nbsp;&nbsp;&nbsp;&nbsp;' : '') + getLangByCode(this))
+        );
     });
     $.each(dstLangs, function () {
-        $('#dstLangSelect').append($('<option></option>').prop('value', this).text(getLangByCode(this)));
+        $('#dstLangSelect').append(
+            $('<option></option>')
+                .prop('value', this)
+                .html((isVariant(this) ? '&nbsp;&nbsp;&nbsp;&nbsp;' : '') + getLangByCode(this))
+        );
     });
 
     $('#srcLangSelect').val(curSrcLang);
@@ -623,7 +650,6 @@ function populateTranslationList() {
 
         function compareLangCodes(a, b) {
             var aVariant = a.split('_'), bVariant = b.split('_');
-
             var directCompare;
             try {
                 directCompare = getLangByCode(aVariant[0]).localeCompare(getLangByCode(bVariant[0]), sortLocale);
@@ -635,10 +661,10 @@ function populateTranslationList() {
             if(aVariant[1] && bVariant[1] && aVariant[0] === bVariant[0]) {
                 return directCompare;
             }
-            else if(aVariant && a.startsWith(b)) {
+            else if(aVariant[1] && aVariant[0] === b) {
                 return 1;
             }
-            else if(bVariant && b.startsWith(a)) {
+            else if(bVariant[1] && bVariant[0] === a) {
                 return -1;
             }
             else {
@@ -648,9 +674,20 @@ function populateTranslationList() {
 
         srcLangs = srcLangs.sort(compareLangCodes);
         dstLangs = dstLangs.sort(function (a, b) {
-            var aPossible = pairs[curSrcLang] && pairs[curSrcLang].indexOf(a) !== -1;
-            var bPossible = pairs[curSrcLang] && pairs[curSrcLang].indexOf(b) !== -1;
+            var possibleDstLangs = pairs[curSrcLang];
+            function isPossible(lang) {
+                var parentLanguage = lang.split('_')[0];
+
+                return possibleDstLangs && (
+                    possibleDstLangs.indexOf(lang) !== -1 ||
+                    possibleDstLangs.indexOf(parentLanguage) !== -1 ||
+                    possibleDstLangs.some(function (possibleLang) {
+                        return possibleLang.startsWith(parentLanguage);
+                    })
+                );
+            }
 
+            var aPossible = isPossible(a), bPossible = isPossible(b);
             if(aPossible === bPossible) {
                 return compareLangCodes(a, b);
             }