enhance language translator module for text translation, avoid label text duplication

[justb3a]

No description provided.

[ryancramerdesign]

Thanks for the PR.

The description is shown even when it's going to be duplicating the label primarily because the label can't be copied (for copy/paste operations) wheres the description can. Some people use external tools (like Google translate) to assist in translation, so being able to copy the untranslated text is important for them.

Regarding the text in ProcessLanguageTranslator itself not being translatable, that was intended, though I'm not sure it's necessarily the right decision, so wanted to see what you thought. The idea was that this tool is primarily used for translating English text to some other language, so the text in the module itself should always be English. Again, I'm not sure that's the right way to do it, and maybe it should be translatable like in your PR.

[justb3a]

Maybe the duplicated label could be resolved otherwise because it blows up the list a lot. So I have to scroll twice as much as actually needed.

• One could modify the label via CSS, add user-select:all; and pointer-events: none; but this might turn out problematic because the initial pointer event - enter input field - is missing then, also you have to use vendor prefixes and I guess not every browser/device supports these properties..
• Or perhaps a litte icon next to the label could be added. Clicking this copies the text to the clipboard.

For a current project our clients want to change some string translation by themselves, therefore I adapted my translation module and added a new permission. Furthermore the clients get only the site translation files displayed. So in this case it’s really necessary to translate the introduction text as well as the labels.. I have no chance to solve it by using a hook before or after method. I wouldn't want to alter the returned html output using regex. At the moment I'm using a replacement hook which I really don’t like. Therefore I would highly appreciate it if there would be a way to translate these texts.

[ryancramerdesign]

Thanks, what you said makes sense. I will make the text translatable in the module per your updates here and will experiment further with those labels to see if can accomplish it without the duplication. To make them copy/paste friendly, I think we would have to disable the default use of field labels here, since clicking an Inputfield label focuses the field (per regular <label> behavior).

[ryancramerdesign]

I have applied the suggestions from this PR to the language translation tools, plus some more goodies. Please let me know how it works for you. Thanks.

[justb3a]

Thanks a lot. Works like a charm except two little issues, but maybe I missed some settings.

The checkbox "hide already-translated blocks" is not working for me because the related JS file (wire/modules/LanguageSupport/ProcessLanguageTranslator./min./js) is not included. I've found no setting where I could activate using this js file. Also a little search didn't help me to find the file where the js file gets included.

The other issue is related to the label. At the moment it is not "copy-paste-friendly". This is completely fine for me, I don't need to copy and paste the label. I just wanted to mention this behaviour because we talked about it. To be able to select the label, the CSS needs to be adapted: main-classic.css - remove (-prefix-)user-select: none; for selector .Inputfields .InputfieldHeader, .InputfieldForm .InputfieldHeader, .InputfieldForm label.InputfieldHeader, .InputfieldWrapper>.description. To prevent jumping inside the input field directly by clicking the label the JavaScript needs to be adapted (/wire/modules/AdminTheme/AdminThemeDefault/scripts/main.js). The same for AdminRenoTheme.

[ryancramerdesign]

Thanks for testing. I'm not seeing either of those issues here, so wondering if you might have an incomplete copy of the core? Make sure it's the dev branch that you've got, and not the master or devns branch. Also make sure that when you replace your /wire/ directory that you wipe out the old one first before putting in the new one (so that the contents don't get merged). If you are doing a git pull of the core, then you don't need to worry about this as Git should take care of it.

Another possibility, you might need to do a Modules > Refresh since the core version hasn't changed yet.

Here's a link to the min.js file: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/LanguageSupport/ProcessLanguageTranslator.min.js

As for the copy/paste, it's only the descriptions that need to be copy/paste friendly. The label (InputfieldHeader) is now only shown if additional notes are provided for the translator, and those don't need to be copy/paste friendly since they are not meant to be translated. Are you finding that the description can't be copy/pasted? If so, what browser/platform? Thanks.

[justb3a]

I use git so everything should work. I checked out e909d1c5e167a98cf659b3cfc6944ebd19b85c10. The version changed to ProcessWire 2.6.22 rc1 © 2015 (before 2.6.20). I also did a Modules > Refresh.
(Tested again checking out aff0f017d087895df753fd086f98592937746d70). All other new features are working pretty well. Maybe I should test it using a fresh installation.

[justb3a]

Using a fresh installation everything works like a charm. Thanks!