Merge underscore template
This commit is contained in:
@@ -15,7 +15,7 @@ class @DiscussionRouter extends Backbone.Router
|
||||
|
||||
allThreads: ->
|
||||
# TODO: Do something reasonable here
|
||||
$(".discussion-column").html("No thread selected.")
|
||||
# $(".discussion-column").html($('#blank-slate-template').html())
|
||||
|
||||
setActiveThread: =>
|
||||
if @thread
|
||||
|
||||
@@ -8,7 +8,6 @@ DiscussionApp =
|
||||
threads = element.data("threads")
|
||||
content_info = element.data("content-info")
|
||||
window.user = new DiscussionUser(user_info)
|
||||
console.log content_info
|
||||
Content.loadContentInfos(content_info)
|
||||
discussion = new Discussion(threads)
|
||||
new DiscussionRouter({discussion: discussion})
|
||||
|
||||
@@ -1,18 +1,27 @@
|
||||
class @DiscussionContentView extends Backbone.View
|
||||
|
||||
partialRenderer:
|
||||
attrRenderer:
|
||||
endorsed: (endorsed) ->
|
||||
if endorsed
|
||||
@$(".action-endorse").addClass("is-endorsed")
|
||||
else
|
||||
@$(".action-endorse").removeClass("is-endorsed")
|
||||
|
||||
closed: (closed) -> # we should just re-render the whole thread, or update according to new abilities
|
||||
closed: (closed) ->
|
||||
return if not @$(".action-openclose").length
|
||||
return if not @$(".post-status-closed").length
|
||||
if closed
|
||||
@$(".post-status-closed").show()
|
||||
@$(".action-openclose").html(@$(".action-openclose").html().replace("Close", "Open"))
|
||||
@$(".discussion-reply-new").hide()
|
||||
else
|
||||
@$(".post-status-closed").hide()
|
||||
@$(".action-openclose").html(@$(".action-openclose").html().replace("Open", "Close"))
|
||||
@$(".discussion-reply-new").show()
|
||||
|
||||
voted: (voted) ->
|
||||
if voted
|
||||
@$(".discussion-vote").addClass("is-cast")
|
||||
else
|
||||
@$(".discussion-vote").removeClass("is-cast")
|
||||
|
||||
votes_point: (votes_point) ->
|
||||
@$(".discussion-vote .votes-count-number").html(votes_point)
|
||||
|
||||
comments_count: (comments_count) ->
|
||||
|
||||
@@ -23,7 +32,6 @@ class @DiscussionContentView extends Backbone.View
|
||||
@$(".dogear").removeClass("is-followed")
|
||||
|
||||
ability: (ability) ->
|
||||
console.log "ability changed"
|
||||
for action, selector of @abilityRenderer
|
||||
if not ability[action]
|
||||
selector.disable.apply(@)
|
||||
@@ -40,12 +48,19 @@ class @DiscussionContentView extends Backbone.View
|
||||
can_endorse:
|
||||
enable: -> @$(".action-endorse").css("cursor", "auto")
|
||||
disable: -> @$(".action-endorse").css("cursor", "default")
|
||||
can_openclose:
|
||||
enable: -> @$(".action-openclose").closest("li").show()
|
||||
disable: -> @$(".action-openclose").closest("li").hide()
|
||||
|
||||
renderPartial: ->
|
||||
console.log "changed"
|
||||
renderPartialAttrs: ->
|
||||
for attr, value of @model.changedAttributes()
|
||||
if @partialRenderer[attr]
|
||||
@partialRenderer[attr].apply(@, [value])
|
||||
if @attrRenderer[attr]
|
||||
@attrRenderer[attr].apply(@, [value])
|
||||
|
||||
renderAttrs: ->
|
||||
for attr, value of @model.attributes
|
||||
if @attrRenderer[attr]
|
||||
@attrRenderer[attr].apply(@, [value])
|
||||
|
||||
initialize: ->
|
||||
@model.bind('change', @renderPartial, @)
|
||||
@model.bind('change', @renderPartialAttrs, @)
|
||||
|
||||
@@ -1,34 +1,24 @@
|
||||
class @DiscussionThreadView extends DiscussionContentView
|
||||
|
||||
abilityRenderer:
|
||||
editable:
|
||||
enable: -> @$(".action-edit").closest("li").show()
|
||||
disable: -> @$(".action-edit").closest("li").hide()
|
||||
can_delete:
|
||||
enable: -> @$(".action-delete").closest("li").show()
|
||||
disable: -> @$(".action-delete").closest("li").hide()
|
||||
can_endorse:
|
||||
enable: ->
|
||||
@$(".action-endorse").css("cursor", "auto")
|
||||
disable: ->
|
||||
@$(".action-endorse").css("cursor", "default")
|
||||
|
||||
events:
|
||||
"click .discussion-vote": "toggleVote"
|
||||
"click .action-follow": "toggleFollowing"
|
||||
"click .discussion-submit-post": "submitComment"
|
||||
"click .action-edit": "edit"
|
||||
"click .action-delete": "delete"
|
||||
"click .action-openclose": "toggleClosed"
|
||||
|
||||
template: _.template($("#thread-template").html())
|
||||
|
||||
initialize: ->
|
||||
super()
|
||||
@model.on "change", @updateModelDetails
|
||||
|
||||
render: ->
|
||||
@$el.html(@template(@model.toJSON()))
|
||||
@renderDogear()
|
||||
@renderVoted()
|
||||
@renderAttrs()
|
||||
@$("span.timeago").timeago()
|
||||
Markdown.makeWmdEditor @$(".reply-body"), "", DiscussionUtil.urlFor("upload"), (text) -> DiscussionUtil.postMathJaxProcessor(text)
|
||||
@convertMath()
|
||||
@@ -135,7 +125,21 @@ class @DiscussionThreadView extends DiscussionContentView
|
||||
|
||||
delete: ->
|
||||
|
||||
toggleEndorse: ->
|
||||
toggleClosed: (event) ->
|
||||
$elem = $(event.target)
|
||||
url = @model.urlFor('close')
|
||||
closed = @model.get('closed')
|
||||
data = { closed: not closed }
|
||||
DiscussionUtil.safeAjax
|
||||
$elem: $elem
|
||||
url: url
|
||||
data: data
|
||||
type: "POST"
|
||||
success: (response, textStatus) =>
|
||||
@model.set('closed', not closed)
|
||||
@model.set('ability', response.ability)
|
||||
|
||||
toggleEndorse: (event) ->
|
||||
$elem = $(event.target)
|
||||
url = @model.urlFor('endorse')
|
||||
endorsed = @model.get('endorsed')
|
||||
|
||||
@@ -3,6 +3,7 @@ class @ResponseCommentView extends DiscussionContentView
|
||||
template: _.template($("#response-comment-template").html())
|
||||
render: ->
|
||||
@$el.html(@template(@model.toJSON()))
|
||||
@renderAttrs()
|
||||
@$(".timeago").timeago()
|
||||
@convertMath()
|
||||
@
|
||||
|
||||
@@ -11,6 +11,7 @@ class @ThreadResponseView extends DiscussionContentView
|
||||
@$el.html(@template(@model.toJSON()))
|
||||
if window.user.voted(@model)
|
||||
@$(".vote-btn").addClass("is-cast")
|
||||
@renderAttrs()
|
||||
@$(".posted-details").timeago()
|
||||
@convertMath()
|
||||
@renderComments()
|
||||
|
||||
@@ -14,14 +14,17 @@ var $formTopicDropMenu;
|
||||
var $postListWrapper;
|
||||
var $dropFilter;
|
||||
var $topicFilter;
|
||||
var $discussionBody;
|
||||
var sidebarWidth;
|
||||
var sidebarHeight;
|
||||
var sidebarHeaderHeight;
|
||||
var sidebarXOffset;
|
||||
var scrollTop;
|
||||
var discussionsBodyTop;
|
||||
var discussionsBodyBottom;
|
||||
var tooltipTimer;
|
||||
var tooltipCoords;
|
||||
var SIDEBAR_PADDING = -1;
|
||||
var SIDEBAR_PADDING = 10;
|
||||
var SIDEBAR_HEADER_HEIGHT = 87;
|
||||
|
||||
|
||||
@@ -35,6 +38,7 @@ $(document).ready(function() {
|
||||
$tooltip = $('<div class="tooltip"></div>');
|
||||
$newPost = $('.new-post-article');
|
||||
$sidebar = $('.sidebar');
|
||||
$discussionBody = $('.discussion-body');
|
||||
$postListWrapper = $('.post-list-wrapper');
|
||||
$formTopicDropBtn = $('.new-post-article .form-topic-drop-btn');
|
||||
$formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper');
|
||||
@@ -61,28 +65,69 @@ $(document).ready(function() {
|
||||
'click': hideTooltip
|
||||
});
|
||||
|
||||
//$body.delegate('.browse-topic-drop-btn', 'click', showTopicDrop);
|
||||
//$body.delegate('.browse-topic-drop-search-input', 'keyup', filterDrop);
|
||||
$body.delegate('.form-topic-drop-search-input', 'keyup', filterDrop);
|
||||
//$body.delegate('.browse-topic-drop-menu-wrapper', 'click', setTopic);
|
||||
$body.delegate('.browse-topic-drop-search-input, .form-topic-drop-search-input', 'keyup', filterDrop);
|
||||
|
||||
$(window).bind('resize', updateSidebarDimensions);
|
||||
$(window).bind('scroll', updateSidebarCoordinates);
|
||||
$(window).bind('resize', updateSidebar);
|
||||
$(window).bind('scroll', updateSidebar);
|
||||
$('.discussion-column').bind("input", function (e) {
|
||||
console.log("resized");
|
||||
updateSidebarCoordinates();
|
||||
updateSidebarDimensions();
|
||||
updateSidebar();
|
||||
})
|
||||
updateSidebarCoordinates();
|
||||
updateSidebarDimensions();
|
||||
updateSidebar();
|
||||
});
|
||||
|
||||
function filterDrop(e) {
|
||||
/*
|
||||
* multiple queries
|
||||
*/
|
||||
|
||||
// var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper');
|
||||
// var queries = $(this).val().split(' ');
|
||||
// var $items = $drop.find('a');
|
||||
|
||||
// if(queries.length == 0) {
|
||||
// $items.show();
|
||||
// return;
|
||||
// }
|
||||
|
||||
// $items.hide();
|
||||
// $items.each(function(i) {
|
||||
// var thisText = $(this).children().not('.unread').text();
|
||||
// $(this).parents('ul').siblings('a').not('.unread').each(function(i) {
|
||||
// thisText = thisText + ' ' + $(this).text();
|
||||
// });
|
||||
|
||||
// var test = true;
|
||||
// var terms = thisText.split(' ');
|
||||
|
||||
// for(var i = 0; i < queries.length; i++) {
|
||||
// if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) {
|
||||
// test = false;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if(test) {
|
||||
// $(this).show();
|
||||
|
||||
// // show children
|
||||
// $(this).parent().find('a').show();
|
||||
|
||||
// // show parents
|
||||
// $(this).parents('ul').siblings('a').show();
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* single query
|
||||
*/
|
||||
|
||||
var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper');
|
||||
var queries = $(this).val().split(' ');
|
||||
var query = $(this).val();
|
||||
var $items = $drop.find('a');
|
||||
|
||||
if(queries.length == 0) {
|
||||
if(query.length == 0) {
|
||||
$items.show();
|
||||
return;
|
||||
}
|
||||
@@ -97,10 +142,8 @@ function filterDrop(e) {
|
||||
var test = true;
|
||||
var terms = thisText.split(' ');
|
||||
|
||||
for(var i = 0; i < queries.length; i++) {
|
||||
if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) {
|
||||
test = false;
|
||||
}
|
||||
if(thisText.toLowerCase().search(query.toLowerCase()) == -1) {
|
||||
test = false;
|
||||
}
|
||||
|
||||
if(test) {
|
||||
@@ -277,92 +320,37 @@ function setFormTopic(e) {
|
||||
$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
|
||||
}
|
||||
|
||||
//function updateSidebarCoordinates(e) {
|
||||
// scrollTop = $(window).scrollTop();
|
||||
// sidebarXOffset = $('.discussion-column').offset().top;
|
||||
//
|
||||
// var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
|
||||
//
|
||||
// var discussionColumnHeight = $('.discussion-column').height();
|
||||
// marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop;
|
||||
//
|
||||
// $sidebar.css('margin-top', marginTop);
|
||||
// updateSidebarDimensions();
|
||||
//}
|
||||
//
|
||||
//function updateSidebarDimensions(e) {
|
||||
// sidebarWidth = $sidebar.width();
|
||||
//
|
||||
// var visibleHeader = sidebarXOffset - scrollTop > 0 ? sidebarXOffset - scrollTop : 0;
|
||||
// sidebarHeight = $(window).height() - (visibleHeader + SIDEBAR_PADDING * 2);
|
||||
// sidebarHeight = sidebarHeight > 500 ? sidebarHeight : 500;
|
||||
//
|
||||
// var titleWidth = sidebarWidth - 115;
|
||||
//
|
||||
// $sidebar.css('height', sidebarHeight + 'px');
|
||||
//
|
||||
// if(!$postListWrapper[0]) {
|
||||
// $postListWrapper = $('.post-list-wrapper');
|
||||
// }
|
||||
//
|
||||
// $postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px');
|
||||
// $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
|
||||
//}
|
||||
function updateSidebar(e) {
|
||||
// determine page scroll attributes
|
||||
scrollTop = $(window).scrollTop();
|
||||
discussionsBodyTop = $discussionBody.offset().top;
|
||||
discussionsBodyBottom = discussionsBodyTop + $discussionBody.height();
|
||||
var windowHeight = $(window).height();
|
||||
|
||||
function updateSidebarCoordinates(e) {
|
||||
if (!$('.sidebar').attr('data-top')){
|
||||
if ($('.sidebar').hasClass('fixed')){
|
||||
return;
|
||||
}
|
||||
var offset = $('.sidebar').offset();
|
||||
$('.sidebar').attr('data-top', offset.top);
|
||||
}
|
||||
$('.sidebar').css('width', .32 * $('.discussion-body').width() + 'px');
|
||||
// toggle fixed positioning
|
||||
if(scrollTop > discussionsBodyTop - SIDEBAR_PADDING) {
|
||||
$sidebar.addClass('fixed');
|
||||
$sidebar.css('top', SIDEBAR_PADDING + 'px');
|
||||
} else {
|
||||
$sidebar.removeClass('fixed');
|
||||
$sidebar.css('top', '0');
|
||||
}
|
||||
|
||||
scrollTop = $(window).scrollTop();
|
||||
offset = $('.sidebar').attr('data-top');
|
||||
// set sidebar width
|
||||
var sidebarWidth = .32 * $discussionBody.width() - 10;
|
||||
$sidebar.css('width', sidebarWidth + 'px');
|
||||
|
||||
if ((offset <= scrollTop)){
|
||||
$('.sidebar').addClass('fixed');
|
||||
$('.discussion-column').addClass('sidebar-fixed');
|
||||
}else{
|
||||
$('.sidebar').removeClass('fixed');
|
||||
$('.discussion-column').removeClass('sidebar-fixed');
|
||||
}
|
||||
// show the entire sidebar at all times
|
||||
var sidebarHeight = windowHeight - (scrollTop < discussionsBodyTop - SIDEBAR_PADDING ? discussionsBodyTop - scrollTop : SIDEBAR_PADDING) - SIDEBAR_PADDING - (scrollTop + windowHeight > discussionsBodyBottom + SIDEBAR_PADDING ? scrollTop + windowHeight - discussionsBodyBottom - SIDEBAR_PADDING : 0);
|
||||
$sidebar.css('height', sidebarHeight > 400 ? sidebarHeight : 400 + 'px');
|
||||
|
||||
discussionColumnHeight = $('.discussion-column').outerHeight();
|
||||
discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight;
|
||||
// update the list height
|
||||
if(!$postListWrapper[0]) {
|
||||
$postListWrapper = $('.post-list-wrapper');
|
||||
}
|
||||
$postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px');
|
||||
|
||||
windowHeight = $(window).height();
|
||||
|
||||
if((discussionColumnBottom - scrollTop) < windowHeight){
|
||||
//difference = minHeight - (discussionColumnBottom - scrollTop);
|
||||
//$('.sidebar').height(minHeight);
|
||||
//console.log(minHeight);
|
||||
//$('.sidebar').css('top', -difference);
|
||||
//$('.post-list-wrapper').height(minHeight - SIDEBAR_HEADER_HEIGHT - 4);
|
||||
$('.sidebar').removeClass('fixed');
|
||||
$('.discussion-column').removeClass('sidebar-fixed');
|
||||
}
|
||||
|
||||
updateSidebarDimensions();
|
||||
}
|
||||
|
||||
function updateSidebarDimensions(e) {
|
||||
|
||||
discussionColumnHeight = $('.discussion-column').outerHeight();
|
||||
discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight;
|
||||
windowHeight = $(window).height();
|
||||
sidebarHeight = Math.min(windowHeight, discussionColumnHeight);
|
||||
$('.sidebar').height(sidebarHeight);
|
||||
$('.post-list-wrapper').height(sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4);
|
||||
$('.sidebar').css('width', .32 * $('.discussion-body').width() + 'px');
|
||||
|
||||
//$('.sidebar').height(discussionColumnBottom - scrollTop);
|
||||
//$('.post-list-wrapper').height(discussionColumnBottom - scrollTop - SIDEBAR_HEADER_HEIGHT - 4);
|
||||
|
||||
if((discussionColumnBottom - scrollTop) < windowHeight){
|
||||
$('.sidebar').height(discussionColumnHeight);
|
||||
$('.post-list-wrapper').height(discussionColumnHeight - SIDEBAR_HEADER_HEIGHT - 4);
|
||||
}
|
||||
// update title wrappers
|
||||
var titleWidth = sidebarWidth - 115;
|
||||
$sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
|
||||
}
|
||||
|
||||
@@ -555,10 +555,9 @@ body.discussion {
|
||||
width: 32%;
|
||||
height: 550px;
|
||||
border: 1px solid #aaa;
|
||||
border-right: none !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
background: #f6f6f6;
|
||||
border-radius: 3px 0 0 3px;
|
||||
border-radius: 3px;
|
||||
border-right: 1px solid #bcbcbc;
|
||||
|
||||
&.fixed {
|
||||
@@ -638,6 +637,7 @@ body.discussion {
|
||||
|
||||
.search {
|
||||
cursor: pointer;
|
||||
border-radius: 0 3px 0 0;
|
||||
|
||||
&.is-open {
|
||||
cursor: auto;
|
||||
@@ -1024,10 +1024,10 @@ body.discussion {
|
||||
|
||||
|
||||
.discussion-column {
|
||||
float: left;
|
||||
float: right;
|
||||
@include box-sizing(border-box);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
width: 68%;
|
||||
@@ -1038,9 +1038,17 @@ body.discussion {
|
||||
}
|
||||
}
|
||||
|
||||
.blank-slate h1 {
|
||||
margin-top: 195px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.blank-slate,
|
||||
.discussion-article {
|
||||
position: relative;
|
||||
padding: 40px;
|
||||
min-height: 468px;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@@ -18,14 +18,13 @@
|
||||
(this post is about <a href="../../jump_to/${'<%- courseware_location %>'}">${'<%- courseware_title %>'}</a>)
|
||||
</div>
|
||||
${'<% } %>'}
|
||||
<div class="post-status">
|
||||
${'<% if (closed) { %>'}
|
||||
This thread is closed.
|
||||
${'<% } %>'}
|
||||
<div class="post-status-closed" style="display: none">
|
||||
This thread is closed.
|
||||
</div>
|
||||
<ul class="moderator-actions">
|
||||
<li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
|
||||
<li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
|
||||
<li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> Close</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ol class="responses">
|
||||
|
||||
@@ -26,7 +26,12 @@
|
||||
<section class="discussion container" id="discussion-container" data-course-id="${course_id}" data-user-info="${user_info}" data-threads="${threads}">
|
||||
<div class="discussion-body">
|
||||
<div class="sidebar"></div>
|
||||
<div class="discussion-column"></div>
|
||||
<div class="discussion-column">
|
||||
<div class="blank-slate">
|
||||
<h1>${course.title} discussion forum</h1>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user