New post form on inline discussion, works, with some bugs in styling.
This commit is contained in:
Ibrahim Awwal
@@ -2,7 +2,20 @@ if Backbone?
|
||||
class @DiscussionModuleView extends Backbone.View
|
||||
events:
|
||||
"click .discussion-show": "toggleDiscussion"
|
||||
"click .new-post-btn": "toggleNewPost"
|
||||
"click .new-post-cancel": "hideNewPost"
|
||||
initialize: ->
|
||||
|
||||
toggleNewPost: (event) ->
|
||||
if @newPostForm.is(':hidden')
|
||||
@newPostForm.slideDown(300)
|
||||
else
|
||||
@newPostForm.slideUp(300)
|
||||
hideNewPost: (event) ->
|
||||
@newPostForm.slideUp(300)
|
||||
|
||||
toggleDiscussion: (event) ->
|
||||
console.log "doing stuff yo"
|
||||
if @showed
|
||||
@$("section.discussion").hide()
|
||||
$(event.target).html("Show Discussion")
|
||||
@@ -22,18 +35,25 @@ if Backbone?
|
||||
url: url
|
||||
type: "GET"
|
||||
dataType: 'json'
|
||||
success: (response, textStatus) =>
|
||||
window.user = new DiscussionUser(response.user_info)
|
||||
Content.loadContentInfos(response.annotated_content_info)
|
||||
$(event.target).html("Hide Discussion")
|
||||
discussion = new Discussion()
|
||||
discussion.reset(response.discussion_data, {silent: false})
|
||||
$discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data})
|
||||
$(".discussion-module").append($discussion)
|
||||
discussion.each (thread) ->
|
||||
element = $("article#thread_#{thread.id}")
|
||||
dtv = new DiscussionThreadInlineView el: element, model: thread
|
||||
dtv.render()
|
||||
DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info)
|
||||
@retrieved = true
|
||||
@showed = true
|
||||
success: (response, textStatus, jqXHR) => @createDiscussion(event, response, textStatus)
|
||||
|
||||
createDiscussion: (event, response, textStatus) =>
|
||||
console.log "HI"
|
||||
console.log response
|
||||
window.user = new DiscussionUser(response.user_info)
|
||||
Content.loadContentInfos(response.annotated_content_info)
|
||||
console.log "infod"
|
||||
$(event.target).html("Hide Discussion")
|
||||
discussion = new Discussion()
|
||||
discussion.reset(response.discussion_data, {silent: false})
|
||||
$discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data})
|
||||
$(".discussion-module").append($discussion)
|
||||
@newPostForm = $('.new-post-article')
|
||||
discussion.each (thread) ->
|
||||
element = $("article#thread_#{thread.id}")
|
||||
dtv = new DiscussionThreadInlineView el: element, model: thread
|
||||
dtv.render()
|
||||
DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info)
|
||||
@newPostView = new NewPostInlineView el: $('.new-post-article'), collection: discussion
|
||||
@retrieved = true
|
||||
@showed = true
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
class @NewPostInlineView extends Backbone.View
|
||||
|
||||
initialize: () ->
|
||||
|
||||
@topicId = @$(".topic").first().data("discussion_id")
|
||||
|
||||
@maxNameWidth = 100
|
||||
|
||||
DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "new-post-body"
|
||||
@$(".new-post-tags").tagsInput DiscussionUtil.tagsInputOptions()
|
||||
|
||||
events:
|
||||
"submit .new-post-form": "createPost"
|
||||
|
||||
# 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()
|
||||
|
||||
createPost: (event) ->
|
||||
event.preventDefault()
|
||||
title = @$(".new-post-title").val()
|
||||
body = @$(".new-post-body").find(".wmd-input").val()
|
||||
tags = @$(".new-post-tags").val()
|
||||
|
||||
anonymous = false || @$("input.discussion-anonymous").is(":checked")
|
||||
follow = false || @$("input.discussion-follow").is(":checked")
|
||||
|
||||
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) =>
|
||||
# TODO: Move this out of the callback, this makes it feel sluggish
|
||||
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
|
||||
@@ -1472,14 +1472,10 @@ body.discussion {
|
||||
}
|
||||
|
||||
.discussion-module {
|
||||
@extend .discussion-body
|
||||
}
|
||||
@extend .discussion-body;
|
||||
|
||||
/* For some reason I have to do this to get the SCSS to compile, can't stick it under the above .discussion-module */
|
||||
.discussion-module {
|
||||
section.discussion {
|
||||
/* Course content p has a default margin-bottom of 1.416, this is just to reset that */
|
||||
|
||||
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
|
||||
.discussion-thread {
|
||||
padding: 0.5em;
|
||||
|
||||
@@ -1535,5 +1531,161 @@ body.discussion {
|
||||
}
|
||||
}
|
||||
|
||||
.new-post-article {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
|
||||
.inner-wrapper {
|
||||
max-width: 1180px;
|
||||
min-width: 760px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.new-post-form {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, .55);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5);
|
||||
@include clearfix;
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.new-post-body .wmd-input {
|
||||
@include discussion-wmd-input;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
z-index: 1;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background: #fff;
|
||||
font-family: 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
|
||||
}
|
||||
|
||||
.new-post-body .wmd-preview {
|
||||
@include discussion-wmd-preview;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//height: 50px;
|
||||
margin-top: -1px;
|
||||
padding: 25px 20px 10px 20px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #333;
|
||||
border-radius: 0 0 3px 3px;
|
||||
background: #e6e6e6;
|
||||
color: #333;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
|
||||
}
|
||||
|
||||
.new-post-preview-label {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.new-post-title,
|
||||
.new-post-tags {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #333;
|
||||
font-size: 16px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #333;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
|
||||
}
|
||||
|
||||
.new-post-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.submit {
|
||||
@include blue-button;
|
||||
float: left;
|
||||
height: 37px;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 2px;
|
||||
border-color: #333;
|
||||
|
||||
&:hover {
|
||||
border-color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
.new-post-cancel {
|
||||
@include white-button;
|
||||
float: left;
|
||||
margin: 10px 0 0 15px;
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 40px;
|
||||
|
||||
label {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
.wmd-button {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.wmd-button span {
|
||||
background: url(../images/new-post-icons-full.png) no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.thread-tags {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.thread-tag {
|
||||
padding: 3px 10px 6px;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
background: #c5eeff;
|
||||
border: 1px solid #90c4d7;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.thread-title {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.new-post-btn {
|
||||
@include blue-button;
|
||||
font-size: 13px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.new-post-icon {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
margin: 8px 7px 0 0;
|
||||
background: url(../images/new-post-icon.png) no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<%include file="_underscore_templates.html" />
|
||||
|
||||
<div class="discussion-module">
|
||||
<a class="discussion-show control-button" href="javascript:void(0)" discussion_id="${discussion_id | h}">Show Discussion</a>
|
||||
<a class="discussion-show control-button" href="javascript:void(0)" discussion_id="${discussion_id | h}">Show Discussion</a>
|
||||
</div>
|
||||
|
||||
29
lms/templates/discussion/_inline_new_post.html
Normal file
29
lms/templates/discussion/_inline_new_post.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<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">
|
||||
<div class="options">
|
||||
<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="anonymous" class="discussion-anonymous" id="new-post-anonymous"><label for="new-post-anonymous">post anonymously</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-column">
|
||||
<div class="form-row">
|
||||
<input type="text" class="new-post-title" name="title" placeholder="Title">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="new-post-body" name="body" placeholder="Enter your question or comment…"></div>
|
||||
<!---<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>-->
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<input type="text" class="new-post-tags" name="tags" placeholder="Tags">
|
||||
</div>
|
||||
<input type="submit" class="submit" value="Add post">
|
||||
<a href="#" class="new-post-cancel">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
@@ -1,6 +1,37 @@
|
||||
<section class="discussion">
|
||||
{{#threads}}
|
||||
<a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
|
||||
|
||||
<article class="new-post-article">
|
||||
<div class="inner-wrapper">
|
||||
<div class="new-post-form-errors">
|
||||
</div>
|
||||
<form class="new-post-form">
|
||||
<div class="right-column">
|
||||
<div class="form-row">
|
||||
<input type="text" class="new-post-title" name="title" placeholder="Title">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="new-post-body" name="body" placeholder="Enter your question or comment…"></div>
|
||||
<!---<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>-->
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<input type="text" class="new-post-tags" name="tags" placeholder="Tags">
|
||||
</div>
|
||||
<input type="submit" class="submit" value="Add post">
|
||||
<a href="#" class="new-post-cancel">Cancel</a>
|
||||
<div class="options">
|
||||
<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="anonymous" class="discussion-anonymous" id="new-post-anonymous"><label for="new-post-anonymous">post anonymously</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
{{#threads}}
|
||||
<article class="discussion-thread" id="thread_{{id}}">
|
||||
</article>
|
||||
{{/threads}}
|
||||
{{/threads}}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user