ProsperoLite

jQuery Plugin version of Prospero for reading IIIF Manifests

by Shaun Ellis

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
  <a href="http://sdellis.com" id="title">My Manifest</a>
    

<div class="row">
  <div id="sortable" class="col-sm-6 col-md-4">
          
      </div>
    </div>
</body>

CSS

.thumbnail {
    display: inline-block;
    max-width:200px;
    margin: 10px;
}

JavaScript

$( "a" ).css( "color", "red" );

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify();

;(function( $, window, document, undefined ){
 // $.fn.manifestView = function(){
    
    var pluginName = "Prospero",
        defaults = {
          jsonLd : null,
          request : null,
          manifestUri : "http://lae.princeton.edu/catalog/077ws.jsonld"
        };
    
    function Plugin( element, options ){
      this.element = element;
      this.options = $.extend( {}, defaults, options);
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
    }
    
    
    Plugin.prototype.init = function () {
      
      $( this.element ).css( "color", "orange" );  
      
      var _this = this;
      this.request = jQuery.ajax({
        url: this.options.manifestUri,
        dataType: 'json',
        async: true
      });

      this.request.done(function(jsonLd) {
        _this.jsonLd = jsonLd;
        $( "#title" ).text( _this.jsonLd.label );
        //$( "#sortable" ).text( _this.jsonLd.label );
        _this.jsonLd.sequences[0].canvases.forEach(paintPages);
      }); 
      
      $( this.element ).attr( "href", this.options.manifestUri );
      
      
    };
    
    Plugin.prototype.save = function () {
        
    };
    
    function paintPages(element, index, array){
        $( "<div class='thumbnail'></div>" ).appendTo( "#sortable" ).html( "<img src='" + element.images[0].resource["@id"] + "'><div class='caption'>" + element.label + "</div>" );
    }
  
    $.fn[pluginName] = function (options) {
      return this.each(function (){
        if( !$.data(this, "plugin_" + pluginName )) {
          $.data( this, "plugin_" + pluginName, new Plugin( this, options ));
        }
      });
    };
    
 // };
})(jQuery, window, document);

$( "#sortable" ).sortable();

$( "a" ).Prospero({
    manifestUri: "http://localhost:3000/collections/manifests/sde:sortable"
});