UI update
added search page
This commit is contained in:
sairaj mote
parent
190b3861d7
commit
a566a8f8c0
@ -1175,7 +1175,10 @@ customElements.define('sm-switch', class extends HTMLElement {
|
||||
dispatch = () => {
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
composed: true,
|
||||
detail: {
|
||||
value: this.isChecked
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
@ -1245,8 +1248,7 @@ smSelect.innerHTML = `
|
||||
--max-height: auto;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: none !important;
|
||||
}
|
||||
.select{
|
||||
position: relative;
|
||||
@ -1311,9 +1313,6 @@ smSelect.innerHTML = `
|
||||
min-width: 100%;
|
||||
max-height: var(--max-height);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
-webkit-transition: opacity 0.3s, top 0.3s;
|
||||
-o-transition: opacity 0.3s, top 0.3s;
|
||||
transition: opacity 0.3s, top 0.3s;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.3rem;
|
||||
z-index: 2;
|
||||
@ -1355,10 +1354,12 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
}
|
||||
|
||||
collapse() {
|
||||
this.optionList.animate(this.slideUp, this.animationOptions)
|
||||
this.optionList.classList.add('hide')
|
||||
this.chevron.classList.remove('rotate')
|
||||
this.open = false
|
||||
this.optionList.animate(this.slideUp, this.animationOptions)
|
||||
.onfinish = () => {
|
||||
this.optionList.classList.add('hide')
|
||||
this.open = false
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
this.availableOptions
|
||||
@ -1369,24 +1370,28 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
previousOption
|
||||
this.open = false;
|
||||
this.slideDown = [{
|
||||
transform: `translateY(-0.5rem)`
|
||||
},
|
||||
{
|
||||
transform: `translateY(0)`
|
||||
}
|
||||
],
|
||||
this.slideUp = [{
|
||||
transform: `translateY(0)`
|
||||
},
|
||||
{
|
||||
transform: `translateY(-0.5rem)`
|
||||
}
|
||||
],
|
||||
this.animationOptions = {
|
||||
duration: 300,
|
||||
fill: "forwards",
|
||||
easing: 'ease'
|
||||
transform: `translateY(-0.5rem)`,
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
transform: `translateY(0)`,
|
||||
opacity: 1
|
||||
}
|
||||
]
|
||||
this.slideUp = [{
|
||||
transform: `translateY(0)`,
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
transform: `translateY(-0.5rem)`,
|
||||
opacity: 0
|
||||
}
|
||||
]
|
||||
this.animationOptions = {
|
||||
duration: 300,
|
||||
fill: "forwards",
|
||||
easing: 'ease'
|
||||
}
|
||||
selection.addEventListener('click', e => {
|
||||
if (!this.open) {
|
||||
this.optionList.classList.remove('hide')
|
||||
@ -1846,7 +1851,6 @@ smStripOption.innerHTML = `
|
||||
.option{
|
||||
padding: 0.4rem 0.8rem;
|
||||
cursor: pointer;
|
||||
overflow-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border-radius: 2rem;
|
||||
|
||||
42
css/main.css
42
css/main.css
@ -25,9 +25,12 @@ body {
|
||||
--green: #00843b;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #2353FF;
|
||||
--green: #13ff5a;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
@ -36,6 +39,10 @@ body[data-theme=dark] {
|
||||
--error-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
@ -108,22 +115,26 @@ button:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:any-link {
|
||||
a:not([href=""]):any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
a:not([href=""]):any-link .icon {
|
||||
margin-right: 0.3rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
@ -358,7 +369,7 @@ ul {
|
||||
#search_section {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
gap: 0.5rem 0;
|
||||
padding: 4rem 0;
|
||||
justify-items: center;
|
||||
}
|
||||
@ -376,16 +387,20 @@ ul {
|
||||
}
|
||||
|
||||
#search_torrent {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-torrent {
|
||||
width: min(28rem, 100%);
|
||||
--border-radius: 2rem;
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
#search_torrent .icon {
|
||||
.search-torrent .icon {
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
#torrent_container {
|
||||
.torrent-container {
|
||||
padding: 1.5rem 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -554,6 +569,11 @@ ul {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#advance_search_section {
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#main_footer {
|
||||
padding: 3rem 0;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
@ -571,10 +591,10 @@ ul {
|
||||
margin: 0;
|
||||
}
|
||||
.torrent-card__title {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.torrent-card__tags, .torrent-card__uploader {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.torrent-card__description {
|
||||
display: none;
|
||||
@ -623,10 +643,6 @@ ul {
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
.multi-form {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -22,9 +22,11 @@ body {
|
||||
--green: #00843b;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
// --accent-color: #2353FF;
|
||||
--accent-color: #2353FF;
|
||||
--green: #13ff5a;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
@ -32,6 +34,9 @@ body[data-theme='dark']{
|
||||
--background-color: #0a0a0a;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
}
|
||||
main{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.full-bleed{
|
||||
grid-column: 1/4;
|
||||
@ -95,22 +100,26 @@ button{
|
||||
button:focus-visible{
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
a:any-link{
|
||||
a:not([href='']):any-link{
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
.icon{
|
||||
margin-right: 0.3rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
}
|
||||
a:any-link:focus-visible{
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
@ -307,7 +316,7 @@ ul{
|
||||
#search_section{
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
gap: 0.5rem 0;
|
||||
padding: 4rem 0;
|
||||
justify-items: center;
|
||||
}
|
||||
@ -322,6 +331,9 @@ ul{
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
#search_torrent{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.search-torrent{
|
||||
width: min(28rem, 100%);
|
||||
--border-radius: 2rem;
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
@ -331,7 +343,7 @@ ul{
|
||||
}
|
||||
}
|
||||
|
||||
#torrent_container{
|
||||
.torrent-container{
|
||||
padding: 1.5rem 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -489,6 +501,10 @@ ul{
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
#advance_search_section{
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#main_footer{
|
||||
padding: 3rem 0;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
@ -503,11 +519,11 @@ ul{
|
||||
margin: 0;
|
||||
}
|
||||
&__title{
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
&__tags,
|
||||
&__uploader{
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
&__description{
|
||||
display: none;
|
||||
@ -550,9 +566,6 @@ ul{
|
||||
.page-layout{
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
.multi-form{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
|
||||
145
index.html
145
index.html
@ -38,7 +38,7 @@
|
||||
<h1 id="torrent_name"></h1>
|
||||
<p id="torrent_description"></p>
|
||||
<h5 id="torrent_uploader"></h5>
|
||||
<button id="torrent_download_button" class="torrent-card__download-button" onclick="downloadTorrent(currentTorrent.filename, currentTorrent.startTx, currentTorrent.chunks)">
|
||||
<button id="torrent_download_button" class="torrent-card__download-button" onclick="downloadTorrent(currentTorrent.filename, currentTorrent.startTx, currentTorrent.chunks, currentTorrent.id)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z"/></svg>
|
||||
Get torrent
|
||||
</button>
|
||||
@ -48,7 +48,7 @@
|
||||
<header id="main_header">
|
||||
<div class="flex align-center">
|
||||
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
||||
<h5 class="header__company-name">RanchiMall</h5>
|
||||
<a href="" class="header__company-name">RanchiMall</a>
|
||||
</div>
|
||||
<label class="theme-switcher" title="Change theme">
|
||||
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
|
||||
@ -57,17 +57,56 @@
|
||||
</label>
|
||||
</header>
|
||||
<main>
|
||||
<section id="search_section" class="page-layout">
|
||||
<svg class="app-icon icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z"/><path d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z"/></svg>
|
||||
<h4 class="app-name">FLO Torrent</h4>
|
||||
<sm-input id="search_torrent" placeholder="Search">
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
|
||||
</sm-input>
|
||||
<section id="homepage" class="page">
|
||||
<section id="search_section" class="page-layout">
|
||||
<svg class="app-icon icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z"/><path d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z"/></svg>
|
||||
<h4 class="app-name">FLO Torrent</h4>
|
||||
<sm-input id="search_torrent" class="search-torrent" placeholder="Search">
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
|
||||
</sm-input>
|
||||
</section>
|
||||
<section class="page-layout">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Recent</h4>
|
||||
<a href="#browse">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
|
||||
Browse torrents
|
||||
</a>
|
||||
</div>
|
||||
<ul id="torrent_container" class="torrent-container"></ul>
|
||||
</section>
|
||||
</section>
|
||||
<section class="page-layout">
|
||||
<h4>Recent</h4>
|
||||
<ul id="torrent_container"></ul>
|
||||
<section id="search" class="page hide-completely page-layout">
|
||||
<section id="advance_search_section" class="grid gap-1">
|
||||
<h1>Search</h1>
|
||||
<sm-input id="advance_torrent_search" class="search-torrent">
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
|
||||
</sm-input>
|
||||
<sm-switch id="advance_search_switch">
|
||||
<h4 slot="left">Advanced search</h4>
|
||||
</sm-switch>
|
||||
<section id="advance_search_panel" class="hide-completely">
|
||||
<div class="grid justify-start gap-0-5">
|
||||
<h5>Category</h5>
|
||||
<sm-select id="">
|
||||
<sm-option value="movie">Movie</sm-option>
|
||||
<sm-option value="tv series">TV series</sm-option>
|
||||
<sm-option value="video">Video</sm-option>
|
||||
<sm-option value="music">Music</sm-option>
|
||||
<sm-option value="software">Software</sm-option>
|
||||
<sm-option value="game">Game</sm-option>
|
||||
<sm-option value="image">Image</sm-option>
|
||||
<sm-option value="audio">Audio</sm-option>
|
||||
<sm-option value="misc">Misc</sm-option>
|
||||
</sm-select>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<div id="result_for"></div>
|
||||
<ul id="search_result" class="torrent-container observe-empty-state"></ul>
|
||||
<!-- <h4 id="search_empty_state" class="empty-state">No torrents found</h4> -->
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<footer id="main_footer" class="page-layout">
|
||||
<p>Powered by FLO blockchain</p>
|
||||
@ -427,7 +466,7 @@
|
||||
className: 'progress-indicator flex align-center',
|
||||
innerHTML: `
|
||||
<svg class="progress-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
|
||||
<span class="progress-percent"></span>
|
||||
<span class="progress-percent">0% done</span>
|
||||
`
|
||||
})
|
||||
getRef(torrentId).append(progressIndicator)
|
||||
@ -435,8 +474,10 @@
|
||||
let filedata = chunks.join("");
|
||||
// console.log(filedata);
|
||||
download(filename, filedata);
|
||||
progressIndicator.remove()
|
||||
getRef(torrentId).querySelector('.torrent-card__download-button').classList.remove('hide-completely')
|
||||
setTimeout(() => {
|
||||
progressIndicator.remove()
|
||||
getRef(torrentId).querySelector('.torrent-card__download-button').classList.remove('hide-completely')
|
||||
}, 300);
|
||||
}).catch(error => {
|
||||
alert(error);
|
||||
console.error(error);
|
||||
@ -744,12 +785,11 @@
|
||||
</script>
|
||||
<script>
|
||||
window.addEventListener('load', e => {
|
||||
showLatestTorrents()
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
|
||||
let currentTorrent
|
||||
getRef('torrent_container').addEventListener('click', async e => {
|
||||
console.log(e.target)
|
||||
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')
|
||||
@ -825,24 +865,81 @@
|
||||
return torrentsFrag
|
||||
}
|
||||
async function showLatestTorrents(){
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
let allTorrents = await getTorrents()
|
||||
allTorrents = allTorrents.reverse().slice(0, 12)
|
||||
allTorrents = allTorrents.reverse().slice(0, 8)
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
getRef('torrent_container').append(renderTorrents(allTorrents))
|
||||
}
|
||||
|
||||
getRef('search_torrent').addEventListener('keyup', async e => {
|
||||
if(e.key === 'Enter'){
|
||||
if(e.target.value.trim() !== '' && e.key === 'Enter'){
|
||||
const searchKey = getRef('search_torrent').value.trim()
|
||||
renderSearchResult(searchKey)
|
||||
}
|
||||
})
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
function getParts(url){
|
||||
let page = '', query = ''
|
||||
if(url){
|
||||
page = url[0] === '#'? url.split('#')[1]: url
|
||||
if(page.includes('?')){
|
||||
let parts = page.split('?')
|
||||
page = parts[0]
|
||||
query = parts[1]
|
||||
}
|
||||
}
|
||||
return [page, query]
|
||||
}
|
||||
|
||||
async function renderSearchResult(searchKey){
|
||||
const query = getParts(window.location.path)[1]
|
||||
console.log(query, searchKey)
|
||||
if(query !== searchKey){
|
||||
getRef('result_for').innerHTML = `Showing results for <b>${searchKey}</b>`
|
||||
const torrents = await getDataFromIDB()
|
||||
const options = {
|
||||
keys: ['name', 'filename'],
|
||||
threshold: 0.3,
|
||||
threshold: 0.3
|
||||
}
|
||||
const fuseSearch = new Fuse(torrents, options)
|
||||
const searchKey = getRef('search_torrent').value
|
||||
const result = fuseSearch.search(searchKey).map(elem => elem.item)
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
getRef('torrent_container').append(renderTorrents(result))
|
||||
getRef('search_result').innerHTML = ``
|
||||
getRef('search_result').append(renderTorrents(result))
|
||||
history.pushState(null, null, `#search?${searchKey}`)
|
||||
showPage('search')
|
||||
}
|
||||
}
|
||||
|
||||
function showPage(target){
|
||||
let [page, query] = getParts(target)
|
||||
switch(page){
|
||||
case 'search':
|
||||
if(query){
|
||||
renderSearchResult(query)
|
||||
}
|
||||
break
|
||||
default:
|
||||
page = 'homepage'
|
||||
showLatestTorrents()
|
||||
}
|
||||
document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
|
||||
getRef(page).classList.remove('hide-completely')
|
||||
}
|
||||
window.addEventListener('hashchange', e => {
|
||||
showPage(window.location.hash)
|
||||
})
|
||||
getRef('advance_search_switch').addEventListener('change', e => {
|
||||
if(e.detail.value){
|
||||
getRef('advance_search_panel').classList.remove('hide-completely')
|
||||
}
|
||||
else{
|
||||
getRef('advance_search_panel').classList.add('hide-completely')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user