nk2028/opencc-js

Usecase for newbies

Closed this issue · 7 comments

hugolpz commented

Hello, I created a jsffidle to test few usecases from your readme.md. I was partially successful.

The convert page content script didn't work :

((async () => {
  const convert = await OpenCC.Converter('hk', 'cn');
  const startNode = document.documentElement; // Convert the whole page
  const HTMLConvertHandler = OpenCC.HTMLConverter(convert, startNode, 'zh-HK', 'zh-CN'); // Convert all zh-HK to zh-CN
  HTMLConvertHandler.convert(); // Start conversion
  HTMLConvertHandler.restore(); // Restore
})());

I tried to assign to variable but also failed. (but this one is likely on me since I don't understand asyn well).

It could be interesting for users to have some usecases working on fiddle as demos.

sgalal commented

I have updated the API. Now there is no async any more. Would you please see if this would be easier?

hugolpz commented

Hello Sgalal, thanks for the quick reply and REAME.md rewrite : ).
If I understand you still are actively developing & testing it, so may I give some feedbacks ?

  • I tested again on this pad, I wasn't able to make it works on client side.
    • Seems <script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.1/data.min.js"></script> drops an error. If I include this file twice, I get two errors, etc.
    • you can use the jsfiddle to test around or share working code.
  • On the readme, we can do shorter. Just sent you PR #11 .
  • Switching between { from: 'hk', to: 'cn' } and 'zh-HK', 'zh-CN' is confusing : where to use which ? It adds complexity. You may consider adopting one single localization system all around.
sgalal commented

This will work:

<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.1/data.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.1/data.cn2t.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.1/data.t2cn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.1/bundle-browser.min.js"></script>

<div id="testingOpenCC" lang="zh-HK">
  <span>轉換整個頁面</span>
</div>
const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
const rootNode = document.documentElement;
const HTMLConvertHandler = OpenCC.HTMLConverter(converter, rootNode, 'zh-HK', 'zh-CN');

document.addEventListener('DOMContentLoaded', () => {
  HTMLConvertHandler.convert();
});
  • 👍1
sgalal commented

{ from: 'hk', to: 'cn' } affects the OpenCC conversion, while 'zh-HK', 'zh-CN' affects the lang attribute of HTML tags

Both are necessary because we can have multiple combinations like:

  • { from: 'tw', to: 'cn' } + 'zh-TW', 'zh-CN'
  • { from: 'twp', to: 'cn' } + 'zh-TW', 'zh-CN'
  • { from: 'tw', to: 'cn' } + 'cmn-TW', 'cmn-CN'
  • { from: 'twp', to: 'cn' } + 'cmn-TW', 'cmn-CN'
  • { from: 'tw', to: 'cn' } + 'nan-TW', 'nan-CN'
  • { from: 'twp', to: 'cn' } + 'nan-TW', 'nan-CN'
  • { from: 'tw', to: 'cn' } + 'nan-Hant-TW', 'nan-Hans-CN'
  • ...
hugolpz commented

I see that one feeds into OpenCC javascript, the other into html attribute lang.

Not sure, but seems...

  • JS localisation parameters : defines the direction + default or is p (cn: 自行车/自行車 -> tw: 脚踏车/腳踏車).
    • range of accepted values: limited (see #Basic_usage)
  • HTML attribute lang : identifies targets, optionally announced a language.
    • range of accepted values : string (is open). Recommended languages codes (IETF languages tags).

I was unable to make sections 2, 3, 4 works. See fiddle.

PS: I solved my main issue thanks to lang="*". Report above to offer some feedbacks and newbies can use OpenCC quickly 🥇

sgalal commented

I was unable to make sections 2, 3, 4 works. See fiddle.

The usage is modified (see README)

hugolpz commented

I think the readme is better now and suits the newbies' need requested above : we can indeed copy-paste and convert a page or section of page. This issue can be closed. 👍🏼

Scope limit could be better stated depending on the limits you want to fix.
Being able to convert string and save value on demand would expand possible usages.

  • 👍1