alex/yomichan
1
Fork 0
Code Releases Activity

Update full-width popup to stay on screen

Browse Source
This commit is contained in:
toasted-nutbread 2020-01-11 14:45:40 -05:00
parent d59f2022b9
commit 74d9b0e857
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ext/fg/css/client.css
View File

@ -39,21 +39,14 @@ iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
iframe.yomichan-float.yomichan-float-full-width {
border-left: none;
border-right: none;
left: 0 !important;
right: 0 !important;
width: 100% !important;
box-sizing: border-box;
resize: none;
}
iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
border-bottom: none;
top: auto !important;
bottom: 0 !important;
}
iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above {
border-top: none;
top: 0 !important;
bottom: auto !important;
}

12
ext/fg/js/popup.js
View File

@ -262,7 +262,7 @@ class Popup {
const scale = this._contentScale;
const scaleRatio = this._containerSizeContentScale === null ? 1.0 : scale / this._containerSizeContentScale;
this._containerSizeContentScale = scale;
const [x, y, width, height, below] = getPosition(
let [x, y, width, height, below] = getPosition(
elementRect,
Math.max(containerRect.width * scaleRatio, optionsGeneral.popupWidth * scale),
Math.max(containerRect.height * scaleRatio, optionsGeneral.popupHeight * scale),
@ -272,8 +272,16 @@ class Popup {
writingMode
);
container.classList.toggle('yomichan-float-full-width', optionsGeneral.popupDisplayMode === 'full-width');
const fullWidth = (optionsGeneral.popupDisplayMode === 'full-width');
container.classList.toggle('yomichan-float-full-width', fullWidth);
container.classList.toggle('yomichan-float-above', !below);
if (optionsGeneral.popupDisplayMode === 'full-width') {
x = viewport.left;
y = below ? viewport.bottom - height : viewport.top;
width = viewport.right - viewport.left;
}
container.style.left = `${x}px`;
container.style.top = `${y}px`;
container.style.width = `${width}px`;