Last active
August 29, 2015 14:23
-
-
Save seanking94/b73a3677fa85bfb01edd to your computer and use it in GitHub Desktop.
06/29/15 Code as of Monday Meeting
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Vanderbilt Bioimages</title> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cosmo/bootstrap.min.css"> | |
<!--<link rel="stylesheet" href="/stylesheets/style.css">--> | |
<script> | |
//Here is the converting to links function that later gets reference. It's pretty much just a bunch of regex-ing. | |
function convertToLinks(text) { | |
var replaceText, replacePattern1; | |
//URLs starting with http://, https:// | |
replacePattern1 = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; | |
replacedText = text.replace(replacePattern1, '<a class="colored-link-1" title="$1" href="$1" target="_blank">$1</a>'); | |
//URLs starting with "www." | |
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim; | |
replacedText = replacedText.replace(replacePattern2, '$1<a class="colored-link-1" href="http://$2" target="_blank">$2</a>'); | |
//returns the text result | |
return replacedText; | |
} | |
// function to turn XML object into a string | |
function getXmlString(xml) { | |
if (window.ActiveXObject) { return xml.xml; } | |
return new XMLSerializer().serializeToString(xml); | |
} | |
$(document).ready(function(){ | |
// creates a function that's executed when the button is clicked | |
$("button").click(function(){ | |
//pulls data from the input boxes | |
input1=document.getElementById('box1').value; | |
input2=document.getElementById('box2').value; | |
input3=document.getElementById('box3').value; | |
input4=document.getElementById('box4').value; | |
// creates a string that contains the query with the data from the box | |
// inserted into the right place | |
var query = "PREFIX foaf: <http://xmlns.com/foaf/0.1/>"+ | |
"PREFIX ac: <http://rs.tdwg.org/ac/terms/>"+ | |
"PREFIX dwc: <http://rs.tdwg.org/dwc/terms/>"+ | |
"PREFIX dsw: <http://purl.org/dsw/>"+ | |
"PREFIX Iptc4xmpExt: <http://iptc.org/std/Iptc4xmpExt/2008-02-29/>"+ | |
"PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>"+ | |
"SELECT DISTINCT ?uri ?image WHERE {" + | |
"?identification dwc:genus " + input1 + "." + | |
"?identification dwc:specificEpithet " + input2 + "." + | |
"?organism dsw:hasIdentification ?identification." + | |
"?organism foaf:depiction ?image." + | |
"?organism dsw:hasOccurrence ?occurrence." + | |
"?occurrence dsw:atEvent ?event." + | |
"?event dsw:locatedAt ?location." + | |
"?location dwc:stateProvince " + input3 + "." + | |
"?image Iptc4xmpExt:CVterm ?view." + | |
"?view rdfs:subClassOf ?featureCategory." + | |
"?featureCategory rdfs:label " + input4 + "." + | |
"?image ac:hasServiceAccessPoint ?sap." + | |
"?sap ac:accessURI ?uri." + | |
"?sap ac:variant ac:Thumbnail." + | |
"} " + | |
"LIMIT 10"; | |
// URL-encodes the query so that it can be appended as a query value | |
var encoded = encodeURIComponent(query) | |
// does the AJAX to send the HTTP GET to the Callimachus SPARQL endpoint | |
// then puts the result in the "data" variable | |
$.ajax({ | |
type: 'GET', | |
url: 'http://rdf.library.vanderbilt.edu/sparql?query=' + encoded, | |
headers: { | |
Accept: 'application/sparql-results+xml' | |
}, | |
success: function(data) { | |
// performs the string-conversion function on the returned XML object | |
var stringXml=getXmlString(data) ; | |
//console.log(stringXml) | |
//Have to clip off the first link that is useless | |
stringXml = stringXml.substring(95);//you need this as long as www. style links are being pulled out in the link funtion | |
//Commented this out because no user wants to see an alert | |
//alert(stringXml); | |
//Use the function to turn out string into clickable links | |
links=convertToLinks(stringXml); | |
console.log(links) | |
//Here is where I need to be able to parse the list of links in order to return them one | |
//at a time so I can mess with them individually in HTML later on | |
//Also the list size is not fixed, so I can't just parse it and set it to a certain number of variable | |
//or do anything of a similar nature | |
//var listOfLinks = links.split(' '); // split by whatever the links are separated by --jg | |
//console.log(listOfLinks); // check on the result in the browser console window (I like this better than using alerts) --jg | |
// iterate through the array and add the links to the #div1 element. Add whatever you need to add to each entry within the loop. --jg | |
// $.each(listOfLinks, function (key, value) { | |
// do whatever you need to do to each link here --jg | |
// $('#div1').append(value); // this just adds the link as-is, which is what your code already currently does. Depending on what you do in the lines above, change this value to print that result instead. --jg | |
//}) | |
//This function below is one of the things that I understand the function of, but not the nuance | |
//The links get printed on line 146 | |
document.getElementById('div1').innerHTML=links ; // don't need this since the above each loop replaces this functionality --jg | |
} | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<nav class="navbar navbar-default "> | |
<div class="container"> | |
<div class="navbar-header"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">Bioimages</a> | |
</div> | |
<div id="navbar" class="collapse navbar-collapse"> | |
<ul class="nav navbar-nav"> | |
<li class="active"><a href="#">Home</a></li> | |
<li><a href="#about">About</a></li> | |
<li><a href="#contact">Contact</a></li> | |
</ul> | |
</div><!--/.nav-collapse --> | |
</div> | |
</nav> | |
<div class="container"> | |
<div class="starter-template"> | |
<div class="bs-component"> | |
<div class="jumbotron"> | |
<h2>Bioimages at Vanderbilt</h2> | |
<p><img src="http://www.library.vanderbilt.edu/webimages/Bioimages/magnolia.jpg" width="500" /></p> | |
<form action="http://bioimages.vanderbilt.edu/"> | |
<input style="color: #FFFFFF; font-size:170%; background-color: #0099FF; font-weight: normal;" type="submit" name="submit" value="Learn More" id="submit" /> | |
</form> | |
</div> | |
<h1>Find Bioimages</h1> | |
<!--Here is where the links get printed--> | |
<div id="div1"></div> | |
<span class="input-group-addon"> | |
<input id="box1" type="select" size="50" value="?genus"/><br/> | |
<input id="box2" type="text" size="50" value="?species"/><br/> | |
<input id="box3" type="text" size="50" value="?state"/><br/> | |
<input id="box4" type="text" size="50" value="?category"/><br/> | |
<button>Search</button> | |
</div></span> | |
</div><!-- /.container --> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment