new post 'works'
This commit is contained in:
Arjun Singh
@@ -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"
|
||||
@menuOpen = @dropdownButton.hasClass('dropped')
|
||||
|
||||
#toggleTopicDropdown: (event) ->
|
||||
# if $target.hasClass('dropped')
|
||||
# @showTopicDropdown()
|
||||
# else
|
||||
# @hideTopicDropdown()
|
||||
#
|
||||
#showTopicDropdown: () ->
|
||||
# #$button =
|
||||
# $button.addClass('dropped')
|
||||
@topicId = @$(".topic").first().data("discussion_id")
|
||||
@topicText = @getFullTopicName(@$(".topic").first())
|
||||
|
||||
# $topicMenu = @$(".topic_menu")
|
||||
# $topicMenu.show()
|
||||
@setSelectedTopic()
|
||||
|
||||
#createPost: (event) ->
|
||||
# event.preventDefault()
|
||||
events:
|
||||
"submit .new-post-form": "createPost"
|
||||
"click .topic_dropdown_button": "toggleTopicDropdown"
|
||||
"click .topic_menu_wrapper": "setTopic"
|
||||
"click .topic_menu_search": "ignoreClick"
|
||||
|
||||
# title = @$(".new-post-title").val()
|
||||
# body = @$(".new-post-body").val()
|
||||
# tags = @$(".new-post-tags").val()
|
||||
# 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()
|
||||
|
||||
# anonymous = false || @$("input.discussion-anonymous").is(":checked")
|
||||
# follow = false || @$("input.discussion-follow").is(":checked")
|
||||
toggleTopicDropdown: (event) ->
|
||||
event.stopPropagation()
|
||||
if @menuOpen
|
||||
@hideTopicDropdown()
|
||||
else
|
||||
@showTopicDropdown()
|
||||
|
||||
showTopicDropdown: () ->
|
||||
console.log "showing"
|
||||
@menuOpen = true
|
||||
@dropdownButton.addClass('dropped')
|
||||
@topicMenu.show()
|
||||
|
||||
# $formTopicDropBtn.bind('click', showFormTopicDrop);
|
||||
# $formTopicDropMenu.bind('click', setFormTopic);
|
||||
$('body').bind 'click', @hideTopicDropdown
|
||||
|
||||
# url = DiscussionUtil.urlFor('create_thread', @model.id)
|
||||
# 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
|
||||
|
||||
# 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()
|
||||
# Need a fat arrow because hideTopicDropdown is passed as a callback to bind
|
||||
hideTopicDropdown: () =>
|
||||
@menuOpen = false
|
||||
@dropdownButton.removeClass('dropped')
|
||||
@topicMenu.hide()
|
||||
|
||||
# @$(".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("")
|
||||
$('body').unbind 'click', @hideTopicDropdown
|
||||
|
||||
# thread = @model.addThread response.content
|
||||
# threadView = new ThreadView el: $thread[0], model: thread
|
||||
# thread.updateInfo response.annotated_content_info
|
||||
# @cancelNewPost()
|
||||
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()
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user