Skip to content

E
edx-platform
Commit 95c07383 by lduarte1991
Options

Annotation Tools: Removed background-color from image annotations 

- Also fixed edit bug when annotation is not created first
- Also fixed indentation issues
parent 7cc85b43
Showing with 59 additions and 54 deletions
common/static/js/vendor/ova/OpenSeaDragonAnnotation.js
...@@ -71,8 +71,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. ...@@ -71,8 +71,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
this.isDrawing = false; //if the user is drawing something this.isDrawing = false; //if the user is drawing something
this.rectPosition = undefined; this.rectPosition = undefined;
//Init //Init
this.init(); this.init();
}; };
//-- Methods //-- Methods
...@@ -167,7 +167,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. ...@@ -167,7 +167,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var rectPosition = an.rangePosition; var rectPosition = an.rangePosition;
//Span //Span
span.className = "annotator-hl"; span.className = "annotator-hl";
span.style.border = '1px solid rgba(0,0,0,0.5)'; span.style.border = '2px solid rgba(0,0,0,0.5)';
span.style.background = 'rgba(0,0,0,0)';
var onAnnotationMouseMove = this.__bind(this._onAnnotationMouseMove,this); var onAnnotationMouseMove = this.__bind(this._onAnnotationMouseMove,this);
var onAnnotationClick = this.__bind(this._onAnnotationClick,this); var onAnnotationClick = this.__bind(this._onAnnotationClick,this);
$.addEvent(span, "mousemove", onAnnotationMouseMove, true); $.addEvent(span, "mousemove", onAnnotationMouseMove, true);
...@@ -219,8 +220,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. ...@@ -219,8 +220,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var position = mouse.minus( elementPosition ); var position = mouse.minus( elementPosition );
viewer.innerTracker.setTracking(false); viewer.innerTracker.setTracking(false);
this.rect = document.createElement('div'); this.rect = document.createElement('div');
this.rect.style.background = 'rgba(0,0,0,0.25)'; this.rect.style.background = 'rgba(0,0,0,0)';
this.rect.style.border = '1px solid rgba(0,0,0,0.5)'; this.rect.style.border = '2px solid rgba(0,0,0,0.5)';
this.rect.style.position = 'absolute'; this.rect.style.position = 'absolute';
this.rect.className = 'DrawingRect'; this.rect.className = 'DrawingRect';
//set the initial position //set the initial position
...@@ -306,7 +307,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. ...@@ -306,7 +307,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var maxx = l + w; var maxx = l + w;
var maxy = t + h; var maxy = t + h;
this.style.background = (y <= maxy && y >= t) && (x <= maxx && x >= l)? this.style.background = (y <= maxy && y >= t) && (x <= maxx && x >= l)?
'rgba(12, 150, 0, 0.3)':'rgba(255, 255, 10, 0.3)'; 'rgba(255, 255, 10, 0.05)':'rgba(0, 0, 0, 0)';
return (y <= maxy && y >= t) && (x <= maxx && x >= l)? jQuery(this).data("annotation") : null; return (y <= maxy && y >= t) && (x <= maxx && x >= l)? jQuery(this).data("annotation") : null;
}); });
//show the annotation in the viewer //show the annotation in the viewer
...@@ -537,13 +538,13 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) { ...@@ -537,13 +538,13 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
_ref = OpenSeaDragon.__super__.constructor.apply(this, arguments); _ref = OpenSeaDragon.__super__.constructor.apply(this, arguments);
this.__indexOf = [].indexOf; this.__indexOf = [].indexOf;
if(!this.__indexOf){ if(!this.__indexOf){
this.__indexOf = function(item) { this.__indexOf = function(item) {
for (var i = 0, l = this.length; i < l; i++) { for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item) if (i in this && this[i] === item)
return i; return i;
} }
return -1; return -1;
} }
} }
return _ref; return _ref;
...@@ -586,29 +587,31 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) { ...@@ -586,29 +587,31 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
if (this.EditOpenSeaDragonAn()){ if (this.EditOpenSeaDragonAn()){
var annotator = this.annotator; var annotator = this.annotator;
var osda = annotator.osda; var osda = annotator.osda;
var position = osda.rectPosition; var position = osda.rectPosition || {};
var isNew = typeof annotation.media=='undefined'; var isNew = typeof annotation.media=='undefined';
if (typeof annotation.media == 'undefined') annotation.media = "image"; // - media if(isNew){
annotation.target = annotation.target || {}; // - target if (typeof annotation.media == 'undefined') annotation.media = "image"; // - media
annotation.target.container = osda.viewer.id || ""; // - target.container annotation.target = annotation.target || {}; // - target
//Save source url annotation.target.container = osda.viewer.id || ""; // - target.container
var source = osda.viewer.source; //Save source url
var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:''; var source = osda.viewer.source;
var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:''; var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:'';
annotation.target.src = tilesUrl!=''?tilesUrl:(''+functionUrl).replace(/\s+/g, ' '); // - target.src (media source) var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:'';
annotation.target.ext = source.fileFormat || ""; // - target.ext (extension) annotation.target.src = tilesUrl!=''?tilesUrl:(''+functionUrl).replace(/\s+/g, ' '); // - target.src (media source)
annotation.bounds = osda.viewer.drawer.viewport.getBounds() || {}; // - bounds annotation.target.ext = source.fileFormat || ""; // - target.ext (extension)
annotation.bounds = osda.viewer.drawer.viewport.getBounds() || {}; // - bounds
var finalimagelink = source["@id"].replace("/info.json", "");
var highlightX = Math.round(position.left * source["width"]); var finalimagelink = source["@id"].replace("/info.json", "");
var highlightY = Math.round(position.top * source["width"]); var highlightX = Math.round(position.left * source["width"]);
var highlightWidth = Math.round(position.width * source["width"]); var highlightY = Math.round(position.top * source["width"]);
var highlightHeight = Math.round(position.height * source["width"]); var highlightWidth = Math.round(position.width * source["width"]);
annotation.target.thumb = finalimagelink + "/" + highlightX + "," + highlightY + "," + highlightWidth + "," + highlightHeight + "/full/0/native." + source["formats"][0]; var highlightHeight = Math.round(position.height * source["width"]);
if(isNew) annotation.rangePosition = position || {}; // - rangePosition annotation.target.thumb = finalimagelink + "/" + highlightX + "," + highlightY + "," + highlightWidth + "," + highlightHeight + "/full/0/native." + source["formats"][0];
annotation.updated = new Date().toISOString(); // - updated if(isNew) annotation.rangePosition = position || {}; // - rangePosition
if (typeof annotation.created == 'undefined') annotation.updated = new Date().toISOString(); // - updated
annotation.created = annotation.updated; // - created if (typeof annotation.created == 'undefined')
annotation.created = annotation.updated; // - created
}
}else{ }else{
if (typeof annotation.media == 'undefined') if (typeof annotation.media == 'undefined')
annotation.media = "text"; // - media annotation.media = "text"; // - media
...@@ -691,7 +694,7 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) { ...@@ -691,7 +694,7 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
//-- Viewer //-- Viewer
function hideViewer(){ function hideViewer(){
jQuery(annotator.osda.viewer.canvas.parentNode).find('.annotator-hl').map(function() { jQuery(annotator.osda.viewer.canvas.parentNode).find('.annotator-hl').map(function() {
return this.style.background = 'rgba(255, 255, 10, 0.3)'; return this.style.background = 'rgba(0, 0, 0, 0)';
}); });
annotator.viewer.unsubscribe("hide", hideViewer); annotator.viewer.unsubscribe("hide", hideViewer);
}; };
...@@ -791,8 +794,8 @@ OpenSeadragonAnnotation = function (element, options) { ...@@ -791,8 +794,8 @@ OpenSeadragonAnnotation = function (element, options) {
if (typeof Annotator.Plugin["Flagging"] === 'function') if (typeof Annotator.Plugin["Flagging"] === 'function')
this.annotator.addPlugin("Flagging"); this.annotator.addPlugin("Flagging");
if (typeof Annotator.Plugin["HighlightTags"] === 'function') /*if (typeof Annotator.Plugin["HighlightTags"] === 'function')
this.annotator.addPlugin("HighlightTags", options.optionsAnnotator.highlightTags); this.annotator.addPlugin("HighlightTags", options.optionsAnnotator.highlightTags);*/
//- OpenSeaDragon //- OpenSeaDragon
this.viewer = OpenSeadragon(options.optionsOpenSeadragon); this.viewer = OpenSeadragon(options.optionsOpenSeadragon);
......
common/static/js/vendor/ova/catch/js/catch.js
...@@ -614,24 +614,24 @@ CatchAnnotation.prototype = { ...@@ -614,24 +614,24 @@ CatchAnnotation.prototype = {
tot = typeof annotations !='undefined'?annotations.length:0, tot = typeof annotations !='undefined'?annotations.length:0,
attempts = 0; // max 100 attempts = 0; // max 100
if(annotation.media == "image"){ if(annotation.media == "image"){
self.refreshCatch(true); self.refreshCatch(true);
self.checkTotAnnotations(); self.checkTotAnnotations();
} else { } else {
//This is to watch the annotations object, to see when is deleted the annotation //This is to watch the annotations object, to see when is deleted the annotation
var ischanged = function(){ var ischanged = function(){
var new_tot = annotator.plugins['Store'].annotations.length; var new_tot = annotator.plugins['Store'].annotations.length;
if (attempts<100) if (attempts<100)
setTimeout(function(){ setTimeout(function(){
if (new_tot != tot){ if (new_tot != tot){
self.refreshCatch(true); self.refreshCatch(true);
self.checkTotAnnotations(); self.checkTotAnnotations();
}else{ }else{
attempts++; attempts++;
ischanged(); ischanged();
} }
},100); //wait for the change in the annotations },100); //wait for the change in the annotations
}; };
ischanged(); ischanged();
} }
}); });
annotator.subscribe("annotationCreated", function (annotation){ annotator.subscribe("annotationCreated", function (annotation){
...@@ -826,6 +826,7 @@ CatchAnnotation.prototype = { ...@@ -826,6 +826,7 @@ CatchAnnotation.prototype = {
} }
for(var item in allannotations){ for(var item in allannotations){
var an = allannotations[item]; var an = allannotations[item];
an.highlights[0].style.background = "rgba(0,0,0,0)";
if (typeof an.id!='undefined' && an.id == osdaId){//this is the annotation if (typeof an.id!='undefined' && an.id == osdaId){//this is the annotation
var bounds = new OpenSeadragon.Rect(an.bounds.x, an.bounds.y, an.bounds.width, an.bounds.height); var bounds = new OpenSeadragon.Rect(an.bounds.x, an.bounds.y, an.bounds.width, an.bounds.height);
osda.viewer.viewport.fitBounds(bounds, false); osda.viewer.viewport.fitBounds(bounds, false);
...@@ -833,6 +834,7 @@ CatchAnnotation.prototype = { ...@@ -833,6 +834,7 @@ CatchAnnotation.prototype = {
console.log(an.target.container); console.log(an.target.container);
$('html,body').animate({scrollTop: $("#"+an.target.container).offset().top}, $('html,body').animate({scrollTop: $("#"+an.target.container).offset().top},
'slow'); 'slow');
an.highlights[0].style.background = "rgba(255,255,10,0.2)";
} }
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment