diff --git a/common/static/js/vendor/ova/share-annotator.js b/common/static/js/vendor/ova/share-annotator.js index 16d4a5a829..aaa40e7341 100644 --- a/common/static/js/vendor/ova/share-annotator.js +++ b/common/static/js/vendor/ova/share-annotator.js @@ -1,5 +1,5 @@ /* -Share Annotation Plugin v1.0 (https://github.com/danielcebrian/share-annotator) +Share Annotation Plugin v1.1 (https://github.com/danielcebrian/share-annotator) Copyright (C) 2014 Daniel Cebrian Robles License: https://github.com/danielcebrian/share-annotator/blob/master/License.rst @@ -121,7 +121,7 @@ Annotator.Plugin.Share = (function(_super) { } // Create the actions for the buttons - Share.prototype.buttonsActions = function(field, method, url, annotation) { + Share.prototype.buttonsActions = function(field, method, url) { var share = this; // hide popup when user clicks on close button @@ -139,18 +139,12 @@ Annotator.Plugin.Share = (function(_super) { // 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'; - } + var _field = this, + ovaId = $(this).attr('annotationId'), + title = method == 1 ? 'Share' : 'Share without saving'; // share.uri will be useful for buildHTMLPopup functions - share.uri = share.createAPIURL(method, ovaId, url, annotation); + share.uri = share.createAPIURL(method, ovaId, url); // display your popup $('.share-popup-overlay-bg').show(); @@ -162,7 +156,7 @@ Annotator.Plugin.Share = (function(_super) { 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 url = share.createAPIURL(method, ovaId, url); var title = "Sharing a annotation with Open Video Annotation"; var link = encodeURIComponent(url); var noteText = share.getSource('ovaText'); @@ -182,34 +176,59 @@ Annotator.Plugin.Share = (function(_super) { }; - Share.prototype.createAPIURL = function(method, ovaId, url, annotation) { + Share.prototype.createAPIURL = function(method, ovaId, url) { var annotator = this.annotator; var editor = annotator.editor; var method = method || 1; - var url = annotation.uri || window.location.href; + var url = url || window.location.href; url += (url.indexOf('?') >= 0)? '&' : '?'; - if (method === 1){ + 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'); - - 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; + } else if (method === 2) { + var ovaText = this.getSource('ovaText') || " "; + url += 'ovaText=' + ovaText; + if (typeof editor.VideoJS !== 'undefined' && editor.VideoJS !== -1) { // Video Annotation + var ovaStart = this.getSource('ovaStart') || " "; + var ovaEnd = this.getSource('ovaEnd') || " "; + var ovaContainer = this.getSource('ovaContainer') || " "; + var ovaSrc = this.getSource('ovaSrc') || " "; + url += '&ovaStart=' + ovaStart + +'&ovaEnd=' + ovaEnd + +'&ovaContainer=' + ovaContainer + +'&ovaSrc=' + ovaSrc; + } else if (typeof editor.OpenSeaDragon !== 'undefined' && editor.OpenSeaDragon !== -1) { // Image Annotation + var ovaLeft = this.getSource('ovaLeft') || " "; + var ovaTop = this.getSource('ovaTop') || " "; + var ovaWidth = this.getSource('ovaWidth') || " "; + var ovaHeight = this.getSource('ovaHeight') || " "; + var ovaLeftZoom = this.getSource('ovaLeftZoom') || " "; + var ovaTopZoom = this.getSource('ovaTopZoom') || " "; + var ovaWidthZoom = this.getSource('ovaWidthZoom') || " "; + var ovaHeightZoom = this.getSource('ovaHeightZoom') || " "; + var ovaContainer = this.getSource('ovaContainer') || " "; + var ovaSrc = this.getSource('ovaSrc') || " "; + url += '&ovaLeft='+ ovaLeft + +'&ovaTop='+ ovaTop + +'&ovaWidth='+ ovaWidth + +'&ovaHeight='+ ovaHeight + +'&ovaLeftZoom='+ ovaLeftZoom + +'&ovaTopZoom='+ ovaTopZoom + +'&ovaWidthZoom='+ ovaWidthZoom + +'&ovaHeightZoom='+ ovaHeightZoom + +'&ovaContainer='+ovaContainer + +'&ovaSrc='+ ovaSrc; + } else { // Text Annotation + var ovaStart = this.getSource('ovaStart') || " "; + var ovaEnd = this.getSource('ovaEnd') || " "; + var ovastartOffset = this.getSource('ovastartOffset') || " "; + var ovaendOffset = this.getSource('ovaendOffset') || " "; + url += '&ovaStart='+ ovaStart + +'&ovaEnd='+ ovaEnd + +'&ovastartOffset='+ovastartOffset + +'&ovaendOffset='+ ovaendOffset; } } return url; @@ -227,7 +246,7 @@ Annotator.Plugin.Share = (function(_super) { if (source == 'ovaText') source = textarea.value; - if (typeof editor.VideoJS!='undefined' && editor.VideoJS !== -1){// Video Annotation + if (typeof editor.VideoJS !== 'undefined' && editor.VideoJS !== -1){ // Video Annotation if (source == 'ovaContainer') source = editor.VideoJS; else if (source == 'ovaSrc') @@ -236,17 +255,45 @@ Annotator.Plugin.Share = (function(_super) { source = annotator.mplayer[editor.VideoJS].rangeslider.getValues().start; else if (source == 'ovaEnd') source = annotator.mplayer[editor.VideoJS].rangeslider.getValues().end; - - } else {// Text Annotation + } else if (typeof editor.OpenSeaDragon !== 'undefined' && editor.OpenSeaDragon !== -1){ // Image 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; + if (source == 'ovaLeft') + source = annotator.osda.rectPosition ? annotator.osda.rectPosition.left : annotation.rangePosition.left; + else if (source == 'ovaTop') + source = annotator.osda.rectPosition ? annotator.osda.rectPosition.top : annotation.rangePosition.top; + else if (source == 'ovaWidth') + source = annotator.osda.rectPosition ? annotator.osda.rectPosition.width : annotation.rangePosition.width; + else if (source == 'ovaHeight') + source = annotator.osda.rectPosition ? annotator.osda.rectPosition.height : annotation.rangePosition.height; + else if (source == 'ovaLeftZoom') + source = annotator.osda.viewer.drawer.viewport.getBounds().x; + else if (source == 'ovaTopZoom') + source = annotator.osda.viewer.drawer.viewport.getBounds().y; + else if (source == 'ovaWidthZoom') + source = annotator.osda.viewer.drawer.viewport.getBounds().width; + else if (source == 'ovaHeightZoom') + source = annotator.osda.viewer.drawer.viewport.getBounds().height; + else if (source == 'ovaContainer') + source = annotator.osda.viewer.id; + else if (source == 'ovaSrc'){ + var source = annotator.osda.viewer.source; + var tilesUrl = typeof source.tilesUrl !== 'undefined' ? source.tilesUrl : ''; + var functionUrl = typeof source.getTileUrl !== 'undefined' ? source.getTileUrl : ''; + source = tilesUrl !== '' ? tilesUrl : ('' + functionUrl).replace(/\s+/g, ' '); // - target.src (media source) + } + } else { // Text Annotation + var annotation = editor.annotation; + // if ranges is 0 then it is a comment + if (annotation.ranges.length > 0) { + 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); @@ -266,6 +313,14 @@ Annotator.Plugin.Share = (function(_super) { var src = this.getParameterByName('ovaSrc'); // Method 2 (Obligatory) var text = this.getParameterByName('ovaText'); // Method 2 var user = this.getParameterByName('ovaUser'); // Method 2 + var Left = this.getParameterByName('ovaLeft'); // Method 2 + var Top = this.getParameterByName('ovaTop'); // Method 2 + var Width = this.getParameterByName('ovaWidth'); // Method 2 + var Height = this.getParameterByName('ovaHeight'); // Method 2 + var leftZoom = this.getParameterByName('ovaLeftZoom'); // Method 2 + var topZoom = this.getParameterByName('ovaTopZoom'); // Method 2 + var widthZoom = this.getParameterByName('ovaWidthZoom'); // Method 2 + var heightZoom = this.getParameterByName('ovaHeightZoom'); // Method 2 var startOffset = this.getParameterByName('ovastartOffset'); // Method 2 var endOffset = this.getParameterByName('ovaendOffset');// Method 2 @@ -278,6 +333,14 @@ Annotator.Plugin.Share = (function(_super) { 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 (Left != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaLeft'); + if (Top != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaTop'); + if (Width != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaWidth'); + if (Height != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaHeight'); + if (leftZoom != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaLeftZoom'); + if (topZoom != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaTopZoom'); + if (widthZoom != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaWidthZoom'); + if (heightZoom != '') stripped_url = this.removeVariableFromURL(stripped_url, 'ovaHeightZoom'); 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); @@ -292,9 +355,11 @@ Annotator.Plugin.Share = (function(_super) { // 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 + 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 + } else if (Left !== '' && Top !== '' && Width !== '' && Height !== '' && leftZoom !== '' && topZoom !== '' && widthZoom !== '' && heightZoom !== '') { // image api + $.extend(API, {method:2, Left:Left, Top:Top, Width:Width, Height:Height, leftZoom:leftZoom, topZoom:topZoom, widthZoom:widthZoom, heightZoom:heightZoom, 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; @@ -319,6 +384,7 @@ Annotator.Plugin.Share = (function(_super) { for (var item in allannotations) { var an = allannotations[item]; + var olditem; 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'){ @@ -334,49 +400,75 @@ Annotator.Plugin.Share = (function(_super) { }); } } - } 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:''; + }else if(an.media=="image"){// It is a OpenSeaDragon Annotation + if ( $("div#" + an.target.container).length) { + var isOpenViewer = typeof annotator.osda !== "undefined" && typeof annotator.osda.viewer !== "undefined"; + function waitingOsda(){ + isOpenViewer = typeof annotator.osda !== "undefined" && typeof annotator.osda.viewer !== "undefined"; + if (typeof olditem == "undefined") { + olditem = item; + } + if (!isOpenViewer) { + setTimeout(waitingOsda,200); + } else { + an = allannotations[olditem]; + $(an.highlights).parent().find('.annotator-hl').removeClass('api'); + // change the color + $(an.highlights).addClass('api'); + // change zoom + if (typeof annotator !== 'undefined' && typeof annotator.osda !== 'undefined') { + var currentBounds = annotator.osda.viewer.drawer.viewport.getBounds(); + var bounds = typeof an.bounds !== 'undefined' ? an.bounds : {}; + 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; + annotator.osda.viewer.drawer.viewport.fitBounds(currentBounds); + } + // animate to the annotation + $('html,body').animate({ + scrollTop: $(annotator.osda.viewer.element).offset().top + }, 'slow'); + } + } + waitingOsda(); + } + } 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'){ + 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'); + $('html,body').animate({ + scrollTop: $(an.highlights[0]).offset().top + }, 'slow'); } } } } - } else if (API.method == '2'){ - if (typeof mplayer != 'undefined'){ + } else if (API.method === '2') { + if (typeof mplayer !== 'undefined') { // variable for Video - var container = decodeURIComponent(API.container); + var container = decodeURIComponent(API.container); var player = mplayer[container]; - var isVideo = (typeof player != 'undefined' && container == player.id_); + 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){ + 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(".")) + playerSrc = playerSrc.substring(0, playerSrc.lastIndexOf(".")); isSource = (targetSrc == playerSrc); } // Open Video Annotation - if (isVideo && isNumber && isSource){ + if (isVideo && isNumber && isSource) { var annotation = { rangeTime: { start: API.start, @@ -429,6 +521,69 @@ Annotator.Plugin.Share = (function(_super) { scrollTop: $(annotation.highlights[0]).offset().top}, 'slow'); } + // variables for images + var Left = API.Left; + var Top = API.Top; + var Width = API.Width; + var Height = API.Height; + var leftZoom = API.leftZoom; + var topZoom = API.topZoom; + var widthZoom = API.widthZoom; + var heightZoom = API.heightZoom; + + // Image Annotation + if (!isVideo && typeof Left !== 'undefined' && typeof Top !== 'undefined' && typeof Width !== 'undefined' && typeof Height !== 'undefined' && typeof leftZoom !== 'undefined' && typeof topZoom !== 'undefined' && typeof widthZoom !== 'undefined' && typeof heightZoom !== 'undefined') { + var an = { + rangePosition: { + width: parseFloat(decodeURIComponent(API.Width)), + top: parseFloat(decodeURIComponent(API.Top)), + left: parseFloat(decodeURIComponent(API.Left)), + height: parseFloat(decodeURIComponent(API.Height)), + }, + bounds: { + width: parseFloat(decodeURIComponent(API.widthZoom)), + x: parseFloat(decodeURIComponent(API.leftZoom)), + y: parseFloat(decodeURIComponent(API.topZoom)), + height: parseFloat(decodeURIComponent(API.heightZoom)), + }, + target:{ + container: API.container, + src: API.src + }, + created: new Date().toISOString(), + updated: new Date().toISOString(), + media: 'image', + text: decodeURIComponent(API.text), + user: decodeURIComponent(API.user) + }; + + var isOpenViewer = typeof annotator.osda !== "undefined" && typeof annotator.osda.viewer !== "undefined"; + function waitingOsda() { + isOpenViewer = typeof annotator.osda !== "undefined" && typeof annotator.osda.viewer !== "undefined"; + if (!isOpenViewer) { + setTimeout(waitingOsda, 200); + } else { + // show the annotation + annotator.plugins['Store'].annotations.push(an); + annotator.osda.viewer.annotationInstance.drawRect(an); + // change the color + $(an.highlights).addClass('api'); + // change zoom + var currentBounds = annotator.osda.viewer.drawer.viewport.getBounds(); + var bounds = typeof an.bounds !== 'undefined' ? an.bounds : {}; + 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; + annotator.osda.viewer.drawer.viewport.fitBounds(currentBounds); + // animate to the annotation + $('html,body').animate({ + scrollTop: $(annotator.osda.viewer.element).offset().top + }, 'slow'); + } + } + waitingOsda(); + } } } @@ -457,15 +612,22 @@ Annotator.Plugin.Share = (function(_super) { return (isVideo && hasContainer && isNumber); } - Share.prototype._isImage = function(annotation) { - return annotation.media === 'image'; + Share.prototype._isImage = function(annotation){ + var wrapper = $('.annotator-wrapper').parent()[0]; + var annotator = window.annotator = $.data(wrapper, 'annotator'); + var rp = an.rangePosition; + var isOpenSeaDragon = (typeof annotator.osda !== 'undefined'); + var isContainer = (typeof an.target !== 'undefined' && typeof an.target.container !== 'undefined'); + var isImage = (typeof an.media !== 'undefined' && an.media === 'image'); + var isRP = (typeof rp !== 'undefined'); + return (isOpenSeaDragon && isContainer && isImage && isRP); } - + 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, " ")); + return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); }; Share.prototype.removeVariableFromURL = function(url_string, variable_name) { @@ -478,13 +640,6 @@ Annotator.Plugin.Share = (function(_super) { 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; @@ -492,15 +647,16 @@ Annotator.Plugin.Share = (function(_super) { var self = this; var field = $(field); var 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 + this.buttonsActions(field[0], 1, this.options.baseUrl); // 1 is the method of the API that will be for share some annotation in the database return ret; }; return Share; })(Annotator.Plugin); -