diff options
Diffstat (limited to 'app/assets/javascripts/issue_show/issue_title.js')
-rw-r--r-- | app/assets/javascripts/issue_show/issue_title.js | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/app/assets/javascripts/issue_show/issue_title.js b/app/assets/javascripts/issue_show/issue_title.js new file mode 100644 index 00000000000..1184c8956dc --- /dev/null +++ b/app/assets/javascripts/issue_show/issue_title.js @@ -0,0 +1,78 @@ +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> + `, +}; |