iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-11 17:40:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added scroll to top button

Browse source
This commit is contained in:
Aleksandr Statciuk 2022-02-04 01:55:37 +03:00
parent 2f718a144d
commit 2df056e4d4
2 changed files with 91 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

77
app.js
View file

@ -87,6 +87,9 @@ const CountryItem = {
}
const App = {
compilerOptions: {
isCustomElement: tag => tag.startsWith('ion-')
},
components: {
CountryItem
},
@ -97,7 +100,8 @@ const App = {
normQuery: '',
regQuery: null,
countries: [],
channels: []
channels: [],
scrollTop: 0
}
},
computed: {
@ -121,38 +125,51 @@ const App = {
search() {
this.normQuery = this.query.replace(/\s/g, '').toLowerCase()
this.regQuery = new RegExp(this.query)
},
scrollToTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
},
onScroll(e) {
this.scrollTop = window.top.scrollY
},
async loadChannels() {
let guides = await fetch('https://iptv-org.github.io/api/guides.json')
.then(response => response.json())
.catch(console.log)
guides = guides.length ? guides : []
guides = _.groupBy(guides, 'channel')
this.channels = await fetch('https://iptv-org.github.io/api/channels.json')
.then(response => response.json())
.then(arr =>
arr.map(c => {
c.key = `${c.id}_${c.name}`.replace(/\s/g, '').toLowerCase()
c.guides = guides[c.id] || []
return c
})
)
.catch(err => {
console.log(err)
return []
})
const countries = await fetch('https://iptv-org.github.io/api/countries.json')
.then(response => response.json())
.catch(console.log)
this.countries = countries.map(i => {
i.expanded = false
return i
})
}
},
beforeDestroy() {
window.removeEventListener('scroll', this.onScroll)
},
async mounted() {
let guides = await fetch('https://iptv-org.github.io/api/guides.json')
.then(response => response.json())
.catch(console.log)
guides = guides.length ? guides : []
guides = _.groupBy(guides, 'channel')
this.channels = await fetch('https://iptv-org.github.io/api/channels.json')
.then(response => response.json())
.then(arr =>
arr.map(c => {
c.key = `${c.id}_${c.name}`.replace(/\s/g, '').toLowerCase()
c.guides = guides[c.id] || []
return c
})
)
.catch(err => {
console.log(err)
return []
})
const countries = await fetch('https://iptv-org.github.io/api/countries.json')
.then(response => response.json())
.catch(console.log)
this.countries = countries.map(i => {
i.expanded = false
return i
})
window.addEventListener('scroll', this.onScroll)
await this.loadChannels()
this.isLoading = false
}
}

46
index.html
View file

@ -7,6 +7,10 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
</head>
<body style="background-color: #f6f8fa; min-height: 100vh">
<div id="app">
@ -58,7 +62,9 @@
</button>
</div>
</div>
<p v-if="!isLoading" class="help">Found {{ filtered.length.toLocaleString() }} channels</p>
<p v-if="!isLoading" class="help">
Found {{ filtered.length.toLocaleString() }} channels
</p>
</div>
</div>
</form>
@ -67,11 +73,47 @@
<div class="level-item">Loading...</div>
</div>
<country-item v-for="country in countries" :country="country" :channels="grouped[country.code]" :norm-query="normQuery" :reg-query="regQuery"></country-item>
<country-item
v-for="country in countries"
:country="country"
:channels="grouped[country.code]"
:norm-query="normQuery"
:reg-query="regQuery"
></country-item>
</div>
</div>
</div>
</div>
<footer
class="footer"
style="
background-color: transparent;
position: fixed;
bottom: 0;
width: 100%;
padding: 3rem 1.5rem;
pointer-events: none;
"
>
<div class="content">
<div class="level">
<div class="level-left"></div>
<div class="level-right">
<button
v-show="scrollTop > 100"
class="button level-item is-hidden-mobile"
@click="scrollToTop()"
style="pointer-events: auto"
>
<span class="icon is-small">
<ion-icon name="arrow-up-outline"></ion-icon>
</span>
</button>
</div>
</div>
</div>
</footer>
</div>
<script src="app.js"></script>