jQuery UI Progress Indicator

Widget Factory Example

by Shaun Ellis

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<div id="notice" class="alert-info"></div>
    <h3 id="title"></h3>
</body>

CSS

.alert-info {
  display: block;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

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) {
            _this.jsonLd = jsonLd;
            $( "#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 );
    },
    refresh: function() {
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
            this.reset();
        }
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

// draw plugin to dom >>>
var bar = $( "<div></div>" )
    .appendTo( "body" )
    .prospero({
        manifestUrl: "http://localhost:3000/collections/manifests/sde:sortable",
        complete: function( event, data ) {
            $( "#notice" ).text( "Complete!" );
            $( "#notice" ).show().fadeOut( 2600, "swing" ); 
        }
   ...