smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show suggestions using autoComplete.js 

This change only shows suggestions. Clicking them does nothing.
This commit is contained in:
Matthieu Gautier 2021-11-17 15:24:03 +01:00 committed by Nikhil Tanwar
parent 1e247d75bb
commit f0f473b829
4 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/skin/taskbar.css
View File

@ -9,6 +9,7 @@
transition: 0.3s;
width: 100%;
box-sizing: border-box;
background: #bbb;
}
#kiwixtoolbar>a {
@ -100,7 +101,6 @@ label[for="kiwix_button_show_toggle"],
}
.kiwix #kiwixtoolbar #kiwixsearchform input[type='text'] {
position: absolute;
left: 0;
box-sizing: border-box !important;
width: 100%;

87
static/skin/taskbar.js
View File

@ -3,46 +3,51 @@ function htmlDecode(input) {
return doc.documentElement.textContent;
}
const jq = jQuery.noConflict(true);
jq(document).ready(() => {
(function ($) {
const root = $( `link[type='root']` ).attr("href");
document.addEventListener('DOMContentLoaded', function () {
const root = document.querySelector(`link[type='root']`).getAttribute("href");
const bookName = (window.location.pathname == `${root}/search`)
? (new URLSearchParams(window.location.search)).get('content')
: window.location.pathname.split(`${root}/`)[1].split('/')[0];
const bookName = (window.location.pathname == `${root}/search`)
? (new URLSearchParams(window.location.search)).get('content')
: window.location.pathname.split(`${root}/`)[1].split('/')[0];
const userlang = (new URLSearchParams(window.location.search)).get('userlang') || "en";
$( "#kiwixsearchbox" ).autocomplete({
source: `${root}/suggest?content=${bookName}&userlang=${userlang}`,
dataType: "json",
cache: false,
response: function( event, ui ) {
for(const item of ui.content) {
item.label = htmlDecode(item.label);
item.value = htmlDecode(item.value);
if (item.path) item.path = htmlDecode(item.path);
}
},
select: function(event, ui) {
if (ui.item.kind === 'path') {
window.location.href = `${root}/${bookName}/${encodeURI(ui.item.path)}`;
} else {
$( "#kiwixsearchbox" ).val(ui.item.value);
$( "#kiwixsearchform" ).submit();
}
},
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "ui-autocomplete-item", item )
.append( item.label )
.appendTo( ul );
};
/* cybook hack */
const autoCompleteJS = new autoComplete(
{
selector: "#kiwixsearchbox",
placeHolder: document.querySelector("#kiwixsearchbox").title,
threshold: 1,
debounce: 300,
data : {
src: async (query) => {
try {
// Fetch Data from external Source
const source = await fetch(`${root}/suggest?content=${encodeURIComponent(bookName)}&term=${encodeURIComponent(query)}`);
const data = await source.json();
return data;
} catch (error) {
return error;
}
},
keys: ['label'],
},
searchEngine: (query, record) => {
// We accept all records
return true;
},
resultsList: {
noResults: true,
/* We must display 10 results (requested) + 1 potential link to do a full text search. */
maxResults: 11,
highlight: true
},
resultItem: {
element: (item, data) => {
item.innerHTML = `${htmlDecode(data.value.label)}`;
}
}
}
);
/*
// cybook hack
if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
$("html").addClass("cybook");
}
@ -93,5 +98,5 @@ jq(document).ready(() => {
$('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').removeClass('searching');
}
});
})(jq);
})
};*/
});

2
static/templates/taskbar_part.html
View File

@ -5,7 +5,7 @@
<form class="kiwixsearch" method="GET" action="{{root}}/search" id="kiwixsearchform">
{{#hascontent}}<input type="hidden" name="content" value="{{content}}" />{{/hascontent}}
<label for="kiwixsearchbox">&#x1f50d;</label>
<input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" title="{{{SEARCHBOX_TOOLTIP}}}" aria-label="{{{SEARCHBOX_TOOLTIP}}}">
<input autocomplete="off" id="kiwixsearchbox" name="pattern" type="text" size="50" title="{{{SEARCHBOX_TOOLTIP}}}" aria-label="{{{SEARCHBOX_TOOLTIP}}}">
</form>
</div>
<input type="checkbox" id="kiwix_button_show_toggle">

19
test/server.cpp
View File

@ -195,11 +195,11 @@ R"EXPECTEDRESULT( <img src="../skin/download.png?
/* url */ "/ROOT/zimfile/A/index",
R"EXPECTEDRESULT(<link type="root" href="/ROOT"><link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=49365e9c" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
<script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
<script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=5982280c" defer></script>
<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
<script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
<label for="kiwix_button_show_toggle"><img src="/ROOT/skin/caret.png?cacheid=22b942b4" alt=""></label>
)EXPECTEDRESULT"
@ -211,11 +211,11 @@ R"EXPECTEDRESULT(<link type="root" href="/ROOT"><link type="text/css" href="/ROO
R"EXPECTEDRESULT( <link type="text/css" href="/ROOT/skin/search_results.css?cacheid=76d39c84" rel="Stylesheet" />
<link type="root" href="/ROOT"><link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=49365e9c" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
<script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
<script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=5982280c" defer></script>
<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
<script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
<label for="kiwix_button_show_toggle"><img src="/ROOT/skin/caret.png?cacheid=22b942b4" alt=""></label>
)EXPECTEDRESULT"
@ -445,11 +445,11 @@ std::string TestContentIn404HtmlResponse::expectedResponse() const
R"FRAG(
<link type="root" href="/ROOT"><link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=49365e9c" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" rel="Stylesheet" />
<link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
<script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
<script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=5982280c" defer></script>
<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
<script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
</head>
<body><span class="kiwix">
@ -533,10 +533,9 @@ std::string TestContentIn404HtmlResponse::hiddenBookNameInput() const
std::string TestContentIn404HtmlResponse::searchPatternInput() const
{
const std::string searchboxTooltip = isTranslatedVersion()
? "Որոնել '" + bookTitle + "'֊ում"
: "Search '" + bookTitle + "'";
return R"( <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" title=")"
? "Որոնել '" + bookTitle + "'֊ում"
: "Search '" + bookTitle + "'";
return R"( <input autocomplete="off" id="kiwixsearchbox" name="pattern" type="text" size="50" title=")"
+ searchboxTooltip
+ R"(" aria-label=")"
+ searchboxTooltip