kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-09 04:06:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix search results overlay and touch

Browse Source 
Former-commit-id: 5b56f406d037ab73f3a6c4fd1af4a752d7b40937 [formerly 4c6787ce73a19186cb262cd9de356162a288e6c5]
Former-commit-id: d61339c867c36151572bfa6449480462f5f6d2b9
This commit is contained in:
Jaifroid 2020-02-02 16:47:30 +00:00
parent 0915dba2a1
commit eafa40f801
2 changed files with 27 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/css/app.css
View File

@ -89,6 +89,10 @@ div:not(.panel-success, .alert-message) {
margin-bottom: 12px !important; margin-bottom: 12px !important;
} }
#scrollbox {
position: absolute;
}
#articleListWithHeader { #articleListWithHeader {
position: absolute; position: absolute;
top: 0; top: 0;

71
www/js/app.js
View File

@ -61,17 +61,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
iframe.style.height = window.innerHeight + 'px'; iframe.style.height = window.innerHeight + 'px';
//Re-enable top-level scrolling //Re-enable top-level scrolling
header.style.position = "relative"; scrollbox.style.height = window.innerHeight - navbarHeight + 'px';
scrollbox.style.position = "fixed";
scrollbox.style.height = window.innerHeight + "px";
iframe.style.position = "relative";
if (iframe.style.display !== "none") { if (iframe.style.display !== "none" && document.getElementById("prefix") !== document.activeElement) {
scrollbox.style.position = "relative";
scrollbox.style.height = 0; scrollbox.style.height = 0;
//if (params.hideToolbars) {
// scrollbox.style.height = ~~document.getElementById('top').getBoundingClientRect().height + "px"; //Cannot be larger or else on Windows Mobile (at least) and probably other mobile, the top bar gets covered by iframe
//}
} }
var ToCList = document.getElementById('ToCList'); var ToCList = document.getElementById('ToCList');
if (typeof ToCList !== "undefined") { if (typeof ToCList !== "undefined") {
@ -124,10 +117,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
searchDirEntriesFromPrefix($('#prefix').val()); searchDirEntriesFromPrefix($('#prefix').val());
clearFindInArticle(); clearFindInArticle();
//Re-enable top-level scrolling //Re-enable top-level scrolling
document.getElementById('top').style.position = "relative"; document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
document.getElementById('scrollbox').style.position = "fixed";
document.getElementById('scrollbox').style.height = window.innerHeight + "px";
//document.getElementById('search-article').style.overflow = "auto";
if ($('#navbarToggle').is(":visible") && $('#liHomeNav').is(':visible')) { if ($('#navbarToggle').is(":visible") && $('#liHomeNav').is(':visible')) {
$('#navbarToggle').click(); $('#navbarToggle').click();
} }
@ -142,7 +132,6 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
$('#articleListWithHeader').hide(); $('#articleListWithHeader').hide();
document.getElementById('articleContent').style.position = 'fixed';
$('#articleContent').focus(); $('#articleContent').focus();
$("#myModal").modal('hide'); // This is in case the modal box is showing with an index search $("#myModal").modal('hide'); // This is in case the modal box is showing with an index search
keyPressHandled = true; keyPressHandled = true;
@ -207,15 +196,19 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
document.getElementById('prefix').value = ''; document.getElementById('prefix').value = '';
} else if (prefixVal !== '') { } else if (prefixVal !== '') {
$('#articleListWithHeader').show(); $('#articleListWithHeader').show();
document.getElementById('articleContent').style.position = 'static';
} }
document.getElementById('scrollbox').style.zIndex = 2; document.getElementById('scrollbox').style.position = 'absolute';
document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
}); });
// Hide the search resutls if user moves out of prefix field // Hide the search resutls if user moves out of prefix field
$('#prefix').on('blur', function () { document.getElementById('prefix').addEventListener('blur', function () {
$('#articleListWithHeader').hide(); // We need to wait one tick for the activeElement to receive focus
document.getElementById('articleContent').style.position = 'fixed'; setTimeout(function () {
document.getElementById('scrollbox').style.zIndex = -2; if (!(/^articleList/.test(document.activeElement.id) || /^list-group/.test(document.activeElement.className))) {
document.getElementById('scrollbox').style.height = 0;
document.getElementById('articleListWithHeader').style.display = 'none';
}
}, 1);
}); });
//Add keyboard shortcuts //Add keyboard shortcuts
@ -513,9 +506,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
document.getElementById('btnRandomArticle').addEventListener('click', function () { document.getElementById('btnRandomArticle').addEventListener('click', function () {
setTab('btnRandomArticle'); setTab('btnRandomArticle');
//Re-enable top-level scrolling //Re-enable top-level scrolling
document.getElementById('top').style.position = "relative"; document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
document.getElementById('scrollbox').style.position = "fixed";
document.getElementById('scrollbox').style.height = window.innerHeight + "px";
goToRandomArticle(); goToRandomArticle();
}); });
@ -658,10 +649,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
//Re-enable bottom toolbar display //Re-enable bottom toolbar display
document.getElementById('footer').style.display = "block"; document.getElementById('footer').style.display = "block";
//Re-enable top-level scrolling //Re-enable top-level scrolling
// document.getElementById('top').style.position = "relative"; document.getElementById('top').style.position = "relative";
// document.getElementById('scrollbox').style.position = "fixed";
// document.getElementById('scrollbox').style.height = window.innerHeight + "px";
// document.getElementById('articleContent').style.position = "fixed";
//Use the "light" navbar if the content is "light" (otherwise it looks shite....) //Use the "light" navbar if the content is "light" (otherwise it looks shite....)
var determinedTheme = cssUIThemeGetOrSet(params.cssUITheme); var determinedTheme = cssUIThemeGetOrSet(params.cssUITheme);
var determinedWikiTheme = params.cssTheme == 'auto' ? determinedTheme : params.cssTheme == 'inverted' ? 'dark' : params.cssTheme; var determinedWikiTheme = params.cssTheme == 'auto' ? determinedTheme : params.cssTheme == 'inverted' ? 'dark' : params.cssTheme;
@ -710,6 +698,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
$('#formArticleSearch').show(); $('#formArticleSearch').show();
if (!activeBtn || activeBtn == 'btnHome') { if (!activeBtn || activeBtn == 'btnHome') {
// document.getElementById('search-article').scrollTop = 0; // document.getElementById('search-article').scrollTop = 0;
document.getElementById('scrollbox').style.height = 0;
document.getElementById('search-article').style.overflowY = 'hidden'; document.getElementById('search-article').style.overflowY = 'hidden';
setTimeout(function() { setTimeout(function() {
document.getElementById('articleContent').style.display = 'block'; document.getElementById('articleContent').style.display = 'block';
@ -727,7 +716,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
else else
document.getElementById('divInstall1').style.display = 'none'; document.getElementById('divInstall1').style.display = 'none';
} }
resizeIFrame(); setTimeout(resizeIFrame, 100);
} }
function setActiveBtn(activeBtn) { function setActiveBtn(activeBtn) {
@ -773,9 +762,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
$('#myModal').hide(); $('#myModal').hide();
refreshAPIStatus(); refreshAPIStatus();
//Re-enable top-level scrolling //Re-enable top-level scrolling
document.getElementById('top').style.position = "relative"; document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
document.getElementById('scrollbox').style.position = "fixed";
document.getElementById('scrollbox').style.height = document.documentElement.clientHeight + "px";
document.getElementById('search-article').style.overflowY = "auto"; document.getElementById('search-article').style.overflowY = "auto";
if (document.getElementById('openLocalFiles').style.display == "none") { if (document.getElementById('openLocalFiles').style.display == "none") {
document.getElementById('rescanStorage').style.display = "block"; document.getElementById('rescanStorage').style.display = "block";
@ -824,9 +811,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
$('#articleContent').hide(); $('#articleContent').hide();
$('.alert').hide(); $('.alert').hide();
//Re-enable top-level scrolling //Re-enable top-level scrolling
document.getElementById('top').style.position = "relative"; document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
document.getElementById('scrollbox').style.position = "fixed";
document.getElementById('scrollbox').style.height = document.documentElement.clientHeight + "px";
document.getElementById('search-article').style.overflowY = "auto"; document.getElementById('search-article').style.overflowY = "auto";
}); });
// Two event listeners are needed because the archive list doesn't "change" if there is only one element in it // Two event listeners are needed because the archive list doesn't "change" if there is only one element in it
@ -2311,11 +2296,6 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
$('#myModal').modal({ $('#myModal').modal({
backdrop: "static" backdrop: "static"
}); });
//if ($('#prefix').is(":focus")) {
// // This removes the focus from prefix
// document.getElementById('findText').click();
// document.getElementById('findText').click();
//}
}, start); }, start);
} }
} }
@ -2350,16 +2330,13 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
'" class="list-group-item">' + dirEntry.getTitleOrUrl() + '</a>'; '" class="list-group-item">' + dirEntry.getTitleOrUrl() + '</a>';
} }
articleListDiv.innerHTML = articleListDivHtml; articleListDiv.innerHTML = articleListDivHtml;
// Needed so that results show on top of article $('#articleList a').on('click', function (e) {
document.getElementById('articleContent').style.position = 'static';
// We have to use mousedown below instead of click as otherwise the prefix blur event fires first
// and prevents this event from firing; note that touch also triggers mousedown
$('#articleList a').on('mousedown', function (e) {
handleTitleClick(e); handleTitleClick(e);
document.getElementById('scrollbox').style.height = 0;
document.getElementById('articleListWithHeader').style.display = 'none';
return false; return false;
}); });
$('#searchingArticles').hide(); $('#searchingArticles').hide();
//document.getElementById('articleListWithHeader').style.top = document.getElementById('navbar').getBoundingClientRect().height + 'px';
$('#articleListWithHeader').show(); $('#articleListWithHeader').show();
} }
@ -3518,9 +3495,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
//This removes any search highlighting //This removes any search highlighting
clearFindInArticle(); clearFindInArticle();
//Re-enable top-level scrolling //Re-enable top-level scrolling
document.getElementById('top').style.position = "relative"; document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
document.getElementById('scrollbox').style.position = "fixed";
document.getElementById('scrollbox').style.height = window.innerHeight + "px";
document.getElementById('searchingArticles').style.display = 'block'; document.getElementById('searchingArticles').style.display = 'block';
state.selectedArchive.getDirEntryByTitle(title).then(function (dirEntry) { state.selectedArchive.getDirEntryByTitle(title).then(function (dirEntry) {
if (dirEntry === null || dirEntry === undefined) { if (dirEntry === null || dirEntry === undefined) {