mirror of
https://github.com/kiwix/kiwix-js-pwa.git
synced 2025-09-09 12:19:46 -04:00
Fix touch zoom on the iframe
Former-commit-id: 16ff820bd12a092ec1c842c20501ea4355aebed6 [formerly 11e37f7e97fdbd9415bb4a7860614a2fcc1cd322] [formerly 099eca1be67b8a87329323cdbd6136400ee57624] [formerly 288bc52cbe60a687354b9d043ea524798ae3cd2f [formerly 8ed903b4dc0530f27f057fc275da5bf764252e28 [formerly d5bd2f6e56c53c89218b39a54543217f1ef9422d]]] Former-commit-id: 18b7afb3356dc49f38fb013ac093046da435014a [formerly 1fca164bfde88b3e3592d629e083bbc6107f7785 [formerly 5be0911614cd22b62d7222521c606f88004aa90b]] Former-commit-id: 4aa0d376117fe298aa35adc98d1f82dea583429e [formerly 136016ba4eb8c36f626f0214e44ca4d2dbdc6d65] Former-commit-id: 1360ec34f6d118c0c2cb6887c5b521644e83d39f
This commit is contained in:
Jaifroid
parent
0252d19ff9
commit
1028962d79
@ -4,6 +4,8 @@
|
||||
|
||||
* FEATURE: (Experimental) PWA is paritcipating in File Handling API origin trial
|
||||
* FIX: Bug which failed to detect images correctly in a new tab
|
||||
* FIX: Touch-zoom of contents of iframe no longer blanks part of the display
|
||||
* FIX: Broken zoom of contents of iframe (with UI buttons) in Internet Explorer
|
||||
|
||||
## Release 1.4.2
|
||||
|
||||
|
||||
@ -125,6 +125,8 @@
|
||||
<li>Improve handover from local code to PWA code in UWP app to prevent rogue error message</li>
|
||||
<li>Improve page composition timing for non-MS browsers</li>
|
||||
<li>Fix bug which failed to detect images correctly in new tab</li>
|
||||
<li>Touch-zoom of contents of iframe no longer blanks part of the display</li>
|
||||
<li>Fixed broken zoom of contents of iframe (with UI buttons) in Internet Explorer</li>
|
||||
</ul>
|
||||
<p><a href="https://github.com/kiwix/kiwix-js-windows/blob/master/CHANGELOG.md" target="_blank">Full changelog...<img src="I/s/Icon_External_Link.png"></a></p>
|
||||
</div>
|
||||
@ -830,7 +832,7 @@
|
||||
<!-- Bootstrap alert box -->
|
||||
<div id="alertBoxHeader" style="text-align: center; position: relative; z-index: 1; display: none;"></div>
|
||||
<!-- Attribute nwdisable prevents scripts in iframe accessing the nwjs node APIs -->
|
||||
<iframe id="articleContent" class="articleIFrame" nwdisable></iframe>
|
||||
<iframe id="articleContent" class="articleIFrame" style="touch-action:none" nwdisable></iframe>
|
||||
</article>
|
||||
<footer id="footer">
|
||||
<!-- Bootstrap alert box -->
|
||||
|
||||
@ -86,8 +86,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
header.style.transform = 'translateY(0)';
|
||||
document.getElementById('footer').style.transform = 'translateY(0)';
|
||||
iframe.style.transform = 'translateY(-1px)';
|
||||
//iframe.style.height = window.innerHeight - navbarHeight + "px";
|
||||
iframe.style.height = window.innerHeight + 'px';
|
||||
// iframe.style.height = window.innerHeight + 'px';
|
||||
// DEV: if we set the iframe with clientHeight, then it takes into account any zoom
|
||||
iframe.style.height = document.documentElement.clientHeight + 'px';
|
||||
|
||||
//Re-enable top-level scrolling
|
||||
scrollbox.style.height = window.innerHeight - navbarHeight + 'px';
|
||||
@ -127,7 +128,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
}
|
||||
checkToolbar();
|
||||
}
|
||||
$(document).ready(resizeIFrame);
|
||||
$(document).ready(function() {
|
||||
resizeIFrame();
|
||||
// uiUtil.initTouchZoom();
|
||||
});
|
||||
$(window).resize(function () {
|
||||
resizeIFrame();
|
||||
// We need to load any images exposed by the resize
|
||||
@ -605,14 +609,16 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
params.relativeFontSize += 5;
|
||||
var doc = document.getElementById('articleContent').contentDocument;
|
||||
var docElStyle = doc.documentElement.style;
|
||||
var zoomProp = 'zoom' in docElStyle ? 'zoom' : 'fontSize';
|
||||
// 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/.test(doc.head.innerHTML) && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + "%" : params.relativeFontSize + "%";
|
||||
document.getElementById('lblZoom').innerHTML = params.relativeFontSize + "%";
|
||||
document.getElementById('lblZoom').style = "position:absolute;right: " + window.innerWidth / 5 + "px;bottom:50px;z-index:50;";
|
||||
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 () {
|
||||
document.getElementById('lblZoom').innerHTML = "";
|
||||
}, 1000);
|
||||
lblZoom.innerHTML = "";
|
||||
}, 2000);
|
||||
settingsStore.setItem('relativeFontSize', params.relativeFontSize, Infinity);
|
||||
document.getElementById('articleContent').contentWindow.focus();
|
||||
});
|
||||
@ -620,14 +626,15 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
params.relativeFontSize -= 5;
|
||||
var doc = document.getElementById('articleContent').contentDocument;
|
||||
var docElStyle = doc.documentElement.style;
|
||||
var zoomProp = 'zoom' in docElStyle ? 'zoom' : 'fontSize';
|
||||
var zoomProp = '-ms-zoom' in docElStyle ? 'fontSize' : 'zoom' in docElStyle ? 'zoom' : 'fontSize';
|
||||
docElStyle = zoomProp === 'fontSize' ? doc.body.style : docElStyle;
|
||||
docElStyle[zoomProp] = /-\/static\/main\.css/.test(doc.head.innerHTML) && zoomProp === 'fontSize' ? params.relativeFontSize * 1.5 + "%" : params.relativeFontSize + "%";
|
||||
document.getElementById('lblZoom').innerHTML = params.relativeFontSize + "%";
|
||||
document.getElementById('lblZoom').style = "position:absolute;right: " + window.innerWidth / 4 + "px;bottom:50px;z-index:50;";
|
||||
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 () {
|
||||
document.getElementById('lblZoom').innerHTML = "";
|
||||
}, 1000);
|
||||
lblZoom.innerHTML = "";
|
||||
}, 2000);
|
||||
settingsStore.setItem('relativeFontSize', params.relativeFontSize, Infinity);
|
||||
document.getElementById('articleContent').contentWindow.focus();
|
||||
});
|
||||
@ -1260,7 +1267,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
footerDim = footer.getBoundingClientRect();
|
||||
var doc = iframe.contentDocument ? iframe.contentDocument.documentElement : null;
|
||||
header.style.transition = "transform 500ms";
|
||||
iframe.style.transition = "transform 500ms";
|
||||
// iframe.style.transition = "transform 500ms";
|
||||
if (doc) doc.style.transition = "transform 500ms";
|
||||
footer.style.transition = "transform 500ms";
|
||||
iframe.style.zIndex = 0;
|
||||
@ -3138,9 +3145,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
zimType = /-\/static\/main\.css/i.test(doc.head.innerHTML) ? "desktop-stx" : zimType; //Support stackexchange
|
||||
zimType = /minerva|mobile[^"']*\.css/i.test(doc.head.innerHTML) ? "mobile" : zimType;
|
||||
var docElStyle = articleDocument.style;
|
||||
var zoomProp = 'zoom' in docElStyle ? 'zoom' : 'fontSize';
|
||||
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 + "%";
|
||||
if (appstate.target === 'iframe') uiUtil.initTouchZoom(articleDocument, docBody);
|
||||
checkToolbar();
|
||||
//Set page width according to user preference
|
||||
removePageMaxWidth();
|
||||
@ -3796,13 +3804,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
}
|
||||
//Set relative font size + Stackexchange-family multiplier
|
||||
var docElStyle = articleDocument.style;
|
||||
var zoomProp = 'zoom' in docElStyle ? 'zoom' : 'fontSize';
|
||||
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 + "%";
|
||||
//Set page width according to user preference
|
||||
removePageMaxWidth();
|
||||
setupHeadings();
|
||||
listenForNavigationKeys();
|
||||
if (appstate.target === 'iframe') uiUtil.initTouchZoom(articleDocument, docBody);
|
||||
// Process endnote references (so they open the reference block if closed)
|
||||
var refs = docBody.getElementsByClassName("mw-reflink-text");
|
||||
if (refs) {
|
||||
@ -4230,7 +4239,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
|
||||
var event = e;
|
||||
// The link will be clicked if the user long-presses for more than 800ms (if the option is enabled)
|
||||
setTimeout(function () {
|
||||
if (!a.touched || a.newcontainer) return;
|
||||
// DEV: appstate.startVector indicates that the app is processing a touch zoom event, so we cancel any new windows
|
||||
// see uiUtil.pointermove_handler
|
||||
if (!a.touched || a.newcontainer || appstate.startVector) return;
|
||||
e.preventDefault();
|
||||
a.newcontainer = true;
|
||||
onDetectedClick(event);
|
||||
|
||||
1414
www/js/lib/uiUtil.js
1414
www/js/lib/uiUtil.js
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user