diff options
author | Regis <boudinot.regis@yahoo.com> | 2017-05-04 15:07:36 +0300 |
---|---|---|
committer | Regis <boudinot.regis@yahoo.com> | 2017-05-04 15:07:36 +0300 |
commit | 7a37ada12f8c2dc033594fecddf63345f1addf37 (patch) | |
tree | 08f5c03a370430a1c4ebdb3bafb02c1ef139ddca /app | |
parent | 4fd874219318b4ac195264f390c1b04912aff7e1 (diff) |
use refs when possible - style changes - better initial title and description data types
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/issue_show/issue_title_description.vue | 52 |
1 files changed, 34 insertions, 18 deletions
diff --git a/app/assets/javascripts/issue_show/issue_title_description.vue b/app/assets/javascripts/issue_show/issue_title_description.vue index f6c3308388c..8d2ef39040b 100644 --- a/app/assets/javascripts/issue_show/issue_title_description.vue +++ b/app/assets/javascripts/issue_show/issue_title_description.vue @@ -6,8 +6,14 @@ import tasks from './actions/tasks'; export default { props: { - endpoint: { required: true, type: String }, - candescription: { required: true, type: String }, + endpoint: { + required: true, + type: String, + }, + candescription: { + required: true, + type: String, + }, }, data() { const resource = new Service(this.$http, this.endpoint); @@ -32,17 +38,18 @@ export default { poll, apiData: {}, timeoutId: null, - title: '<span></span>', + title: null, titleText: '', - description: '<span></span>', + description: null, descriptionText: '', descriptionChange: false, tasks: '0 of 0', + titleEl: document.querySelector('title'), }; }, methods: { renderResponse(res) { - this.apiData = JSON.parse(res.body); + this.apiData = res.json(); this.triggerAnimation(); }, updateTaskHTML() { @@ -53,7 +60,7 @@ export default { if (!noTitleChange) { this.titleText = this.apiData.title_text; - elementStack.push(this.$el.querySelector('.title')); + elementStack.push(this.$refs['issue-title']); } if (!noDescriptionChange) { @@ -61,21 +68,22 @@ export default { this.descriptionChange = true; this.updateTaskHTML(); this.tasks = this.apiData.task_status; - elementStack.push(this.$el.querySelector('.wiki')); + elementStack.push(this.$refs['issue-content-container-gfm-entry']); } elementStack.forEach((element) => { - element.classList.remove('issue-realtime-trigger-pulse'); - element.classList.add('issue-realtime-pre-pulse'); + if (element) { + element.classList.remove('issue-realtime-trigger-pulse'); + element.classList.add('issue-realtime-pre-pulse'); + } }); return elementStack; }, setTabTitle() { - const currentTabTitle = document.querySelector('title'); - const currentTabTitleScope = currentTabTitle.innerText.split('·'); + const currentTabTitleScope = this.titleEl.innerText.split('·'); currentTabTitleScope[0] = `${this.titleText} (#${this.apiData.issue_number}) `; - currentTabTitle.innerText = currentTabTitleScope.join('·'); + this.titleEl.innerText = currentTabTitleScope.join('·'); }, animate(title, description, elementsToVisualize) { this.timeoutId = setTimeout(() => { @@ -84,11 +92,11 @@ export default { this.setTabTitle(); elementsToVisualize.forEach((element) => { - element.classList.remove('issue-realtime-pre-pulse'); - element.classList.add('issue-realtime-trigger-pulse'); + if (element) { + element.classList.remove('issue-realtime-pre-pulse'); + element.classList.add('issue-realtime-trigger-pulse'); + } }); - - clearTimeout(this.timeoutId); }, 0); }, triggerAnimation() { @@ -163,7 +171,12 @@ export default { <template> <div> - <h2 class="title issue-realtime-trigger-pulse" v-html="title"></h2> + <h2 + class="title issue-realtime-trigger-pulse" + ref="issue-title" + v-html="title" + > + </h2> <div :class="descriptionClass" v-if="description" @@ -174,7 +187,10 @@ export default { ref="issue-content-container-gfm-entry" > </div> - <textarea class="hidden js-task-list-field" v-if="descriptionText">{{descriptionText}}</textarea> + <textarea + class="hidden js-task-list-field" + v-if="descriptionText" + >{{descriptionText}}</textarea> </div> </div> </template> |