diff --git a/lms/static/coffee/src/discussion/discussion_router.coffee b/lms/static/coffee/src/discussion/discussion_router.coffee index 2db4720c3e..4dc599898a 100644 --- a/lms/static/coffee/src/discussion/discussion_router.coffee +++ b/lms/static/coffee/src/discussion/discussion_router.coffee @@ -10,6 +10,9 @@ class @DiscussionRouter extends Backbone.Router @nav.on "threads:rendered", @setActiveThread @nav.render() + @newPostView = new NewPostView(el: $(".new-post-article"), collection: @discussion) + @newPostView.on "thread:created", @navigateToThread + allThreads: -> # TODO: Do something reasonable here $(".discussion-column").html("No thread selected.") diff --git a/lms/static/coffee/src/discussion/views/new_post_view.coffee b/lms/static/coffee/src/discussion/views/new_post_view.coffee new file mode 100644 index 0000000000..fd0806af80 --- /dev/null +++ b/lms/static/coffee/src/discussion/views/new_post_view.coffee @@ -0,0 +1,162 @@ +class @NewPostView extends Backbone.View + + initialize: () -> + @dropdownButton = @$(".topic_dropdown_button") + @topicMenu = @$(".topic_menu_wrapper") + + @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) + ' ▾') + + getFullTopicName: (topicElement) -> + name = topicElement.html() + topicElement.parents('ul').not('.topic_menu').each -> + name = $(this).siblings('a').html() + ' / ' + name + return name + + getNameWidth: (name) -> + test = $("
") + 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) -> + 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', @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 response + 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 + @collection.trigger "reset" + @trigger "thread:created", thread.id + + #@$el.children(".threads").prepend($thread) + # no idea what this is + #@$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() diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 79fe108222..0d7453e5ad 100644 --- a/lms/static/sass/_discussion.scss +++ b/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 { @@ -429,7 +430,7 @@ body.discussion { opacity: 0; } - &.is-dropped { + &.dropped { .browse-topic-drop-btn { span { @@ -442,13 +443,13 @@ body.discussion { } } - &.is-dropped { + &.dropped { .browse-topic-drop-btn { background-color: #616161; } } - &.is-dropped { + &.dropped { .browse-topic-drop-icon { background-position: 0 -16px; } diff --git a/lms/templates/courseware/course_navigation.html b/lms/templates/courseware/course_navigation.html index 5df09207b1..27dca4363e 100644 --- a/lms/templates/courseware/course_navigation.html +++ b/lms/templates/courseware/course_navigation.html @@ -46,7 +46,7 @@ def url_class(url): % if staff_access:
  • Instructor
    • % endif - + <%block name="extratabs" />
    diff --git a/lms/templates/discussion/_discussion_course_navigation.html b/lms/templates/discussion/_discussion_course_navigation.html new file mode 100644 index 0000000000..13b291196b --- /dev/null +++ b/lms/templates/discussion/_discussion_course_navigation.html @@ -0,0 +1,5 @@ +<%inherit file="../courseware/course_navigation.html" /> + +<%block name="extratabs"> +
  • New Post
    • + \ No newline at end of file diff --git a/lms/templates/discussion/_new_post.html b/lms/templates/discussion/_new_post.html index 5b6be085e3..b008c2d162 100644 --- a/lms/templates/discussion/_new_post.html +++ b/lms/templates/discussion/_new_post.html @@ -9,7 +9,7 @@ <%def name="render_entry(entries, entry)"> -
  • ${entry}
    • +
  • ${entry}
    • <%def name="render_category(categories, category)"> @@ -23,24 +23,26 @@
    +
    +
    - Homework / Week 1 ▾ -
    -
    + Homework / Week 1 ▾ +
    +
    -
      +
        ${render_form_filter_dropdown(category_map)}
    - +
    - +
    diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index ed8cb765f2..182aacd82d 100644 --- a/lms/templates/discussion/index.html +++ b/lms/templates/discussion/index.html @@ -17,7 +17,7 @@ <%static:js group='discussion'/> -<%include file="../courseware/course_navigation.html" args="active_page='discussion'" /> +<%include file="_discussion_course_navigation.html" args="active_page='discussion'" /> <%include file="_new_post.html" /> diff --git a/lms/templates/discussion/single_thread.html b/lms/templates/discussion/single_thread.html index ee1ef9c269..507c24f6d6 100644 --- a/lms/templates/discussion/single_thread.html +++ b/lms/templates/discussion/single_thread.html @@ -20,38 +20,7 @@ - +<%include file="_discussion_course_navigation.html" args="active_page='discussion'"/> <%include file="_new_post.html" />