offline: false,
filter: '',
vlayout: true,
- isDark: null
+ isDark: null,
+ showMenu: false
},
- created: function () {
+ created: async function () {
let that = this;
-
- this.isDark = 'overrideDark' in localStorage ?
+
+ this.isDark = 'overrideDark' in localStorage ?
JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
if ('vlayout' in localStorage) {
this.vlayout = JSON.parse(localStorage.vlayout)
}
-
+
this.checkOffline();
- that.getConfig().then(function (config) {
- that.config = config;
- }).catch(function () {
- that.offline = true;
- });
+ try {
+ this.config = await this.getConfig();
+ document.title = this.config.title + ' | Homer';
+ } catch (error) {
+ this.offline = true;
+ }
+
+ // Look for a new message if an endpoint is provided.
+ if (this.config.message && this.config.message.url) {
+ this.getMessage(this.config.message.url).then(function(message){
+ // keep the original config value if no value is provided by the endpoint
+ for (const prop of ['title','style','content']) {
+ if (prop in message && message[prop] !== null) {
+ that.config.message[prop] = message[prop];
+ }
+ }
+ });
+ }
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == "visible") {
});
});
},
+ getMessage: function (url) {
+ return fetch(url).then(function (response) {
+ if (response.status != 200) {
+ return;
+ }
+ return response.json();
+ });
+ },
toggleTheme: function() {
this.isDark = !this.isDark;
localStorage.overrideDark = this.isDark;
},
toggleLayout: function() {
this.vlayout = !this.vlayout;
- localStorage.vlayout = this.vlayout;
- },
+ localStorage.vlayout = this.vlayout;
+ },
+ toggleMenu: function() {
+ this.showMenu = !this.showMenu;
+ }
+ },
+ mounted() {
+ function isSmallScreen() {
+ return window.matchMedia('screen and (max-width: 1023px)').matches;
+ }
+ this._keyListener = function(e) {
+ if (e.key === '/') {
+ if (isSmallScreen()) {
+ this.showMenu = true;
+ }
+ Vue.nextTick(() => {
+ this.$refs.search.focus();
+ });
+
+ e.preventDefault();
+ }
+ if (e.key === 'Escape') {
+ this.filter = '';
+ this.$refs.search.blur();
+ if (isSmallScreen()) {
+ this.showMenu = false;
+ }
+ }
+ }
+
+ document.addEventListener('keydown', this._keyListener.bind(this));
+ },
+ beforeDestroy() {
+ document.removeEventListener('keydown', this._keyListener);
}
});
props: ['item'],
template: `<div>
<div class="card">
- <a :href="item.url">
+ <a :href="item.url" :target="item.target">
<div class="card-content">
<div class="media">
<div v-if="item.logo" class="media-left">
<p class="subtitle is-6">{{ item.subtitle }}</p>
</div>
</div>
- <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
+ <div class="tag" :class="item.tagstyle" v-if="item.tag">
+ <strong class="tag-text">#{{ item.tag }}</strong>
+ </div>
</div>
</a>
</div></div>`
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
- navigator.serviceWorker.register('/worker.js');
+ navigator.serviceWorker.register('worker.js');
});
}