gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix active highlight of card

Browse Source
This commit is contained in:
Kevin
2019-09-08 22:46:05 +02:00
parent b936bf1ab3
commit 2832b2fb3d
1 changed files with 11 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
pages/_category.vue
View File

@@ -3,11 +3,11 @@
h1 {{ category.title }} h1 {{ category.title }}
.cards(v-if="areCardsVisible") .cards(v-if="areCardsVisible")
template(v-for='resource in category.resources' ) template(v-for='resource in category.resources' )
Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title') Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
table(v-if="!areCardsVisible") table(v-if="!areCardsVisible")
TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'") TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
template(v-for='resource in category.resources' ) template(v-for='resource in category.resources' )
TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title') TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
</template> </template>
<script> <script>
@@ -20,7 +20,7 @@ export default {
return { return {
categoryRouteTitle: this.$route.params.category, categoryRouteTitle: this.$route.params.category,
index: '', index: '',
activeCard: '' activeCard: '',
}; };
}, },
computed: { computed: {
@@ -28,34 +28,27 @@ export default {
return this.$store.getters['Sidebar/areCardsVisible'] return this.$store.getters['Sidebar/areCardsVisible']
}, },
category() { category() {
const category = this.$store.getters['data/sortByTitle'](this.categoryRouteTitle) return this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)
const clone = JSON.parse(JSON.stringify(category))
const query = this.$route.query.card
for (const resource of clone.resources) {
resource.active = resource.cleanTitle === query ? 'card--active' : ''
}
return category
}, },
}, },
methods: { methods: {
onToggle(index) { setActiveCard(index) {
if (this.activeCard === index) { this.activeCard = index
this.activeCard = null;
} else {
this.activeCard = index;
}
}, },
async createCopyUrl(resource) { async createCopyUrl(resource) {
try { try {
const { path, title } = resource const { path, cleanTitle } = resource
await this.$copyText(`https://webgems.io${path}`) await this.$copyText(`https://webgems.io${path}`)
this.onToggle(title) this.setActiveCard(cleanTitle)
this.$router.push(path) this.$router.push(path)
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
} }
}, },
created() {
this.activeCard = this.$route.query.card || ''
},
components: { Card, TableHead, TableRow } components: { Card, TableHead, TableRow }
}; };
</script> </script>