Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit aed64b8

Browse files
knowtheoryknowtheory
committed
Hacky extraction of DOM metadata from template into View code.
1 parent 9d150b8 commit aed64b8

File tree

3 files changed

+145
-135
lines changed

3 files changed

+145
-135
lines changed

‎public/javascripts/DV/templates/annotation.jst‎

Lines changed: 72 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,91 @@
1-
<div class="DV-annotation <%= orderClass %> <%= accessClass %> <% if (owns_note) { %>DV-ownsAnnotation<% } %>" style="top:<%= top %>px;" id="DV-annotation-<%= id %>" data-id="<%= id %>">
2-
3-
<div class="DV-annotationTab" style="top:<%= tabTop %>px;">
4-
<div class="DV-annotationClose DV-trigger">
5-
<% if (access == 'exclusive') { %>
6-
<div class="DV-annotationDraftDot DV-editHidden"></div>
7-
<% } %>
8-
</div>
1+
<div class="DV-annotationTab" style="top:<%= tabTop %>px;">
2+
<div class="DV-annotationClose DV-trigger">
3+
<% if (access == 'exclusive') { %>
4+
<div class="DV-annotationDraftDot DV-editHidden"></div>
5+
<% } %>
96
</div>
7+
</div>
108

11-
<div class="DV-annotationRegion" style="margin-left:<%= excerptMarginLeft - 4 %>px; height:<%= excerptHeight %>px; width:<%= excerptWidth - 1 %>px;">
12-
<div class="<%= accessClass %>">
13-
<div class="DV-annotationEdge DV-annotationEdgeTop"></div>
14-
<div class="DV-annotationEdge DV-annotationEdgeRight"></div>
15-
<div class="DV-annotationEdge DV-annotationEdgeBottom"></div>
16-
<div class="DV-annotationEdge DV-annotationEdgeLeft"></div>
17-
<div class="DV-annotationCorner DV-annotationCornerTopLeft"></div>
18-
<div class="DV-annotationCorner DV-annotationCornerTopRight"></div>
19-
<div class="DV-annotationCorner DV-annotationCornerBottomLeft"></div>
20-
<div class="DV-annotationCorner DV-annotationCornerBottomRight"></div>
21-
</div>
22-
<div class="DV-annotationRegionExclusive"></div>
9+
<div class="DV-annotationRegion" style="margin-left:<%= excerptMarginLeft - 4 %>px; height:<%= excerptHeight %>px; width:<%= excerptWidth - 1 %>px;">
10+
<div class="<%= accessClass %>">
11+
<div class="DV-annotationEdge DV-annotationEdgeTop"></div>
12+
<div class="DV-annotationEdge DV-annotationEdgeRight"></div>
13+
<div class="DV-annotationEdge DV-annotationEdgeBottom"></div>
14+
<div class="DV-annotationEdge DV-annotationEdgeLeft"></div>
15+
<div class="DV-annotationCorner DV-annotationCornerTopLeft"></div>
16+
<div class="DV-annotationCorner DV-annotationCornerTopRight"></div>
17+
<div class="DV-annotationCorner DV-annotationCornerBottomLeft"></div>
18+
<div class="DV-annotationCorner DV-annotationCornerBottomRight"></div>
2319
</div>
20+
<div class="DV-annotationRegionExclusive"></div>
21+
</div>
2422

2523

26-
<div class="DV-annotationContent">
24+
<div class="DV-annotationContent">
2725

28-
<div class="DV-annotationHeader DV-clearfix">
29-
<div class="DV-pagination DV-editHidden">
30-
<span class="DV-trigger DV-annotationPrevious" title="Previous Annotation">Previous</span>
31-
<span class="DV-trigger DV-annotationNext" title="Next Annotation">Next</span>
32-
</div>
33-
<div class="DV-annotationGoto DV-editHidden"><div class="DV-trigger">p. <%= pageNumber %></div></div>
34-
<div class="DV-annotationTitle DV-editHidden"><%= title %></div>
35-
<input class="DV-annotationTitleInput DV-editVisible" type="text" placeholder="Annotation Title" value="<%= title.replace(/"/g, '&quot;') %>" />
36-
<% if (access == 'exclusive') { %>
37-
<div class="DV-annotationDraftLabel DV-editHidden DV-interface">Draft</div>
38-
<% } else if (access == 'private') { %>
39-
<div class="DV-privateLock DV-editHidden" title="Private note"></div>
40-
<% } %>
41-
<span class="DV-permalink DV-editHidden" title="Link to this note"></span>
42-
<div class="DV-showEdit DV-editHidden <%= accessClass %>"></div>
26+
<div class="DV-annotationHeader DV-clearfix">
27+
<div class="DV-pagination DV-editHidden">
28+
<span class="DV-trigger DV-annotationPrevious" title="Previous Annotation">Previous</span>
29+
<span class="DV-trigger DV-annotationNext" title="Next Annotation">Next</span>
4330
</div>
31+
<div class="DV-annotationGoto DV-editHidden"><div class="DV-trigger">p. <%= pageNumber %></div></div>
32+
<div class="DV-annotationTitle DV-editHidden"><%= title %></div>
33+
<input class="DV-annotationTitleInput DV-editVisible" type="text" placeholder="Annotation Title" value="<%= title.replace(/"/g, '&quot;') %>" />
34+
<% if (access == 'exclusive') { %>
35+
<div class="DV-annotationDraftLabel DV-editHidden DV-interface">Draft</div>
36+
<% } else if (access == 'private') { %>
37+
<div class="DV-privateLock DV-editHidden" title="Private note"></div>
38+
<% } %>
39+
<span class="DV-permalink DV-editHidden" title="Link to this note"></span>
40+
<div class="DV-showEdit DV-editHidden <%= accessClass %>"></div>
41+
</div>
4442

4543

46-
<div class="DV-annotationExcerpt" style="height:<%= excerptHeight %>px;">
47-
<div class="DV-annotationExcerptImageTop" style="height:<%= excerptHeight %>px; width:<%= excerptWidth %>px;left:<%= excerptMarginLeft - 1 %>px;">
44+
<div class="DV-annotationExcerpt" style="height:<%= excerptHeight %>px;">
45+
<div class="DV-annotationExcerptImageTop" style="height:<%= excerptHeight %>px; width:<%= excerptWidth %>px;left:<%= excerptMarginLeft - 1 %>px;">
4846

49-
<img class="DV-img" src="<%= image %>" style="left:<%= -(excerptMarginLeft + 1) %>px; top:-<%= imageTop %>px;" width="<%= imageWidth %>" />
47+
<img class="DV-img" src="<%= image %>" style="left:<%= -(excerptMarginLeft + 1) %>px; top:-<%= imageTop %>px;" width="<%= imageWidth %>" />
5048

51-
</div>
52-
<div class="DV-annotationExcerptImage" style="height:<%= excerptHeight %>px;">
53-
<img class="DV-img" src="<%= image %>" style="top:-<%= imageTop %>px;" width="<%= imageWidth %>" />
54-
</div>
5549
</div>
56-
57-
<div class="DV-annotationBody DV-editHidden">
58-
<%= text %>
50+
<div class="DV-annotationExcerptImage" style="height:<%= excerptHeight %>px;">
51+
<img class="DV-img" src="<%= image %>" style="top:-<%= imageTop %>px;" width="<%= imageWidth %>" />
5952
</div>
60-
<textarea class="DV-annotationTextArea DV-editVisible" style="width: <%= bWidth %>px;"><%= text %></textarea>
53+
</div>
6154

62-
<div class="DV-annotationMeta <%= accessClass %>">
63-
<% if (author) { %>
64-
<div class="DV-annotationAuthor DV-interface DV-editHidden">
65-
Annotated by: <%= author %><% if (author_organization) { %>, <i><%= author_organization %></i><% } %>
66-
</div>
67-
<% } %>
68-
<% if (access == 'exclusive') { %>
69-
<div class="DV-annotationWarning DV-interface DV-editHidden">
70-
This draft is only visible to you and collaborators.
71-
</div>
72-
<% } else if (access == 'private') { %>
73-
<div class="DV-annotationWarning DV-interface DV-editHidden">
74-
This private note is only visible to you.
75-
</div>
76-
<% } %>
77-
<div class="DV-annotationEditControls DV-editVisible">
78-
<div class="DV-clearfix">
79-
<div class="DV-minibutton warn DV-deleteAnnotation float_left">Delete</div>
80-
<div class="DV-minibutton default DV-saveAnnotation float_right">
81-
<% if (access == 'exclusive') { %>
82-
Publish
83-
<% } else { %>
84-
Save
85-
<% } %>
86-
</div>
87-
<% if (access == 'public' || access == 'exclusive') { %>
88-
<div class="DV-minibutton DV-saveAnnotationDraft float_right">Save as Draft</div>
55+
<div class="DV-annotationBody DV-editHidden">
56+
<%= text %>
57+
</div>
58+
<textarea class="DV-annotationTextArea DV-editVisible" style="width: <%= bWidth %>px;"><%= text %></textarea>
59+
60+
<div class="DV-annotationMeta <%= accessClass %>">
61+
<% if (author) { %>
62+
<div class="DV-annotationAuthor DV-interface DV-editHidden">
63+
Annotated by: <%= author %><% if (author_organization) { %>, <i><%= author_organization %></i><% } %>
64+
</div>
65+
<% } %>
66+
<% if (access == 'exclusive') { %>
67+
<div class="DV-annotationWarning DV-interface DV-editHidden">
68+
This draft is only visible to you and collaborators.
69+
</div>
70+
<% } else if (access == 'private') { %>
71+
<div class="DV-annotationWarning DV-interface DV-editHidden">
72+
This private note is only visible to you.
73+
</div>
74+
<% } %>
75+
<div class="DV-annotationEditControls DV-editVisible">
76+
<div class="DV-clearfix">
77+
<div class="DV-minibutton warn DV-deleteAnnotation float_left">Delete</div>
78+
<div class="DV-minibutton default DV-saveAnnotation float_right">
79+
<% if (access == 'exclusive') { %>
80+
Publish
81+
<% } else { %>
82+
Save
8983
<% } %>
90-
<div class="DV-minibutton DV-cancelEdit float_right">Cancel</div>
9184
</div>
85+
<% if (access == 'public' || access == 'exclusive') { %>
86+
<div class="DV-minibutton DV-saveAnnotationDraft float_right">Save as Draft</div>
87+
<% } %>
88+
<div class="DV-minibutton DV-cancelEdit float_right">Cancel</div>
9289
</div>
9390
</div>
9491
</div>

‎public/javascripts/DV/templates/pageAnnotation.jst‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,60 @@
1-
<div class="DV-annotation DV-pageNote <%= orderClass %> <%= accessClass %> <% if (owns_note) { %>DV-ownsAnnotation<% } %>" style="top:<%= top %>px;" id="DV-annotation-<%= id %>" data-id="<%= id %>">
2-
<div class="DV-annotationTab">
3-
<div class="DV-annotationClose DV-trigger">p. <%= pageNumber %></div>
4-
</div>
1+
<div class="DV-annotationTab">
2+
<div class="DV-annotationClose DV-trigger">p. <%= pageNumber %></div>
3+
</div>
54

6-
<div class="DV-annotationContent">
7-
<!-- Header -->
8-
<div class="DV-annotationHeader DV-clearfix">
9-
<div class="DV-pagination DV-editHidden">
10-
<span class="DV-trigger DV-annotationPrevious" title="Previous Annotation">Previous</span>
11-
<span class="DV-trigger DV-annotationNext" title="Next Annotation">Next</span>
12-
</div>
13-
<div class="DV-annotationGoto DV-editHidden"><div class="DV-trigger">p. <%= pageNumber %></div></div>
14-
<div class="DV-annotationTitle DV-editHidden"><%= title %></div>
15-
<input class="DV-annotationTitleInput DV-editVisible" type="text" placeholder="Annotation Title" value="<%= title.replace(/"/g, '&quot;') %>" />
16-
<% if (access == 'exclusive') { %>
17-
<div class="DV-annotationDraftLabel DV-editHidden DV-interface">Draft</div>
18-
<% } else if (access == 'private') { %>
19-
<div class="DV-privateLock DV-editHidden" title="Private note"></div>
20-
<% } %>
21-
<span class="DV-permalink DV-editHidden" title="Link to this note"></span>
22-
<div class="DV-showEdit DV-editHidden <%= accessClass %>"></div>
5+
<div class="DV-annotationContent">
6+
<!-- Header -->
7+
<div class="DV-annotationHeader DV-clearfix">
8+
<div class="DV-pagination DV-editHidden">
9+
<span class="DV-trigger DV-annotationPrevious" title="Previous Annotation">Previous</span>
10+
<span class="DV-trigger DV-annotationNext" title="Next Annotation">Next</span>
2311
</div>
12+
<div class="DV-annotationGoto DV-editHidden"><div class="DV-trigger">p. <%= pageNumber %></div></div>
13+
<div class="DV-annotationTitle DV-editHidden"><%= title %></div>
14+
<input class="DV-annotationTitleInput DV-editVisible" type="text" placeholder="Annotation Title" value="<%= title.replace(/"/g, '&quot;') %>" />
15+
<% if (access == 'exclusive') { %>
16+
<div class="DV-annotationDraftLabel DV-editHidden DV-interface">Draft</div>
17+
<% } else if (access == 'private') { %>
18+
<div class="DV-privateLock DV-editHidden" title="Private note"></div>
19+
<% } %>
20+
<span class="DV-permalink DV-editHidden" title="Link to this note"></span>
21+
<div class="DV-showEdit DV-editHidden <%= accessClass %>"></div>
22+
</div>
2423

25-
<div class="DV-annotationBody DV-editHidden">
26-
<%= text %>
27-
</div>
28-
<textarea class="DV-annotationTextArea DV-editVisible" style="width: <%= bWidth %>px;"><%= text %></textarea>
24+
<div class="DV-annotationBody DV-editHidden">
25+
<%= text %>
26+
</div>
27+
<textarea class="DV-annotationTextArea DV-editVisible" style="width: <%= bWidth %>px;"><%= text %></textarea>
2928

30-
<div class="DV-annotationMeta <%= accessClass %>">
31-
<% if (author) { %>
32-
<div class="DV-annotationAuthor DV-interface DV-editHidden">
33-
Annotated by: <%= author %><% if (author_organization) { %>, <i><%= author_organization %></i><% } %>
34-
</div>
35-
<% } %>
36-
<% if (access == 'exclusive') { %>
37-
<div class="DV-annotationWarning DV-interface DV-editHidden">
38-
This draft is only visible to you and collaborators.
39-
</div>
40-
<% } else if (access == 'private') { %>
41-
<div class="DV-annotationWarning DV-interface DV-editHidden">
42-
This private note is only visible to you.
43-
</div>
44-
<% } %>
45-
<div class="DV-annotationEditControls DV-editVisible">
46-
<div class="DV-clearfix">
47-
<div class="DV-minibutton warn DV-deleteAnnotation float_left">Delete</div>
48-
<div class="DV-minibutton default DV-saveAnnotation float_right">
49-
<% if (access == 'exclusive') { %>
50-
Publish
51-
<% } else { %>
52-
Save
53-
<% } %>
54-
</div>
55-
<% if (access == 'public' || access == 'exclusive') { %>
56-
<div class="DV-minibutton DV-saveAnnotationDraft float_right">Save as Draft</div>
29+
<div class="DV-annotationMeta <%= accessClass %>">
30+
<% if (author) { %>
31+
<div class="DV-annotationAuthor DV-interface DV-editHidden">
32+
Annotated by: <%= author %><% if (author_organization) { %>, <i><%= author_organization %></i><% } %>
33+
</div>
34+
<% } %>
35+
<% if (access == 'exclusive') { %>
36+
<div class="DV-annotationWarning DV-interface DV-editHidden">
37+
This draft is only visible to you and collaborators.
38+
</div>
39+
<% } else if (access == 'private') { %>
40+
<div class="DV-annotationWarning DV-interface DV-editHidden">
41+
This private note is only visible to you.
42+
</div>
43+
<% } %>
44+
<div class="DV-annotationEditControls DV-editVisible">
45+
<div class="DV-clearfix">
46+
<div class="DV-minibutton warn DV-deleteAnnotation float_left">Delete</div>
47+
<div class="DV-minibutton default DV-saveAnnotation float_right">
48+
<% if (access == 'exclusive') { %>
49+
Publish
50+
<% } else { %>
51+
Save
5752
<% } %>
58-
<div class="DV-minibutton DV-cancelEdit float_right">Cancel</div>
5953
</div>
54+
<% if (access == 'public' || access == 'exclusive') { %>
55+
<div class="DV-minibutton DV-saveAnnotationDraft float_right">Save as Draft</div>
56+
<% } %>
57+
<div class="DV-minibutton DV-cancelEdit float_right">Cancel</div>
6058
</div>
6159
</div>
6260
</div>

‎public/javascripts/DV/views/note.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,26 @@ DV.view.Note = DV.Backbone.View.extend({
5858
if (note === this.viewer.model.notes.first()) adata.orderClass += ' DV-firstAnnotation';
5959
if (note === this.viewer.model.notes.last()) { adata.orderClass += ' DV-lastAnnotation'; }
6060

61-
var template = (adata.type === 'page') ? 'pageAnnotation' : 'annotation';
62-
this.html = JST[template](adata);
63-
return this.html;
61+
var className
62+
if (adata.type === 'page') {
63+
this.$el.html(JST['pageAnnotation'](adata));
64+
className = 'DV-annotation DV-pageNote ' + adata.orderClass +" "+ adata.accessClass +" "+ (adata.owns_note ? 'DV-ownsAnnotation' : '');
65+
} else {
66+
this.$el.html(JST['annotation'](adata));
67+
className = 'DV-annotation ' + adata.orderClass +" "+ adata.accessClass +" "+ (adata.owns_note ? 'DV-ownsAnnotation' : '');
68+
}
69+
this.$el.attr('class', className);
70+
this.$el.attr('style', 'top:'+adata.top+'px');
71+
this.$el.attr('id', 'DV-annotation-'+adata.id);
72+
this.$el.attr('data-id', adata.id);
73+
return this.$el;
6474
}
6575
});
6676

6777
// The NoteList is used to generate the AnnotationView display.
6878
DV.view.ViewAnnotations = DV.Backbone.View.extend({
79+
className: 'DV-allAnnotations',
80+
6981
initialize: function(options) {
7082
this.viewer = options.viewer;
7183
this.collection = (options.collection || this.viewer.model.notes);
@@ -90,10 +102,13 @@ DV.view.ViewAnnotations = DV.Backbone.View.extend({
90102
// return 'id="DV-listAnnotation-' + id + '" rel="aid-' + id + '"';
91103
//});
92104
//this.$el.html(html);
93-
var noteViewEls = _.map(this.noteViews, function(noteView){
94-
noteView.$el.html(noteView.render());
95-
return noteView.$el;
96-
}, this);
105+
var noteViewEls = _.map(this.noteViews, function(noteView){
106+
var el = noteView.render();
107+
var noteId = noteView.model.id;
108+
el.attr('id', 'DV-listAnnotation-' + noteId);
109+
el.attr('rel', 'aid-' + noteId);
110+
return el;
111+
});
97112
this.$el.append(noteViewEls);
98113

99114
// TODO: This is hacky, but seems to be necessary. When fixing, be sure to

0 commit comments

Comments
 (0)