cezarsa/locales.html

## locales.html
<!DOCTYPE html>
<!--
Just drop this file into your extension directory.
-->
<html>
<head>
<title>Locales Data</title>

<script>
var LocaleTable = function() {
  this.locales = {};
  this.tableEl = Util.makeElem('table', {id: "localeTable"});
  document.body.appendChild(this.tableEl);
  this.loadData();
};
LocaleTable.prototype = {
  _caseInsensitiveCompare: function(a, b) {
    return a.toUpperCase().localeCompare(b.toUpperCase());
  },

  prepareLocaleData: function() {
    this.orderedLocaleCodes = [];
    for(var localeCode in this.locales) {
      this.orderedLocaleCodes.push(localeCode);
    }
    this.orderedLocaleCodes.sort(this._caseInsensitiveCompare);

    this.orderedKeywords = [];
    for(var i = 0, len = this.orderedLocaleCodes.length; i < len; ++i) {
      var localeData = this.locales[this.orderedLocaleCodes[i]];
      for(var keyword in localeData) {
        if(Util.inArray(keyword, this.orderedKeywords) == -1) {
          this.orderedKeywords.push(keyword);
        }
      }
    }
    this.orderedKeywords.sort(this._caseInsensitiveCompare);
  },

  drawTable: function() {
    this.prepareLocaleData();
    this.tableEl.innerHTML = "";

    var emptyCount = {};
    for(var i = 0, len = this.orderedKeywords.length; i < len; ++i) {
      var keyword = this.orderedKeywords[i];
      var rowEl = Util.makeElem('tr');
      var titleCellEl = Util.makeElem('th', null, keyword);
      rowEl.appendChild(titleCellEl);
      var isKeywordComplete = true;
      for(var j = 0, len2 = this.orderedLocaleCodes.length; j < len2; ++j) {
        var localeCode = this.orderedLocaleCodes[j];
        var localeData = this.locales[localeCode];
        var message = localeData.hasOwnProperty(keyword) ? localeData[keyword].message : '-';
        var className = '';
        if(message == '-') {
          className = 'empty';
          emptyCount[localeCode] = emptyCount[localeCode] ? emptyCount[localeCode] + 1 : 1;
          isKeywordComplete = false;
        }
        var cellEl = Util.makeElem('td', {'class': className}, message);
        rowEl.appendChild(cellEl);
      }
      var isPropertyInDefault = this.locales[this.defaultLocale] && this.locales[this.defaultLocale].hasOwnProperty(keyword);
      if(!isPropertyInDefault) {
        rowEl.className = 'invalid';
      } else if(!isKeywordComplete) {
        rowEl.className = 'incomplete';
      }
      this.tableEl.appendChild(rowEl);
    }

    var titleRowEl = Util.makeElem('tr');
    titleRowEl.appendChild(Util.makeElem('th'));
    for(var k = 0, len3 = this.orderedLocaleCodes.length; k < len3; ++k) {
      var code = this.orderedLocaleCodes[k];
      var localeCellEl = Util.makeElem('th', null, code);
      if(emptyCount[code]) {
        localeCellEl.appendChild(Util.makeElem('span', {'class': 'empty_count'}, ' (' + emptyCount[code] + ')'));
      }
      titleRowEl.appendChild(localeCellEl);
    }
    this.tableEl.insertBefore(titleRowEl, this.tableEl.childNodes[0]);
  },

  loadData: function() {
    var _this = this;
    this.loadDefaultLocale(function(defaultLocale) {
      _this.defaultLocale = defaultLocale;
      _this.loadLocaleMessages(function(locales) {
        _this.locales = locales;
        _this.drawTable();
      });
    });
  },

  loadDefaultLocale: function(callback) {
    Util.ajax(function(status, data) {
      if(data) {
        data = JSON.parse(data);
        callback(data.default_locale);
      }
    }, 'manifest.json');
  },

  loadLocaleMessages: function(callback) {
    var remainingLocalesMap = {};
    for(var k = 0, codesLen = LocaleTable.availableLocaleCodes.length; k < codesLen; ++k) {
      remainingLocalesMap[LocaleTable.availableLocaleCodes[k]] = true;
    }
    var locales = {};
    var updateLocaleCallback = function(localeCode, data) {
      delete remainingLocalesMap[localeCode];
      if(data) {
        locales[localeCode] = data;
      }
      if(Util.isEmptyObject(remainingLocalesMap)) {
        callback(locales);
      }
    };
    for(var i = 0, len = LocaleTable.availableLocaleCodes.length; i < len; ++i) {
      var localeCode = LocaleTable.availableLocaleCodes[i];
      (function(localeCode) {
        Util.ajax(function(status, data) {
          if(data) {
            data = JSON.parse(data);
          }
          updateLocaleCallback(localeCode, data);
        }, '_locales/' + localeCode + '/messages.json');
      })(localeCode);
    }
  }
};
LocaleTable.availableLocaleCodes = ["am", "ar", "bg", "bn", "ca", "cs", "da", "de", "el", "en", "en_GB", "en_US", "es",
  "es_419", "et", "fi", "fil", "fr", "gu", "he", "hi", "hr", "hu", "id", "it", "ja", "kn", "ko", "lt", "lv",
  "ml", "mr", "nb", "nl", "or", "pl", "pt", "pt_BR", "pt_PT", "ro", "ru", "sk", "sl", "sr", "sv", "sw",
  "ta", "te", "th", "tr", "uk", "vi", "zh", "zh_CN", "zh_TW"];

var Util = {
  ajax: function(callback, url) {
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onreadystatechange = function() {
      if(req.readyState == 4) {
        callback(req.status, req.responseText, req);
      }
    };
    req.send();
  },
  makeElem: function(elem, attrs, content) {
    var el = document.createElement(elem);
    if(attrs) {
      for (var attrName in attrs) {
        el.setAttribute(attrName, attrs[attrName]);
      }
    }
    if(content) {
      el.innerHTML = content;
    }
    return el;
  },
  inArray: function(elem, array) {
    for(var i = 0, len = array.length; i < len; ++i) {
      if(elem == array[i]) {
        return i;
      }
    }
    return -1;
  },
  isEmptyObject: function(obj) {
    for(var p in obj) {
      return false;
    }
    return true;
  }
};
</script>
<style>
#localeTable {
  border-collapse: collapse;
}
#localeTable, #localeTable td, #localeTable th {
  border: 1px solid black;
}
#localeTable td {
  width: 300px;
}
#localeTable td.empty {
  background-color: #fcc;
}
#localeTable tr.invalid td, #localeTable tr.invalid th {
  background-color: #ff0;
}
#localeTable tr.incomplete th {
  color: red;
}
span.empty_count {
  color: red;
}
</style>
</head>
<body>
  <script>
    new LocaleTable();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<!--
	Just drop this file into your extension directory.
	-->
	<html>
	<head>
	<title>Locales Data</title>

	<script>
	var LocaleTable = function() {
	this.locales = {};
	this.tableEl = Util.makeElem('table', {id: "localeTable"});
	document.body.appendChild(this.tableEl);
	this.loadData();
	};
	LocaleTable.prototype = {
	_caseInsensitiveCompare: function(a, b) {
	return a.toUpperCase().localeCompare(b.toUpperCase());
	},

	prepareLocaleData: function() {
	this.orderedLocaleCodes = [];
	for(var localeCode in this.locales) {
	this.orderedLocaleCodes.push(localeCode);
	}
	this.orderedLocaleCodes.sort(this._caseInsensitiveCompare);

	this.orderedKeywords = [];
	for(var i = 0, len = this.orderedLocaleCodes.length; i < len; ++i) {
	var localeData = this.locales[this.orderedLocaleCodes[i]];
	for(var keyword in localeData) {
	if(Util.inArray(keyword, this.orderedKeywords) == -1) {
	this.orderedKeywords.push(keyword);
	}
	}
	}
	this.orderedKeywords.sort(this._caseInsensitiveCompare);
	},

	drawTable: function() {
	this.prepareLocaleData();
	this.tableEl.innerHTML = "";

	var emptyCount = {};
	for(var i = 0, len = this.orderedKeywords.length; i < len; ++i) {
	var keyword = this.orderedKeywords[i];
	var rowEl = Util.makeElem('tr');
	var titleCellEl = Util.makeElem('th', null, keyword);
	rowEl.appendChild(titleCellEl);
	var isKeywordComplete = true;
	for(var j = 0, len2 = this.orderedLocaleCodes.length; j < len2; ++j) {
	var localeCode = this.orderedLocaleCodes[j];
	var localeData = this.locales[localeCode];
	var message = localeData.hasOwnProperty(keyword) ? localeData[keyword].message : '-';
	var className = '';
	if(message == '-') {
	className = 'empty';
	emptyCount[localeCode] = emptyCount[localeCode] ? emptyCount[localeCode] + 1 : 1;
	isKeywordComplete = false;
	}
	var cellEl = Util.makeElem('td', {'class': className}, message);
	rowEl.appendChild(cellEl);
	}
	var isPropertyInDefault = this.locales[this.defaultLocale] && this.locales[this.defaultLocale].hasOwnProperty(keyword);
	if(!isPropertyInDefault) {
	rowEl.className = 'invalid';
	} else if(!isKeywordComplete) {
	rowEl.className = 'incomplete';
	}
	this.tableEl.appendChild(rowEl);
	}

	var titleRowEl = Util.makeElem('tr');
	titleRowEl.appendChild(Util.makeElem('th'));
	for(var k = 0, len3 = this.orderedLocaleCodes.length; k < len3; ++k) {
	var code = this.orderedLocaleCodes[k];
	var localeCellEl = Util.makeElem('th', null, code);
	if(emptyCount[code]) {
	localeCellEl.appendChild(Util.makeElem('span', {'class': 'empty_count'}, ' (' + emptyCount[code] + ')'));
	}
	titleRowEl.appendChild(localeCellEl);
	}
	this.tableEl.insertBefore(titleRowEl, this.tableEl.childNodes[0]);
	},

	loadData: function() {
	var _this = this;
	this.loadDefaultLocale(function(defaultLocale) {
	_this.defaultLocale = defaultLocale;
	_this.loadLocaleMessages(function(locales) {
	_this.locales = locales;
	_this.drawTable();
	});
	});
	},

	loadDefaultLocale: function(callback) {
	Util.ajax(function(status, data) {
	if(data) {
	data = JSON.parse(data);
	callback(data.default_locale);
	}
	}, 'manifest.json');
	},

	loadLocaleMessages: function(callback) {
	var remainingLocalesMap = {};
	for(var k = 0, codesLen = LocaleTable.availableLocaleCodes.length; k < codesLen; ++k) {
	remainingLocalesMap[LocaleTable.availableLocaleCodes[k]] = true;
	}
	var locales = {};
	var updateLocaleCallback = function(localeCode, data) {
	delete remainingLocalesMap[localeCode];
	if(data) {
	locales[localeCode] = data;
	}
	if(Util.isEmptyObject(remainingLocalesMap)) {
	callback(locales);
	}
	};
	for(var i = 0, len = LocaleTable.availableLocaleCodes.length; i < len; ++i) {
	var localeCode = LocaleTable.availableLocaleCodes[i];
	(function(localeCode) {
	Util.ajax(function(status, data) {
	if(data) {
	data = JSON.parse(data);
	}
	updateLocaleCallback(localeCode, data);
	}, '_locales/' + localeCode + '/messages.json');
	})(localeCode);
	}
	}
	};
	LocaleTable.availableLocaleCodes = ["am", "ar", "bg", "bn", "ca", "cs", "da", "de", "el", "en", "en_GB", "en_US", "es",
	"es_419", "et", "fi", "fil", "fr", "gu", "he", "hi", "hr", "hu", "id", "it", "ja", "kn", "ko", "lt", "lv",
	"ml", "mr", "nb", "nl", "or", "pl", "pt", "pt_BR", "pt_PT", "ro", "ru", "sk", "sl", "sr", "sv", "sw",
	"ta", "te", "th", "tr", "uk", "vi", "zh", "zh_CN", "zh_TW"];

	var Util = {
	ajax: function(callback, url) {
	var req = new XMLHttpRequest();
	req.open('GET', url, true);
	req.onreadystatechange = function() {
	if(req.readyState == 4) {
	callback(req.status, req.responseText, req);
	}
	};
	req.send();
	},
	makeElem: function(elem, attrs, content) {
	var el = document.createElement(elem);
	if(attrs) {
	for (var attrName in attrs) {
	el.setAttribute(attrName, attrs[attrName]);
	}
	}
	if(content) {
	el.innerHTML = content;
	}
	return el;
	},
	inArray: function(elem, array) {
	for(var i = 0, len = array.length; i < len; ++i) {
	if(elem == array[i]) {
	return i;
	}
	}
	return -1;
	},
	isEmptyObject: function(obj) {
	for(var p in obj) {
	return false;
	}
	return true;
	}
	};
	</script>
	<style>
	#localeTable {
	border-collapse: collapse;
	}
	#localeTable, #localeTable td, #localeTable th {
	border: 1px solid black;
	}
	#localeTable td {
	width: 300px;
	}
	#localeTable td.empty {
	background-color: #fcc;
	}
	#localeTable tr.invalid td, #localeTable tr.invalid th {
	background-color: #ff0;
	}
	#localeTable tr.incomplete th {
	color: red;
	}
	span.empty_count {
	color: red;
	}
	</style>
	</head>
	<body>
	<script>
	new LocaleTable();
	</script>
	</body>
	</html>