FrontPage

Sample API file

Paste the code below into a text only document with the suffix .html, open it in your browser, and you are on your way!

This example uses the excellent JQuery javascript library.  In essence, the $.getJSON function pulls back information from the database, in the form of a JSON structure. The first parameter of each $.getJSON call is the URL for the database call (e.g. http://textualcommunities.usask.ca/api/communities/ to bring back a list of communities). The structure returned by this call is then placed in  the parameter for the function given as the second parameter for the $.getJSON call.  

Thus, the $.getJSON call '$.getJSON("http://textualcommunities.usask.ca/api/communities/", function (data) {alert(data)})':

  • Calls the URL http://textualcommunities.usask.ca/api/communities/, returning a list of the communities at this site formatted as a JSON structure
  • Puts this structure into the parameter 'data' for the function called following successful return of the data, in the 'function' statement given as the second parameter of the $.getJSON call
  • In this function, the alert function prints out the content of the 'data' JSON structure.

This sample uses the file http://www.textualcommunities.usask.ca/interface/map.js.  This file configures Google Maps so that we can use it to view manuscripts.

You can also get this file at http://www.sd-editions.com/TC/StarterAPI.html. This shows a single community.  You can also get a file which gives access to all the communities at http://sd-editions.com/FromThePage/SimpleAllAPIorig.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Textual Communities API example</title>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCOf5NdCQ0GxTBjCX1kVtavpMo-G9u_2BU&sensor=false">
  </script>
  <script type="text/javascript" src="http://www.textualcommunities.usask.ca/interface/map.js">
  </script>
  <style>
  lb {display:block; }
  #navigate {text-align: center;}
  #showtext {margin-left: 20px;}
  note {display: block; float:right; width: 50%; font-style: italic};
  </style>
  <script type="text/javascript">
  var community="ZMD";
  var url = "http://textualcommunities.usask.ca/api/"; 
  
 function selectDocuments(mycommunity) {
 		$.getJSON(url+'communities/?page_size=0&format=json',  function (data) { 
			var options="";
			var found=0;
			$.each(data, function(h, thiscommunity){ 
				if (thiscommunity.abbr==mycommunity) {
					found=1;
					$.getJSON(url+'communities/'+thiscommunity.id+'/docs/?page_size=0&format=json', function (docdata) {
						var doccount=0;
						$.each(docdata, function(i, thisdoc) {
							doccount+=1;
							if (i==0) options+='<option selected="selected" value="'+thisdoc.id+'">'+thisdoc.name+'</option>\r';
							else options+='<option value="'+thisdoc.id+'">'+thisdoc.name+'</option>\r';
							if (doccount==docdata.length) {
								$('#docselect').html(options);
								selectPages($("#docselect").val());
								selectEntities($("#docselect").val());
							}
						});
					});
				};
			});
			if (found==0) alert("Community "+community+" not found.  Check the abbreviation for your community!");
		});
 }
var imageMap=null;
  function selectPages (docid) {
	$.getJSON(url+'docs/'+docid+'/has_parts/?page_size=0&format=json', function (pages) {
		var pagecount=0;
		var options="";
		$.each(pages, function(i, thispage) {
			pagecount+=1;
			if (i==0) options+='<option selected="selected" value="'+thispage.id+'">'+thispage.name+'</option>\r';
			else options+='<option value="'+thispage.id+'">'+thispage.name+'</option>\r';
			if (pagecount==pages.length) {
				$('#pageselect').html(options);
				showPage($("#pageselect").val());
			}
		});
	});
}
	
function selectEntities(docid) {
	var options='<option value="0" selected="selected">Entities</option>';
	$.getJSON(url+'docs/'+docid+'/has_entities/?page_size=0&format=json', function (entities) {
		var entcount=0;
		$.each(entities, function(i, thisent) {
			entcount+=1;
			options+='<option value="'+thisent.id+'">'+thisent.name+'</option>\r';
				if (entcount==entities.length) $('#entityselect').html(options);
		});
	});
}

function showPage (pageId) {
	$('#showtext').html("");
	$.getJSON(url+'docs/'+pageId+'/xml/', function (myxml) {
		var left=document.createElement('div');
		left.style.width="45%";
		left.style.float="left";
		left.innerHTML=myxml;
		var right=document.createElement('div');
		right.style.width="45%";
		right.style.height="800px";
		right.style.float="left";
		right.className="image_map";
		var imagecall='<script type="text/javascript"> \
							var $imageMap = $(".image_map");\
							var options = {\
									zoom: 2 ,\
									minZoom: 1,\
									maxZoom: 5 \
							};\
     	imageMap = new ImageMap($imageMap[0], "http://textualcommunities.usask.ca/api/docs/'+pageId+'/has_image/", options);';
		right.innerHTML=imagecall;
		$('#showtext').append(left);
		$('#showtext').append(right);
	});
}

function showEntity (entId) {
	$.getJSON(url+'entities/'+entId+'/has_text_of/?page_size=0&format=json', function (texts) {
		$.each(texts, function(i, thistext) {
			$.getJSON(url+'texts/'+thistext.id+'/xml', function (myxml) {
				$('#showtext').html(myxml);
			});
		});
	});
}
  </script>
</head>
<body>
<h2>The Textual Communities API Starter</h2>
<p>This example uses Zenas Matthews' Mexican War Diary and Julia Brumfield's 1919 Diary.  Thanks to Ben Brumfield for supplying these texts.</p>
<p>To see your own community in this interface: substitute the abbreviation for your community in this line in the HTML:</p>
<p style="margin:0px; margin-left:50px">  var community="ZMD";</> 
<p>So: if the abbreviation for your community is "CTP2", this line should read 'var community="CTP2";'.</p>
<hr/>
<p id="navigate"><b>Choose document: </b> <select id="docselect"></select>&nbsp; &nbsp;&nbsp;Choose page: <select id="pageselect"></select>&nbsp; &nbsp;&nbsp;Choose entity: <select id="entityselect"></select>
<hr/>
<div id="showtext"></div>
<script type="text/javascript">
	selectDocuments(community);
  	
  	$('#pageselect').change (function(){ 
  		showPage(this.value);
	});
	
	 $('#docselect').change (function(){ 
  			selectPages($("#docselect").val());
			selectEntities($("#docselect").val());
	});

	
	$('#entityselect').change (function(){ 
		if (this.value!='0') showEntity(this.value);
 	});
 </script>
</body>
</html>
0 Attachments
8615 Views
Average (0 Votes)
Comments
No comments yet. Be the first.