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

Insert correction panel using JS and add editor IDs to support multiple editors

Browse Source
This commit is contained in:
Aljaž Grilc 2024-02-07 11:13:32 +01:00
parent 09be0aec88
commit 494107bafb
2 changed files with 108 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
index.html
View File

@ -9,15 +9,19 @@
<script src="popup.js"></script> <script src="popup.js"></script>
</head> </head>
<body> <body>
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div> <!--<div id='ed1' class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<div class="bes-online-editor" contenteditable="true"></div> <br>
<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></div> <div id='ed2' class="bes-online-editor" contenteditable="true"></div>
<div class="bes-online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> <br>
<div class="bes-online-editor" contenteditable="true">To je preiskus.</div>--> <div id='ed3' class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
<!-- <div class="bes-online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div> --> <br>
<!-- TODO: Insert correction-panel in DOM with JavaScript and include editor ID in its ID to support multiple editors. --> <div id='ed4' class="bes-online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<div id="correction-panel"></div> <br>-->
<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> <div id='ed5' class="bes-online-editor" contenteditable="true">To je preiskus.</div>
<br>
<!-- <div id='ed6' class="bes-online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>
<br>-->
<div id="ed7" class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<bes-popup-el></bes-popup-el> <bes-popup-el></bes-popup-el>
</body> </body>
</html> </html>
@ -36,4 +40,69 @@
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
z-index: 2; z-index: 2;
} }
.bes-correction-panel-parent {
direction: ltr !important;
z-index: auto !important;
float: left !important;
display: inline !important;
width: 0 !important;
height: 0 !important;
top: 0 !important;
left: 0 !important;
position: relative !important;
overflow: visible !important;
visibility: visible !important;
}
.bes-correction-panel {
animation: none !important;
background: transparent !important;
border: none !important;
box-shadow: initial !important;
box-sizing: initial !important;
color: transparent !important;
cursor: initial !important;
display: block !important;
float: initial !important;
font-family: initial !important;
font-feature-settings: initial !important;
font-kerning: initial !important;
font-language-override: initial !important;
font-size: initial !important;
font-size-adjust: initial !important;
font-stretch: initial !important;
font-style: initial !important;
font-synthesis: initial !important;
font-variant: initial !important;
font-variant-alternates: initial !important;
font-variant-caps: initial !important;
font-variant-east-asian: initial !important;
font-variant-ligatures: initial !important;
font-variant-numeric: initial !important;
font-variant-position: initial !important;
font-weight: initial !important;
hyphens: initial !important;
letter-spacing: initial !important;
line-break: initial !important;
line-height: initial !important;
margin: 0 !important;
max-height: initial !important;
min-height: initial !important;
max-width: initial !important;
min-width: initial !important;
outline: initial !important;
overflow: hidden !important;
padding: 0 !important;
pointer-events: none !important;
position: relative !important;
text-align: initial !important;
text-decoration: initial !important;
text-indent: initial !important;
text-shadow: initial !important;
text-transform: initial !important;
white-space: initial !important;
word-spacing: initial !important;
}
</style> </style>

31
online-editor.js
View File

@ -5,7 +5,7 @@ class BesEditor {
this.el = edit this.el = edit
this.timer = null this.timer = null
this.children = [] this.children = []
this.correctionPanel = document.getElementById('correction-panel') // TODO: use document.createElement('div') and insert it before edit element in DOM. this.correctionPanel = this.createCorrectionPanel(edit)
this.proof(edit) this.proof(edit)
edit.addEventListener('beforeinput', e => this.handleBeforeInput(e), false) edit.addEventListener('beforeinput', e => this.handleBeforeInput(e), false)
edit.addEventListener('click', e => this.handleClick(e)) edit.addEventListener('click', e => this.handleClick(e))
@ -128,6 +128,35 @@ class BesEditor {
} }
} }
createCorrectionPanel(edit) {
const panelParent = document.createElement('div')
panelParent.id = `bes-cp-hidden-${edit.id}`
panelParent.classList.add('bes-correction-panel-parent')
const panel = document.createElement('div')
const styles = window.getComputedStyle(edit)
panel.id = `bes-cp-${edit.id}`
panel.classList.add('bes-correction-panel')
const totalWidth =
parseFloat(styles.width) +
parseFloat(styles.marginLeft) +
parseFloat(styles.marginRight) +
parseFloat(styles.paddingLeft) +
parseFloat(styles.paddingRight)
const totalHeight =
parseFloat(styles.height) +
parseFloat(styles.marginTop) +
parseFloat(styles.marginBottom) +
parseFloat(styles.paddingTop) +
parseFloat(styles.paddingBottom)
panel.style.width = totalWidth + 'px'
panel.style.height = totalHeight + 'px'
panelParent.appendChild(panel)
edit.parentElement.insertBefore(panelParent, edit)
return panel
}
// 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.
handleBeforeInput(event) { handleBeforeInput(event) {
if (this.timer) clearTimeout(this.timer) if (this.timer) clearTimeout(this.timer)