kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-08-03 19:38:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix vertical positioning of popovers #672 (#674)

Browse Source
This commit is contained in:
Jaifroid 2024-11-30 18:00:42 +00:00 committed by GitHub
parent 646b9de6ca
commit 0ff1d4ac73
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 84 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/-/s/style-dark.css
View File

@ -1,4 +1,4 @@

/* Wikipedia Dark Theme v1.0.23 (1/17/2017)
* https://github.com/StylishThemes/Wikipedia-Dark
* http://userstyles.org/styles/
@ -14,7 +14,7 @@
*/
/* transparent background */
div, span:not(.legend-color):not([class*="wikEd"]):not([style*="background"]), .MainPageBG, .navbox-list,
div:not(.kiwixtooltip), span:not(.legend-color):not([class*="wikEd"]):not([style*="background"]), .MainPageBG, .navbox-list,
div#mw-head, .mw-wsmfinal-content, #bodyContent, .referencetooltip > li + li,
div.vectorTabs ul li, tr[style*="background:#F5FFFA"],
th[style*="background-color: #fff"], .mw-echo-notifications-badge,
@ -24,7 +24,7 @@ th[style*="background-color: #fff"], .mw-echo-notifications-badge,
}
/*** Overall ***/
p, li, td:not([style*="background"]), th:not([style*="background"]), caption, div {
p, li, td:not([style*="background"]), th:not([style*="background"]), caption, div:not(.kiwixtooltip) {
color: lightgray !important;
background-image: none !important;
}
@ -170,7 +170,7 @@ tr[style*="background: antiquewhite"], tr[style*="background-color:#ee"], tr[sty
.mw-ui-button[style*="background"], .mw-ui-button[style*="background"] *, .wikiEditor-ui,
table.navbox.collapsible tr:nth-child(2) > td, div.menu, div.NavHead, .oo-ui-popupWidget-popup,
.oo-ui-buttonElement-button, .mw-notification, .mwe-popups, .mwe-popups-is-not-tall, .mwe-popups-is-tall,
.ui-widget-content, .oo-ui-window-body, #pagehistory li.selected, .tracklist tr, .dataTable tr, div.kiwixtooltip {
.ui-widget-content, .oo-ui-window-body, #pagehistory li.selected, .tracklist tr, .dataTable tr {
background-color: #222 !important;
}

77
www/js/app.js
View File

@ -414,6 +414,7 @@ function printCleanup () {
// We don't need a radical cleanup because there was no printIntercept
removePageMaxWidth();
setTab();
setArticleZoom(params.relativeFontSize);
params.cssTheme = settingsStore.getItem('cssTheme') || 'light';
if (document.getElementById('cssWikiDarkThemeDarkReaderCheck').checked) {
// It seems darkReader has been auto-turned on, so we need to respect that
@ -522,6 +523,8 @@ function printIntercept () {
removePageMaxWidth();
params.removePageMaxWidth = tempPageMaxWidth;
}
// Reset zoom level to 100%
setArticleZoom(100);
// Put doc into light mode
params.cssTheme = 'light';
switchCSSTheme();
@ -688,38 +691,39 @@ document.getElementById('btnForward').addEventListener('click', function () {
history.forward();
});
document.getElementById('btnZoomin').addEventListener('click', function () {
params.relativeFontSize += 5;
var doc = document.getElementById('articleContent').contentDocument;
var docElStyle = doc.documentElement.style;
// IE11 and Firefox need to use fontSize on the body style
var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
docElStyle = zoomProp === 'fontSize' ? doc.body.style : docElStyle;
docElStyle[zoomProp] = /-\/static\/main\.css|statc\/css\/sotoki.css/.test(doc.head.innerHTML) && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
var lblZoom = document.getElementById('lblZoom');
lblZoom.innerHTML = params.relativeFontSize + '%';
lblZoom.style.cssText = 'position:absolute;right:' + window.innerWidth / 5 + 'px;bottom:50px;z-index:50;';
setTimeout(function () {
lblZoom.innerHTML = '';
}, 2000);
settingsStore.setItem('relativeFontSize', params.relativeFontSize, Infinity);
document.getElementById('articleContent').contentWindow.focus();
params.relativeFontSize = Math.min(200, params.relativeFontSize + 5);
setArticleZoom(params.relativeFontSize, true);
});
document.getElementById('btnZoomout').addEventListener('click', function () {
params.relativeFontSize -= 5;
var doc = document.getElementById('articleContent').contentDocument;
var docElStyle = doc.documentElement.style;
var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
docElStyle = zoomProp === 'fontSize' ? doc.body.style : docElStyle;
docElStyle[zoomProp] = /-\/static\/main\.css|statc\/css\/sotoki.css/.test(doc.head.innerHTML) && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
var lblZoom = document.getElementById('lblZoom');
lblZoom.innerHTML = params.relativeFontSize + '%';
lblZoom.style.cssText = 'position:absolute;right:' + window.innerWidth / 4 + 'px;bottom:50px;z-index:50;';
setTimeout(function () {
lblZoom.innerHTML = '';
}, 2000);
settingsStore.setItem('relativeFontSize', params.relativeFontSize, Infinity);
document.getElementById('articleContent').contentWindow.focus();
params.relativeFontSize = Math.max(50, params.relativeFontSize - 5);
setArticleZoom(params.relativeFontSize, true);
});
let zoomLabelTimeout;
function setArticleZoom (zoomLevel, set) {
const root = articleDocument.documentElement || articleDocument;
const percentageFontSize = zoomLevel + '%';
// Set CSS fontSize and zoom if supported
// Note that the zoom property is supported in Firefox since May 2024, but it doesn't
// scale the font size at least in Wikipedia pages, so we need to set fontSize as well
root.style.fontSize = percentageFontSize;
if ('zoom' in root.style) {
root.style.zoom = percentageFontSize;
}
// If we are setting a value from the UI, update the display and settings
if (set) {
// Update zoom label
const lblZoom = document.getElementById('lblZoom');
lblZoom.innerHTML = percentageFontSize;
lblZoom.style.cssText = 'position:absolute;right:' + window.innerWidth / 4 + 'px;bottom:50px;z-index:50;';
// Clear and set timeout to hide zoom label
if (zoomLabelTimeout) clearTimeout(zoomLabelTimeout);
zoomLabelTimeout = setTimeout(function () {
lblZoom.innerHTML = '';
}, 2500);
settingsStore.setItem('relativeFontSize', zoomLevel, Infinity);
document.getElementById('articleContent').contentWindow.focus();
}
}
setRelativeUIFontSize(params.relativeUIFontSize);
document.getElementById('relativeUIFontSizeSlider').addEventListener('change', function () {
setRelativeUIFontSize(this.value);
@ -5427,13 +5431,7 @@ var articleLoadedSW = function (dirEntry, container) {
if (!appstate.isReplayWorkerAvailable) switchCSSTheme(); // Gets called in articleLoader for replay_iframe
if (appstate.selectedArchive.zimType === 'open') {
// Set relative font size + Stackexchange-family multiplier
var zimType = /-\/s\/style\.css/i.test(doc.head.innerHTML) ? 'desktop' : 'mobile';
zimType = /-\/static\/main\.css|statc\/css\/sotoki.css/i.test(doc.head.innerHTML) ? 'desktop-stx' : zimType; // Support stackexchange
zimType = /minerva|mobile[^"']*\.css/i.test(doc.head.innerHTML) ? 'mobile' : zimType;
var docElStyle = doc.documentElement.style;
var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
docElStyle = zoomProp === 'fontSize' ? docBody.style : docElStyle;
docElStyle[zoomProp] = ~zimType.indexOf('stx') && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
setArticleZoom(params.relativeFontSize);
if (!params.isLandingPage) openAllSections();
}
checkToolbar();
@ -6626,11 +6624,8 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
if (params.lockDisplayOrientation) articleWindow.addEventListener('mousedown', refreshFullScreen, true);
setupTableOfContents();
}
// Set relative font size + Stackexchange-family multiplier
var docElStyle = articleDocument.style;
var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
docElStyle = zoomProp === 'fontSize' ? docBody.style : docElStyle;
docElStyle[zoomProp] = zimType && ~zimType.indexOf('stx') && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + '%' : params.relativeFontSize + '%';
// Set relative font size
setArticleZoom(params.relativeFontSize);
// Set page width according to user preference
removePageMaxWidth();
setupHeadings();

62
www/js/lib/popovers.js
View File

@ -178,9 +178,9 @@ function getImageHTMLFromNode (node, baseURL, pathPrefix) {
* @param {Boolean} dark An optional parameter to adjust the background colour for dark themes (generally not needed for inversion-based themes)
*/
function attachKiwixPopoverCss (doc, dark) {
const colour = dark && !/invert/i.test(params.cssTheme) ? 'darkgray' : 'black';
const backgroundColour = dark && !/invert/i.test(params.cssTheme) ? '#111' : '#ebf4fb';
const borderColour = dark ? 'darkslategray' : 'skyblue';
const colour = dark && !/invert/i.test(params.cssTheme) ? 'lightgray' : 'black';
const backgroundColour = dark && !/invert/i.test(params.cssTheme) ? '#121e1e' : '#ebf4fb';
const borderColour = 'skyblue !important';
// DEV: Firefox OS blocks loading stylesheet files into iframe DOM content even if it is same origin, so we are forced to insert a style element instead
uiUtil.insertLinkElement(doc, `
.kiwixtooltip {
@ -333,6 +333,7 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
div.popoverisloading = true;
const screenWidth = win.innerWidth - 40;
const screenHeight = document.documentElement.clientHeight;
let zoomFactor = 'zoom' in currentDocument.documentElement.style && !isSafari() ? params.relativeFontSize / 100 : 1;
let margin = 40;
let divWidth = 512;
if (screenWidth <= divWidth) {
@ -352,40 +353,55 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
// DEV: We need to insert the div into the target document before we can obtain its computed dimensions accurately
currentDocument.body.appendChild(div);
// Calculate the position of the link that is being hovered
const linkRect = anchor.getBoundingClientRect();
const rect = anchor.getBoundingClientRect();
const linkRect = {
top: rect.top,
bottom: rect.bottom,
left: rect.left,
right: rect.right,
width: rect.width
};
// Note that since Chromium 128 getBoundingClientRect() now returns zoom-adjusted values, but if this is the case,
// then currentCSSZoom will be defined as well, so we can adjust for this. Note that UWP also requires adjustment.
if (/UWP/.test(params.appType) || 'MSBlobBuilder' in window || anchor.currentCSSZoom || isSafari()) {
linkRect.top = linkRect.top / zoomFactor;
linkRect.bottom = linkRect.bottom / zoomFactor;
linkRect.left = linkRect.left / zoomFactor;
linkRect.right = linkRect.right / zoomFactor;
linkRect.width = linkRect.width / zoomFactor;
}
// Initially position the div 20px above the link
const spacing = 20;
let triangleDirection = 'top';
const divOffsetHeight = /UWP/.test(params.appType) ? div.offsetHeight * params.relativeFontSize / 100 + 20 : div.offsetHeight + 20;
const divOffsetHeight = div.offsetHeight + spacing;
let divRectY = linkRect.top - divOffsetHeight;
if (/UWP/.test(params.appType)) divRectY = divRectY * 100 / params.relativeFontSize;
let triangleY = divHeight + 6;
// If we're less than half margin from the top, move the div below the link
if (divRectY < margin / 2) {
triangleDirection = 'bottom';
divRectY = linkRect.bottom + 20;
divRectY = linkRect.bottom + spacing;
triangleY = -16;
if (/UWP/.test(params.appType)) divRectY = divRectY * 100 / params.relativeFontSize;
}
// Position it horizontally in relation to the pointer position
let divRectX, triangleX;
if (event.type === 'touchstart') {
divRectX = event.touches[0].clientX - divWidth / 2;
triangleX = event.touches[0].clientX - divRectX - 20;
triangleX = event.touches[0].clientX - divRectX - spacing;
} else if (event.type === 'focus') {
divRectX = linkRect.left + linkRect.width / 2 - divWidth / 2;
triangleX = linkRect.left + linkRect.width / 2 - divRectX - 20;
divRectX = linkRect.left * zoomFactor + linkRect.width / 2 - divWidth / 2;
triangleX = linkRect.left * zoomFactor + linkRect.width / 2 - divRectX - spacing;
} else {
divRectX = event.clientX - divWidth / 2;
triangleX = event.clientX - divRectX - 20;
triangleX = event.clientX - divRectX - spacing;
}
// If right edge of div is greater than margin from the right side of window, shift it to margin
if (divRectX + divWidth * params.relativeFontSize / 100 > screenWidth - margin) {
if (divRectX + divWidth * zoomFactor > screenWidth - margin) {
triangleX += divRectX;
divRectX = screenWidth - divWidth * params.relativeFontSize / 100 - margin;
divRectX = screenWidth - divWidth * zoomFactor - margin;
triangleX -= divRectX;
}
// If we're less than margin to the left, shift it to margin px from left
if (divRectX * params.relativeFontSize / 100 < margin) {
if (divRectX * zoomFactor < margin) {
triangleX += divRectX;
divRectX = margin;
triangleX -= divRectX;
@ -394,9 +410,13 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
if (triangleX < 10) triangleX = 10;
if (triangleX > divWidth - 10) triangleX = divWidth - 10;
// Adjust positions to take into account the font zoom factor
divRectX = divRectX * 100 / params.relativeFontSize;
triangleX = triangleX * 100 / params.relativeFontSize;
const adjustedScrollY = win.scrollY * 100 / params.relativeFontSize;
const adjustedScrollY = win.scrollY / zoomFactor;
if (isSafari()) {
// We have to reinstate zoomFactor as it is only applied to horizontal positioning in Safari
zoomFactor = params.relativeFontSize / 100;
}
divRectX = divRectX / zoomFactor;
triangleX = triangleX / zoomFactor;
// Now set the calculated x and y positions
div.style.top = divRectY + adjustedScrollY + 'px';
div.style.left = divRectX + 'px';
@ -418,6 +438,12 @@ function createNewKiwixPopoverCointainer (win, anchor, event) {
return { div: div, span: span };
}
function isSafari () {
return typeof navigator !== 'undefined' &&
/^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
};
/**
* Adds event listeners to the popover's control icons
* @param {Element} anchor The anchor which launched the popover