Changed how resolving notes is rendered

Vue2 was taking the template out & then appending again. This changes that
This commit is contained in:
Phil Hughes 2016-11-08 16:54:18 +00:00 committed by Fatih Acet
parent 674e9351e1
commit c8133c53b2
4 changed files with 39 additions and 35 deletions

View file

@ -8,25 +8,31 @@
//= require_directory ./components //= require_directory ./components
$(() => { $(() => {
window.DiffNotesApp = new Vue({ window.gl = window.gl || {};
el: '#diff-notes-app', window.gl.diffNoteApps = {};
methods: {
compileComponents: function () { gl.diffNotesCompileComponents = () => {
const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn'); const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn');
if ($components.length) { if ($components) {
$components.each(function () { $components.each(function () {
const $this = $(this); const $this = $(this);
const noteId = $this.attr(':note-id');
const tmp = Vue.extend({ const tmp = Vue.extend({
template: $this.get(0).outerHTML, template: $this.get(0).outerHTML
parent: DiffNotesApp,
}); });
$this.replaceWith(new tmp().$mount().$el); const tmpApp = new tmp().$mount();
if (noteId) {
gl.diffNoteApps[`note_${noteId}`] = tmpApp;
}
$this.replaceWith(tmpApp.$el);
}); });
} }
} };
}
}); gl.diffNotesCompileComponents();
new Vue({ new Vue({
el: '#resolve-count-app', el: '#resolve-count-app',

View file

@ -227,8 +227,8 @@
return function(data) { return function(data) {
$('#diffs').html(data.html); $('#diffs').html(data.html);
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
gl.utils.localTimeAgo($('.js-timeago', 'div#diffs')); gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));

View file

@ -325,8 +325,8 @@
discussionContainer.append(note_html); discussionContainer.append(note_html);
} }
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
gl.utils.localTimeAgo($('.js-timeago', note_html), false); gl.utils.localTimeAgo($('.js-timeago', note_html), false);
@ -466,8 +466,8 @@
$note_li.replaceWith($html); $note_li.replaceWith($html);
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
}; };
@ -559,11 +559,9 @@
note = $(el); note = $(el);
notes = note.closest(".notes"); notes = note.closest(".notes");
if (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null) { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
ref = DiffNotesApp.$refs[noteId]; if (gl.diffNoteApps[noteId]) {
gl.diffNoteApps[noteId].$destroy();
if (ref) {
ref.$destroy(true);
} }
} }
@ -643,12 +641,12 @@
form.find('.js-note-target-close').remove(); form.find('.js-note-target-close').remove();
this.setupNoteForm(form); this.setupNoteForm(form);
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
var $commentBtn = form.find('comment-and-resolve-btn'); var $commentBtn = form.find('comment-and-resolve-btn');
$commentBtn $commentBtn
.attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'"); .attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'");
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
form.find(".js-note-text").focus(); form.find(".js-note-text").focus();

View file

@ -45,15 +45,15 @@
this.content.hide(); this.content.hide();
this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down'); this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down');
this.collapsedContent.show(); this.collapsedContent.show();
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
} else if (this.content) { } else if (this.content) {
this.collapsedContent.hide(); this.collapsedContent.hide();
this.content.show(); this.content.show();
this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right'); this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
} else { } else {
this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right'); this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
@ -76,8 +76,8 @@
} }
_this.collapsedContent.after(_this.content); _this.collapsedContent.after(_this.content);
if (typeof DiffNotesApp !== 'undefined') { if (typeof gl.diffNotesCompileComponents !== 'undefined') {
DiffNotesApp.compileComponents(); gl.diffNotesCompileComponents();
} }
if (cb) cb(); if (cb) cb();