From 2df056e4d407fa94a33e154354bdccfdcee43204 Mon Sep 17 00:00:00 2001 From: Aleksandr Statciuk Date: Fri, 4 Feb 2022 01:55:37 +0300 Subject: [PATCH] Added scroll to top button --- app.js | 77 +++++++++++++++++++++++++++++++++--------------------- index.html | 46 ++++++++++++++++++++++++++++++-- 2 files changed, 91 insertions(+), 32 deletions(-) diff --git a/app.js b/app.js index 37d507aca..5d323c975 100644 --- a/app.js +++ b/app.js @@ -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 } } diff --git a/index.html b/index.html index a309c9327..72fb6d996 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,10 @@ +
@@ -58,7 +62,9 @@
-

Found {{ filtered.length.toLocaleString() }} channels

+

+ Found {{ filtered.length.toLocaleString() }} channels +

@@ -67,11 +73,47 @@
Loading...
- + + +