Easy-typing-input-tool NPM

easytyping-google-input-tool

Tool utilizing google input tool for Easy Typing (ENT, EHT, EBT)

Publishing NPM Package

Create & PUsh Git Tag:
git tag v2.1.2 git push origin --tags

npm login
userename: r******
password: ***
email: sam***.***.*****@****.com

To Verify if Logged in:

npm whoami

Modify the tag version on package.json as below:
{ "name": "easy-typing-input-tool", "version": "2.0.0", ... }
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

Easy Typing Google Input Tool Transliteration

google-input-tool

@everything-registry/sub-chunk-1548

2 months ago

4 years ago

4 years ago

4 years ago

6 years ago

6 years ago