[JavaScript] Button For Traditional/Simplified Chinese Conversion on Website

Conversion Button of Traditional/Simplified Chinese on Website via JavaScript.

First we implement button-like element by HTML and SCSS: (Assume default language of website is Traditional Chinese)

HTML

<div id="zh-convert" class="zh-convert" data-zh="tw">简体</div>

SCSS

.zh-convert {
  &:hover {cursor: pointer;}
  float: right;
  margin-right: 3px;

  padding: 5px 5px;
  background: #fff;
  border-radius: 4px;
}

We need New Tong Wen Tang (GitHub) library to do the conversion for us. Insert the following line in your HTML right before the end of body tag.

<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_core.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_s2t.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_t2s.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_ps2t.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_pt2s.js"></script>

When users click on 简体, the whole website will be converted to Simplified Chinese. When users click on 繁體, the whole website will be converted to Traditional Chinese.

JavaScript

var zhconvert = document.getElementById("zh-convert");
zhconvert.onclick = function() {
  if (zhconvert.dataset.zh == "tw") {
    TongWen.trans2Simp(document);
    zhconvert.dataset.zh = "cn";
    setTimeout(function() {zhconvert.textContent = "繁體";}, 500);
  } else {
    TongWen.trans2Trad(document);
    zhconvert.dataset.zh = "tw";
    setTimeout(function() {zhconvert.textContent = "简体";}, 500);
  }
}

References:

[1]	zh_TW to/from zh_CN · twnanda/twnanda@6897761 · GitHub