Insert correction panel using JS and add editor IDs to support multiple editors
This commit is contained in:
parent
09be0aec88
commit
494107bafb
87
index.html
87
index.html
@ -9,15 +9,19 @@
|
||||
<script src="popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
||||
<div class="bes-online-editor" contenteditable="true"></div>
|
||||
<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></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>
|
||||
<div class="bes-online-editor" contenteditable="true">To je preiskus.</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> -->
|
||||
<!-- TODO: Insert correction-panel in DOM with JavaScript and include editor ID in its ID to support multiple editors. -->
|
||||
<div id="correction-panel"></div>
|
||||
<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='ed1' class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
||||
<br>
|
||||
<div id='ed2' class="bes-online-editor" contenteditable="true"></div>
|
||||
<br>
|
||||
<div id='ed3' class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
|
||||
<br>
|
||||
<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>
|
||||
<br>-->
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -36,4 +40,69 @@
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
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>
|
||||
@ -5,7 +5,7 @@ class BesEditor {
|
||||
this.el = edit
|
||||
this.timer = null
|
||||
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)
|
||||
edit.addEventListener('beforeinput', e => this.handleBeforeInput(e), false)
|
||||
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.
|
||||
handleBeforeInput(event) {
|
||||
if (this.timer) clearTimeout(this.timer)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user