Commit ff94541e by Tom Giannattasio

tweaked inline hide/show and new post buttons

parent 452414da
...@@ -9,7 +9,8 @@ if Backbone? ...@@ -9,7 +9,8 @@ if Backbone?
paginationTemplate: -> DiscussionUtil.getTemplate("_pagination") paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
page_re: /\?discussion_page=(\d+)/ page_re: /\?discussion_page=(\d+)/
initialize: -> initialize: ->
# Set the page if it was set in the URL. This is used to allow deep linking to pages @toggleDiscussionBtn = @$(".discussion-show")
# Set the page if it was set in the URL. This is used to allow deep linking to pages
match = @page_re.exec(window.location.href) match = @page_re.exec(window.location.href)
if match if match
@page = parseInt(match[1]) @page = parseInt(match[1])
...@@ -18,31 +19,38 @@ if Backbone? ...@@ -18,31 +19,38 @@ if Backbone?
toggleNewPost: (event) -> toggleNewPost: (event) ->
event.preventDefault() event.preventDefault()
if @newPostForm.is(':hidden') if !@newPostForm
@toggleDiscussion()
@isWaitingOnNewPost = true;
return
if @showed
@newPostForm.slideDown(300) @newPostForm.slideDown(300)
else else
@newPostForm.slideUp(300) @newPostForm.show()
@toggleDiscussionBtn.addClass('shown')
@toggleDiscussionBtn.find('.button-text').html("Hide Discussion")
@$("section.discussion").slideDown()
@showed = true
hideNewPost: (event) -> hideNewPost: (event) ->
event.preventDefault() event.preventDefault()
@newPostForm.slideUp(300) @newPostForm.slideUp(300)
toggleDiscussion: (event) -> toggleDiscussion: (event) ->
thisButton = $(event.target).closest('a')
if @showed if @showed
@$("section.discussion").slideUp() @$("section.discussion").slideUp()
thisButton.removeClass('shown') @toggleDiscussionBtn.removeClass('shown')
thisButton.find('.button-text').html("Show Discussion") @toggleDiscussionBtn.find('.button-text').html("Show Discussion")
@showed = false @showed = false
else else
thisButton.addClass('shown') @toggleDiscussionBtn.addClass('shown')
thisButton.find('.button-text').html("Hide Discussion") @toggleDiscussionBtn.find('.button-text').html("Hide Discussion")
if @retrieved if @retrieved
@$("section.discussion").slideDown() @$("section.discussion").slideDown()
@showed = true @showed = true
else else
$elem = $(event.target) $elem = @toggleDiscussionBtn
@loadPage $elem @loadPage $elem
loadPage: ($elem)=> loadPage: ($elem)=>
...@@ -59,7 +67,7 @@ if Backbone? ...@@ -59,7 +67,7 @@ if Backbone?
renderDiscussion: ($elem, response, textStatus, discussionId) => renderDiscussion: ($elem, response, textStatus, discussionId) =>
window.user = new DiscussionUser(response.user_info) window.user = new DiscussionUser(response.user_info)
Content.loadContentInfos(response.annotated_content_info) Content.loadContentInfos(response.annotated_content_info)
$elem.html("Hide Discussion") # $elem.html("Hide Discussion")
@discussion = new Discussion() @discussion = new Discussion()
@discussion.reset(response.discussion_data, {silent: false}) @discussion.reset(response.discussion_data, {silent: false})
$discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data, 'discussionId': discussionId}) $discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data, 'discussionId': discussionId})
...@@ -77,6 +85,8 @@ if Backbone? ...@@ -77,6 +85,8 @@ if Backbone?
@retrieved = true @retrieved = true
@showed = true @showed = true
@renderPagination(2, response.num_pages) @renderPagination(2, response.num_pages)
if @isWaitingOnNewPost
@newPostForm.show()
addThread: (thread, collection, options) => addThread: (thread, collection, options) =>
# TODO: When doing pagination, this will need to repaginate. Perhaps just reload page 1? # TODO: When doing pagination, this will need to repaginate. Perhaps just reload page 1?
......
...@@ -1620,7 +1620,7 @@ body.discussion { ...@@ -1620,7 +1620,7 @@ body.discussion {
.discussion-module { .discussion-module {
@extend .discussion-body; @extend .discussion-body;
margin: 20px 0; margin: 20px 0;
padding: 20px 20px 28px 20px; padding: 20px;
background: #f6f6f6 !important; background: #f6f6f6 !important;
border-radius: 3px; border-radius: 3px;
...@@ -1634,9 +1634,8 @@ body.discussion { ...@@ -1634,9 +1634,8 @@ body.discussion {
} }
.discussion-show { .discussion-show {
display: block; position: relative;
width: 200px; top: 3px;
margin: auto;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
...@@ -1660,10 +1659,11 @@ body.discussion { ...@@ -1660,10 +1659,11 @@ body.discussion {
.new-post-btn { .new-post-btn {
display: inline-block; display: inline-block;
float: right;
} }
section.discussion { section.discussion {
margin-top: 20px; margin-top: 30px;
.threads { .threads {
margin-top: 20px; margin-top: 20px;
......
...@@ -2,4 +2,5 @@ ...@@ -2,4 +2,5 @@
<div class="discussion-module" data-discussion-id="${discussion_id | h}"> <div class="discussion-module" data-discussion-id="${discussion_id | h}">
<a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a> <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
<a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
</div> </div>
<section class="discussion" data-discussion-id="{{discussionId}}"> <section class="discussion" data-discussion-id="{{discussionId}}">
<a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
<article class="new-post-article"> <article class="new-post-article">
<span class="topic" data-discussion-id="{{discussionId}}" /> <span class="topic" data-discussion-id="{{discussionId}}" />
......
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