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.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 📦  [email protected]
   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 
   + [email protected]

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