forked from piskelapp/piskel
-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Salvador Villalon] Add i18n to Piskel #49
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Makes MessageFormat i18n strings available in window.locales
…o add-i18n-use-locale-code Getting updated code
…/code-dot-org/piskel into add-i18n-export-tool-translation Getting changes that will help me in this new implementation
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
Co-authored-by: Dayne <dayne@code.org>
[Salvador Villalon] Add i18n settings translation
…o add-i18n getting new code
…om/code-dot-org/piskel into add-i18n-add-new-frame-translation adding code from commit suggestion in pr
[Salvador Villalon] Add i18n pen size translation
…o add-i18n getting new code
…lation [Salvador Villalon] Add i18n add new frame translation
…o add-i18n getting new code
[Salvador Villalon] Add i18n palette translation
…o add-i18n getting new code
[Salvador Villalon] Add i18n update docs
Co-authored-by: Dayne <dayne@code.org>
[Salvador Villalon] Add i18n lowercase locale
daynew
approved these changes
May 27, 2021
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the thorough description of your work. This looks great!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Intro
My name is Salvador Villalon Jr and I am an Advanced Application Engineering Analyst at Accenture working
as part of the pro-bono pogram with Code.org
Overview
Why Was This Branch Created?
Back in Dec 1st, 2015, Julian Descottes created a GitHub issue on the Piskel Repo explaining how they
wanted to add internationalization (i18n) support to the Piskel App
The problem was that all of the strings are hard coded in English and their goals was to replace hard coded strings
by a mechanism that will load string dyanmically through the help of the an i18n framework and architecture
The Code.org team decided to help out since they rely on the Piskel editor and need it to be translated as well
What This Branch Contains
It contains the code that sets up the i18n framework & architecture and uses it for the translations throughout the app.
This are the steps we took to implement i18n
1. Load String Into the Window Object
For example: en_us.json where en is English and us is United States.
tasks/build-i18n.js
. The MessageFormat library is used to convert the static JSON strings into Javascript functions so dynamic content can be injected into the strings.the editor is available
2. Retrieve The Locale Code and Use It
3. Use the i18n Object Where There Is Static Content
4. HTML Templates
There were some tools like changing the pen size and palette color that had their static text in HTML files
The solution was to use their designated controller like PenSizeController or PaletteController and make a function that will generate the HTML based on a template given
To Note
For example, in PenSizeController we have a function called createPenSizeDom_(). This function called in the PenSizeController constructor
**5. Note About i18n Keys **
rotateTransformTool
Descriptor
in it for examplerotateTransformToolDescriptorClockwiseRotation
. It means that the tool has an extra description to give instructions about it or more info about the toolDemo & Screenshots
Attached are screenshots and a video to show how it looks like with es_mx (Spanish, Mexico) translations
walkthrough.mp4
Follow Up Work