LaurensRietveld/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This gist shows how you can manipulate and combine columns of the table plugin.
Instead of showing the URIs directly, this gist checks whether the SPARQL response contains a projection variable with the corresponding label for that URI.
If this is the case, that label is used as text for this URI link.
E.g., a SPARQL result with projection variables ?car and ?carLabel (where ?car is a URI), will hide the ?carLabel column in the table, and will use the ?carLabel as text for the ?car hyperlink.
ps. This feature is recently added to YASR as well (see the 'mergeLabelsWithUris' setting), though slightly different: for this gist the cell content changes on hover

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Combining projection variables in a datatable</title>
  <link href='http://cdn.jsdelivr.net/g/yasqe@2.0(yasqe.min.css),yasr@2.0(yasr.min.css)' rel='stylesheet' type='text/css'/>
</head>
<body>
  <div id="yasr"></div>

  <script src='http://cdn.jsdelivr.net/yasr/2.1/yasr.bundled.min.js'></script>
  <script src='http://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js'></script>
  <script src="init.js"></script>
</body>


## init.js
/**
 * First, make sure we do not draw the ...Label variables as column
 */
YASR.plugins.table.defaults.getColumns = function(yasr) {

	var vars = yasr.results.getVariables();
	yasr.results.getVariables().forEach(function(variable) {
		var labelIndex = vars.indexOf(variable + "Label");
		if (labelIndex >= 0) {
			//ah, a label equivalent for this variable exists. remove it
			vars.splice(labelIndex, 1);
		}
	});

	//we've filtered the list. Now convert array to one that is used as input for the datatables plugin
	var cols = [];
	cols.push({"title": ""});//row numbers column
	vars.forEach(function(variable) {
		cols.push({"title": variable});
	});
	return cols;
};

/**
 * Now, extend the original 'drawCellContent' function to use the label instead of the URI as text
 */
YASR.plugins.table.defaults.drawCellContent = (function(originalDrawContentFunction) {
	return function extendDrawFunction(yasr, rowId, colId, bindings, sparqlVar, usedPrefixes) {
		var cellContent = originalDrawContentFunction(yasr, rowId, colId, bindings, sparqlVar, usedPrefixes);
		if (bindings[sparqlVar].type == "uri" && bindings[sparqlVar + "Label"] ) {
			//ok, this is a URI, and we have a label equivalent. do the magic

			//create the new label (and append lang tag if there is one
			var newLabel = bindings[sparqlVar+"Label"].value;
			if (bindings[sparqlVar+"Label"]["xml:lang"]) newLabel += "@" + bindings[sparqlVar+"Label"]["xml:lang"];

			//replace the cell content text with the new label (we keep the href link to the original uri)
			//also store the label as a data attribute (used for showing/hiding the label)
			cellContent = $(cellContent).attr('toggleLabel', newLabel).text(newLabel).prop('outerHTML');
		}
		return cellContent;
	}
})(YASR.plugins.table.defaults.drawCellContent);

/**
 * Use data attribute assigned in the previous step ('toggleLabel'), to make sure the original URI shows on hover
 */
YASR.plugins.table.defaults.callbacks.onCellMouseEnter = function(tdEl) {
	var toggleLabel = $(tdEl).find("[toggleLabel]");
	toggleLabel.text(toggleLabel.attr("href"));
};
YASR.plugins.table.defaults.callbacks.onCellMouseLeave = function(tdEl) {
	var toggleLabel = $(tdEl).find("[toggleLabel]");
	toggleLabel.text(toggleLabel.attr("toggleLabel"));
};

/**
 * Now, finally, initialize YASR, and fetch some example SPARQL results
 */
var yasr = YASR(document.getElementById("yasr"));
$.get('results.json', function(sparqlJson) {
	yasr.setResponse(sparqlJson);
});

## results.json
{ "head": { "link": [], "vars": ["sub", "released", "subLabel"] },
  "results": { "distinct": false, "ordered": true, "bindings": [
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/007:_Licence_to_Kill" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "1989-04-20+02:00" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "007: Licence to Kill" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Adieu_(C%C5%93ur_de_pirate_song)" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2011-03-19+02:00" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Adieu (C\u0153ur de pirate song)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/April_Love_(film)" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "1957-11-27+02:00" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "April Love (film)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Arnel_Pineda_(album)" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "1999" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Arnel Pineda (album)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(album)" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2005-03-15+02:00" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (album)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(film)" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "1983" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (film)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(video_game)" }	, "released": { "type": "literal", "xml:lang": "en", "value": "iOS: Jan 05, 2011" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (video game)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Azada_(video_game)" }	, "released": { "type": "literal", "xml:lang": "en", "value": "June 2007 , August 2012" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Azada (video game)" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Blue_Daisy" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "2010" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Blue Daisy" }},
    { "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Break_It_Up_(Jemina_Pearl_album)" }	, "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2009-10-06+02:00" }	, "subLabel": { "type": "literal", "xml:lang": "en", "value": "Break It Up (Jemina Pearl album)" }} ] } }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Combining projection variables in a datatable</title>
	<link href='http://cdn.jsdelivr.net/g/yasqe@2.0(yasqe.min.css),yasr@2.0(yasr.min.css)' rel='stylesheet' type='text/css'/>
	</head>
	<body>
	<div id="yasr"></div>

	<script src='http://cdn.jsdelivr.net/yasr/2.1/yasr.bundled.min.js'></script>
	<script src='http://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js'></script>
	<script src="init.js"></script>
	</body>
	/**
	* First, make sure we do not draw the ...Label variables as column
	*/
	YASR.plugins.table.defaults.getColumns = function(yasr) {

	var vars = yasr.results.getVariables();
	yasr.results.getVariables().forEach(function(variable) {
	var labelIndex = vars.indexOf(variable + "Label");
	if (labelIndex >= 0) {
	//ah, a label equivalent for this variable exists. remove it
	vars.splice(labelIndex, 1);
	}
	});

	//we've filtered the list. Now convert array to one that is used as input for the datatables plugin
	var cols = [];
	cols.push({"title": ""});//row numbers column
	vars.forEach(function(variable) {
	cols.push({"title": variable});
	});
	return cols;
	};

	/**
	* Now, extend the original 'drawCellContent' function to use the label instead of the URI as text
	*/
	YASR.plugins.table.defaults.drawCellContent = (function(originalDrawContentFunction) {
	return function extendDrawFunction(yasr, rowId, colId, bindings, sparqlVar, usedPrefixes) {
	var cellContent = originalDrawContentFunction(yasr, rowId, colId, bindings, sparqlVar, usedPrefixes);
	if (bindings[sparqlVar].type == "uri" && bindings[sparqlVar + "Label"] ) {
	//ok, this is a URI, and we have a label equivalent. do the magic

	//create the new label (and append lang tag if there is one
	var newLabel = bindings[sparqlVar+"Label"].value;
	if (bindings[sparqlVar+"Label"]["xml:lang"]) newLabel += "@" + bindings[sparqlVar+"Label"]["xml:lang"];

	//replace the cell content text with the new label (we keep the href link to the original uri)
	//also store the label as a data attribute (used for showing/hiding the label)
	cellContent = $(cellContent).attr('toggleLabel', newLabel).text(newLabel).prop('outerHTML');
	}
	return cellContent;
	}
	})(YASR.plugins.table.defaults.drawCellContent);

	/**
	* Use data attribute assigned in the previous step ('toggleLabel'), to make sure the original URI shows on hover
	*/
	YASR.plugins.table.defaults.callbacks.onCellMouseEnter = function(tdEl) {
	var toggleLabel = $(tdEl).find("[toggleLabel]");
	toggleLabel.text(toggleLabel.attr("href"));
	};
	YASR.plugins.table.defaults.callbacks.onCellMouseLeave = function(tdEl) {
	var toggleLabel = $(tdEl).find("[toggleLabel]");
	toggleLabel.text(toggleLabel.attr("toggleLabel"));
	};

	/**
	* Now, finally, initialize YASR, and fetch some example SPARQL results
	*/
	var yasr = YASR(document.getElementById("yasr"));
	$.get('results.json', function(sparqlJson) {
	yasr.setResponse(sparqlJson);
	});
	{ "head": { "link": [], "vars": ["sub", "released", "subLabel"] },
	"results": { "distinct": false, "ordered": true, "bindings": [
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/007:_Licence_to_Kill" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "1989-04-20+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "007: Licence to Kill" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Adieu_(C%C5%93ur_de_pirate_song)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2011-03-19+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Adieu (C\u0153ur de pirate song)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/April_Love_(film)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "1957-11-27+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "April Love (film)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Arnel_Pineda_(album)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "1999" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Arnel Pineda (album)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(album)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2005-03-15+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (album)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(film)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "1983" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (film)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Ascendancy_(video_game)" } , "released": { "type": "literal", "xml:lang": "en", "value": "iOS: Jan 05, 2011" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Ascendancy (video game)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Azada_(video_game)" } , "released": { "type": "literal", "xml:lang": "en", "value": "June 2007 , August 2012" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Azada (video game)" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Blue_Daisy" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#integer", "value": "2010" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Blue Daisy" }},
	{ "sub": { "type": "uri", "value": "http://dbpedia.org/resource/Break_It_Up_(Jemina_Pearl_album)" } , "released": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#date", "value": "2009-10-06+02:00" } , "subLabel": { "type": "literal", "xml:lang": "en", "value": "Break It Up (Jemina Pearl album)" }} ] } }