mirror of
https://github.com/tachiyomiorg/website.git
synced 2025-01-08 00:00:45 +01:00
bb315726ab
* Update GA event names * Make DownloadButtons.vue modular * Attempting custom dimension and metrics * Change forks dimension to static * Fix wrong tag for Metrics * Add secondary dimension instead of metric * Send both dimensions in one call * Please let this be the fix * The actual fix Apparently custom dimensions didn't work for the intended use here. * Switch label to tag
114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
<template>
|
|
<div class="downloadContainer">
|
|
<button class="downloadForkButton" @click="downloadFork">
|
|
{{ downloadLabel }}
|
|
</button>
|
|
<button class="githubForkButton" :onclick="githubLink">
|
|
{{ githubLabel }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
props: {
|
|
forkName: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
downloadLabel: {
|
|
type: String,
|
|
default: "Download"
|
|
},
|
|
downloadLink: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
githubLabel: {
|
|
type: String,
|
|
default: "GitHub"
|
|
},
|
|
githubLink: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tagName: "",
|
|
browserDownloadUrl: ""
|
|
};
|
|
},
|
|
|
|
async mounted() {
|
|
const { data } = await axios.get(this.$props.downloadLink);
|
|
// Maybe eventually some release has more than the apk in assets.
|
|
const apkAsset = data.assets.find(a => a.name.includes(".apk"));
|
|
// Set the values.
|
|
this.$data.tagName = data.tag_name;
|
|
this.$data.browserDownloadUrl = apkAsset.browser_download_url;
|
|
},
|
|
|
|
methods: {
|
|
downloadFork() {
|
|
this.$swal({
|
|
title: "Downloading",
|
|
text: this.$props.forkName + " is being downloaded.",
|
|
icon: "success",
|
|
focusConfirm: false,
|
|
focusCancel: false,
|
|
timer: 5000,
|
|
timerProgressBar: true,
|
|
customClass: {
|
|
confirmButton: "download-confirm-button",
|
|
container: "download-container"
|
|
},
|
|
showClass: {
|
|
popup: "animated pulse faster"
|
|
},
|
|
hideClass: {
|
|
popup: "animated zoomOut faster"
|
|
}
|
|
});
|
|
window.location.assign(
|
|
this.$data.browserDownloadUrl || this.$props.downloadLink
|
|
);
|
|
window.ga("send", "event", "Action", "Download", this.$props.forkName);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.downloadContainer
|
|
user-select none
|
|
text-align center
|
|
margin 0.3125rem
|
|
.downloadForkButton
|
|
.githubForkButton
|
|
border-radius $buttonBorderRadius
|
|
border-style none
|
|
color white
|
|
font-family $buttonFontFamily
|
|
font-size 1.125em
|
|
height 3rem
|
|
margin 0.3125rem
|
|
padding 0.625 2em
|
|
width 8.5rem
|
|
&:focus
|
|
outline none
|
|
outline-style solid
|
|
&:hover
|
|
cursor pointer
|
|
text-decoration none !important
|
|
background-image linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))
|
|
.downloadForkButton
|
|
background-color $accentColor
|
|
.githubForkButton
|
|
background-color #181818
|
|
&:hover
|
|
background-color lighten(#181818, 15)
|
|
</style>
|