Commit 794c80ec authored by Randall Leeds's avatar Randall Leeds

Move the heatmap outside the sidebar

Inject the heatmap into the host frame using the default embed script.

It will be possible after this to make vanilla embed codes available
which can be used for headless operation or inserting the heatmap in
guest frames.

Fundamentally, the heatmap is altered to behave as though it's inside
the same frame as the annotations. That makes it easier to access
the highlights directly, rather than the pre-resolved jquery that
was being serialized across the bridge before.

Since it is now necessary for the reply counts to be known outside the
sidebar, the bridge is changed to support updating annotations and the
sidebar application is changed to bubble updates through ancestors.

Since iframes cannot have visible overflow the z-index constraints
required to have the heatmap still appear attached to the sidebar
dictated that the controlbar move outside as well.

Adds query parameters when embedding to create embed codes that have
no plugins loaded. This is useful for custom embeddings.

Lastly, I took this opportunity to improve the up/down buckets with the
help of the jquery scrollintoview plugin, which should ensure that
this function works even in situations with nested scrollable panes.

Also, closes #464.
parent a03af03f
...@@ -510,34 +510,6 @@ blockquote { ...@@ -510,34 +510,6 @@ blockquote {
} }
} }
//Controlbar Icons
.alwaysonhighlights-icon {
@include fonticon("\e01b", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
}
.highlighter-icon {
@include fonticon("\e01a", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
}
.commenter-icon {
@include fonticon("\e01e", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
}
//VISIBILITY //VISIBILITY
.visibility { .visibility {
.dropdown-toggle { .dropdown-toggle {
......
@import 'base'; @import 'base';
@import 'compass/css3/user-interface';
@import 'compass/layout/stretching';
@import 'compass/reset/utilities'; @import 'compass/reset/utilities';
...@@ -64,6 +66,137 @@ ...@@ -64,6 +66,137 @@
} }
//HEATMAP STUFF////////////////////////////////
.annotator-heatmap {
font-size: $baseFontSize;
line-height: $baseLineHeight;
margin-top: 2px;
position: absolute;
z-index: 2;
overflow: hidden;
height: 100%;
width: $heatmap-width + 17px;
top: 2em;
left: 0;
& > * {
margin-top: -2em;
}
svg {
@include stretch-y;
background: hsla(0, 0, 0, .1);
border-left: solid 1px $grayLighter;
height: 100%;
left: 17px;
width: $heatmap-width;
}
}
.heatmap-pointer {
@include user-select(none);
@include transition-property(left);
@include transition-duration(.2s);
font-size: $baseFontSize;
line-height: $baseLineHeight;
margin-top: -3em; // TODO: Less janking v-align
// color: rgb(238, 238, 238);
color: #666;
left: 0;
position: absolute;
height: 20.1px;
width: 40.1px;
vertical-align: middle;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: center;
cursor: pointer;
.svg {
width: 100%;
height: 100%;
background-image: url("../images/side_tab.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.label {
font-weight: bold;
font-family: $sansFontFamily;
font-size: 13.1px;
left: 5px;
right: 2px;
position: absolute;
bottom: 1px;
}
&:hover {
left: 2px;
}
&.lower, &.upper {
@include single-transition(margin-top, .2s);
left: 7px;
width: 33.1px;
height: 26.1px;
.label {
left: 0;
right: 0;
}
&:hover {
left: 7px;
}
}
&.upper {
.svg {
background-image: url("../images/up_tab.svg");
}
.label {
bottom: 1px;
}
&:hover {
margin-top: -3.2em;
}
}
&.lower {
.svg {
background-image: url("../images/down_tab.svg");
}
.label {
top: 1px;
}
&:hover {
margin-top: -2.8em;
}
}
&.flip {
@include rotateY(180deg);
.label {
@include rotateY(180deg);
}
}
&.commenter {
@include single-transition(margin-top, .2s);
left: 3px;
width: 37px;
.svg {
background-image: url("../images/comment_tab.svg");
}
.label {
bottom: 1px;
}
&:hover {
margin-top: -3.2em;
}
}
}
//HIGHLIGHTS//////////////////////////////// //HIGHLIGHTS////////////////////////////////
.annotator-highlights-always-on .annotator-hl, .annotator-highlights-always-on .annotator-hl,
...@@ -96,7 +229,8 @@ ...@@ -96,7 +229,8 @@
display: none; display: none;
} }
//IFRAME////////////////////////////////
// Sidebar
.annotator-frame { .annotator-frame {
@include reset-box-model; @include reset-box-model;
height: 100%; height: 100%;
...@@ -109,6 +243,14 @@ ...@@ -109,6 +243,14 @@
&.annotator-collapsed { &.annotator-collapsed {
margin-left: -$heatmap-width - 17px; margin-left: -$heatmap-width - 17px;
} }
& > iframe {
@include reset-box-model;
height: 100%;
width: 100%;
position: absolute;
}
} }
.annotator-no-transition { .annotator-no-transition {
...@@ -116,6 +258,101 @@ ...@@ -116,6 +258,101 @@
} }
//CONTROLBAR STUFF////////////////////////////////
.annotator-toolbar {
@include single-transition(height, .25s, ease, .25s);
font-size: $baseFontSize;
line-height: $baseLineHeight;
position: absolute;
overflow: hidden;
width: 40px;
height: 100px;
z-index: 1;
left: 7px;
top: 2em;
z-index: 3;
a, a:hover, a:active, a:visited {
color: $grayLighter;
text-decoration: none;
}
ul, li {
@include box-sizing(border-box);
@include reset-box-model;
@include reset-list-style;
font-size: $baseFontSize;
line-height: $baseLineHeight;
}
}
.annotator-toolbar.annotator-hide {
height: 0px;
&:hover {
height: 100px;
}
}
.annotator-toolbar li {
position: relative;
left: 1px;
width: 25px;
height: 25px;
padding: 5px;
margin-top: 5px;
box-shadow: 1px 1px 1px 1px;
background-color: white;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
&:active {
top:1px;
box-shadow: 1px 1px 1px 0px;
}
a.pushed {
color: $hypothered;
}
}
// Toolbar Icons
.alwaysonhighlights-icon {
@include fonticon("\e01b", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
// text-shadow: -0.1em -0.1em #999;
}
.highlighter-icon {
@include fonticon("\e01a", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
// text-shadow: -0.1em -0.1em #999;
}
.commenter-icon {
@include fonticon("\e01e", left);
color: rgb(211, 211, 211);
font-size: 18px;
bottom: 1px;
left: 3px;
position: absolute;
// text-shadow: -0.1em -0.1em #999;
}
/* /*
Mobile layout Mobile layout
240-479 px 240-479 px
......
@import 'compass'; @import 'compass';
@import 'compass/css3/transform'; @import 'compass/css3/transform';
@import 'compass/css3/user-interface';
@import 'compass/layout/stretching'; @import 'compass/layout/stretching';
@import 'compass/reset/utilities'; @import 'compass/reset/utilities';
...@@ -151,169 +150,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } ...@@ -151,169 +150,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
} }
} }
//CONTROLBAR STUFF////////////////////////////////
.controlbar {
position: absolute;
overflow: hidden;
width: 40px;
height: 100px;
z-index: 1;
left: 1px;
top: 100%;
-moz-transition:height .25s, -moz-transform .25s;
-webkit-transition:height .25s, -webkit-transform .25s;
-o-transition:height .25s, -o-transform .25s;
transition:height .25s, transform .25s;
}
.hiddencontrolbar {
@extend .controlbar;
height: 0px;
}
.controlbarbutton {
position: relative;
left: 1px;
width: 25px;
height: 25px;
padding: 5px;
margin-top: 5px;
box-shadow: 1px 1px 1px 1px;
color: gray;
background-color: white;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
&:active {
top:1px;
box-shadow: 1px 1px 1px 0px;
}
a.pushed {
color: $hypothered;
}
}
//HEATMAP STUFF////////////////////////////////
.annotator-heatmap {
@include stretch-y;
height: 100%;
svg {
@include stretch-y;
background: hsla(0, 0, 0, .1);
border-left: solid 1px $grayLighter;
height: 100%;
left: 17px;
width: $heatmap-width;
}
}
.heatmap-pointer {
@include user-select(none);
@include transition-property(left);
@include transition-duration(.2s);
margin-top: -1em; // TODO: Less janking v-align
// color: rgb(238, 238, 238);
color: #666;
left: 0;
position: absolute;
height: 20.1px;
width: 40.1px;
vertical-align: middle;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: center;
cursor: pointer;
.svg {
width: 100%;
height: 100%;
background-image: url("../images/side_tab.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.label {
font-weight: bold;
font-family: $sansFontFamily;
font-size: 13.1px;
left: 5px;
right: 2px;
position: absolute;
bottom: 1px;
}
&:hover {
left: 2px;
}
&.lower, &.upper {
@include single-transition(margin-top, .2s);
left: 7px;
width: 33.1px;
height: 26.1px;
.label {
left: 0;
right: 0;
}
&:hover {
left: 7px;
}
}
&.upper {
.svg {
background-image: url("../images/up_tab.svg");
}
.label {
bottom: 1px;
}
&:hover {
margin-top: -1.2em;
}
}
&.lower {
.svg {
background-image: url("../images/down_tab.svg");
}
.label {
top: 1px;
}
&:hover {
margin-top: -.8em;
}
}
&.flip {
@include rotateY(180deg);
.label {
@include rotateY(180deg);
}
}
&.commenter {
@include single-transition(margin-top, .2s);
left: 3px;
width: 37px;
.svg {
background-image: url("../images/comment_tab.svg");
}
.label {
bottom: 1px;
}
&:hover {
margin-top: -1.2em;
}
}
}
//SHEET//////////////////////////////// //SHEET////////////////////////////////
//This comes down from under the toolbar //This comes down from under the toolbar
...@@ -323,10 +159,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } ...@@ -323,10 +159,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
max-height: 30em; max-height: 30em;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 100%; left: $heatmap-width + 8px;
width: 100%;
left: 4px;
right: 0; right: 0;
top: 2px; top: 2px;
...@@ -337,7 +170,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } ...@@ -337,7 +170,7 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
} }
.nav-tabs { .nav-tabs {
padding-left: 1.3em; padding-left: 1em;
} }
&.collapsed { &.collapsed {
......
...@@ -24,86 +24,6 @@ class App ...@@ -24,86 +24,6 @@ class App
$scope.baseUrl = baseUrl $scope.baseUrl = baseUrl
{plugins, host, providers} = annotator {plugins, host, providers} = annotator
heatmap = annotator.plugins.Heatmap
$scope.dynamicBucket = true
heatmap.element.bind 'click', =>
return unless drafts.discard()
$location.search('id', null).replace()
$scope.dynamicBucket = true
annotator.showViewer()
heatmap.publish 'updated'
$scope.$digest()
heatmap.subscribe 'updated', =>
elem = d3.select(heatmap.element[0])
return unless elem?.datum()
data = {highlights, offset} = elem.datum()
tabs = elem.selectAll('div').data data
height = $(window).outerHeight(true)
pad = height * .2
{highlights, offset} = elem.datum()
visible = $scope.frame.visible
if $scope.dynamicBucket and visible and $location.path() == '/viewer'
bottom = offset + heatmap.element.height()
annotations = highlights.reduce (acc, hl) =>
if hl.offset.top >= offset and hl.offset.top <= bottom
if hl.data not in acc
acc.push hl.data
acc
, []
annotator.updateViewer annotations
elem.selectAll('.heatmap-pointer')
# Creates highlights corresponding bucket when mouse is hovered
.on 'mouseover', (bucket) =>
unless $location.path() == '/viewer' and $location.search()?.id?
for p in providers
p.channel.notify
method: 'setActiveHighlights'
params: heatmap.buckets[bucket]?.map (a) => a.$$tag
# Gets rid of them after
.on 'mouseout', =>
if $location.path() == '/viewer' and not $location.search()?.id?
for p in providers
p.channel.notify
method: 'setActiveHighlights'
# Does one of a few things when a tab is clicked depending on type
.on 'click', (bucket) =>
d3.event.stopPropagation()
# If it's the upper tab, switch to dynamic bucket mode,
# and scroll to next bucket above
if heatmap.isUpper bucket
$scope.dynamicBucket = true
threshold = offset + heatmap.index[0]
next = highlights.reduce (next, hl) ->
if next < hl.offset.top < threshold then hl.offset.top else next
, 0
console.log "XXX: not scrollTop"
#provider.notify method: 'scrollTop', params: next - pad
# If it's the lower tab, switch do dynamic bucket mode,
# and scroll to next bucket below
else if heatmap.isLower bucket
$scope.dynamicBucket = true
threshold = offset + heatmap.index[0] + height - pad
next = highlights.reduce (next, hl) ->
if threshold < hl.offset.top < next then hl.offset.top else next
, Number.MAX_VALUE
console.log "XXX: not scrollTop"
#provider.notify method: 'scrollTop', params: next - pad
# If it's neither of the above, load the bucket into the viewer
else
return unless drafts.discard()
$scope.dynamicBucket = false
$location.search({'id' : null })
annotator.showViewer heatmap.buckets[bucket]
$scope.$watch 'sheet.collapsed', (newValue) -> $scope.$watch 'sheet.collapsed', (newValue) ->
$scope.sheet.tab = if newValue then null else 'login' $scope.sheet.tab = if newValue then null else 'login'
...@@ -872,7 +792,6 @@ class Search ...@@ -872,7 +792,6 @@ class Search
refresh = => refresh = =>
$scope.search_filter = $routeParams.matched $scope.search_filter = $routeParams.matched
heatmap = annotator.plugins.Heatmap
# Create the regexps for highlighting the matches inside the annotations' bodies # Create the regexps for highlighting the matches inside the annotations' bodies
$scope.text_tokens = $routeParams.in_body_text.split ' ' $scope.text_tokens = $routeParams.in_body_text.split ' '
...@@ -889,30 +808,29 @@ class Search ...@@ -889,30 +808,29 @@ class Search
threads = [] threads = []
$scope.render_order = {} $scope.render_order = {}
# Choose the root annotations to work with # Choose the root annotations to work with
for bucket in heatmap.buckets for annotation in $scope.annotations
for annotation in bucket # The annotation itself is a hit.
# The annotation itself is a hit. thread = annotation.thread
thread = annotation.thread
if annotation.id in $scope.search_filter
if annotation.id in $scope.search_filter threads.push thread
threads.push thread $scope.render_order[annotation.id] = []
$scope.render_order[annotation.id] = [] buildRenderOrder(annotation.id, [thread])
buildRenderOrder(annotation.id, [thread]) continue
continue
# Maybe it has a child we were looking for
# Maybe it has a child we were looking for children = thread.flattenChildren()
children = thread.flattenChildren() has_search_result = false
has_search_result = false if children?
if children? for child in children
for child in children if child.id in $scope.search_filter
if child.id in $scope.search_filter has_search_result = true
has_search_result = true break
break
if has_search_result
if has_search_result threads.push thread
threads.push thread $scope.render_order[annotation.id] = []
$scope.render_order[annotation.id] = [] buildRenderOrder(annotation.id, [thread])
buildRenderOrder(annotation.id, [thread])
# Re-construct exact order the annotation threads will be shown # Re-construct exact order the annotation threads will be shown
......
...@@ -13,12 +13,20 @@ class Annotator.Guest extends Annotator ...@@ -13,12 +13,20 @@ class Annotator.Guest extends Annotator
Document: {} Document: {}
constructor: (element, options) -> constructor: (element, options) ->
Gettext.prototype.parse_locale_data annotator_locale_data
super super
# Load plugins @frame = $('<div></div>')
for own name, opts of @options .appendTo(@wrapper)
if not @plugins[name] .addClass('annotator-frame annotator-outer annotator-collapsed')
this.addPlugin(name, opts)
unless @options.light
@toolbar = new Annotator.Toolbar()
@toolbar.element.appendTo(@frame)
delete @options.app
delete @options.light
this.addPlugin 'Bridge', this.addPlugin 'Bridge',
formatter: (annotation) => formatter: (annotation) =>
...@@ -36,6 +44,11 @@ class Annotator.Guest extends Annotator ...@@ -36,6 +44,11 @@ class Annotator.Guest extends Annotator
onReady: => onReady: =>
console.log "Guest functions are ready for #{origin}" console.log "Guest functions are ready for #{origin}"
# Load plugins
for own name, opts of @options
if not @plugins[name]
this.addPlugin(name, opts)
# Scan the document text with the DOM Text libraries # Scan the document text with the DOM Text libraries
this.scanDocument "Annotator initialized" this.scanDocument "Annotator initialized"
...@@ -47,20 +60,6 @@ class Annotator.Guest extends Annotator ...@@ -47,20 +60,6 @@ class Annotator.Guest extends Annotator
.bind('onEditorHide', this.onEditorHide) .bind('onEditorHide', this.onEditorHide)
.bind('onEditorSubmit', this.onEditorSubmit) .bind('onEditorSubmit', this.onEditorSubmit)
.bind('getHighlights', =>
console.log "XXX: Returning early from getHighlights"
return
highlights: $(@wrapper).find('.annotator-hl')
.filter ->
this.offsetWidth > 0 || this.offsetHeight > 0
.map ->
offset: $(this).offset()
height: $(this).outerHeight(true)
data: $(this).data('annotation').$$tag
.get()
offset: $(window).scrollTop()
)
.bind('setActiveHighlights', (ctx, tags=[]) => .bind('setActiveHighlights', (ctx, tags=[]) =>
@wrapper.find('.annotator-hl') @wrapper.find('.annotator-hl')
.each -> .each ->
...@@ -70,17 +69,6 @@ class Annotator.Guest extends Annotator ...@@ -70,17 +69,6 @@ class Annotator.Guest extends Annotator
$(this).removeClass('annotator-hl-active') $(this).removeClass('annotator-hl-active')
) )
.bind('setAlwaysOnMode', (ctx, value) =>
@alwaysOnMode = value
this.setPersistentHighlights()
)
.bind('setHighlightingMode', (ctx, value) =>
@highlightingMode = value
if @highlightingMode then @adder.hide()
this.setPersistentHighlights()
)
.bind('adderClick', => .bind('adderClick', =>
@onAdderClick @event @onAdderClick @event
) )
...@@ -104,72 +92,22 @@ class Annotator.Guest extends Annotator ...@@ -104,72 +92,22 @@ class Annotator.Guest extends Annotator
_setupWrapper: -> _setupWrapper: ->
@wrapper = @element @wrapper = @element
.on 'mouseup', => .on 'click', =>
if not @ignoreMouseup if not @ignoreMouseup
setTimeout => setTimeout =>
unless @selectedRanges?.length then @panel?.notify method: 'back' unless @selectedRanges?.length
@panel?.notify method: 'back'
this._setupMatching() this._setupMatching()
@domMatcher.setRootNode @wrapper[0] @domMatcher.setRootNode @wrapper[0]
this this
_setupDocumentEvents: ->
tick = false
timeout = null
touch = false
update = =>
if touch
# Defer updates on mobile until after touch events are over
if timeout then cancelTimeout timeout
timeout = setTimeout =>
timeout = null
do updateFrame
, 400
else
do updateFrame
updateFrame = =>
unless tick
tick = true
requestAnimationFrame =>
tick = false
if touch
# CSS "position: fixed" is hell of broken on most mobile devices
@frame?.css
display: ''
height: $(window).height()
position: 'absolute'
top: $(window).scrollTop()
@panel?.notify method: 'publish', params: 'hostUpdated'
$(window).on 'resize scroll', update
$(document.body).on 'resize scroll', '*', update
if window.PDFView?
# XXX: PDF.js hack
$(PDFView.container).on 'scroll', update
super
# These methods aren't used in the iframe-hosted configuration of Annotator. # These methods aren't used in the iframe-hosted configuration of Annotator.
_setupViewer: -> this _setupViewer: -> this
_setupEditor: -> this _setupEditor: -> this
_dragRefresh: =>
d = @drag.delta
@drag.delta = 0
@drag.tick = false
m = parseInt (getComputedStyle @frame[0]).marginLeft
w = -1 * m
m += d
w -= d
@frame.addClass 'annotator-no-transition'
@frame.css
'margin-left': "#{m}px"
width: "#{w}px"
showViewer: (annotation) => @plugins.Bridge.showViewer annotation showViewer: (annotation) => @plugins.Bridge.showViewer annotation
showEditor: (annotation) => @plugins.Bridge.showEditor annotation showEditor: (annotation) => @plugins.Bridge.showEditor annotation
updateViewer: (annotations) => @plugins.Bridge.updateViewer annotations
checkForStartSelection: (event) => checkForStartSelection: (event) =>
# Override to prevent Annotator choking when this ties to access the # Override to prevent Annotator choking when this ties to access the
...@@ -177,6 +115,7 @@ class Annotator.Guest extends Annotator ...@@ -177,6 +115,7 @@ class Annotator.Guest extends Annotator
# is needed for preventing the panel from closing while annotating. # is needed for preventing the panel from closing while annotating.
unless event and this.isAnnotator(event.target) unless event and this.isAnnotator(event.target)
@mouseIsDown = true @mouseIsDown = true
confirmSelection: -> confirmSelection: ->
return true unless @selectedRanges.length is 1 return true unless @selectedRanges.length is 1
...@@ -203,16 +142,14 @@ class Annotator.Guest extends Annotator ...@@ -203,16 +142,14 @@ class Annotator.Guest extends Annotator
# annotation = this.createAnnotation() # annotation = this.createAnnotation()
# #
# Create an empty annotation manually instead # Create an empty annotation manually instead
annotation = {} annotation = {inject: true}
annotation = this.setupAnnotation annotation annotation = this.setupAnnotation annotation
$(annotation.highlights).addClass 'annotator-hl' $(annotation.highlights).addClass 'annotator-hl'
# Tell the sidebar about the new annotation # Notify listeners
@plugins.Bridge.injectAnnotation annotation this.publish 'beforeAnnotationCreated', annotation
this.publish 'annotationCreated', annotation
# Switch view to show the new annotation
this.showViewer [ annotation ]
else else
super event super event
...@@ -238,7 +175,7 @@ class Annotator.Guest extends Annotator ...@@ -238,7 +175,7 @@ class Annotator.Guest extends Annotator
# Tell sidebar to show the viewer for these annotations # Tell sidebar to show the viewer for these annotations
this.showViewer annotations this.showViewer annotations
setPersistentHighlights: -> setPersistentHighlights: (state) ->
body = $('body') body = $('body')
markerClass = 'annotator-highlights-always-on' markerClass = 'annotator-highlights-always-on'
if @alwaysOnMode or @highlightingMode if @alwaysOnMode or @highlightingMode
...@@ -246,6 +183,51 @@ class Annotator.Guest extends Annotator ...@@ -246,6 +183,51 @@ class Annotator.Guest extends Annotator
else else
body.removeClass markerClass body.removeClass markerClass
addComment: ->
sel = @selectedRanges # Save the selection
# Nuke the selection, since we won't be using that.
# We will attach this to the end of the document.
# Our override for setupAnnotation will add that highlight.
@selectedRanges = []
this.onAdderClick() # Open editor (with 0 targets)
@selectedRanges = sel # restore the selection
createFakeCommentRange: ->
posSelector =
type: "TextPositionSelector"
start: @domMapper.corpus.length - 1
end: @domMapper.corpus.length
anchor = this.findAnchorFromPositionSelector selector: [posSelector]
anchor.range
# Override for setupAnnotation
setupAnnotation: (annotation) ->
# Set up annotation as usual
annotation = super(annotation)
# Does it have proper highlights?
unless annotation.highlights?.length or annotation.references?.length or annotation.target?.length
# No highlights and no references means that this is a comment,
# or re-attachment has failed, but we'll skip orphaned annotations.
# Get a fake range at the end of the document, and highlight it
range = this.createFakeCommentRange()
hl = this.highlightRange range
# Register this highlight for the annotation, and vica versa
$.merge annotation.highlights, hl
$(hl).data('annotation', annotation)
annotation
# Open the sidebar
showFrame: ->
@panel?.notify method: 'open'
# Close the sidebar
hideFrame: ->
@panel?.notify method: 'back'
addToken: (token) => addToken: (token) =>
@api.notify @api.notify
method: 'addToken' method: 'addToken'
......
...@@ -9,13 +9,6 @@ class Annotator.Host extends Annotator.Guest ...@@ -9,13 +9,6 @@ class Annotator.Host extends Annotator.Guest
tick: false tick: false
constructor: (element, options) -> constructor: (element, options) ->
Gettext.prototype.parse_locale_data annotator_locale_data
@app = options.app
delete options.app
super
# Create the iframe # Create the iframe
if document.baseURI and window.PDFView? if document.baseURI and window.PDFView?
# XXX: Hack around PDF.js resource: origin. Bug in jschannel? # XXX: Hack around PDF.js resource: origin. Bug in jschannel?
...@@ -25,12 +18,18 @@ class Annotator.Host extends Annotator.Guest ...@@ -25,12 +18,18 @@ class Annotator.Host extends Annotator.Guest
# XXX: Hack for missing window.location.origin in FF # XXX: Hack for missing window.location.origin in FF
hostOrigin ?= window.location.protocol + "//" + window.location.host hostOrigin ?= window.location.protocol + "//" + window.location.host
@frame = $('<iframe></iframe>') app = $('<iframe></iframe>')
.css(display: 'none') .attr('src', "#{options.app}#/?xdm=#{encodeURIComponent(hostOrigin)}")
.attr('src', "#{@app}#/?xdm=#{encodeURIComponent(hostOrigin)}")
.appendTo(@wrapper) super
.addClass('annotator-frame annotator-outer annotator-collapsed')
.bind 'load', => @frame.css('display', '') app.appendTo(@frame)
if @toolbar
@toolbar.hide()
app
.on('mouseenter', => @toolbar.show())
.on('mouseleave', => @toolbar.hide())
_setupXDM: (options) -> _setupXDM: (options) ->
channel = super channel = super
...@@ -63,22 +62,6 @@ class Annotator.Host extends Annotator.Guest ...@@ -63,22 +62,6 @@ class Annotator.Host extends Annotator.Guest
window.requestAnimationFrame this._dragRefresh window.requestAnimationFrame this._dragRefresh
) )
.bind('addComment', (ctx) =>
sel = @selectedRanges # Save the selection
adderShown = @adder.is ":visible" # Save the state of adder icon
# Nuke the selection, since we won't be using that.
# We will attach this to the end of the document.
# Our override for setupAnnotation will add that highlight.
@selectedRanges = []
this.onAdderClick() # Open editor (with 0 targets)
setTimeout (=> # At some point, later
@selectedRanges = sel # restore the selection
if adderShown then @adder.show() # restore the state of addder icon
), 200
)
.bind('getMaxBottom', => .bind('getMaxBottom', =>
sel = '*' + (":not(.annotator-#{x})" for x in [ sel = '*' + (":not(.annotator-#{x})" for x in [
'adder', 'outer', 'notice', 'filter', 'frame' 'adder', 'outer', 'notice', 'filter', 'frame'
...@@ -100,10 +83,6 @@ class Annotator.Host extends Annotator.Guest ...@@ -100,10 +83,6 @@ class Annotator.Host extends Annotator.Guest
Math.max.apply(Math, all) Math.max.apply(Math, all)
) )
.bind('scrollTop', (ctx, y) =>
$('html, body').stop().animate {scrollTop: y}, 600
)
.bind('setDrag', (ctx, drag) => .bind('setDrag', (ctx, drag) =>
@drag.enabled = drag @drag.enabled = drag
@drag.last = null @drag.last = null
...@@ -222,4 +201,4 @@ class Annotator.Host extends Annotator.Guest ...@@ -222,4 +201,4 @@ class Annotator.Host extends Annotator.Guest
this.subscribe('annotationEditorSubmit', save) this.subscribe('annotationEditorSubmit', save)
# Display the editor. # Display the editor.
this.showEditor(annotation, position) this.showEditor(annotation, position)
\ No newline at end of file
...@@ -49,6 +49,9 @@ class Annotator.Plugin.Bridge extends Annotator.Plugin ...@@ -49,6 +49,9 @@ class Annotator.Plugin.Bridge extends Annotator.Plugin
# Connected bridge links # Connected bridge links
links: null links: null
# Annotations currently being updated -- used to avoid event callback loops
updating: null
constructor: (elem, options) -> constructor: (elem, options) ->
if options.window? if options.window?
# Pull the option out and restore it after the super constructor is # Pull the option out and restore it after the super constructor is
...@@ -63,6 +66,7 @@ class Annotator.Plugin.Bridge extends Annotator.Plugin ...@@ -63,6 +66,7 @@ class Annotator.Plugin.Bridge extends Annotator.Plugin
@cache = {} @cache = {}
@links = [] @links = []
@updating = {}
pluginInit: -> pluginInit: ->
$(window).on 'message', this._onMessage $(window).on 'message', this._onMessage
......
$ = Annotator.$
class Annotator.Plugin.Heatmap extends Annotator.Plugin class Annotator.Plugin.Heatmap extends Annotator.Plugin
# prototype constants # prototype constants
BUCKET_THRESHOLD_PAD: 40 BUCKET_THRESHOLD_PAD: 40
...@@ -38,10 +40,40 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -38,10 +40,40 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
# index for fast hit detection in the buckets # index for fast hit detection in the buckets
index: [] index: []
# whether to update the viewer as the window is scrolled
dynamicBucket: true
constructor: (element, options) -> constructor: (element, options) ->
super $(@html), options super $(@html), options
this._rebaseUrls() this._rebaseUrls()
@element.appendTo element
if @options.container?
$(@options.container).append @element
else
$(element).append @element
pluginInit: ->
return unless d3?
events = [
'annotationCreated', 'annotationUpdated', 'annotationDeleted',
'annotationsLoaded'
]
for event in events
@annotator.subscribe event, this._update
@element.on 'click', (event) =>
event.stopPropagation()
this._fillDynamicBucket()
@dynamicBucket = true
@annotator.showFrame()
$(window).on 'resize scroll', this._update
$(document.body).on 'resize scroll', '*', this._update
if window.PDFView?
# XXX: PDF.js hack
$(PDFView.container).on 'scroll', this._update
_rebaseUrls: -> _rebaseUrls: ->
# We can't rely on browsers to implement the xml:base property correctly. # We can't rely on browsers to implement the xml:base property correctly.
...@@ -62,7 +94,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -62,7 +94,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
rect.attr('fill', fill) rect.attr('fill', fill)
rect.attr('filter', filter) rect.attr('filter', filter)
_collate: (a, b) => _collate: (a, b) ->
for i in [0..a.length-1] for i in [0..a.length-1]
if a[i] < b[i] if a[i] < b[i]
return -1 return -1
...@@ -77,11 +109,10 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -77,11 +109,10 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
.interpolate(d3.interpolateHcl) .interpolate(d3.interpolateHcl)
c(v).toString() c(v).toString()
updateHeatmap: (data) => _update: =>
return unless d3? wrapper = @annotator.wrapper
highlights = wrapper.find('.annotator-hl')
wrapper = this.element.offsetParent() defaultView = wrapper[0].ownerDocument.defaultView
{highlights, offset} = data
# Keep track of buckets of annotations above and below the viewport # Keep track of buckets of annotations above and below the viewport
above = [] above = []
...@@ -89,10 +120,10 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -89,10 +120,10 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
comments = [] comments = []
# Construct control points for the heatmap highlights # Construct control points for the heatmap highlights
points = highlights.reduce (points, hl, i) => points = highlights.toArray().reduce (points, hl, i) =>
x = hl.offset.top - wrapper.offset().top - offset d = $(hl).data('annotation')
h = hl.height x = $(hl).offset().top - wrapper.offset().top - defaultView.pageYOffset
d = hl.data h = $(hl).outerHeight(true)
# XXX: Hacky stuff before unattached annotations V2 # XXX: Hacky stuff before unattached annotations V2
# Detect comments and push them into a separate bucket # Detect comments and push them into a separate bucket
...@@ -240,7 +271,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -240,7 +271,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
[offsets[1], i, 1, 1e-6] ] [offsets[1], i, 1, 1e-6] ]
# Update the data bindings # Update the data bindings
element = d3.select(@element[0]).datum(data) element = d3.select(@element[0]).datum(highlights)
# Update gradient stops # Update gradient stops
opacity = d3.scale.pow().domain([0, max]).range([.1, .6]).exponent(2) opacity = d3.scale.pow().domain([0, max]).range([.1, .6]).exponent(2)
...@@ -273,6 +304,71 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -273,6 +304,71 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
tabs.enter().append('div') tabs.enter().append('div')
.classed('heatmap-pointer', true) .classed('heatmap-pointer', true)
# Creates highlights corresponding bucket when mouse is hovered
.on 'mousemove', (bucket) =>
highlights = wrapper.find('.annotator-hl')
highlights.toArray().forEach (hl) =>
if $(hl).data('annotation') in @buckets[bucket]
$(hl).addClass('annotator-hl-active')
else if not $(hl).hasClass('annotator-hl-temporary')
$(hl).removeClass('annotator-hl-active')
# Gets rid of them after
.on 'mouseout', =>
highlights = wrapper.find('.annotator-hl')
highlights.removeClass('annotator-hl-active')
# Does one of a few things when a tab is clicked depending on type
.on 'click', (bucket) =>
highlights = wrapper.find('.annotator-hl')
pad = defaultView.innerHeight * .2
# If it's the upper tab, scroll to next bucket above
if @isUpper bucket
threshold = defaultView.pageYOffset
{next} = highlights.toArray().reduce (acc, hl) ->
{pos, next} = acc
if pos < $(hl).offset().top < threshold
pos: $(hl).offset().top
next: $(hl)
else
acc
, {pos: 0, next: null}
next?.scrollintoview
complete: ->
if this.parentNode is this.ownerDocument
scrollable = $(this.ownerDocument.body)
else
scrollable = $(this)
top = scrollable.scrollTop()
scrollable.stop().animate {scrollTop: top - pad}, 300
# If it's the lower tab, scroll to next bucket below
else if @isLower bucket
threshold = defaultView.pageYOffset + defaultView.innerHeight - pad
{next} = highlights.toArray().reduce (acc, hl) ->
{pos, next} = acc
if threshold < $(hl).offset().top < pos
pos: $(hl).offset().top
next: $(hl)
else
acc
, {pos: Number.MAX_VALUE, next: null}
next?.scrollintoview
complete: ->
if this.parentNode is this.ownerDocument
scrollable = $(this.ownerDocument.body)
else
scrollable = $(this)
top = scrollable.scrollTop()
scrollable.stop().animate {scrollTop: top + pad}, 300
# If it's neither of the above, load the bucket into the viewer
else
d3.event.stopPropagation()
@dynamicBucket = false
annotator.showViewer @buckets[bucket]
tabs.exit().remove() tabs.exit().remove()
tabs tabs
...@@ -289,7 +385,24 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin ...@@ -289,7 +385,24 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
.style 'display', (d) => .style 'display', (d) =>
if (@buckets[d].length is 0) then 'none' else '' if (@buckets[d].length is 0) then 'none' else ''
this.publish('updated') if @dynamicBucket
this._fillDynamicBucket()
_fillDynamicBucket: =>
top = window.pageYOffset
bottom = top + $(window).innerHeight()
highlights = @annotator.wrapper.find('.annotator-hl')
visible = highlights.toArray().reduce (acc, hl) =>
if $(hl).offset().top >= top and $(hl).offset().top <= bottom
if $(hl).data('annotation') not in acc
acc.push $(hl).data('annotation')
else
annotation = $(hl).data('annotation')
if not (annotation.target?.length or annotation.references?.length)
acc.push annotation
acc
, []
@annotator.updateViewer visible
isUpper: (i) => i == 1 isUpper: (i) => i == 1
isLower: (i) => i == @index.length - 3 isLower: (i) => i == @index.length - 3
......
class Hypothesis extends Annotator class Hypothesis extends Annotator
events: events:
serviceDiscovery: 'serviceDiscovery' 'annotationCreated': 'updateAncestors'
'annotationUpdated': 'updateAncestors'
'annotationDeleted': 'updateAncestors'
'serviceDiscovery': 'serviceDiscovery'
# Plugin configuration # Plugin configuration
options: options:
noMatching: true noMatching: true
Discovery: {} Discovery: {}
Heatmap: {}
Permissions: Permissions:
permissions: permissions:
read: ['group:__world__'] read: ['group:__world__']
...@@ -83,13 +85,20 @@ class Hypothesis extends Annotator ...@@ -83,13 +85,20 @@ class Hypothesis extends Annotator
# Set up the bridge plugin, which bridges the main annotation methods # Set up the bridge plugin, which bridges the main annotation methods
# between the host page and the panel widget. # between the host page and the panel widget.
whitelist = ['diffHTML', 'diffCaseOnly', 'quote', 'ranges', 'target', 'id', 'uri'] whitelist = [
'diffHTML', 'inject', 'quote', 'ranges', 'target', 'id', 'references',
'uri', 'diffCaseOnly'
]
this.addPlugin 'Bridge', this.addPlugin 'Bridge',
gateway: true gateway: true
formatter: (annotation) => formatter: (annotation) =>
formatted = {} formatted = {}
for k, v of annotation when k in whitelist for k, v of annotation when k in whitelist
formatted[k] = v formatted[k] = v
if annotation.thread? and annotation.thread?.children.length
formatted.reply_count = annotation.thread.flattenChildren().length
else
formatted.reply_count = 0
formatted formatted
parser: (annotation) => parser: (annotation) =>
parsed = {} parsed = {}
...@@ -168,30 +177,6 @@ class Hypothesis extends Annotator ...@@ -168,30 +177,6 @@ class Hypothesis extends Annotator
this.subscribe 'annotationDeleted', (a) => this.subscribe 'annotationDeleted', (a) =>
$rootScope.annotations = $rootScope.annotations.filter (b) -> b isnt a $rootScope.annotations = $rootScope.annotations.filter (b) -> b isnt a
# Update the heatmap when the host is updated or annotations are loaded
bridge = @plugins.Bridge
heatmap = @plugins.Heatmap
threading = @threading
updateOn = [
'hostUpdated'
'annotationsLoaded'
'annotationCreated'
'annotationDeleted'
]
for event in updateOn
this.subscribe event, =>
console.log "XXX: ignoring annotator event"
return
@provider.call
method: 'getHighlights'
success: ({highlights, offset}) ->
heatmap.updateHeatmap
highlights:
for hl in highlights when hl.data
annotation = bridge.cache[hl.data]
angular.extend hl, data: annotation
offset: offset
# Reload the route after annotations are loaded # Reload the route after annotations are loaded
this.subscribe 'annotationsLoaded', -> $route.reload() this.subscribe 'annotationsLoaded', -> $route.reload()
...@@ -294,7 +279,9 @@ class Hypothesis extends Annotator ...@@ -294,7 +279,9 @@ class Hypothesis extends Annotator
getHtmlQuote: (quote) -> quote getHtmlQuote: (quote) -> quote
# Do nothing in the app frame, let the host handle it. # Do nothing in the app frame, let the host handle it.
setupAnnotation: (annotation) -> annotation setupAnnotation: (annotation) ->
annotation.highlights = []
annotation
sortAnnotations: (a, b) -> sortAnnotations: (a, b) ->
a_upd = if a.updated? then new Date(a.updated) else new Date() a_upd = if a.updated? then new Date(a.updated) else new Date()
...@@ -437,6 +424,15 @@ class Hypothesis extends Annotator ...@@ -437,6 +424,15 @@ class Hypothesis extends Annotator
else else
console.warn "Unsupported Social View: '" + @socialView.name + "'!" console.warn "Unsupported Social View: '" + @socialView.name + "'!"
# Bubbles updates through the thread so that guests see accurate
# reply counts.
updateAncestors: (annotation) =>
for ref in (annotation.references?.slice().reverse() or [])
rel = (@threading.getContainer ref).message
if rel?
@element.injector().get('$timeout') (=> this.updateAnnotation rel), 10
break # Only the nearest existing ancestor, the rest is by induction.
serviceDiscovery: (options) => serviceDiscovery: (options) =>
@options.Store ?= {} @options.Store ?= {}
angular.extend @options.Store, options angular.extend @options.Store, options
......
$ = Annotator.$
class Annotator.Toolbar extends Annotator.Widget
html: '<div class="annotator-toolbar"></div>'
options:
items: [
"title": "Show Annotations"
"class": "alwaysonhighlights-icon"
"click": (event) ->
event.preventDefault()
event.stopPropagation()
state = not window.annotator.alwaysOnMode
window.annotator.alwaysOnMode = state
window.annotator.setPersistentHighlights()
if state
$(event.target).addClass('pushed')
else
$(event.target).removeClass('pushed')
,
"title": "Highlighting Mode"
"class": "highlighter-icon"
"click": (event) ->
event.preventDefault()
event.stopPropagation()
state = not window.annotator.highlightingMode
window.annotator.highlightingMode = state
window.annotator.setPersistentHighlights()
if state
$(event.target).addClass('pushed')
else
$(event.target).removeClass('pushed')
,
"title": "New Comment"
"class": "commenter-icon"
"click": (event) ->
event.preventDefault()
event.stopPropagation()
window.annotator.addComment()
]
constructor: (options) ->
super $(@html)[0], options
@buttons = @options.items.reduce (buttons, item) =>
button = $('<a></a>')
.attr('href', '')
.attr('title', item.title)
.on('click', item.click)
.addClass(item.class)
.data('state', false)
buttons.add button
, $()
@element
.append(@buttons)
.wrapInner('<ul></ul>')
@buttons.wrap('<li></li>')
show: ->
@element.removeClass @classes.hide
this
hide: ->
@element.addClass @classes.hide
this
/*!
* jQuery scrollintoview() plugin and :scrollable selector filter
*
* Version 1.8 (14 Jul 2011)
* Requires jQuery 1.4 or newer
*
* Copyright (c) 2011 Robert Koritnik
* Licensed under the terms of the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
(function ($) {
var converter = {
vertical: { x: false, y: true },
horizontal: { x: true, y: false },
both: { x: true, y: true },
x: { x: true, y: false },
y: { x: false, y: true }
};
var settings = {
duration: "fast",
direction: "both"
};
var rootrx = /^(?:html)$/i;
// gets border dimensions
var borders = function (domElement, styles) {
styles = styles || (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(domElement, null) : domElement.currentStyle);
var px = document.defaultView && document.defaultView.getComputedStyle ? true : false;
var b = {
top: (parseFloat(px ? styles.borderTopWidth : $.css(domElement, "borderTopWidth")) || 0),
left: (parseFloat(px ? styles.borderLeftWidth : $.css(domElement, "borderLeftWidth")) || 0),
bottom: (parseFloat(px ? styles.borderBottomWidth : $.css(domElement, "borderBottomWidth")) || 0),
right: (parseFloat(px ? styles.borderRightWidth : $.css(domElement, "borderRightWidth")) || 0)
};
return {
top: b.top,
left: b.left,
bottom: b.bottom,
right: b.right,
vertical: b.top + b.bottom,
horizontal: b.left + b.right
};
};
var dimensions = function ($element) {
var win = $(window);
var isRoot = rootrx.test($element[0].nodeName);
return {
border: isRoot ? { top: 0, left: 0, bottom: 0, right: 0} : borders($element[0]),
scroll: {
top: (isRoot ? win : $element).scrollTop(),
left: (isRoot ? win : $element).scrollLeft()
},
scrollbar: {
right: isRoot ? 0 : $element.innerWidth() - $element[0].clientWidth,
bottom: isRoot ? 0 : $element.innerHeight() - $element[0].clientHeight
},
rect: (function () {
var r = $element[0].getBoundingClientRect();
return {
top: isRoot ? 0 : r.top,
left: isRoot ? 0 : r.left,
bottom: isRoot ? $element[0].clientHeight : r.bottom,
right: isRoot ? $element[0].clientWidth : r.right
};
})()
};
};
$.fn.extend({
scrollintoview: function (options) {
/// <summary>Scrolls the first element in the set into view by scrolling its closest scrollable parent.</summary>
/// <param name="options" type="Object">Additional options that can configure scrolling:
/// duration (default: "fast") - jQuery animation speed (can be a duration string or number of milliseconds)
/// direction (default: "both") - select possible scrollings ("vertical" or "y", "horizontal" or "x", "both")
/// complete (default: none) - a function to call when scrolling completes (called in context of the DOM element being scrolled)
/// </param>
/// <return type="jQuery">Returns the same jQuery set that this function was run on.</return>
options = $.extend({}, settings, options);
options.direction = converter[typeof (options.direction) === "string" && options.direction.toLowerCase()] || converter.both;
var dirStr = "";
if (options.direction.x === true) dirStr = "horizontal";
if (options.direction.y === true) dirStr = dirStr ? "both" : "vertical";
var el = this.eq(0);
var scroller = el.closest(":scrollable(" + dirStr + ")");
// check if there's anything to scroll in the first place
if (scroller.length > 0)
{
scroller = scroller.eq(0);
var dim = {
e: dimensions(el),
s: dimensions(scroller)
};
var rel = {
top: dim.e.rect.top - (dim.s.rect.top + dim.s.border.top),
bottom: dim.s.rect.bottom - dim.s.border.bottom - dim.s.scrollbar.bottom - dim.e.rect.bottom,
left: dim.e.rect.left - (dim.s.rect.left + dim.s.border.left),
right: dim.s.rect.right - dim.s.border.right - dim.s.scrollbar.right - dim.e.rect.right
};
var animOptions = {};
// vertical scroll
if (options.direction.y === true)
{
if (rel.top < 0)
{
animOptions.scrollTop = dim.s.scroll.top + rel.top;
}
else if (rel.top > 0 && rel.bottom < 0)
{
animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom);
}
}
// horizontal scroll
if (options.direction.x === true)
{
if (rel.left < 0)
{
animOptions.scrollLeft = dim.s.scroll.left + rel.left;
}
else if (rel.left > 0 && rel.right < 0)
{
animOptions.scrollLeft = dim.s.scroll.left + Math.min(rel.left, -rel.right);
}
}
// scroll if needed
if (!$.isEmptyObject(animOptions))
{
if (rootrx.test(scroller[0].nodeName))
{
scroller = $("html,body");
}
scroller
.animate(animOptions, options.duration)
.eq(0) // we want function to be called just once (ref. "html,body")
.queue(function (next) {
$.isFunction(options.complete) && options.complete.call(scroller[0]);
next();
});
}
else
{
// when there's nothing to scroll, just call the "complete" function
$.isFunction(options.complete) && options.complete.call(scroller[0]);
}
}
// return set back
return this;
}
});
var scrollValue = {
auto: true,
scroll: true,
visible: false,
hidden: false
};
$.extend($.expr[":"], {
scrollable: function (element, index, meta, stack) {
var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both;
var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle);
var overflow = {
x: scrollValue[styles.overflowX.toLowerCase()] || false,
y: scrollValue[styles.overflowY.toLowerCase()] || false,
isRoot: rootrx.test(element.nodeName)
};
// check if completely unscrollable (exclude HTML element because it's special)
if (!overflow.x && !overflow.y && !overflow.isRoot)
{
return false;
}
var size = {
height: {
scroll: element.scrollHeight,
client: element.clientHeight
},
width: {
scroll: element.scrollWidth,
client: element.clientWidth
},
// check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars
scrollableX: function () {
return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client;
},
scrollableY: function () {
return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client;
}
};
return direction.y && size.scrollableY() || direction.x && size.scrollableX();
}
});
})(jQuery);
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