Skip to content

E
edx-platform
Commit fb88df45 by Arjun Singh
Options

Merge underscore template

parents 0e1b247a 0a136184
Showing with 159 additions and 139 deletions
lms/static/coffee/src/discussion/discussion_router.coffee
...@@ -15,7 +15,7 @@ class @DiscussionRouter extends Backbone.Router ...@@ -15,7 +15,7 @@ class @DiscussionRouter extends Backbone.Router
allThreads: -> allThreads: ->
# TODO: Do something reasonable here # TODO: Do something reasonable here
$(".discussion-column").html("No thread selected.") # $(".discussion-column").html($('#blank-slate-template').html())
setActiveThread: => setActiveThread: =>
if @thread if @thread
......
lms/static/coffee/src/discussion/main.coffee
...@@ -8,7 +8,6 @@ DiscussionApp = ...@@ -8,7 +8,6 @@ DiscussionApp =
threads = element.data("threads") threads = element.data("threads")
content_info = element.data("content-info") content_info = element.data("content-info")
window.user = new DiscussionUser(user_info) window.user = new DiscussionUser(user_info)
console.log content_info
Content.loadContentInfos(content_info) Content.loadContentInfos(content_info)
discussion = new Discussion(threads) discussion = new Discussion(threads)
new DiscussionRouter({discussion: discussion}) new DiscussionRouter({discussion: discussion})
......
lms/static/coffee/src/discussion/views/discussion_content_view.coffee
class @DiscussionContentView extends Backbone.View class @DiscussionContentView extends Backbone.View
partialRenderer: attrRenderer:
endorsed: (endorsed) -> 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) -> voted: (voted) ->
if voted
@$(".discussion-vote").addClass("is-cast")
else
@$(".discussion-vote").removeClass("is-cast")
votes_point: (votes_point) -> votes_point: (votes_point) ->
@$(".discussion-vote .votes-count-number").html(votes_point)
comments_count: (comments_count) -> comments_count: (comments_count) ->
...@@ -23,7 +32,6 @@ class @DiscussionContentView extends Backbone.View ...@@ -23,7 +32,6 @@ class @DiscussionContentView extends Backbone.View
@$(".dogear").removeClass("is-followed") @$(".dogear").removeClass("is-followed")
ability: (ability) -> ability: (ability) ->
console.log "ability changed"
for action, selector of @abilityRenderer for action, selector of @abilityRenderer
if not ability[action] if not ability[action]
selector.disable.apply(@) selector.disable.apply(@)
...@@ -40,12 +48,19 @@ class @DiscussionContentView extends Backbone.View ...@@ -40,12 +48,19 @@ class @DiscussionContentView extends Backbone.View
can_endorse: can_endorse:
enable: -> @$(".action-endorse").css("cursor", "auto") enable: -> @$(".action-endorse").css("cursor", "auto")
disable: -> @$(".action-endorse").css("cursor", "default") disable: -> @$(".action-endorse").css("cursor", "default")
can_openclose:
enable: -> @$(".action-openclose").closest("li").show()
disable: -> @$(".action-openclose").closest("li").hide()
renderPartial: -> renderPartialAttrs: ->
console.log "changed"
for attr, value of @model.changedAttributes() for attr, value of @model.changedAttributes()
if @partialRenderer[attr] if @attrRenderer[attr]
@partialRenderer[attr].apply(@, [value]) @attrRenderer[attr].apply(@, [value])
renderAttrs: ->
for attr, value of @model.attributes
if @attrRenderer[attr]
@attrRenderer[attr].apply(@, [value])
initialize: -> initialize: ->
@model.bind('change', @renderPartial, @) @model.bind('change', @renderPartialAttrs, @)
lms/static/coffee/src/discussion/views/discussion_thread_view.coffee
class @DiscussionThreadView extends DiscussionContentView 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: events:
"click .discussion-vote": "toggleVote" "click .discussion-vote": "toggleVote"
"click .action-follow": "toggleFollowing" "click .action-follow": "toggleFollowing"
"click .discussion-submit-post": "submitComment" "click .discussion-submit-post": "submitComment"
"click .action-edit": "edit" "click .action-edit": "edit"
"click .action-delete": "delete" "click .action-delete": "delete"
"click .action-openclose": "toggleClosed"
template: _.template($("#thread-template").html()) template: _.template($("#thread-template").html())
initialize: -> initialize: ->
super()
@model.on "change", @updateModelDetails @model.on "change", @updateModelDetails
render: -> render: ->
@$el.html(@template(@model.toJSON())) @$el.html(@template(@model.toJSON()))
@renderDogear() @renderDogear()
@renderVoted() @renderVoted()
@renderAttrs()
@$("span.timeago").timeago() @$("span.timeago").timeago()
Markdown.makeWmdEditor @$(".reply-body"), "", DiscussionUtil.urlFor("upload"), (text) -> DiscussionUtil.postMathJaxProcessor(text) Markdown.makeWmdEditor @$(".reply-body"), "", DiscussionUtil.urlFor("upload"), (text) -> DiscussionUtil.postMathJaxProcessor(text)
@convertMath() @convertMath()
...@@ -135,7 +125,21 @@ class @DiscussionThreadView extends DiscussionContentView ...@@ -135,7 +125,21 @@ class @DiscussionThreadView extends DiscussionContentView
delete: -> 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) $elem = $(event.target)
url = @model.urlFor('endorse') url = @model.urlFor('endorse')
endorsed = @model.get('endorsed') endorsed = @model.get('endorsed')
......
lms/static/coffee/src/discussion/views/response_comment_view.coffee
...@@ -3,6 +3,7 @@ class @ResponseCommentView extends DiscussionContentView ...@@ -3,6 +3,7 @@ class @ResponseCommentView extends DiscussionContentView
template: _.template($("#response-comment-template").html()) template: _.template($("#response-comment-template").html())
render: -> render: ->
@$el.html(@template(@model.toJSON())) @$el.html(@template(@model.toJSON()))
@renderAttrs()
@$(".timeago").timeago() @$(".timeago").timeago()
@convertMath() @convertMath()
@ @
......
lms/static/coffee/src/discussion/views/thread_response_view.coffee
...@@ -11,6 +11,7 @@ class @ThreadResponseView extends DiscussionContentView ...@@ -11,6 +11,7 @@ class @ThreadResponseView extends DiscussionContentView
@$el.html(@template(@model.toJSON())) @$el.html(@template(@model.toJSON()))
if window.user.voted(@model) if window.user.voted(@model)
@$(".vote-btn").addClass("is-cast") @$(".vote-btn").addClass("is-cast")
@renderAttrs()
@$(".posted-details").timeago() @$(".posted-details").timeago()
@convertMath() @convertMath()
@renderComments() @renderComments()
......
lms/static/js/discussions-temp.js
...@@ -14,14 +14,17 @@ var $formTopicDropMenu; ...@@ -14,14 +14,17 @@ var $formTopicDropMenu;
var $postListWrapper; var $postListWrapper;
var $dropFilter; var $dropFilter;
var $topicFilter; var $topicFilter;
var $discussionBody;
var sidebarWidth; var sidebarWidth;
var sidebarHeight; var sidebarHeight;
var sidebarHeaderHeight; var sidebarHeaderHeight;
var sidebarXOffset; var sidebarXOffset;
var scrollTop; var scrollTop;
var discussionsBodyTop;
var discussionsBodyBottom;
var tooltipTimer; var tooltipTimer;
var tooltipCoords; var tooltipCoords;
var SIDEBAR_PADDING = -1; var SIDEBAR_PADDING = 10;
var SIDEBAR_HEADER_HEIGHT = 87; var SIDEBAR_HEADER_HEIGHT = 87;
...@@ -35,6 +38,7 @@ $(document).ready(function() { ...@@ -35,6 +38,7 @@ $(document).ready(function() {
$tooltip = $('<div class="tooltip"></div>'); $tooltip = $('<div class="tooltip"></div>');
$newPost = $('.new-post-article'); $newPost = $('.new-post-article');
$sidebar = $('.sidebar'); $sidebar = $('.sidebar');
$discussionBody = $('.discussion-body');
$postListWrapper = $('.post-list-wrapper'); $postListWrapper = $('.post-list-wrapper');
$formTopicDropBtn = $('.new-post-article .form-topic-drop-btn'); $formTopicDropBtn = $('.new-post-article .form-topic-drop-btn');
$formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper'); $formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper');
...@@ -61,28 +65,69 @@ $(document).ready(function() { ...@@ -61,28 +65,69 @@ $(document).ready(function() {
'click': hideTooltip 'click': hideTooltip
}); });
//$body.delegate('.browse-topic-drop-btn', 'click', showTopicDrop); $body.delegate('.browse-topic-drop-search-input, .form-topic-drop-search-input', 'keyup', filterDrop);
//$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);
$(window).bind('resize', updateSidebarDimensions); $(window).bind('resize', updateSidebar);
$(window).bind('scroll', updateSidebarCoordinates); $(window).bind('scroll', updateSidebar);
$('.discussion-column').bind("input", function (e) { $('.discussion-column').bind("input", function (e) {
console.log("resized"); console.log("resized");
updateSidebarCoordinates(); updateSidebar();
updateSidebarDimensions();
}) })
updateSidebarCoordinates(); updateSidebar();
updateSidebarDimensions();
}); });
function filterDrop(e) { 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 $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'); var $items = $drop.find('a');
if(queries.length == 0) { if(query.length == 0) {
$items.show(); $items.show();
return; return;
} }
...@@ -97,10 +142,8 @@ function filterDrop(e) { ...@@ -97,10 +142,8 @@ function filterDrop(e) {
var test = true; var test = true;
var terms = thisText.split(' '); var terms = thisText.split(' ');
for(var i = 0; i < queries.length; i++) { if(thisText.toLowerCase().search(query.toLowerCase()) == -1) {
if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) { test = false;
test = false;
}
} }
if(test) { if(test) {
...@@ -277,92 +320,37 @@ function setFormTopic(e) { ...@@ -277,92 +320,37 @@ function setFormTopic(e) {
$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>'); $formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
} }
//function updateSidebarCoordinates(e) { function updateSidebar(e) {
// scrollTop = $(window).scrollTop(); // determine page scroll attributes
// sidebarXOffset = $('.discussion-column').offset().top; scrollTop = $(window).scrollTop();
// discussionsBodyTop = $discussionBody.offset().top;
// var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0; discussionsBodyBottom = discussionsBodyTop + $discussionBody.height();
// var windowHeight = $(window).height();
// var discussionColumnHeight = $('.discussion-column').height();
// marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop; // toggle fixed positioning
// if(scrollTop > discussionsBodyTop - SIDEBAR_PADDING) {
// $sidebar.css('margin-top', marginTop); $sidebar.addClass('fixed');
// updateSidebarDimensions(); $sidebar.css('top', SIDEBAR_PADDING + 'px');
//} } else {
// $sidebar.removeClass('fixed');
//function updateSidebarDimensions(e) { $sidebar.css('top', '0');
// 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 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');
scrollTop = $(window).scrollTop();
offset = $('.sidebar').attr('data-top');
if ((offset <= scrollTop)){
$('.sidebar').addClass('fixed');
$('.discussion-column').addClass('sidebar-fixed');
}else{
$('.sidebar').removeClass('fixed');
$('.discussion-column').removeClass('sidebar-fixed');
}
discussionColumnHeight = $('.discussion-column').outerHeight();
discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight;
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) { // set sidebar width
var sidebarWidth = .32 * $discussionBody.width() - 10;
$sidebar.css('width', sidebarWidth + 'px');
discussionColumnHeight = $('.discussion-column').outerHeight(); // show the entire sidebar at all times
discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight; var sidebarHeight = windowHeight - (scrollTop < discussionsBodyTop - SIDEBAR_PADDING ? discussionsBodyTop - scrollTop : SIDEBAR_PADDING) - SIDEBAR_PADDING - (scrollTop + windowHeight > discussionsBodyBottom + SIDEBAR_PADDING ? scrollTop + windowHeight - discussionsBodyBottom - SIDEBAR_PADDING : 0);
windowHeight = $(window).height(); $sidebar.css('height', sidebarHeight > 400 ? sidebarHeight : 400 + 'px');
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); // update the list height
//$('.post-list-wrapper').height(discussionColumnBottom - scrollTop - SIDEBAR_HEADER_HEIGHT - 4); if(!$postListWrapper[0]) {
$postListWrapper = $('.post-list-wrapper');
}
$postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px');
if((discussionColumnBottom - scrollTop) < windowHeight){ // update title wrappers
$('.sidebar').height(discussionColumnHeight); var titleWidth = sidebarWidth - 115;
$('.post-list-wrapper').height(discussionColumnHeight - SIDEBAR_HEADER_HEIGHT - 4); $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
}
} }
lms/static/sass/_discussion.scss
...@@ -555,10 +555,9 @@ body.discussion { ...@@ -555,10 +555,9 @@ body.discussion {
width: 32%; width: 32%;
height: 550px; height: 550px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-right: none !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
background: #f6f6f6; background: #f6f6f6;
border-radius: 3px 0 0 3px; border-radius: 3px;
border-right: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc;
&.fixed { &.fixed {
...@@ -638,6 +637,7 @@ body.discussion { ...@@ -638,6 +637,7 @@ body.discussion {
.search { .search {
cursor: pointer; cursor: pointer;
border-radius: 0 3px 0 0;
&.is-open { &.is-open {
cursor: auto; cursor: auto;
...@@ -1024,10 +1024,10 @@ body.discussion { ...@@ -1024,10 +1024,10 @@ body.discussion {
.discussion-column { .discussion-column {
float: left; float: right;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 0 3px 3px 0; border-radius: 3px;
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
width: 68%; width: 68%;
...@@ -1038,9 +1038,17 @@ body.discussion { ...@@ -1038,9 +1038,17 @@ body.discussion {
} }
} }
.blank-slate h1 {
margin-top: 195px;
text-align: center;
color: #ccc;
}
.blank-slate,
.discussion-article { .discussion-article {
position: relative; position: relative;
padding: 40px; padding: 40px;
min-height: 468px;
h1 { h1 {
margin-bottom: 10px; margin-bottom: 10px;
......
lms/templates/discussion/_underscore_templates.html
...@@ -18,14 +18,13 @@ ...@@ -18,14 +18,13 @@
(this post is about <a href="../../jump_to/${'<%- courseware_location %>'}">${'<%- courseware_title %>'}</a>) (this post is about <a href="../../jump_to/${'<%- courseware_location %>'}">${'<%- courseware_title %>'}</a>)
</div> </div>
${'<% } %>'} ${'<% } %>'}
<div class="post-status"> <div class="post-status-closed" style="display: none">
${'<% if (closed) { %>'} This thread is closed.
This thread is closed.
${'<% } %>'}
</div> </div>
<ul class="moderator-actions"> <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-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-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> </ul>
</div> </div>
<ol class="responses"> <ol class="responses">
......
lms/templates/discussion/index.html
...@@ -26,7 +26,12 @@ ...@@ -26,7 +26,12 @@
<section class="discussion container" id="discussion-container" data-course-id="${course_id}" data-user-info="${user_info}" data-threads="${threads}"> <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="discussion-body">
<div class="sidebar"></div> <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> </div>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment