jQuery UI Prospero Lite Widget

Widget Factory Example

by Shaun Ellis

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body class="container">
<div id="notice" class="alert-info"></div>
    <h3 id="title"></h3>
    <div class="row">
      <div id="sortable" class="col-sm-6 col-md-4">
          
      </div>
    </div>
    <form id="formEditManifest" name="formEditManifest" action="http://localhost:3000/collections/manifests/"><button id="btnSubmit" type="submit" class="btn">Update Manifest</button></form>
</body>

CSS

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

JavaScript

$.widget( "pul.prospero", {
    options: {
        manifestUrl: "",
        jsonLD: null,
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "prospero" );
        
        var _this = this;
        
          this.request = jQuery.ajax({
            url: this.options.manifestUrl,
            dataType: 'json',
            async: true
          });

          this.request.done(function(jsonLd) {
              
             function paintPages(element, index, array){
                $( "<div id='" + index + "' class='thumbnail'></div>" )
                .appendTo( "#sortable" )
                .html( "<img src='" + 
                      element.images[0].resource["@id"] + 
                      "'><div class='caption'>" + element.label + "</div>" );
                }
              
            this.jsonLd = jsonLd;
            $( "body" ).data( "pul-prospero-jsonLd", jsonLd.sequences[0].canvases );
            $( "#title" ).text( this.jsonLd.label );
            this.jsonLd.sequences[0].canvases.forEach(paintPages);
          }); 
        
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    reset: function() {
      console.log("foo");
      this._setOption( "value", 0 );
    },
    save: function(formUrl) {
        this.options.jsonLd.sequences[0].canvases = $( "body" ).data( "pul-prospero-jsonLd");
        
        $.ajax(
            {
                url : formUrl,
                method: "PUT",
                data : this,
                success:function(data, textStatus, jqXHR)
                {
                   console.log("success!");     
                },
                error: function(jqXHR, textStatus,...