-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
109 lines (109 loc) · 4.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="A Javascript implementation of Sayura quasi-transliteration scheme for Sinhala script.">
<title>Sayura.js Demo</title>
<script type="text/javascript" src="sayura.js"></script>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
}
#wrapper{
width:425px;
margin:0 auto;
}
@media (max-width: 425px) {
#wrapper{
width: 100%;
margin: 0 auto;
}
}
h1{
font-size: 20px;
}
.bodyText{
font-size: 14px;
color: #666;
}
.bodyText a{
color: #333;
}
.fineprint{
font-size: 12px;
color: #666;
}
#ta{
margin-bottom:20px;
width: 400px;
height: 100px;
}
#ce {
margin-bottom:20px;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: -webkit-small-control;
font: medium -moz-fixed;
height: 100px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
#it {
font: medium -moz-fixed;
font: -webkit-small-control;
border: 1px solid gray;
width: 400px;
margin-bottom:20px;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to main</a>
<div id="wrapper">
<h1>~~~Sayura.js~~~</h1>
<p class="bodyText">Type in the text box to have your text converted to sinhala*.</p>
<main id="main">
<label>
Textarea:
<textarea id="ta" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
</label>
<label>
Contenteditable:
<div id="ce" role="textbox" contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
</label>
</main>
<label>
Text input:
<input id="it" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" >
</label>
<button id="sayuraToggle" onclick="sayura.toggle();toggleButtonText(this);">Disable Sayura</button>
<p class="bodyText">Need help with Sayura?</p>
<p class="bodyText">Try <a href="https://docs.google.com/viewer?url=http://www.sayura.net/im/sayura.pdf" target="_blank" rel="noopener" >Sayura typing guide by Anuradha</a> (Opens in google pdf viewer)</p>
<p class="bodyText">Try the experimental bookmarklet** <a href="javascript:(function(){javascript:(function(){if(window.toggleSayura===undefined){_sayura_js=document.createElement('script');_sayura_js.type='text/javascript';_sayura_js.src='https://raw.github.com/chanux/sayura.js/master/sayura.js';_sayura_js.onload=_sayura_js.onreadystatechange=function(){sayura();};document.getElementsByTagName('head')[0].appendChild(_sayura_js);};if(window.key===undefined){_key_master=document.createElement('script');_key_master.type='text/javascript';_key_master.src='http://cdnjs.cloudflare.com/ajax/libs/keymaster/1.6.1/keymaster.min.js';_key_master.onload=_key_master.onreadystatechange=function(){key.filter=function(){return true;};key('ctrl+x',function(){sayura.toggle();});};document.getElementsByTagName('head')[0].appendChild(_key_master);};})();})();">Sayurajs</a>
<p class="bodyText">..Oh and fork me on <a href="https://github.com/chanux/sayura.js">Github</a>
<p class="fineprint">*You need to have a sinhala unicode font installed.</p>
<p class="fineprint">**Load the bookmarklet and press ctrl+x to activate/deactivate sayura.</p>
</div>
<script type="text/javascript">
function toggleButtonText(el){
el.innerHTML = (el.innerHTML) == "Disable Sayura" ? "Enable Sayura" : "Disable Sayura";
}
</script>
</body>
</html>