Revise positioning and resizing
This commit is contained in:
parent
6c9629dec6
commit
6863bee513
52
service.js
52
service.js
@ -1,7 +1,4 @@
|
||||
// TODO: Research if there is a way to disable languageTool & Grammarly extensions in CKEditor
|
||||
// TODO: Revise absolute/relative placement of auxiliary <div> we inject into DOM. Absolute is more
|
||||
// controllable, but lacks PlacementObserver; relative is tricky to prevent document flow
|
||||
// issues, but moves with the DOM element.
|
||||
|
||||
/**
|
||||
* Collection of all grammar checking services in the document
|
||||
@ -10,11 +7,6 @@
|
||||
*/
|
||||
let besServices = []
|
||||
|
||||
// TODO: Window resize may cause host element(s) to move. That needs correction panel and status
|
||||
// icon repositioning. Also, should any parent element of our service host element move, we
|
||||
// should reposition correction panel and status icon. How to do this? Alas there is no
|
||||
// PlacementObserver to monitor host element movements. Switch to relative placement for our
|
||||
// auxiliary <div>s?
|
||||
window.addEventListener('resize', () =>
|
||||
besServices.forEach(service => service.onReposition())
|
||||
)
|
||||
@ -65,12 +57,10 @@ class BesService {
|
||||
this.onScroll = this.onScroll.bind(this)
|
||||
this.hostElement.addEventListener('scroll', this.onScroll)
|
||||
|
||||
this.resizeObserver = new ResizeObserver(this.onResize.bind(this))
|
||||
this.resizeObserver.observe(this.hostElement)
|
||||
|
||||
this.hostBoundingClientRect = this.hostElement.getBoundingClientRect()
|
||||
this.positionObserver = new MutationObserver(this.onBodyMutate.bind(this))
|
||||
this.positionObserver.observe(document.body, {
|
||||
this.mutationObserver = new MutationObserver(this.onBodyMutate.bind(this))
|
||||
this.mutationObserver.observe(document.body, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
subtree: true
|
||||
})
|
||||
@ -108,8 +98,7 @@ class BesService {
|
||||
unregister() {
|
||||
if (this.abortController) this.abortController.abort()
|
||||
besServices = besServices.filter(item => item !== this)
|
||||
this.positionObserver.disconnect()
|
||||
this.resizeObserver.disconnect()
|
||||
this.mutationObserver.disconnect()
|
||||
this.hostElement.removeEventListener('scroll', this.onScroll)
|
||||
this.hostElement.setAttribute('spellcheck', this.originalSpellcheck)
|
||||
this.hostElement.setAttribute('data-gramm', this.originalDataGramm)
|
||||
@ -337,18 +326,17 @@ class BesService {
|
||||
* Resizes correction and scroll panels to match host element size.
|
||||
*/
|
||||
setCorrectionPanelSize() {
|
||||
// TODO: This woodoo looks so wrong it can't be true. Revise together!
|
||||
const styles = window.getComputedStyle(this.textElement)
|
||||
const styles = window.getComputedStyle(this.hostElement)
|
||||
this.correctionPanel.style.marginLeft = styles.marginLeft
|
||||
this.correctionPanel.style.marginTop = styles.marginTop
|
||||
this.correctionPanel.style.marginRight = styles.marginRight
|
||||
this.correctionPanel.style.marginBottom = styles.marginBottom
|
||||
this.correctionPanel.style.paddingLeft = styles.paddingLeft
|
||||
this.correctionPanel.style.paddingTop = styles.paddingTop
|
||||
this.correctionPanel.style.paddingRight = styles.paddingRight
|
||||
this.scrollPanel.style.width = `${this.textElement.scrollWidth}px`
|
||||
this.scrollPanel.style.height = `${this.textElement.scrollHeight}px`
|
||||
const hStyles =
|
||||
this.hostElement !== this.textElement
|
||||
? window.getComputedStyle(this.hostElement)
|
||||
: styles
|
||||
this.correctionPanel.style.paddingBottom = styles.paddingBottom
|
||||
this.scrollPanel.style.width = `${this.hostElement.scrollWidth}px`
|
||||
this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
|
||||
if (this.isHostElementInline()) {
|
||||
const totalWidth =
|
||||
parseFloat(styles.paddingLeft) +
|
||||
@ -357,14 +345,10 @@ class BesService {
|
||||
parseFloat(styles.marginRight) +
|
||||
parseFloat(styles.paddingRight)
|
||||
this.correctionPanel.style.width = `${totalWidth}px`
|
||||
this.correctionPanel.style.height = hStyles.height
|
||||
this.correctionPanel.style.height = styles.height
|
||||
} else {
|
||||
this.correctionPanel.style.width = styles.width
|
||||
const totalHeight =
|
||||
parseFloat(styles.height) +
|
||||
parseFloat(styles.paddingTop) +
|
||||
parseFloat(styles.paddingBottom)
|
||||
this.correctionPanel.style.height = `${totalHeight}px`
|
||||
this.correctionPanel.style.height = styles.height
|
||||
}
|
||||
}
|
||||
|
||||
@ -1584,7 +1568,6 @@ class BesTAService extends BesPlainTextService {
|
||||
static createTextElement(hostElement) {
|
||||
const textElement = document.createElement('div')
|
||||
textElement.classList.add('bes-text-panel')
|
||||
textElement.style.zIndex = hostElement.style.zIndex - 1
|
||||
BesTAService.setTextElementSize(hostElement, textElement)
|
||||
hostElement.parentNode.insertBefore(textElement, hostElement)
|
||||
return textElement
|
||||
@ -1592,8 +1575,6 @@ class BesTAService extends BesPlainTextService {
|
||||
|
||||
/**
|
||||
* Sets the size of the clone div element to match the <textarea> element
|
||||
* TODO: This method should sync text element size only. Add another method for keeping styles in
|
||||
* sync using MutationObserver.
|
||||
*
|
||||
* @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
|
||||
* for
|
||||
@ -1607,16 +1588,19 @@ class BesTAService extends BesPlainTextService {
|
||||
const scrollLeft = window.scrollX || document.documentElement.scrollLeft
|
||||
const styles = window.getComputedStyle(hostElement)
|
||||
|
||||
textElement.style.zIndex = hostElement.style.zIndex - 1
|
||||
textElement.style.fontSize = styles.fontSize
|
||||
textElement.style.fontFamily = styles.fontFamily
|
||||
textElement.style.lineHeight = styles.lineHeight
|
||||
textElement.style.whiteSpace = styles.whiteSpace
|
||||
textElement.style.whiteSpaceCollapse = styles.whiteSpaceCollapse
|
||||
textElement.style.hyphens = styles.hyphens
|
||||
textElement.style.margin = styles.margin
|
||||
textElement.style.border = styles.border
|
||||
textElement.style.borderRadius = styles.borderRadius
|
||||
textElement.style.padding = styles.padding
|
||||
textElement.style.paddingLeft = styles.paddingLeft
|
||||
textElement.style.paddingTop = styles.paddingTop
|
||||
textElement.style.paddingRight = styles.paddingRight
|
||||
textElement.style.paddingBottom = styles.paddingBottom
|
||||
textElement.style.height = styles.height
|
||||
textElement.style.minHeight = styles.minHeight
|
||||
textElement.style.maxHeight = styles.maxHeight
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
|
||||
.bes-text-panel {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
color: transparent;
|
||||
border-color: transparent;
|
||||
background: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user