181 lines
4.2 KiB
HTML
181 lines
4.2 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
:root
|
|
{
|
|
--uwt-cursor-color: #fff;
|
|
}
|
|
@keyframes cursorblink
|
|
{
|
|
0%
|
|
{
|
|
border-right-color: var(--uwt-cursor-color);
|
|
}
|
|
50%
|
|
{
|
|
border-right-color: transparent;
|
|
}
|
|
100%
|
|
{
|
|
border-right-color: var(--uwt-cursor-color);
|
|
}
|
|
}
|
|
div.mcx-codebox
|
|
{
|
|
font-family: monospace;
|
|
}
|
|
span.mcx-code-instance
|
|
{
|
|
cursor: default;
|
|
text-underline-offset: 6px;
|
|
}
|
|
span.mcx-code-instance:hover
|
|
{
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
span.mcx-code-instance-title
|
|
{
|
|
color: #00aa00;
|
|
}
|
|
span.mcx-code-instance-id
|
|
{
|
|
color: #aaaa00;
|
|
}
|
|
|
|
span.mcx-code-line > *
|
|
{
|
|
padding: 4px;
|
|
}
|
|
|
|
span.uwt-selected
|
|
{
|
|
background-color: #0000aa;
|
|
animation-name: cursorblink;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
border-right-style: solid;
|
|
border-right-width: 2px;
|
|
border-right-color: #000000;
|
|
}
|
|
span.uwt-selected:empty
|
|
{
|
|
background-color: transparent;
|
|
padding: 4px 0px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
function TextEditor(parentElement)
|
|
{
|
|
this.ParentElement = parentElement;
|
|
|
|
window.addEventListener("keydown", function(e)
|
|
{
|
|
//console.log(e);
|
|
var sels = document.getElementsByClassName("uwt-selected");
|
|
var sel = null;
|
|
if (sels.length > 0)
|
|
{
|
|
sel = sels[0];
|
|
}
|
|
|
|
if (e.keyCode == 32 || e.keyCode == 61 || e.keyCode == 179 || (e.keyCode >= 48 && e.keyCode <= 59) || (e.keyCode >= 65 && e.keyCode <= 90))
|
|
{
|
|
var ps = sel.previousSibling;
|
|
if (ps)
|
|
{
|
|
var parent = ps.parentElement;
|
|
sel.remove();
|
|
ps.textContent += String.fromCharCode(e.keyCode);
|
|
parent.append(sel);
|
|
}
|
|
}
|
|
else if (e.keyCode == 37 || e.keyCode == 8) /* ArrowLeft | Backspace */
|
|
{
|
|
var ps = sel.previousSibling;
|
|
var pa = sel.nextSibling;
|
|
if (ps)
|
|
{
|
|
if (ps.nodeName === "#text")
|
|
{
|
|
var parent = ps.parentElement;
|
|
var before = ps.textContent;
|
|
var after = before.substring(before.length - 1);
|
|
if (pa)
|
|
{
|
|
after += pa.textContent;
|
|
pa.remove();
|
|
}
|
|
before = before.substring(0, before.length - 1);
|
|
if (e.keyCode == 8)
|
|
{
|
|
after = after.substring(1);
|
|
}
|
|
ps.remove();
|
|
sel.remove();
|
|
parent.append(document.createTextNode(before));
|
|
parent.append(sel);
|
|
parent.append(document.createTextNode(after));
|
|
//ps.textContent = after;
|
|
//parent.appendChild(sel);
|
|
}
|
|
|
|
if (sel.previousSibling.textContent == "")
|
|
{
|
|
sel.previousElementSibling.className = sel.previousElementSibling.className + " uwt-selected";
|
|
sel.remove();
|
|
}
|
|
}
|
|
}
|
|
else if (e.keyCode == 39) /* ArrowRight */
|
|
{
|
|
var ps = sel.previousSibling;
|
|
var pa = sel.nextSibling;
|
|
if (ps)
|
|
{
|
|
if (ps.nodeName === "#text")
|
|
{
|
|
var parent = ps.parentElement;
|
|
var before = ps.textContent;
|
|
var after = "";
|
|
if (pa)
|
|
{
|
|
after = pa.textContent.substring(1);
|
|
before = before + pa.textContent.substring(0, 1);
|
|
pa.remove();
|
|
}
|
|
ps.remove();
|
|
sel.remove();
|
|
parent.append(document.createTextNode(before));
|
|
parent.append(sel);
|
|
parent.append(document.createTextNode(after));
|
|
//ps.textContent = after;
|
|
//parent.appendChild(sel);
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
console.log("unhandled keyCode " + e.keyCode);
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener("load", function()
|
|
{
|
|
var items = document.getElementsByClassName("mcx-codebox");
|
|
for (var i = 0; i < items.length; i++)
|
|
{
|
|
items[i].NativeObject = new TextEditor(items[i]);
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="mcx-codebox">
|
|
|
|
<span class="mcx-code-line">SELECT * FROM <span class="mcx-code-instance"><span class="mcx-code-instance-title">`Method returning an Attribute`</span> <span class="mcx-code-instance-id">[1$132]</span></span> WHERE<span class="uwt-selected"></span></span>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |