diff --git a/index.html b/index.html index 0118fe5..0eea228 100644 --- a/index.html +++ b/index.html @@ -9,15 +9,19 @@ - - - -
-
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
+ +
To je preiskus.
+
+ +
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
@@ -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; +} + \ No newline at end of file diff --git a/online-editor.js b/online-editor.js index 53a0608..60fde9c 100644 --- a/online-editor.js +++ b/online-editor.js @@ -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)