🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
simple-translation
Advanced tools
simple-translation - npm Package Compare versions
+78
-22
| <html> | ||
| <body> | ||
| <div>These are examples of performing translation using the Browser's detected language</div> | ||
| <ul> | ||
| <li id="string-example"></li> | ||
| <li id="function-example"></li> | ||
| <li id="missing-string-example"></li> | ||
| </ul> | ||
| <h2>Simple Tranlsation Examples</h2> | ||
| <div class="container"> | ||
| <div>These are examples of performing translation using the Browser's detected language</div> | ||
| <ul> | ||
| <li id="string-example"></li> | ||
| <li id="function-example"></li> | ||
| </ul> | ||
| </div> | ||
| <div>These are examples of performing translation by explicitly specifying the language of French</div> | ||
| <ul> | ||
| <li id="string-example-french"></li> | ||
| <li id="function-example-french"></li> | ||
| </ul> | ||
| <div class="container"> | ||
| <div>These are examples of performing translation by explicitly specifying the language of French</div> | ||
| <ul> | ||
| <li id="string-example-french"></li> | ||
| <li id="function-example-french"></li> | ||
| </ul> | ||
| </div> | ||
| <div class="container"> | ||
| <div>These are examples of handling invalid inputs</div> | ||
| <ul> | ||
| <li id="missing-string-example"></li> | ||
| <li id="missing-language-example"></li> | ||
| </ul> | ||
| </div> | ||
| <div class="container"> | ||
| <div>This is an example of getSupportedLanguages()</div> | ||
| <ul id="supported-languages"> | ||
| </ul> | ||
| </div> | ||
| <div class="container"> | ||
| <div>Check the console for error handling examples</div> | ||
| </div> | ||
| </body> | ||
@@ -20,3 +44,2 @@ | ||
| //Example using automatic browser language detection | ||
| import SimpleTranslation from '../simple-translation.js' | ||
@@ -29,24 +52,57 @@ | ||
| //Will produce error about languages already being registered because there were supplied in the new SimpleTranslation() call | ||
| translate.registerLanguage(english) | ||
| translate.registerLanguage(french) | ||
| let exampleStaticString = translate.message('exampleString') | ||
| let exampleDynamicString = translate.message('exampleFunction')('test') | ||
| console.log(translate.message('exampleString')) | ||
| let exampleStaticWithLanguageOverridge = translate.message('exampleString', 'fr') | ||
| let exampleDynamicWithLanguageOverridge = translate.message('exampleFunction', 'fr')('test') | ||
| console.log(translate.message('exampleOfStringThatDoesntExist')) | ||
| let exampleInvalidString = translate.message('exampleOfStringThatDoesntExist') | ||
| let exampleInvalidLanguage = translate.message('exampleString', 'sp') | ||
| console.log(translate.message('exampleString', 'fr')) | ||
| document.getElementById('string-example').innerHTML = exampleStaticString | ||
| document.getElementById('function-example').innerHTML = exampleDynamicString | ||
| console.dir(translate.getLocale('fr').messages.exampleString) | ||
| document.getElementById('string-example-french').innerHTML = exampleStaticWithLanguageOverridge | ||
| document.getElementById('function-example-french').innerHTML = exampleDynamicWithLanguageOverridge | ||
| document.getElementById('missing-string-example').innerHTML = exampleInvalidString | ||
| document.getElementById('missing-language-example').innerHTML = exampleInvalidLanguage | ||
| document.getElementById('string-example').innerHTML = translate.message('exampleString') | ||
| document.getElementById('function-example').innerHTML = translate.message('exampleFunction')('test') | ||
| document.getElementById('missing-string-example').innerHTML = translate.message('exampleOfStringThatDoesntExist') | ||
| let supportedLanguages = translate.getSupportedLanguages().map((language) => { | ||
| return `<li>${language}</li>` | ||
| }).join('') | ||
| document.getElementById('string-example-french').innerHTML = translate.message('exampleString', 'fr') | ||
| document.getElementById('function-example-french').innerHTML = translate.message('exampleFunction', 'fr')('test') | ||
| document.getElementById('supported-languages').innerHTML = supportedLanguages | ||
| </script> | ||
| </script> | ||
| <style> | ||
| body{ | ||
| font-family: Arial; | ||
| color: hsl(0, 0%, 30%); | ||
| background-color: hsl(0, 40%, 95%); | ||
| } | ||
| .container{ | ||
| padding: 20px; | ||
| border: 1px solid hsl(0, 0%, 60%); | ||
| border-radius: 3px; | ||
| margin: 15px 10px; | ||
| background-color: hsl(0, 0%, 90%); | ||
| } | ||
| h2 { | ||
| text-align: center; | ||
| } | ||
| li { | ||
| margin: 7px; | ||
| } | ||
| </style> | ||
| </html> |
+1
-1
| { | ||
| "name": "simple-translation", | ||
| "version": "1.0.3", | ||
| "version": "1.0.4", | ||
| "description": "A super basic and simple way to do language translations. Auto detects language from the browser. Supports compiled strings. Aims to be an uncomplicated translation package", | ||
@@ -5,0 +5,0 @@ "main": "simple-translation.js", |
+23
-3
@@ -11,3 +11,4 @@ | ||
| - Supports static and dynamic strings (can pass variables into text) | ||
| - Decent error handling | ||
| - Basic error handling | ||
| - Minimal, you should be able to fork it and modify it without much investment | ||
@@ -54,7 +55,7 @@ | ||
| Option A - *specify each language file individually using the registerLanguage() method* | ||
| **Option A** - *specify each language file individually using the registerLanguage() method* | ||
| ```translate.registerLanguage(english)``` | ||
| Option B - *specify the language files upon new translate, which will be automatically registered* | ||
| **Option B** - *specify the language files upon new translate, which will be automatically registered* | ||
@@ -78,2 +79,12 @@ ```let translate = new SimpleTranslation(english, french)``` | ||
| # Additional Helper Methods | ||
| ## Get list of supported Languages | ||
| This method would be handy if you want to, for example, render a drop down list of supported languages in your app and then allow the user to choose which language to display. | ||
| ```translate.getSupportedLanguages()``` | ||
| returns: ```["en", "fr"]``` | ||
| ## Get entire language object | ||
@@ -90,1 +101,10 @@ ```translate.getLocale('en')``` | ||
| }``` | ||
| ---------- | ||
| *author: Richard Bettridge (ssshake)* | ||
| *web: http://daggasoft.com* | ||
| *twitter: @richbettridge* |
@@ -26,16 +26,27 @@ export default class SimpleTranslation{ | ||
| getLocale(laguageCode){ | ||
| if (!this.localeData[laguageCode]){ | ||
| console.error(`Simple-Translation: Language definition of '${laguageCode}' Not Found`) | ||
| getLocale(languageCode){ | ||
| if (!this.localeData[languageCode]){ | ||
| console.error(`Simple-Translation: Language definition of '${languageCode}' Not Found`) | ||
| return false | ||
| } | ||
| return this.localeData[laguageCode] | ||
| return this.localeData[languageCode] | ||
| } | ||
| getSupportedLanguages(){ | ||
| return Object.keys(this.localeData) | ||
| } | ||
| message(key, languageCode = this.browserLanguageCode){ | ||
| if (!this.getLocale(languageCode)){ | ||
| return `<span style="color:red;">Missing Translation File '${languageCode}'</span>` | ||
| } | ||
| if (!this.localeData[languageCode].messages[key]){ | ||
| console.error(`Simple-Translation: The message '${key}' for language code '${languageCode}' was not found`) | ||
| return '<span style="color:red;">Missing Translation</span>' | ||
| return `<span style="color:red;">Missing Translation for '${key}' for language '${this.localeData[languageCode].language}'</span>` | ||
| } | ||
| return this.localeData[languageCode].messages[key] | ||
| } | ||
| } |
No alert changes
Improved metrics
- Total package byte prevSize
9041
34.12%- Lines of code
60
13.21%- Number of lines in readme file
107
22.99%No dependency changes