glittergallery/GlitterGallery

View on GitHub
app/assets/javascripts/annotation.js

Summary

Maintainability
A
0 mins
Test Coverage
//See: https://github.com/annotorious/annotorious/wiki/JavaScript-API

// Function which first finds all the annotations associated with given
// blob and draws them using addAnnotation Handler
/* globals anno, annotorious, confirm*/
function loadAnnotations() {
  jQuery.getJSON("/annotations/for_blob/"+blob_id()+ ".json",function(data) {
    for (var i = 0; i < data.length; i++) {
        var annotation = JSON.parse(data[i].json);
        anno.addAnnotation(annotation);
      }
  });
}

// Returns the blob_id of a given blob
function blob_id() {
  return $('.annotatable').data('id');
}

function showFlashMessage(error){
  $('.message').remove();
  $('.action').after('<section class="message"><div class="alert">'+ error+'</div></section>');
}

// Handler used for creation of annotation
// On success it sets the username and time
anno.addHandler('onAnnotationCreated', function(annotation) {
  jQuery.ajax({
    type: "POST",
    url: "/annotations",
    dataType: "JSON",
    data: "annotation="+encodeURIComponent(JSON.stringify(annotation))+"&blob_id=" + blob_id()+"&url="+window.location.pathname,
    success: function(data) {
      annotation.id=data.id; // the annotation ID should match the database row ID so we can delete it if needed
      var json_data = JSON.parse(data.json);
      annotation.username = json_data.username;
      annotation.updated_at = json_data.updated_at;
    },
    error: function(data){
      anno.removeAnnotation(annotation);
      showFlashMessage(JSON.parse(data.responseText).error);
    }
    });
});

// Handler used for update of annotation
// On success, redraw all the annotations
anno.addHandler('onAnnotationUpdated', function(annotation) {
  jQuery.ajax({
    type: "PUT",
    dataType: "JSON",
    url: "/annotations/" + annotation.id,
    data: "annotation="+encodeURIComponent(JSON.stringify(annotation)),
    success: function() {
      loadAnnotations();
    },
    error: function(data){
      anno.removeAnnotation(annotation);
      loadAnnotations();
      showFlashMessage(JSON.parse(data.responseText).error);
    }
  });
});

// this gets called when the user clicks the delete icon
anno.addHandler('beforeAnnotationRemoved', function() {
  var r=confirm("Delete annotation?");
  if (r===false){ return false; }
  else { return true; }
});

// this is what gets called when the annotation is actually deleted
// (assuming the user clicks OK to the confirmation dialog)
anno.addHandler('onAnnotationRemoved', function(annotation) {
  jQuery.ajax({
    type: "DELETE",
    dataType: "JSON",
    url: "/annotations/" + annotation.id,
    error: function(data){
      showFlashMessage(JSON.parse(data.responseText).error);
    }
  });
});

// this plugin allows us to add the username and date to each annotation and display it
annotorious.plugin.addUsernamePlugin = function() { };
annotorious.plugin.addUsernamePlugin.prototype.onInitAnnotator = function(annotator) {
  // A Field can be an HTML string or a function(annotation) that returns a string
  annotator.popup.addField(function(annotation) {
    if (annotation.username !== '') {
      return '<em>' + annotation.username + ' - '+ annotation.updated_at +'</em>';
    }
    else
    {
     return '';
    }
  });
};

anno.addPlugin('addUsernamePlugin', {});

// wait until all the assets and images are loaded before drawing annotations
$(window).load(function() {
  if($('.annotatable').length > 0){
    loadAnnotations();
    $('.annotorious-item, .annotorious-hint').addClass('hidden');
  }
});

$(document).ready(function() {
  $('#toggle-annotation').click( function(){
    $('.annotorious-item, .annotorious-hint').toggleClass('hidden');
  });
});