Skip to content

E
edx-platform
Commit af2bfa9d by Arthur Barrett
Options

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

parent 610e210c
Showing with 88 additions and 270 deletions
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
_truncate: (text = '', limit) ->
if text.length > limit
text.substring(0, limit - 1).split(' ').slice(0, -1).join(' ') + '...' # truncate on word boundary
else
text
done = true
\ No newline at end of file
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>
% 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>
<div class="annotatable-content">${content_html}</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment