Skip to content

Commit 8ab7c1c

Browse files
ArtforgeArtforge
committed
Annotations jQuery plugin
1 parent 9a7aaf1 commit 8ab7c1c

File tree

10 files changed

+1803
-106
lines changed

10 files changed

+1803
-106
lines changed

‎public/drag_drop_text/index.html

Lines changed: 102 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,98 +4,136 @@
44
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
55
<title>Drag & Drop Text</title>
66

7-
8-
97
<script type="text/javascript" src="/javascripts/jquery-1.4.min.js"></script>
108
<script type="text/javascript" src="/javascripts/jquery.highlight.js"></script>
11-
<script type="text/javascript">
12-
var highlights = [];
13-
14-
$(document).ready(function(){
9+
<script type="text/javascript" src="/javascripts/jquery.autocomplete.js"></script>
10+
<script type="text/javascript" src="/javascripts/jquery.annotation.js"></script>
1511

16-
$("#dropzone .insight .trash").live("click", function(){
17-
insightDiv = $(this).parents(".insight")
18-
spanId = insightDiv.data("highlight");
19-
highlightSpan = document.getElementById(spanId);
20-
// console.log(highlightSpan);
21-
$("#post").removeHighlight_with_id(spanId);
22-
$(insightDiv).fadeOut();
23-
});
24-
25-
$("#dropzone .insight").live("mouseover", function(){
26-
selection = $(this).find(".excerpt").html()
27-
$("#post").highlight(selection);
28-
});
29-
30-
$("#dropzone .insight").live("mouseout", function(){
31-
// selection = $(this).html();
32-
$("#post").removeHighlight();
33-
});
34-
35-
36-
$('#post').mouseup(function(e){
37-
var selection = getSelected();
38-
// console.log(selection);
39-
if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
40-
// highlights.push(selection);
41-
insightDiv = $('<div>').attr({id: "insight_" + highlights.length, class: "insight"}).hide();
42-
insightExcerpt = $('<span>').html(selection).attr({class: "excerpt"});
43-
insightDiv.append(insightExcerpt);
44-
// insightDiv.data("highlight", "highlight_" + highlights.length);
45-
toolsDiv = $('<div>').attr({class: "actions"});
46-
toolsDiv.append($('<span>').attr({class: "edit", title: "Edit this excerpt"}));
47-
toolsDiv.append($('<span>').attr({class: "trash", title: "Delete this excerpt"}));
48-
toolsDiv.append($('<span>').attr({class: "comment", title: "Comment on this excerpt"}));
49-
insightDiv.append(toolsDiv);
50-
$("#dropzone").append(insightDiv);
51-
insightDiv.fadeIn();
52-
// $("#post").highlight_with_id(selection, "highlight_" + highlights.length);
53-
}
54-
});
12+
<script type="text/javascript">
13+
14+
var system_insights = eval(['black', 'white', 'red', 'green', 'blue', 'yellow', 'purple', 'brown', 'silver', 'magenta', 'cyan', 'gold', 'goldenrod']);
5515

56-
});
57-
5816
function getSelected() {
59-
if(window.getSelection) { return window.getSelection(); }
60-
else if(document.getSelection) { return document.getSelection(); }
61-
else {
17+
if (window.getSelection) {
18+
return window.getSelection();
19+
} else if(document.getSelection) {
20+
return document.getSelection();
21+
} else {
6222
var selection = document.selection && document.selection.createRange();
6323
if(selection.text) { return selection.text; }
6424
return false;
6525
}
6626
return false;
6727
}
6828

69-
29+
function hilite(excerpt){
30+
$("#post").highlight(excerpt);
31+
}
32+
33+
function unHilite(){
34+
$("#post").removeHighlight();
35+
}
36+
37+
$(document).ready(function(){
38+
var tmp_note = $('#hidden_templates .annotation');
39+
40+
$('#post').mouseup(function(e){
41+
var selection = getSelected();
42+
if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
43+
$("#dropzone").append($('<div>').annotation(selection,{template: tmp_note, available_insights: "tokens.js", onMouseOver: hilite, onMouseOut: unHilite }).fadeIn());
44+
}
45+
});
46+
});
47+
7048
</script>
7149

50+
<link rel="stylesheet" href="../stylesheets/jquery.autocomplete.css" type="text/css" media="screen" title="no title" charset="utf-8">
51+
7252
<style type="text/css">
73-
#post{width:75%;float:left;}
74-
#sidebar{width:25%;float:right;}
75-
#dropzone{height:300px;border:3px double red;margin:10px;padding:10px;}
53+
body{font-family:arial;font-size:10pt;}
54+
.clr{clear:both;}
55+
#page{width:1000px;}
56+
#post{width:600px;float:left;padding:20px 10px 10px;}
57+
#sidebar{width:350px;float:right;}
58+
#dropzone{min-height:300px;border:1px dashed red;margin:10px;}
7659

77-
.insight{border:1px dashed #ccc;padding:5px;margin:5px;}
60+
.annotation{background:#fafafa;border:1px solid #ccc;margin:5px 5px 10px;}
7861

7962
.highlight { background-color: yellow; padding:auto 3px;}
63+
.excerpt_holder{padding:5px;}
8064
.excerpt{margin-right:5px;}
8165
.actions{display:inline-block;}
82-
.actions span{display:inline-block;width:12px;height:14px;vertical-align:middle;margin:0px 3px 2px;}
83-
.actions .edit{background:url(/images/insights/edit.gif) no-repeat 1px 0px;}
84-
.actions .trash{background:url(/images/insights/trash.gif) no-repeat 1px 2px;}
85-
.actions .comment{background:url(/images/insights/comment.gif) no-repeat 1px 2px;}
66+
.actions span{display:inline-block;width:12px;height:14px;vertical-align:middle;margin:0px 3px 2px;cursor:pointer;}
67+
.actions span.edit{background:url(/images/insights/edit.gif) no-repeat 1px 0px;}
68+
.actions span.trash{background:url(/images/insights/trash.gif) no-repeat 1px 2px;}
69+
.actions span.comment{background:url(/images/insights/comment.gif) no-repeat 1px 2px;}
70+
.actions span.attach{background:url(/images/insights/briefcase.gif) no-repeat 1px 2px;}
71+
72+
.insight_form{border-top:1px dashed #ccc;padding:5px;}
73+
74+
.insights{background:#fff;border-top:1px dashed #ccc;padding:2px 5px;}
75+
.insight{float:left;margin-right:5px;padding:3px;}
76+
.insight a{cursor:pointer;display:inline-block;color:transparent;width:10px;margin-right:3px;background:url("/images/insights/x-ind.gif") no-repeat 0px 5px;}
77+
.insight a:hover{background:url("/images/insights/x-ind.gif") no-repeat -10px 5px;}
78+
79+
div.comment{border-top:1px dashed #ccc;padding:5px 8px 5px 6px;text-align:right;}
80+
div.comment textarea{width:100%;height:50px;margin-bottom:5px;padding:1px;}
81+
div.comment .comment_button{}
8682
</style>
8783
</head>
8884

8985
<body id="home">
90-
<div id="post">
91-
<p>My experiences have all been awful. There has been no "light at the end of the tunnel," no blessing in disguise and no valuable learning experience. It's all very negative. It has been a terrible, terrible experience. This disease is really one of the worst. It hits during the dead center of the prime of life and just slowly destroys us. The old term of creeping paralysis is very appropriate. I spend hours thinking about all this disease has stolen from me and worse yet, I wonder about the things I don't realize that I've lost. What would life be like had this not happened? What experiences have I missed? There's a whole world out there and I can scarcely take part in it.</p>
92-
<p>If I had to find a specific experience, or set of experiences, that defined my MS struggle it would be the month I spent in Baltimore being treated. It took part in a risky, difficult trial involving high doses of chemotherapy. This is an example of the lengths I was willing to go to preserve functioning. I told the doctor at JH that I'd drink a gallon of gasoline if it would preserve the use of my body.</p>
86+
<div id="page">
87+
<div id="post">
88+
<p>My experiences have all been awful. There has been no "light at the end of the tunnel," no blessing in disguise and no valuable learning experience. It's all very negative. It has been a terrible, terrible experience. This disease is really one of the worst. It hits during the dead center of the prime of life and just slowly destroys us. The old term of creeping paralysis is very appropriate. I spend hours thinking about all this disease has stolen from me and worse yet, I wonder about the things I don't realize that I've lost. What would life be like had this not happened? What experiences have I missed? There's a whole world out there and I can scarcely take part in it.</p>
89+
<p>If I had to find a specific experience, or set of experiences, that defined my MS struggle it would be the month I spent in Baltimore being treated. It took part in a risky, difficult trial involving high doses of chemotherapy. This is an example of the lengths I was willing to go to preserve functioning. I told the doctor at JH that I'd drink a gallon of gasoline if it would preserve the use of my body.</p>
90+
</div>
91+
<div id="sidebar">
92+
<div id="clicker">Click</div>
93+
<div id="dropzone">
94+
95+
</div>
96+
</div>
97+
<div class="clr"></div>
9398
</div>
94-
<div id="sidebar">
95-
<div id="dropzone">
99+
100+
<div id="hidden_templates" style="display:none;">
96101

102+
<div class="annotation">
103+
<div class="excerpt_holder">
104+
<span class="excerpt"></span>
105+
<div class="actions">
106+
<span title="Delete this excerpt" class="trash"></span>
107+
<span title="Comment on this excerpt" class="comment"></span>
108+
<span title="Attach an Insight to this excerpt" class="attach"></span>
109+
</div>
110+
</div>
111+
<div>
112+
<div class="insight_form" style="display:none;">
113+
<input type="text" class="insight_field">
114+
<input type="button" class="insight_button" value="Add Insight">
115+
</div>
116+
<div class="insights" style="display:none;">
117+
<span class="empty_message">no insights attached</span>
118+
<div class="clr"></div>
119+
</div>
120+
<div class="comment" style="display:none;">
121+
<textarea></textarea>
122+
<input type="button" class="comment_button" value="Submit Comment">
123+
</div>
124+
</div>
97125
</div>
126+
98127
</div>
128+
99129
</body>
100130
</html>
101131

132+
<script>
133+
134+
$("#clicker").click(function(){
135+
$("#dropzone").append($('<div>').annotation("MS struggle it would be the month I spent in Baltimore being treated",{insights: ["pain","misery"], comment: "This is a comment", template: $('#hidden_templates .annotation'), available_insights: system_insights,onMouseOver: hilite, onMouseOut: unHilite}));
136+
});
137+
138+
</script>
139+

‎public/drag_drop_text/tokens.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Love|Love
2+
Hate
3+
Pain
4+
Regret
5+
Loss

‎public/images/insights/briefcase.gif

186 Bytes
Loading

‎public/images/insights/x-ind.gif

181 Bytes
Loading

‎public/javascripts/jquery.annotation.js

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
(function($) {
2+
3+
$.fn.annotation = function(excerpt,settings) {
4+
var config = {
5+
insights: [],
6+
comment: "",
7+
available_insights: [],
8+
template: $("<div>"),
9+
onMouseOver: "",
10+
onMouseOut: ""
11+
};
12+
if (settings) $.extend(config, settings);
13+
14+
var container = this;
15+
var excerpt = excerpt || "";
16+
var insights = config.insights;
17+
var comment = config.comment || "";
18+
var available_insights = config.available_insights;
19+
20+
render();
21+
22+
container.mouseover(function(){
23+
if($.isFunction(config.onMouseOver)){
24+
config.onMouseOver.call(this, excerpt);
25+
}
26+
});
27+
28+
container.mouseout(function(){
29+
if($.isFunction(config.onMouseOut)){
30+
config.onMouseOut.call(this, excerpt);
31+
}
32+
});
33+
34+
return this;
35+
36+
function render(){
37+
container.append(config.template.clone());
38+
container.find(".excerpt").html(excerpt);
39+
initToolBox();
40+
initComment();
41+
initInsights();
42+
}
43+
44+
function initComment(){
45+
if (comment.length > 0){
46+
container.find("div.comment").show();
47+
container.find("div.comment textarea").val(comment);
48+
}
49+
}
50+
51+
function initInsights(){
52+
container.find(".insight_field").autocomplete(available_insights);
53+
if (insights.length > 0){
54+
container.find(".insights").show();
55+
container.find(".empty_message").hide();
56+
jQuery.each(insights, function() {if (this != ""){renderTag(this.toString())}});
57+
}
58+
}
59+
60+
function initToolBox(){
61+
container.find(".trash").click(function(){container.fadeOut()});
62+
container.find(".comment").click(function(){attachComment()});
63+
container.find(".attach").click(function(){attachInsights()});
64+
container.find(".insight_button").click(function(){addTags();})
65+
}
66+
67+
function attachInsights(){
68+
container.find(".insight_form").slideToggle();
69+
// When closing the insight form, leave insights list open if populated
70+
(insights && insights.length > 0) ? container.find(".insights").show() : container.find(".insights").slideToggle();
71+
}
72+
73+
function attachComment(){
74+
container.find("div.comment").slideToggle();
75+
}
76+
77+
function addTags(){
78+
arrNewInsights = container.find(".insight_field").val().split(",");
79+
console.log("arrNewInsights",arrNewInsights);
80+
if (arrNewInsights.length > 0){
81+
container.find(".empty_message").hide();
82+
jQuery.each(arrNewInsights, function() {
83+
if (this != ""){addTag(this)}
84+
});
85+
}
86+
container.find(".insight_field").val("");
87+
}
88+
89+
function addTag(strTag){
90+
// strTag = strTag.toLowerCase();
91+
strTag = strTag.toString();
92+
if (insights.indexOf(strTag) < 0){
93+
insights.push(strTag);
94+
renderTag(strTag);
95+
updateTagFormElement()
96+
}
97+
}
98+
99+
function renderTag(strTag){
100+
tag = $('<div>').addClass("insight").click(function(){removeTag(tag,strTag)});
101+
tag.append($('<a>').html("*"));
102+
tag.append($('<span>').html(strTag));
103+
container.find(".insights").prepend(tag)
104+
}
105+
106+
function removeTag(elTag,strTag){
107+
arr_updated = new Array();
108+
jQuery.each(insights, function() {
109+
if (this != strTag){
110+
arr_updated.push(this);
111+
}
112+
});
113+
insights = arr_updated;
114+
console.log("arr_updated",arr_updated)
115+
if (insights.length < 1){container.find(".empty_message").show();}
116+
elTag.hide();
117+
updateTagFormElement()
118+
}
119+
120+
function updateTagFormElement(){
121+
// elFormTagElement.value = arr_tags.toString();
122+
}
123+
}
124+
125+
})(jQuery);
126+

0 commit comments

Comments
 (0)