Clicking on annotation span should scroll to the discussion widget.

common/lib/xmodule/xmodule/annotatable_module.py

@@ -26,6 +26,7 @@ class AnnotatableModule(XModule):
          }
     js_module_name = "Annotatable"
     css = {'scss': [resource_string(__name__, 'css/annotatable/display.scss')]}
+    icon_class = 'annotatable'
 
     def _is_span(self, element):
         """ Returns true if the element is a valid annotation span, false otherwise. """

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -14,9 +14,9 @@
   }
 }
 
-
 span.annotatable {
   color: $blue;
+  cursor: pointer;
   .annotatable-icon {
     margin: auto 2px auto 4px;
   }

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

@@ -1,9 +1,29 @@
 class @Annotatable
+    @_debug: true
     constructor: (el) ->
-        console.log "loaded Annotatable"
-        $(el).find(".annotatable").on "click", (e) ->
-            data = $(".annotatable-wrapper", el).data("spans")
-            span_id = e.target.getAttribute("data-span-id")
-            msg = "annotatable span clicked. discuss span [" + span_id + "] in discussion [" + data[span_id] + "]"
-            console.log data
-            window.alert msg
+        console.log 'loaded Annotatable' if @_debug
+        @el = el
+        @spandata = $('.annotatable-wrapper', @el).data "spans" 
+        @initSpans()
+
+    initSpans: () ->
+        selector = 'span.annotatable[data-span-id]'
+        $(@el).find(selector).on 'click', (e) => 
+            @onClickSpan.call this, e
+
+    onClickSpan: (e) ->
+            span_id = e.target.getAttribute('data-span-id')
+            discussion_id = @spandata[span_id]
+            selector = '.annotatable-discussion[data-discussion-id="'+discussion_id+'"]';
+            $discussion = $(selector, @el)
+            padding = 20
+            top = $discussion.offset().top - padding
+            highlighted = false
+            complete = () ->
+                if !highlighted
+                    $discussion.effect('highlight', {}, 1000)
+                    highlighted = true
+
+            $('html, body').animate({ 
+                scrollTop: top,
+            }, 1000, 'swing', complete)

lms/templates/annotatable.html

@@ -20,4 +20,4 @@ $(function() {
 });
 </script>
 
-</div>
+</div>