]>
Commit | Line | Data |
---|---|---|
9baec9ae | 1 | const app = new Vue({ |
09763dbf BW |
2 | el: '#app', |
3 | data: { | |
4 | config: null, | |
9baec9ae BW |
5 | offline: false, |
6 | filter: '', | |
5323df4a BW |
7 | vlayout: true, |
8 | overrideDark: null | |
09763dbf | 9 | }, |
9baec9ae | 10 | created: function () { |
9ca12a40 BW |
11 | let that = this; |
12 | ||
9baec9ae BW |
13 | this.checkOffline(); |
14 | that.getConfig().then(function (config) { | |
09763dbf | 15 | that.config = config; |
9ca12a40 | 16 | }).catch(function () { |
9baec9ae | 17 | that.offline = true; |
09763dbf | 18 | }); |
9baec9ae BW |
19 | |
20 | document.addEventListener('visibilitychange', function () { | |
21 | if (document.visibilityState == "visible") { | |
22 | that.checkOffline(); | |
23 | } | |
24 | }, false); | |
25 | }, | |
5323df4a BW |
26 | computed: { |
27 | isDark: function() { | |
28 | return this.overrideDark !== null | |
29 | ? this.overrideDark | |
30 | : matchMedia("(prefers-color-scheme: dark)").matches; | |
31 | } | |
32 | }, | |
9baec9ae BW |
33 | methods: { |
34 | checkOffline: function () { | |
35 | let that = this; | |
36 | return fetch(window.location.href + "?alive", { | |
37 | method: 'HEAD', | |
38 | cache: 'no-store' | |
39 | }).then(function () { | |
40 | that.offline = false; | |
41 | }).catch(function () { | |
42 | that.offline = true; | |
43 | }); | |
44 | }, | |
45 | getConfig: function (event) { | |
46 | return fetch('config.yml').then(function (response) { | |
47 | if (response.status != 200) { | |
48 | return | |
49 | } | |
50 | return response.text().then(function (body) { | |
51 | return jsyaml.load(body); | |
52 | }); | |
53 | }); | |
54 | }, | |
5323df4a BW |
55 | toggleTheme: function() { |
56 | this.overrideDark = !this.isDark; | |
57 | } | |
09763dbf BW |
58 | } |
59 | }); | |
60 | ||
4877ec98 BW |
61 | Vue.component('service', { |
62 | props: ['item'], | |
63 | template: `<div> | |
64 | <div class="card"> | |
65 | <a :href="item.url"> | |
66 | <div class="card-content"> | |
67 | <div class="media"> | |
68 | <div v-if="item.logo" class="media-left"> | |
69 | <figure class="image is-48x48"> | |
70 | <img :src="item.logo" /> | |
71 | </figure> | |
72 | </div> | |
73 | <div v-if="item.icon" class="media-left"> | |
74 | <figure class="image is-48x48"> | |
75 | <i style="font-size: 35px" :class="item.icon"></i> | |
76 | </figure> | |
77 | </div> | |
78 | <div class="media-content"> | |
79 | <p class="title is-4">{{ item.name }}</p> | |
80 | <p class="subtitle is-6">{{ item.subtitle }}</p> | |
81 | </div> | |
82 | </div> | |
83 | <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong> | |
84 | </div> | |
85 | </a> | |
86 | </div></div>` | |
87 | }); | |
88 | ||
9baec9ae BW |
89 | if ('serviceWorker' in navigator) { |
90 | window.addEventListener('load', function () { | |
91 | navigator.serviceWorker.register('/worker.js'); | |
09763dbf | 92 | }); |
e41196e7 | 93 | } |