code refactoring
This commit is contained in:
sairaj mote
parent
0839f1a9c4
commit
b41acb0515
224
index.html
224
index.html
@ -841,26 +841,6 @@
|
||||
|
||||
</script>
|
||||
<script>
|
||||
window.addEventListener('load', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
window.addEventListener('hashchange', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
window.addEventListener('popstate', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
|
||||
let currentTorrent
|
||||
document.addEventListener('click', async e => {
|
||||
if (e.target.closest('.torrent-card__download-button')) {
|
||||
const _target = e.target.closest('.torrent-card__download-button')
|
||||
const card = _target.closest('.torrent-card')
|
||||
const cardId = parseInt(card.id)
|
||||
const { id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks } = await getDataFromIDB(cardId)
|
||||
downloadTorrent(filename, startTx, chunks, cardId)
|
||||
}
|
||||
})
|
||||
const render = {
|
||||
torrentCard(obj) {
|
||||
const { id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks } = obj
|
||||
@ -927,51 +907,6 @@
|
||||
getRef('torrent_container').append(renderTorrents(allTorrents))
|
||||
}
|
||||
|
||||
getRef('search_torrent').addEventListener('keydown', async e => {
|
||||
if (e.target.value.trim() !== '') {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
const searchKey = getRef('search_torrent').value.trim()
|
||||
renderSearchResult(searchKey)
|
||||
pushParams()
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
getRef('search_suggestions').firstElementChild.focus()
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
getRef('search_suggestions').addEventListener('keydown', async e => {
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
if (e.target.previousElementSibling)
|
||||
e.target.previousElementSibling.focus()
|
||||
else
|
||||
getRef('search_torrent').focusIn()
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
if (e.target.nextElementSibling)
|
||||
e.target.nextElementSibling.focus()
|
||||
break;
|
||||
}
|
||||
})
|
||||
getRef('search_torrent').addEventListener('input', async e => {
|
||||
throttle(() => {
|
||||
const searchKey = getRef('search_torrent').value.trim()
|
||||
renderSearchSuggestions(searchKey)
|
||||
}, 100)
|
||||
})
|
||||
getRef('advance_torrent_search').addEventListener('keyup', async e => {
|
||||
if (e.target.value.trim() !== '' && e.key === 'Enter') {
|
||||
const searchKey = getRef('advance_torrent_search').value.trim()
|
||||
renderSearchResult(searchKey)
|
||||
pushParams()
|
||||
}
|
||||
})
|
||||
|
||||
function getSearchParams() {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
const params = Object.fromEntries(urlSearchParams.entries());
|
||||
@ -1081,27 +1016,6 @@
|
||||
document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
|
||||
getRef(page).classList.remove('hide-completely')
|
||||
}
|
||||
getRef('advance_search_switch').addEventListener('change', e => {
|
||||
if (e.detail.value) {
|
||||
advancedSearch = {
|
||||
isActive: true,
|
||||
category: getRef('category_selector').value
|
||||
}
|
||||
getRef('advance_search_panel').classList.remove('hide-completely')
|
||||
}
|
||||
else {
|
||||
advancedSearch.isActive = false
|
||||
advancedSearch.category = ''
|
||||
getRef('advance_search_panel').classList.add('hide-completely')
|
||||
}
|
||||
advancedSearch['query'] = getRef('advance_torrent_search').value.trim()
|
||||
})
|
||||
getRef('category_selector').addEventListener('change', e => {
|
||||
advancedSearch.category = e.detail.value
|
||||
})
|
||||
getRef('browse_category_selector').addEventListener('change', e => {
|
||||
showCategoryTorrents(e.detail.value)
|
||||
})
|
||||
|
||||
function alphaIncSort(arr, prop) {
|
||||
return arr.sort((a, b) => a[prop].localeCompare(b[prop]))
|
||||
@ -1110,15 +1024,18 @@
|
||||
return arr.sort((a, b) => b[prop].localeCompare(a[prop]))
|
||||
}
|
||||
|
||||
async function showCategoryTorrents(category) {
|
||||
async function getFilteredTorrents(keys, searchKey, limit = undefined){
|
||||
const torrents = await getDataFromIDB()
|
||||
const options = {
|
||||
keys: ['type'],
|
||||
keys,
|
||||
threshold: 0.2,
|
||||
}
|
||||
const fuseSearch = new Fuse(torrents, options)
|
||||
const result = fuseSearch.search(category).map(elem => elem.item)
|
||||
return fuseSearch.search(searchKey, {limit}).map(elem => elem.item)
|
||||
}
|
||||
|
||||
async function showCategoryTorrents(category) {
|
||||
const result = await getFilteredTorrents(['type'], category)
|
||||
getRef('browser_category_torrents').innerHTML = ``
|
||||
getRef('page_selector').innerHTML = ''
|
||||
|
||||
@ -1144,34 +1061,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
getRef('page_selector').addEventListener('change', async e => {
|
||||
const torrents = await getDataFromIDB()
|
||||
const options = {
|
||||
keys: ['type'],
|
||||
threshold: 0.2,
|
||||
}
|
||||
const fuseSearch = new Fuse(torrents, options)
|
||||
const category = getRef('browse_category_selector').value
|
||||
const result = fuseSearch.search(category).map(elem => elem.item)
|
||||
|
||||
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('browser_category_torrents').scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
getRef('browser_category_torrents').innerHTML = ``
|
||||
getRef('browser_category_torrents').append(renderTorrents(result.slice(startIndex, endIndex)))
|
||||
}, 200);
|
||||
})
|
||||
|
||||
async function renderSearchSuggestions(searchKey) {
|
||||
const torrents = await getDataFromIDB()
|
||||
const options = {
|
||||
keys: ['name', 'filename'],
|
||||
threshold: 0.2,
|
||||
}
|
||||
const fuseSearch = new Fuse(torrents, options)
|
||||
const result = fuseSearch.search(searchKey, { limit: 6 }).map(elem => elem.item)
|
||||
const result = await getFilteredTorrents(['name', 'filename'], searchKey, limit = 6)
|
||||
|
||||
getRef('search_suggestions').innerHTML = ``
|
||||
if (result.length) {
|
||||
@ -1191,6 +1082,107 @@
|
||||
getRef('search_suggestions').append(suggestionsFrag)
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
|
||||
window.addEventListener('load', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
window.addEventListener('hashchange', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
window.addEventListener('popstate', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
|
||||
let currentTorrent
|
||||
document.addEventListener('click', async e => {
|
||||
if (e.target.closest('.torrent-card__download-button')) {
|
||||
const _target = e.target.closest('.torrent-card__download-button')
|
||||
const card = _target.closest('.torrent-card')
|
||||
const cardId = parseInt(card.id)
|
||||
const { id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks } = await getDataFromIDB(cardId)
|
||||
downloadTorrent(filename, startTx, chunks, cardId)
|
||||
}
|
||||
})
|
||||
getRef('search_torrent').addEventListener('keydown', async e => {
|
||||
if (e.target.value.trim() !== '') {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
const searchKey = getRef('search_torrent').value.trim()
|
||||
renderSearchResult(searchKey)
|
||||
pushParams()
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
getRef('search_suggestions').firstElementChild.focus()
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
getRef('search_suggestions').addEventListener('keydown', async e => {
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
if (e.target.previousElementSibling)
|
||||
e.target.previousElementSibling.focus()
|
||||
else
|
||||
getRef('search_torrent').focusIn()
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
if (e.target.nextElementSibling)
|
||||
e.target.nextElementSibling.focus()
|
||||
break;
|
||||
}
|
||||
})
|
||||
getRef('search_torrent').addEventListener('input', async e => {
|
||||
throttle(() => {
|
||||
const searchKey = getRef('search_torrent').value.trim()
|
||||
renderSearchSuggestions(searchKey)
|
||||
}, 100)
|
||||
})
|
||||
getRef('advance_torrent_search').addEventListener('keyup', async e => {
|
||||
if (e.target.value.trim() !== '' && e.key === 'Enter') {
|
||||
const searchKey = getRef('advance_torrent_search').value.trim()
|
||||
renderSearchResult(searchKey)
|
||||
pushParams()
|
||||
}
|
||||
})
|
||||
getRef('advance_search_switch').addEventListener('change', e => {
|
||||
if (e.detail.value) {
|
||||
advancedSearch = {
|
||||
isActive: true,
|
||||
category: getRef('category_selector').value
|
||||
}
|
||||
getRef('advance_search_panel').classList.remove('hide-completely')
|
||||
}
|
||||
else {
|
||||
advancedSearch.isActive = false
|
||||
advancedSearch.category = ''
|
||||
getRef('advance_search_panel').classList.add('hide-completely')
|
||||
}
|
||||
advancedSearch['query'] = getRef('advance_torrent_search').value.trim()
|
||||
})
|
||||
getRef('category_selector').addEventListener('change', e => {
|
||||
advancedSearch.category = e.detail.value
|
||||
})
|
||||
getRef('browse_category_selector').addEventListener('change', e => {
|
||||
showCategoryTorrents(e.detail.value)
|
||||
})
|
||||
getRef('page_selector').addEventListener('change', async e => {
|
||||
const category = getRef('browse_category_selector').value
|
||||
const result = await getFilteredTorrents(['type'], category)
|
||||
|
||||
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('browser_category_torrents').scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
getRef('browser_category_torrents').innerHTML = ``
|
||||
getRef('browser_category_torrents').append(renderTorrents(result.slice(startIndex, endIndex)))
|
||||
}, 200);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user