I've been having a lot of fun working on a flash card web component that's used as a sort of language-learning study device and I have to say, this project went from a weird, janky-looking beast straight out of windows 95, to something that looks a bit more similar to what you would see on an educational website today. This is what is currently looks like: 
One of my favorite features of this card are the interesting flag buttons at the top that allow the user to change the language. This post details my experience getting this feature added to my web component.
Implement i18 Functionality:
The first step is to import i18 functionality into my card with the following line:
import { I18NMixin } from '@lrnwebcomponents/i18n-manager/lib/I18NMixin.js';
The I18 Mixin is a sort of super class created by non other than the BTO Pro himself. I18 always for language internationalization functionality in lit. In order to get the basic implementation into my project I used the following article from BTO Pro: https://dev.to/btopro/i18n-in-web-components-2gii
I also used the following sample repos, also from BTO Pro, to see how I18 could be incorporated into a functioning Web Component:
https://github.com/elmsln/lrnwebcomponents/blob/master/elements/self-check/self-check.js
https://github.com/elmsln/lrnwebcomponents/blob/master/elements/word-count/word-count.js
After reading through these articles, and several discussions with the BTO Pro, this is how I implemented my i18 flags:
Create Language support in Locales using JSON:
In order for the elements within the card to become translatable into the four other languages I wanted to implement (Spanish, French, German, and Polish) I had to create translations for the card elements in my locales folder. 
This image is an example of what the Polish Translation for the elements in the card should be, written into a JSON file.
Once the JSON files were created in locales we want to register those locales into our Flashcard with the following code: 
Now that locales contain the translations needed for each element on the card we need to next create buttons and icons that allow the user to change the element language by clicking the correct language button next to the corresponding flag.
Creating Flag Buttons and Icons:
Creating the labeled language buttons was relatively straightforward, however the flags gave me a little bit of trouble. Here are buttons themselves in my demo: 
As you can see in the screenshot, each button has a toggle language function on click labeled after the language the user wishes to change to, along with an icon of the flag associated with the language. While this created the icons for changing language, I still needed to implement the language functionality.
Implementing Toggle Language onClick:
The first issue I ran into was wiring up the toggleLanguage function with the i18 functionality. I was able to create a script in my demo that allows the toggleLanguage function access to the i18 functionality supported in my web component. 
The screenshot above allows my toggleLanguage function access to the i18 language manager and store. Right after this I also realized that I was getting lots of error because I was attempting to import icons using simple-icons without having simple-icons implemented! 
This screenshot shows where I imported BTO Pro's simple-icons functionality. Simple-icons is another part of @lrnwebcomponents that allow users to import basic icons into their components, such as national flags!
The Result
The Resulting card I produced had full i18 functionality for all 5 languages I added: English, Spanish, French, Polish, and German. If you would like to see the other functions of the card rather than just read about my weird esoteric obsession's with European languages and see why this card could be a very useful educational component check out my team's repo here: https://github.com/TheKodingKrab/flash-card
Top comments (0)