Skip to content

Instantly share code, notes, and snippets.

@sdellis

sdellis/index.html

Created April 7, 2015 15:10
Show Gist options
  • Save sdellis/ddd21b7afacb43937d3c to your computer and use it in GitHub Desktop.
Save sdellis/ddd21b7afacb43937d3c to your computer and use it in GitHub Desktop.
Download ZIP
Prospero Lite IIIF Manifest Editory- jQuery UI Widget // source http://jsbin.com/sokaju
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.thumbnail {
display: inline-block;
max-width:200px;
margin: 10px;
}
</style>
</head>
<body class="container">
<div id="notice" class="alert-info"></div>
<h3 id="title"></h3>
<div class="row">
<div id="sortable">
</div>
</div>
<script id="jsbin-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() {
// if we "stringify" it we get a "MongoError: The dotted field is not valid for storage" error.
// if we don't stringify, the resources area is collapsed and no longer valid IIIF
payload = JSON.stringify( this.options.jsonLd );
console.log( payload );
$.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)
{
console.log("Error Updating!");
}
});
},
refresh: function() {
// this.options.jsonLd = $( "body" ).data( "pul-prospero-jsonLd");
// this._create();
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
// draw plugin to dom >>>
var book = $( "<div></div>" )
.appendTo( "body" )
.prospero({
endpoint: "http://localhost:3000/collections/manifests/",
manifestUri: "sde:mod",
complete: function( event, data ) {
$( "#notice" ).text( "Complete!" );
$( "#notice" ).show().fadeOut( 2600, "swing" );
}
})
.data( "pul-prospero" );
$( "#sortable" ).sortable({
update: function(event, ui) {
var jsonLd = $( "body" ).data( "pul-prospero-jsonLd");
var new_canvasArr = [];
var sortedIDs = $( "#sortable" ).sortable( "toArray" );
var arrayLength = sortedIDs.length;
for (var i = 0; i < arrayLength; i++) {
new_canvasArr[i] = jsonLd.sequences[0].canvases[sortedIDs[i]];
}
jsonLd.sequences[0].canvases = new_canvasArr;
book.option( "jsonLd", jsonLd);
//update the book with the new sort order
book.save();
$( "body" ).data( "pul-prospero-jsonLd", jsonLd);
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body class="container">
<div id="notice" class="alert-info"></div>
<h3 id="title"></h3>
<div class="row">
<div id="sortable">
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.thumbnail {
display: inline-block;
max-width:200px;
margin: 10px;
}
</script>
<script id="jsbin-source-javascript" type="text/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() {
// if we "stringify" it we get a "MongoError: The dotted field is not valid for storage" error.
// if we don't stringify, the resources area is collapsed and no longer valid IIIF
payload = JSON.stringify( this.options.jsonLd );
console.log( payload );
$.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)
{
console.log("Error Updating!");
}
});
},
refresh: function() {
// this.options.jsonLd = $( "body" ).data( "pul-prospero-jsonLd");
// this._create();
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
// draw plugin to dom >>>
var book = $( "<div></div>" )
.appendTo( "body" )
.prospero({
endpoint: "http://localhost:3000/collections/manifests/",
manifestUri: "sde:mod",
complete: function( event, data ) {
$( "#notice" ).text( "Complete!" );
$( "#notice" ).show().fadeOut( 2600, "swing" );
}
})
.data( "pul-prospero" );
$( "#sortable" ).sortable({
update: function(event, ui) {
var jsonLd = $( "body" ).data( "pul-prospero-jsonLd");
var new_canvasArr = [];
var sortedIDs = $( "#sortable" ).sortable( "toArray" );
var arrayLength = sortedIDs.length;
for (var i = 0; i < arrayLength; i++) {
new_canvasArr[i] = jsonLd.sequences[0].canvases[sortedIDs[i]];
}
jsonLd.sequences[0].canvases = new_canvasArr;
book.option( "jsonLd", jsonLd);
//update the book with the new sort order
book.save();
$( "body" ).data( "pul-prospero-jsonLd", jsonLd);
}
});
</script></body>
</html>
Raw
jsbin.sokaju.css
.thumbnail {
display: inline-block;
max-width:200px;
margin: 10px;
}
Raw
jsbin.sokaju.js
$.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() {
// if we "stringify" it we get a "MongoError: The dotted field is not valid for storage" error.
// if we don't stringify, the resources area is collapsed and no longer valid IIIF
payload = JSON.stringify( this.options.jsonLd );
console.log( payload );
$.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)
{
console.log("Error Updating!");
}
});
},
refresh: function() {
// this.options.jsonLd = $( "body" ).data( "pul-prospero-jsonLd");
// this._create();
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
// draw plugin to dom >>>
var book = $( "<div></div>" )
.appendTo( "body" )
.prospero({
endpoint: "http://localhost:3000/collections/manifests/",
manifestUri: "sde:mod",
complete: function( event, data ) {
$( "#notice" ).text( "Complete!" );
$( "#notice" ).show().fadeOut( 2600, "swing" );
}
})
.data( "pul-prospero" );
$( "#sortable" ).sortable({
update: function(event, ui) {
var jsonLd = $( "body" ).data( "pul-prospero-jsonLd");
var new_canvasArr = [];
var sortedIDs = $( "#sortable" ).sortable( "toArray" );
var arrayLength = sortedIDs.length;
for (var i = 0; i < arrayLength; i++) {
new_canvasArr[i] = jsonLd.sequences[0].canvases[sortedIDs[i]];
}
jsonLd.sequences[0].canvases = new_canvasArr;
book.option( "jsonLd", jsonLd);
//update the book with the new sort order
book.save();
$( "body" ).data( "pul-prospero-jsonLd", jsonLd);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment