dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
182 lines • 4.67 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Test Bidi Engine</title>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<script language="javascript" type="text/javascript">
var doTransform, showMap, changeInp;
require(["dojox/string/BidiEngine"], function(BidiEngine) {
var bdEngine = new BidiEngine();
doTransform = function() {
var txt = document.getElementById("inp").value;
document.getElementById("div0").innerHTML = txt;
document.getElementById("div1").innerHTML = txt;
var sp = document.getElementById("sform").value +
document.getElementById("sdir").value +
document.getElementById("sswap").value +
document.getElementById("sshap").value + "N";
var tp = document.getElementById("tform").value +
document.getElementById("tdir").value +
document.getElementById("tswap").value +
document.getElementById("tshap").value + "N";
document.getElementById("div11").innerHTML = sp + " - " + tp;
var rCls = sp.substring(0,2).toLowerCase();
var tCls = tp.substring(0,2).toLowerCase();
document.getElementById("div0").className = rCls;
document.getElementById("div2").className = tCls;
var res = bdEngine.bidiTransform(txt, sp, tp);
document.getElementById("div2").innerHTML = res;
document.getElementById("div3").innerHTML = res;
var arrays = [bdEngine.sourceToTarget, bdEngine.targetToSource, bdEngine.levels];
var divNames = ["div5", "div6", "div7"];
for (var i=0; i<3; i++) {
showMap(arrays[i], divNames[i]);
}
};
showMap = function (arr, divName) {
var map = "", sps;
for (var i=0; i<arr.length; i++) {
sps = "";
if (arr[i].toString().length < 2)
sps = " ";
map = map + sps + arr[i].toString() + " ";
}
document.getElementById(divName).innerHTML = map;
};
changeInp = function(b) {
if (b.innerHTML == "Visual") {
document.getElementById("inp").className = "v";
b.innerHTML = "Logical";
} else {
document.getElementById("inp").className = "i";
b.innerHTML = "Visual";
}
}
});
</script>
<style>
.il {
direction: ltr;
unicode-bidi: embed;
}
.vl {
direction: ltr;
unicode-bidi: bidi-override;
}
.ir {
direction: rtl;
unicode-bidi: embed;
text-align: left;
}
.vr {
direction: rtl;
text-align: left;
unicode-bidi: bidi-override;
}
input.v {
unicode-bidi: bidi-override;
}
input.i {
unicode-bidi: normal;
}
</style>
</head>
<body>
<h1 align="center">Test Bidi Engine</h1>
</br></br>
<table>
<tr>
<td>Type text: </td>
<td><input id="inp" type="text" size=200 /></td>
<td><button id="b2" onClick="changeInp(this);">Visual</button></td>
</tr>
<tr>
<td>Source looks: </td>
<td><div id="div0"></div></td>
</tr>
<tr>
<td> Buffer: </td>
<td><div id="div1" style="unicode-bidi: bidi-override;"></div></td>
</tr>
<tr>
<td> Params: </td>
<td><div id="div11"></div></td>
</tr>
<tr><td></br></br></td></tr>
<tr>
<td>Result looks: </td>
<td><div id="div2"></div></td>
</tr>
<tr>
<td> Buffer: </td>
<td><div id="div3" style="unicode-bidi: bidi-override;"></div></td>
</tr>
<tr>
<td>Maps </td>
<td><div id="div4"></div></td>
</tr>
<tr>
<td>Source to Target: </td>
<td><div id="div5" style="font-family: 'Courier New';"></div></td>
</tr>
<tr>
<td>Target to Source: </td>
<td><div id="div6" style="font-family: 'Courier New';"></div></td>
</tr>
<tr>
<td>Levels: </td>
<td><div id="div7" style="font-family: 'Courier New';"></div></td>
</tr>
</table>
</br></br>
<table>
<tr>
<table><tr>
<td>Source format:</td>
<td><select id="sform">
<option value="I">Implicit</option>
<option value="V">Visual</option>
</select></td>
<td><select id="sdir">
<option value="L">LTR</option>
<option value="R">RTL</option>
<option value="C">Contextual LTR</option>
<option value="D">Contextual RTL</option>
</select></td>
<td><select id="sswap">
<option value="Y">Y</option>
<option value="N">N</option>
</select></td>
<td><select id="sshap">
<option value="N">N</option>
<option value="S">S</option>
</select></td>
</tr>
<tr>
<td>Target format:</td>
<td><select id="tform">
<option value="V">Visual</option>
<option value="I">Implicit</option>
</select></td>
<td><select id="tdir">
<option value="L">LTR</option>
<option value="R">RTL</option>
<option value="C">Contextual LTR</option>
<option value="D">Contextual RTL</option>
</select></td>
<td><select id="tswap">
<option value="N">N</option>
<option value="Y">Y</option>
</select></td>
<td><select id="tshap">
<option value="N">N</option>
<option value="S">S</option>
</select></td>
</tr></table>
</tr>
</table>
</br>
<button id="b1" height="50px" onClick="doTransform();">Go</button>
</body>
</html>