Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/braandl/i18ninput
Multilingual Input Field for HTML5 Applications to allow Textfield / Textarea wise translations.
https://github.com/braandl/i18ninput
css html i18n javascript js l10n l20n
Last synced: about 1 month ago
JSON representation
Multilingual Input Field for HTML5 Applications to allow Textfield / Textarea wise translations.
- Host: GitHub
- URL: https://github.com/braandl/i18ninput
- Owner: braandl
- License: mit
- Created: 2017-07-07T12:51:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-17T07:18:14.000Z (7 months ago)
- Last Synced: 2024-10-01T19:16:18.303Z (about 2 months ago)
- Topics: css, html, i18n, javascript, js, l10n, l20n
- Language: CSS
- Size: 1.75 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# i18nInput
[](https://travis-ci.org/braandl/i18nInput)
## Install
Download required dependencies using npm and create packed distribution files using gulp,
or download the entire project and sample files.
```bash
$ npm install
$ gulp [pkg]
```
## Requirements
i18nInputView is dependent on the following JavaScript libraries:
* jQuery
## Demo
See demo under https://braandl.github.io/i18nInput
## Usage
setup i18nInputView and define languages
```javascript
import i18nInputView from 'i18nInput';
i18nInput = new i18nInputView(['de_DE, en_EN, fr_FR']);
```
Use a div element to define as the container of the input field.
```html
```
The create the control, use the i18nInputView function on the ID of the div.
```javascript
$(document).ready(function () {
i18nInput.i18nInputView("my_i18n");
});
```
### Allowed HTML5 Attributes
```html
rows="[0-9]*"
width="270px"
placeholder="My Placeholder"
placeholder="['Mein Platzhalter', 'My Placeholder']"
languages="['de_DE', 'en_EN']"
expander-class="classname"
input-class="classname"
picker-class="classname"
animate="false"
submitOnMissing="false"
```
### JavaScript Access
```javascript
// Prints all filled in results. Missing fields are not returned.
$('#my_i18n').i18n();
<- Array
/*[de_DE: "Deutsch", nl_NL: "Nederlands",
en_EN: "English", en_US: "Different English",
de_AT: "Anderes Deutsch"]*/
// Prints all filled in results. Missing fields are not returned.
$('#my_i18n').i18nObject();
<- Object
/*{de_DE: "Deutsch", nl_NL: "Nederlands",
en_EN: "English", en_US: "Different English",
de_AT: "Anderes Deutsch"}*/
// Prints all languages that were not filled in.
$('#my_i18n').missing();
<- Array
/* ["de_DE", "de_AT", "en_EN", "en_US", "nl_NL"]; */
// Prints wheather all Fields were filled or not.
$('#my_i18n').complete();
<- Boolean;
/* Fill the Input Fields with preset Values using scalar Values or Arrays.
Throws an Exception if Language is not available in definition.
*/
$('#my_i18n').setValue("de_DE", "Deutsch");
<- Boolean
$('#my_i18n').setValue(["de_DE", "en_US"], ["Deutsch", "English"]);
<- Boolean
// Returns an Array of all locales that can be used to set up the View.
$('#my_i18n').allLocales();
<- Array;
/* Adds an optional handler that is called when the form submit failed, because of an incomplete data set. */
$('#my_i18n').registerFormIncompleteHandler(function() { /*...*/ });
<- Boolean;
// Enabling / Disabling the input field.
$('#my_i18n > input').prop('disabled', true);
// Instead of using jQuery selector, plain JavaScript is okay as well:
document.getElementById('my_id1').i18n();
```
### Form Handling
As shown in the example below, a i18nInputView can be wrapped in a
```html
```
form element.
When the form is submitted, the values of the i18nInputView will be appended to the form data as an Array:
```
my_i18n[de_DE]:Hallo
my_i18n[en_EN]:Hello
my_i18n[de_AT]:Grüezi
```
an will be transferred to the target as such.
You can include as many i18nInputViews into a single form as you wish,
short, you can use it just like a normal `````` element.
Not filled languages will be ignored in the form data.
## Credits
* Flag Icon CSS was used to view all the
awesome SVG Flags.
(https://github.com/lipis/flag-icon-css)
* Written by Stephan Brandt