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
initialize: () ->
@dropdownButton = @$(".topic_dropdown_button")
@topicMenu = @$(".topic_menu_wrapper")
#events:
# "submit .new-post-form": "createPost"
# "click .topic_dropdown_button": "toggleTopicDropdown"
# "click .topic_menu": "setTopic"
#toggleTopicDropdown: (event) ->
# if $target.hasClass('dropped')
# @showTopicDropdown()
# else
# @hideTopicDropdown()
#
#showTopicDropdown: () ->
# #$button =
# $button.addClass('dropped')
# $topicMenu = @$(".topic_menu")
# $topicMenu.show()
#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', @model.id)
# DiscussionUtil.safeAjax
# $elem: $(event.target)
# $loading: $(event.target) if event
# url: url
# type: "POST"
# dataType: 'json'
# data:
# title: title
# body: body
# tags: tags
# anonymous: anonymous
# auto_subscribe: follow
# error: DiscussionUtil.formErrorHandler(@$(".new-post-form-errors"))
# success: (response, textStatus) =>
# DiscussionUtil.clearFormErrors(@$(".new-post-form-errors"))
# $thread = $(response.html)
# @$el.children(".threads").prepend($thread)
# @$el.children(".blank").remove()
# @$(".new-post-similar-posts").empty()
# @$(".new-post-similar-posts-wrapper").hide()
# @$(".new-post-title").val("").attr("prev-text", "")
# DiscussionUtil.setWmdContent @$el, $.proxy(@$, @), "new-post-body", ""
# @$(".new-post-tags").val("")
# @$(".new-post-tags").importTags("")
# thread = @model.addThread response.content
# threadView = new ThreadView el: $thread[0], model: thread
# thread.updateInfo response.annotated_content_info
# @cancelNewPost()
@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) ->
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 {
}
}
.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 {
......
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,16 +23,18 @@
<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>
......
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