Skip to content

E
edx-platform
Commit 95cfbcc8 by Arjun Singh
Options

new post 'works'

parent b913c93f
Showing with 163 additions and 73 deletions
lms/static/coffee/src/discussion/views/new_post_view.coffee
...@@ -2,68 +2,155 @@ class @NewPostView extends Backbone.View ...@@ -2,68 +2,155 @@ class @NewPostView extends Backbone.View
initialize: () -> initialize: () ->
@dropdownButton = @$(".topic_dropdown_button") @dropdownButton = @$(".topic_dropdown_button")
@topicMenu = @$(".topic_menu_wrapper")
#events: @menuOpen = @dropdownButton.hasClass('dropped')
# "submit .new-post-form": "createPost"
# "click .topic_dropdown_button": "toggleTopicDropdown" @topicId = @$(".topic").first().data("discussion_id")
# "click .topic_menu": "setTopic" @topicText = @getFullTopicName(@$(".topic").first())
#toggleTopicDropdown: (event) -> @setSelectedTopic()
# if $target.hasClass('dropped')
# @showTopicDropdown() events:
# else "submit .new-post-form": "createPost"
# @hideTopicDropdown() "click .topic_dropdown_button": "toggleTopicDropdown"
# "click .topic_menu_wrapper": "setTopic"
#showTopicDropdown: () -> "click .topic_menu_search": "ignoreClick"
# #$button =
# $button.addClass('dropped') # 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.
# $topicMenu = @$(".topic_menu") # Without this, clicking the search field would also close the menu.
# $topicMenu.show() ignoreClick: (event) ->
event.stopPropagation()
#createPost: (event) ->
# event.preventDefault() toggleTopicDropdown: (event) ->
event.stopPropagation()
# title = @$(".new-post-title").val() if @menuOpen
# body = @$(".new-post-body").val() @hideTopicDropdown()
# tags = @$(".new-post-tags").val() else
@showTopicDropdown()
# anonymous = false || @$("input.discussion-anonymous").is(":checked")
# follow = false || @$("input.discussion-follow").is(":checked") showTopicDropdown: () ->
console.log "showing"
# $formTopicDropBtn.bind('click', showFormTopicDrop); @menuOpen = true
# $formTopicDropMenu.bind('click', setFormTopic); @dropdownButton.addClass('dropped')
@topicMenu.show()
# url = DiscussionUtil.urlFor('create_thread', @model.id)
$('body').bind 'click', @hideTopicDropdown
# DiscussionUtil.safeAjax
# $elem: $(event.target) # Set here because 1) the window might get resized and things could
# $loading: $(event.target) if event # change and 2) can't set in initialize because the button is hidden
# url: url @maxNameWidth = @dropdownButton.width() * 0.9
# type: "POST"
# dataType: 'json'
# data: # Need a fat arrow because hideTopicDropdown is passed as a callback to bind
# title: title hideTopicDropdown: () =>
# body: body @menuOpen = false
# tags: tags @dropdownButton.removeClass('dropped')
# anonymous: anonymous @topicMenu.hide()
# auto_subscribe: follow
# error: DiscussionUtil.formErrorHandler(@$(".new-post-form-errors")) $('body').unbind 'click', @hideTopicDropdown
# success: (response, textStatus) =>
# DiscussionUtil.clearFormErrors(@$(".new-post-form-errors")) setTopic: (event) ->
# $thread = $(response.html) $target = $(event.target)
# @$el.children(".threads").prepend($thread) if $target.data('discussion_id')
@topicText = $target.html()
# @$el.children(".blank").remove() @topicText = @getFullTopicName($target)
@topicId = $target.data('discussion_id')
# @$(".new-post-similar-posts").empty() @setSelectedTopic()
# @$(".new-post-similar-posts-wrapper").hide() else
# @$(".new-post-title").val("").attr("prev-text", "") console.log "NOTHING IN "
# DiscussionUtil.setWmdContent @$el, $.proxy(@$, @), "new-post-body", "" console.log $target
# @$(".new-post-tags").val("")
# @$(".new-post-tags").importTags("") setSelectedTopic: ->
@dropdownButton.html(@fitName(@topicText) + ' <span class="drop-arrow">▾</span>')
# thread = @model.addThread response.content
# threadView = new ThreadView el: $thread[0], model: thread getFullTopicName: (topicElement) ->
# thread.updateInfo response.annotated_content_info name = topicElement.html()
# @cancelNewPost() 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) ->
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 "SUCCESS"
#DiscussionUtil.clearFormErrors(@$(".new-post-form-errors"))
#$thread = $(response.html)
#@$(".new-post-title").val("").attr("prev-text", "")
#@$(".new-post-body").val("").attr("prev-text", "")
#@$(".new-post-tags").val("")
#@$(".new-post-tags").importTags("")
#@$el.children(".threads").prepend($thread)
#@$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 { ...@@ -102,7 +102,7 @@ body.discussion {
} }
} }
.form-topic-drop-btn { .topic_dropdown_button {
position: relative; position: relative;
z-index: 10000; z-index: 10000;
@include white-button; @include white-button;
...@@ -117,7 +117,7 @@ body.discussion { ...@@ -117,7 +117,7 @@ body.discussion {
} }
} }
.form-topic-drop-menu-wrapper { .topic_menu_wrapper {
display: none; display: none;
position: absolute; position: absolute;
top: 40px; top: 40px;
...@@ -130,7 +130,7 @@ body.discussion { ...@@ -130,7 +130,7 @@ body.discussion {
box-shadow: 0 2px 50px rgba(0, 0, 0, .4); box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
} }
.form-topic-drop-menu { .topic_menu {
max-height: 400px; max-height: 400px;
overflow-y: scroll; overflow-y: scroll;
...@@ -162,8 +162,9 @@ body.discussion { ...@@ -162,8 +162,9 @@ body.discussion {
} }
} }
.form-topic-drop-search { .topic_menu_search {
padding: 10px; padding: 10px;
border-bottom: 1px solid black;
} }
.form-topic-drop-search-input { .form-topic-drop-search-input {
......
lms/templates/discussion/_new_post.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</%def> </%def>
<%def name="render_entry(entries, entry)"> <%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>
<%def name="render_category(categories, category)"> <%def name="render_category(categories, category)">
...@@ -23,16 +23,18 @@ ...@@ -23,16 +23,18 @@
<article class="new-post-article"> <article class="new-post-article">
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="new-post-form-errors">
</div>
<form class="new-post-form"> <form class="new-post-form">
<div class="left-column"> <div class="left-column">
<label>Create new post in:</label> <label>Create new post in:</label>
<div class="form-topic-drop"> <div class="form-topic-drop">
<a href="#" class="form-topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a> <a href="#" class="topic_dropdown_button">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<div class="form-topic-drop-menu-wrapper"> <div class="topic_menu_wrapper">
<div class="form-topic-drop-search"> <div class="topic_menu_search">
<input type="text" class="form-topic-drop-search-input" placeholder="filter topics"> <input type="text" class="form-topic-drop-search-input" placeholder="filter topics">
</div> </div>
<ul class="form-topic-drop-menu"> <ul class="topic_menu">
${render_form_filter_dropdown(category_map)} ${render_form_filter_dropdown(category_map)}
</ul> </ul>
</div> </div>
......
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