1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<template>
<footer>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<h4>chibisafe</h4>
<span>© 2017-{{ getYear }}
<a
href="https://github.com/pitu"
class="no-block">Pitu</a>
</span><br>
<span>{{ version }}</span>
</div>
<div class="column is-narrow bottom-up">
<a href="https://github.com/weebdev/chibisafe">GitHub</a>
<a href="https://patreon.com/pitu">Patreon</a>
<a href="https://discord.gg/5g6vgwn">Discord</a>
</div>
<div class="column is-narrow bottom-up">
<a
v-if="loggedIn"
@click="createShareXThing">ShareX Config</a>
<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
</div>
</div>
</div>
</footer>
</template>
<script>
/* eslint-disable no-restricted-globals */
import { mapState, mapGetters } from 'vuex';
import { saveAs } from 'file-saver';
export default {
computed: {
...mapGetters({
loggedIn: 'auth/isLoggedIn',
apiKey: 'auth/getApiKey'
}),
...mapState({
version: state => state.config.version
}),
getYear() {
return new Date().getFullYear();
}
},
methods: {
createShareXThing() {
const sharexFile = `{
"Name": "${this.$store.state.config.serviceName}",
"DestinationType": "ImageUploader, FileUploader",
"RequestType": "POST",
"RequestURL": "${location.origin}/api/upload",
"FileFormName": "files[]",
"Headers": {
"token": "${this.apiKey}",
"accept": "application/vnd.chibisafe.json"
},
"ResponseType": "Text",
"URL": "$json:url$",
"ThumbnailURL": "$json:thumb$"
}`;
const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
saveAs(sharexBlob, `${location.hostname}.sxcu`);
}
}
};
</script>
<style lang="scss" scoped>
@import '~/assets/styles/_colors.scss';
footer {
pointer-events: none;
touch-action: none;
@media screen and (min-width: 1025px) {
position: fixed;
bottom: 0;
width: 100%;
> div {
padding: 1rem 1rem !important;
max-width: unset !important;
}
}
.container {
.column {
pointer-events: auto;
touch-action: auto;
text-align: center;
@media screen and (min-width: 1025px) {
margin-right: 2rem;
&.bottom-up {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-right: 0;
}
}
a {
display: block;
color: $textColor;
&:hover {
color: white
}
&.no-block {
display: inherit;
}
}
}
}
}
</style>
|