3

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

 2 years ago
source link: https://siongui.github.io/2016/02/29/javascript-button-for-traditional-simplified-chinese-conversion/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

February 29, 2016

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK