first commit
This commit is contained in:
236
plugins/annotate/lib/jquery/css/annotation.css
Normal file
236
plugins/annotate/lib/jquery/css/annotation.css
Normal file
@@ -0,0 +1,236 @@
|
||||
|
||||
.image-annotate-canvas {
|
||||
border: solid 1px #ccc;
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
background-size: contain;
|
||||
}
|
||||
.image-annotate-view {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.image-annotate-area {
|
||||
border: 2px solid #000000;
|
||||
position: absolute;
|
||||
}
|
||||
.image-annotate-area div {
|
||||
border: 1px solid #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
.image-annotate-area-hover div {
|
||||
border-color: yellow !important;
|
||||
width:auto;
|
||||
}
|
||||
.image-annotate-area-editable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-annotate-area-editable-hover div {
|
||||
border-color: #00AD00 !important;
|
||||
}
|
||||
.image-annotate-note {
|
||||
background: #E7FFE7 none repeat scroll 0 0;
|
||||
border: solid 1px #397F39;
|
||||
color: #000;
|
||||
display: none;
|
||||
font-family: Verdana, Sans-Serif;
|
||||
font-size: 10px;
|
||||
min-width:50px;max-width: 200px;
|
||||
padding: 3px 7px;
|
||||
position: absolute;opacity:0.95;
|
||||
filter:alpha(opacity=95);
|
||||
overflow:hidden;
|
||||
border-radius:5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
|
||||
box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.image-annotate-note .actions {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
}
|
||||
.image-annotate-edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#image-annotate-edit-form {
|
||||
height: 82px;
|
||||
padding: 7px;
|
||||
position: absolute;
|
||||
width: 252px;
|
||||
border-radius:5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
|
||||
box-shadow: 4px 5px 5px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
#image-annotate-edit-form form {
|
||||
clear: right;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
#image-annotate-edit-form .box {
|
||||
margin: 0;
|
||||
}
|
||||
#image-annotate-edit-form input.form-text, #image-annotate-edit-form #edit-comment-wrapper textarea {
|
||||
width: 90%;
|
||||
}
|
||||
#image-annotate-edit-form textarea {
|
||||
height: 50px;
|
||||
font-family: Verdana, Sans-Serif;
|
||||
font-size: 10px;
|
||||
width: 248px;
|
||||
}
|
||||
#image-annotate-edit-form fieldset {
|
||||
background: transparent none repeat scroll 0 0;
|
||||
}
|
||||
#image-annotate-edit-form .form-item {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
#image-annotate-edit-form .form-button, #image-annotate-edit-form .form-submit {
|
||||
margin: 0;
|
||||
}
|
||||
#image-annotate-edit-form a{
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px 3px;
|
||||
border: solid 1px #ccc;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: left;
|
||||
font-family: Verdana, Sans-Serif;
|
||||
font-size: 10px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
padding: 2px 2px 2px 24px;
|
||||
margin: 3px 6px 3px 0;
|
||||
width: 50px;
|
||||
}
|
||||
#image-annotate-edit-form textarea {
|
||||
margin: 3px 6px 3px 0;
|
||||
resize:none;border-radius:5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
#image-annotate-edit-form a:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
.image-annotate-edit-area {
|
||||
border: 2px solid yellow;
|
||||
cursor: move;
|
||||
display: block;
|
||||
height: 20px;
|
||||
left: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 60px;
|
||||
}
|
||||
.image-annotate-edit-area .ui-resizable-handle {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.image-annotate-edit-ok {
|
||||
background-image: url(../images/accept.png); border-radius:5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.image-annotate-edit-delete {
|
||||
background-image: url(../images/delete.png); border-radius:5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.image-annotate-edit-close {
|
||||
background-image: url(../images/cross.png); border-radius:5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
-moz-box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
box-shadow: .5px 1px 1px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.ui-resizable {
|
||||
position: relative;
|
||||
}
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
z-index: 99999;
|
||||
display: block;
|
||||
}
|
||||
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable- autohide .ui-resizable-handle {
|
||||
display: block;
|
||||
}
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0px;
|
||||
}
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
bottom: -5px;
|
||||
left: 0px;
|
||||
}
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
right: -5px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.image-annotate-text{ resize:none;}
|
||||
0
plugins/annotate/lib/jquery/delete.html
Normal file
0
plugins/annotate/lib/jquery/delete.html
Normal file
25
plugins/annotate/lib/jquery/demo-ajax.html
Normal file
25
plugins/annotate/lib/jquery/demo-ajax.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Image Annotations</title>
|
||||
<style type="text/css" media="all">@import "css/annotation.css";</style>
|
||||
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="js/jquery-ui-1.7.1.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.annotate.js"></script>
|
||||
|
||||
<script language="javascript">
|
||||
$(window).load(function() {
|
||||
$("#toAnnotate").annotateImage({
|
||||
getUrl: "get.html",
|
||||
saveUrl: "save.html",
|
||||
deleteUrl: "delete.html",
|
||||
editable: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img id="toAnnotate" src="images/trafalgar-square-annotated.jpg" alt="Trafalgar Square" width="600" height="398" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
37
plugins/annotate/lib/jquery/demo-static.html
Normal file
37
plugins/annotate/lib/jquery/demo-static.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Image Annotations</title>
|
||||
<style type="text/css" media="all">@import "css/annotation.css";</style>
|
||||
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="js/jquery-ui-1.7.1.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.annotate.js"></script>
|
||||
|
||||
<script language="javascript">
|
||||
$(window).load(function() {
|
||||
$("#toAnnotate").annotateImage({
|
||||
editable: true,
|
||||
useAjax: false,
|
||||
notes: [ { "top": 286,
|
||||
"left": 161,
|
||||
"width": 52,
|
||||
"height": 37,
|
||||
"text": "Small people on the steps",
|
||||
"id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
|
||||
"editable": false },
|
||||
{ "top": 134,
|
||||
"left": 179,
|
||||
"width": 68,
|
||||
"height": 74,
|
||||
"text": "National Gallery Dome",
|
||||
"id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
|
||||
"editable": true } ]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img id="toAnnotate" src="images/trafalgar-square-annotated.jpg" alt="Trafalgar Square" width="600" height="398" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
plugins/annotate/lib/jquery/get.html
Normal file
1
plugins/annotate/lib/jquery/get.html
Normal file
@@ -0,0 +1 @@
|
||||
[{"top":0, "left":0, "width":0, "height":0, "text":"test: asdf", "id":"4", "editable":false},{"top":0, "left":0, "width":0, "height":0, "text":"admin: ", "id":"31", "editable":true},{"top":0, "left":0, "width":0, "height":0, "text":"admin: ", "id":"32", "editable":true},{"top":0, "left":0, "width":0, "height":0, "text":" ", "id":"29", "editable":true},{"top":0, "left":0, "width":0, "height":0, "text":"admin: ", "id":"33", "editable":true}]
|
||||
BIN
plugins/annotate/lib/jquery/images/accept.png
Normal file
BIN
plugins/annotate/lib/jquery/images/accept.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
BIN
plugins/annotate/lib/jquery/images/asterisk_yellow.png
Normal file
BIN
plugins/annotate/lib/jquery/images/asterisk_yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 743 B |
BIN
plugins/annotate/lib/jquery/images/cross.png
Normal file
BIN
plugins/annotate/lib/jquery/images/cross.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
BIN
plugins/annotate/lib/jquery/images/delete.png
Normal file
BIN
plugins/annotate/lib/jquery/images/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 715 B |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
19
plugins/annotate/lib/jquery/js/jquery-1.3.2-min.js
vendored
Normal file
19
plugins/annotate/lib/jquery/js/jquery-1.3.2-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
19
plugins/annotate/lib/jquery/js/jquery-ui-1.7.2-min.js
vendored
Normal file
19
plugins/annotate/lib/jquery/js/jquery-ui-1.7.2-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
679
plugins/annotate/lib/jquery/js/jquery.annotate.js
Normal file
679
plugins/annotate/lib/jquery/js/jquery.annotate.js
Normal file
@@ -0,0 +1,679 @@
|
||||
/// <reference path="jquery-1.2.6-vsdoc.js" />
|
||||
|
||||
var button_ok = "";
|
||||
var button_cancel = "";
|
||||
var button_delete = "";
|
||||
var button_add = "";
|
||||
var button_toggle="";
|
||||
var button_toggle_off="";
|
||||
var error_saving = "";
|
||||
var error_deleting = "";
|
||||
|
||||
function isInt(value) {
|
||||
return !isNaN(parseInt(value)) && (parseFloat(value) == parseInt(value));
|
||||
}
|
||||
(function($) {
|
||||
|
||||
var areasurrogate = 0;
|
||||
|
||||
$.fn.annotateImage = function(options) {
|
||||
/// <summary>
|
||||
/// Creates annotations on the given image.
|
||||
/// Images are loaded from the "getUrl" propety passed into the options.
|
||||
/// </summary>
|
||||
var opts = $.extend({}, $.fn.annotateImage.defaults, options);
|
||||
var image = this;
|
||||
|
||||
this.image = this;
|
||||
this.mode = 'view';
|
||||
|
||||
// Assign defaults
|
||||
this.getUrl = opts.getUrl;
|
||||
this.saveUrl = opts.saveUrl;
|
||||
this.deleteUrl = opts.deleteUrl;
|
||||
this.editable = opts.editable;
|
||||
this.useAjax = opts.useAjax;
|
||||
this.notes = opts.notes;
|
||||
this.toggle= opts.toggle;
|
||||
|
||||
this.height = (this.height() == 0 ? this[0]["height"]:this.height());
|
||||
this.width = (this.width() == 0 ? this[0]["width"]:this.width())
|
||||
|
||||
// Specific to ResourceSpace
|
||||
var modal = (typeof opts.modal !== "undefined" ? opts.modal : false);
|
||||
$.fn.annotateImage.modal = modal;
|
||||
|
||||
|
||||
// Add the canvas
|
||||
this.canvas = $('<div class="image-annotate-canvas"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>');
|
||||
this.canvas.children('.image-annotate-edit').hide();
|
||||
this.canvas.children('.image-annotate-view').hide();
|
||||
this.image.after(this.canvas);
|
||||
|
||||
// Give the canvas and the container their size and background
|
||||
this.canvas.height(this.height);
|
||||
this.canvas.width(this.width);
|
||||
this.canvas.css('background-image', 'url("' + this.attr('src') + '")');
|
||||
this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height);
|
||||
this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width);
|
||||
|
||||
|
||||
// load the notes
|
||||
if (this.useAjax) {
|
||||
$.fn.annotateImage.ajaxLoad(this);
|
||||
} else {
|
||||
$.fn.annotateImage.load(this);
|
||||
}
|
||||
|
||||
/*
|
||||
this.canvas.children('.image-annotate-view').hover(function() {image.canvas.css({"overflow":"visible"});
|
||||
$(this).show();
|
||||
}, function() {image.canvas.css({"overflow":"hidden"});
|
||||
if (image.toggle==false){ $(this).hide();}
|
||||
});this.canvas.children('.image-annotate-note').hover(function() {image.canvas.css({"overflow":"visible"});
|
||||
$(this).show();
|
||||
}, function() {image.canvas.css({"overflow":"hidden"});
|
||||
if (image.toggle==false){ $(this).hide();}
|
||||
}); */
|
||||
|
||||
|
||||
// Add the image actions
|
||||
if (this.editable) {
|
||||
this.button = $('<div class="image-actions" id="image-actions">');
|
||||
this.canvas.append(this.button);
|
||||
$.fn.annotateImage.getImageActionsTarget(modal).hide();
|
||||
|
||||
this.button = $('<a class="image-annotate-add" id="image-annotate-add" href="#" style="display:inline;">' + button_add + '</a>');
|
||||
this.button.css({width: 'auto', 'padding-right': '5px'});
|
||||
this.button.click(function() {
|
||||
$.fn.annotateImage.add(image);
|
||||
return false;
|
||||
});
|
||||
$.fn.annotateImage.getImageActionsTarget(modal).append(this.button);
|
||||
|
||||
this.button = $('<a class="image-annotate-toggle" id="image-annotate-toggle" href="#" style="display:inline;">');
|
||||
this.button.css({width: 'auto', 'padding-right': '5px'});this.button.click(function() {
|
||||
$.fn.annotateImage.toggle(image);
|
||||
});
|
||||
this.button.css({});
|
||||
$.fn.annotateImage.getImageActionsTarget(modal).append(this.button);
|
||||
$.fn.annotateImage.toggle(image);
|
||||
$.fn.annotateImage.toggle(image);
|
||||
|
||||
$.fn.annotateImage.getImageActionsTarget(modal).hover(function(){
|
||||
toTop($.fn.annotateImage.getImageActionsTarget(modal, true));
|
||||
});
|
||||
}
|
||||
|
||||
// Add the behavior: hide/show the notes when hovering the picture
|
||||
this.canvas.hover(function() {
|
||||
image.canvas.css({"overflow":"visible"});
|
||||
if ($(this).children('.image-annotate-edit').css('display') == 'none') {
|
||||
$(this).children('.image-annotate-view').show();
|
||||
$.fn.annotateImage.getImageActionsTarget(modal).show();
|
||||
toTop($.fn.annotateImage.getImageActionsTarget(modal, true));
|
||||
}
|
||||
}, function() {
|
||||
image.canvas.css({"overflow":"hidden"});
|
||||
if (image.toggle==false){
|
||||
$(this).children('.image-annotate-view').hide();
|
||||
$(this).children('.image-annotate-note','.image-annotate-toggle').hide();
|
||||
}
|
||||
$.fn.annotateImage.getImageActionsTarget(modal).hide();
|
||||
});
|
||||
|
||||
// Hide the original
|
||||
this.hide();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin Defaults
|
||||
**/
|
||||
$.fn.annotateImage.defaults = {
|
||||
getUrl: 'your-get.rails',
|
||||
saveUrl: 'your-save.rails',
|
||||
deleteUrl: 'your-delete.rails',
|
||||
editable: true,
|
||||
useAjax: true,
|
||||
notes: new Array()
|
||||
};
|
||||
|
||||
$.fn.annotateImage.clear = function(image) {
|
||||
/// <summary>
|
||||
/// Clears all existing annotations from the image.
|
||||
/// </summary>
|
||||
for (var i = 0; i < image.notes.length; i++) {
|
||||
image.notes[image.notes[i]].destroy();
|
||||
}
|
||||
image.notes = new Array();
|
||||
};
|
||||
|
||||
$.fn.annotateImage.getImageActionsTarget = function(modal, as_str) {
|
||||
/// <summary>
|
||||
/// Specific to ResourceSpace
|
||||
/// Return the image-actions target based on image being in a modal or normal page.
|
||||
/// </summary>
|
||||
|
||||
// $.fn.annotateImage.modal is shared between a normal page and the modal. We rely on the passed modal arg to reset
|
||||
// this value to false once we closed the modal.
|
||||
if(typeof modal !== "undefined" && modal && modal != $.fn.annotateImage.modal)
|
||||
{
|
||||
$.fn.annotateImage.modal = modal;
|
||||
}
|
||||
|
||||
if(modal)
|
||||
{
|
||||
return (as_str === true ? '#modal #image-actions' : $('#modal #image-actions'));
|
||||
}
|
||||
|
||||
return (as_str === true ? '#image-actions' : $('#image-actions'));
|
||||
};
|
||||
|
||||
$.fn.annotateImage.ajaxLoad = function(image) {
|
||||
/// <summary>
|
||||
/// Loads the annotations from the "getUrl" property passed in on the
|
||||
/// options object.
|
||||
/// </summary>
|
||||
var append_separator = '?';
|
||||
|
||||
if(image.getUrl.indexOf('?') > -1) {
|
||||
append_separator = '&';
|
||||
}
|
||||
|
||||
$.getJSON(image.getUrl + append_separator + 'ticks=' + $.fn.annotateImage.getTicks(), function(data) {
|
||||
image.notes = data;
|
||||
$.fn.annotateImage.load(image);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.annotateImage.load = function(image) {
|
||||
/// <summary>
|
||||
/// Loads the annotations from the notes property passed in on the
|
||||
/// options object.
|
||||
/// </summary>
|
||||
for (var i = 0; i < image.notes.length; i++) {
|
||||
image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i]);
|
||||
}
|
||||
// load the default toggle
|
||||
if (image.toggle==true){
|
||||
$('.image-annotate-view').show();
|
||||
$('.image-annotate-note').show();
|
||||
}
|
||||
|
||||
// Set initial z-indices
|
||||
$('.image-annotate-area').each(function(i, area) {
|
||||
if (!isBlocker(area)) {
|
||||
toTop(area);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$.fn.annotateImage.getTicks = function() {
|
||||
/// <summary>
|
||||
/// Gets a count og the ticks for the current date.
|
||||
/// This is used to ensure that URLs are always unique and not cached by the browser.
|
||||
/// </summary>
|
||||
var now = new Date();
|
||||
return now.getTime();
|
||||
};
|
||||
|
||||
$.fn.annotateImage.add = function(image) {
|
||||
/// <summary>
|
||||
/// Adds a note to the image.
|
||||
/// </summary>
|
||||
if (image.mode == 'view') {
|
||||
image.mode = 'edit';
|
||||
// Create/prepare the editable note elements
|
||||
var editable = new $.fn.annotateEdit(image);
|
||||
|
||||
$.fn.annotateImage.createSaveButton(editable, image);
|
||||
$.fn.annotateImage.createCancelButton(editable, image);
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.annotateImage.toggle = function(image) {
|
||||
/// <summary>
|
||||
/// Toggle notes
|
||||
/// </summary>
|
||||
if (image.mode == 'view') {
|
||||
if (image.toggle==false){
|
||||
image.toggle=true;
|
||||
$('#image-annotate-toggle').html('<a class="image-annotate-toggle" id="image-annotate-toggle" href="#" onclick="return false;">' + button_toggle_off + '</a>');
|
||||
SetCookie ('annotate_toggle',true);
|
||||
$('.image-annotate-view').show();
|
||||
$('.image-annotate-note').show();
|
||||
} else {
|
||||
image.toggle=false;
|
||||
$('#image-annotate-toggle').html('<a class="image-annotate-toggle" id="image-annotate-toggle" href="#" onclick="return false;">' + button_toggle + '</a>');
|
||||
SetCookie ('annotate_toggle',false);
|
||||
$('.image-annotate-view').hide();
|
||||
$('.image-annotate-note').hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.annotateImage.createSaveButton = function(editable, image, note) {
|
||||
/// <summary>
|
||||
/// Creates a Save button on the editable note.
|
||||
/// </summary>
|
||||
var ok = $('<a class="image-annotate-edit-ok">' + button_ok + '</a>');
|
||||
|
||||
ok.click(function() {
|
||||
var form = $('#image-annotate-edit-form form');
|
||||
var text = $('#image-annotate-text').val();
|
||||
|
||||
$.fn.annotateImage.appendPosition(form, editable)
|
||||
image.mode = 'view';
|
||||
|
||||
// Save via AJAX
|
||||
if (image.useAjax) {
|
||||
$.ajax({
|
||||
url: image.saveUrl,
|
||||
data: form.serialize(),
|
||||
error: function(e) { alert(error_saving) },
|
||||
success: function(data) {
|
||||
if (data != undefined) {
|
||||
editable.note.id = data;
|
||||
}
|
||||
},
|
||||
dataType: "json"
|
||||
});
|
||||
}
|
||||
|
||||
// Add to canvas
|
||||
if (note) {
|
||||
note.resetPosition(editable, text);
|
||||
} else {
|
||||
editable.note.editable = true;
|
||||
note = new $.fn.annotateView(image, editable.note)
|
||||
note.resetPosition(editable, text);
|
||||
image.notes.push(editable.note);
|
||||
}
|
||||
|
||||
editable.destroy();
|
||||
if (image.toggle==true){$('.image-annotate-view').show();$('.image-annotate-note').show();
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
editable.form.append(ok);
|
||||
|
||||
};
|
||||
|
||||
$.fn.annotateImage.createCancelButton = function(editable, image) {
|
||||
/// <summary>
|
||||
/// Creates a Cancel button on the editable note.
|
||||
/// </summary>
|
||||
var cancel = $('<a class="image-annotate-edit-close">' + button_cancel + '</a>');
|
||||
cancel.click(function() {
|
||||
editable.destroy();
|
||||
image.mode = 'view';
|
||||
});
|
||||
editable.form.append(cancel);
|
||||
};
|
||||
|
||||
$.fn.annotateImage.saveAsHtml = function(image, target) {
|
||||
var element = $(target);
|
||||
var html = "";
|
||||
for (var i = 0; i < image.notes.length; i++) {
|
||||
html += $.fn.annotateImage.createHiddenField("text_" + i, image.notes[i].text);
|
||||
html += $.fn.annotateImage.createHiddenField("top_" + i, image.notes[i].top);
|
||||
html += $.fn.annotateImage.createHiddenField("left_" + i, image.notes[i].left);
|
||||
html += $.fn.annotateImage.createHiddenField("height_" + i, image.notes[i].height);
|
||||
html += $.fn.annotateImage.createHiddenField("width_" + i, image.notes[i].width);
|
||||
}
|
||||
element.html(html);
|
||||
};
|
||||
|
||||
$.fn.annotateImage.createHiddenField = function(name, value) {
|
||||
return '<input type="hidden" name="' + name + '" value="' + value + '" /><br />';
|
||||
};
|
||||
|
||||
$.fn.annotateEdit = function(image, note) {
|
||||
/// <summary>
|
||||
/// Defines an editable annotation area.
|
||||
/// </summary>
|
||||
this.image = image;
|
||||
console.log(image);
|
||||
var top=30;
|
||||
var left=30;
|
||||
if (note) {
|
||||
this.note = note;
|
||||
} else {
|
||||
var newNote = new Object();
|
||||
|
||||
// check if there is an identical note position, and offset it.
|
||||
for (var x=0;x<image.notes.length;x++) {
|
||||
if(typeof image.notes[x]['left']!=="undefined") {
|
||||
|
||||
if (image.notes[x]['left']==left && image.notes[x]['top']==top){
|
||||
top=top+15;
|
||||
left=left+15;
|
||||
x=0;// reset the loop to find further overlaps recursively
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
newNote.id = "new";
|
||||
newNote.top = top;
|
||||
newNote.left = left;
|
||||
newNote.width = 30;
|
||||
newNote.height = 30;
|
||||
newNote.text = "";
|
||||
this.note = newNote;
|
||||
}
|
||||
|
||||
// Set area
|
||||
var area = image.canvas.children('.image-annotate-edit').children('.image-annotate-edit-area');
|
||||
this.area = area;
|
||||
this.area.css('height', this.note.height + 'px');
|
||||
this.area.css('width', this.note.width + 'px');
|
||||
this.area.css('left', this.note.left + 'px');
|
||||
this.area.css('top', this.note.top + 'px');
|
||||
|
||||
// Show the edition canvas and hide the view canvas
|
||||
$.fn.annotateImage.getImageActionsTarget().hide();
|
||||
image.canvas.children('.image-annotate-view').hide();
|
||||
image.canvas.children('.image-annotate-edit').show();
|
||||
|
||||
// Add the note (which we'll load with the form afterwards)
|
||||
var form = $('<div id="image-annotate-edit-form"><form><textarea id="image-annotate-text" name="text" rows="3" cols="30">' + this.note.text.replace(new RegExp('<br />', 'g'), '') + '</textarea></form></div>');
|
||||
this.form = form;
|
||||
|
||||
//$('body').append(this.form);
|
||||
|
||||
// Set the area as a draggable/resizable element contained in the image canvas.
|
||||
// Would be better to use the containment option for resizable but buggy
|
||||
//this.form.css('left', this.area.offset().left + 'px');
|
||||
//this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 7) + 'px');
|
||||
|
||||
// modified for RS
|
||||
image.canvas.after(this.form);
|
||||
this.form.css('left', (this.area.offset().left / 2) + 'px');
|
||||
this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 7) + 'px');
|
||||
this.form.css('z-index',3);
|
||||
//
|
||||
|
||||
area.resizable({
|
||||
handles: 'all',
|
||||
resize: function(e, ui) {
|
||||
form.css('left', (area.offset().left / 2) + 'px');
|
||||
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
||||
},
|
||||
stop: function(e, ui) {
|
||||
form.css('left', (area.offset().left / 2) + $('.ui-layout-center').scrollLeft() + 'px');
|
||||
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
||||
}
|
||||
})
|
||||
.draggable({
|
||||
containment: image.canvas,
|
||||
drag: function(e, ui) {
|
||||
form.css('left', (area.offset().left / 2) + 'px');
|
||||
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
||||
},
|
||||
stop: function(e, ui) {
|
||||
form.css('left', (area.offset().left / 2) + 'px');
|
||||
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
$.fn.annotateEdit.prototype.destroy = function() {
|
||||
/// <summary>
|
||||
/// Destroys an editable annotation area.
|
||||
/// </summary>
|
||||
this.image.canvas.children('.image-annotate-edit').hide();
|
||||
this.area.resizable('destroy');
|
||||
this.area.draggable('destroy');
|
||||
this.area.css('height', '');
|
||||
this.area.css('width', '');
|
||||
this.area.css('left', '');
|
||||
this.area.css('top', '');
|
||||
this.form.remove();
|
||||
}
|
||||
|
||||
$.fn.annotateView = function(image, note) {
|
||||
/// <summary>
|
||||
/// Defines a annotation area.
|
||||
/// </summary>
|
||||
this.image = image;
|
||||
|
||||
this.note = note;
|
||||
|
||||
this.editable = (note.editable && image.editable);
|
||||
|
||||
areasurrogate += 1;
|
||||
|
||||
// Add the area
|
||||
this.area = $('<div id="areasurrogate_' + areasurrogate + '" class="image-annotate-area' + (this.editable ? ' image-annotate-area-editable' : '') + '"><div>');
|
||||
image.canvas.children('.image-annotate-view').prepend(this.area);
|
||||
|
||||
// image.canvas.children('.image-annotate-view').prepend(this.area);
|
||||
|
||||
// Add the note
|
||||
this.form = $('<div class="image-annotate-note" style="width:auto">' + note.text + '</div>');
|
||||
this.form.hide();
|
||||
image.canvas.children('.image-annotate-view').append(this.form);
|
||||
this.form.children('span.actions').hide();
|
||||
|
||||
// Set the position and size of the note
|
||||
this.setPosition();
|
||||
|
||||
// Add the behavior: hide/display the note when hovering the area
|
||||
var annotation = this;
|
||||
|
||||
// Fix z-index when necessary where multiple notes are visible
|
||||
this.area.hover(function() {
|
||||
annotation.show();
|
||||
|
||||
// Send this element to the top if it doesn't fully block another area element
|
||||
if (!isBlocker(annotation.area)) {
|
||||
toTop(annotation.area);
|
||||
toTop(annotation.form);
|
||||
};
|
||||
|
||||
}, function() {
|
||||
annotation.hide();
|
||||
});
|
||||
|
||||
this.form.hover(function() {
|
||||
annotation.show();
|
||||
|
||||
// Send this element to the top if it doesn't fully block another area element
|
||||
if (!isBlocker(annotation.area)) {
|
||||
toTop(annotation.area);
|
||||
toTop(annotation.form);
|
||||
};
|
||||
|
||||
}, function() {
|
||||
annotation.hide();
|
||||
});
|
||||
|
||||
|
||||
// Edit a note feature
|
||||
if (this.editable) {
|
||||
var form = this;
|
||||
this.area.click(function() {
|
||||
form.edit();
|
||||
});
|
||||
this.form.click(function() {
|
||||
form.edit();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Is the selected area element fully blocking any other area element
|
||||
function isBlocker(element){
|
||||
var selected_id = $(element)[0].id;
|
||||
var selected_top = $(element)[0].offsetTop;
|
||||
var selected_height = $(element)[0].offsetHeight;
|
||||
var selected_left = $(element)[0].offsetLeft;
|
||||
var selected_width = $(element)[0].offsetWidth;
|
||||
var selected_bottom = selected_top + selected_height;
|
||||
var selected_right = selected_left + selected_width;
|
||||
|
||||
var fullyBlockedFound = false;
|
||||
$(".image-annotate-area").each(function(i, area) {
|
||||
if ($(area)[0].id != selected_id) {
|
||||
if ( selected_top <= $(area)[0].offsetTop
|
||||
&& selected_bottom >= ($(area)[0].offsetTop + $(area)[0].offsetHeight)
|
||||
&& selected_left <= $(area)[0].offsetLeft
|
||||
&& selected_right >= ($(area)[0].offsetLeft + $(area)[0].offsetWidth) ) {
|
||||
// console.log("SELECTED_ID="+selected_id+" BLOCKS="+$(area)[0].id);
|
||||
fullyBlockedFound = true;
|
||||
return false; // No need to check any more areas; break out of .each loop
|
||||
}
|
||||
}
|
||||
});
|
||||
return fullyBlockedFound;
|
||||
};
|
||||
|
||||
|
||||
function toTop(element){
|
||||
var index_highest = 50;
|
||||
$(".image-annotate-area,.image-annotate-note,.image-actions").each(function() {
|
||||
var index_current = parseInt($(this).css("z-index"), 10);
|
||||
//console.log(index_current );
|
||||
if(index_current > index_highest) {
|
||||
index_highest = index_current;
|
||||
}
|
||||
});
|
||||
//console.log('highest '+index_highest);
|
||||
$(element).css({'z-index':index_highest+1});
|
||||
};
|
||||
|
||||
$.fn.annotateView.prototype.setPosition = function() {
|
||||
/// <summary>
|
||||
/// Sets the position of an annotation.
|
||||
/// </summary>
|
||||
this.area.children('div').height((parseInt(this.note.height) - 2) + 'px');
|
||||
this.area.children('div').width((parseInt(this.note.width) - 2) + 'px');
|
||||
this.area.css('left', (this.note.left) + 'px');
|
||||
this.area.css('top', (this.note.top) + 'px');
|
||||
this.form.css('left', (this.note.left) + 'px');
|
||||
this.form.css('top', (parseInt(this.note.top) + parseInt(this.note.height) + 7) + 'px');
|
||||
};
|
||||
|
||||
$.fn.annotateView.prototype.show = function() {
|
||||
/// <summary>
|
||||
/// Highlights the annotation
|
||||
/// </summary>
|
||||
this.form.fadeIn(50);
|
||||
if (!this.editable) {
|
||||
this.area.addClass('image-annotate-area-hover');
|
||||
} else {
|
||||
this.area.addClass('image-annotate-area-editable-hover');
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.annotateView.prototype.hide = function() {
|
||||
/// <summary>
|
||||
/// Removes the highlight from the annotation.
|
||||
/// </summary>
|
||||
if (this.image.toggle==false){this.form.fadeOut(50);}
|
||||
this.area.removeClass('image-annotate-area-hover');
|
||||
this.area.removeClass('image-annotate-area-editable-hover');
|
||||
};
|
||||
|
||||
$.fn.annotateView.prototype.destroy = function() {
|
||||
/// <summary>
|
||||
/// Destroys the annotation.
|
||||
/// </summary>
|
||||
this.area.remove();
|
||||
this.form.remove();
|
||||
}
|
||||
|
||||
$.fn.annotateView.prototype.edit = function() {
|
||||
/// <summary>
|
||||
/// Edits the annotation.
|
||||
/// </summary>
|
||||
if (this.image.mode == 'view') {
|
||||
this.image.mode = 'edit';
|
||||
var annotation = this;
|
||||
|
||||
// Create/prepare the editable note elements
|
||||
var editable = new $.fn.annotateEdit(this.image, this.note);
|
||||
|
||||
$.fn.annotateImage.createSaveButton(editable, this.image, annotation);
|
||||
|
||||
// Add the delete button
|
||||
var del = $('<a class="image-annotate-edit-delete">' + button_delete + '</a>');
|
||||
del.click(function() {
|
||||
var form = $('#image-annotate-edit-form form');
|
||||
|
||||
$.fn.annotateImage.appendPosition(form, editable)
|
||||
|
||||
if (annotation.image.useAjax) {
|
||||
$.ajax({
|
||||
url: annotation.image.deleteUrl,
|
||||
data: form.serialize(),
|
||||
error: function(e) { alert(error_deleting) }
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
annotation.image.mode = 'view';
|
||||
editable.destroy();
|
||||
annotation.destroy();
|
||||
});
|
||||
editable.form.append(del);
|
||||
|
||||
$.fn.annotateImage.createCancelButton(editable, this.image);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.annotateImage.appendPosition = function(form, editable) {
|
||||
/// <summary>
|
||||
/// Appends the annotations coordinates to the given form that is posted to the server.
|
||||
/// </summary>
|
||||
var areaFields = $('<input type="hidden" value="' + editable.area.height() + '" name="height"/>' +
|
||||
'<input type="hidden" value="' + editable.area.width() + '" name="width"/>' +
|
||||
'<input type="hidden" value="' + editable.area.position().top + '" name="top"/>' +
|
||||
'<input type="hidden" value="' + editable.area.position().left + '" name="left"/>' +
|
||||
'<input type="hidden" value="' + editable.note.id + '" name="id"/>');
|
||||
form.append(areaFields);
|
||||
}
|
||||
|
||||
$.fn.annotateView.prototype.resetPosition = function(editable, text) {
|
||||
/// <summary>
|
||||
/// Sets the position of an annotation.
|
||||
/// </summary>
|
||||
this.form.html(text.replace(new RegExp('\n', 'g'), '<br />'));
|
||||
this.form.hide();
|
||||
|
||||
// Resize
|
||||
this.area.children('div').height(editable.area.height() + 'px');
|
||||
this.area.children('div').width((editable.area.width() - 2) + 'px');
|
||||
this.area.css('left', (editable.area.position().left) + 'px');
|
||||
this.area.css('top', (editable.area.position().top) + 'px');
|
||||
this.form.css('left', (editable.area.position().left) + 'px');
|
||||
this.form.css('top', (parseInt(editable.area.position().top) + parseInt(editable.area.height()) + 7) + 'px');
|
||||
|
||||
// Save new position to note
|
||||
this.note.top = editable.area.position().top;
|
||||
this.note.left = editable.area.position().left;
|
||||
this.note.height = editable.area.height();
|
||||
this.note.width = editable.area.width();
|
||||
this.note.text = text;
|
||||
this.note.id = editable.note.id;
|
||||
this.editable = true;
|
||||
|
||||
// Send this element to the top if it doesn't fully block another area element
|
||||
if (!isBlocker(this.area)) {
|
||||
toTop(this.area);
|
||||
toTop(this.form);
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
0
plugins/annotate/lib/jquery/save.html
Normal file
0
plugins/annotate/lib/jquery/save.html
Normal file
Reference in New Issue
Block a user