How to include text of Joubel Button in the translation mechanism

Submitted by gro58 on Sun, 03/20/2022 - 19:24
gro58's picture
Forums: 
Translation contributions

In file editor.js there is a JoubelUI Button created like this:

$button = H5P.JoubelUI.createButton({
  title: 'set_input_field',
  text: 'Set input field',
  click: function (event) {
    //process event
  }
});
$wrapper.append($button);

In directory \language there is a translation file de.json, created
by the cli command "h5p create-language-file <library> <language-code>"

When the language is changed (e.g. in Drupal7/H5P), the fields of the editor
change the text of the labels and descriptions. This works like a charm.

What is the recommended method to make the text of the JoubelUI Button
also change, when the language is changed?

otacke's picture

otacke

Mon, 03/21/2022 - 07:14

Hi!

How do other content types/editor widgets (I assume you are referring to the latter?) make strings translatable?

Best,

Oliver 

gro58's picture

gro58

Tue, 03/22/2022 - 09:55

I will have a look at the code of some widgets. Do you have a recommendation on which widgets I should look at?

otacke's picture

otacke

Wed, 03/23/2022 - 07:10

Not really. 

gro58's picture

gro58

Tue, 03/29/2022 - 17:27

I found a solution to change the text of a JoubelUI button corresponding to the selected language:

 

<pre class="brush: jscript">

// ... when creating the FormulaAppletEditor widget in

// FormulaAppletEditor.prototype.appendTo = function ($wrapper) {

$button = H5P.JoubelUI.createButton({

  title: 'set_input_field',

  click: function (event) {

// code triggered by click

  }

});

$wrapper.append($button);

//...

 

// ... code called after widget is appended

// ...

var lang = getValue(obj, 'selected_language');

var button_text = getValue(obj, 'input_field_button_text');

$button.html(button_text);

// ...

</pre>

getValue(obj, name) is a helper function which retrieves the value of a field defined in semantics.json.

In case of fields with type = "text" the description text is returned.

Source see https://github.com/gro58/FormulaApplet/blob/eed1fa54f41ad2cb57f39858f5aa...

 

The code works, but I am not satisfied.

First, it uses a helper field "selected_language" to determine the currently selected language. Probably there is an easier way In H5P to get the selected language.

Second, it uses the home-made helper function "getValue" to get the value of a field defined in semantics.json. Probably there is a simpler H5P method for this.

Third, the $button variable is global. It should become a member variable of the widget.

Any hints for improvement?

 

Thnx, Rudi

otacke's picture

otacke

Tue, 03/29/2022 - 21:07

I am really not sure if I understand what you are trying to achieve in the first place.

gro58's picture

gro58

Thu, 03/31/2022 - 13:09

I would like to achieve the following:
If a user changes the selected language from e.g. "English" to "German", the label of the fields and also the label of the button will be changed.(see 3 attached screenshots)

My code posted above was incorrect. Here is a fix for it:

    var button_field = getField(obj, 'input_field_button_text');
    var button_text = button_field.field.default;
    $button.html(button_text);

Now the code works, but there should be a better solution.

Surely there is a function in H5P that replaces my homemade function getField(obj, name).

Maybe there is a method of the JoubelUI button object that makes it unnecessary to access the DOM using the $button object  and the jQuery method $button.html(button_text).

 

Attachments: 
Image icon Translate-button text-Drupal7-config-regional-language.jpg
Image icon Translate-button text-Drupal7-FAEditor-en.jpg
Image icon Translate-button text-Drupal7-FAEditor-de.jpg
otacke's picture

otacke

Thu, 03/31/2022 - 19:34

Hi!

I think now I get it. You only want to make your editor widget translatable normally, not at runtime or anything "wicked".

Have a look at the Range List widget for instance that is used in many content types. You'll find a bunch of language templates inside the language folder (for instance German), and within your code, you can use the function `H5PEditor.t` to get the translated string for the language that the user has currently chosen (if available). Here,

H5PEditor.t('H5PEditor.RangeList', 'distributeButtonLabel')

in line 42 of the current master version would return the current language's translation for the `distributeButtonLabel` of the library that holds the machine name `H5PEditor.RangeList`.

What you do with that translated string is up to you.

If you'r widget defines that button, then you have a reference to it already and there's no need to fiddle your way through the DOM (which in my opinion is rarely a good idea but rather a last resort).

Cheers,
Oliver

otacke's picture

otacke

Sat, 04/02/2022 - 10:08

Just amending my previous answer. I have some time to kill :-)

If you are concerned with labelling the button: As you may have noticed already, the `createButton` function of the JoubelUI library passes HTML element attributes (or their jQuery variants) to the button element that you are creating. For instance, you've used `title` before yourself. You can pass `html` for the button label as well.

If you really want to change the button label after creating the button (what would your use case be?), then you should store the jQuery element that the `createButton` function returns like you already do, so you can read its values/states/attributes or modify them later on.

There's no H5P core function, however, that would provide you with translation updates at runtime of the editor or some content.

Best,

Oliver 

gro58's picture

gro58

Mon, 04/04/2022 - 12:27

Translate button text now works like expected. Thanks, Oliver!
Seems I have read only the upper part of this page:
https://h5p.org/documentation/for-developers/translate-h5p-libraries
I didn't realize that a editor widget could also have a language directory.

I never meant to change the text of the button during runtime - misunderstanding.

Best,

Rudi