Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Convert into class

Browse Source
This commit is contained in:
Simon Rozman 2024-02-06 15:34:00 +01:00
parent 01be8afcdf
commit e33fb6b8fc
1 changed files with 296 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
online-editor.js
View File

@ -1,55 +1,36 @@
const besUrl = 'http://localhost:225/api/v2/check' const besUrl = 'http://localhost:225/api/v2/check'
let besEditors = {} // Collection of all editors on page class BesEditor {
constructor(edit) {
this.el = edit
this.timer = null
this.children = []
window.onload = () => { this.proof(edit)
// Search and prepare all our editors found in the document.
document.querySelectorAll('.bes-online-editor').forEach(edit => {
let editor = {
el: edit,
timer: null,
children: []
}
besEditors[edit.id] = editor
besProof(editor, edit)
edit.addEventListener( edit.addEventListener(
'beforeinput', 'beforeinput',
e => besHandleBeforeInput(editor, e), e => this.handleBeforeInput(e),
false false
) )
edit.addEventListener('click', e => besHandleClick(editor, e)) edit.addEventListener('click', e => this.handleClick(e))
}) }
}
window.onresize = () => { // Recursively grammar-proofs one node.
Object.keys(besEditors).forEach(key => { async proof(el) {
let editor = besEditors[key]
editor.children.forEach(child => {
besClearAllMistakes(editor, child?.elements)
child.matches.forEach(match => {
const clientRect = besAddMistake(match.range, match)
match.rects = clientRect
})
})
})
}
// Recursively grammar-proofs one node.
async function besProof(editor, el) {
switch (el.nodeType) { switch (el.nodeType) {
case Node.TEXT_NODE: case Node.TEXT_NODE:
return [{ text: el.textContent, el: el, markup: false }] return [{ text: el.textContent, el: el, markup: false }]
case Node.ELEMENT_NODE: case Node.ELEMENT_NODE:
if (besIsBlockElement(el)) { if (BesEditor.isBlockElement(el)) {
// Block elements are grammar-proofed independently. // Block elements are grammar-proofed independently.
if (besIsProofed(editor, el)) { if (this.isProofed(el)) {
return [{ text: '<' + el.tagName + '/>', el: el, markup: true }] return [{ text: '<' + el.tagName + '/>', el: el, markup: true }]
} }
besClearAllMistakes(editor, el) this.clearAllMistakes(el)
let data = [] let data = []
for (const el2 of el.childNodes) { for (const el2 of el.childNodes) {
data = data.concat(await besProof(editor, el2)) data = data.concat(await this.proof(el2))
} }
if (data.some(x => !x.markup && !/^\s*$/.test(x.text))) { if (data.some(x => !x.markup && !/^\s*$/.test(x.text))) {
const requestData = { const requestData = {
@ -113,7 +94,7 @@ async function besProof(editor, el) {
} }
} }
const clientRect = besAddMistake(range, match) const clientRect = BesEditor.addMistake(range, match)
matches.push({ matches.push({
range: range, range: range,
rects: clientRect, rects: clientRect,
@ -121,7 +102,7 @@ async function besProof(editor, el) {
}) })
}) })
besMarkProofed(editor, el, matches) this.markProofed(el, matches)
}) })
.catch(error => { .catch(error => {
// TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI. // TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI.
@ -135,7 +116,7 @@ async function besProof(editor, el) {
// Surround inline element with dummy <tagName>...</tagName>. // Surround inline element with dummy <tagName>...</tagName>.
let data = [{ text: '<' + el.tagName + '>', el: el, markup: true }] let data = [{ text: '<' + el.tagName + '>', el: el, markup: true }]
for (const el2 of el.childNodes) { for (const el2 of el.childNodes) {
data = data.concat(await besProof(editor, el2)) data = data.concat(await this.proof(el2))
} }
data.splice(data.length, 0, { data.splice(data.length, 0, {
text: '</' + el.tagName + '>', text: '</' + el.tagName + '>',
@ -147,13 +128,14 @@ async function besProof(editor, el) {
default: default:
return [{ text: '<?' + el.nodeType + '>', el: el, markup: true }] return [{ text: '<?' + el.nodeType + '>', el: el, markup: true }]
} }
} }
// Marks section of text that is about to change as not-yet-grammar-proofed. // Marks section of text that is about to change as not-yet-grammar-proofed.
function besHandleBeforeInput(editor, event) { handleBeforeInput(event) {
if (editor.timer) clearTimeout(editor.timer) if (this.timer) clearTimeout(this.timer)
editor.timer = setTimeout(function () { let editor = this
besProof(editor, editor.el) this.timer = setTimeout(function () {
editor.proof(editor.el)
}, 1000) }, 1000)
// No need to invalidate elements after range.startContainer since they will // No need to invalidate elements after range.startContainer since they will
@ -161,41 +143,41 @@ function besHandleBeforeInput(editor, event) {
event event
.getTargetRanges() .getTargetRanges()
.forEach(range => .forEach(range =>
besClearProofed(editor, besGetBlockParent(editor, range.startContainer)) this.clearProofed(this.getBlockParent(range.startContainer))
) )
} }
// Test if given block element has already been grammar-proofed. // Test if given block element has already been grammar-proofed.
function besIsProofed(editor, el) { isProofed(el) {
let filteredChildren = editor?.children.filter(child => child.elements === el) let filteredChildren = this.children.filter(child => child.elements === el)
return filteredChildren[0]?.isProofed return filteredChildren[0]?.isProofed
} }
// Mark given block element as grammar-proofed. // Mark given block element as grammar-proofed.
function besMarkProofed(editor, el, matches) { markProofed(el, matches) {
let newChild = { let newChild = {
isProofed: true, isProofed: true,
elements: el, elements: el,
matches: matches matches: matches
} }
editor.children = editor.children.map(child => this.children = this.children.map(child =>
child.elements === newChild.elements ? newChild : child child.elements === newChild.elements ? newChild : child
) )
if (!editor.children.some(child => child.elements === newChild.elements)) { if (!this.children.some(child => child.elements === newChild.elements)) {
editor.children.push(newChild) this.children.push(newChild)
}
} }
}
// Mark given block element as not grammar-proofed. // Mark given block element as not grammar-proofed.
function besClearProofed(editor, el) { clearProofed(el) {
let filteredChildren = editor.children.filter(child => child.elements === el) let filteredChildren = this.children.filter(child => child.elements === el)
if (filteredChildren.length) filteredChildren[0].isProofed = false if (filteredChildren.length) filteredChildren[0].isProofed = false
} }
// Remove all grammar mistakes markup for given block element. // Remove all grammar mistakes markup for given block element.
function besClearAllMistakes(editor, el) { clearAllMistakes(el) {
let filteredChildren = editor?.children.filter(child => child.elements === el) let filteredChildren = this.children.filter(child => child.elements === el)
if (!filteredChildren.length) return if (!filteredChildren.length) return
const correctionPanel = document.getElementById('correction-panel') const correctionPanel = document.getElementById('correction-panel')
@ -214,10 +196,10 @@ function besClearAllMistakes(editor, el) {
} }
} }
}) })
} }
// Adds grammar mistake markup // Adds grammar mistake markup
function besAddMistake(range, match) { static addMistake(range, match) {
const correctionPanel = document.getElementById('correction-panel') const correctionPanel = document.getElementById('correction-panel')
const clientRects = range.getClientRects() const clientRects = range.getClientRects()
for (let i = 0, n = clientRects.length; i < n; ++i) { for (let i = 0, n = clientRects.length; i < n; ++i) {
@ -231,10 +213,10 @@ function besAddMistake(range, match) {
correctionPanel.appendChild(highlight) correctionPanel.appendChild(highlight)
} }
return clientRects return clientRects
} }
// Tests if given element is block element. // Tests if given element is block element.
function besIsBlockElement(el) { static isBlockElement(el) {
const defaultView = document.defaultView const defaultView = document.defaultView
switch ( switch (
defaultView defaultView
@ -248,39 +230,39 @@ function besIsBlockElement(el) {
default: default:
return true return true
} }
} }
// Returns first block parent element // Returns first block parent element
function besGetBlockParent(editor, el) { getBlockParent(el) {
for (; el && el !== editor.el; el = el.parentNode) { for (; el && el !== this.el; el = el.parentNode) {
if (el.nodeType === Node.ELEMENT_NODE && besIsBlockElement(el)) return el if (el.nodeType === Node.ELEMENT_NODE && BesEditor.isBlockElement(el)) return el
} }
return el return el
} }
function besHandleClick(editor, e) { handleClick(e) {
const targetEl = e.target const targetEl = e.target
const popup = document.querySelector('bes-popup-el') const popup = document.querySelector('bes-popup-el')
if (targetEl.tagName === 'DIV') { if (targetEl.tagName === 'DIV') {
const divIndex = editor.children.findIndex( const divIndex = this.children.findIndex(
child => child.elements === targetEl child => child.elements === targetEl
) )
const matches = editor.children[divIndex]?.matches const matches = this.children[divIndex]?.matches
if (!matches) { if (!matches) {
popup.hide() popup.hide()
return return
} }
if (besRenderPopup(matches, popup, e.clientX, e.clientY)) return if (BesEditor.renderPopup(matches, popup, e.clientX, e.clientY)) return
} else { } else {
popup.hide() popup.hide()
} }
} }
function besRenderPopup(matches, popup, clientX, clientY) { static renderPopup(matches, popup, clientX, clientY) {
for (let m of matches) { for (let m of matches) {
if (m.rects) { if (m.rects) {
for (let r of m.rects) { for (let r of m.rects) {
if (besIsPointInRect(clientX, clientY, r)) { if (BesEditor.isPointInRect(clientX, clientY, r)) {
popup.changeText(m.match.message) popup.changeText(m.match.message)
m.match.replacements.forEach(replacement => { m.match.replacements.forEach(replacement => {
popup.appendReplacements( popup.appendReplacements(
@ -298,13 +280,37 @@ function besRenderPopup(matches, popup, clientX, clientY) {
} }
} }
return false return false
} }
function besIsPointInRect(x, y, rect) { static isPointInRect(x, y, rect) {
return ( return (
x >= rect.x && x >= rect.x &&
x < rect.x + rect.width && x < rect.x + rect.width &&
y >= rect.y && y >= rect.y &&
y < rect.y + rect.height y < rect.y + rect.height
) )
}
}
let besEditors = [] // Collection of all editors on page
window.onload = () => {
// Search and prepare all our editors found in the document.
document.querySelectorAll('.bes-online-editor').forEach(edit => {
let editor = new BesEditor(edit)
besEditors[edit.id] = editor
})
}
window.onresize = () => {
Object.keys(besEditors).forEach(key => {
let editor = besEditors[key]
editor.children.forEach(child => {
editor.clearAllMistakes(child?.elements)
child.matches.forEach(match => {
const clientRect = BesEditor.addMistake(match.range, match)
match.rects = clientRect
})
})
})
} }