Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

255 lines (228 sloc) 9.94 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS annotation markup</title>
<link rel="stylesheet" href="css/annotator.css">
</head>
<body>
<header>
<h1>Javascript annotation service test</h1>
</header>
<div id="airlock">
<div class="annotator-wrapper">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem <span class="annotator-hl">ipsum dolor sit amet, consectetuer adipiscing</span> elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li id="listone">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li id="listtwo">Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<div class="annotator-adder"><button>Annotate</button></div>
<div class="annotator-outer annotator-viewer">
<ul class="annotator-widget annotator-listing">
<li class="annotator-annotation annotator-item">
<span class="annotator-controls">
<button class="annotator-edit">Edit</button>
<button class="annotator-delete">Delete</button>
</span>
<div>
This is a comment on this annotation text. This annotation
has multiple comments.
</div>
</li>
<li class="annotator-annotation annotator-item">
<span class="annotator-controls">
<button class="annotator-edit" disabled>Edit</button>
<button class="annotator-delete">Delete</button>
</span>
<div>
This is a <a href="comment">Comment</a> on this annotation text. This annotation
has multiple comments.
<ul>
<li>A simple list item.</li>
<li>A simple list item.</li>
</ul>
</div>
<div class="plugin annotator-author">
By Joe Bloggs
</div>
<div class="plugin annotator-tags">
<span class="annotator-tag">Apple</span>
<span class="annotator-tag">Oranges</span>
<span class="annotator-tag">Pears</span>
</div>
</li>
</ul>
</div>
<div class="annotator-outer annotator-viewer annotator-right">
<ul class="annotator-widget annotator-listing">
<li class="annotator-annotation annotator-item">
<span class="annotator-controls">
<a href="#" class="annotator-link">View as webpage</a>
<button class="annotator-edit">Edit</button>
<button class="annotator-delete">Delete</button>
</span>
<div>
This is a a a a a a a a a a a a a a a a a a a a a a a a a a comment on this annotation text. This annotation
has one comment and no plugins.
</div>
</li>
</ul>
</div>
<div class="annotator-outer annotator-editor">
<form class="annotator-widget">
<ul class="annotator-listing">
<li class="annotator-item">
<textarea cols="20" rows="4" placeholder="Comments…"></textarea>
</li>
<li class="annotator-item">
<input id="annotator-field-2" placeholder="Tags…" />
</li>
<li class="annotator-item annotator-checkbox">
<input type="checkbox" id="annotator-field-3"></textarea>
<label for="annotator-field-3">Anyone can <strong>view</strong> this annotation</label>
</li>
<li class="annotator-item annotator-checkbox">
<input type="checkbox" id="annotator-field-4"></textarea>
<label for="annotator-field-4">Anyone can <strong>edit</strong> this annotation</label>
</li>
</ul>
<div class="annotator-controls">
<a href="#cancel" class="annotator-cancel">Cancel</a>
<a href="#save" class="annotator-save annotator-focus">Save</a>
</div>
<span class="annotator-resize"></span>
</form>
<div>
</div>
</div>
<div class='annotator-notice'>
<p>This is an exciting message with a <a href="#link">Link</a>.</p>
</div>
<div class="annotator-filter">
<strong>Navigate:</strong>
<span class="annotator-filter-navigation">
<button class="annotator-filter-previous">Previous</button>
<button class="annotator-filter-next">Next</button>
</span>
<strong>Filter by:</strong>
<span class="annotator-filter-property annotator-filter-active">
<label for="annotator-filter-user">User</label>
<input type="text" id="annotator-filter-user" placeholder="Filter&hellip;" value="alice" />
<button class="annotator-filter-clear">Clear</button>
</span>
<span class="annotator-filter-property">
<label for="annotator-filter-tag">Tag</label>
<input type="text" id="annotator-filter-tag" placeholder="Filter by tag&hellip;" value="" />
<button class="annotator-filter-clear">Clear</button>
</span>
<span class="annotator-filter-property">
<label for="annotator-filter-annotation">Annotation</label>
<input type="text" id="annotator-filter-annotation" placeholder="Filter by annotation&hellip;" value="" />
<button class="annotator-filter-clear">Clear</button>
</span>
</div>
<script src="lib/vendor/jquery.js"></script>
<script>
(function ($) {
var base = (function () {
var wrapper = $('.annotator-wrapper').offset();
var annotation = $('.annotator-hl').offset();
return {
top: annotation.top - wrapper.top,
left: annotation.left - wrapper.left
};
}());
$('.annotator-adder').css({
top: base.top,
left: base.left + ($('.annotator-adder a').width() / 2)
});
$('.annotator-viewer').each(function (i) {
var viewer = $(this);
viewer.css({
top: base.top,
left: base.left + 50 + (270 * i)
});
});
$('.annotator-editor').each(function (i) {
var viewer = $(this);
viewer.css({
top: base.top + 280,
left: base.left
});
});
var mousedown = null
var editor = $('.annotator-editor');
var resize = $('.annotator-resize');
var textarea = resize.parent().find('textarea:first');
var controls = resize.parent().find('.annotator-controls');
var throttle = false;
function onMousedown(e) {
if (e.target === this) {
mousedown = {
element: this,
top: e.pageY,
left: e.pageX
};
e.preventDefault();
}
}
resize.bind('mousedown', onMousedown);
controls.bind('mousedown', onMousedown);
$(window).bind({
mouseup: function () {
mousedown = null;
},
mousemove: function (e) {
if (mousedown && throttle === false) {
var diff = {
top: e.pageY - mousedown.top,
left: e.pageX - mousedown.left
};
if (mousedown.element === resize[0]) {
var height = textarea.outerHeight();
var width = textarea.outerWidth();
textarea.height(height - diff.top);
textarea.width(width + diff.left);
// Only update the mousedown object if the dimensions
// have changed, otherwise they have reached thier minimum
// values.
if (textarea.outerHeight() !== height) {
mousedown.top = e.pageY;
}
if (textarea.outerWidth() !== width) {
mousedown.left = e.pageX;
}
}
else if (mousedown.element === controls[0]) {
editor.css({
top: parseInt(editor.css('top'), 10) + diff.top,
left: parseInt(editor.css('left'), 10) + diff.left
});
mousedown.top = e.pageY;
mousedown.left = e.pageX;
}
throttle = true;
setTimeout(function () {
throttle = false;
}, 1000/60);
}
}
});
}(jQuery));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.