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

1. Create & PUsh Git Tag:

   git tag v2.1.2 git push origin --tags

2. Login to Npm

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

   To Verify if Logged in:

   npm whoami 
   

3. Modify the tag version on package.json as below:

   {
     "name": "easy-typing-input-tool",
     "version": "2.0.0",
     ...
   }
   

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
   

• 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;
    }
    

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

https://github.com/sambhuWeb/easytyping-google-input-tool

## Running webpack in dev

`npm run dev`

## Running webpack in production (minifies js)

`npm run prod`

- php -S localhost:8010
- http://localhost:8010/src/index.html

- 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