mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-24 08:09:13 -05:00
Refactor PostView
This commit is contained in:
parent
f04701e30e
commit
b6f49e5b68
3 changed files with 55 additions and 81 deletions
|
@ -57,7 +57,7 @@
|
||||||
{{#if view.loadingAbove}}
|
{{#if view.loadingAbove}}
|
||||||
<div class='spinner'>{{i18n loading}}</div>
|
<div class='spinner'>{{i18n loading}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{view Discourse.TopicPostsView contentBinding="content.posts" topicViewBinding="view"}}
|
{{collection itemViewClass="Discourse.PostView" contentBinding="content.posts" topicViewBinding="view"}}
|
||||||
|
|
||||||
{{#if view.loadingBelow}}
|
{{#if view.loadingBelow}}
|
||||||
<div class='spinner'>{{i18n loading}}</div>
|
<div class='spinner'>{{i18n loading}}</div>
|
||||||
|
|
|
@ -9,16 +9,18 @@
|
||||||
Discourse.PostView = Discourse.View.extend({
|
Discourse.PostView = Discourse.View.extend({
|
||||||
classNames: ['topic-post', 'clearfix'],
|
classNames: ['topic-post', 'clearfix'],
|
||||||
templateName: 'post',
|
templateName: 'post',
|
||||||
classNameBindings: ['lastPostClass', 'postTypeClass', 'selectedClass', 'post.hidden:hidden', 'isDeleted:deleted', 'parentPost:replies-above'],
|
classNameBindings: ['post.lastPost',
|
||||||
|
'postTypeClass',
|
||||||
|
'post.selected',
|
||||||
|
'post.hidden:hidden',
|
||||||
|
'post.deleted_at:deleted',
|
||||||
|
'parentPost:replies-above'],
|
||||||
|
|
||||||
siteBinding: Ember.Binding.oneWay('Discourse.site'),
|
siteBinding: Ember.Binding.oneWay('Discourse.site'),
|
||||||
composeViewBinding: Ember.Binding.oneWay('Discourse.composeView'),
|
composeViewBinding: Ember.Binding.oneWay('Discourse.composeView'),
|
||||||
quoteButtonViewBinding: Ember.Binding.oneWay('Discourse.quoteButtonView'),
|
quoteButtonViewBinding: Ember.Binding.oneWay('Discourse.quoteButtonView'),
|
||||||
postBinding: 'content',
|
postBinding: 'content',
|
||||||
|
|
||||||
isDeleted: (function() {
|
|
||||||
return !!this.get('post.deleted_at');
|
|
||||||
}).property('post.deleted_at'),
|
|
||||||
|
|
||||||
// TODO really we should do something cleaner here... this makes it work in debug but feels really messy
|
// TODO really we should do something cleaner here... this makes it work in debug but feels really messy
|
||||||
screenTrack: (function() {
|
screenTrack: (function() {
|
||||||
var parentView, screenTrack;
|
var parentView, screenTrack;
|
||||||
|
@ -31,53 +33,36 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
return screenTrack;
|
return screenTrack;
|
||||||
}).property('parentView'),
|
}).property('parentView'),
|
||||||
|
|
||||||
lastPostClass: (function() {
|
|
||||||
if (this.get('post.lastPost')) {
|
|
||||||
return 'last-post';
|
|
||||||
}
|
|
||||||
}).property('post.lastPost'),
|
|
||||||
|
|
||||||
postTypeClass: (function() {
|
postTypeClass: (function() {
|
||||||
if (this.get('post.post_type') === Discourse.get('site.post_types.moderator_action')) {
|
if (this.get('post.post_type') === Discourse.get('site.post_types.moderator_action')) return 'moderator';
|
||||||
return 'moderator';
|
|
||||||
}
|
|
||||||
return 'regular';
|
return 'regular';
|
||||||
}).property('post.post_type'),
|
}).property('post.post_type'),
|
||||||
|
|
||||||
selectedClass: (function() {
|
|
||||||
if (this.get('post.selected')) {
|
|
||||||
return 'selected';
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}).property('post.selected'),
|
|
||||||
|
|
||||||
// If the cooked content changed, add the quote controls
|
// If the cooked content changed, add the quote controls
|
||||||
cookedChanged: (function() {
|
cookedChanged: (function() {
|
||||||
var _this = this;
|
var postView = this;
|
||||||
return Em.run.next(function() {
|
Em.run.next(function() {
|
||||||
return _this.insertQuoteControls();
|
postView.insertQuoteControls();
|
||||||
});
|
});
|
||||||
}).observes('post.cooked'),
|
}).observes('post.cooked'),
|
||||||
|
|
||||||
init: function() {
|
init: function() {
|
||||||
this._super();
|
this._super();
|
||||||
return this.set('context', this.get('content'));
|
this.set('context', this.get('content'));
|
||||||
},
|
},
|
||||||
|
|
||||||
mouseUp: function(e) {
|
mouseUp: function(e) {
|
||||||
var $target, qbc;
|
|
||||||
if (this.get('controller.multiSelect') && (e.metaKey || e.ctrlKey)) {
|
if (this.get('controller.multiSelect') && (e.metaKey || e.ctrlKey)) {
|
||||||
this.toggleProperty('post.selected');
|
this.toggleProperty('post.selected');
|
||||||
}
|
}
|
||||||
|
|
||||||
$target = $(e.target);
|
var $target = $(e.target);
|
||||||
if ($target.closest('.cooked').length === 0) return;
|
if ($target.closest('.cooked').length === 0) return;
|
||||||
qbc = this.get('controller.controllers.quoteButton');
|
var qbc = this.get('controller.controllers.quoteButton');
|
||||||
|
|
||||||
|
|
||||||
if (qbc && Discourse.get('currentUser.enable_quoting')) {
|
if (qbc && Discourse.get('currentUser.enable_quoting')) {
|
||||||
e.context = this.get('post');
|
e.context = this.get('post');
|
||||||
return qbc.selectText(e);
|
qbc.selectText(e);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -96,12 +81,12 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
|
|
||||||
// Click on the replies button
|
// Click on the replies button
|
||||||
showReplies: function() {
|
showReplies: function() {
|
||||||
var _this = this;
|
var postView = this;
|
||||||
if (this.get('repliesShown')) {
|
if (this.get('repliesShown')) {
|
||||||
this.set('repliesShown', false);
|
this.set('repliesShown', false);
|
||||||
} else {
|
} else {
|
||||||
this.get('post').loadReplies().then(function() {
|
this.get('post').loadReplies().then(function() {
|
||||||
return _this.set('repliesShown', true);
|
postView.set('repliesShown', true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
@ -136,11 +121,14 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
updateQuoteElements: function($aside, desc) {
|
updateQuoteElements: function($aside, desc) {
|
||||||
var expandContract, navLink, postNumber, quoteTitle, topic, topicId;
|
var navLink = "";
|
||||||
navLink = "";
|
var quoteTitle = Em.String.i18n("post.follow_quote");
|
||||||
quoteTitle = Em.String.i18n("post.follow_quote");
|
var postNumber;
|
||||||
|
|
||||||
if (postNumber = $aside.data('post')) {
|
if (postNumber = $aside.data('post')) {
|
||||||
|
|
||||||
// If we have a topic reference
|
// If we have a topic reference
|
||||||
|
var topicId, topic;
|
||||||
if (topicId = $aside.data('topic')) {
|
if (topicId = $aside.data('topic')) {
|
||||||
topic = this.get('controller.content');
|
topic = this.get('controller.content');
|
||||||
|
|
||||||
|
@ -151,39 +139,39 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
// Made up slug should be replaced with canonical URL
|
// Made up slug should be replaced with canonical URL
|
||||||
navLink = "<a href='" + Discourse.getURL("/t/via-quote/") + topicId + "/" + postNumber + "' title='" + quoteTitle + "' class='quote-other-topic'></a>";
|
navLink = "<a href='" + Discourse.getURL("/t/via-quote/") + topicId + "/" + postNumber + "' title='" + quoteTitle + "' class='quote-other-topic'></a>";
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (topic = this.get('controller.content')) {
|
} else if (topic = this.get('controller.content')) {
|
||||||
// assume the same topic
|
// assume the same topic
|
||||||
navLink = "<a href='" + (topic.urlForPostNumber(postNumber)) + "' title='" + quoteTitle + "' class='back'></a>";
|
navLink = "<a href='" + (topic.urlForPostNumber(postNumber)) + "' title='" + quoteTitle + "' class='back'></a>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Only add the expand/contract control if it's not a full post
|
// Only add the expand/contract control if it's not a full post
|
||||||
expandContract = "";
|
var expandContract = "";
|
||||||
if (!$aside.data('full')) {
|
if (!$aside.data('full')) {
|
||||||
expandContract = "<i class='icon-" + desc + "' title='expand/collapse'></i>";
|
expandContract = "<i class='icon-" + desc + "' title='expand/collapse'></i>";
|
||||||
$aside.css('cursor', 'pointer');
|
$aside.css('cursor', 'pointer');
|
||||||
}
|
}
|
||||||
return $('.quote-controls', $aside).html("" + expandContract + navLink);
|
$('.quote-controls', $aside).html("" + expandContract + navLink);
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleQuote: function($aside) {
|
toggleQuote: function($aside) {
|
||||||
var $blockQuote, originalText, post, topic_id;
|
|
||||||
$aside.data('expanded',!$aside.data('expanded'));
|
$aside.data('expanded',!$aside.data('expanded'));
|
||||||
if ($aside.data('expanded')) {
|
if ($aside.data('expanded')) {
|
||||||
this.updateQuoteElements($aside, 'chevron-up');
|
this.updateQuoteElements($aside, 'chevron-up');
|
||||||
// Show expanded quote
|
// Show expanded quote
|
||||||
$blockQuote = $('blockquote', $aside);
|
var $blockQuote = $('blockquote', $aside);
|
||||||
$aside.data('original-contents',$blockQuote.html());
|
$aside.data('original-contents',$blockQuote.html());
|
||||||
originalText = $blockQuote.text().trim();
|
|
||||||
|
var originalText = $blockQuote.text().trim();
|
||||||
$blockQuote.html(Em.String.i18n("loading"));
|
$blockQuote.html(Em.String.i18n("loading"));
|
||||||
post = this.get('post');
|
var topic_id = this.get('post.topic_id');
|
||||||
topic_id = post.get('topic_id');
|
|
||||||
if ($aside.data('topic')) {
|
if ($aside.data('topic')) {
|
||||||
topic_id = $aside.data('topic');
|
topic_id = $aside.data('topic');
|
||||||
}
|
}
|
||||||
$.getJSON(Discourse.getURL("/posts/by_number/") + topic_id + "/" + ($aside.data('post')), function(result) {
|
$.getJSON(Discourse.getURL("/posts/by_number/") + topic_id + "/" + ($aside.data('post')), function(result) {
|
||||||
var parsed = $(result.cooked);
|
var parsed = $(result.cooked);
|
||||||
parsed.replaceText(originalText, "<span class='highlighted'>" + originalText + "</span>");
|
parsed.replaceText(originalText, "<span class='highlighted'>" + originalText + "</span>");
|
||||||
return $blockQuote.showHtml(parsed);
|
$blockQuote.showHtml(parsed);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// Hide expanded quote
|
// Hide expanded quote
|
||||||
|
@ -195,14 +183,15 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
|
|
||||||
// Show how many times links have been clicked on
|
// Show how many times links have been clicked on
|
||||||
showLinkCounts: function() {
|
showLinkCounts: function() {
|
||||||
var link_counts,
|
|
||||||
_this = this;
|
var postView = this;
|
||||||
|
var link_counts;
|
||||||
|
|
||||||
if (link_counts = this.get('post.link_counts')) {
|
if (link_counts = this.get('post.link_counts')) {
|
||||||
return link_counts.each(function(lc) {
|
link_counts.each(function(lc) {
|
||||||
if (lc.clicks > 0) {
|
if (lc.clicks > 0) {
|
||||||
return _this.$(".cooked a[href]").each(function() {
|
postView.$(".cooked a[href]").each(function() {
|
||||||
var link;
|
var link = $(this);
|
||||||
link = $(this);
|
|
||||||
if (link.attr('href') === lc.url) {
|
if (link.attr('href') === lc.url) {
|
||||||
return link.append("<span class='badge badge-notification clicks' title='clicks'>" + lc.clicks + "</span>");
|
return link.append("<span class='badge badge-notification clicks' title='clicks'>" + lc.clicks + "</span>");
|
||||||
}
|
}
|
||||||
|
@ -214,40 +203,36 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
|
|
||||||
// Add the quote controls to a post
|
// Add the quote controls to a post
|
||||||
insertQuoteControls: function() {
|
insertQuoteControls: function() {
|
||||||
var _this = this;
|
var postView = this;
|
||||||
|
|
||||||
return this.$('aside.quote').each(function(i, e) {
|
return this.$('aside.quote').each(function(i, e) {
|
||||||
var $aside, $title;
|
var $aside, $title;
|
||||||
$aside = $(e);
|
$aside = $(e);
|
||||||
_this.updateQuoteElements($aside, 'chevron-down');
|
postView.updateQuoteElements($aside, 'chevron-down');
|
||||||
$title = $('.title', $aside);
|
$title = $('.title', $aside);
|
||||||
|
|
||||||
// Unless it's a full quote, allow click to expand
|
// Unless it's a full quote, allow click to expand
|
||||||
if (!($aside.data('full') || $title.data('has-quote-controls'))) {
|
if (!($aside.data('full') || $title.data('has-quote-controls'))) {
|
||||||
$title.on('click', function(e) {
|
$title.on('click', function(e) {
|
||||||
if ($(e.target).is('a')) {
|
if ($(e.target).is('a')) return true;
|
||||||
// if we clicked on a link, follow it
|
postView.toggleQuote($aside);
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return _this.toggleQuote($aside);
|
|
||||||
});
|
});
|
||||||
return $title.data('has-quote-controls', true);
|
$title.data('has-quote-controls', true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
didInsertElement: function(e) {
|
didInsertElement: function(e) {
|
||||||
var $contents, $post, newSize, originalCol, post, postNumber, scrollTo, _ref;
|
var $post = this.$();
|
||||||
$post = this.$();
|
var post = this.get('post');
|
||||||
post = this.get('post');
|
var postNumber = post.get('scrollToAfterInsert');
|
||||||
|
|
||||||
postNumber = post.get('scrollToAfterInsert');
|
|
||||||
|
|
||||||
// Do we want to scroll to this post now that we've inserted it?
|
// Do we want to scroll to this post now that we've inserted it?
|
||||||
if (postNumber) {
|
if (postNumber) {
|
||||||
Discourse.TopicView.scrollTo(this.get('post.topic_id'), postNumber);
|
Discourse.TopicView.scrollTo(this.get('post.topic_id'), postNumber);
|
||||||
if (postNumber === post.get('post_number')) {
|
if (postNumber === post.get('post_number')) {
|
||||||
$contents = $('.topic-body .contents', $post);
|
var $contents = $('.topic-body .contents', $post);
|
||||||
originalCol = $contents.css('backgroundColor');
|
var originalCol = $contents.css('backgroundColor');
|
||||||
$contents.css({
|
$contents.css({
|
||||||
backgroundColor: "#ffffcc"
|
backgroundColor: "#ffffcc"
|
||||||
}).animate({
|
}).animate({
|
||||||
|
@ -257,8 +242,9 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
}
|
}
|
||||||
this.showLinkCounts();
|
this.showLinkCounts();
|
||||||
|
|
||||||
if (_ref = this.get('screenTrack')) {
|
var screenTrack = this.get('screenTrack');
|
||||||
_ref.track(this.$().prop('id'), this.get('post.post_number'));
|
if (screenTrack) {
|
||||||
|
screenTrack.track(this.$().prop('id'), this.get('post.post_number'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add syntax highlighting
|
// Add syntax highlighting
|
||||||
|
@ -266,8 +252,9 @@ Discourse.PostView = Discourse.View.extend({
|
||||||
Discourse.Lightbox.apply($post);
|
Discourse.Lightbox.apply($post);
|
||||||
|
|
||||||
// If we're scrolling upwards, adjust the scroll position accordingly
|
// If we're scrolling upwards, adjust the scroll position accordingly
|
||||||
|
var scrollTo;
|
||||||
if (scrollTo = this.get('post.scrollTo')) {
|
if (scrollTo = this.get('post.scrollTo')) {
|
||||||
newSize = ($(document).height() - scrollTo.height) + scrollTo.top;
|
var newSize = ($(document).height() - scrollTo.height) + scrollTo.top;
|
||||||
$('body').scrollTop(newSize);
|
$('body').scrollTop(newSize);
|
||||||
$('section.divider').addClass('fade');
|
$('section.divider').addClass('fade');
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +0,0 @@
|
||||||
/**
|
|
||||||
This view is for rendering the posts in a topic
|
|
||||||
|
|
||||||
@class TopicPostsView
|
|
||||||
@extends Ember.CollectionView
|
|
||||||
@namespace Discourse
|
|
||||||
@module Discourse
|
|
||||||
**/
|
|
||||||
Discourse.TopicPostsView = Em.CollectionView.extend({
|
|
||||||
itemViewClass: Discourse.PostView
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue