Skip to content

E
edx-platform
Commit 98446d1c by lduarte1991
Options

Annotation Tools: Code clean-up, formatting, spacing

parent 9751244e
Showing with 671 additions and 667 deletions
common/static/css/vendor/ova/share-annotator.css
/* Editor */
.share-container-annotator{
.share-container-annotator {
display: block;
min-width: 100%;
border: none;
......@@ -16,16 +16,16 @@
height: 3.1em;
}
.share-container-annotator .share-text-annotator{
.share-container-annotator .share-text-annotator {
float:left;
padding-top: 1em;
}
.annotator-editor .share-container-annotator .share-text-annotator{
.annotator-editor .share-container-annotator .share-text-annotator {
height: 2.1em;
}
.share-container-annotator .share-button, .annotator-wrapper .share-button{
.share-container-annotator .share-button, .annotator-wrapper .share-button {
top: 0.3em;
outline: 0;
float:left;
......@@ -40,14 +40,14 @@
background-size: 2.5em;
}
.share-container-annotator .share-button:hover, .annotator-wrapper .share-button:hover{
.share-container-annotator .share-button:hover, .annotator-wrapper .share-button:hover {
opacity: .6;
cursor: pointer;
}
/* Popup */
.annotator-wrapper .share-popup-overlay-bg{
.annotator-wrapper .share-popup-overlay-bg {
display: none;
position: fixed;
top: 0;
......@@ -59,7 +59,7 @@
background: rgba(0,0,0,0.75);
padding: 0;
}
.annotator-wrapper .share-popup-overlay-bg .share-popup{
.annotator-wrapper .share-popup-overlay-bg .share-popup {
background: #fff;
padding: 1% !important;
width: 30%;
......@@ -72,7 +72,7 @@
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
.annotator-wrapper .share-popup-overlay-bg .share-popup-copy,
.annotator-wrapper .share-popup-overlay-bg .share-popup-title{
.annotator-wrapper .share-popup-overlay-bg .share-popup-title {
font-style: normal;
font-weight: bold;
font-size: 21px;
......@@ -80,20 +80,20 @@
padding-bottom: 20px;
color: #222;
}
.annotator-wrapper .share-popup-overlay-bg .share-popup-uri{
.annotator-wrapper .share-popup-overlay-bg .share-popup-uri {
width:100%;
border: 1px solid rgb(144, 144, 144);
height: 24px;
margin-bottom: 10px;
}
.annotator-wrapper .share-popup-overlay-bg .share-popup-copy{
.annotator-wrapper .share-popup-overlay-bg .share-popup-copy {
font-size: 15px;
float: left;
width: 100%;
padding:0;
margin: 1.0em 0em 0.5em 0em !important;
}
.annotator-wrapper .share-popup-overlay-bg .share-popup .share-button{
.annotator-wrapper .share-popup-overlay-bg .share-popup .share-button {
width: 50%;
padding: 0;
-webkit-box-sizing: border-box;
......@@ -163,7 +163,7 @@
.annotator-viewer .share-viewer-annotator div.share-text-annotator,
.annotator-viewer .share-viewer-annotator div.share-button,
.annotator-wrapper div.share-button,
.annotator-wrapper div.share-text-annotator{
.annotator-wrapper div.share-text-annotator {
border-top: 0;
padding: 0;
background-size: 2em;
......@@ -185,12 +185,12 @@
}
.share-container-annotator .share-google-annotator, .annotator-wrapper .share-google-annotator{
.share-container-annotator .share-google-annotator, .annotator-wrapper .share-google-annotator {
background-image: url('data:image/png;base64,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');
}
.share-container-annotator .share-email-annotator, .annotator-wrapper .share-email-annotator{
.share-container-annotator .share-email-annotator, .annotator-wrapper .share-email-annotator {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABIUExURf///7KysrKyss/Pz9DQ0NHR0dLS0u7u7vDw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///37mbPQAAAACdFJOUwCWb//7SQAAAQNJREFUSMft1M2SgyAQRtHkC0RtbP6V93/TWZikFDuQ2c7krrCKU1gKXC7f/lNX9LvuAVB6AUdw78y/V2CEXltpjEcwmabQMNMR0GwbQsPOVAF2AXqR0wiOK2DYh/RGaKTg2VTA+pgXUWgsOXorghUq1ymsDVBOQqE0QYFK+xRKBxyFQumCvVAoH4ACFbe2+f0VnkKhfLICnmsoPJ46X2l7q1u4PUYdgNdxeY2aQDp4b/40+5AyxM2NLGw+YhcisrhbM+J5e9NsPWLKUinCnw7QZBg+hCgVggfXR3QksHVezlkGVZfAADIzs5Ving1hqO6lYZyIjBzRNA7He+nXV+W3v98P7gg+L5LCf08AAAAASUVORK5CYII=');
}
......
common/static/js/vendor/ova/OpenSeaDragonAnnotation.js
......@@ -44,18 +44,18 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
.subscribe("annotationsLoaded", function (annotations){
if (!self.annotationInstance) {
//annotation instance should include the OSD item and annotator
// annotation instance should include the OSD item and annotator
self.annotationInstance = new $._annotation({
viewer: self,
annotator: annotator,
});
//this collection of items is included as an item of annotator so
//that there is a method to communicate back and forth.
// this collection of items is included as an item of annotator so
// that there is a method to communicate back and forth.
annotator.osda = self.annotationInstance;
//Because it takes a while for both OSD to open and for annotator
//to get items from the backend, we wait until we get the "open" call
// Because it takes a while for both OSD to open and for annotator
// to get items from the backend, we wait until we get the "open" call
function refreshDisplay(){
if(!isOpenViewer){
setTimeout(refreshDisplay,200);
......@@ -75,48 +75,48 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* @constructor
*/
$._annotation = function(options) {
//options
// options
options = options || {};
if (!options.viewer) {
throw new Error("A viewer must be specified.");
}
//variables
// variables
this.viewer = options.viewer;
this.annotator = options.annotator;
this.options = options;
this.isAnnotating = false; //If the user is annotating
this.isDrawing = false; //if the user is drawing something
this.isAnnotating = false; // If the user is annotating
this.isDrawing = false; // if the user is drawing something
this.rectPosition = undefined;
//Init
// Init
this.init();
};
//-- Methods
$._annotation.prototype = {
/**
* This function makes sure that the OSD buttons are created, that the
* panning and zooming functionality is created and the annotation events.
*/
/**
* This function makes sure that the OSD buttons are created, that the
* panning and zooming functionality is created and the annotation events.
*/
init: function(){
var viewer = this.viewer;
//create Buttons
// create Buttons
this._createNewButton();
/* canvas Events */
//- Bind canvas functions
// Bind canvas functions
var onCanvasMouseDown = this.__bind(this._onCanvasMouseDown,this);
var onCanvasMouseMove = this.__bind(this._onCanvasMouseMove,this);
var onDocumentMouseUp = this.__bind(this._onDocumentMouseUp,this);
//- Add canvas events
// Add canvas events
$.addEvent(viewer.canvas, "mousedown", onCanvasMouseDown, true);
$.addEvent(viewer.canvas, "mousemove", onCanvasMouseMove, true);
$.addEvent(document, "mouseup", onDocumentMouseUp, true);
//Viewer events
// Viewer events
var self = this;
},
......@@ -128,17 +128,17 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
newAnnotation:function(){
var annotator = this.annotator;
//This variable tells editor that we want create an image annotation
// This variable tells editor that we want create an image annotation
annotator.editor.OpenSeaDragon = this.viewer.id;
//allows the adder to actually show up
// allows the adder to actually show up
annotator.adder.show();
//takes into account the various wrappers and instances to put the shape
//over the correct place.
// takes into account the various wrappers and instances to put the shape
// over the correct place.
this._setOverShape(annotator.adder);
//Open a new annotator dialog
// Open a new annotator dialog
annotator.onAdderClick();
},
......@@ -148,16 +148,16 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* @param {TinyMCEEditor} editor The item that pops up when you edit an annotation.
*/
editAnnotation: function(annotation,editor){
//Stupid check: is the annotation you're trying to edit an image?
// Stupid check: is the annotation you're trying to edit an image?
if (this._isOpenSeaDragon(annotation)){
var editor = editor || this.annotator.editor;
//set the editor over the highlighted element
// set the editor over the highlighted element
this._setOverShape(editor.element);
editor.checkOrientation();
//makes sure that we are making an image annotation
// makes sure that we are making an image annotation
editor.OpenSeaDragon = this.viewer.id;
}
},
......@@ -171,23 +171,23 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var allannotations = this.annotator.plugins['Store'].annotations;
var annotator = this.annotator;
//Sort the annotations by date
// Sort the annotations by date
this._sortByDate(allannotations);
//remove all of the overlays
// remove all of the overlays
this.viewer.drawer.clearOverlays();
for (var item in allannotations) {
var an = allannotations[item];
//check if the annotation is an OpenSeaDragon annotation
// check if the annotation is an OpenSeaDragon annotation
if (this._isOpenSeaDragon(an)){
this.drawRect(an);
}
}
//if the colored highlights by tags plugin it is notified to colorize
annotator.publish('colorizeHighlight', [an]);
}
}
// if the colored highlights by tags plugin it is notified to colorize
annotator.publish('colorizeHighlight', [an]);
},
/**
......@@ -199,15 +199,15 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
this._reset();
var viewer = this.viewer;
if (!this.isAnnotating){
//When annotating, the cursor turns into a crosshair and there is a
//green border around the OSD instance.
// When annotating, the cursor turns into a crosshair and there is a
// green border around the OSD instance.
jQuery('.openseadragon1').css('cursor', 'crosshair');
jQuery('.openseadragon1').css('border', '2px solid rgb(51,204,102)');
e.eventSource.imgGroup.src = this.resolveUrl( viewer.prefixUrl,"newan_hover.png");
e.eventSource.imgRest.src = this.resolveUrl( viewer.prefixUrl,"newan_hover.png");
e.eventSource.imgHover.src = this.resolveUrl( viewer.prefixUrl,"newan_grouphover.png");
}else{
//Otherwise, the cursor is a cross with four arrows to indicate movement
// Otherwise, the cursor is a cross with four arrows to indicate movement
jQuery('.openseadragon1').css('cursor', 'all-scroll');
jQuery('.openseadragon1').css('border', 'inherit');
e.eventSource.imgGroup.src = this.resolveUrl( viewer.prefixUrl,"newan_grouphover.png");
......@@ -215,7 +215,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
e.eventSource.imgHover.src = this.resolveUrl( viewer.prefixUrl,"newan_hover.png");
}
//toggles the annotating flag
// toggles the annotating flag
this.isAnnotating = !this.isAnnotating?true:false;
},
......@@ -225,28 +225,28 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* @param {Object} an Annotation item from the list in the Annotator instance.
*/
drawRect:function(an){
//Stupid check: Does this annotation actually have an area of annotation
// Stupid check: Does this annotation actually have an area of annotation
if (typeof an.rangePosition!='undefined'){
//Sets up the visual aspects of the area for the user
// Sets up the visual aspects of the area for the user
var span = document.createElement('span');
var rectPosition = an.rangePosition;
span.className = "annotator-hl";
span.style.border = '2px solid rgba(0,0,0,0.5)';
span.style.background = 'rgba(0,0,0,0)';
//Adds listening items for the viewer and editor
// Adds listening items for the viewer and editor
var onAnnotationMouseMove = this.__bind(this._onAnnotationMouseMove,this);
var onAnnotationClick = this.__bind(this._onAnnotationClick,this);
$.addEvent(span, "mousemove", onAnnotationMouseMove, true);
$.addEvent(span, "click", onAnnotationClick, true);
//Set the object in the div
// Set the object in the div
jQuery.data(span, 'annotation', an);
//Add the highlights to the annotation
// Add the highlights to the annotation
an.highlights = jQuery(span);
//Sends the element created to the proper location within the OSD instance
// Sends the element created to the proper location within the OSD instance
var olRect = new OpenSeadragon.Rect(rectPosition.left, rectPosition.top, rectPosition.width, rectPosition.height);
return this.viewer.drawer.addOverlay({
element: span,
......@@ -262,19 +262,19 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* screen coordinates and OSD image coordinates.
*/
setRectPosition:function(){
//Get the actual locations of the rectangle
// Get the actual locations of the rectangle
var left = parseInt(this.rect.style.left);
var top = parseInt(this.rect.style.top);
var width = parseInt(this.rect.style.left)+parseInt(this.rect.style.width);
var height = parseInt(this.rect.style.top)+parseInt(this.rect.style.height);
var width = parseInt(this.rect.style.left) + parseInt(this.rect.style.width);
var height = parseInt(this.rect.style.top) + parseInt(this.rect.style.height);
var startPoint = new $.Point(left,top);
var endPoint = new $.Point(width,height);
//return the proper value of the rectangle
// return the proper value of the rectangle
this.rectPosition = {left:this._physicalToLogicalXY(startPoint).x,
top:this._physicalToLogicalXY(startPoint).y,
width:this._physicalToLogicalXY(endPoint).x-this._physicalToLogicalXY(startPoint).x,
height:this._physicalToLogicalXY(endPoint).y-this._physicalToLogicalXY(startPoint).y
width:this._physicalToLogicalXY(endPoint).x - this._physicalToLogicalXY(startPoint).x,
height:this._physicalToLogicalXY(endPoint).y - this._physicalToLogicalXY(startPoint).y
};
},
......@@ -287,18 +287,18 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
_onCanvasMouseDown: function(event) {
//action is ONLY performed if we are in annotation creation mode
// action is ONLY performed if we are in annotation creation mode
if (this.isAnnotating){
var viewer = this.viewer;
event.preventDefault();
//reset the display
// reset the display
this._reset();
//set mode drawing
// set mode drawing
this.isDrawing = true;
//Create rect element
// Create rect element
var mouse = $.getMousePosition( event );
var elementPosition = $.getElementPosition(viewer.canvas);
var position = mouse.minus( elementPosition );
......@@ -308,18 +308,18 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
this.rect.style.border = '2px solid rgba(0,0,0,0.5)';
this.rect.style.position = 'absolute';
this.rect.className = 'DrawingRect';
//set the initial position
this.rect.style.top = position.y+"px";
this.rect.style.left = position.x+"px";
// set the initial position
this.rect.style.top = position.y + "px";
this.rect.style.left = position.x + "px";
this.rect.style.width = "1px";
this.rect.style.height = "1px";
//save the start Position
// save the start Position
this.startPosition = position;
//save rectPosition as initial rectangle parameter to Draw in the canvas
// save rectPosition as initial rectangle parameter to Draw in the canvas
this.setRectPosition();
//append Child to the canvas
// append Child to the canvas
viewer.canvas.appendChild(this.rect);
}
},
......@@ -330,31 +330,31 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
_onCanvasMouseMove: function(event) {
//of course, this only runs when we are in annotation creation mode and
//when the user has clicked down (and is therefore drawing the rectangle)
// of course, this only runs when we are in annotation creation mode and
// when the user has clicked down (and is therefore drawing the rectangle)
if (this.isAnnotating && this.isDrawing){
var viewer = this.viewer;
//Calculate the new end position
// Calculate the new end position
var mouse = $.getMousePosition( event );
var elementPosition = $.getElementPosition(viewer.canvas);
var endPosition = mouse.minus( elementPosition );
//retrieve start position
// retrieve start position
var startPosition = this.startPosition;
var newWidth= endPosition.x-startPosition.x;
var newHeight =endPosition.y-startPosition.y;
//Set new position
this.rect.style.width = (newWidth<0) ? (-1*newWidth) +'px' : newWidth +'px';
this.rect.style.left = (newWidth<0) ? (startPosition.x + newWidth) +'px' : startPosition.x +'px';
this.rect.style.height = (newHeight<0) ? (-1*newHeight) +'px' : newHeight +'px';
this.rect.style.top = (newHeight<0) ? (startPosition.y + newHeight) +'px' : startPosition.y +'px';
// Set new position
this.rect.style.width = (newWidth < 0) ? (-1*newWidth) + 'px' : newWidth + 'px';
this.rect.style.left = (newWidth < 0) ? (startPosition.x + newWidth) + 'px' : startPosition.x + 'px';
this.rect.style.height = (newHeight < 0) ? (-1*newHeight) + 'px' : newHeight + 'px';
this.rect.style.top = (newHeight < 0) ? (startPosition.y + newHeight) + 'px' : startPosition.y + 'px';
//Modify the rectPosition with the new this.rect values
// Modify the rectPosition with the new this.rect values
this.setRectPosition();
//Show adder and hide editor
// Show adder and hide editor
this.annotator.editor.element[0].style.display = 'none';
this._setOverShape(this.annotator.adder);
}
......@@ -366,21 +366,21 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
_onDocumentMouseUp: function() {
//Stupid check: only do it when in annotation creation mode and
//when the user has begun making a rectangle over the annotation area
// Stupid check: only do it when in annotation creation mode and
// when the user has begun making a rectangle over the annotation area
if (this.isAnnotating && this.isDrawing){
var viewer = this.viewer;
viewer.innerTracker.setTracking(true);
this.isDrawing = false;
//Set the new position for the rectangle
// Set the new position for the rectangle
this.setRectPosition();
//Open Annotator editor
// Open Annotator editor
this.newAnnotation();
//Hide adder and show editor
// Hide adder and show editor
this.annotator.editor.element[0].style.display = 'block';
this._setOverShape(this.annotator.editor.element);
this.annotator.editor.checkOrientation();
......@@ -396,11 +396,11 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var annotator = this.annotator;
var elem = jQuery(event.target).parents('.annotator-hl').andSelf();
//if there is a opened annotation then show the new annotation mouse over
// if there is a opened annotation then show the new annotation mouse over
if (typeof annotator!='undefined' && elem.hasClass("annotator-hl") && !this.isDrawing){
//hide the last open viewer
// hide the last open viewer
annotator.viewer.hide();
//get the annotation over the mouse
// get the annotation over the mouse
var annotations = jQuery(event.target.parentNode).find('.annotator-hl').map(function() {
var self = jQuery(this);
var offset = self.offset();
......@@ -414,21 +414,21 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var maxx = l + w;
var maxy = t + h;
//if the current position of the mouse is within the bounds of an area
//change the background of that area to a light yellow to simulate
//a hover. Otherwise, keep it translucent.
// if the current position of the mouse is within the bounds of an area
// change the background of that area to a light yellow to simulate
// a hover. Otherwise, keep it translucent.
this.style.background = (y <= maxy && y >= t) && (x <= maxx && x >= l)?
'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;
});
//show the annotation in the viewer
// show the annotation in the viewer
var mousePosition = {
top:$.getMousePosition(event).y,
left:$.getMousePosition(event).x,
};
//if the user is hovering over multiple annotation areas,
//they will be stacked as usual
// if the user is hovering over multiple annotation areas,
// they will be stacked as usual
if (annotations.length>0) annotator.showViewer(jQuery.makeArray(annotations), mousePosition);
}
},
......@@ -438,17 +438,17 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* @param {Event} event The actual action of clicking down within an annotation area.
*/
_onAnnotationClick: function(event){
//gets the annotation from the data stored in the element
// gets the annotation from the data stored in the element
var an = jQuery.data(event.target, 'annotation');
//gets the bound within the annotation data
// gets the bound within the annotation data
var bounds = typeof an.bounds!='undefined'?an.bounds:{};
var currentBounds = this.viewer.drawer.viewport.getBounds();
//if the area is not already panned and zoomed in to the correct area
// if the area is not already panned and zoomed in to the correct area
if (typeof bounds.x!='undefined') currentBounds.x = bounds.x;
if (typeof bounds.y!='undefined') currentBounds.y = bounds.y;
if (typeof bounds.width!='undefined') currentBounds.width = bounds.width;
if (typeof bounds.height!='undefined') currentBounds.height = bounds.height;
//change the zoom to the saved parameter
// change the zoom to the saved parameter
this.viewer.drawer.viewport.fitBounds(currentBounds);
},
......@@ -459,13 +459,13 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* @param {String} type Either 'asc' for ascending or 'desc' for descending
*/
_sortByDate: function (annotations,type){
var type = type || 'asc'; //asc => The value [0] will be the most recent date
var type = type || 'asc'; // asc => The value [0] will be the most recent date
annotations.sort(function(a,b){
//gets the date from when they were last updated
// gets the date from when they were last updated
a = new Date(typeof a.updated!='undefined'?createDateFromISO8601(a.updated):'');
b = new Date(typeof b.updated!='undefined'?createDateFromISO8601(b.updated):'');
//orders them based on type passed in
// orders them based on type passed in
if (type == 'asc')
return b<a?-1:b>a?1:0;
else
......@@ -481,22 +481,22 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var onFocusHandler = $.delegate( this, onFocus );
var onBlurHandler = $.delegate( this, onBlur );
var onModeAnnotationHandler = $.delegate( this, this.modeAnnotation );
/* Buttons */
var viewer = this.viewer;
var self = this;
viewer.modeAnnotation = new $.Button({
element: viewer.modeAnnotation ? $.getElement( viewer.modeAnnotation ) : null,
clickTimeThreshold: viewer.clickTimeThreshold,
clickDistThreshold: viewer.clickDistThreshold,
tooltip: "New Annotation",
srcRest: self.resolveUrl( viewer.prefixUrl,"newan_rest.png"),
srcGroup: self.resolveUrl( viewer.prefixUrl,"newan_grouphover.png"),
srcHover: self.resolveUrl( viewer.prefixUrl,"newan_hover.png"),
srcDown: self.resolveUrl( viewer.prefixUrl,"newan_pressed.png"),
onRelease: onModeAnnotationHandler,
onFocus: onFocusHandler,
onBlur: onBlurHandler
});
/* Buttons */
var viewer = this.viewer;
var self = this;
viewer.modeAnnotation = new $.Button({
element: viewer.modeAnnotation ? $.getElement( viewer.modeAnnotation ) : null,
clickTimeThreshold: viewer.clickTimeThreshold,
clickDistThreshold: viewer.clickDistThreshold,
tooltip: "New Annotation",
srcRest: self.resolveUrl( viewer.prefixUrl,"newan_rest.png"),
srcGroup: self.resolveUrl( viewer.prefixUrl,"newan_grouphover.png"),
srcHover: self.resolveUrl( viewer.prefixUrl,"newan_hover.png"),
srcDown: self.resolveUrl( viewer.prefixUrl,"newan_pressed.png"),
onRelease: onModeAnnotationHandler,
onFocus: onFocusHandler,
onBlur: onBlurHandler
});
//- Wrapper Annotation Menu
viewer.wrapperAnnotation = new $.ButtonGroup({
......@@ -507,8 +507,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
clickDistThreshold: viewer.clickDistThreshold
});
//area makes sure that the annotation button only appears when everyone is
//allowed to annotate or if you are an instructor
// area makes sure that the annotation button only appears when everyone is
// allowed to annotate or if you are an instructor
if(this.options.viewer.annotation_mode == "everyone" || this.options.viewer.flags){
/* Set elements to the control menu */
viewer.annotatorControl = viewer.wrapperAnnotation.element;
......@@ -531,10 +531,10 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* the last rectangle you drew (but didn't save) gets destroyed.
*/
_reset: function(){
//Find and remove DrawingRect. This is the previous rectangle
// Find and remove DrawingRect. This is the previous rectangle
this._removeElemsByClass('DrawingRect',this.viewer.canvas);
//Show adder and hide editor
// Show adder and hide editor
this.annotator.editor.element[0].style.display = 'none';
},
......@@ -569,21 +569,21 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var annotator = this.annotator;
var rp = an.rangePosition;
//Makes sure OSD exists and that annotation is an image annotation
//with a position in the OSD instance
// Makes sure OSD exists and that annotation is an image annotation
// with a position in the OSD instance
var isOpenSeaDragon = (typeof annotator.osda != 'undefined');
var isContainer = (typeof an.target!='undefined' && an.target.container==this.viewer.id );
var isImage = (typeof an.media!='undefined' && an.media=='image');
var isRP = (typeof rp!='undefined');
var isSource = false;
//Double checks that the image being displayed matches the annotations
var source = this.viewer.source;
var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:'';
var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:'';
var compareUrl = tilesUrl!=''?tilesUrl:(''+functionUrl).replace(/\s+/g, ' ');
if(isContainer) isSource = (an.target.src == compareUrl);
// Double checks that the image being displayed matches the annotations
var source = this.viewer.source;
var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:'';
var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:'';
var compareUrl = tilesUrl!=''?tilesUrl:('' + functionUrl).replace(/\s+/g, ' ');
if(isContainer) isSource = (an.target.src == compareUrl);
return (isOpenSeaDragon && isContainer && isImage && isRP && isSource);
},
......@@ -594,25 +594,25 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* @param {HTMLElement} elem Element where shape is overlayed
*/
_setOverShape: function(elem){
//Calculate Point absolute positions
// Calculate Point absolute positions
var rectPosition = this.rectPosition || {};
var startPoint = this._logicalToPhysicalXY(new $.Point(rectPosition.left,rectPosition.top));
var endPoint = this._logicalToPhysicalXY(new $.Point(rectPosition.left+rectPosition.width,rectPosition.top+rectPosition.height));
var endPoint = this._logicalToPhysicalXY(new $.Point(rectPosition.left + rectPosition.width,rectPosition.top + rectPosition.height));
//Calculate Point absolute positions
// Calculate Point absolute positions
var wrapper = jQuery('.annotator-wrapper')[0];
var positionAnnotator = $.getElementPosition(wrapper);
var positionCanvas = $.getElementPosition(this.viewer.canvas);
var positionAdder = {};
//Fix with positionCanvas based on annotator wrapper and OSD area
// Fix with positionCanvas based on annotator wrapper and OSD area
startPoint = startPoint.plus(positionCanvas);
endPoint = endPoint.plus(positionCanvas);
elem[0].style.display = 'block'; //Show the adder
elem[0].style.display = 'block'; // Show the adder
positionAdder.left = (startPoint.x - positionAnnotator.x) + (endPoint.x - startPoint.x) / 2;
positionAdder.top = (startPoint.y - positionAnnotator.y) + (endPoint.y - startPoint.y) / 2; //It is not necessary fix with - positionAnnotator.y
positionAdder.top = (startPoint.y - positionAnnotator.y) + (endPoint.y - startPoint.y) / 2; // It is not necessary fix with - positionAnnotator.y
elem.css(positionAdder);
},
......@@ -717,12 +717,12 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
this.pluginSubmit = __bind(this.pluginSubmit, this);
_ref = OpenSeaDragon.__super__.constructor.apply(this, arguments);
//To facilitate calling items, we want to be able to get the index of a value
// To facilitate calling items, we want to be able to get the index of a value
this.__indexOf = [].indexOf;
if(!this.__indexOf){
//Basically you iterate through every item on the list, if it matches
//the item you are looking for return the current index, otherwise return -1
// Basically you iterate through every item on the list, if it matches
// the item you are looking for return the current index, otherwise return -1
this.__indexOf = function(item) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this && this[i] === item)
......@@ -737,13 +737,13 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
OpenSeaDragon.prototype.field = null;
OpenSeaDragon.prototype.input = null;
/**
* This function initiates the editor that will apear when you edit/create an
* annotation and the viewer that appears when you hover over an item.
*/
/**
* This function initiates the editor that will apear when you edit/create an
* annotation and the viewer that appears when you hover over an item.
*/
OpenSeaDragon.prototype.pluginInit = function() {
//Check that annotator is working
// Check that annotator is working
if (!Annotator.supported()) {
return;
}
......@@ -751,12 +751,12 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
//-- Editor
this.field = this.annotator.editor.addField({
id: 'osd-input-rangePosition-annotations',
type: 'input', //options (textarea,input,select,checkbox)
type: 'input', // options (textarea,input,select,checkbox)
submit: this.pluginSubmit,
EditOpenSeaDragonAn: this.EditOpenSeaDragonAn
});
//Modify the element created with annotator to be an invisible span
// Modify the element created with annotator to be an invisible span
var select = '<li><span id="osd-input-rangePosition-annotations"></span></li>';
var newfield = Annotator.$(select);
Annotator.$(this.field).replaceWith(newfield);
......@@ -774,40 +774,40 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
* metadata for the image in an object that will be passed to the backend.
*/
OpenSeaDragon.prototype.pluginSubmit = function(field, annotation) {
//Select the new JSON for the Object to save
// Select the new JSON for the Object to save
if (this.EditOpenSeaDragonAn()){
var annotator = this.annotator;
var osda = annotator.osda;
var position = osda.rectPosition || {};
var isNew = typeof annotation.media=='undefined';
if(isNew){
//if it's undefined, we know it's an image because the editor within
//the OSD instance was open
// if it's undefined, we know it's an image because the editor within
// the OSD instance was open
if (typeof annotation.media == 'undefined') annotation.media = "image"; // - media
annotation.target = annotation.target || {}; // - target
annotation.target.container = osda.viewer.id || ""; // - target.container
//Save source url
// Save source url
var source = osda.viewer.source;
var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:'';
var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:'';
annotation.target.src = tilesUrl!=''?tilesUrl:(''+functionUrl).replace(/\s+/g, ' '); // - target.src (media source)
annotation.target.src = tilesUrl!=''?tilesUrl:('' + functionUrl).replace(/\s+/g, ' '); // - target.src (media source)
annotation.target.ext = source.fileFormat || ""; // - target.ext (extension)
//Gets the bounds in order to save them for zooming in and highlight properties
// Gets the bounds in order to save them for zooming in and highlight properties
annotation.bounds = osda.viewer.drawer.viewport.getBounds() || {}; // - bounds
var finalimagelink = source["@id"].replace("/info.json", "");
var finalimagelink = source["@id"].replace("/info.json", "");
var highlightX = Math.round(position.left * source["width"]);
var highlightY = Math.round(position.top * source["width"]);
var highlightWidth = Math.round(position.width * source["width"]);
var highlightHeight = Math.round(position.height * source["width"]);
//creates a link to the OSD server that contains the image to get
//the thumbnail of the selected portion of the image
// creates a link to the OSD server that contains the image to get
// the thumbnail of the selected portion of the image
annotation.target.thumb = finalimagelink + "/" + highlightX + "," + highlightY + "," + highlightWidth + "," + highlightHeight + "/full/0/native." + source["formats"][0];
if(isNew) annotation.rangePosition = position || {}; // - rangePosition
//updates the dates associated with creation and update
// updates the dates associated with creation and update
annotation.updated = new Date().toISOString(); // - updated
if (typeof annotation.created == 'undefined')
annotation.created = annotation.updated; // - created
......@@ -830,30 +830,30 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
};
/**
* Detect if the annotation is an image annotation and there's a target, open
* OSD instance.
* @param {Object} an Annotation from the Annotator instance
*/
* Detect if the annotation is an image annotation and there's a target, open
* OSD instance.
* @param {Object} an Annotation from the Annotator instance
*/
OpenSeaDragon.prototype.isOpenSeaDragon = function (an){
var annotator = this.annotator;
var rp = an.rangePosition;
//Makes sure OSD exists and that annotation is an image annotation
//with a position in the OSD instance
var isOpenSeaDragon = (typeof annotator.osda != 'undefined');
var isContainer = (typeof an.target!='undefined' && an.target.container==this.viewer.id );
var isImage = (typeof an.media!='undefined' && an.media=='image');
var isRP = (typeof rp!='undefined');
var isSource = false;
//Double checks that the image being displayed matches the annotations
var source = this.viewer.source;
var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:'';
var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:'';
var compareUrl = tilesUrl!=''?tilesUrl:(''+functionUrl).replace(/\s+/g, ' ');
if(isContainer) isSource = (an.target.src == compareUrl);
return (isOpenSeaDragon && isContainer && isImage && isRP && isSource);
var rp = an.rangePosition;
// Makes sure OSD exists and that annotation is an image annotation
// with a position in the OSD instance
var isOpenSeaDragon = (typeof annotator.osda != 'undefined');
var isContainer = (typeof an.target!='undefined' && an.target.container==this.viewer.id );
var isImage = (typeof an.media!='undefined' && an.media=='image');
var isRP = (typeof rp!='undefined');
var isSource = false;
// Double checks that the image being displayed matches the annotations
var source = this.viewer.source;
var tilesUrl = typeof source.tilesUrl!='undefined'?source.tilesUrl:'';
var functionUrl = typeof source.getTileUrl!='undefined'?source.getTileUrl:'';
var compareUrl = tilesUrl!=''?tilesUrl:('' + functionUrl).replace(/\s+/g, ' ');
if(isContainer) isSource = (an.target.src == compareUrl);
return (isOpenSeaDragon && isContainer && isImage && isRP && isSource);
};
/**
......@@ -861,14 +861,14 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
* @param {Object} an Annotation object from the Annotator instance
*/
OpenSeaDragon.prototype._deleteAnnotation = function(an){
//Remove the annotation of the plugin Store
// Remove the annotation of the plugin Store
var annotations = this.annotator.plugins['Store'].annotations;
//Failsafe in case annotation is not immediately removed from annotations list
// Failsafe in case annotation is not immediately removed from annotations list
if (annotations.indexOf(an)>-1)
annotations.splice(annotations.indexOf(an), 1);
//Refresh the annotations in the display
// Refresh the annotations in the display
this.annotator.osda.refreshDisplay();
};
......@@ -881,12 +881,12 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
var isOpenSeaDragon = this.isOpenSeaDragon;
var self = this;
//local functions
// local functions
//-- Editor
function annotationEditorHidden(editor) {
if (EditOpenSeaDragonAn()){
annotator.osda._reset();
annotator.osda.refreshDisplay(); //Reload the display of annotations
annotator.osda.refreshDisplay(); // Reload the display of annotations
}
annotator.editor.OpenSeaDragon=-1;
annotator.unsubscribe("annotationEditorHidden", annotationEditorHidden);
......@@ -910,7 +910,7 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
function annotationViewerShown(viewer,annotations) {
var wrapper = jQuery('.annotator-wrapper').offset();
//Fix with positionCanvas
// Fix with positionCanvas
var startPoint = {x: parseFloat(viewer.element[0].style.left),
y: parseFloat(viewer.element[0].style.top)};
......@@ -921,12 +921,12 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
};
viewer.element.css(newpos);
//Remove the time to wait until disapear, to be more faster that annotator by default
// Remove the time to wait until disapear, to be more faster that annotator by default
viewer.element.find('.annotator-controls').removeClass(viewer.classes.showControls);
annotator.viewer.subscribe("hide", hideViewer);
};
//subscribe to Annotator
// subscribe to Annotator
annotator.subscribe("annotationEditorShown", annotationEditorShown)
.subscribe("annotationDeleted", annotationDeleted)
.subscribe("annotationViewerShown", annotationViewerShown);
......@@ -940,18 +940,18 @@ Annotator.Plugin.OpenSeaDragon = (function(_super) {
//----------------PUBLIC OBJECT TO CONTROL THE ANNOTATIONS----------------//
//The name of the plugin that the user will write in the html
// The name of the plugin that the user will write in the html
OpenSeadragonAnnotation = ("OpenSeadragonAnnotation" in window) ? OpenSeadragonAnnotation : {};
OpenSeadragonAnnotation = function (element, options) {
//local variables
// local variables
var $ = jQuery;
var options = options || {};
options.optionsOpenSeadragon = options.optionsOpenSeadragon || {};
options.optionsOSDA = options.optionsOSDA || {};
options.optionsAnnotator = options.optionsAnnotator || {};
//if there isn't store optinos it will create a uri and limit variables for the Back-end of Annotations
// if there isn't store optinos it will create a uri and limit variables for the Back-end of Annotations
if (typeof options.optionsAnnotator.store=='undefined')
options.optionsAnnotator.store = {};
var store = options.optionsAnnotator.store;
......@@ -968,11 +968,11 @@ OpenSeadragonAnnotation = function (element, options) {
if (typeof store.loadFromSearch.limit=='undefined')
store.loadFromSearch.limit = 10000;
//global variables
// global variables
this.currentUser = null;
//-- Init all the classes --/
//Annotator
// Annotator
this.annotator = $(element).annotator(options.optionsAnnotator.annotator).data('annotator');
//-- Activate all the Annotator plugins --//
......@@ -1011,10 +1011,10 @@ OpenSeadragonAnnotation = function (element, options) {
//- OpenSeaDragon Plugins
this.viewer.annotation(options.optionsOSDA);
//Set annotator.editor.OpenSeaDragon by default
// Set annotator.editor.OpenSeaDragon by default
this.annotator.editor.OpenSeaDragon=-1;
//We need to make sure that osda is accessible via annotator
// We need to make sure that osda is accessible via annotator
this.annotator.osda = this;
function reloadEditor(){
......
common/static/js/vendor/ova/share-annotator.js
......@@ -23,480 +23,484 @@ var _ref,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Annotator.Plugin.Share = (function(_super) {
__extends(Share, _super);
//Default Share configuration
Share.prototype.options = {
shareIn:['facebook','twitter','email','google'],
getUrl:{
'facebook':function(title,link,noteText){
return 'https://www.facebook.com/sharer/sharer.php?s=100&p[url]='+link+'&p[title]='+encodeURIComponent('Open Video Annotation')+'&p[summary]='+noteText;
},
'twitter':function(title,link,noteText){
return 'https://twitter.com/intent/tweet?original_referer='+link+'&source=tweetbutton&url='+link+ "&via=OpenVideoAnnotation&text=" +encodeURIComponent('I want to share the following Open Video Annotation: ');
},
'google':function(title,link,noteText){
return 'https://plus.google.com/share?url='+link;
},
'email': function(title,link,noteText){
return 'mailto:?subject='+title+'&body='+link;
}
},
baseUrl:'', //baseUrl = the base url for all the shared annotations
};
__extends(Share, _super);
// Default Share configuration
Share.prototype.options = {
shareIn: ['facebook', 'twitter', 'email', 'google'],
getUrl: {
'facebook':function(title, link, noteText){
return 'https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + link + '&p[title]=' + encodeURIComponent('Open Video Annotation') + '&p[summary]=' + noteText;
},
'twitter':function(title, link, noteText){
return 'https://twitter.com/intent/tweet?original_referer=' + link + '&source=tweetbutton&url=' + link + "&via=OpenVideoAnnotation&text=" + encodeURIComponent('I want to share the following Open Video Annotation: ');
},
'google':function(title, link, noteText){
return 'https://plus.google.com/share?url=' + link;
},
'email': function(title, link, noteText){
return 'mailto:?subject=' + title + '&body=' + link;
}
},
baseUrl: '', // baseUrl = the base url for all the shared annotations
};
function Share(element,options) {
if (typeof options!='undefined')
this.options.shareIn = typeof options.shareIn!='undefined'?options.shareIn:this.options.shareIn;
this.buildHTMLShareButton = __bind(this.buildHTMLShareButton, this);
this.runningAPI = __bind(this.runningAPI, this);
this.updateViewer = __bind(this.updateViewer, this);
_ref = Share.__super__.constructor.apply(this, arguments);
return _ref;
}
function Share(element, options) {
if (typeof options!='undefined')
this.options.shareIn = typeof options.shareIn!='undefined'?options.shareIn:this.options.shareIn;
this.buildHTMLShareButton = __bind(this.buildHTMLShareButton, this);
this.runningAPI = __bind(this.runningAPI, this);
this.updateViewer = __bind(this.updateViewer, this);
_ref = Share.__super__.constructor.apply(this, arguments);
return _ref;
}
Share.prototype.field = null;
Share.prototype.field = null;
Share.prototype.input = null;
Share.prototype.input = null;
Share.prototype.pluginInit = function() {
//Check that annotator is working
if (!Annotator.supported()) {
return;
}
//-- Editor
this.field = this.annotator.editor.addField({
type: 'input', //options (textarea,input,select,checkbox)
});
Share.prototype.pluginInit = function() {
// Check that annotator is working
if (!Annotator.supported()) {
return;
}
// -- Editor
this.field = this.annotator.editor.addField({
type: 'input', // options (textarea, input, select, checkbox)
});
//Modify the element created with annotator to be an invisible span
var newfield = Annotator.$('<li class="annotator-item">'+this.buildHTMLShareButton('Share without saving:')+'</li>');
Annotator.$(this.field).replaceWith(newfield);
this.field=newfield[0];
//Create the actions for the buttons
this.buttonsActions(this.field,2,this.options.baseUrl); //2 is the method of the API that will be for share without saving
//Init the API plugin
var APIoptions = this.initAPI();
this.runAPI(APIoptions);
//-- Viewer
var newview = this.annotator.viewer.addField({
load: this.updateViewer,
});
// Modify the element created with annotator to be an invisible span
var newfield = Annotator.$('<li class="annotator-item">' + this.buildHTMLShareButton('Share without saving:') + '</li>');
Annotator.$(this.field).replaceWith(newfield);
this.field=newfield[0];
// Create the actions for the buttons
this.buttonsActions(this.field, 2, this.options.baseUrl); // 2 is the method of the API that will be for share without saving
// Init the API plugin
var APIoptions = this.initAPI();
this.runAPI(APIoptions);
// -- Viewer
var newview = this.annotator.viewer.addField({
load: this.updateViewer,
});
return this.input = $(this.field).find(':input');
};
//Share button HTML
Share.prototype.buildHTMLShareButton = function(title,id) {
var title = title || '',
id = typeof id!='undefined'?'annotationId="'+id+'"':'',
titleText = title!=''?'<div class="share-text-annotator">'+title+'</div>':'',
shareButton = '<div class="share-button-annotator share-button" '+id+'></div>',
popup = '<div class="share-popup-overlay-bg" style="z-index:30000000000"><div class="share-popup"><div class="share-popup-items"></div><div class="close-btn">Close</div></div></div>';
if($('.share-popup-overlay-bg').length === 0)
$('.annotator-wrapper').append(popup);
return '<div class="share-container-annotator">'+titleText+shareButton+'</div>';
}
//template for the design of the Share Plugin
Share.prototype.buildHTMLPopup = function(title) {
var buttons = '';
if (typeof this.options.shareIn!='undefined'){
this.options.shareIn.forEach(function(item) {
buttons += '<div class="share-'+item+'-annotator share-button">'+item.charAt(0).toUpperCase() + item.slice(1)+'</div>';
});
}
this.uri = typeof this.uri!='undefined'?this.uri:'';
var title = '<div class="share-popup-title">'+title.replace(":","")+'</div>',
copy = '<div class="share-popup-copy">Copy and Share:</div>',
uri = '<input type="text" class="share-popup-uri" onclick="javascript:this.select();" readonly="true" value="'+this.uri+'">',
popup = title + buttons + copy + uri;
return popup;
}
//Create the actions for the buttons
Share.prototype.buttonsActions = function(field,method,url, annotation) {
var share = this;
// hide popup when user clicks on close button
$('.close-btn').click(function() {
$('.share-popup-overlay-bg').hide();
});
// hides the popup if user clicks anywhere outside the container
$('.share-popup-overlay-bg').click(function() {
$('.share-popup-overlay-bg').hide();
});
// prevents the overlay from closing if user clicks inside the popup overlay
$('.share-popup').click(function() {
return false;
});
// Share button
$(field).find('.share-button-annotator.share-button').click(function(event) {
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
annotation = share.getAnnotationFromId(event.currentTarget.attributes.annotationid);
var _field = this,
ovaId = annotation.id,
title = method == 1?'Share':'Share without saving';
// share.uri will be useful for buildHTMLPopup functions
share.uri = share.createAPIURL(method,ovaId,url, annotation);
//display your popup
$('.share-popup-overlay-bg').show();
//build buttons
$('.share-popup-items').html(share.buildHTMLPopup(title));
//buttons actions
if (typeof share.options.shareIn!='undefined'){
share.options.shareIn.forEach(function(item) {
$('.share-'+item+'-annotator.share-button').click(function() {
var url = share.createAPIURL(method,ovaId,url, annotation),
title = "Sharing a annotation with Open Video Annotation";
link = encodeURIComponent(url),
noteText = share.getSource('ovaText'),
finalUrl = '';
if (method==1){
var viewer = share.annotator.viewer,
textarea = $(viewer.element).find('div:first').html();
noteText = encodeURIComponent(textarea);
}
finalUrl = typeof share.options.getUrl[item]!='undefined'?share.options.getUrl[item](title,link,noteText):'';
if(typeof share.options.getUrl[item]!='undefined')
window.open(finalUrl);
});
});
}
});
};
Share.prototype.createAPIURL = function(method,ovaId,url, annotation) {
var annotator = this.annotator,
editor = annotator.editor,
method = method || 1,
//url = location.protocol + '//' + location.host + location.pathname,
url = annotation.uri || window.location.href;
url += (url.indexOf('?') >= 0)?'&':'?';
if (method === 1){
var ovaId = typeof ovaId!='undefined'?ovaId:'';
url += 'ovaId=' + ovaId;
}else if (method === 2){
var ovaStart = this.getSource('ovaStart'),
ovaEnd = this.getSource('ovaEnd'),
ovaText = this.getSource('ovaText');
url += 'ovaStart='+ ovaStart
+'&ovaEnd='+ ovaEnd
+'&ovaText='+ ovaText;
if(typeof editor.VideoJS!='undefined' && editor.VideoJS !== -1){//Video Annotation
var ovaContainer = this.getSource('ovaContainer'),
ovaSrc = this.getSource('ovaSrc');
url += '&ovaContainer='+ovaContainer
+'&ovaSrc='+ ovaSrc;
}else{//Text Annotation
var ovastartOffset = this.getSource('ovastartOffset'),
ovaendOffset = this.getSource('ovaendOffset');
url += '&ovastartOffset='+ovastartOffset
+'&ovaendOffset='+ ovaendOffset;
}
}
return url;
};
Share.prototype.getSource = function(source) {
var source = source || '';
if (source == 'ovaId') {//method 1
source=this.annotation.id;
}else{//method 2
var annotator = this.annotator,
editor = annotator.editor,
textarea = $(editor.element).find('textarea')[0];
if(source == 'ovaText')
source = textarea.value;
if (typeof editor.VideoJS!='undefined' && editor.VideoJS !== -1){//Video Annotation
if(source == 'ovaContainer')
source = editor.VideoJS;
else if(source == 'ovaSrc')
source = annotator.mplayer[editor.VideoJS].tech.options_.source.src;
else if(source == 'ovaStart')
source = annotator.mplayer[editor.VideoJS].rangeslider.getValues().start;
else if(source == 'ovaEnd')
source = annotator.mplayer[editor.VideoJS].rangeslider.getValues().end;
}else{//Text Annotation
var annotation = editor.annotation;
if(source == 'ovastartOffset')
source = annotation.ranges[0].startOffset;
else if(source == 'ovaendOffset')
source = annotation.ranges[0].endOffset;
else if(source == 'ovaStart')
source = annotation.ranges[0].start;
else if(source == 'ovaEnd')
source = annotation.ranges[0].end;
}
}
return encodeURIComponent(source);
};
Share.prototype.initAPI = function() {
// -- Detect API in the URL -- //
/*
The first option is to give a known id of an annotation
Example http://url.com/#id=rTcpOjIMT2aF1apDtboC-Q
*/
var API = {},
ovaId = this.getParameterByName('ovaId'), //Method 1 (Obligatory)
start = this.getParameterByName('ovaStart'), //Method 2 (Obligatory)
end = this.getParameterByName('ovaEnd'), //Method 2 (Obligatory)
container = this.getParameterByName('ovaContainer'), //Method 2 (Obligatory)
src = this.getParameterByName('ovaSrc'),//Method 2 (Obligatory)
text = this.getParameterByName('ovaText'),//Method 2
user = this.getParameterByName('ovaUser'),//Method 2
startOffset = this.getParameterByName('ovastartOffset'),//Method 2
endOffset = this.getParameterByName('ovaendOffset');//Method 2
//remove the variables from the url browser
var stripped_url = top.location.href;
if (ovaId != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaId');
if (start != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaStart');
if (end != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaEnd');
if (container != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaContainer');
if (src != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaSrc');
if (text != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaText');
if (user != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaUser');
if (startOffset != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovastartOffset');
if (endOffset != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaendOffset');
window.history.pushState("object or string", "Title", stripped_url);
// Method 1 API with the Id of the annotation
//Example: http://danielcebrian.com/annotations/demo.html?&ovaId=wtva_SjnQb2HtqppDihKug
if(ovaId != ''){
$.extend(API,{method:1,ovaId:ovaId});
}
//Method 2 API with all the parameter to load the annotation
//Example with video: http://danielcebrian.com/annotations/demo.html?ovaContainer=vid1&ovaSrc=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.mp4&ovaStart=2&ovaEnd=10&ovaText=This%20is%20test&ovaUser=Test%20User
//Example with text: http://danielcebrian.com/annotations/demo.html?ovaStart=%2Fp%5B1%5D&ovaEnd=%2Fp%5B1%5D&ovastartOffset=542&ovaendOffset=572&ovaText=API
if(start!='' && end!='' && container!='' && src!=''){//video api
$.extend(API,{method:2,start:start,end:end,container:container,src:src,text:text,user:user});
}else if(start!='' && end!='' && startOffset!='' && endOffset!=''){//text api
$.extend(API,{method:2,start:start,end:end,startOffset:startOffset,endOffset:endOffset,text:text,user:user});
}
return API;
}
Share.prototype.runningAPI = function (annotations,API){
var wrapper = $('.annotator-wrapper').parent()[0],
mplayer,
osda,
self=this;
//Set Annotator in wrapper to fix quick DOM
$.data(wrapper, 'annotator', self.annotator);//Set the object in the span
annotator = window.annotator = $.data(wrapper, 'annotator');
mplayer = typeof annotator.mplayer!='undefined'?annotator.mplayer:[];
osda = typeof annotator.osda!='undefined'?annotator.osda:[];
//Detect if the URL has an API element
if (typeof API!='undefined' && typeof API.method!='undefined' && (API.method=='1'||API.method=='2')) {
if(API.method=='1'){
var allannotations = annotator.plugins['Store'].annotations,
ovaId = decodeURIComponent(API.ovaId);
for (var item in allannotations) {
var an = allannotations[item];
if (typeof an.id!='undefined' && an.id == ovaId){//this is the annotation
if(self._isVideo(an)){//It is a video
if (typeof mplayer[an.target.container]!='undefined'){
var player = mplayer[an.target.container];
if (player.id_ == an.target.container){
var anFound = an;
videojs(player.id_).ready(function(){
if (player.techName != 'Youtube'){
player.preload('auto');
}
player.autoPlayAPI = anFound;
player.play();
});
}
}
}else if(self._isImage(an)){//It is a OpenSeaDragon Annotation
var bounds = new OpenSeadragon.Rect(an.bounds.x, an.bounds.y, an.bounds.width, an.bounds.height);
setTimeout(function(){
osda.viewer.viewport.fitBounds(bounds, false);
$('html,body').animate({
scrollTop: $("#"+an.target.container).offset().top
},'slow');
},250);
}else{//It is a text
var hasRanges = typeof an.ranges!='undefined' && typeof an.ranges[0] !='undefined',
startOffset = hasRanges?an.ranges[0].startOffset:'',
endOffset = hasRanges?an.ranges[0].endOffset:'';
if(typeof startOffset!='undefined' && typeof endOffset!='undefined'){
//change the color
$(an.highlights).addClass('api');
//animate to the annotation
$('html,body').animate({
scrollTop: $(an.highlights[0]).offset().top},
'slow');
}
}
}
}
}else if (API.method=='2'){
if (typeof mplayer!='undefined'){
//variable for Video
var container = decodeURIComponent(API.container),
player = mplayer[container],
isVideo = (typeof player!='undefined' && container==player.id_),
isNumber = (!isNaN(parseFloat(API.start)) && isFinite(API.start) && !isNaN(parseFloat(API.end)) && isFinite(API.end)),
isSource = false;
if(isVideo){
//Compare without extension
var src = decodeURIComponent(API.src),
targetSrc = src.substring(0,src.lastIndexOf(".")),
playerSrc = player.tech.options_.source.src==''?player.tag.currentSrc:player.tech.options_.source.src;
playerSrc = playerSrc.substring(0,playerSrc.lastIndexOf("."))
isSource = (targetSrc == playerSrc);
}
//Open Video Annotation
if(isVideo && isNumber && isSource){
var annotation = {
rangeTime: {
start:API.start,
end:API.end
},
created: new Date().toISOString(),
updated: new Date().toISOString(),
target:{
container: container,
src: src
},
media: 'video',
text:decodeURIComponent(API.text),
user:decodeURIComponent(API.user)
};
videojs(player.id_).ready(function(){
if (player.techName != 'Youtube'){
player.preload('auto');
}
player.autoPlayAPI = annotation;
player.play();
});
}
}
//variable for text
var startOffset = API.startOffset,
endOffset = API.endOffset;
//Text Annotation
if(!isVideo && typeof startOffset!='undefined' && typeof endOffset!='undefined'){
var annotation = {
ranges: [{
start:decodeURIComponent(API.start),
end:decodeURIComponent(API.end),
startOffset:decodeURIComponent(API.startOffset),
endOffset:decodeURIComponent(API.endOffset),
}],
created: new Date().toISOString(),
updated: new Date().toISOString(),
media: 'text',
text:decodeURIComponent(API.text),
user:decodeURIComponent(API.user)
};
//show the annotation
annotator.setupAnnotation(annotation);
//to change the color
$(annotation.highlights).addClass('api');
//animate to the annotation
$('html,body').animate({
scrollTop: $(annotation.highlights[0]).offset().top},
'slow');
}
}
}
//Let know to others API that this plugin is loaded
annotator.isShareLoaded = true;
annotator.publish('shareloaded');
}
Share.prototype.runAPI = function(API) {
var self = this;
var func = function (annotations){
self.runningAPI(annotations,API);
self.annotator.unsubscribe("annotationsLoaded",func);
};
this.annotator
//-- Finished the Annotator DOM
.subscribe("annotationsLoaded",func);
}
Share.prototype._isVideo = function(an){
//Detect if the annotation is a Open Video Annotation
var an = an || {}
rt = an.rangeTime,
isVideo = (typeof an.media!='undefined' && an.media=='video'),
hasContainer = (typeof an.target!='undefined' && typeof an.target.container!='undefined' ),
isNumber = (typeof rt!='undefined' && !isNaN(parseFloat(rt.start)) && isFinite(rt.start) && !isNaN(parseFloat(rt.end)) && isFinite(rt.end));
return (isVideo && hasContainer && isNumber);
}
Share.prototype._isImage = function(annotation){
return annotation.media === 'image';
}
Share.prototype.getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
//results = regex.exec(location.search),
results = regex.exec('?'+window.location.href.split('?')[1]);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
};
Share.prototype.removeVariableFromURL = function(url_string, variable_name) {
var URL = String(url_string);
var regex = new RegExp( "\\?" + variable_name + "=[^&]*&?", "gi");
URL = URL.replace(regex,'?');
regex = new RegExp( "\\&" + variable_name + "=[^&]*&?", "gi");
URL = URL.replace(regex,'&');
URL = URL.replace(/(\?|&)$/,'');
regex = null;
return URL;
}
Share.prototype.getAnnotationFromId = function(ovaId){
var annotationList = this.annotator.plugins.Store.annotations;
return $.grep(annotationList, function(elementOfArray, indexInArray){
return parseInt(elementOfArray.id) === parseInt(ovaId.nodeValue);
})[0];
}
return this.input = $(this.field).find(':input');
};
// Share button HTML
Share.prototype.buildHTMLShareButton = function(title, id) {
var title = title || '';
var id = typeof id!='undefined'?'annotationId="' + id + '"':'';
var titleText = title!=''?'<div class="share-text-annotator">' + title + '</div>':'';
var shareButton = '<div class="share-button-annotator share-button" ' + id + '></div>';
var popup = '<div class="share-popup-overlay-bg" style="z-index:30000000000"><div class="share-popup"><div class="share-popup-items"></div><div class="close-btn">Close</div></div></div>';
// checks to make sure that no popup overlay already exists (though hidden) and creates a new one if it does not exist
if($('.share-popup-overlay-bg').length === 0)
$('.annotator-wrapper').append(popup);
return '<div class="share-container-annotator">' + titleText + shareButton + '</div>';
}
// template for the design of the Share Plugin
Share.prototype.buildHTMLPopup = function(title) {
var buttons = '';
if (typeof this.options.shareIn != 'undefined'){
this.options.shareIn.forEach(function(item) {
buttons += '<div class="share-' + item + '-annotator share-button">' + item.charAt(0).toUpperCase() + item.slice(1) + '</div>';
});
}
this.uri = (typeof this.uri != 'undefined') ? this.uri : '';
var title = '<div class="share-popup-title">' + title.replace(":", "") + '</div>';
var copy = '<div class="share-popup-copy">Copy and Share:</div>';
var uri = '<input type="text" class="share-popup-uri" onclick="javascript:this.select();" readonly="true" value="' + this.uri + '">';
var popup = title + buttons + copy + uri;
return popup;
}
// Create the actions for the buttons
Share.prototype.buttonsActions = function(field, method, url, annotation) {
var share = this;
// hide popup when user clicks on close button
$('.close-btn').click(function() {
$('.share-popup-overlay-bg').hide();
});
// hides the popup if user clicks anywhere outside the container
$('.share-popup-overlay-bg').click(function() {
$('.share-popup-overlay-bg').hide();
});
// prevents the overlay from closing if user clicks inside the popup overlay
$('.share-popup').click(function() {
return false;
});
// Share button
$(field).find('.share-button-annotator.share-button').click(function(event) {
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
annotation = share.getAnnotationFromId(event.currentTarget.attributes.annotationid);
var _field = this;
var ovaId = annotation.id,
var title;
if (method == 1) {
title = 'Share';
} else {
title = 'Share without saving';
}
// share.uri will be useful for buildHTMLPopup functions
share.uri = share.createAPIURL(method, ovaId, url, annotation);
// display your popup
$('.share-popup-overlay-bg').show();
// build buttons
$('.share-popup-items').html(share.buildHTMLPopup(title));
// buttons actions
if (typeof share.options.shareIn!='undefined'){
share.options.shareIn.forEach(function(item) {
$('.share-' + item + '-annotator.share-button').click(function() {
var url = share.createAPIURL(method, ovaId, url, annotation);
var title = "Sharing a annotation with Open Video Annotation";
var link = encodeURIComponent(url);
var noteText = share.getSource('ovaText');
var finalUrl = '';
if (method==1){
var viewer = share.annotator.viewer;
var textarea = $(viewer.element).find('div:first').html();
noteText = encodeURIComponent(textarea);
}
finalUrl = typeof share.options.getUrl[item]!='undefined'?share.options.getUrl[item](title, link, noteText):'';
if (typeof share.options.getUrl[item]!='undefined')
window.open(finalUrl);
});
});
}
});
};
Share.prototype.createAPIURL = function(method, ovaId, url, annotation) {
var annotator = this.annotator;
var editor = annotator.editor;
var method = method || 1;
var url = annotation.uri || window.location.href;
url += (url.indexOf('?') >= 0)? '&' : '?';
if (method === 1){
var ovaId = (typeof ovaId !='undefined') ? ovaId : '';
url += 'ovaId=' + ovaId;
} else if (method === 2){
var ovaStart = this.getSource('ovaStart');
var ovaEnd = this.getSource('ovaEnd');
var ovaText = this.getSource('ovaText');
Share.prototype.updateViewer = function(field, annotation) {
this.annotation = annotation;
var self = this,
field = $(field),
ret = field.addClass('share-viewer-annotator').html(function() {
var string;
return self.buildHTMLShareButton('Share:',self.getSource('ovaId'));
});
//Create the actions for the buttons
this.buttonsActions(field[0],1,this.options.baseUrl, annotation); //1 is the method of the API that will be for share some annotation in the database
return ret;
};
url += 'ovaStart=' + ovaStart
+ '&ovaEnd=' + ovaEnd
+ '&ovaText=' + ovaText;
if (typeof editor.VideoJS != 'undefined' && editor.VideoJS !== -1){// Video Annotation
var ovaContainer = this.getSource('ovaContainer');
var ovaSrc = this.getSource('ovaSrc');
url += '&ovaContainer=' + ovaContainer
+ '&ovaSrc=' + ovaSrc;
} else {// Text Annotation
var ovastartOffset = this.getSource('ovastartOffset');
var ovaendOffset = this.getSource('ovaendOffset');
url += '&ovastartOffset=' + ovastartOffset + '&ovaendOffset=' + ovaendOffset;
}
}
return url;
};
Share.prototype.getSource = function(source) {
var source = source || '';
if (source == 'ovaId') {// method 1
source=this.annotation.id;
} else {// method 2
var annotator = this.annotator;
var editor = annotator.editor,
var textarea = $(editor.element).find('textarea')[0];
return Share;
if (source == 'ovaText')
source = textarea.value;
if (typeof editor.VideoJS!='undefined' && editor.VideoJS !== -1){// Video Annotation
if (source == 'ovaContainer')
source = editor.VideoJS;
else if (source == 'ovaSrc')
source = annotator.mplayer[editor.VideoJS].tech.options_.source.src;
else if (source == 'ovaStart')
source = annotator.mplayer[editor.VideoJS].rangeslider.getValues().start;
else if (source == 'ovaEnd')
source = annotator.mplayer[editor.VideoJS].rangeslider.getValues().end;
} else {// Text Annotation
var annotation = editor.annotation;
if(source == 'ovastartOffset')
source = annotation.ranges[0].startOffset;
else if (source == 'ovaendOffset')
source = annotation.ranges[0].endOffset;
else if (source == 'ovaStart')
source = annotation.ranges[0].start;
else if (source == 'ovaEnd')
source = annotation.ranges[0].end;
}
}
return encodeURIComponent(source);
};
Share.prototype.initAPI = function() {
// -- Detect API in the URL -- //
/*
The first option is to give a known id of an annotation
Example http:// url.com/#id=rTcpOjIMT2aF1apDtboC-Q
*/
var API = {},
var ovaId = this.getParameterByName('ovaId'); // Method 1 (Obligatory)
var start = this.getParameterByName('ovaStart'); // Method 2 (Obligatory)
var end = this.getParameterByName('ovaEnd'); // Method 2 (Obligatory)
var container = this.getParameterByName('ovaContainer'); // Method 2 (Obligatory)
var src = this.getParameterByName('ovaSrc'); // Method 2 (Obligatory)
var text = this.getParameterByName('ovaText'); // Method 2
var user = this.getParameterByName('ovaUser'); // Method 2
var startOffset = this.getParameterByName('ovastartOffset'); // Method 2
var endOffset = this.getParameterByName('ovaendOffset');// Method 2
// remove the variables from the url browser
var stripped_url = top.location.href;
if (ovaId != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaId');
if (start != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaStart');
if (end != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaEnd');
if (container != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaContainer');
if (src != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaSrc');
if (text != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaText');
if (user != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaUser');
if (startOffset != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovastartOffset');
if (endOffset != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaendOffset');
window.history.pushState("object or string", "Title", stripped_url);
// Method 1 API with the Id of the annotation
// Example: http://danielcebrian.com/annotations/demo.html?&ovaId=wtva_SjnQb2HtqppDihKug
if (ovaId != '') {
$.extend(API, {method:1, ovaId:ovaId});
}
// Method 2 API with all the parameter to load the annotation
// Example with video: http://danielcebrian.com/annotations/demo.html?ovaContainer=vid1&ovaSrc=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.mp4&ovaStart=2&ovaEnd=10&ovaText=This%20is%20test&ovaUser=Test%20User
// Example with text: http://danielcebrian.com/annotations/demo.html?ovaStart=%2Fp%5B1%5D&ovaEnd=%2Fp%5B1%5D&ovastartOffset=542&ovaendOffset=572&ovaText=API
if (start!='' && end!='' && container!='' && src!='') {// video api
$.extend(API, {method:2, start:start, end:end, container:container, src:src, text:text, user:user});
} else if(start!='' && end!='' && startOffset!='' && endOffset!='') {// text api
$.extend(API, {method:2, start:start, end:end, startOffset:startOffset, endOffset:endOffset, text:text, user:user});
}
return API;
}
Share.prototype.runningAPI = function (annotations, API) {
var wrapper = $('.annotator-wrapper').parent()[0];
var mplayer;
var osda;
var self=this;
// Set Annotator in wrapper to fix quick DOM
$.data(wrapper, 'annotator', self.annotator);// Set the object in the span
annotator = window.annotator = $.data(wrapper, 'annotator');
mplayer = (typeof annotator.mplayer != 'undefined') ? annotator.mplayer : [];
osda = (typeof annotator.osda != 'undefined') ? annotator.osda : [];
// Detect if the URL has an API element
if (typeof API != 'undefined' && typeof API.method != 'undefined' && (API.method == '1' || API.method == '2')) {
if (API.method=='1'){
var allannotations = annotator.plugins['Store'].annotations;
var ovaId = decodeURIComponent(API.ovaId);
for (var item in allannotations) {
var an = allannotations[item];
if (typeof an.id!='undefined' && an.id == ovaId){// this is the annotation
if (self._isVideo(an)){// It is a video
if (typeof mplayer[an.target.container] != 'undefined'){
var player = mplayer[an.target.container];
if (player.id_ == an.target.container){
var anFound = an;
videojs(player.id_).ready(function(){
if (player.techName != 'Youtube'){
player.preload('auto');
}
player.autoPlayAPI = anFound;
player.play();
});
}
}
} else if (self._isImage(an)) {// It is a OpenSeaDragon Annotation
var bounds = new OpenSeadragon.Rect(an.bounds.x, an.bounds.y, an.bounds.width, an.bounds.height);
setTimeout(function() {
osda.viewer.viewport.fitBounds(bounds, false);
$('html, body').animate( {
scrollTop: $("#" + an.target.container).offset().top
}, 'slow');
}, 250);
} else {// It is a text
var hasRanges = typeof an.ranges != 'undefined' && typeof an.ranges[0] != 'undefined';
var startOffset = hasRanges?an.ranges[0].startOffset:'';
var endOffset = hasRanges?an.ranges[0].endOffset:'';
if (typeof startOffset != 'undefined' && typeof endOffset != 'undefined'){
// change the color
$(an.highlights).addClass('api');
// animate to the annotation
$('html, body').animate({
scrollTop: $(an.highlights[0]).offset().top}, 'slow');
}
}
}
}
} else if (API.method == '2'){
if (typeof mplayer != 'undefined'){
// variable for Video
var container = decodeURIComponent(API.container);
var player = mplayer[container];
var isVideo = (typeof player != 'undefined' && container == player.id_);
var isNumber = (!isNaN(parseFloat(API.start)) && isFinite(API.start) && !isNaN(parseFloat(API.end)) && isFinite(API.end));
var isSource = false;
if (isVideo){
// Compare without extension
var src = decodeURIComponent(API.src);
var targetSrc = src.substring(0, src.lastIndexOf("."));
var playerSrc = (player.tech.options_.source.src == '') ? player.tag.currentSrc : player.tech.options_.source.src;
playerSrc = playerSrc.substring(0, playerSrc.lastIndexOf("."))
isSource = (targetSrc == playerSrc);
}
// Open Video Annotation
if (isVideo && isNumber && isSource){
var annotation = {
rangeTime: {
start: API.start,
end: API.end
},
created: new Date().toISOString(),
updated: new Date().toISOString(),
target: {
container: container,
src: src
},
media: 'video',
text: decodeURIComponent(API.text),
user: decodeURIComponent(API.user)
};
videojs(player.id_).ready(function(){
if (player.techName != 'Youtube'){
player.preload('auto');
}
player.autoPlayAPI = annotation;
player.play();
});
}
}
// variable for text
var startOffset = API.startOffset;
var endOffset = API.endOffset;
// Text Annotation
if (!isVideo && typeof startOffset != 'undefined' && typeof endOffset != 'undefined'){
var annotation = {
ranges: [{
start: decodeURIComponent(API.start),
end: decodeURIComponent(API.end),
startOffset: decodeURIComponent(API.startOffset),
endOffset: decodeURIComponent(API.endOffset),
}],
created: new Date().toISOString(),
updated: new Date().toISOString(),
media: 'text',
text: decodeURIComponent(API.text),
user: decodeURIComponent(API.user)
};
// show the annotation
annotator.setupAnnotation(annotation);
// to change the color
$(annotation.highlights).addClass('api');
// animate to the annotation
$('html, body').animate({
scrollTop: $(annotation.highlights[0]).offset().top},
'slow');
}
}
}
// Let know to others API that this plugin is loaded
annotator.isShareLoaded = true;
annotator.publish('shareloaded');
}
Share.prototype.runAPI = function(API) {
var self = this;
var func = function(annotations) {
self.runningAPI(annotations, API);
self.annotator.unsubscribe("annotationsLoaded", func);
};
this.annotator
// -- Finished the Annotator DOM
.subscribe("annotationsLoaded", func);
}
Share.prototype._isVideo = function(an){
// Detect if the annotation is a Open Video Annotation
var an = an || {};
var rt = an.rangeTime;
var isVideo = (typeof an.media != 'undefined' && an.media == 'video');
var hasContainer = (typeof an.target != 'undefined' && typeof an.target.container != 'undefined' );
var isNumber = (typeof rt != 'undefined' && !isNaN(parseFloat(rt.start)) && isFinite(rt.start) && !isNaN(parseFloat(rt.end)) && isFinite(rt.end));
return (isVideo && hasContainer && isNumber);
}
Share.prototype._isImage = function(annotation) {
return annotation.media === 'image';
}
Share.prototype.getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
var results = regex.exec('?' + window.location.href.split('?')[1]);
return results == null ? "" : decodeURIComponent(results[1].replace(/\ + /g, " "));
};
Share.prototype.removeVariableFromURL = function(url_string, variable_name) {
var URL = String(url_string);
var regex = new RegExp( "\\?" + variable_name + "=[^&]*&?", "gi");
URL = URL.replace(regex,'?');
regex = new RegExp( "\\&" + variable_name + "=[^&]*&?", "gi");
URL = URL.replace(regex,'&');
URL = URL.replace(/(\?|&)$/,'');
regex = null;
return URL;
}
Share.prototype.getAnnotationFromId = function(ovaId) {
var annotationList = this.annotator.plugins.Store.annotations;
return $.grep(annotationList, function(elementOfArray, indexInArray){
return parseInt(elementOfArray.id, 10) === parseInt(ovaId.nodeValue, 10);
})[0];
}
Share.prototype.updateViewer = function(field, annotation) {
this.annotation = annotation;
var self = this;
var field = $(field);
var ret = field.addClass('share-viewer-annotator').html(function() {
return self.buildHTMLShareButton('Share:', self.getSource('ovaId'));
});
// Create the actions for the buttons
this.buttonsActions(field[0], 1, this.options.baseUrl, annotation); // 1 is the method of the API that will be for share some annotation in the database
return ret;
};
return Share;
})(Annotator.Plugin);
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