Convert into class
This commit is contained in:
parent
01be8afcdf
commit
e33fb6b8fc
130
online-editor.js
130
online-editor.js
@ -1,55 +1,36 @@
|
||||
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 = () => {
|
||||
// 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)
|
||||
this.proof(edit)
|
||||
edit.addEventListener(
|
||||
'beforeinput',
|
||||
e => besHandleBeforeInput(editor, e),
|
||||
e => this.handleBeforeInput(e),
|
||||
false
|
||||
)
|
||||
edit.addEventListener('click', e => besHandleClick(editor, e))
|
||||
})
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
Object.keys(besEditors).forEach(key => {
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
edit.addEventListener('click', e => this.handleClick(e))
|
||||
}
|
||||
|
||||
// Recursively grammar-proofs one node.
|
||||
async function besProof(editor, el) {
|
||||
async proof(el) {
|
||||
switch (el.nodeType) {
|
||||
case Node.TEXT_NODE:
|
||||
return [{ text: el.textContent, el: el, markup: false }]
|
||||
|
||||
case Node.ELEMENT_NODE:
|
||||
if (besIsBlockElement(el)) {
|
||||
if (BesEditor.isBlockElement(el)) {
|
||||
// Block elements are grammar-proofed independently.
|
||||
if (besIsProofed(editor, el)) {
|
||||
if (this.isProofed(el)) {
|
||||
return [{ text: '<' + el.tagName + '/>', el: el, markup: true }]
|
||||
}
|
||||
besClearAllMistakes(editor, el)
|
||||
this.clearAllMistakes(el)
|
||||
let data = []
|
||||
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))) {
|
||||
const requestData = {
|
||||
@ -113,7 +94,7 @@ async function besProof(editor, el) {
|
||||
}
|
||||
}
|
||||
|
||||
const clientRect = besAddMistake(range, match)
|
||||
const clientRect = BesEditor.addMistake(range, match)
|
||||
matches.push({
|
||||
range: range,
|
||||
rects: clientRect,
|
||||
@ -121,7 +102,7 @@ async function besProof(editor, el) {
|
||||
})
|
||||
})
|
||||
|
||||
besMarkProofed(editor, el, matches)
|
||||
this.markProofed(el, matches)
|
||||
})
|
||||
.catch(error => {
|
||||
// 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>.
|
||||
let data = [{ text: '<' + el.tagName + '>', el: el, markup: true }]
|
||||
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, {
|
||||
text: '</' + el.tagName + '>',
|
||||
@ -150,10 +131,11 @@ async function besProof(editor, el) {
|
||||
}
|
||||
|
||||
// Marks section of text that is about to change as not-yet-grammar-proofed.
|
||||
function besHandleBeforeInput(editor, event) {
|
||||
if (editor.timer) clearTimeout(editor.timer)
|
||||
editor.timer = setTimeout(function () {
|
||||
besProof(editor, editor.el)
|
||||
handleBeforeInput(event) {
|
||||
if (this.timer) clearTimeout(this.timer)
|
||||
let editor = this
|
||||
this.timer = setTimeout(function () {
|
||||
editor.proof(editor.el)
|
||||
}, 1000)
|
||||
|
||||
// No need to invalidate elements after range.startContainer since they will
|
||||
@ -161,41 +143,41 @@ function besHandleBeforeInput(editor, event) {
|
||||
event
|
||||
.getTargetRanges()
|
||||
.forEach(range =>
|
||||
besClearProofed(editor, besGetBlockParent(editor, range.startContainer))
|
||||
this.clearProofed(this.getBlockParent(range.startContainer))
|
||||
)
|
||||
}
|
||||
|
||||
// Test if given block element has already been grammar-proofed.
|
||||
function besIsProofed(editor, el) {
|
||||
let filteredChildren = editor?.children.filter(child => child.elements === el)
|
||||
isProofed(el) {
|
||||
let filteredChildren = this.children.filter(child => child.elements === el)
|
||||
return filteredChildren[0]?.isProofed
|
||||
}
|
||||
|
||||
// Mark given block element as grammar-proofed.
|
||||
function besMarkProofed(editor, el, matches) {
|
||||
markProofed(el, matches) {
|
||||
let newChild = {
|
||||
isProofed: true,
|
||||
elements: el,
|
||||
matches: matches
|
||||
}
|
||||
|
||||
editor.children = editor.children.map(child =>
|
||||
this.children = this.children.map(child =>
|
||||
child.elements === newChild.elements ? newChild : child
|
||||
)
|
||||
if (!editor.children.some(child => child.elements === newChild.elements)) {
|
||||
editor.children.push(newChild)
|
||||
if (!this.children.some(child => child.elements === newChild.elements)) {
|
||||
this.children.push(newChild)
|
||||
}
|
||||
}
|
||||
|
||||
// Mark given block element as not grammar-proofed.
|
||||
function besClearProofed(editor, el) {
|
||||
let filteredChildren = editor.children.filter(child => child.elements === el)
|
||||
clearProofed(el) {
|
||||
let filteredChildren = this.children.filter(child => child.elements === el)
|
||||
if (filteredChildren.length) filteredChildren[0].isProofed = false
|
||||
}
|
||||
|
||||
// Remove all grammar mistakes markup for given block element.
|
||||
function besClearAllMistakes(editor, el) {
|
||||
let filteredChildren = editor?.children.filter(child => child.elements === el)
|
||||
clearAllMistakes(el) {
|
||||
let filteredChildren = this.children.filter(child => child.elements === el)
|
||||
if (!filteredChildren.length) return
|
||||
|
||||
const correctionPanel = document.getElementById('correction-panel')
|
||||
@ -217,7 +199,7 @@ function besClearAllMistakes(editor, el) {
|
||||
}
|
||||
|
||||
// Adds grammar mistake markup
|
||||
function besAddMistake(range, match) {
|
||||
static addMistake(range, match) {
|
||||
const correctionPanel = document.getElementById('correction-panel')
|
||||
const clientRects = range.getClientRects()
|
||||
for (let i = 0, n = clientRects.length; i < n; ++i) {
|
||||
@ -234,7 +216,7 @@ function besAddMistake(range, match) {
|
||||
}
|
||||
|
||||
// Tests if given element is block element.
|
||||
function besIsBlockElement(el) {
|
||||
static isBlockElement(el) {
|
||||
const defaultView = document.defaultView
|
||||
switch (
|
||||
defaultView
|
||||
@ -251,36 +233,36 @@ function besIsBlockElement(el) {
|
||||
}
|
||||
|
||||
// Returns first block parent element
|
||||
function besGetBlockParent(editor, el) {
|
||||
for (; el && el !== editor.el; el = el.parentNode) {
|
||||
if (el.nodeType === Node.ELEMENT_NODE && besIsBlockElement(el)) return el
|
||||
getBlockParent(el) {
|
||||
for (; el && el !== this.el; el = el.parentNode) {
|
||||
if (el.nodeType === Node.ELEMENT_NODE && BesEditor.isBlockElement(el)) return el
|
||||
}
|
||||
return el
|
||||
}
|
||||
|
||||
function besHandleClick(editor, e) {
|
||||
handleClick(e) {
|
||||
const targetEl = e.target
|
||||
const popup = document.querySelector('bes-popup-el')
|
||||
if (targetEl.tagName === 'DIV') {
|
||||
const divIndex = editor.children.findIndex(
|
||||
const divIndex = this.children.findIndex(
|
||||
child => child.elements === targetEl
|
||||
)
|
||||
const matches = editor.children[divIndex]?.matches
|
||||
const matches = this.children[divIndex]?.matches
|
||||
if (!matches) {
|
||||
popup.hide()
|
||||
return
|
||||
}
|
||||
if (besRenderPopup(matches, popup, e.clientX, e.clientY)) return
|
||||
if (BesEditor.renderPopup(matches, popup, e.clientX, e.clientY)) return
|
||||
} else {
|
||||
popup.hide()
|
||||
}
|
||||
}
|
||||
|
||||
function besRenderPopup(matches, popup, clientX, clientY) {
|
||||
static renderPopup(matches, popup, clientX, clientY) {
|
||||
for (let m of matches) {
|
||||
if (m.rects) {
|
||||
for (let r of m.rects) {
|
||||
if (besIsPointInRect(clientX, clientY, r)) {
|
||||
if (BesEditor.isPointInRect(clientX, clientY, r)) {
|
||||
popup.changeText(m.match.message)
|
||||
m.match.replacements.forEach(replacement => {
|
||||
popup.appendReplacements(
|
||||
@ -300,7 +282,7 @@ function besRenderPopup(matches, popup, clientX, clientY) {
|
||||
return false
|
||||
}
|
||||
|
||||
function besIsPointInRect(x, y, rect) {
|
||||
static isPointInRect(x, y, rect) {
|
||||
return (
|
||||
x >= rect.x &&
|
||||
x < rect.x + rect.width &&
|
||||
@ -308,3 +290,27 @@ function besIsPointInRect(x, y, rect) {
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user