nk2028/opencc-js

Usecase for newbies

Closed this issue · 7 comments

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.

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

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.

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();
});

{ 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'
  • ...

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 🥇

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

The usage is modified (see README)

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.