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.

Sign up for GitHub

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

Jump to bottom

add turkish language #25

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add turkish language #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b4453f
add turkish language
Nov 5, 2020
697e85e
added minify for turkish language
Nov 5, 2020
e0b6d1c
some changes
Nov 5, 2020
d62553b
turkish demo added
Nov 5, 2020
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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