Fixes wikimedia#281. Moving into seperate folder.

- Also, Javascript and CSS code in their own files.
satwiki · Sep 14, 2013 · b9bdbfb · b9bdbfb
1 parent 2646b9f
commit b9bdbfb
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 141 deletions.
diff --git a/examples/ced.html b/examples/ced.html
diff --git a/examples/ced/ced.html b/examples/ced/ced.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>jQuery IME example</title>
+	<meta name="author" content="Santhosh Thottingal" />
+	<link href="../../css/jquery.ime.css" rel="stylesheet" />
+	<link href="style.css" rel="stylesheet" />
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
+	<script src="../../libs/rangy/rangy-core.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>
+	<script src="script.js"></script>
+</head>
+
+<body>
+	<div>
+		<header>
+			<h1>jQuery IME example</h1>
+		</header>
+		<div id='container'>
+			<div id="toolbar">
+				<div class='langselector'>
+					<select name="language" id="language">
+					</select>
+				</div>
+				<div class='imeSelector'>
+					<select id="imeSelector"></select>
+				</div>
+				<button id='bold'>B</button>
+				<button id='italic'>I</button>
+				<button id='underline'>U</button>
+			</div>
+			<div contenteditable="true" id="ced"></div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/examples/ced/script.js b/examples/ced/script.js
@@ -0,0 +1,51 @@
+$( document ).ready( function () {
+	var ime, inputmethods, languages, $imeSelector, $langselector;
+
+	$( '#ced' ).ime({ imePath: '../../' });
+
+	$( '#bold' ).click( function () {
+		document.execCommand( 'bold', false, null );
+	} );
+
+	$( '#italic' ).click( function () {
+		document.execCommand( 'italic', false, null );
+	} );
+
+	$( '#underline' ).click( function () {
+		document.execCommand( 'underline', false, null );
+	} );
+
+	// get an instance of inputmethods
+	imeselector = $( '#ced' ).data( 'imeselector' );
+	imeselector.$imeSetting = $([]);
+	languages = $.ime.languages;
+	// Also test system inputmethods.
+	$imeSelector = $( 'select#imeSelector' );
+	$langselector = $( 'select#language' );
+
+	function listinputmethods ( language ) {
+		var inputmethods  = $.ime.languages[language].inputmethods;
+		$imeSelector.empty();
+		$.each( inputmethods, function ( index, inputmethodId ) {
+			var inputmethod = $.ime.sources[inputmethodId];
+			$imeSelector.append( $( "<option></option>" )
+				.attr( "value", inputmethodId ).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 );
+	} );
+	$langselector.on( 'change', function () {
+		var language = $langselector.find( 'option:selected' ).val();
+		imeselector.selectLanguage( language );
+		listinputmethods( language );
+	} );
+} )
diff --git a/examples/ced/style.css b/examples/ced/style.css
@@ -0,0 +1,44 @@
+div#toolbar {
+	background-color: #F9F9F9;
+	border: 1px solid #CCCCCC;
+	border-radius: 4px 4px 0 0;
+	overflow: hidden;
+	padding: 2px;
+	position: relative;
+}
+
+div#ced {
+	border: 1px solid #CCCCCC;
+	border-radius: 0 0 4px 4px;
+	height: 250px;
+	langselector line-height: 1.5em;
+	overflow: auto;
+	padding: 10px 5px;
+	text-align: left;
+	font-size: 16px;
+}
+
+select {
+	width: 200px;
+	height: 25px;
+}
+
+.langselector,.imeSelector {
+	float: left;
+	display: block;
+	padding-right:5px;
+}
+
+#bold {
+	font-weight: bold;
+}
+
+#italic {
+	font-style: italic;
+	font-weight: bold;
+}
+
+#underline {
+	text-decoration: underline;
+	font-weight: bold;
+}