easy-typing-input-tool
Version:
A tool utilizing google input tool for the use of easy typing repositories such as ENT, EHt & EBT
299 lines (229 loc) • 9.22 kB
Markdown
# easytyping-google-input-tool
Tool utilizing google input tool for Easy Typing (ENT, EHT, EBT)
### Publishing NPM Package
1. Create & PUsh Git Tag:
git tag v2.1.3
git push origin --tags
2. Login to Npm
npm login
userename: r******
password: ***
email: sam***.***.*****@****.com
OTP: (check email)
To Verify if Logged in:
npm whoami
3. Modify the tag version on package.json as below:
{
"name": "easy-typing-input-tool",
"version": "2.1.3",
...
}
4. Publish the package in npm js
npm publish
Will Give Following output:
npm notice
npm notice 📦 easy-typing-input-tool@2.0.0
npm notice === Tarball Contents ===
npm notice 1.2kB package.json
npm notice 15.7kB index.js
npm notice 1.1kB LICENSE
npm notice 3.0kB README.md
npm notice 926B webpack.config.js
npm notice 4.2kB dist/easy-typing-input-tool-bundle.js
npm notice 877B src/index.html
npm notice === Tarball Details ===
npm notice name: easy-typing-input-tool
npm notice version: 2.0.0
npm notice package size: 8.2 kB
npm notice unpacked size: 27.0 kB
npm notice shasum: 2ee3970f3fb1623013c3343706edee9b34eae69f
npm notice integrity: sha512-Tr0OhPun1U1kg[...]k13F1lTKnnx9Q==
npm notice total files: 7
npm notice
+ easy-typing-input-tool@2.0.0
## Usage:
- Pre-requirement: Jquery
- HTML :
- Usage:
```
<!-- REQUIRED! for displaying message -->
<div id="input_tool_helper">
<em>Additional options appears here!</em>
</div>
<textarea id="input_tool" <!-- REQUIRED! -->
dir="ltr|rtl" <!-- Optional (required to specify script with right to left for e.g. Urdu, Arabic)-->
>
<!-- Optional - Not required if Display suggestion popup enabled via jquery -->
<input type="hidden" name="googleInputKeyCode" value="specify input key code for e.g., (ne-t-i0-und)">
```
- For ENT (Based on Mobile Version):
Case 1:
Ideally a Desktop Version, where you don't want to display input tool helper but want to display
additional option via popup suggestion box after space.
<div id="input_tool_wrapper">
<textarea id="input_tool" rows="10" style="font-size: 14px"></textarea>
<!-- if dynamic add below, and make change in js to fetch this -->
<input type="hidden" name="googleInputKeyCode" value="ne-t-i0-und">
</div>
Javascript:
const googleInputTool = require('../index.js');
googleInputTool.transliterate({
inputTextareaIds: '#input_tool',
googleInputKeyCode: 'ne-t-i0-und',
maxResult: 10,
suggestionPopupAfterSpace: true,
suggestionPopupOnClick: true
});
Case 2:
Ideally a mobile version, where you don't want to display option via input tool helper section. Only
display popup on click.
<div id="tamil_input_tool_wrapper">
<textarea id="tamil_input_tool" rows="10" style="font-size: 14px"></textarea>
<!-- if dynamic add below, and make change in js to fetch this -->
<input type="hidden" name="tamilInputKeyCode" value="ta-t-i0-und">
<div id="input_tool_helper"><em>Additional options appears here!</em></div>
</div>
Javascript:
const googleInputTool = require('../index.js');
googleInputTool.transliterate({
inputTextareaIds: '#tamil_input_tool',
inputHelperTool: '#input_tool_helper',
googleInputKeyCode: 'ta-t-i0-und',
maxResult: 5,
suggestionPopupAfterSpace: false,
suggestionPopupOnClick: true
});
Case 3:
Ideally a mobile version, where you don't want to display option via input tool helper section.
<div id="arabic_input_tool_wrapper">
<textarea id="arabic_input_tool" rows="10" style="font-size: 14px" dir="rtl"></textarea>
<!-- if dynamic add below, and make change in js to fetch this -->
<input type="hidden" name="arabicInputKeyCode" value="ar-t-i0-und">
<div id="arabic_input_tool_helper"><em>Additional options appears here!</em></div>
</div>
Javascript:
const googleInputTool = require('../index.js');
googleInputTool.transliterate({
inputTextareaIds: '#arabic_input_tool',
inputHelperTool: '#arabic_input_tool_helper',
googleInputKeyCode: 'ar-t-i0-und'
});
- JavaScript :
- npm install and save on package.json:
```
npm i easy-typing-input-tool --save
```
- require & use it / webpack it:
```
const googleInputTool = require('easy-typing-input-tool');
googleInputTool.transliterate({
inputTextareaIds: '#input_tool',
googleInputKeyCode: 'ne-t-i0-und',
maxResult: 10,
suggestionPopupAfterSpace: true,
suggestionPopupOnClick: true
});
googleInputTool.transliterate({
inputTextareaIds: '#tamil_input_tool',
inputHelperTool: '#input_tool_helper',
googleInputKeyCode: 'ta-t-i0-und',
maxResult: 5,
suggestionPopupAfterSpace: false,
suggestionPopupOnClick: true
});
googleInputTool.transliterate({
inputTextareaIds: '#arabic_input_tool',
inputHelperTool: '#arabic_input_tool_helper',
googleInputKeyCode: 'ar-t-i0-und'
});
```
- or copy easy-typing-input-tool-bundle.js from dist folder via gulp or webpack to required folder (for e.g public/js | dist)
- Style Sheet :
- Apply your own style
- or, ENT Mobile Style:
```
#input_tool_helper {
height: 33px;
width: 100%;
text-align: right;
color: #ccc;
}
#input_tool_helper > .btn {
margin: 0px 1px;
// Remove on select highlight border
outline: 0;
}
#input_tool_helper > em {
font-size: 12px;
}
```
- Based on above examples style:
#input_tool_wrapper, #tamil_input_tool_wrapper, #arabic_input_tool_wrapper {
width: 100%;
border: 1px solid #333;
}
#input_tool, #tamil_input_tool, #arabic_input_tool {
width: 100%;
}
#input_tool_helper, #tamil_input_tool_helper, #arabic_input_tool_helper {
border: 1px solid #ccc;
height: 100px;
width: 100%;
}
#input_tool_helper .btn, #tamil_input_tool_helper .btn, #arabic_input_tool_helper .btn{
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/** May be put in javascript **/
#InputSuggestions .btn {
outline: none;
}
#InputSuggestions button.selected {
background-color: #2b6bbd !important;
color: #fff;
}
#InputSuggestions .btn:hover {
background-color: #2b6bbd !important;
color: #fff;
}
## Supported Languages
| Language | Code |
|---|---|
| Amharic | am-t-i0-und |
| Arabic | ar-t-i0-und |
| Bengali | bn-t-i0-und |
| Chinese (Hong Kong) | yue-hant-t-i0-und |
| Chinese (Simplified, China) | zh-t-i0-pinyin |
| Chinese (Traditional, Taiwan) | zh-hant-t-i0-und |
| Greek | el-t-i0-und |
| Gujarati | gu-t-i0-und |
| Hindi | hi-t-i0-und |
| Kannada | kn-t-i0-und |
| Malayalam | ml-t-i0-und |
| Marathi | mr-t-i0-und |
| Nepali | ne-t-i0-und |
| Oriya | or-t-i0-und |
| Persian | fa-t-i0-und |
| Punjabi | pu-t-i0-und |
| Russian | ru-t-i0-und |
| Sanskrit | sa-t-i0-und |
| Serbian | sr-t-i0-und |
| Sinhalese | si-t-i0-und |
| Tamil | ta-t-i0-und |
| Telugu | te-t-i0-und |
| Thai | th-t-i0-und |
| Tigrinya | ti-t-i0-und |
| Urdu | ur-t-i0-und |
## Repository ##
https://github.com/sambhuWeb/easytyping-google-input-tool
## Development:
## Running webpack in dev
`npm run dev`
## Running webpack in production (minifies js)
`npm run prod`
# To Test
- php -S localhost:8010
- http://localhost:8010/src/index.html
## Transliteration Inventory Added: 15 March 2024
- Any transliteration request made is sent to the http://www.api.phplab.info/v1/transliteration-inventory api
- The translitration request is only accepted if it is coming from domains on sambhu/sabina adsense + local docker environment (easynepalitypin.docker ... etc) . See Laksmi CORS middleware