diff --git a/common/lib/xmodule/xmodule/annotatable_module.py b/common/lib/xmodule/xmodule/annotatable_module.py
index f4c1d80408..2818efd7ce 100644
--- a/common/lib/xmodule/xmodule/annotatable_module.py
+++ b/common/lib/xmodule/xmodule/annotatable_module.py
@@ -50,18 +50,13 @@ class AnnotatableModule(XModule):
del span.attrib['discussion']
def _decorate_span(self, span, index, xmltree):
- """ Decorates the span highlight. """
+ """ Adds a highlight class to the span. """
cls = ['annotatable-span', 'highlight']
marker = self._get_marker_color(span)
if marker is not None:
cls.append('highlight-'+marker)
- icon = etree.Element('span', { 'class': 'annotatable-icon ss-icon ss-textchat' })
- icon.append(etree.Entity('#xE396'))
- icon.tail = span.text
- span.text = ''
- span.insert(0, icon)
span.set('class', ' '.join(cls))
span.tag = 'div'
@@ -79,7 +74,7 @@ class AnnotatableModule(XModule):
comment.set('class', 'annotatable-comment')
def _get_marker_color(self, span):
- """ Returns the name of the marker color for the span if it is valid, otherwise none."""
+ """ Returns the name of the marker/highlight color for the span if it is valid, otherwise none."""
valid_markers = ['yellow', 'orange', 'purple', 'blue', 'green']
if 'marker' in span.attrib:
@@ -88,7 +83,7 @@ class AnnotatableModule(XModule):
if marker in valid_markers:
return marker
return None
-
+
def _render(self):
""" Renders annotatable content by transforming spans and adding discussions. """
@@ -98,6 +93,7 @@ class AnnotatableModule(XModule):
self._decorate_span,
self._decorate_comment
])
+ xmltree.tag = 'div'
return etree.tostring(xmltree)
@@ -120,8 +116,6 @@ class AnnotatableModule(XModule):
self.element_id = self.location.html_id();
self.content = self.definition['data']
- self.spans = {}
-
class AnnotatableDescriptor(RawDescriptor):
module_class = AnnotatableModule
diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss
index 796c204c0b..a8ad5a71ce 100644
--- a/common/lib/xmodule/xmodule/css/annotatable/display.scss
+++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss
@@ -1,13 +1,13 @@
.annotatable-header {
margin-bottom: 1em;
.annotatable-title {
- font-size: em(20);
+ font-size: em(22);
text-transform: uppercase;
padding: 2px 4px;
}
.annotatable-description {
position: relative;
- font-size: em(14);
+ font-size: $body-font-size;
padding: 2px 4px;
border: 1px solid $border-color;
border-radius: 3px;
@@ -57,7 +57,8 @@
background: url(../images/info-icon.png) no-repeat;
}
-.ui-tooltip.qtip.ui-tooltip-annotatable {
+.ui-tooltip.qtip.ui-tooltip {
+ font-size: $body-font-size;
border: 1px solid #333;
border-radius: 1em;
background-color: rgba(0,0,0,.85);
@@ -65,6 +66,7 @@
-webkit-font-smoothing: antialiased;
.ui-tooltip-titlebar {
+ font-size: em(16);
color: inherit;
background-color: transparent;
padding: 5px 10px;
@@ -85,26 +87,30 @@
}
.ui-tooltip-content {
color: inherit;
- background-color: transparent;
+ font-size: em(14);
text-align: left;
font-weight: 400;
- font-size: 11px;
- padding: 0 10px;
+ padding: 0 10px 10px 10px;
+ background-color: transparent;
}
- p { color: inherit; }
+ p {
+ color: inherit;
+ line-height: normal;
+ }
}
-.ui-tooltip.qtip.ui-tooltip-annotatable-comment {
+.ui-tooltip.qtip.ui-tooltip-annotatable {
max-width: 350px;
.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: 200px;
+ max-height: 175px;
overflow: hidden;
}
.annotatable-reply {
@@ -127,4 +133,4 @@
border: 10px solid transparent;
border-top-color: rgba(0, 0, 0, .85);
}
-}
\ No newline at end of file
+}
diff --git a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
index deaabaf738..205ee5c830 100644
--- a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
+++ b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
@@ -6,8 +6,10 @@ class @Annotatable
spanSelector: '.annotatable-span'
commentSelector: '.annotatable-comment'
replySelector: '.annotatable-reply'
+ returnSelector: '.annotatable-return'
helpSelector: '.annotatable-help-icon'
- inlineDiscussionSelector: '.xmodule_DiscussionModule .discussion-module'
+ discussionXModuleSelector: '.xmodule_DiscussionModule'
+ discussionSelector: '.discussion-module'
constructor: (el) ->
console.log 'loaded Annotatable' if @_debug
@@ -20,11 +22,13 @@ class @Annotatable
init: () ->
@initEvents()
@initTips()
+ @initDiscussionReturnLinks()
initEvents: () ->
@annotationsHidden = false
@$(@toggleSelector).bind 'click', @onClickToggleAnnotations
@$(@wrapperSelector).delegate @replySelector, 'click', @onClickReply
+ $(@discussionXModuleSelector).delegate @returnSelector, 'click', @onClickReturn
initTips: () ->
@savedTips = []
@@ -35,13 +39,12 @@ class @Annotatable
at: 'bottom left'
container: @$(@wrapperSelector)
content:
- title: 'Annotated Reading Help'
- text: "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."
- style:
- classes: 'ui-tooltip-annotatable'
+ title: 'Annotated Reading'
+ text: true # use title attribute of this element
+
+ initDiscussionReturnLinks: () ->
+ $(@discussionXModuleSelector).find(@discussionSelector).each (index, el) =>
+ $(el).after @createReturnLink(@getDiscussionId el)
getTipOptions: (el) ->
content:
@@ -62,7 +65,7 @@ class @Annotatable
hide:
event: 'unfocus'
style:
- classes: 'ui-tooltip-annotatable ui-tooltip-annotatable-comment'
+ classes: 'ui-tooltip-annotatable'
events:
show: @onShowTip
@@ -74,11 +77,20 @@ class @Annotatable
onClickReply: (e) =>
e.preventDefault()
- @scrollTo(@getInlineDiscussion e.currentTarget)
+ discussion_el = @getInlineDiscussion e.currentTarget
+ @scrollTo(discussion_el, @afterScrollToDiscussion)
+
+ onClickReturn: (e) =>
+ e.preventDefault()
+ @scrollTo(@getSpan e.currentTarget, @afterScrollToSpan)
+
+ getSpan: (el) ->
+ discussion_id = @getDiscussionId(el)
+ @$(@spanSelector).filter("[data-discussion-id='#{discussion_id}']")
getInlineDiscussion: (el) ->
discussion_id = @getDiscussionId(el)
- $(@inlineDiscussionSelector).filter("[data-discussion-id='#{discussion_id}']")
+ $(@discussionXModuleSelector).find(@discussionSelector).filter("[data-discussion-id='#{discussion_id}']")
getDiscussionId: (el) ->
$(el).data('discussion-id')
@@ -99,18 +111,19 @@ class @Annotatable
toggleSpans: (hide) ->
@$(@spanSelector).toggleClass 'hide', hide
- scrollTo: (el) ->
+ scrollTo: (el, after) ->
$('html,body').scrollTo(el, {
- duration: 500,
- onAfter: @makeAfterScroll(el)
+ duration: 500
+ #onAfter: @_once => after.call this, el
})
- makeAfterScroll: (el, duration = 1500) ->
- @_once ->
+ afterScrollToDiscussion: () ->
+ (el) ->
btn = $('.discussion-show', el)
- if !btn.hasClass('shown')
- btn.click()
- #el.effect 'highlight', {}, duration
+ btn.click() if !btn.hasClass('shown')
+
+ afterScrollToSpan: (el) ->
+ (el) -> el.effect('highlight', {}, 500)
makeTipContent: (el) ->
(api) =>
@@ -128,6 +141,9 @@ class @Annotatable
createReplyLink: (discussion_id) ->
$("See Full Discussion")
+ createReturnLink: (discussion_id) ->
+ $("Return to annotation")
+
openSavedTips: () ->
@showTips @savedTips
diff --git a/lms/templates/annotatable.html b/lms/templates/annotatable.html
index 8f379c7007..41df903265 100644
--- a/lms/templates/annotatable.html
+++ b/lms/templates/annotatable.html
@@ -4,10 +4,9 @@
${display_name}
% endif