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

Create popup component and implement bestr api calls

Browse Source
This commit is contained in:
Aljaž Grilc 2024-01-30 10:09:16 +01:00
parent db9785744f
commit 1ce46bf8a2
5 changed files with 102 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.vscode

4
index.html
View File

@ -6,9 +6,11 @@
<title>Editor</title> <title>Editor</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="online-editor.js"></script> <script src="online-editor.js"></script>
<script src="popup.js"></script>
</head> </head>
<body> <body>
<div id="besana-editor" class="online-editor" contenteditable="true"></div> <div id="besana-editor" class="online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<button id="btn-check">Preveri txt</button> <button id="btn-check">Preveri txt</button>
<my-component></my-component>
</body> </body>
</html> </html>

111
online-editor.js
View File

@ -3,6 +3,10 @@ window.onload = () => {
btnCheck.addEventListener('click', checkText) btnCheck.addEventListener('click', checkText)
const textArea = document.getElementById('besana-editor') const textArea = document.getElementById('besana-editor')
textArea.addEventListener('click', e => {
handleClick(e)
})
let timerId = null let timerId = null
// textArea.addEventListener('focus', () => { // textArea.addEventListener('focus', () => {
@ -15,46 +19,30 @@ window.onload = () => {
// }) // })
} }
function handleClick(e) {
switch (e.target) {
case e.target.closest('span'):
const clicked = e.target.closest('span')
const infoText = clicked?.dataset.info
const myComponent = document.querySelector('my-component')
myComponent.setAttribute('my-attribute', infoText)
console.log(clicked)
break
}
}
function checkText() { function checkText() {
const textArea = document.getElementById('besana-editor') const textArea = document.getElementById('besana-editor')
const textAreaContent = textArea?.innerHTML const textAreaContent = textArea?.innerHTML
const text = createFirstParagraph(textAreaContent) const text = createFirstParagraph(textAreaContent)
const paragraphs = separateParagraphs(text) const paragraphs = separateParagraphs(text)
const modifiedParagraphs = paragraphs.map(paragraph => const modifiedParagraphs = paragraphs.map(
mockSpellChecker(paragraph) async paragraph => await ajaxCheck(paragraph)
) )
console.log(modifiedParagraphs) console.log(modifiedParagraphs)
textArea.innerHTML = modifiedParagraphs.join('') textArea.innerHTML = modifiedParagraphs.join('')
} }
function separateParagraphs(text) {
let paragraphs = text.match(/<div>.*?<\/div>/g)
return paragraphs
}
function mockSpellChecker(text) {
const specificWords = ['Tole', 'nov', 'test']
const words = text.split(/(?=<)|(?<=\>)|\s/g).filter(word => word !== '')
const modifiedWords = words.map(word => {
const wordWithoutTags = word.replace(/<[^>]*>/g, '')
if (specificWords.includes(wordWithoutTags)) {
return `<span class="typo-mistake">${word}</span>`
}
return word
})
// This is necessary to remove spaces between opening and closing tags
// TODO: improve this or find a better way to do it
return modifiedWords
.map((word, index) => {
if (index === 0 || index === 1 || index === modifiedWords.length - 1) {
return word
}
return ' ' + word
})
.join('')
}
function createFirstParagraph(text) { function createFirstParagraph(text) {
const divRegex = /<div\b[^>]*>/i const divRegex = /<div\b[^>]*>/i
const firstDiv = text.match(divRegex) const firstDiv = text.match(divRegex)
@ -64,3 +52,66 @@ function createFirstParagraph(text) {
const newText = firstParagraph + text.slice(firstDiv.index) const newText = firstParagraph + text.slice(firstDiv.index)
return newText return newText
} }
function separateParagraphs(text) {
let paragraphs = text.match(/<div>.*?<\/div>/g)
return paragraphs
}
async function ajaxCheck(paragraph) {
const url = 'http://localhost:225/api/v2/check'
const data = {
format: 'html',
text: paragraph,
language: 'sl',
level: 'picky'
}
const formData = new URLSearchParams(data)
const request = new Request(url, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: formData
})
fetch(request)
.then(response => {
console.log(response.status, response.statusText)
if (!response.ok) {
throw new Error('Network response was not ok')
}
console.log(response)
return response.json()
})
.catch(error => {
console.error(
'Napaka pri pošiljanju zahteve za preverjanje besedila',
error
)
})
}
function renderMistakes(matches, paragraph) {}
// //TODO: Popravi dodajanje presledkov
// function mockSpellChecker(text) {
// const specificWords = ['Tole', 'nov', 'test']
// const words = text.split(/(?=<)|(?<=\>)|\s/g).filter(word => word !== '')
// const modifiedWords = words.map(word => {
// const wordWithoutTags = word.replace(/<[^>]*>/g, '')
// if (specificWords.includes(wordWithoutTags)) {
// return `<span class="typo-mistake" data-info="Dodaten text za posamezno napako">${word}</span>`
// }
// return word
// })
// // This is necessary to remove spaces between opening and closing tags
// // TODO: improve this or find a better way to do it
// return modifiedWords
// .map((word, index) => {
// if (index === 0 || index === 1 || index === modifiedWords.length - 1) {
// return word
// }
// return ' ' + word
// })
// .join('')
// }

16
popup.js Normal file
View File

@ -0,0 +1,16 @@
class MyComponent extends HTMLElement {
static get observedAttributes() {
return ['my-attribute']
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'my-attribute') {
console.log(
`Value of my-attribute changed from ${oldValue} to ${newValue}`
)
// You can perform some action based on the new value here
}
}
}
customElements.define('my-component', MyComponent)

1
styles.css
View File

@ -10,6 +10,7 @@
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
overflow-y: auto; overflow-y: auto;
font-family: Arial, Helvetica, sans-serif;
} }
/* Mistake types styles */ /* Mistake types styles */