RanchiMall/flotorrent
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature update

Browse Source 
Added pagination to search results
This commit is contained in:
sairaj mote 2021-06-26 18:41:15 +05:30
parent 6ba515ba3a
commit 7412e02e4d
5 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components.js
View File

@ -1712,17 +1712,6 @@ customElements.define('strip-select', class extends HTMLElement{
get value() {
return this._value
}
fireEvent = () => {
this.dispatchEvent(
new CustomEvent("change", {
bubbles: true,
composed: true,
detail: {
value: this.value
}
})
)
}
scrollLeft = () => {
this.stripSelect.scrollBy({
left: -this.scrollDistance,
@ -1766,7 +1755,6 @@ customElements.define('strip-select', class extends HTMLElement{
slot.assignedElements().forEach(elem => elem.removeAttribute('active'))
e.target.setAttribute('active', '')
e.target.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"})
this.fireEvent()
}
})
const firstOptionObserver = new IntersectionObserver(entries => {

3
css/main.css
View File

@ -666,7 +666,8 @@ sm-option {
font-size: 0.9rem;
}
#page_selector strip-option {
#page_selector strip-option,
#search_page_selector strip-option {
--border-radius: 0.3rem;
--active-option-color: white;
--active-option-backgroud-color: var(--accent-color);

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
css/main.scss
View File

@ -592,7 +592,8 @@ sm-option{
font-size: 0.9rem;
}
#page_selector{
#page_selector,
#search_page_selector{
strip-option{
--border-radius: 0.3rem;
--active-option-color: white;

84
index.html
View File

@ -159,6 +159,7 @@
</section>
<div id="result_for"></div>
<section id="search_result" class="torrent-container"></section>
<strip-select id="search_page_selector"></strip-select>
</section>
<section id="browse" class="hide-completely page page-layout">
<section class="flex direction-column">
@ -940,23 +941,13 @@
searchKey = getRef('advance_torrent_search').value.trim() !== '' ? getRef('advance_torrent_search').value.trim() : lastQuery
}
advancedSearch['query'] = searchKey
const torrents = await getDataFromIDB()
const options = {
keys: ['name', 'filename', 'tags'],
threshold: 0.3
}
let result
if (advancedSearch.isActive) {
options.keys = ['type']
let fuseSearch = new Fuse(torrents, options)
result = fuseSearch.search(`'${advancedSearch.category}`).map(elem => elem.item)
options.keys = ['name', 'filename', 'tags']
fuseSearch = new Fuse(result, options)
result = fuseSearch.search(searchKey).map(elem => elem.item)
result = await getFilteredTorrents(['type'], advancedSearch.category)
result = await getFilteredTorrents(['name', 'filename', 'tags'], searchKey, {torrents: result})
}
else {
const fuseSearch = new Fuse(torrents, options)
result = fuseSearch.search(searchKey).map(elem => elem.item)
result = getFilteredTorrents(['name', 'filename', 'tags'], searchKey)
}
if (result.length) {
getRef('result_for').innerHTML = `Showing results for <strong>${searchKey}</strong>`
@ -964,8 +955,19 @@
else {
getRef('result_for').innerHTML = `No results for <strong>${searchKey}</strong>`
}
console.log(result.length, result.length/20)
getRef('search_result').innerHTML = ``
getRef('search_result').append(renderTorrents(result))
getRef('search_page_selector').innerHTML = ``
if(result.length > 20){
const pages = Math.round(result.length / 20)
getRef('search_page_selector').append(createPageButtons(pages))
getRef('search_result').append(renderTorrents(result.slice(0, 20)))
}
else{
getRef('search_result').append(renderTorrents(result))
}
lastQuery = searchKey
lastCategory = advancedSearch.category
@ -1029,16 +1031,35 @@
return arr.sort((a, b) => b[prop].localeCompare(a[prop]))
}
async function getFilteredTorrents(keys, searchKey, limit = undefined){
const torrents = await getDataFromIDB()
const options = {
async function getFilteredTorrents(keys, searchKey, options = {}){
console.log(options)
let {limit, torrents} = options
if(!torrents){
torrents = await getDataFromIDB()
}
const config = {
keys,
threshold: 0.2,
}
const fuseSearch = new Fuse(torrents, options)
const fuseSearch = new Fuse(torrents, config)
return fuseSearch.search(searchKey, {limit}).map(elem => elem.item)
}
function createPageButtons(pages){
const paginationFrag = document.createDocumentFragment()
for (let i = 0; i < pages; i++) {
const pageButton = create('strip-option', {
textContent: (i + 1)
})
pageButton.setAttribute('value', i)
if (i === 0) {
pageButton.setAttribute('selected', '')
}
paginationFrag.append(pageButton)
}
return paginationFrag
}
async function showCategoryTorrents(category) {
const result = await getFilteredTorrents(['type'], category)
getRef('browser_category_torrents').innerHTML = ``
@ -1047,19 +1068,8 @@
if (result.length) {
getRef('browser_category_torrents').append(renderTorrents(result.slice(0, 20)))
const paginationFrag = document.createDocumentFragment()
const pages = Math.round(result.length / 20)
for (let i = 0; i < pages; i++) {
const pageButton = create('strip-option', {
textContent: (i + 1)
})
pageButton.setAttribute('value', i)
if (i === 0) {
pageButton.setAttribute('selected', '')
}
paginationFrag.append(pageButton)
}
getRef('page_selector').append(paginationFrag)
getRef('page_selector').append(createPageButtons(pages))
}
else {
getRef('browser_category_torrents').innerHTML = `<h4 class="justify-center text-center">No ${category} torrents 😔</h4>`
@ -1067,7 +1077,7 @@
}
async function renderSearchSuggestions(searchKey, advance = false) {
const result = await getFilteredTorrents(['name', 'filename'], searchKey, limit = 6)
const result = await getFilteredTorrents(['name', 'filename'], searchKey, {limit: 6})
if(advance){
getRef('advance_search_suggestions').innerHTML = ``
}
@ -1220,6 +1230,18 @@
getRef('browser_category_torrents').append(renderTorrents(result.slice(startIndex, endIndex)))
}, 200);
})
getRef('search_page_selector').addEventListener('change', async e => {
const result = await getFilteredTorrents(['name', 'filename', 'tags'], lastQuery)
console.log(result.length , result.length/20)
const startIndex = parseInt(e.detail.value) * 20
const endIndex = ((parseInt(e.detail.value) * 20) + 30) < result.length ? (parseInt(e.detail.value) * 20) + 20 : result.length
setTimeout(() => {
getRef('search_result').scrollIntoView({ behavior: 'smooth', block: 'start' })
getRef('search_result').innerHTML = ``
getRef('search_result').append(renderTorrents(result.slice(startIndex, endIndex)))
}, 200);
})
</script>
</body>