Prospero Lite - jQuery UI Widget

Simple editor for IIIF Manifests

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>
</body>

CSS

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

JavaScript

$.widget("pul.prospero", {
    options: {
        endpoint: "",
        manifestUri: "",
        jsonLD: null,
        value: 0
    },
    _create: function () {

        this.element.addClass("prospero");

        var _this = this;

        this.request = jQuery.ajax({
            url: this.options.endpoint + this.options.manifestUri,
            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);
            $("#title").text(this.jsonLd.label);
            this.jsonLd.sequences[0].canvases.forEach(paintPages);
        });

        this.refresh();
    },
    _setOption: function (key, value) {
        this._super(key, value);
    },
    _setOptions: function (options) {
        this._super(options);
        this.refresh();
    },
    reset: function () {
        // this._setOption( "value", 0 );
        this._create();
    },
    save: function () {
        payload = JSON.stringify(this.options.jsonLd);
        $.ajax({
            url: this.options.endpoint + this.options.manifestUri,
            contentType: "application/json",
            method: "PUT",
            data: payload,
            success: function (data, textStatus, jqXHR) {
                console.log("success!");
                $("#notice").text("Updated!");
                $("#notice").show().fadeOut(2600, "swing");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#notice").text("Update Error!");
                $("#notice").show().fadeOut(2600, "swing");
               ...