Another week passed by of my Google Summer of Code 2016 project. My goal for this summer is to create a revamped user interface for the module called Translation Management Tool, with many new features that will simplify the translation process for both, end-users and translators. I divided my goals into two parts:
- creating segments out of the content, mark them in the editor and perform actions based on the clicked word and segment
- masking HTML tags inside segments
As we already passed the midterm evaluation, half of the project is already done in the previous weeks. I moved to the second part of my project this week. More details about my work is described below.
Achievements
As for every week, I started my weekly development cycle by refactoring the code based on my mentor’s comments. Since last week I fixed an important blocker and added the support for multiple editors on the translation and review pages, we agreed that the editors should only work in pairs. We now clearly mark the same segments in editor pairs and toggle the CKEditor plugin buttons accordingly. I did this by implementing a new JavaScript Object Prototype, which contains many relevant information that we want to store about the editor pair, such as:
- ID of the editor pair
- the selected editor name
- the DOM element of the area below the editor (in which we display selected segments, words and suggestions)
- the selected word
- the selected segment’s id
- the counter of segments, that are marked as completed
Other than refactoring and fixing smaller issues, I started working on the new plugin for displaying the masked HTML tags inside the segments. The purpose of masking the tags is to help us understand the translating text’s structure better and cleanly show which opening/closing tags are missing inside a segment. Firstly, I extended the dummy translatable node in the tmgmt_ckeditor.install file with a masked <b> tag that looks like this:
<tmgmt-tag tag=”<b>”>text inside a masked tag</tmgmt-tag tag="</b>">
Once I had a tag to work on, I created a simple plugin that just displays some arrows instead of the opening and closing of the masked tags. It is fully dependent on the plugin that is displaying the segments, which means it is only enabled and available to toggle when the segments are shown, and disabled otherwise.
For the next steps, we should discuss about the attributes of the masked tags. We should for sure preserve them throughout the translation process. In the example of alt and title tags that would possibly need translation, we could have them hidden and display them on mouse hover, so that the user is aware of them being present.
Goals for next week
The plan for next week is to continue on developing a valid definition of tags and extending it’s functionality by handling data attributes properly.
Feel free to check my Github repository for being updated on the constant progress during my weeks.
