WISE-Community / WISE-VLE--Deprecated--

Virtual Learning Environment (VLE) for the Web-based Inquiry Science Environment (WISE). *Note: deprecated and has been merged into the main 'WISE' repository*
8 stars 8 forks source link

Internationalize Authoring Tool #95

Open hirokiterashima opened 12 years ago

hirokiterashima commented 12 years ago

I added internationalizing support for the Authoring Tool https://github.com/WISE-Community/WISE-VLE/commit/2f9fbc3d4ad41fb7a6914997b9dcbb697d2f7d44 and https://github.com/WISE-Community/WISE-Portal/commit/ab80d99cd2b8ec646450907d0493a6856749b376

Now we need to go through the files and internationalize the text that we see in the Authoring Tool. This involves: 1) getting text from html to javascript (ie "building the page using javascript" instead of hard-coding in html) 2) find english text in javascript files, put them in i18n_en_US.json file, and calling view.getI18NString("KEY").

breity commented 12 years ago

Great! Yes, as I revise the authoring tool, I will add i18n translations. We should hold off on translating the authoring tool right now, as much of the text will be changing, so we don't want to waste our time translating items that may not be included in the redesign.

In terms of item 1 here, yes, we will have to build some of the components using javascript. But we can still create page elements and structure using html (which is MUCH quicker and easier to do). We basically just need to insert text (and title attributes, etc.) using javascript when the authoring components load.

hirokiterashima commented 12 years ago

Yupp, your approach to #1 makes sense.

breity commented 12 years ago

So a nice way to standardize this when writing html would be to simply add an attribute (like 'i18n', for example) to each element we want to insert html text into.

For example: <a href='somepage.html' i18n='my_link'>placeholder text</a>

Then on $(document).ready (or after inserting new DOM elements), we call an update function that finds all the items with an i18n attribute and sets the value returned by view.getI18NString for the selected i18n param as the inner html for each element. We could also add an option for specifying titles for each element by just adding another parameter ('i18n-title', for example): <a href='somepage.html' i18n='my_link' i18n-title='my_link_title'>placeholder text</a>

This would simplify things in that we won't have to manually invoke view.getI18NString() every time we want to add text to a VLE component. The elements will be processed automatically. It would also give developers a clearer view of where exactly each i18n translation is being used in the code. On a quick search, it seems like this is an approach that other js i18n frameworks are taking.

hirokiterashima commented 12 years ago

ooh, this is neat.

Would the users see a flicker of the english text before seeing the translated text with this approach though?

breity commented 12 years ago

If we put placeholder text in, they would see a flicker. You could just leave the content for the element empty altogether. Then they wouldn't see anything until the translation is inserted. <a href='somepage.html' i18n='my_link' i18n-title='my_link_title'></a>