Saving work in progress on v2 with capa template for annotation problem.

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

@@ -13,7 +13,6 @@
     border-radius: 3px;
     .annotatable-toggle {
       position: absolute;
-      top: 0;
       right: 30px;
     }
     .annotatable-help-icon {
@@ -25,7 +24,9 @@
       height: 17px;
       background: url(../images/info-icon.png) no-repeat;
     }
-    .annotatable-toggle, .annotatable-help-icon { margin: 2px 7px 2px 0; }
+    .annotatable-toggle, .annotatable-help-icon {
+      margin: 2px 7px 2px 0;
+    }
   }
 }
 
@@ -159,16 +160,12 @@
 
 .ui-tooltip.qtip.ui-tooltip-annotatable {
   max-width: 375px;
-  .ui-tooltip-title:before { 
-    font-weight: normal;
-    content: "Guided Discussion: ";
-  }
   .ui-tooltip-content {  
     padding: 0 10px;
     .annotatable-comment {
       display: block;
       margin: 0px 0px 10px 0;
-      max-height: 225px; // truncate the text via JS so we can get an ellipsis
+      max-height: 225px;
       overflow: auto;
     }
     .annotatable-reply {

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

@@ -4,19 +4,13 @@ class @Annotatable
     wrapperSelector: '.annotatable-wrapper'
     toggleSelector:  '.annotatable-toggle'
     spanSelector:    '.annotatable-span'
-    commentSelector: '.annotatable-comment'
     replySelector:   '.annotatable-reply'
     helpSelector:    '.annotatable-help-icon'
     returnSelector:  '.annotatable-return'
-    problemSelector: '.annotatable-problem'
-    problemSubmitSelector: '.annotatable-problem-submit'
-    problemTagSelector: '.annotatable-problem-tags > li'
 
     discussionXModuleSelector: '.xmodule_DiscussionModule'
     discussionSelector:        '.discussion-module'
 
-    commentMaxLength: 750 # Max length characters to show in the comment hover state
-
     constructor: (el) ->
         console.log 'loaded Annotatable' if @_debug
         @el = el
@@ -28,6 +22,7 @@ class @Annotatable
     init: () ->
         @initEvents()
         @initTips()
+        @initDiscussion()
 
     initEvents: () ->
         @annotationsHidden = false
@@ -35,13 +30,9 @@ class @Annotatable
         @$(@wrapperSelector).delegate @replySelector, 'click', @onClickReply
         $(@discussionXModuleSelector).delegate @returnSelector, 'click', @onClickReturn
 
-        problemSelector = @problemSelector
-        @$(@problemSubmitSelector).bind 'click', (e) ->
-            $(this).closest(problemSelector).next().show()
-
-        @$(@problemTagSelector).bind 'click', (e) ->
-            $(this).toggleClass('selected')
-
+    initDiscussion: () ->
+        1
+  
     initTips: () ->
         @savedTips = []
         @$(@spanSelector).each (index, el) => $(el).qtip(@getTipOptions el)
@@ -86,13 +77,11 @@ class @Annotatable
     onClickReply: (e) =>
         e.preventDefault()
 
-        discussion_el = @getInlineDiscussion e.currentTarget
-        return_el = discussion_el.prev(@returnSelector)
-
-        if return_el.length == 1
-            @scrollTo(return_el, () -> @afterScrollToDiscussion(discussion_el))
+        problem_el = @getProblemEl e.currentTarget
+        if problem_el.length == 1
+            @scrollTo(problem_el, @afterScrollToProblem)
         else
-            @scrollTo(discussion_el, @afterScrollToDiscussion)
+            console.log 'Problem not found! Event: ', e
 
     onClickReturn: (e) =>
         e.preventDefault()
@@ -103,15 +92,24 @@ class @Annotatable
         @scrollTo(el, @afterScrollToSpan, offset)
 
     getSpan: (el) ->
-        discussion_id = @getDiscussionId(el)
-        @$(@spanSelector).filter("[data-discussion-id='#{discussion_id}']")
+        span_id = @getSpanId(el)
+        @$(@spanSelector).filter("[data-span-id='#{span_id}']")
     
-    getInlineDiscussion: (el) ->
-        discussion_id = @getDiscussionId(el)
+    getDiscussion: (el) ->
+        discussion_id = @getDiscussionId()
         $(@discussionXModuleSelector).find(@discussionSelector).filter("[data-discussion-id='#{discussion_id}']")
 
-    getDiscussionId: (el) ->
-        $(el).data('discussion-id')
+    getProblem: (el) ->
+        el # TODO
+
+    getProblemId: (el) ->
+        $(el).data('problem-id')
+
+    getSpanId: (el) ->
+        $(el).data('span-id')
+        
+    getDiscussionId: () ->
+        @$(@wrapperSelector).data('discussion-id')
 
     toggleAnnotations: () ->
         hide = (@annotationsHidden = not @annotationsHidden)
@@ -144,30 +142,32 @@ class @Annotatable
         btn = $('.discussion-show', discussion_el)
         btn.click() if !btn.hasClass('shown')
 
+    afterScrollToProblem: (problem_el) ->
+        problem_el.effect 'highlight', {}, 500
+
     afterScrollToSpan: (span_el) ->
         span_el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000
 
     makeTipContent: (el) ->
         (api) =>
-            discussion_id = @getDiscussionId(el)
-            comment = $(@commentSelector, el).first().clone()
-            text = @_truncate comment.text().trim(), @commentMaxLength
-            comment.text(text)
-            if discussion_id
-                comment = comment.after(@createReplyLink discussion_id)
-            comment
+            text = $(el).data('comment-body')
+            comment = @createCommentEl(text)
+            reply = @createReplyLink('dummy-problem-id')
+            $(comment).add(reply)
 
     makeTipTitle: (el) ->
         (api) =>
-            comment = $(@commentSelector, el).first()
-            title = comment.attr('title')
+            title = $(el).data('comment-title')
             (if title then title else 'Commentary')
 
-    createReplyLink: (discussion_id) ->
-        $("<a class=\"annotatable-reply\" href=\"javascript:void(0);\" data-discussion-id=\"#{discussion_id}\">See Full Discussion</a>")
+    createCommentEl: (text) ->
+        $("<div class=\"annotatable-comment\">#{text}</div>")
+
+    createReplyLink: (problem_id) ->
+        $("<a class=\"annotatable-reply\" href=\"javascript:void(0);\" data-problem-id=\"#{problem_id}\">Reply to Annotation</a>")
 
-    createReturnLink: (discussion_id) ->
-        $("<a class=\"annotatable-return\" href=\"javascript:void(0);\" data-discussion-id=\"#{discussion_id}\">Return to annotation</a>")
+    createReturnLink: (span_id) ->
+        $("<a class=\"annotatable-return\" href=\"javascript:void(0);\" data-span-id=\"#{span_id}\">Return to annotation</a>")
 
     openSavedTips: () ->
         @showTips @savedTips
@@ -200,10 +200,4 @@ class @Annotatable
         done = false
         return =>
             fn.call this unless done
-            done = true
-
+            done = true
\ No newline at end of file
-    _truncate: (text = '', limit) ->
-        if text.length > limit
-            text.substring(0, limit - 1).split(' ').slice(0, -1).join(' ') + '...' # truncate on word boundary
-        else
-            text

lms/templates/annotatable.html

-<%namespace name="annotatable" file="annotatable_problem.html"/>
-
-<div class="annotatable-wrapper" id="${element_id}-wrapper">
+<div class="annotatable-wrapper" data-discussion-id="${discussion_id}">
 	<div class="annotatable-header">
 		% if display_name is not UNDEFINED and display_name is not None:
 		  <div class="annotatable-title">${display_name} </div>
 		% endif
 		<div class="annotatable-description">
-                ${problem_name}
-				<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
+                Guided Discussion
+				<a class="annotatable-toggle" href="javascript:void(0)">Hide Annotations</a>
                 <div class="annotatable-help-icon" title="Move your cursor over the highlighted areas to display annotations. Discuss the annotations in the forums using the link at the bottom of the annotation. You may hide annotations at any time by using the button at the top of the section."></div>
         </div>
 	</div>
-	
-	<div class="annotatable-content">${html_content}</div>
-
+	<div class="annotatable-content">${content_html}</div>
+</div>
\ No newline at end of file
-    % if render_as_problems:
-        <div class="annotatable-problems">
-            % for item in items:
-                ${annotatable.render_problem(item['problem'],loop.index,len(items))}
-                % if item['discussion']:
-                    <div class="annotatable-discussion">${item['discussion']['content']}</div>
-                % endif
-            % endfor
-        </div>
-    % else:
-        <div class="annotatable-discussions">
-        % for item in items:
-            <div class="annotatable-discussion">
-                <a class="annotatable-return" href="javascript:void(0);" data-discussion-id="${item['discussion']['discussion_id']}">Return to annotation</a>
-                ${item['discussion']['content']}
-            </div>
-        % endfor
-        </div>
-    % endif
-</div>