Code Monkey home page Code Monkey logo

jquery.ime's Introduction

jQuery.IME

jQuery.IME is a jQuery based input method editor library supporting more than 220 input methods across more than 120 languages.

jQuery.IME Demo

These input methods are well tested. Initially the input methods were contributed by the Wikimedia community. By now many input methods have also been contributed by Red Hat.

This project is a Wikimedia foundation initiative to provide language technology tools to a wider audience outside the Wikimedia universe.

This input tool is widely deployed in all Wikimedia projects (eg: wikipedia).

Quick start

git clone https://github.com/wikimedia/jquery.ime.git

Load the necessary scripts:

<link href="../css/jquery.ime.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
<script src="../src/jquery.ime.js"></script>
<script src="../src/jquery.ime.selector.js"></script>
<script src="../src/jquery.ime.preferences.js"></script>
<script src="../src/jquery.ime.inputmethods.js"></script>

To add input method support to all editable elements:

$( 'textarea, [contenteditable], input[type=text], input[type=search], input:not([type])' ).ime();

jquery.ime provides a jquery plugin function $.fn.ime() to add input method support for any editable elements in a page.

Language selection API

Instead of using the default language selector, you can roll your own:

$myDiv= $( '.foo' );
$myDiv.ime( { showSelector: false } );
ime = $myDiv.data( 'ime' );
$elements.on( 'imeLanguageChange', function () { ... } );
$elements.on( 'imeMethodChange', function () { ... } );

currentLanguageCode = ime.getLanguage();
currentLanguageName = ime.getAutonym( currentLanguageCode );
allLanguageCodes = ime.getLanguageCodes();
inputMethods = ime.getInputMethods( currentLanguageCode );
ime.setIM( inputMethods[ 0 ].id );

See examples/ced/ced.html for a more complete example.

Running

-If you have python installed, run -bash python3 -m http.server -

Alternatively, many programming languages provide one liner commands to start a simple http static servers. You can use any one of them and, you can access examples from

http://localhost:8000/examples/index.html

Alternatively you can use tools like webfsd. If you know how to use advanced web servers like Apache or Nginx, you already know how to put the code in a webserver.

Plugin Options

Option Description
imePath Relative/Absolute path for the rules folder of jquery.ime. Default value: '../'
languages Languages to be used- by default all languages. Default value: []. Eg: ['hi', 'ml']. It can also be a function returning an array.
helpHandler Called for each ime option in the menu, default value: null
showSelector Whether the input method selector to be used or not. Default value is true

Browser extensions

This input tool is also available as a browser extension:

For Developers

Read rules/README.md to learn how to write an input method for a language.

Read test/README.md to learn how to write and run tests for an input method.

Read the technical specification of the project from wiki.

Do watch the code walkthrough by Chris Forno: http://www.youtube.com/watch?v=LPec-KIBVeI

License

This project is dual licensed with GPLv2+ and MIT license. See the license files in the source code for more details.

jquery.ime's People

Contributors

abijeet avatar amire80 avatar bennylin avatar dependabot[bot] avatar divec avatar edg2s avatar eroux avatar ghybu avatar gyan111 avatar jdforrester avatar jeblad avatar kartikm avatar mirontoli avatar mjbmr avatar mooeypoo avatar nikerabbit avatar omshivaprakash avatar pauginer avatar pnemade avatar pravee-n avatar psubhashish avatar samyakbhuta avatar santhoshtr avatar siebrand avatar singitur avatar springrollconan avatar srikanthlogic avatar vikynandha avatar xelgen avatar yuvipanda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.ime's Issues

kok is a macro-language code

kok for Konkani is a macro-language code. It is currently not supported in ULS. It must be decided whether to use kok, or maybe some of the gom codes, or to implement some other solution for identifying Konkani.

Compact input language list by showing recently used languages + "more" option

Users tend to use a small set of languages when writing (typically less than 6).
The "Other languages" section is a single list composed of the supported input languages (typically a lot more than 6). A user hat often switches between Russian and Hebrew will be forced to scan a long list each time.

For lists longer than 10 elements we can show initially the first 6 elements (based on previous choices) and a "more" option represented by an ellipsis. When the user clicks the more option (or hovers it or scrolls down), more items become available in the list. In addition, the more option should disappear and any scrolling aid should appear to help the user scan the longer list.

AltGr+M doesn't create a µ

Logged at https://bugzilla.wikimedia.org/45149. There's also some code there: http://bug-attachment.wikimedia.org/attachment.cgi?id=11811

Diff is small, so copying it here:

diff --git a/lib/jquery.ime/jquery.ime.js b/lib/jquery.ime/jquery.ime.js
index 670aa93..f5918e2 100644
--- a/lib/jquery.ime/jquery.ime.js
+++ b/lib/jquery.ime/jquery.ime.js
@@ -924,7 +924,7 @@
function isShortcutKey ( event ) {
// 77 - The letter M, for Ctrl-M
// 13 - The Enter key

  •   return event.ctrlKey && ( event.which === 77 || event.which === 13 );
    
  •   return event.ctrlKey && !event.altKey && ( event.which === 77 || event.which === 13 );
    

    }

    function isDOMAttrModifiedSupported () {

Present "System input method" option as a "Disable input method" action

Presenting "System input method" as an input method option is technically correct, but from the user perspective the main function for this option is to disable any input help and can be presented as such (and only when it is needed):

  • The action can be labeled as "Disable input methods" and styled as a link.
  • The action should be only shown when there is an input method selected.
  • When there is no input method selected, the action won't be shown and the CTR+M shortcut can be placed on the last used input method.
  • If there is no other input method, a grayed text indicating "No input methods available" can be shown.

Toggle does not work once IME disabled and focus re-enters

Steps to reproduce:

  1. select an input method
  2. Use control+m to disable
  3. Move focus somewhere else and come back to same input method
  4. press control+m again - input method from step 1 is supposed to be selected. It is not happening. Input method is still disabled.

fonipa is not a valid language code

fonipa for IPA is not a valid ISO-639 language code, so it doesn't work well with ULS. It's a valid BCP 47 suffix. Something smarter is needed for identifying IPA.

The application of dead key and the input methods' name

I am here to open a discussion about the application of dead keys and the name of some input methods.

Dead key is a special type of modifier keys which you can find in some keyboard layouts designed for the European languages. It is used to attach diacritics to the base letter. When we press the key, nothing is typed. But if we press the key before we type the base letter, the letter with diacritic is input. For example, in Turkish Q-keyboard, "Ctrl+Alt+[" +"u"="ü". But, no keyboard layouts for the Jquery IME is equipped with the dead keys. How can we applicate the dead keys in the IMEs?

Besides that, in the file "jquery.ime.inputmethods.js", some input methods' name is not understandable. The problem is originated from the commits by sucheta92. For example, the Lao IME is named as "າຶກ"; that's not understandable. Though I can't understand Lao very well, but I know that it is similar to the Thai script. We cannot use the vowel "າ" and "ຶ" alone to represent a syllable. However, if we add the consonant before/after/beneath/on top of the vowel, we can use the compound to represent the syllable - for example, "ອາ" represents the syllable "a". Then, the IME should be renamed as "ພາສາລາວ" (Lao language) or something else - but it should be understandable for the native user of the languages. I am sure we can solve that we the help of native speakers of these languages.

Focus back to text input when input language/method is changed

After changing an input method or language, the user should be able to continue editing at the point he was before the operation. This is true when using keyboard shortcuts but it should be also when change is done using the mouse. Otherwise, the user has to click again in the input area and go back to the point where he was editing, making the editing experience less fluent.

This involves:

  • Moving the input focus to the input field/text area.
  • Moving the editing cursor to the position it was before leaving the text area.

Donot save isDirty

the preference data that is saved is the registry object. Currently it has isDirty member. It is used only to do conditional saving and should be part of preference object and not part of registry.

IME Selector sets wrong IME when changing languages

The selector causes a bug while alternating between languages. May be related to issue #20.

http://awesomescreenshot.com/0c6k874eb

Steps to reproduce :

Choose Hindi language, transilteration is defaulted.
Disable IME using Control M, now system becomes default to Hindi
Chose Tamil language,, transilteration is defaulted.
Disable IME using Control M, now system becomes default to Tamil
Chose Kannada language,, transilteration is defaulted.
Change back to Hindi, expectation is system to be defaulted. Works fine
Control M, loads Kannada Transliteration while chosen language in Hindi -> Bug

Improve performance of replaceText in non-IE browsers

replaceText function in jquery.ime.js replaces the entire text content of editable field (input, textarea) in every keypress. This was an unfortunate step to avoid browsers bug that prevent programmatic caret positioning inside ligature.

Ref Bug https://bugs.webkit.org/show_bug.cgi?id=66630

But this issue can be solved by a tricky workaround as illustrated in santhoshtr@03602f4#L0R509

If caret cannot placed inside ligature, go back to previous positions step by step till a place found where caret can be placed. Adjust that offset in the text to replace.

Discussions about IMEs' porting for Asian Languages

Currently, Different IMEs have been ported as parts of jquery.ime. These included IMEs of Indic languages, Russian and Mongolian of Outer Mongolia (which use Cyrillic Script as their writing system), as well as some Scandinavian languages. As a contributor, I am quite pleased to see the development of jquery.ime.

My country - China is among the BRICS countries, as well as India. In China, the main language - Chinese language employs the Chinese script as its writing system (though different types of romanisation scheme have been introduced to help foreigners to pronounce Chinese words, such as Pinyin which is introduced in 1958). The Chinese script is the most complicated writing system that I have ever seen since my birth. It has about 5,000 - 10,000 characters. Currently, the IMEs which are used to type Chinese are not perfect - Lots of Chinese characters shared the same pronunciation (for example, 中,which means centre, China, etc; and 終, which means final, are pronounced as zhong in Mandarin Chinese), when some of them have similar outlooks (for example, 日, which means sun, day, etc; and 曰, an archaic expression of the verb "say"), such that when you use the shape-based Chinese IMEs, their codings are the same. Most of Chinese IMEs have this function: if you type the pronunciation or the code for the Chinese character, a box will be shown and the candidate characters (or even phrases) are shown in the box. However, as a Wikimedian who is not experted in computing, I have no idea for how to turn this concept into reality for the Chinese IME of jquery.ime. Thus, I am not going to develop the Chinese IME for jquery.ime, until someone do what I want to do.

Some Asian languages employs Latin script as their writing system (e.g. Malay, Indonesian, Tagalog, as well as Zhuang language, which is mainly used by a ethnic group in Guangxi, China). I think it will be easy to develop IMEs for these languages.

Vietnamese's script is derived from Latin script (namely Quốc ngữ). Different diacritics and additional letters are used to represent the tones and specific vowels or consonants in the Vietnamese language. Different IMEs are used in Vietnam to type Vietnamese script (it is said that the most popular one is called Telex). This month, I will work for a Vietnamese Telex IME for jquery.ime.

Besides that, I will also work for a Thai IME (based on Kedmanee keyboard keyout) and a Lao IME for jquery.ime.

What's your opinion about that? You are welcomed to comment that and I am pleased to see it.

Delay in switching between different languages

Firstly, I selected Hindi as the language and it got displayed pretty quickly. Then on selecting Sanskrit, there was a delay of about 3 seconds and then it got displayed. Sometimes, after switching to some other language, there is a delay, the icon disappears and then on clicking the text box again, the icon appears and the new language selected gets displayed. Happens in case of only some of the languages.

Support for Backspace rules in Input methods

Support needed for advanced backspace rules such as:
Backspace($1 $2): delete $1, return $2;

if (this == ি॥ে॥ৈ && previous == consonant ){
swap the value of this and previous;
delete this;
}

Allow Recursive Transliteration from a Transliteration Callback.

'[a-z][0-9]', function(input){
return tras($1+trans($2));
}

Required for porting bn-disha to jquery.ime, wherein there is a requirement to make a recursive callback to the transliterate method to for a range of characters.

Example:-
For a range of consonants inputs, the following result is required:-

['ি([b-d])', 'i', trans($1)ি}],

Random behaviour on Enable/Disable in Translatewiki

I tried to use this tool from translatewiki.net and faced the following issues,

  • When a message is opened the shortcut key do not work and the IME icon was not there (had to enable it from the top ULS)
  • After opening the next window the changed layout name remains same but the IME was not enabled
    ** here if i select the text area again with the mouse then IME works
  • Sometimes in the next window the IME icon in the visible and if i open a new text area (like Summery field) and select the translation area again it works properly

Input method naming inconsistent

Input method naming currently very inconsistent - some are in latin, some in the method's language. Some include the name of the language, but some do not. Some consistency would be nice.

The operational problems of the Mongolian IME

In the Mongolian Cyrillic IME, the Capital letters "К", "Ъ", "Д", "Ь", "В", "Ю" can't be input even the Caps Lock is open. The solution is to press the shift lock with the required key. But it looks so strange - in Mongolian Cyrillic keyboard, it works normally. I am seeking for someone to solve the problem. Thanks.

Example is broken

Firefox 18.0.2, 32-bit, Ubuntu Precise

Steps to reproduce

  1. git clone https://github.com/wikimedia/jquery.ime.git
  2. Open Firefox (tested in pristine profile) and browse to jquery.ime/examples/index.html
  3. Click on the text area and select any input method (e.g. Cyrillic) in the popup menu.
  4. Type anything into the text area.

Expected

Text is typed according to the selected input method (e.g. Cyrillic).

Actual

Text appears in the Latin alphabet, as though the input method is disabled.

Jquery IME selector doesn't appear near facebook Chat window

In facebook chat window ime lanaguage selector appears at right bottom corner. As a result language selector isn't displayed in visible area, but if one scrolls the page ime appears.

Suggestion

If ime selector is available above the input/textarea it will be intuitive.

Invalid patterns in 'sk' layout

In JS error log I have lots of
Uncaught SyntaxError: Invalid regular expression: /+'a$/: Nothing to repeat

I think the + characters should be escaped.

Indicate that the "Other languages" list can be scrolled

When the list of other languages contains more languages that shown appropriate affordances are needed to indicate that it can be scrolled. This can be done by either:

  • Adding scrollbars to the language list
  • Show scrollbars when the user hovers the "other language list, and adjust the size so that the last element in the list is partially shown to indicate that there are more elements (which is useful for touch interaction).

The first approach is simpler and, if the list is initially compacted (as suggested in issue #19 ) scrollbars will be shown only when expanding the list.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.