79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import Visibility from 'visibilityjs';
|
|
import Poll from './../lib/utils/poll';
|
|
import Service from './services/index';
|
|
|
|
export default {
|
|
props: {
|
|
initialTitle: { required: true, type: String },
|
|
endpoint: { required: true, type: String },
|
|
},
|
|
data() {
|
|
const resource = new Service(this.$http, this.endpoint);
|
|
|
|
const poll = new Poll({
|
|
resource,
|
|
method: 'getTitle',
|
|
successCallback: (res) => {
|
|
this.renderResponse(res);
|
|
},
|
|
errorCallback: (err) => {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
// eslint-disable-next-line no-console
|
|
console.error('ISSUE SHOW TITLE REALTIME ERROR', err);
|
|
} else {
|
|
throw new Error(err);
|
|
}
|
|
},
|
|
});
|
|
|
|
return {
|
|
poll,
|
|
timeoutId: null,
|
|
title: this.initialTitle,
|
|
};
|
|
},
|
|
methods: {
|
|
fetch() {
|
|
this.poll.makeRequest();
|
|
|
|
Visibility.change(() => {
|
|
if (!Visibility.hidden()) {
|
|
this.poll.restart();
|
|
} else {
|
|
this.poll.stop();
|
|
}
|
|
});
|
|
},
|
|
renderResponse(res) {
|
|
const body = JSON.parse(res.body);
|
|
this.triggerAnimation(body);
|
|
},
|
|
triggerAnimation(body) {
|
|
const { title } = body;
|
|
|
|
/**
|
|
* since opacity is changed, even if there is no diff for Vue to update
|
|
* we must check the title even on a 304 to ensure no visual change
|
|
*/
|
|
if (this.title === title) return;
|
|
|
|
this.$el.style.opacity = 0;
|
|
|
|
this.timeoutId = setTimeout(() => {
|
|
this.title = title;
|
|
|
|
this.$el.style.transition = 'opacity 0.2s ease';
|
|
this.$el.style.opacity = 1;
|
|
|
|
clearTimeout(this.timeoutId);
|
|
}, 100);
|
|
},
|
|
},
|
|
created() {
|
|
this.fetch();
|
|
},
|
|
template: `
|
|
<h2 class='title' v-html='title'></h2>
|
|
`,
|
|
};
|