diff options
| -rw-r--r-- | ext/fg/css/client.css | 2 | ||||
| -rw-r--r-- | ext/fg/js/popup.js | 17 |
2 files changed, 12 insertions, 7 deletions
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index 5289392a..9f566480 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -22,10 +22,8 @@ iframe#yomichan-popup { background-color: #fff; border: 1px solid #999; box-shadow: 0 0 10px rgba(0, 0, 0, .5); - height: 250px; position: fixed; resize: both; visibility: hidden; - width: 400px; z-index: 2147483647; } diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index d5796476..5a2747fc 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -20,12 +20,16 @@ class Popup { constructor() { this.offset = 10; + this.minWidth = 400; + this.minHeight = 250; this.container = document.createElement('iframe'); this.container.id = 'yomichan-popup'; this.container.addEventListener('mousedown', e => e.stopPropagation()); this.container.addEventListener('scroll', e => e.stopPropagation()); this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html')); + this.container.style.width=`${this.minWidth}px`; + this.container.style.height=`${this.minHeight}px`; document.body.appendChild(this.container); } @@ -43,23 +47,26 @@ class Popup { const containerHeight = parseInt(containerStyle.height); const containerWidth = parseInt(containerStyle.width); + const limitX = document.body.clientWidth; + const limitY = window.innerHeight; + let x = elementRect.left; - let width = containerWidth; - const overflowX = Math.max(x + width - document.body.clientWidth, 0); + let width = Math.max(containerWidth, this.minWidth); + const overflowX = Math.max(x + width - limitX, 0); if (overflowX > 0) { if (x >= overflowX) { x -= overflowX; } else { - width = document.body.clientWidth; + width = limitX; x = 0; } } let y = 0; - let height = containerHeight; + let height = Math.max(containerHeight, this.minHeight); const yBelow = elementRect.bottom + this.offset; const yAbove = elementRect.top - this.offset; - const overflowBelow = Math.max(yBelow + height - document.body.clientHeight, 0); + const overflowBelow = Math.max(yBelow + height - limitY, 0); const overflowAbove = Math.max(height - yAbove, 0); if (overflowBelow > 0 || overflowAbove > 0) { if (overflowBelow < overflowAbove) { |