Skip to content

C
coopwire-hypothesis
Commit 1b1e571a authored by Randall Leeds's avatar Randall Leeds
Browse files
Options

improved and working sidebar

parent b3ee922e
Hide whitespace changes
Inline Side-by-side
Showing with 294 additions and 42 deletions
hypothesis/js/src/hypothesis.coffee
View file @ 1b1e571a
......@@ -16,11 +16,6 @@ class Hypothesis extends Annotator
Unsupported: {}
constructor: (element, options) ->
# Create a sidebar if one does not exist. This is a singleton element
# even if multiple instances of the app are loaded on a page (some day).
@sidebar = $('#hypothesis-sidebar').get(0)
if not @sidebar?
@sidebar = $("<div class='annotator-wrapper' id='hypothesis-sidebar'></div>")
super
# Load plugins
......@@ -29,27 +24,89 @@ class Hypothesis extends Annotator
if not @plugins[name]
this.addPlugin name, opts
# Pull the viewer and editor into the sidebar, instead of the wrapper
@viewer.element.detach().appendTo(@sidebar)
@editor.element.detach().appendTo(@sidebar)
# Set up interface elements
this._setupHeatmap()._setupSidebar()
# Pull the heatmap into the sidebar
@heatmap = @plugins.Heatmap
@heatmap.element.prependTo(@sidebar)
# Drop the sidebar into the beginning of the wrapper (so it can be floated)
@sidebar.prependTo(@wrapper)
#
# Interface patching. Nasty nasty. We should make this easier.
#
# Pull the viewer and editor into the sidebar, instead of the wrapper
@viewer.element.detach().appendTo(@sidebar)
@editor.element.detach().appendTo(@sidebar)
this
onHeatmapClick: (event) =>
y = event.clientY - @wrapper.offset().top
event?.stopPropagation()
y = event.pageY - @wrapper.offset().top
target = d3.bisect(@heatmap.index, y)-1
annotations = @heatmap.buckets[target]
if annotations?.length
this.showViewer(annotations, {})
this.showViewer(annotations)
else
this.viewer.hide(event)
@sidebar.addClass('collapse')
$(document.documentElement).removeClass('hyp-collapse')
@heatmap.updateHeatmap()
showViewer: (annotations) ->
@viewer.element.find('.annotator-listing').replaceWith(
Handlebars.templates['viewer']({
annotations: annotations
})
)
@viewer.show()
$(document.documentElement).addClass('hyp-collapse')
@sidebar.removeClass('collapse')
# Sets up the selection event listeners to watch mouse actions on the document.
#
# Returns itself for chaining.
_setupDocumentEvents: ->
super
$(document).on('mousedown', () =>
@sidebar.addClass('collapse')
$(document.documentElement).removeClass('hyp-collapse')
setTimeout((() -> $(window).resize()), 600)
)
this
_setupHeatmap: () ->
# Pull the heatmap into the sidebar
@heatmap = @plugins.Heatmap
this
_setupSidebar: () ->
# Create a sidebar if one does not exist. This is a singleton element --
# even if multiple instances of the app are loaded on a page (some day).
if not @sidebar?
sidebar = $(Handlebars.templates['sidebar']())
Annotator.prototype.sidebar = sidebar
@sidebar = sidebar
@sidebar.addClass('collapse')
this
# Creates an instance of Annotator.Viewer and assigns it to the @viewer
# property, appends it to the @wrapper and sets up event listeners.
#
# Returns itself to allow chaining.
_setupViewer: ->
@viewer = new Annotator.Viewer(readOnly: @options.readOnly)
@viewer.hide()
.on("edit", this.onEditAnnotation)
.on("delete", this.onDeleteAnnotation)
.addField({
load: (field, annotation) =>
if annotation.text
$(field).escape(annotation.text)
else
$(field).html("<i>#{_t 'No Comment'}</i>")
this.publish('annotationViewerTextField', [field, annotation])
})
.element.appendTo(@wrapper)
this
hypothesis/sass/app.scss
View file @ 1b1e571a
@import 'common';
@import 'compass';
/* Annotator styles */
......@@ -33,18 +34,6 @@
cursor: pointer;
}
.annotator-resize,
.annotator-widget::after,
.annotator-editor a::after,
.annotator-viewer .annotator-controls button,
.annotator-viewer .annotator-controls a,
.annotator-filter .annotator-filter-navigation button::after,
.annotator-filter .annotator-filter-property .annotator-filter-clear {
background-image: url(../annotator/img/annotator-glyph-sprite.png);
background-repeat: no-repeat;
}
.annotator-hide {
display: none;
visibility: hidden;
......@@ -54,29 +43,230 @@
background: rgba(255, 255, 10, 0.3);
}
.annotator-outer {
@include width(5);
}
.annotator-wrapper {
position: relative;
}
/* Hypothesis Styles */
/*
* Hypothesis Styles
*/
$cool-hue: 220;
$warm-hue: 45;
$thread-padding: 1.5em;
$scorewidth: 40px;
$scoreheight: $scorewidth;
#hypothesis-sidebar {
float: right;
@mixin bodytext {
color: hsla($warm-hue, 10%, 40%, 1);
line-height: 1.2em;
text-align: left;
}
@mixin primarytext {
color: #666;
font-weight: bold;
}
@mixin secondarytext {
color: #666;
font-size: .8em;
}
html {
@include single-transition(right, 0.6s, ease-in-out);
position: absolute;
width: auto;
height: 100%;
position: relative;
z-index: 2;
right: 0;
left: 0;
}
.annotator-widget {
position: static;
width: auto;
.annotator-heatmap {
background: hsla(0, 0, 90%, 0.4);
position: absolute;
width: 10px;
left: -10px;
outline: solid $gray-lighter thin;
}
// body
.hyp-body {
margin-top: .5em;
position: relative;
.hyp-score {
position: absolute;
left: -$scorewidth / 2;
&.hyp-positive {
top: .2em;
}
&.hyp-negative {
top: -.2em;
}
&.hyp-neutral {
top: -.2em;
}
}
}
.annotator-heatmap {
.hyp-nothread {
padding-right: $thread-padding;
padding-bottom: 1em;
}
// meta - applies to the bar at the top of annotations and replies.
.hyp-meta {
@include pie-clearfix;
position: relative;
.hyp-user {
float: left;
width: 10px;
font-weight: bold;
font-size: 1.3em;
}
.hyp-time {
bottom: 0;
right: 0;
position: absolute;
}
.hyp-threadexp {
bottom: -1px;
left: -7px;
font-size: 1.8em;
font-weight: bold;
position: absolute;
}
}
// Styles for the sidebar
.hyp-sidebar {
@include single-transition(all, 0.6s, ease-in-out);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: $font-size / $em * .8;
height: 100%;
line-height: $line-height / $em * .8;
overflow: visible;
position: absolute;
right: 0;
left: 100%;
z-index: 500;
.annotator-outer {
@include single-transition(margin-left, 0.6s, ease-in-out);
background: url('../images/noise_1.png');
height: 100%;
position: fixed;
top: 0;
z-index: 501;
}
}
.hyp-sidebar.collapse {
width: 0;
margin-left: 0;
}
// Applies to the summary view of an annotation
.hyp-summary {
@include smallshadow(2px, 3px, .2);
position: relative;
background: hsla(0, 0%, 100%, 1);
cursor: pointer;
margin: 1em 1em 0 1em;
&:hover {
@include smallshadow(2px, 4px, .2);
bottom: 1px;
}
&:active {
@include smallshadow(2px, 3px, .2);
bottom: -1px;
}
}
// misc
.hyp-provider {
@extend .small;
color: $gray-light;
}
.hyp-tag {
background: #ddd;
border-radius: 2px;
border: 1px solid #999;
color: #666;
padding: .1em .4em;
padding-bottom: .2em;
}
.hyp-time {
@include secondarytext;
}
/*
Mobile layout
240–479 px
Zoomed out below 320 px
*/
@media screen and (min-width: 15em) {
.hyp-sidebar {
width: 90%;
margin-left: -90%;
.annotator-outer {
width: 90%;
}
}
}
/*
Wide mobile layout
480-767 px
Zoomed in above 480 px
*/
@media screen and (min-width: 30em) {
}
/*
Tablet layout
600-911 px
Zoomed in above 600 px
*/
@media screen and (min-width: 37.5em) {
.hyp-sidebar {
width: 400px;
margin-left: -400px;
.annotator-outer {
width: 400px;
}
}
}
\ No newline at end of file
}
/*
Widescreen layout
912-1887 px
Zoomed in above 912 px
*/
@media screen and (min-width: 57em) {
.hyp-sidebar {
margin-left: 0;
}
html.hyp-collapse {
width: auto;
right: 400px;
}
}
/*
Huge-screen layout
1888-2520 px
Zoomed in above 1920 px
*/
@media screen and (min-width: 118em) {
}
hypothesis/sass/common.scss
View file @ 1b1e571a
......@@ -176,3 +176,8 @@ h2 { @extend .big; }
h1, h2, h3 {
font-weight: 700;
}
/* Shadows */
@mixin smallshadow($a: 2px, $b: 2px, $c: .1) {
@include box-shadow($a $b 1em hsla(0, 0%, 0%, $c));
}
\ 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