diff --git a/lms/static/coffee/src/discussion/views/new_post_view.coffee b/lms/static/coffee/src/discussion/views/new_post_view.coffee index 9bd3322657..67b28695a7 100644 --- a/lms/static/coffee/src/discussion/views/new_post_view.coffee +++ b/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" + @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) + ' ▾') + + 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) -> + 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() diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 6172813f8a..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 { diff --git a/lms/templates/discussion/_new_post.html b/lms/templates/discussion/_new_post.html index d84f252219..6023773a29 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,16 +23,18 @@
    +
    +
    - Homework / Week 1 ▾ -
    -
    + Homework / Week 1 ▾ +
    +
    -
      +
        ${render_form_filter_dropdown(category_map)}