Page MenuHomePhabricator

Query service UI editor placeholder is not translated
Closed, ResolvedPublic

Description

The editor placeholder text

(Input a SPARQL query or choose a query example)

is not translated. The wdqs-app-editor-placeholder message is defined and translated, and attached to the editor in

<textarea class="queryEditor" name="query" data-i18n="[placeholder]wdqs-app-editor-placeholder" placeholder="(Input a SPARQL query or choose a query example)"></textarea>

but jQuery.i18n doesn’t seem to replace it (editing the placeholder attribute directly changes the text, editing the message in i18n/en.json doesn’t).


Current status: we have a mostly working workaround for this. Still to do:

  • update the placeholder as soon as $.i18n is done with loading translations, instead of a fixed timeout
  • update the placeholder when the user interface language is changed

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Yes, can confirm!
It seems i18n changes the text, but CodeMirror doesn't update:

placeholder="(Escribe una consulta SPARQL o elige una consulta de ejemplo)"

Oh, you’re right, I didn’t notice that.

Do you think it would be a good idea to add an event to jquery.i18n that is triggered whenever an element’s text or attribute is changed? That might allow us to fix this by propagating the change to CodeMirror when it happens.

@Lucas_Werkmeister_WMDE the code in the <textarea> tag is getting updated whenever language is changed but it is being added a style of display: none so it is not getting displayed as per the picture below

quer.png (768×1 px, 207 KB)

I think the problem is at the following code in Editor.js

    $parent.find( '.CodeMirror-placeholder' ).text(
				$parent.find( '.queryEditor' ).prop( 'placeholder' ) 
			);

The above code finds element with class ".queryEditor" (i.e <textarea>has the class) and gets the placeholder's value of the element but the problem here is it is getting the static value but not dynamically updated value. I guess adding data-i18n tag to element with class '.CodeMirror-placeholder' would solve this?

No, the code that you’re quoting is actually supposed to solve this issue :) I guess we forgot to link Ib296d9065f to this task.

So as far as I can tell, the only thing missing for this task is to replace the hacky setTimeout( …, 1000 ) with a proper hook where jquery.i18n informs us when it’s done internationalizing elements.

Yes, using setIntravel( ) instead of setTimeout( ) worked fine on my localhost. I guess this should work right?

Change 422141 had a related patch set uploaded (by Rammanojpotla; owner: Rammanoj):
[wikidata/query/gui@master] Fix translation of placeholder in Query Service UI

https://gerrit.wikimedia.org/r/422141

Sorry, I’m not sure what problem you’re trying to solve now… the problem described by this task should be resolved now. It’s not a nice solution, but as far as I understand a nicer solution is only possible with some changes to jquery.i18n. But if I set the language to Portuguese now and load the query service, after a few second the placeholder will be in Portuguese.

I guess the problem here is there is no translation of placeholder to other languages. And as per your above comment

for this task is to replace the hacky setTimeout( …, 1000 ) with a proper hook where jquery.i18n informs us when it’s done internationalizing elements.

I changed the use of seTiemout() to setIntarvel() and it worked with all languages. Locally seTiemout() is translating to other languages but if I click my mouse pointer at any other position except the text-editor the language is getting reverted back to english (whatever language presently chosen ) using setIntravel() worked fine locally.

But if I set the language to Portuguese now and load the query service, after a few second the placeholder will be in Portuguese.

The delay is caused because of time delay at setIntarval is set to1000 ms, if it is reduced to 100ms or 10ms. There is no delay in loading. Can you specify if any wrong here please ?

Locally seTiemout() is translating to other languages but if I click my mouse pointer at any other position except the text-editor the language is getting reverted back to english (whatever language presently chosen )

Okay, but that’s a different problem – in the hack, we override CodeMirror’s placeholder element, but as soon as CodeMirror redraws it (which it apparently does as soon as it loses focus), that override is lost. The correct fix for that is to teach CodeMirror the new override as well. I’ll upload a change to fix that.

The timeout is 1000 ms and not shorter because we need to wait until the languages have been loaded. If you use setInterval, you can get away with a shorter interval because it will just keep running until the translations have been loaded, but that’s very inefficient – we shouldn’t need to run this more than once.

Change 422167 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[wikidata/query/gui@master] Set placeholder in CodeMirror options

https://gerrit.wikimedia.org/r/422167

Change 422167 merged by jenkins-bot:
[wikidata/query/gui@master] Set placeholder in CodeMirror options

https://gerrit.wikimedia.org/r/422167

Change 422364 had a related patch set uploaded (by Smalyshev; owner: Smalyshev):
[wikidata/query/gui-deploy@production] Merging from a558b244c967f143f6bf7b89625ee57f8a9fdf39:

https://gerrit.wikimedia.org/r/422364

Change 422364 merged by Smalyshev:
[wikidata/query/gui-deploy@production] Merging from a558b244c967f143f6bf7b89625ee57f8a9fdf39:

https://gerrit.wikimedia.org/r/422364

Change 422141 abandoned by Rammanojpotla:
Fix translation of placeholder in Query Service UI

Reason:
solved at https://gerrit.wikimedia.org/r/#/c/422167/

https://gerrit.wikimedia.org/r/422141

Change 472141 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[wikidata/query/gui@master] Refactor editor placeholder translation setup

https://gerrit.wikimedia.org/r/472141

Change 472141 merged by jenkins-bot:
[wikidata/query/gui@master] Refactor editor placeholder translation setup

https://gerrit.wikimedia.org/r/472141

Change 475254 had a related patch set uploaded (by WDQSGuiBuilder; owner: WDQSGuiBuilder):
[wikidata/query/gui-deploy@production] Merging from b1b825c40771891b8cb47dc6a3ca838d182efa70:

https://gerrit.wikimedia.org/r/475254

Change 475254 merged by Smalyshev:
[wikidata/query/gui-deploy@production] Merging from b1b825c40771891b8cb47dc6a3ca838d182efa70:

https://gerrit.wikimedia.org/r/475254