Translation functionality in Twig templates#1690
Conversation
…re translations are visible in the browser and the translation is read at the correct point in the code
…onent is used, which is then imported into the components where translations are needed. In such an implementation, Vue components must be called as modules
|
Doing the initialization of Vue components like this is a somewhat invasive change, but I'll defer the discussion about this. However, I think it's problematic that each component has to call
I think it would be better to initialize the service just once per page and make it available to all Vue components, without each component having to initialize it on its own. |
|
Now there is an implementation where both statistics (vocab-counts & term-counts) on the vocabulary homepage are displayed at the same time, but the translation initialization is only done once (see image). It was a long and frustrating process where only one of the Vue apps would load at a time 😅. The issue is that I had to build a separate timing function since Vue now relies on the translation service. The timing conflict is now resolved with a separate timing function 🫣. The setup works, but generally speaking, when using frameworks, it feels a bit unsophisticated. I will not commit yet - I eill clean up the code first and make sure I fully understand what "spaghetti" have appearead through my own hands! 😂 |
… agreed on in the design review. Also made some minor refactorings related to the translations themselves, as they take part in the translation functionalities, plus a few other small adjustments. However, the primary changes involve significant structural modifications related to call methods, wrappings, and timing
…de a few other small adjustments
UnniKohonen
left a comment
There was a problem hiding this comment.
This solution works and seems fine for now. In the future, we can think about using the vue-i18n library if it adds any value. It would eliminate the need to check the availability of the $t function, but there would be some blinking with the component texts. Also, it might be worth investigating if promises could be used instead of setTimeout when checking for $t and starting Vue components. Though, based on my brief testing and googling it seems that setTimeout is the most straightforward way to wait for the function to be available.
113544d to
898a64e
Compare
|
osma
left a comment
There was a problem hiding this comment.
LGTM, we can continue from here later
Implements translation functionaities centrally in JavaScript on the front end.
The implementation avoids using the vue-i18n library, aiming to reduce dependencies by relying on vanilla JavaScript. This is the first workin version, which can be improved in future iterations. Cypress tests were also added for the tables on the landing page.
Reasons for creating this PR
Translations also need to work on the frontend side and Vue components
Link to relevant issue(s), if any
Description of the changes in this PR
Known problems or uncertainties in this PR
Checklist
.sr-onlyclass, color contrast)