diff options
author | Alex Yatskov <alex@foosoft.net> | 2019-09-02 11:47:14 -0700 |
---|---|---|
committer | Alex Yatskov <alex@foosoft.net> | 2019-09-02 11:47:14 -0700 |
commit | 5347da528bd07166b4686f45440d80a77f4888a3 (patch) | |
tree | 08bbfd0c859327ee9a08ca86afd222a222ced62b /ext/fg | |
parent | da981c0b911dc5a697246006089b266fddba84a7 (diff) | |
parent | 4ac55da7dd5354e6c3495f04583352d0d863b7b6 (diff) |
Merge branch 'master' into testing
Diffstat (limited to 'ext/fg')
-rw-r--r-- | ext/fg/css/client.css | 1 | ||||
-rw-r--r-- | ext/fg/float.html | 2 | ||||
-rw-r--r-- | ext/fg/js/document.js | 283 | ||||
-rw-r--r-- | ext/fg/js/float.js | 2 | ||||
-rw-r--r-- | ext/fg/js/frontend.js | 16 | ||||
-rw-r--r-- | ext/fg/js/popup.js | 149 | ||||
-rw-r--r-- | ext/fg/js/source.js | 40 | ||||
-rw-r--r-- | ext/fg/js/util.js | 5 |
8 files changed, 390 insertions, 108 deletions
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index a9b8e025..a2b06d0f 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -26,6 +26,7 @@ iframe#yomichan-float { resize: both; visibility: hidden; z-index: 2147483647; + box-sizing: border-box; } iframe#yomichan-float.yomichan-float-full-width { diff --git a/ext/fg/float.html b/ext/fg/float.html index 07f2d58b..0133e653 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -34,6 +34,8 @@ <script src="/mixed/lib/jquery.min.js"></script> <script src="/mixed/lib/wanakana.min.js"></script> + <script src="/mixed/js/extension.js"></script> + <script src="/fg/js/api.js"></script> <script src="/fg/js/util.js"></script> <script src="/fg/js/document.js"></script> diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js index 86396a8a..bd876e5d 100644 --- a/ext/fg/js/document.js +++ b/ext/fg/js/document.js @@ -17,77 +17,110 @@ */ -const IS_FIREFOX = /Firefox/.test(navigator.userAgent); +const REGEX_TRANSPARENT_COLOR = /rgba\s*\([^\)]*,\s*0(?:\.0+)?\s*\)/; -function docOffsetCalc(element) { - const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; - const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; - - const clientTop = document.documentElement.clientTop || document.body.clientTop || 0; - const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0; +function docSetImposterStyle(style, propertyName, value) { + style.setProperty(propertyName, value, 'important'); +} - const rect = element.getBoundingClientRect(); - const top = Math.round(rect.top + scrollTop - clientTop); - const left = Math.round(rect.left + scrollLeft - clientLeft); +function docImposterCreate(element, isTextarea) { + const elementStyle = window.getComputedStyle(element); + const elementRect = element.getBoundingClientRect(); + const documentRect = document.documentElement.getBoundingClientRect(); + const left = elementRect.left - documentRect.left; + const top = elementRect.top - documentRect.top; + + // Container + const container = document.createElement('div'); + const containerStyle = container.style; + docSetImposterStyle(containerStyle, 'all', 'initial'); + docSetImposterStyle(containerStyle, 'position', 'absolute'); + docSetImposterStyle(containerStyle, 'left', '0'); + docSetImposterStyle(containerStyle, 'top', '0'); + docSetImposterStyle(containerStyle, 'width', `${documentRect.width}px`); + docSetImposterStyle(containerStyle, 'height', `${documentRect.height}px`); + docSetImposterStyle(containerStyle, 'overflow', 'hidden'); + docSetImposterStyle(containerStyle, 'opacity', '0'); + + docSetImposterStyle(containerStyle, 'pointer-events', 'none'); + docSetImposterStyle(containerStyle, 'z-index', '2147483646'); + + // Imposter + const imposter = document.createElement('div'); + const imposterStyle = imposter.style; - return {top, left}; -} + imposter.innerText = element.value; -function docImposterCreate(element) { - const styleProps = window.getComputedStyle(element); - const stylePairs = []; - for (const key of styleProps) { - stylePairs.push(`${key}: ${styleProps[key]};`); + for (let i = 0, ii = elementStyle.length; i < ii; ++i) { + const property = elementStyle[i]; + docSetImposterStyle(imposterStyle, property, elementStyle.getPropertyValue(property)); + } + docSetImposterStyle(imposterStyle, 'position', 'absolute'); + docSetImposterStyle(imposterStyle, 'top', `${top}px`); + docSetImposterStyle(imposterStyle, 'left', `${left}px`); + docSetImposterStyle(imposterStyle, 'margin', '0'); + docSetImposterStyle(imposterStyle, 'pointer-events', 'auto'); + + if (isTextarea) { + if (elementStyle.overflow === 'visible') { + docSetImposterStyle(imposterStyle, 'overflow', 'auto'); + } + } else { + docSetImposterStyle(imposterStyle, 'overflow', 'hidden'); + docSetImposterStyle(imposterStyle, 'white-space', 'nowrap'); + docSetImposterStyle(imposterStyle, 'line-height', elementStyle.height); } - const offset = docOffsetCalc(element); - const imposter = document.createElement('div'); - imposter.className = 'yomichan-imposter'; - imposter.innerText = element.value; - imposter.style.cssText = stylePairs.join('\n'); - imposter.style.position = 'absolute'; - imposter.style.top = `${offset.top}px`; - imposter.style.left = `${offset.left}px`; - imposter.style.opacity = 0; - imposter.style.zIndex = 2147483646; - if (element.nodeName === 'TEXTAREA' && styleProps.overflow === 'visible') { - imposter.style.overflow = 'auto'; + container.appendChild(imposter); + document.body.appendChild(container); + + // Adjust size + const imposterRect = imposter.getBoundingClientRect(); + if (imposterRect.width !== elementRect.width || imposterRect.height !== elementRect.height) { + const width = parseFloat(elementStyle.width) + (elementRect.width - imposterRect.width); + const height = parseFloat(elementStyle.height) + (elementRect.height - imposterRect.height); + docSetImposterStyle(imposterStyle, 'width', `${width}px`); + docSetImposterStyle(imposterStyle, 'height', `${height}px`); } - document.body.appendChild(imposter); imposter.scrollTop = element.scrollTop; imposter.scrollLeft = element.scrollLeft; - return imposter; -} - -function docImposterDestroy() { - for (const element of document.getElementsByClassName('yomichan-imposter')) { - element.parentNode.removeChild(element); - } + return [imposter, container]; } -function docRangeFromPoint(point) { - const element = document.elementFromPoint(point.x, point.y); +function docRangeFromPoint({x, y}, options) { + const elements = document.elementsFromPoint(x, y); let imposter = null; - if (element) { + let imposterContainer = null; + if (elements.length > 0) { + const element = elements[0]; switch (element.nodeName) { case 'IMG': case 'BUTTON': return new TextSourceElement(element); case 'INPUT': + [imposter, imposterContainer] = docImposterCreate(element, false); + break; case 'TEXTAREA': - imposter = docImposterCreate(element); + [imposter, imposterContainer] = docImposterCreate(element, true); break; } } - const range = document.caretRangeFromPoint(point.x, point.y); - if (imposter !== null) { - imposter.style.zIndex = -2147483646; + const range = caretRangeFromPointExt(x, y, options.scanning.deepDomScan ? elements : []); + if (range !== null) { + if (imposter !== null) { + docSetImposterStyle(imposterContainer.style, 'z-index', '-2147483646'); + docSetImposterStyle(imposter.style, 'pointer-events', 'none'); + } + return new TextSourceRange(range, '', imposterContainer); + } else { + if (imposterContainer !== null) { + imposterContainer.parentNode.removeChild(imposterContainer); + } + return null; } - - return range !== null && isPointInRange(point, range) ? new TextSourceRange(range) : null; } function docSentenceExtract(source, extent) { @@ -161,32 +194,158 @@ function docSentenceExtract(source, extent) { }; } -function isPointInRange(point, range) { - if (IS_FIREFOX) { - // Always return true on Firefox due to an issue where range.getClientRects() - // does not return a correct set of rects for characters at the beginning of a line. - return true; +function isPointInRange(x, y, range) { + // Require a text node to start + if (range.startContainer.nodeType !== Node.TEXT_NODE) { + return false; } - const y = point.y - 2; - for (const rect of range.getClientRects()) { - if (y <= rect.bottom) { + // Scan forward + const nodePre = range.endContainer; + const offsetPre = range.endOffset; + try { + const {node, offset, content} = TextSourceRange.seekForward(range.endContainer, range.endOffset, 1); + range.setEnd(node, offset); + + if (!isWhitespace(content) && isPointInAnyRect(x, y, range.getClientRects())) { return true; } + } finally { + range.setEnd(nodePre, offsetPre); + } + + // Scan backward + const {node, offset, content} = TextSourceRange.seekBackward(range.startContainer, range.startOffset, 1); + range.setStart(node, offset); + + if (!isWhitespace(content) && isPointInAnyRect(x, y, range.getClientRects())) { + // This purposefully leaves the starting offset as modified and sets the range length to 0. + range.setEnd(node, offset); + return true; } + // No match + return false; +} + +function isWhitespace(string) { + return string.trim().length === 0; +} + +function isPointInAnyRect(x, y, rects) { + for (const rect of rects) { + if (isPointInRect(x, y, rect)) { + return true; + } + } return false; } -if (typeof document.caretRangeFromPoint !== 'function') { - document.caretRangeFromPoint = (x, y) => { - const position = document.caretPositionFromPoint(x, y); - if (position && position.offsetNode && position.offsetNode.nodeType === Node.TEXT_NODE) { +function isPointInRect(x, y, rect) { + return ( + x >= rect.left && x < rect.right && + y >= rect.top && y < rect.bottom); +} + +const caretRangeFromPoint = (() => { + if (typeof document.caretRangeFromPoint === 'function') { + // Chrome, Edge + return (x, y) => document.caretRangeFromPoint(x, y); + } + + if (typeof document.caretPositionFromPoint === 'function') { + // Firefox + return (x, y) => { + const position = document.caretPositionFromPoint(x, y); + const node = position.offsetNode; + if (node === null) { + return null; + } + const range = document.createRange(); - range.setStart(position.offsetNode, position.offset); - range.setEnd(position.offsetNode, position.offset); + const offset = (node.nodeType === Node.TEXT_NODE ? position.offset : 0); + range.setStart(node, offset); + range.setEnd(node, offset); return range; + }; + } + + // No support + return () => null; +})(); + +function caretRangeFromPointExt(x, y, elements) { + const modifications = []; + try { + let i = 0; + let startContinerPre = null; + while (true) { + const range = caretRangeFromPoint(x, y); + if (range === null) { + return null; + } + + const startContainer = range.startContainer; + if (startContinerPre !== startContainer) { + if (isPointInRange(x, y, range)) { + return range; + } + startContinerPre = startContainer; + } + + i = disableTransparentElement(elements, i, modifications); + if (i < 0) { + return null; + } } - return null; - }; + } finally { + if (modifications.length > 0) { + restoreElementStyleModifications(modifications); + } + } +} + +function disableTransparentElement(elements, i, modifications) { + while (true) { + if (i >= elements.length) { + return -1; + } + + const element = elements[i++]; + if (isElementTransparent(element)) { + const style = element.hasAttribute('style') ? element.getAttribute('style') : null; + modifications.push({element, style}); + element.style.pointerEvents = 'none'; + return i; + } + } +} + +function restoreElementStyleModifications(modifications) { + for (const {element, style} of modifications) { + if (style === null) { + element.removeAttribute('style'); + } else { + element.setAttribute('style', style); + } + } +} + +function isElementTransparent(element) { + if ( + element === document.body || + element === document.documentElement + ) { + return false; + } + const style = window.getComputedStyle(element); + return ( + parseFloat(style.opacity) < 0 || + style.visibility === 'hidden' || + (style.backgroundImage === 'none' && isColorTransparent(style.backgroundColor)) + ); +} + +function isColorTransparent(cssColor) { + return REGEX_TRANSPARENT_COLOR.test(cssColor); } diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 090839a1..c0ec8a15 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -23,7 +23,7 @@ class DisplayFloat extends Display { this.autoPlayAudioTimer = null; this.styleNode = null; - this.dependencies = {...this.dependencies, ...{docRangeFromPoint, docSentenceExtract}}; + this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); $(window).on('message', utilAsync(this.onMessage.bind(this))); } diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 3c5f2ac8..8a5c48d0 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -285,7 +285,7 @@ class Frontend { return; } - const textSource = docRangeFromPoint(point); + const textSource = docRangeFromPoint(point, this.options); let hideResults = !textSource || !textSource.containsPoint(point); let searched = false; let success = false; @@ -301,16 +301,21 @@ class Frontend { } catch (e) { if (window.yomichan_orphaned) { if (textSource && this.options.scanning.modifier !== 'none') { - this.popup.showOrphaned(textSource.getRect(), this.options); + this.popup.showOrphaned( + textSource.getRect(), + textSource.getWritingMode(), + this.options + ); } } else { this.onError(e); } } finally { + if (textSource !== null) { + textSource.cleanup(); + } if (hideResults && this.options.scanning.autoHideResults) { this.searchClear(); - } else { - docImposterDestroy(); } this.pendingLookup = false; @@ -332,6 +337,7 @@ class Frontend { const url = window.location.href; this.popup.termsShow( textSource.getRect(), + textSource.getWritingMode(), definitions, this.options, {sentence, url, focus} @@ -357,6 +363,7 @@ class Frontend { const url = window.location.href; this.popup.kanjiShow( textSource.getRect(), + textSource.getWritingMode(), definitions, this.options, {sentence, url, focus} @@ -371,7 +378,6 @@ class Frontend { } searchClear() { - docImposterDestroy(); this.popup.hide(); this.popup.clearAutoPlayTimer(); diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 18dc0386..86ce575d 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -48,59 +48,132 @@ class Popup { return this.injected; } - async show(elementRect, options) { + async show(elementRect, writingMode, options) { await this.inject(options); - const containerStyle = window.getComputedStyle(this.container); - const containerHeight = parseInt(containerStyle.height); - const containerWidth = parseInt(containerStyle.width); + const optionsGeneral = options.general; + const container = this.container; + const containerRect = container.getBoundingClientRect(); + const getPosition = ( + writingMode === 'horizontal-tb' || optionsGeneral.popupVerticalTextPosition === 'default' ? + Popup.getPositionForHorizontalText : + Popup.getPositionForVerticalText + ); - const limitX = document.body.clientWidth; - const limitY = window.innerHeight; + const [x, y, width, height, below] = getPosition( + elementRect, + Math.max(containerRect.width, optionsGeneral.popupWidth), + Math.max(containerRect.height, optionsGeneral.popupHeight), + document.body.clientWidth, + window.innerHeight, + optionsGeneral, + writingMode + ); - let x = elementRect.left + options.general.popupHorizontalOffset; - let width = Math.max(containerWidth, options.general.popupWidth); - const overflowX = Math.max(x + width - limitX, 0); + container.classList.toggle('yomichan-float-full-width', optionsGeneral.popupDisplayMode === 'full-width'); + container.classList.toggle('yomichan-float-above', !below); + container.style.left = `${x}px`; + container.style.top = `${y}px`; + container.style.width = `${width}px`; + container.style.height = `${height}px`; + container.style.visibility = 'visible'; + } + + static getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) { + let x = elementRect.left + optionsGeneral.popupHorizontalOffset; + const overflowX = Math.max(x + width - maxWidth, 0); if (overflowX > 0) { if (x >= overflowX) { x -= overflowX; } else { - width = limitX; + width = maxWidth; x = 0; } } - let above = false; - let y = 0; - let height = Math.max(containerHeight, options.general.popupHeight); - const yBelow = elementRect.bottom + options.general.popupVerticalOffset; - const yAbove = elementRect.top - options.general.popupVerticalOffset; - const overflowBelow = Math.max(yBelow + height - limitY, 0); - const overflowAbove = Math.max(height - yAbove, 0); - if (overflowBelow > 0 || overflowAbove > 0) { - if (overflowBelow < overflowAbove) { - height = Math.max(height - overflowBelow, 0); - y = yBelow; + const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below'); + + const verticalOffset = optionsGeneral.popupVerticalOffset; + const [y, h, below] = Popup.limitGeometry( + elementRect.top - verticalOffset, + elementRect.bottom + verticalOffset, + height, + maxHeight, + preferBelow + ); + + return [x, y, width, h, below]; + } + + static getPositionForVerticalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral, writingMode) { + const preferRight = Popup.isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode); + const horizontalOffset = optionsGeneral.popupHorizontalOffset2; + const verticalOffset = optionsGeneral.popupVerticalOffset2; + + const [x, w] = Popup.limitGeometry( + elementRect.left - horizontalOffset, + elementRect.right + horizontalOffset, + width, + maxWidth, + preferRight + ); + const [y, h, below] = Popup.limitGeometry( + elementRect.bottom - verticalOffset, + elementRect.top + verticalOffset, + height, + maxHeight, + true + ); + return [x, y, w, h, below]; + } + + static isVerticalTextPopupOnRight(positionPreference, writingMode) { + switch (positionPreference) { + case 'before': + return !Popup.isWritingModeLeftToRight(writingMode); + case 'after': + return Popup.isWritingModeLeftToRight(writingMode); + case 'left': + return false; + case 'right': + return true; + } + } + + static isWritingModeLeftToRight(writingMode) { + switch (writingMode) { + case 'vertical-lr': + case 'sideways-lr': + return true; + default: + return false; + } + } + + static limitGeometry(positionBefore, positionAfter, size, limit, preferAfter) { + let after = preferAfter; + let position = 0; + const overflowBefore = Math.max(0, size - positionBefore); + const overflowAfter = Math.max(0, positionAfter + size - limit); + if (overflowAfter > 0 || overflowBefore > 0) { + if (overflowAfter < overflowBefore) { + size = Math.max(0, size - overflowAfter); + position = positionAfter; + after = true; } else { - height = Math.max(height - overflowAbove, 0); - y = Math.max(yAbove - height, 0); - above = true; + size = Math.max(0, size - overflowBefore); + position = Math.max(0, positionBefore - size); + after = false; } } else { - y = yBelow; + position = preferAfter ? positionAfter : positionBefore - size; } - this.container.classList.toggle('yomichan-float-full-width', options.general.popupDisplayMode === 'full-width'); - this.container.classList.toggle('yomichan-float-above', above); - this.container.style.left = `${x}px`; - this.container.style.top = `${y}px`; - this.container.style.width = `${width}px`; - this.container.style.height = `${height}px`; - this.container.style.visibility = 'visible'; + return [position, size, after]; } - async showOrphaned(elementRect, options) { - await this.show(elementRect, options); + async showOrphaned(elementRect, writingMode, options) { + await this.show(elementRect, writingMode, options); this.invokeApi('orphaned'); } @@ -136,13 +209,13 @@ class Popup { return contained; } - async termsShow(elementRect, definitions, options, context) { - await this.show(elementRect, options); + async termsShow(elementRect, writingMode, definitions, options, context) { + await this.show(elementRect, writingMode, options); this.invokeApi('termsShow', {definitions, options, context}); } - async kanjiShow(elementRect, definitions, options, context) { - await this.show(elementRect, options); + async kanjiShow(elementRect, writingMode, definitions, options, context) { + await this.show(elementRect, writingMode, options); this.invokeApi('kanjiShow', {definitions, options, context}); } diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js index a360b331..e724488d 100644 --- a/ext/fg/js/source.js +++ b/ext/fg/js/source.js @@ -25,13 +25,20 @@ const IGNORE_TEXT_PATTERN = /\u200c/; */ class TextSourceRange { - constructor(range, content='') { + constructor(range, content, imposterContainer) { this.range = range; this.content = content; + this.imposterContainer = imposterContainer; } clone() { - return new TextSourceRange(this.range.cloneRange(), this.content); + return new TextSourceRange(this.range.cloneRange(), this.content, this.imposterContainer); + } + + cleanup() { + if (this.imposterContainer !== null && this.imposterContainer.parentNode !== null) { + this.imposterContainer.parentNode.removeChild(this.imposterContainer); + } } text() { @@ -61,6 +68,10 @@ class TextSourceRange { return this.range.getBoundingClientRect(); } + getWritingMode() { + return TextSourceRange.getElementWritingMode(TextSourceRange.getParentElement(this.range.startContainer)); + } + getPaddedRect() { const range = this.range.cloneRange(); const startOffset = range.startOffset; @@ -204,6 +215,23 @@ class TextSourceRange { return state.remainder > 0; } + + static getParentElement(node) { + while (node !== null && node.nodeType !== Node.ELEMENT_NODE) { + node = node.parentNode; + } + return node; + } + + static getElementWritingMode(element) { + if (element === null) { + return 'horizontal-tb'; + } + + const style = window.getComputedStyle(element); + const writingMode = style.writingMode; + return typeof writingMode === 'string' ? writingMode : 'horizontal-tb'; + } } @@ -221,6 +249,10 @@ class TextSourceElement { return new TextSourceElement(this.element, this.content); } + cleanup() { + // NOP + } + text() { return this.content; } @@ -267,6 +299,10 @@ class TextSourceElement { return this.element.getBoundingClientRect(); } + getWritingMode() { + return 'horizontal-tb'; + } + select() { // NOP } diff --git a/ext/fg/js/util.js b/ext/fg/js/util.js index 954b3988..7518beb5 100644 --- a/ext/fg/js/util.js +++ b/ext/fg/js/util.js @@ -27,6 +27,7 @@ function utilInvoke(action, params={}) { return new Promise((resolve, reject) => { try { chrome.runtime.sendMessage({action, params}, (response) => { + utilCheckLastError(chrome.runtime.lastError); if (response !== null && typeof response === 'object') { if (response.error) { reject(response.error); @@ -43,3 +44,7 @@ function utilInvoke(action, params={}) { } }); } + +function utilCheckLastError(e) { + // NOP +} |