Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 255 lines (228 sloc) 9.94 kB
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>JS annotation markup</title>
6 <link rel="stylesheet" href="css/annotator.css">
7 </head>
8
9 <body>
10 <header>
11 <h1>Javascript annotation service test</h1>
12 </header>
13
14 <div id="airlock">
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
15 <div class="annotator-wrapper">
16 <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>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
17
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
18 <h2>Header Level 2</h2>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
19
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
20 <ol>
21 <li>Lorem <span class="annotator-hl">ipsum dolor sit amet, consectetuer adipiscing</span> elit.</li>
22 <li>Aliquam tincidunt mauris eu risus.</li>
23 </ol>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
24
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
25 <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>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
26
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
27 <h3>Header Level 3</h3>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
28
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
29 <ul>
30 <li id="listone">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
31 <li id="listtwo">Aliquam tincidunt mauris eu risus.</li>
32 </ul>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
33
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
34 <pre><code>
35 #header h1 a {
36 display: block;
37 width: 300px;
38 height: 80px;
39 }
40 </code></pre>
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
41
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
42 <div class="annotator-adder"><button>Annotate</button></div>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
43 <div class="annotator-outer annotator-viewer">
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
44 <ul class="annotator-widget annotator-listing">
45 <li class="annotator-annotation annotator-item">
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
46 <span class="annotator-controls">
47 <button class="annotator-edit">Edit</button>
48 <button class="annotator-delete">Delete</button>
49 </span>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
50 <div>
51 This is a comment on this annotation text. This annotation
52 has multiple comments.
53 </div>
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
54 </li>
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
55 <li class="annotator-annotation annotator-item">
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
56 <span class="annotator-controls">
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
57 <button class="annotator-edit" disabled>Edit</button>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
58 <button class="annotator-delete">Delete</button>
59 </span>
60 <div>
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
61 This is a <a href="comment">Comment</a> on this annotation text. This annotation
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
62 has multiple comments.
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
63 <ul>
64 <li>A simple list item.</li>
65 <li>A simple list item.</li>
66 </ul>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
67 </div>
68 <div class="plugin annotator-author">
69 By Joe Bloggs
70 </div>
71 <div class="plugin annotator-tags">
72 <span class="annotator-tag">Apple</span>
73 <span class="annotator-tag">Oranges</span>
74 <span class="annotator-tag">Pears</span>
75 </div>
c0f5245 @aron Styled the form fields of the annotator editor
aron authored
76 </li>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
77 </ul>
78 </div>
2bab970 @aron Added support for right aligning messages so they don't appear offscreen
aron authored
79 <div class="annotator-outer annotator-viewer annotator-right">
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
80 <ul class="annotator-widget annotator-listing">
81 <li class="annotator-annotation annotator-item">
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
82 <span class="annotator-controls">
e640c92 @nickstenning Add permalink detection and display to Viewer.
nickstenning authored
83 <a href="#" class="annotator-link">View as webpage</a>
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
84 <button class="annotator-edit">Edit</button>
85 <button class="annotator-delete">Delete</button>
86 </span>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
87 <div>
aa7ca1c @aron Now displaying controls whenever an annotation is hovered. Fixes #27
aron authored
88 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
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
89 has one comment and no plugins.
90 </div>
c0f5245 @aron Styled the form fields of the annotator editor
aron authored
91 </li>
92 </ul>
93 </div>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
94 <div class="annotator-outer annotator-editor">
bfccfaa @aron Annotator editor is now uses a form to enable submit events. Ticket #14
aron authored
95 <form class="annotator-widget">
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
96 <ul class="annotator-listing">
97 <li class="annotator-item">
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
98 <textarea cols="20" rows="4" placeholder="Comments…"></textarea>
99 </li>
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
100 <li class="annotator-item">
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
101 <input id="annotator-field-2" placeholder="Tags…" />
102 </li>
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
103 <li class="annotator-item annotator-checkbox">
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
104 <input type="checkbox" id="annotator-field-3"></textarea>
105 <label for="annotator-field-3">Anyone can <strong>view</strong> this annotation</label>
106 </li>
6fa92bf @aron Updated the stylesheet to prevent default styles being overridden
aron authored
107 <li class="annotator-item annotator-checkbox">
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
108 <input type="checkbox" id="annotator-field-4"></textarea>
109 <label for="annotator-field-4">Anyone can <strong>edit</strong> this annotation</label>
110 </li>
111 </ul>
112 <div class="annotator-controls">
113 <a href="#cancel" class="annotator-cancel">Cancel</a>
114 <a href="#save" class="annotator-save annotator-focus">Save</a>
115 </div>
116 <span class="annotator-resize"></span>
bfccfaa @aron Annotator editor is now uses a form to enable submit events. Ticket #14
aron authored
117 </form>
6d8a1d9 @aron Now wrapping all widgets in a wrapper to make positioning easier
aron authored
118 <div>
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
119 </div>
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
120 </div>
121
2f7757e @aron Added show class back to the notification. Ticket #14
aron authored
122 <div class='annotator-notice'>
09d17a6 @aron Updated the notification styles. Ticket #14
aron authored
123 <p>This is an exciting message with a <a href="#link">Link</a>.</p>
124 </div>
125
10db8e5 @aron Added basic HTML for the Filter bar plugin. Ticket #8
aron authored
126 <div class="annotator-filter">
b3a673f @aron Began marking up the filter bar. Ticket #8
aron authored
127 <strong>Navigate:</strong>
10db8e5 @aron Added basic HTML for the Filter bar plugin. Ticket #8
aron authored
128 <span class="annotator-filter-navigation">
129 <button class="annotator-filter-previous">Previous</button>
130 <button class="annotator-filter-next">Next</button>
131 </span>
b3a673f @aron Began marking up the filter bar. Ticket #8
aron authored
132 <strong>Filter by:</strong>
133 <span class="annotator-filter-property annotator-filter-active">
134 <label for="annotator-filter-user">User</label>
135 <input type="text" id="annotator-filter-user" placeholder="Filter&hellip;" value="alice" />
1bd90f8 @aron Filter plugin: Added a clear button to each filter. Ticket #8
aron authored
136 <button class="annotator-filter-clear">Clear</button>
b3a673f @aron Began marking up the filter bar. Ticket #8
aron authored
137 </span>
138 <span class="annotator-filter-property">
139 <label for="annotator-filter-tag">Tag</label>
140 <input type="text" id="annotator-filter-tag" placeholder="Filter by tag&hellip;" value="" />
1bd90f8 @aron Filter plugin: Added a clear button to each filter. Ticket #8
aron authored
141 <button class="annotator-filter-clear">Clear</button>
b3a673f @aron Began marking up the filter bar. Ticket #8
aron authored
142 </span>
143 <span class="annotator-filter-property">
144 <label for="annotator-filter-annotation">Annotation</label>
145 <input type="text" id="annotator-filter-annotation" placeholder="Filter by annotation&hellip;" value="" />
1bd90f8 @aron Filter plugin: Added a clear button to each filter. Ticket #8
aron authored
146 <button class="annotator-filter-clear">Clear</button>
b3a673f @aron Began marking up the filter bar. Ticket #8
aron authored
147 </span>
10db8e5 @aron Added basic HTML for the Filter bar plugin. Ticket #8
aron authored
148 </div>
149
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
150 <script src="lib/vendor/jquery.js"></script>
151 <script>
152 (function ($) {
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
153 var base = (function () {
154 var wrapper = $('.annotator-wrapper').offset();
155 var annotation = $('.annotator-hl').offset();
156 return {
157 top: annotation.top - wrapper.top,
158 left: annotation.left - wrapper.left
159 };
160 }());
161
162 $('.annotator-adder').css({
163 top: base.top,
164 left: base.left + ($('.annotator-adder a').width() / 2)
165 });
c23f52a @aron Styled the basic annotation viewer
aron authored
166
167 $('.annotator-viewer').each(function (i) {
168 var viewer = $(this);
169
170 viewer.css({
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
171 top: base.top,
c23f52a @aron Styled the basic annotation viewer
aron authored
172 left: base.left + 50 + (270 * i)
173 });
434f4bc @aron Created new markup for the annotation viewer. Ticket #14
aron authored
174 });
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
175
c0f5245 @aron Styled the form fields of the annotator editor
aron authored
176 $('.annotator-editor').each(function (i) {
177 var viewer = $(this);
178
179 viewer.css({
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
180 top: base.top + 280,
c0f5245 @aron Styled the form fields of the annotator editor
aron authored
181 left: base.left
182 });
183 });
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
184
e18a22f @aron Added some JavaScript to allow the editor to be draggable. Ticket #14
aron authored
185 var mousedown = null
186 var editor = $('.annotator-editor');
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
187 var resize = $('.annotator-resize');
188 var textarea = resize.parent().find('textarea:first');
e18a22f @aron Added some JavaScript to allow the editor to be draggable. Ticket #14
aron authored
189 var controls = resize.parent().find('.annotator-controls');
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
190 var throttle = false;
191
e18a22f @aron Added some JavaScript to allow the editor to be draggable. Ticket #14
aron authored
192 function onMousedown(e) {
f624abc @aron Disabled dragging of editor when clicking on the buttons. Ticket #14
aron authored
193 if (e.target === this) {
194 mousedown = {
195 element: this,
196 top: e.pageY,
197 left: e.pageX
198 };
199 e.preventDefault();
200 }
e18a22f @aron Added some JavaScript to allow the editor to be draggable. Ticket #14
aron authored
201 }
202
203 resize.bind('mousedown', onMousedown);
204 controls.bind('mousedown', onMousedown);
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
205
206 $(window).bind({
207 mouseup: function () {
208 mousedown = null;
209 },
210 mousemove: function (e) {
211 if (mousedown && throttle === false) {
e18a22f @aron Added some JavaScript to allow the editor to be draggable. Ticket #14
aron authored
212 var diff = {
213 top: e.pageY - mousedown.top,
214 left: e.pageX - mousedown.left
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
215 };
216
e18a22f @aron Added some JavaScript to allow the editor to be draggable. Ticket #14
aron authored
217 if (mousedown.element === resize[0]) {
218 var height = textarea.outerHeight();
219 var width = textarea.outerWidth();
220
221 textarea.height(height - diff.top);
222 textarea.width(width + diff.left);
223
224 // Only update the mousedown object if the dimensions
225 // have changed, otherwise they have reached thier minimum
226 // values.
227 if (textarea.outerHeight() !== height) {
228 mousedown.top = e.pageY;
229 }
230 if (textarea.outerWidth() !== width) {
231 mousedown.left = e.pageX;
232 }
233 }
234 else if (mousedown.element === controls[0]) {
235 editor.css({
236 top: parseInt(editor.css('top'), 10) + diff.top,
237 left: parseInt(editor.css('left'), 10) + diff.left
238 });
239
240 mousedown.top = e.pageY;
241 mousedown.left = e.pageX;
242 }
243
6b64a4c @aron Added some basic JavaScript to handle resizing the editor. Ticket #14
aron authored
244 throttle = true;
245 setTimeout(function () {
246 throttle = false;
247 }, 1000/60);
248 }
249 }
250 });
b2aa121 @aron Updated the annotation icon with the new design. Ticket #14
aron authored
251 }(jQuery));
252 </script>
253 </body>
254 </html>
Something went wrong with that request. Please try again.