collapse / expand discussion entries

also:

- counts in side-comment "show all [n] replies"
  are now accurate
- moved lock/unlock into the cog menu
- moved the cog menu into the toolbar

test plan:
1. go to a discussion
2. click "collapse" in the toolbar
   - the root entries should collapse
   - the page should scroll to the entries
3. expand a single reply
   - the reply's replies should NOT be collapsed
4. click a page number
   - the newly rendered entries should be
     collapsed
5. click expand
   - all the root entries should expand
6. click a page link
   - all the entries should be expanded
7. lock and unlock should still work
8. Go to a side comment discussion
   - "show all [n] replies" should have an
     accurate count

Change-Id: Ia06fad173344c549d31b7cd51d4ecc57d2e40d5f
Reviewed-on: https://gerrit.instructure.com/15834
Tested-by: Jenkins <[email protected]>
Reviewed-by: Jon Jensen <[email protected]>
QA-Review: Cam Theriault <[email protected]>

Author: Ryan Florence

app/coffeescripts/bundles/discussion.coffee

@@ -1,4 +1,5 @@
 require [
+  'compiled/views/DiscussionTopic/EntryView'
   'compiled/models/DiscussionFilterState'
   'compiled/views/DiscussionTopic/DiscussionToolbarView'
   'compiled/views/DiscussionTopic/DiscussionFilterResultsView'
@@ -11,7 +12,8 @@ require [
   'compiled/collections/EntryCollection'
   'compiled/views/DiscussionTopic/TopicView'
   'compiled/views/DiscussionTopic/EntriesView'
-], (DiscussionFilterState, DiscussionToolbarView, DiscussionFilterResultsView, MarkAsReadWatcher, $, Backbone, Entry, MaterializedDiscussionTopic, SideCommentDiscussionTopic, EntryCollection, TopicView, EntriesView) ->
+  'compiled/jquery/sticky'
+], (EntryView, DiscussionFilterState, DiscussionToolbarView, DiscussionFilterResultsView, MarkAsReadWatcher, $, Backbone, Entry, MaterializedDiscussionTopic, SideCommentDiscussionTopic, EntryCollection, TopicView, EntriesView) ->
 
   perPage     = 10
   descendants = 3
@@ -52,31 +54,54 @@ require [
                     allData: data
                     model: filterModel
 
+  $container = $ window
+  $subentries = $ '#discussion_subentries'
+
+
+  scrollToTop = ->
+    $container.scrollTo $subentries, offset: -49
+
   ##
   # connect them ...
   data.on 'change', ->
     entries.reset data.get 'entries'
 
   entriesView.on 'scrollAwayFromEntry', ->
-    $window = $ window
     # prevent scroll to top for non-pushstate browsers when hash changes
-    top = $window.scrollTop()
+    top = $container.scrollTop()
     router.navigate '',
       trigger: false
       replace: true
-    $window.scrollTo top
+    $container.scrollTo top
 
   filterView.on 'clickEntry', (entry) ->
     router.navigate "entry-#{entry.get 'id'}", yes
 
+  toolbarView.on 'expandAll', ->
+    EntryView.expandRootEntries()
+    scrollToTop()
+
+  toolbarView.on 'collapseAll', ->
+    EntryView.collapseRootEntries()
+    scrollToTop()
+
+  filterView.on 'render', ->
+    scrollToTop()
+
+  filterView.on 'hide', ->
+    scrollToTop()
+
+  filterModel.on 'reset', -> EntryView.expandRootEntries()
+
+
   ##
   # routes
   router.route '*catchall', 'catchall', -> router.navigate '', yes
   router.route 'entry-:id', 'id', entriesView.goToEntry
   router.route 'page-:page', 'page', (page) ->
     entriesView.render page
     # TODO: can get a little bouncy when the page isn't as tall as the previous
-    $(window).scrollTo '#discussion_subentries'
+    scrollToTop()
   router.route '', 'root', entriesView.render
   initEntries = ->
     data.fetch success: ->

app/coffeescripts/jquery/sticky.coffee

@@ -0,0 +1,48 @@
+define ['underscore', 'jquery'], (_, $) ->
+
+  class Sticky
+
+    @instances: []
+
+    @initialized: false
+
+    @$container = $ window
+
+    @initialize: ->
+      @$container.on 'scroll', _.debounce(@checkInstances, 10)
+      @initialized = true
+
+    @addInstance: (instance) ->
+      @initialize() unless @initialized
+      @instances.push instance
+      @checkInstances()
+
+    @checkInstances: =>
+      containerTop = @$container.scrollTop()
+      for instance in @instances
+        if containerTop >= instance.top
+          instance.stick() unless instance.stuck
+        else
+          instance.unstick() if instance.stuck
+      null
+
+    constructor: (@$el) ->
+      @top = @$el.offset().top
+      @stuck = false
+      @constructor.addInstance this
+
+    stick: ->
+      @$el.addClass 'sticky'
+      @stuck = true
+
+    unstick: ->
+      @$el.removeClass 'sticky'
+      @stuck = false
+
+  $.fn.sticky = ->
+    @each -> new Sticky $ this
+
+  $ -> $('[data-sticky]').sticky()
+
+  Sticky
+

app/coffeescripts/models/DiscussionFilterState.coffee

@@ -3,8 +3,9 @@ define ['Backbone'], ({Model}) ->
   class DiscussionFilterState extends Model
 
     defaults:
-      unread: null
+      unread: false
       query: null
+      collapsed: false
 
     hasFilter: ->
       {unread, query} = @attributes
@@ -13,3 +14,11 @@ define ['Backbone'], ({Model}) ->
       else
         no
 
+    reset: ->
+      @set
+        unread: false
+        query: null
+        collapsed: false
+      @trigger 'reset'
+
+

app/coffeescripts/views/DiscussionTopic/DiscussionFilterResultsView.coffee

@@ -48,25 +48,26 @@ define [
       @list.append view.el
 
     clearModel: =>
-      @model.set
-        unread: false
-        query: null
+      @model.reset()
 
     render: =>
       super if @collection?
+      @trigger 'render'
       @$el.removeClass 'hidden'
 
     renderOrTeardownResults: =>
       if @model.hasFilter()
         results = (entry for id, entry of @allData.flattened)
         for filter, value of @model.toJSON()
-          results = @["#{filter}Filter"](value, results)
+          filterFn = @["#{filter}Filter"]
+          results = filterFn(value, results) if filterFn
         if results.length
           @resetCollection results
         else
           @renderNoResults()
-      else
-        @$el.addClass 'hidden' unless @model.hasFilter()
+      else if not @model.hasFilter()
+        @$el.addClass 'hidden'
+        @trigger 'hide'
 
     renderNoResults: ->
       @render()

app/coffeescripts/views/DiscussionTopic/DiscussionToolbarView.coffee

@@ -12,10 +12,13 @@ define [
     els:
       '#discussion-search': '$searchInput'
       '#onlyUnread': '$unread'
+      '.disableWhileFiltering': '$disableWhileFiltering'
 
     events:
       'keyup #discussion-search': 'filterBySearch'
       'change #onlyUnread': 'toggleUnread'
+      'click #collapseAll': 'collapseAll'
+      'click #expandAll': 'expandAll'
 
     initialize: ->
       @model.on 'change', @clearInputs
@@ -30,17 +33,32 @@ define [
       @$searchInput.val ''
       @$unread.prop 'checked', false
       @$unread.button 'refresh'
+      @maybeDisableFields()
 
     filterBySearch: _.debounce ->
       value = @$searchInput.val()
       value = null if value is ''
       @model.set 'query', value
+      @maybeDisableFields()
     , 250
 
     toggleUnread: ->
       # setTimeout so the ui can update the button before the rest
       # do expensive stuff
+
       setTimeout =>
         @model.set 'unread', @$unread.prop 'checked'
+        @maybeDisableFields()
       , 50
 
+    collapseAll: ->
+      @model.set 'collapsed', true
+      @trigger 'collapseAll'
+
+    expandAll: ->
+      @model.set 'collapsed', false
+      @trigger 'expandAll'
+
+    maybeDisableFields: ->
+      @$disableWhileFiltering.attr 'disabled', @model.hasFilter()
+

app/coffeescripts/views/DiscussionTopic/EntriesView.coffee

@@ -15,8 +15,6 @@ define [
       showMoreDescendants: 2
       children: 3
 
-    $body: $ 'body:first'
-
     $window: $ window
 
     initialize: ->
@@ -98,8 +96,8 @@ define [
       @goToEntry entryData
 
     scrollToEl: ($el) ->
-      @$body.scrollTo $el, 200,
-        offset: -100
+      @$window.scrollTo $el, 200,
+        offset: -150
         onAfter: =>
           # pretty blinking
           setTimeout (-> $el.addClass 'highlight' ), 200
@@ -128,6 +126,7 @@ define [
         displayShowMore: no
         threaded: @options.threaded
         root: true
+        collapsed: @model.get 'collapsed'
       @collectionView.render()
       @renderPageNav()
       this

app/coffeescripts/views/DiscussionTopic/EntryCollectionView.coffee

@@ -16,7 +16,7 @@ define [
       displayShowMore: true
 
       # maybe make a sub-class for threaded discussions if the branching gets
-      # out of control
+      # out of control. UPDATE: it is out of control
       threaded: false
 
       # its collection represents the root of the discussion, should probably
@@ -52,6 +52,7 @@ define [
         children: @collection.options.perPage
         showMoreDescendants: @options.showMoreDescendants
         threaded: @options.threaded
+        collapsed: @options.collapsed
       view.render()
       return @addNewView view if entry.get 'new'
       if @options.descendants
@@ -90,7 +91,10 @@ define [
       @nextLink = $ '<div/>'
       showMore = true
       if not @options.threaded
-        moreText = I18n.t('show_all_n_replies', {one: "Show one reply", other: "Show all %{count} replies"}, {count: stats.total})
+        moreText = I18n.t 'show_all_n_replies',
+          one: "Show one reply"
+          other: "Show all %{count} replies"
+          {count: stats.total + @collection.options.perPage}
       @nextLink.html entryStats({stats, moreText, showMore: yes})
       @nextLink.addClass 'showMore loadNext'
       if @options.threaded

app/coffeescripts/views/DiscussionTopic/EntryView.coffee

@@ -1,4 +1,5 @@
 define [
+  'underscore'
   'i18n!discussions'
   'compiled/discussions/MarkAsReadWatcher'
   'compiled/arr/walk'
@@ -15,10 +16,21 @@ define [
   'compiled/str/convertApiUserContent'
   'jst/_avatar'
   'jst/discussions/_reply_form'
-], (I18n, MarkAsReadWatcher, walk, Backbone, EntryCollection, entryContentPartial, deletedEntriesTemplate, entryWithRepliesTemplate, entryStats, Reply, EntryEditor, htmlEscape, {publish}, convertApiUserContent) ->
+], (_, I18n, MarkAsReadWatcher, walk, Backbone, EntryCollection, entryContentPartial, deletedEntriesTemplate, entryWithRepliesTemplate, entryStats, Reply, EntryEditor, htmlEscape, {publish}, convertApiUserContent) ->
 
   class EntryView extends Backbone.View
 
+    @instances = {}
+
+    @collapseRootEntries = ->
+      _.each @instances, (view) ->
+        view.collapse() unless view.model.get 'parent'
+
+    @expandRootEntries = ->
+      _.each @instances, (view) ->
+        view.expand() unless view.model.get 'parent'
+
+
     els:
       '.discussion_entry:first': '$entryContent'
       '.replies:first': '$replies'
@@ -42,6 +54,7 @@ define [
 
     initialize: ->
       super
+      @constructor.instances[@cid] = this
       @$el.attr 'id', "entry-#{@model.get 'id'}"
       @model.on 'change:deleted', @toggleDeleted
       @model.on 'change:read_state', @toggleReadState
@@ -75,6 +88,13 @@ define [
       @addCountsToHeader() unless @addedCountsToHeader
       @$el.toggleClass 'collapsed'
 
+    expand: ->
+      @$el.removeClass 'collapsed'
+
+    collapse: ->
+      @addCountsToHeader() unless @addedCountsToHeader
+      @$el.addClass 'collapsed'
+
     addCountsToHeader: ->
       stats = @countPosterity()
       html = """
@@ -91,6 +111,7 @@ define [
 
     afterRender: ->
       super
+      @collapse() if @options.collapsed
       if @model.get('read_state') is 'unread'
         @readMarker ?= new MarkAsReadWatcher this
         # this is throttled so calling it here is okay