From a39a1fa9e4700d1189dfc5073b5fcb2557965671 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 22 Aug 2019 19:44:31 -0400 Subject: Add support for Edge browser --- ext/bg/js/settings.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) (limited to 'ext/bg/js/settings.js') diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 75082f3e..e542118c 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -116,7 +116,7 @@ async function formMainDictionaryOptionsPopulate(options) { select.append($('')); let mainDictionary = ''; - for (const dictRow of await utilDatabaseSummarize()) { + for (const dictRow of toIterable(await utilDatabaseSummarize())) { if (dictRow.sequenced) { select.append($(``)); if (dictRow.title === options.general.mainDictionary) { @@ -314,12 +314,12 @@ async function dictionaryGroupsPopulate(options) { const dictGroups = $('#dict-groups').empty(); const dictWarning = $('#dict-warning').hide(); - const dictRows = await utilDatabaseSummarize(); + const dictRows = toIterable(await utilDatabaseSummarize()); if (dictRows.length === 0) { dictWarning.show(); } - for (const dictRow of dictRowsSort(dictRows, options)) { + for (const dictRow of toIterable(dictRowsSort(dictRows, options))) { const dictOptions = options.dictionaries[dictRow.title] || { enabled: false, priority: 0, @@ -581,20 +581,19 @@ async function onAnkiFieldTemplatesReset(e) { */ async function getBrowser() { - if (typeof chrome !== "undefined") { - if (typeof browser !== "undefined") { - try { - const info = await browser.runtime.getBrowserInfo(); - if (info.name === "Fennec") { - return "firefox-mobile"; - } - } catch (e) { } - return "firefox"; - } else { - return "chrome"; - } + if (EXTENSION_IS_BROWSER_EDGE) { + return 'edge'; + } + if (typeof browser !== 'undefined') { + try { + const info = await browser.runtime.getBrowserInfo(); + if (info.name === 'Fennec') { + return 'firefox-mobile'; + } + } catch (e) { } + return 'firefox'; } else { - return "edge"; + return 'chrome'; } } -- cgit v1.2.3 From 7ba71de5e772cf1bbde9510a0cae8b9f9cbc8936 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 29 Aug 2019 20:45:07 -0400 Subject: Replace double quotes with single quotes --- ext/bg/js/settings.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'ext/bg/js/settings.js') diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index e542118c..cdcdae77 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -599,7 +599,7 @@ async function getBrowser() { function storageBytesToLabeledString(size) { const base = 1000; - const labels = ["bytes", "KB", "MB", "GB"]; + const labels = ['bytes', 'KB', 'MB', 'GB']; let labelIndex = 0; while (size >= base) { size /= base; @@ -619,14 +619,14 @@ storageEstimate.mostRecent = null; async function storageInfoInitialize() { const browser = await getBrowser(); - const container = document.querySelector("#storage-info"); - container.setAttribute("data-browser", browser); + const container = document.querySelector('#storage-info'); + container.setAttribute('data-browser', browser); await storageShowInfo(); - container.classList.remove("storage-hidden"); + container.classList.remove('storage-hidden'); - document.querySelector("#storage-refresh").addEventListener('click', () => storageShowInfo(), false); + document.querySelector('#storage-refresh').addEventListener('click', () => storageShowInfo(), false); } async function storageUpdateStats() { @@ -636,8 +636,8 @@ async function storageUpdateStats() { const valid = (estimate !== null); if (valid) { - document.querySelector("#storage-usage").textContent = storageBytesToLabeledString(estimate.usage); - document.querySelector("#storage-quota").textContent = storageBytesToLabeledString(estimate.quota); + document.querySelector('#storage-usage').textContent = storageBytesToLabeledString(estimate.usage); + document.querySelector('#storage-quota').textContent = storageBytesToLabeledString(estimate.quota); } storageUpdateStats.isUpdating = false; @@ -649,8 +649,8 @@ async function storageShowInfo() { storageSpinnerShow(true); const valid = await storageUpdateStats(); - document.querySelector("#storage-use").classList.toggle("storage-hidden", !valid); - document.querySelector("#storage-error").classList.toggle("storage-hidden", valid); + document.querySelector('#storage-use').classList.toggle('storage-hidden', !valid); + document.querySelector('#storage-error').classList.toggle('storage-hidden', valid); storageSpinnerShow(false); } -- cgit v1.2.3 From 68af0d86c3a941e185b34926fdbc57c457466e28 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 31 Aug 2019 11:51:31 -0400 Subject: Improve popup position for vertical text --- ext/bg/js/options.js | 3 ++ ext/bg/js/settings.js | 6 +++ ext/bg/settings.html | 19 +++++++ ext/fg/css/client.css | 1 + ext/fg/js/frontend.js | 8 ++- ext/fg/js/popup.js | 147 +++++++++++++++++++++++++++++++++++++------------- ext/fg/js/source.js | 25 +++++++++ 7 files changed, 170 insertions(+), 39 deletions(-) (limited to 'ext/bg/js/settings.js') diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 29d8a215..c4a7e681 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -199,6 +199,9 @@ function optionsSetDefaults(options) { popupHeight: 250, popupHorizontalOffset: 0, popupVerticalOffset: 10, + popupHorizontalOffset2: 10, + popupVerticalOffset2: 0, + popupVerticalTextPosition: 'before', showGuide: true, compactTags: false, compactGlossaries: false, diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index cdcdae77..83a1c2f6 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -32,10 +32,13 @@ async function formRead() { optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked'); optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10); optionsNew.general.popupDisplayMode = $('#popup-display-mode').val(); + optionsNew.general.popupVerticalTextPosition = $('#popup-vertical-text-position').val(); optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10); optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10); optionsNew.general.popupHorizontalOffset = parseInt($('#popup-horizontal-offset').val(), 0); optionsNew.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10); + optionsNew.general.popupHorizontalOffset2 = parseInt($('#popup-horizontal-offset2').val(), 0); + optionsNew.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10); optionsNew.general.customPopupCss = $('#custom-popup-css').val(); optionsNew.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked'); @@ -168,10 +171,13 @@ async function onReady() { $('#show-advanced-options').prop('checked', options.general.showAdvanced); $('#max-displayed-results').val(options.general.maxResults); $('#popup-display-mode').val(options.general.popupDisplayMode); + $('#popup-vertical-text-position').val(options.general.popupVerticalTextPosition); $('#popup-width').val(options.general.popupWidth); $('#popup-height').val(options.general.popupHeight); $('#popup-horizontal-offset').val(options.general.popupHorizontalOffset); $('#popup-vertical-offset').val(options.general.popupVerticalOffset); + $('#popup-horizontal-offset2').val(options.general.popupHorizontalOffset2); + $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2); $('#custom-popup-css').val(options.general.customPopupCss); $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 0704140e..c6090c91 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -107,6 +107,17 @@ +
+ + +
+
@@ -133,6 +144,14 @@
+
+ +
+
+
+
+
+
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/js/frontend.js b/ext/fg/js/frontend.js index 3c5f2ac8..72379062 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -301,7 +301,11 @@ 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); @@ -332,6 +336,7 @@ class Frontend { const url = window.location.href; this.popup.termsShow( textSource.getRect(), + textSource.getWritingMode(), definitions, this.options, {sentence, url, focus} @@ -357,6 +362,7 @@ class Frontend { const url = window.location.href; this.popup.kanjiShow( textSource.getRect(), + textSource.getWritingMode(), definitions, this.options, {sentence, url, focus} diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 18dc0386..138dec41 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -48,59 +48,130 @@ 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 verticalOffset = optionsGeneral.popupVerticalOffset; + const [y, h, below] = Popup.limitGeometry( + elementRect.top - verticalOffset, + elementRect.bottom + verticalOffset, + height, + maxHeight, + true + ); + + 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 +207,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..a5421934 100644 --- a/ext/fg/js/source.js +++ b/ext/fg/js/source.js @@ -61,6 +61,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 +208,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'; + } } @@ -267,6 +288,10 @@ class TextSourceElement { return this.element.getBoundingClientRect(); } + getWritingMode() { + return 'horizontal-tb'; + } + select() { // NOP } -- cgit v1.2.3 From 85472d9407861f688e55b06b1767882f71229fc2 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 31 Aug 2019 11:56:12 -0400 Subject: Add option for position of popup for horizontal text --- ext/bg/js/options.js | 1 + ext/bg/js/settings.js | 2 ++ ext/bg/settings.html | 8 ++++++++ ext/fg/js/popup.js | 4 +++- 4 files changed, 14 insertions(+), 1 deletion(-) (limited to 'ext/bg/js/settings.js') diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index c4a7e681..c76525b9 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -201,6 +201,7 @@ function optionsSetDefaults(options) { popupVerticalOffset: 10, popupHorizontalOffset2: 10, popupVerticalOffset2: 0, + popupHorizontalTextPosition: 'below', popupVerticalTextPosition: 'before', showGuide: true, compactTags: false, diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 83a1c2f6..c4eb4842 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -32,6 +32,7 @@ async function formRead() { optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked'); optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10); optionsNew.general.popupDisplayMode = $('#popup-display-mode').val(); + optionsNew.general.popupHorizontalTextPosition = $('#popup-horizontal-text-position').val(); optionsNew.general.popupVerticalTextPosition = $('#popup-vertical-text-position').val(); optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10); optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10); @@ -171,6 +172,7 @@ async function onReady() { $('#show-advanced-options').prop('checked', options.general.showAdvanced); $('#max-displayed-results').val(options.general.maxResults); $('#popup-display-mode').val(options.general.popupDisplayMode); + $('#popup-horizontal-text-position').val(options.general.popupHorizontalTextPosition); $('#popup-vertical-text-position').val(options.general.popupVerticalTextPosition); $('#popup-width').val(options.general.popupWidth); $('#popup-height').val(options.general.popupHeight); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index c6090c91..4f244602 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -107,6 +107,14 @@
+
+ + +
+
Automatically hide results
+
+ +
+
diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js index 8bb857e7..727bc5d2 100644 --- a/ext/fg/js/document.js +++ b/ext/fg/js/document.js @@ -89,7 +89,7 @@ function docImposterCreate(element, isTextarea) { return [imposter, container]; } -function docRangeFromPoint({x, y}) { +function docRangeFromPoint({x, y}, options) { const elements = document.elementsFromPoint(x, y); let imposter = null; let imposterContainer = null; @@ -108,7 +108,7 @@ function docRangeFromPoint({x, y}) { } } - const range = caretRangeFromPointExt(x, y, elements); + const range = caretRangeFromPointExt(x, y, options.scanning.deepDomScan ? elements : []); if (range !== null) { if (imposter !== null) { docSetImposterStyle(imposterContainer.style, 'z-index', '-2147483646'); diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 5a8d18c1..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; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 4620e198..ebf56897 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -80,7 +80,7 @@ class Display { const {docRangeFromPoint, docSentenceExtract} = this.dependencies; const clickedElement = $(e.target); - const textSource = docRangeFromPoint({x: e.clientX, y: e.clientY}); + const textSource = docRangeFromPoint({x: e.clientX, y: e.clientY}, this.options); if (textSource === null) { return false; } -- cgit v1.2.3