Moved discussion thread html to its own template and only scroll when not in view.

common/lib/xmodule/xmodule/annotatable_module.py

@@ -63,15 +63,11 @@ class AnnotatableModule(XModule):
 
     def _get_discussion_html(self, discussion_id, discussion_title):
         """ Returns html to display the discussion thread """
-
-        tpl = u'<div class="annotatable-discussion" data-discussion-id="{0}">'
-        tpl += '<div class="annotatable-icon"> </div>'
-        tpl += '<span class="annotatable-discussion-label">Guided Discussion: </span>'
-        tpl += '<span class="annotatable-discussion-thread">{1}</span>'
-        tpl += '<a class="annotatable-show-discussion" href="javascript:void(0);">Show Discussion</a>'
-        tpl += '</div>'
-  
-        return tpl.format(discussion_id, discussion_title)
+        context = {
+                   'discussion_id': discussion_id,
+                   'discussion_title': discussion_title
+        }
+        return self.system.render_template('annotatable_discussion.html', context)
     
     def _attach_discussion(self, span, index, xmltree):
         """ Attaches a discussion thread to the annotation span. """

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -59,13 +59,34 @@ class @Annotatable
         $(@discussionSelector, @el).not(el).toggleClass('opaque', state)
 
     scrollToDiscussion: (el) ->
+        padding = 20
         complete = @makeHighlighter(el)
-        top = el.offset().top - 20 # with some padding
+        animOpts = {
+            scrollTop : el.offset().top - padding
+        }
+        
+        if @canScrollToDiscussion(el)
+            $('html, body').animate(animOpts, 500, 'swing', complete)
+        else
+            complete()
+
+    canScrollToDiscussion: (el) ->
+        scrollTop = el.offset().top
+        docHeight = $(document).height()
+        winHeight = $(window).height()
+        winScrollTop = window.scrollY
+
+        viewStart = winScrollTop
+        viewEnd = winScrollTop + (.75 * winHeight)
+        inView = viewStart < scrollTop < viewEnd
+
+        scrollable = !inView
+        atDocEnd = viewStart + winHeight >= docHeight
 
-        $('html, body').animate({ scrollTop: top }, 750, 'swing', complete)
+        return (if atDocEnd then false else scrollable)
     
     makeHighlighter: (el) ->
-        return @_once -> el.effect('highlight', {}, 750)
+        return @_once -> el.effect('highlight', {}, 500)
             
     _once: (fn) ->
         done = false

lms/templates/annotatable_discussion.html

+<div class="annotatable-discussion" data-discussion-id="${discussion_id}">
+    <div class="annotatable-icon"> </div>
+    <span class="annotatable-discussion-label">Guided Discussion: </span>
+    <span class="annotatable-discussion-thread">${discussion_title}</span>
+    <a class="annotatable-show-discussion" href="javascript:void(0);">Show Discussion</a>
+</div>