Skip to content

E
edx-platform
Commit a9773eb8 by Arthur Barrett
Options

Updated markup, styling, and tooltip behavior for displaying instructor… 

Updated markup, styling, and tooltip behavior for displaying instructor comments. Added drag/drop to the comments so the user can organize them as they wish after clicking on the span. When the user hides the annotations, their positions on the screen are remembered so they can be restored later. Also modified the markup so that block content can be displayed.
parent 7ea87793
Showing with 108 additions and 50 deletions
common/lib/xmodule/xmodule/annotatable_module.py
......@@ -30,20 +30,20 @@ class AnnotatableModule(XModule):
def _is_span(self, element):
""" Returns true if the element is a valid annotation span, false otherwise. """
return element.tag == 'span' and element.get('class') == 'annotatable'
return element.get('class') == 'annotatable'
def _iterspans(self, xmltree, callbacks):
""" Iterates over span elements and invokes each callback on the span. """
""" Iterates over elements and invokes each callback on the span. """
index = 0
for element in xmltree.iter('span'):
for element in xmltree.iter():
if self._is_span(element):
for callback in callbacks:
callback(element, index, xmltree)
index += 1
def _set_span_data(self, span, index, xmltree):
""" Sets an ID and discussion anchor for the span. """
""" Sets the discussion anchor for the span. """
if 'anchor' in span.attrib:
span.set('data-discussion-anchor', span.get('anchor'))
......@@ -52,13 +52,12 @@ class AnnotatableModule(XModule):
def _decorate_span(self, span, index, xmltree):
""" Decorates the span with an icon and highlight. """
cls = ['annotatable', ]
cls = ['annotatable-span', 'highlight']
marker = self._get_marker_color(span)
if marker is None:
cls.append('highlight-yellow')
else:
if marker is not None:
cls.append('highlight-'+marker)
span.tag = 'div'
span.set('class', ' '.join(cls))
span_icon = etree.Element('span', { 'class': 'annotatable-icon'} )
span_icon.text = '';
......@@ -76,9 +75,12 @@ class AnnotatableModule(XModule):
break
if comment is not None:
comment.tag = 'div'
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."""
valid_markers = ['yellow', 'orange', 'purple', 'blue', 'green']
if 'marker' in span.attrib:
marker = span.attrib['marker']
......
common/lib/xmodule/xmodule/css/annotatable/display.scss
......@@ -19,7 +19,8 @@
font-size: $body-font-size;
}
span.annotatable {
.annotatable-span {
display: inline;
cursor: pointer;
@each $highlight in (
(yellow rgb(239, 255, 0)),
......@@ -27,9 +28,10 @@ span.annotatable {
(purple rgb(255,0,197)),
(blue rgb(0,90,255)),
(green rgb(111,255,9))) {
&.highlight-#{nth($highlight,1)} {
background-color: #{lighten(nth($highlight,2), 20%)};
}
$marker: nth($highlight,1);
$color: lighten(nth($highlight,2), 20%);
@if $marker == yellow { &.highlight { background-color: $color; } }
&.highlight-#{$marker} { background-color: $color; }
}
&.hide {
cursor: none;
......@@ -50,7 +52,7 @@ span.annotatable {
.annotatable-icon {
display: inline-block;
vertical-align: middle;
width: 16px;
width: 17px;
height: 17px;
background: url(../images/link-icon.png) no-repeat;
}
......@@ -60,12 +62,12 @@ span.annotatable {
margin: 1em 0 .5em 0;
}
.help-icon {
.annotatable-help-icon {
display: block;
position: absolute;
right: 0;
top: 33%;
width: 16px;
width: 17px;
height: 17px;
margin: 0 7px 0 0;
background: url(../images/info-icon.png) no-repeat;
......@@ -80,11 +82,14 @@ span.annotatable {
background: rgba(255, 255, 255, 0.9);
border: 1px solid $border-color;
color: #000;
font-weight: normal;
margin-bottom: 6px;
margin-right: 0;
overflow: visible;
padding: 4px;
text-align: left;
max-width: 300px;
max-height: 300px;
overflow: auto;
-webkit-font-smoothing: antialiased;
}
}
\ No newline at end of file
}
common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
......@@ -3,64 +3,89 @@ class @Annotatable
wrapperSelector: '.annotatable-wrapper'
toggleSelector: '.annotatable-toggle'
spanSelector: 'span.annotatable'
spanSelector: '.annotatable-span'
commentSelector: '.annotatable-comment'
replySelector: 'a.annotatable-reply'
replySelector: '.annotatable-reply'
helpSelector: '.annotatable-help-icon'
constructor: (el) ->
console.log 'loaded Annotatable' if @_debug
@init(el)
@el = el
@init()
$: (selector) ->
$(selector, @el)
init: (el) ->
@el = el
@hideAnnotations = false
init: () ->
@initEvents()
@initToolTips()
@initTips()
initEvents: () ->
@annotationsHidden = false
@$(@toggleSelector).bind 'click', @onClickToggleAnnotations
@$(@wrapperSelector).delegate @replySelector, 'click', @onClickReply
initToolTips: () ->
initTips: () ->
@visibleTips = []
@$(@spanSelector).each (index, el) =>
$(el).qtip(@getTipOptions el)
@$(@helpSelector).qtip
position:
my: 'right top'
at: 'bottom left'
content:
title: 'Annotated Reading Help'
text: "To reveal annotations in the reading, click the highlighted areas.
Discuss the annotations in the forums using the reply link at the
end of the annotation.<br/><br/>
To conceal annotations, use the <i>Hide Annotations</i> button."
getTipOptions: (el) ->
content:
title:
title:
text: @makeTipTitle(el)
button: 'Close'
text: @makeTipComment(el)
text: @makeTipContent(el)
position:
my: 'bottom center' # of tooltip
at: 'top center' # of target
target: 'mouse'
container: @$(@wrapperSelector)
adjust:
adjust:
mouse: false # dont follow the mouse
method: 'shift none'
show:
show:
event: 'click'
hide:
event: 'click'
style:
classes: 'ui-tooltip-annotatable'
events:
show: @onShowTipComment
render: @onRenderTip
show: @onShowTip
onRenderTip: (event, api) =>
$(api.elements.tooltip).draggable
handle: '.ui-tooltip-title'
cursor: 'move'
onShowTipComment: (event, api) =>
event.preventDefault() if @hideAnnotations
onShowTip: (event, api) =>
event.preventDefault() if @annotationsHidden
onClickToggleAnnotations: (e) =>
@hideAnnotations = !@hideAnnotations
hide = @hideAnnotations
toggle = @$(@toggleSelector)
spans = @$(@spanSelector)
@hideAllTips() if hide
@$(@spanSelector).toggleClass('hide', hide)
@$(@toggleSelector).text((if hide then 'Show' else 'Hide') + ' Annotations')
@annotationsHidden = !@annotationsHidden
if @annotationsHidden
spans.toggleClass('hide', true)
toggle.text('Show Annotations')
@visibleTips = @getVisibleTips()
@hideTips(@visibleTips)
else
spans.toggleClass('hide', false)
toggle.text('Hide Annotations')
@showTips(@visibleTips)
onClickReply: (e) =>
hash = $(e.currentTarget).attr('href')
......@@ -70,11 +95,16 @@ class @Annotatable
@scrollTo(anchor) if anchor.length == 1
scrollTo: (el, padding = 20) ->
scrollTop = el.offset().top - padding
$('html,body').animate(scrollTop: scrollTop, 500, 'swing')
props =
scrollTop: (el.offset().top - padding)
opts =
duration: 500
complete: @_once -> el.effect 'highlight', {}, 2000
makeTipComment: (el) ->
return (api) =>
$('html,body').animate(props, opts)
makeTipContent: (el) ->
(api) =>
comment = $(@commentSelector, el).first().clone()
anchor = $(el).data('discussion-anchor')
if anchor
......@@ -82,13 +112,36 @@ class @Annotatable
comment.contents()
makeTipTitle: (el) ->
return (api) =>
(api) =>
comment = $(@commentSelector, el).first()
title = comment.attr('title')
(if title then title else 'Commentary')
createReplyLink: (anchor) ->
$("<a class=\"annotatable-reply\" href=\"##{anchor}\">Reply to Comment</a>")
$("<a class=\"annotatable-reply\" href=\"##{anchor}\">Reply to this comment</a>")
getVisibleTips: () ->
visible = []
@$(@spanSelector).each (index, el) ->
api = $(el).qtip('api')
tip = $(api?.elements.tooltip)
if tip.is(':visible')
visible.push [el, tip.offset()]
visible
hideAllTips: () ->
@$(@spanSelector).each (index, el) -> $(el).qtip('api').hide()
\ No newline at end of file
hideTips: (items) ->
elements = (pair[0] for pair in items)
$(elements).qtip('hide')
showTips: (items) ->
$.each items, (index, item) ->
[el, offset] = item
api = $(el).qtip('api')
api?.show()
$(api?.elements.tooltip).offset(offset)
_once: (fn) ->
done = false
return =>
fn.call this unless done
done = true
lms/templates/annotatable.html
<div class="annotatable-wrapper" id="${element_id}-wrapper">
<div class="annotatable-header">
<div class="help-icon"></div>
<div class="annotatable-help-icon"></div>
% if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name} </div>
% endif
......
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