359 lines
9.7 KiB
JavaScript
359 lines
9.7 KiB
JavaScript
import Hemex from "./Hemex.js"
|
|
|
|
const style = document.createElement("style")
|
|
document.head.append(style)
|
|
|
|
style.sheet.insertRule(`
|
|
.expol-container{
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
border: solid 1px black;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol-container .expol{
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
min-height: 1em;
|
|
font-family: inherit;3em
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
`)
|
|
|
|
/**
|
|
* @type {CSSRule}
|
|
*/
|
|
let fontRule = Array.from(style.sheet.cssRules).filter(e => e.selectorText == '.expol-container .expol')[0]
|
|
|
|
function updateFont(family,size,weight)
|
|
{
|
|
fontRule.style.fontFamily = family
|
|
fontRule.style.fontSize = size
|
|
fontRule.style.fontWeight = weight
|
|
}
|
|
|
|
style.sheet.insertRule(`
|
|
.expol .viewport{
|
|
position: absolute;
|
|
top: 0px;
|
|
left:0;
|
|
right:0;
|
|
height:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0
|
|
margin: 0;
|
|
color: black;
|
|
z-index: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol .textinput{
|
|
position: absolute;
|
|
top: 0px;
|
|
left:0;
|
|
right:0;
|
|
height:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: transparent;
|
|
z-index: 1;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
outline: none;
|
|
caret-color: black;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol pre{
|
|
margin: 0;
|
|
font-family: inherit;
|
|
display: inline;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol .col1{
|
|
color: #00a902;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol .col2{
|
|
color: #ff0000;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol .col3{
|
|
color: black;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol .col4{
|
|
color: black;
|
|
opacity: 0.5;
|
|
}
|
|
`)
|
|
style.sheet.insertRule(`
|
|
.expol .col5{
|
|
text-decoration: underline;
|
|
color: #0016ff;
|
|
}
|
|
`)
|
|
|
|
updateFont("monospace","2em","500")
|
|
|
|
let container = document.createElement("div")
|
|
container.classList.add("expol-container")
|
|
document.body.appendChild(container)
|
|
|
|
let expol = document.createElement("div")
|
|
expol.classList.add("expol")
|
|
container.appendChild(expol)
|
|
|
|
let viewport = document.createElement("pre")
|
|
viewport.classList.add("viewport")
|
|
expol.appendChild(viewport)
|
|
|
|
let textinput = document.createElement("pre")
|
|
textinput.classList.add("textinput")
|
|
textinput.contentEditable = true
|
|
expol.appendChild(textinput)
|
|
textinput.addEventListener("keyup",synctoViewPort)
|
|
textinput.addEventListener("keypress",synctoViewPort)
|
|
textinput.addEventListener("keydown",synctoViewPort)
|
|
textinput.addEventListener("paste",(pasteevent)=>{
|
|
let text = pasteevent.clipboardData.getData('text/plain')
|
|
textinput.innerText = text
|
|
synctoViewPort()
|
|
pasteevent.preventDefault()
|
|
})
|
|
|
|
function synctoViewPort()
|
|
{
|
|
let fragment = renderColorizer(textinput.innerText)
|
|
for (const child of Array.from(viewport.childNodes))
|
|
{
|
|
child.remove()
|
|
}
|
|
viewport.append(fragment)
|
|
}
|
|
|
|
function renderColorizer(text)
|
|
{
|
|
let fragment = document.createDocumentFragment()
|
|
let hmx = new Hemex()
|
|
hmx.setText(text)
|
|
let blank = true
|
|
|
|
let query = []
|
|
let term = []
|
|
|
|
hmx.syntax("term",function(hmx,result){
|
|
if(hmx.isChar('-'))
|
|
{
|
|
hmx.nextChar()
|
|
let name = hmx.of(() => hmx.isLetterRegex() || hmx.isNumber() || hmx.includes(['-','_']))
|
|
let operator = 'has'
|
|
let value = ""
|
|
if(name)
|
|
{
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col1")
|
|
pre.setAttribute("role","name")
|
|
let textDoc = document.createTextNode('-' + name)
|
|
pre.appendChild(textDoc);
|
|
fragment.appendChild(pre)
|
|
}else{
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col1")
|
|
pre.setAttribute("role","name")
|
|
let textDoc = document.createTextNode('-');
|
|
pre.appendChild(textDoc);
|
|
fragment.appendChild(pre)
|
|
}
|
|
|
|
let k
|
|
if(k = hmx.includes([':','>','<','>=','<=','!=']))
|
|
{
|
|
operator = k[0]
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col2")
|
|
pre.setAttribute("role","operator")
|
|
let textDoc = document.createTextNode(k[0])
|
|
pre.appendChild(textDoc)
|
|
fragment.appendChild(pre)
|
|
hmx.nextChar()
|
|
value = hmx.give('strorword')
|
|
}
|
|
|
|
query.push({
|
|
query:[name,operator,value]
|
|
})
|
|
|
|
return true
|
|
}
|
|
})
|
|
|
|
hmx.syntax("mention",function(hmx,result){
|
|
if(hmx.isChar('@'))
|
|
{
|
|
hmx.nextChar()
|
|
let name = hmx.of(() => hmx.isLetterRegex() || hmx.isNumber() || hmx.includes(['-','_']))
|
|
|
|
if(name)
|
|
{
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col5")
|
|
pre.setAttribute("role","mention")
|
|
let textDoc = document.createTextNode('@' + name)
|
|
pre.appendChild(textDoc);
|
|
fragment.appendChild(pre)
|
|
}else{
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col5")
|
|
pre.setAttribute("role","mention")
|
|
let textDoc = document.createTextNode('@');
|
|
pre.appendChild(textDoc);
|
|
fragment.appendChild(pre)
|
|
}
|
|
|
|
query.push({
|
|
mention: name
|
|
})
|
|
|
|
return true
|
|
}
|
|
})
|
|
|
|
// cute --username:"absorbe"
|
|
|
|
hmx.syntax("strorword",function(hmx,result){
|
|
let k = hmx.includes(['\'','"','`'])
|
|
if(k.length == 0 || k == false){
|
|
let name = hmx.of(() => !hmx.isWhiteSpace())
|
|
if(name)
|
|
{
|
|
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col3")
|
|
pre.setAttribute("role","value")
|
|
let textDoc = document.createTextNode(name||"");
|
|
pre.appendChild(textDoc)
|
|
fragment.appendChild(pre)
|
|
result(name||false)
|
|
|
|
}
|
|
return true
|
|
}else{
|
|
let char = hmx.getChar()
|
|
hmx.nextChar()
|
|
let name = hmx.of(() => !hmx.isChar(char))
|
|
let kt = "";
|
|
if(name)
|
|
{
|
|
result(name||false)
|
|
|
|
kt = char + name;
|
|
if(hmx.isChar(char)){
|
|
hmx.nextChar()
|
|
kt += char;
|
|
}
|
|
}else{
|
|
kt += char;
|
|
hmx.nextChar()
|
|
}
|
|
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col3")
|
|
pre.setAttribute("role","value")
|
|
let textDoc = document.createTextNode(kt)
|
|
pre.appendChild(textDoc)
|
|
fragment.appendChild(pre)
|
|
return true
|
|
}
|
|
})
|
|
|
|
hmx.syntax("scope",function(hmx,result){
|
|
let description = []
|
|
hmx.while(()=>{
|
|
switch(hmx.getChar())
|
|
{
|
|
case "-":{
|
|
if(description.length)
|
|
{
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col4")
|
|
pre.setAttribute("role","description")
|
|
let textDoc = document.createTextNode(description.join(''))
|
|
pre.appendChild(textDoc)
|
|
fragment.appendChild(pre)
|
|
|
|
if(description.join('').trim().length) term.push(description.join(''))
|
|
description = []
|
|
}
|
|
if(blank)
|
|
{
|
|
hmx.give("term")
|
|
return true
|
|
}
|
|
}
|
|
case "@":{
|
|
if(description.length)
|
|
{
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col4")
|
|
pre.setAttribute("role","description")
|
|
let textDoc = document.createTextNode(description.join(''))
|
|
pre.appendChild(textDoc)
|
|
fragment.appendChild(pre)
|
|
|
|
if(description.join('').trim().length) term.push(description.join(''))
|
|
description = []
|
|
}
|
|
if(blank)
|
|
{
|
|
hmx.give("mention")
|
|
return true
|
|
}
|
|
}
|
|
default:{
|
|
blank = hmx.isWhiteSpace()
|
|
description.push(hmx.getChar())
|
|
hmx.nextChar()
|
|
return true
|
|
}
|
|
}
|
|
})
|
|
|
|
if(description.length)
|
|
{
|
|
if(description.join('').trim().length) term.push(description.join(''))
|
|
|
|
let pre = document.createElement("pre")
|
|
pre.classList.add("col4")
|
|
pre.setAttribute("role","description")
|
|
let textDoc = document.createTextNode(description.join(''))
|
|
pre.appendChild(textDoc)
|
|
fragment.appendChild(pre)
|
|
}
|
|
|
|
query.push({
|
|
term
|
|
})
|
|
})
|
|
|
|
hmx.give('scope')
|
|
|
|
console.log("Query:",query)
|
|
|
|
return fragment
|
|
} |