Skip to content

E
edx-platform
Commit 77e0ef3f by Rocky Duan
Options

Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into… 

Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into feature/tomg/new-discussions
parents d22feb1b 1405cf97
Showing with 191 additions and 48 deletions
lms/static/coffee/src/discussion/discussion_router.coffee
......@@ -10,6 +10,9 @@ class @DiscussionRouter extends Backbone.Router
@nav.on "threads:rendered", @setActiveThread
@nav.render()
@newPostView = new NewPostView(el: $(".new-post-article"), collection: @discussion)
@newPostView.on "thread:created", @navigateToThread
allThreads: ->
# TODO: Do something reasonable here
$(".discussion-column").html("No thread selected.")
......
lms/static/coffee/src/discussion/views/new_post_view.coffee 0 → 100644
class @NewPostView extends Backbone.View
initialize: () ->
@dropdownButton = @$(".topic_dropdown_button")
@topicMenu = @$(".topic_menu_wrapper")
@menuOpen = @dropdownButton.hasClass('dropped')
@topicId = @$(".topic").first().data("discussion_id")
@topicText = @getFullTopicName(@$(".topic").first())
@setSelectedTopic()
events:
"submit .new-post-form": "createPost"
"click .topic_dropdown_button": "toggleTopicDropdown"
"click .topic_menu_wrapper": "setTopic"
"click .topic_menu_search": "ignoreClick"
# Because we want the behavior that when the body is clicked the menu is
# closed, we need to ignore clicks in the search field and stop propagation.
# Without this, clicking the search field would also close the menu.
ignoreClick: (event) ->
event.stopPropagation()
toggleTopicDropdown: (event) ->
event.stopPropagation()
if @menuOpen
@hideTopicDropdown()
else
@showTopicDropdown()
showTopicDropdown: () ->
console.log "showing"
@menuOpen = true
@dropdownButton.addClass('dropped')
@topicMenu.show()
$('body').bind 'click', @hideTopicDropdown
# Set here because 1) the window might get resized and things could
# change and 2) can't set in initialize because the button is hidden
@maxNameWidth = @dropdownButton.width() * 0.9
# Need a fat arrow because hideTopicDropdown is passed as a callback to bind
hideTopicDropdown: () =>
@menuOpen = false
@dropdownButton.removeClass('dropped')
@topicMenu.hide()
$('body').unbind 'click', @hideTopicDropdown
setTopic: (event) ->
$target = $(event.target)
if $target.data('discussion_id')
@topicText = $target.html()
@topicText = @getFullTopicName($target)
@topicId = $target.data('discussion_id')
@setSelectedTopic()
else
console.log "NOTHING IN "
console.log $target
setSelectedTopic: ->
@dropdownButton.html(@fitName(@topicText) + ' <span class="drop-arrow">▾</span>')
getFullTopicName: (topicElement) ->
name = topicElement.html()
topicElement.parents('ul').not('.topic_menu').each ->
name = $(this).siblings('a').html() + ' / ' + name
return name
getNameWidth: (name) ->
test = $("<div>")
test.css
"font-size": @dropdownButton.css('font-size')
opacity: 0
position: 'absolute'
left: -1000
top: -1000
$("body").append(test)
test.html(name)
width = test.width()
test.remove()
return width
fitName: (name) ->
console.log name
width = @getNameWidth(name)
if width < @maxNameWidth
return name
path = (x.replace /^\s+|\s+$/g, "" for x in name.split("/"))
while path.length > 1
path.shift()
partialName = "... / " + path.join(" / ")
if @getNameWidth(partialName) < @maxNameWidth
return partialName
rawName = path[0]
name = "... / " + rawName
while @getNameWidth(name) > @maxNameWidth
rawName = rawName[0...rawName.length-1]
name = "... / " + rawName + " ..."
return name
createPost: (event) ->
event.preventDefault()
title = @$(".new-post-title").val()
body = @$(".new-post-body").val()
tags = @$(".new-post-tags").val()
anonymous = false || @$("input.discussion-anonymous").is(":checked")
follow = false || @$("input.discussion-follow").is(":checked")
$formTopicDropBtn.bind('click', showFormTopicDrop);
$formTopicDropMenu.bind('click', setFormTopic);
url = DiscussionUtil.urlFor('create_thread', @topicId)
DiscussionUtil.safeAjax
$elem: $(event.target)
$loading: $(event.target) if event
url: url
type: "POST"
dataType: 'json'
async: false # TODO when the rest of the stuff below is made to work properly..
data:
title: title
body: body
tags: tags
anonymous: anonymous
auto_subscribe: follow
error: DiscussionUtil.formErrorHandler(@$(".new-post-form-errors"))
success: (response, textStatus) =>
console.log response
thread = new Thread response['content']
DiscussionUtil.clearFormErrors(@$(".new-post-form-errors"))
@$el.hide()
@$(".new-post-title").val("").attr("prev-text", "")
@$(".new-post-body").val("").attr("prev-text", "")
@$(".new-post-tags").val("")
@$(".new-post-tags").importTags("")
@collection.add thread
@collection.trigger "reset"
@trigger "thread:created", thread.id
#@$el.children(".threads").prepend($thread)
# no idea what this is
#@$el.children(".blank").remove()
#@$(".new-post-similar-posts").empty()
#@$(".new-post-similar-posts-wrapper").hide()
#DiscussionUtil.setWmdContent @$el, $.proxy(@$, @), "new-post-body", ""
#thread = @model.addThread response.content
#threadView = new ThreadView el: $thread[0], model: thread
#thread.updateInfo response.annotated_content_info
#@cancelNewPost()
lms/static/sass/_discussion.scss
......@@ -102,7 +102,7 @@ body.discussion {
}
}
.form-topic-drop-btn {
.topic_dropdown_button {
position: relative;
z-index: 10000;
@include white-button;
......@@ -117,7 +117,7 @@ body.discussion {
}
}
.form-topic-drop-menu-wrapper {
.topic_menu_wrapper {
display: none;
position: absolute;
top: 40px;
......@@ -130,7 +130,7 @@ body.discussion {
box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
}
.form-topic-drop-menu {
.topic_menu {
max-height: 400px;
overflow-y: scroll;
......@@ -162,8 +162,9 @@ body.discussion {
}
}
.form-topic-drop-search {
.topic_menu_search {
padding: 10px;
border-bottom: 1px solid black;
}
.form-topic-drop-search-input {
......@@ -429,7 +430,7 @@ body.discussion {
opacity: 0;
}
&.is-dropped {
&.dropped {
.browse-topic-drop-btn {
span {
......@@ -442,13 +443,13 @@ body.discussion {
}
}
&.is-dropped {
&.dropped {
.browse-topic-drop-btn {
background-color: #616161;
}
}
&.is-dropped {
&.dropped {
.browse-topic-drop-icon {
background-position: 0 -16px;
}
......
lms/templates/courseware/course_navigation.html
......@@ -46,7 +46,7 @@ def url_class(url):
% if staff_access:
<li class="instructor"><a href="${reverse('instructor_dashboard', args=[course.id])}" class="${url_class('instructor')}">Instructor</a></li>
% endif
<%block name="extratabs" />
</ol>
</div>
</nav>
lms/templates/discussion/_discussion_course_navigation.html 0 → 100644
<%inherit file="../courseware/course_navigation.html" />
<%block name="extratabs">
<li class="right"><a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a></li>
</%block>
\ No newline at end of file
lms/templates/discussion/_new_post.html
......@@ -9,7 +9,7 @@
</%def>
<%def name="render_entry(entries, entry)">
<li><a href="#" data-discussion_id="${entries[entry]}">${entry}</a></li>
<li><a href="#" class="topic" data-discussion_id="${entries[entry]['id']}">${entry}</a></li>
</%def>
<%def name="render_category(categories, category)">
......@@ -23,24 +23,26 @@
<article class="new-post-article">
<div class="inner-wrapper">
<div class="new-post-form-errors">
</div>
<form class="new-post-form">
<div class="left-column">
<label>Create new post in:</label>
<div class="form-topic-drop">
<a href="#" class="form-topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<div class="form-topic-drop-menu-wrapper">
<div class="form-topic-drop-search">
<a href="#" class="topic_dropdown_button">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<div class="topic_menu_wrapper">
<div class="topic_menu_search">
<input type="text" class="form-topic-drop-search-input" placeholder="filter topics">
</div>
<ul class="form-topic-drop-menu">
<ul class="topic_menu">
${render_form_filter_dropdown(category_map)}
</ul>
</div>
</div>
<div class="options">
<input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<input type="checkbox" name="follow" class="discussion-follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<br>
<input type="checkbox" name="follow" id="new-post-anonymous" checked><label for="new-post-anonymous">post anonymously</label>
<input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous" checked><label for="new-post-anonymous">post anonymously</label>
</div>
</div>
<div class="right-column">
......
lms/templates/discussion/index.html
......@@ -17,7 +17,7 @@
<%static:js group='discussion'/>
</%block>
<%include file="../courseware/course_navigation.html" args="active_page='discussion'" />
<%include file="_discussion_course_navigation.html" args="active_page='discussion'" />
<%include file="_new_post.html" />
......
lms/templates/discussion/single_thread.html
......@@ -20,38 +20,7 @@
</%block>
<nav class="course-material">
<div class="inner-wrapper">
<ol class="course-tabs">
<li class="courseware"><a href="${reverse('courseware', args=[course.id])}">Courseware</a></li>
<li class="info"><a href="${reverse('info', args=[course.id])}">Course Info</a></li>
% if hasattr(course,'syllabus_present') and course.syllabus_present:
<li class="syllabus"><a href="${reverse('syllabus', args=[course.id])}">Syllabus</a></li>
% endif
% if user.is_authenticated():
% if settings.MITX_FEATURES.get('ENABLE_TEXTBOOK'):
% for index, textbook in enumerate(course.textbooks):
<li class="book"><a href="${reverse('book', args=[course.id, index])}">${textbook.title}</a></li>
% endfor
% endif
% if settings.MITX_FEATURES.get('ENABLE_DISCUSSION_SERVICE'):
<li class="discussion"><a href="${reverse('django_comment_client.forum.views.forum_form_discussion', args=[course.id])}" class="active">Discussion</a></li>
% endif
% endif
% if settings.WIKI_ENABLED:
<li class="wiki"><a href="${reverse('course_wiki', args=[course.id])}">Wiki</a></li>
% endif
% if user.is_authenticated():
<li class="profile"><a href="${reverse('progress', args=[course.id])}">Progress</a></li>
% endif
% if staff_access:
<li class="instructor"><a href="${reverse('instructor_dashboard', args=[course.id])}">Instructor</a></li>
% endif
<li class="right"><a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a></li>
</ol>
</div>
</nav>
<%include file="_discussion_course_navigation.html" args="active_page='discussion'"/>
<%include file="_new_post.html" />
......
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