Improve language and method selection API

santhoshtr · Mar 17, 2016 · 1db02ed · 1db02ed
1 parent 9316542
commit 1db02ed
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -21,29 +21,44 @@ Quick start
 git clone https://github.com/wikimedia/jquery.ime.git
 ```
 
-To add input method support to the editable fields of a web page:
+To add input method support to all editable elements:
 
 ```javascript
-$( 'textarea' ).ime();
+$( '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
+----------------------
 
-Example
--------
-See [an example](http://thottingal.in/projects/js/jquery.ime/examples/) page
-where jquery.ime in action.
-
-To try the example locally, after checking out the code, start a local webserver
-to serve the files. This is very easy.
+Instead of using the default language selector, you can roll your own:
 
-If you have python installed, run
-```bash
-python -m SimpleHTTPServer
+```javascript
+$myDiv= $( '.foo' );
+$myDiv.ime( { showSelector: false } );
+ime = $myDiv.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
+ python -m SimpleHTTPServer
+-```
+
 Alternatively, many programming languages provide one liner commands to start a simple http static servers. You can use [any one of them](https://gist.github.com/willurd/5720255).
 
 

diff --git a/examples/ced/ced.html b/examples/ced/ced.html
@@ -22,7 +22,7 @@ <h1>jQuery IME example</h1>
 		</header>
 		<div id='container'>
 			<div id="toolbar">
-				<div class='langselector'>
+				<div class='langSelector'>
 					<select name="language" id="language">
 					</select>
 				</div>

diff --git a/examples/ced/script.js b/examples/ced/script.js
@@ -1,9 +1,15 @@
 $( document ).ready( function () {
 	'use strict';
 
-	var imeselector, languages, $imeSelector, $langselector;
+	var $ced, ime, $imeSelector, $langSelector;
 
-	$( '#ced' ).ime({ imePath: '../../' });
+	$.ime.setPath( '../../' );
+	$ced = $( '#ced' );
+	// Initialise IME on this element
+	$ced.ime( { showSelector: false } );
+	// Get the IME object
+	ime = $ced.data( 'ime' );
+	ime.enable();
 
 	$( '#bold' ).click( function () {
 		document.execCommand( 'bold', false, null );
@@ -17,38 +23,42 @@ $( document ).ready( function () {
 		document.execCommand( 'underline', false, null );
 	} );
 
-	// get an instance of inputmethods
-	imeselector = $( '#ced' ).data( 'imeselector' );
-	imeselector.$imeSetting = $([]);
-	languages = $.ime.languages;
-	// Also test system inputmethods.
+	// language and input method list box widgets
+	$langSelector = $( 'select#language' );
 	$imeSelector = $( 'select#imeSelector' );
-	$langselector = $( 'select#language' );
 
-	function listinputmethods ( language ) {
-		var inputmethods = $.ime.languages[language].inputmethods;
+	ime.getLanguageCodes().forEach( function ( lang ) {
+		$langSelector.append(
+			$( '<option></option>' )
+				.attr( 'value', lang )
+				.text( ime.getAutonym( lang ) )
+		);
+	} );
+	$langSelector.on( 'change', function () {
+		var lang = $langSelector.find( 'option:selected' ).val() || null;
+		ime.setLanguage( lang );
+	} );
+	$ced.on( 'imeLanguageChange', function () {
+		listInputMethods( ime.getLanguage() );
+	} );
+
+	function listInputMethods( lang ) {
 		$imeSelector.empty();
-		$.each( inputmethods, function ( index, inputmethodId ) {
-			var inputmethod = $.ime.sources[inputmethodId];
-			$imeSelector.append( $( '<option></option>' )
-				.attr( 'value', inputmethodId ).text( inputmethod.name ) );
+		ime.getInputMethods( lang ).forEach( function ( inputMethod ) {
+			$imeSelector.append(
+				$( '<option></option>' )
+					.attr( 'value', inputMethod.id )
+					.text( inputMethod.name )
+			);
 		} );
 		$imeSelector.trigger( 'change' );
 	}
 
-	$.each( languages, function ( lang, language ) {
-		$langselector.append( $( '<option></option>' )
-			.attr( 'value', lang )
-			.text( language.autonym ) );
-	} );
 	$imeSelector.on( 'change', function () {
-		var inputmethod = $imeSelector.find( 'option:selected' ).val();
-		imeselector.selectIM( inputmethod );
-		imeselector.$element.focus();
-	} );
-	$langselector.on( 'change', function () {
-		var language = $langselector.find( 'option:selected' ).val();
-		imeselector.selectLanguage( language );
-		listinputmethods( language );
+		var inputMethodId = $imeSelector.find( 'option:selected' ).val();
+		ime.load( inputMethodId ).done( function () {
+			debugger;
+			ime.setIM( inputMethodId );
+		} );
 	} );
 } );
diff --git a/examples/ced/style.css b/examples/ced/style.css
@@ -23,7 +23,7 @@ select {
 	height: 25px;
 }
 
-.langselector,.imeSelector {
+.langSelector,.imeSelector {
 	float: left;
 	display: block;
 	padding-right:5px;