Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add turkish language #25

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,7 @@ $(document).ready(function(){
$(document).ready(function(){
$('textarea#example-6').mlKeyboard({layout: 'pt_PT', trigger: '#example-6-btn'});
});

$(document).ready(function(){
$('input#example-7').mlKeyboard({layout: 'tr_TR', trigger: '#example-7-btn'});
});
308 changes: 165 additions & 143 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,162 +2,184 @@

<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="utf-8">

<title>jQuery Multilanguage Keyboard</title>
<title>jQuery Multilanguage Keyboard</title>

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="jquery.ml-keyboard.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="jquery.ml-keyboard.css">
<link rel="stylesheet" type="text/css" href="demo.css">

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.ml-keyboard.js"></script>
<script src="demo.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.ml-keyboard.js"></script>
<script src="demo.js"></script>
</head>

<body>
<div class="container">
<h2 class="page-header">jQuery MultiLanguage keyboard</h2>
<i>Current version 0.0.1</i>
<h4>ML Keyboard usage examples</h4>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>English</h4>
<input type="text" id="example-1" class="col-md-12" placeholder="Try"/>
<div class='code'>
<code>
$('input#example-1').mlKeyboard({<br/>
&nbsp;&nbsp;layout: 'en_US'<br/>
});
</code>
</div>
<div class="container">
<h2 class="page-header">jQuery MultiLanguage keyboard</h2>
<i>Current version 0.0.1</i>
<h4>ML Keyboard usage examples</h4>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>English</h4>
<input type="text" id="example-1" class="col-md-12" placeholder="Try" />
<div class='code'>
<code>
$('input#example-1').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'en_US'<br />
});
</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>Russian</h4>
<input type="text" id="example-2" class="col-md-12" placeholder="Try" />
<div class='code'>
<code>
$('input#example-2').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'ru_RU'<br />
});
</code>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="example-block">
<h4>Russian</h4>
<input type="text" id="example-2" class="col-md-12" placeholder="Try"/>
<div class='code'>
<code>
$('input#example-2').mlKeyboard({<br/>
&nbsp;&nbsp;layout: 'ru_RU'<br/>
});
</code>
</div>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>
Spanish
<i>(click vowels to select accents)</i>
</h4>
<input type="text" id="example-3" class="col-md-12" placeholder="Try" />
<div class='code'>
<code>
$('input#example-3').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'es_ES'<br />
});
</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>
Italian
<i>(click vowels to select accents)</i>
</h4>
<input type="text" id="example-4" class="col-md-10" placeholder="Try" />
<a href='#' id="example-4-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-4').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'it_IT',<br />
&nbsp;&nbsp;trigger: '#example-4-btn'<br />
});
</code>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>
Spanish
<i>(click vowels to select accents)</i>
</h4>
<input type="text" id="example-3" class="col-md-12" placeholder="Try"/>
<div class='code'>
<code>
$('input#example-3').mlKeyboard({<br/>
&nbsp;&nbsp;layout: 'es_ES'<br/>
});
</code>
</div>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>
French
<i>(click vowels to select accents)</i>
</h4>
<input type="text" id="example-5" class="col-md-10" placeholder="Try" />
<a href='#' id="example-5-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-5').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'fr_FR',<br />
&nbsp;&nbsp;trigger: '#example-5-btn'<br />
});
</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>
Text Area
<i>(click vowels to select accents)</i>
</h4>
<textarea type="text" id="example-6" class="col-md-10" placeholder="Try"></textarea>
<a href='#' id="example-6-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('textarea#example-6').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'pt_PT',<br />
&nbsp;&nbsp;trigger: '#example-6-btn'<br />
});
</code>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="example-block">
<h4>Italian
<i>(click vowels to select accents)</i></h4>
<input type="text" id="example-4" class="col-md-10" placeholder="Try"/>
<a href='#' id="example-4-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-4').mlKeyboard({<br/>
&nbsp;&nbsp;layout: 'it_IT',<br/>
&nbsp;&nbsp;trigger: '#example-4-btn'<br/>
});
</code>
</div>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>
Turkish
<i>(click vowels to select accents)</i>
</h4>
<input type="text" id="example-7" class="col-md-10" placeholder="Try" />
<a href='#' id="example-7-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-7').mlKeyboard({<br />
&nbsp;&nbsp;layout: 'tr_TR',<br />
&nbsp;&nbsp;trigger: '#example-7-btn'<br />
});
</code>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div class="example-block">
<h4>French
<i>(click vowels to select accents)</i></h4>
<input type="text" id="example-5" class="col-md-10" placeholder="Try"/>
<a href='#' id="example-5-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-5').mlKeyboard({<br/>
&nbsp;&nbsp;layout: 'fr_FR',<br/>
&nbsp;&nbsp;trigger: '#example-5-btn'<br/>
});
</code>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="page-header">Simple Usage</h3>
<ul>
<li>Download <code>jquery.ml-keyboard.min.js</code> and <code>jquery.ml-keyboard.css</code> files and add to your project.</li>
<li>Activate the plugin on the input fields with prefered layot <code>$('input').mlKeyboard({layout: 'es'});</code>.</li>
<li>It's ready.</li>
</ul>

<div class="col-md-6">
<div class="example-block">
<h4>Text Area
<i>(click vowels to select accents)</i></h4>
<textarea type="text" id="example-6" class="col-md-10" rows="10"></textarea>
<a href='#' id="example-6-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('textarea#example-6').mlKeyboard({<br/>
&nbsp;&nbsp;layout: 'pt_PT',<br/>
&nbsp;&nbsp;trigger: '#example-6-btn'<br/>
});
</code>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<h3 class="page-header">Simple Usage</h3>
<ul>
<li>Download <code>jquery.ml-keyboard.min.js</code> and <code>jquery.ml-keyboard.css</code> files and add to your project.</li>
<li>Activate the plugin on the input fields with prefered layot <code>$('input').mlKeyboard({layout: 'es'});</code>.</li>
<li>It's ready.</li>
</ul>

<h5>Options</h5>
<p>The following options are available to pass into ML Keyboard on initialization.</p>
<ul>
<li>
(string) <b>layout:</b> set layout which is applicable to all input fields. By default it has value 'en_us' what is equal to American English layout.
<h5>Others currently possible layouts</h5>
<ul id="layots_list">
<li><b>es</b> - Spanish</li>
<li><b>ru</b> - Russian</li>
</ul>
</li>
<li>(boolean) <b>active_shift:</b> when user first time focus on input field virtual keyboards shift is active. Default value - <b>true</b>.
<li>(boolean) <b>active_caps:</b> initial virtual keyboards caps lock state. Default value - <b>false</b>.
<li>(boolean) <b>is_hidden:</b> to create keyboard always visible this value should be changed to false. Default value - <b>true</b>.
<li>(integer) <b>speed: </b> is speed at what keyboard shows and hides. Default value - <b>300</b>.
</ul>
<p>To change behaviour of single input field special data attribute should be added to it's tag name <code>data-mlkeyboard-&lt;option&gt;="value"</code> where <code>option</code> is the same attribute like it's described before.
<h5>Options</h5>
<p>The following options are available to pass into ML Keyboard on initialization.</p>
<ul>
<li>
(string) <b>layout:</b> set layout which is applicable to all input fields. By default it has value 'en_us' what is equal to American English layout.
<h5>Others currently possible layouts</h5>
<ul id="layots_list">
<li><b>es</b> - Spanish</li>
<li><b>ru</b> - Russian</li>
</ul>
</li>
<li>(boolean) <b>active_shift:</b> when user first time focus on input field virtual keyboards shift is active. Default value - <b>true</b>.
<li>(boolean) <b>active_caps:</b> initial virtual keyboards caps lock state. Default value - <b>false</b>.
<li>(boolean) <b>is_hidden:</b> to create keyboard always visible this value should be changed to false. Default value - <b>true</b>.
<li>(integer) <b>speed: </b> is speed at what keyboard shows and hides. Default value - <b>300</b>.
</ul>
<p>
To change behaviour of single input field special data attribute should be added to it's tag name <code>data-mlkeyboard-&lt;option&gt;="value"</code> where <code>option</code> is the same attribute like it's described before.

<h3 class="page-header">Advanced Usage</h3>
<p>
By default plugin goes with all layouts included, but it's possible to customize plugin and left only some layouts as also new layouts can be easy added.
</p>
<p>
See document in docs folder.
</p>
</div>
<h3 class="page-header">Advanced Usage</h3>
<p>
By default plugin goes with all layouts included, but it's possible to customize plugin and left only some layouts as also new layouts can be easy added.
</p>
<p>
See document in docs folder.
</p>
</div>
</div>
</div>

</div>

</body>
</html>
58 changes: 58 additions & 0 deletions jquery.ml-keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -903,3 +903,61 @@ mlKeyboard.layouts.fr_FR = [
{} // Space
];

var mlKeyboard = mlKeyboard || {layouts: {}};

mlKeyboard.layouts.tr_TR = [
{d: '"', u: 'é'},
{d: '1',u: '!'},
{d: '2',u: '\''},
{d: '3',u: '^'},
{d: '4',u: '+'},
{d: '5',u: '%'},
{d: '6',u: '&'},
{d: '7',u: '/'},
{d: '8',u: '('},
{d: '9',u: ')'},
{d: '0',u: '='},
{d: '*',u: '?'},
{d: '-',u: '_'},
{}, // Delete
{}, // Tab
{d: 'q',u: 'Q'},
{d: 'w',u: 'W'},
{d: 'e',u: 'E'},
{d: 'r',u: 'R'},
{d: 't',u: 'T'},
{d: 'y',u: 'Y'},
{d: 'u',u: 'U'},
{d: 'ı',u: 'I'},
{d: 'o',u: 'O'},
{d: 'p',u: 'P'},
{d: 'ğ',u: 'Ğ'},
{d: 'ü',u: 'Ü'},
{d: '@',u: '₺'},
{}, // Caps lock
{d: 'a',u: 'A'},
{d: 's',u: 'S'},
{d: 'd',u: 'D'},
{d: 'f',u: 'F'},
{d: 'g',u: 'G'},
{d: 'h',u: 'H'},
{d: 'j',u: 'J'},
{d: 'k',u: 'K'},
{d: 'l',u: 'L'},
{d: 'ş',u: 'Ş'},
{d: 'i',u: 'İ'},
{}, // Return
{}, // Left shift
{d: 'z',u: 'Z'},
{d: 'x',u: 'X'},
{d: 'c',u: 'C'},
{d: 'v',u: 'V'},
{d: 'b',u: 'B'},
{d: 'n',u: 'N'},
{d: 'm',u: 'M'},
{d: 'ö',u: 'Ö'},
{d: 'ç',u: 'Ç'},
{d: '.',u: ':'},
{}, // Right shift
{} // Space
];
Loading