demo/pokedex-browser/index.html
<!DOCTYPE html>
<html ng-app="DatasetBrowser">
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://js.geoknow.eu/libs/jassa-ui-angular/latest/jassa-ui-angular.css">
<!-- <link rel="stylesheet" href="file:///home/raven/Projects/Eclipse/jassa-ui-angular-parent/jassa-ui-angular-core/target/release/repo/jassa-ui-angular.css"> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bluebird/1.2.2/bluebird.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-sanitize.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="http://js.geoknow.eu/libs/jassa/latest/jassa.js"></script>
<!-- <script src="../../dist/jassa.js"></script> -->
<script src="http://js.geoknow.eu/libs/jassa-ui-angular/latest/jassa-ui-angular-tpls.js"></script>
<!-- <script src="file:///home/raven/Projects/Eclipse/jassa-ui-angular-parent/jassa-ui-angular-core/target/release/repo/jassa-ui-angular-tpls.js"></script> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.12.8/sortable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script type="text/ng-template" id="default-list-item.html">
<li class="media" ng-repeat="item in items">
<a class="pull-left" href="#">
<div class="thumbnail thumbnail-center" style="width: 100px; height: 100px;">
<div class="thumbnail-wrapper">
<img ng-src="{{item.depiction}}">
</div>
</div>
</a>
<div class="media-body">
<b>{{item.label.displayLabel || 'Sorry, there is no title available in your preferred languages'}}</b> <a href="{{item.id}}" target="_blank"><span class="glyphicon glyphicon-new-window"></span></a>
<br />
<span bind-html-unsafe="item.comment.displayLabel || 'Sorry, there is no description available in your preferred languages' | typeaheadHighlight:searchString"></span>
</div>
</li>
<li ng-show="!items.length" class="alert alert-danger" style="text-align: center" role="alert">No results</li>
</script>
<script type="text/javascript">
jassa = new Jassa(Promise, $.ajax);
var vocab = jassa.vocab;
var rdf = jassa.rdf;
var sparql = jassa.sparql;
var service = jassa.service;
var sponate = jassa.sponate;
var facete = jassa.facete;
var util = jassa.util;
angular.module('DatasetBrowser', ['ui.jassa', 'ui.bootstrap', 'ui.sortable', 'ui.keypress', 'ngSanitize'])
.controller('AppCtrl', ['$scope', '$q', function($scope, $q) {
/*
* Set up the sparql service with as many buffs (decorations) as we like
*/
var sparqlService = service.SparqlServiceBuilder
.http('http://akswnc3.informatik.uni-leipzig.de/data/misc/sparql', ['http://pokedex.org'], {type: 'POST'})
.cache().virtFix().paginate(1000).pageExpand(100).create();
/*
* Set up the Sponate mapping for the data we are interested in
*/
var prefixes = {
'foaf': 'http://xmlns.com/foaf/0.1/',
'pokedex': 'http://pokedex.dataincubator.org/pkm/'
};
var store = new sponate.StoreFacade(sparqlService, prefixes);
$scope.langs = ['de', 'en', '']; //, 'fr', 'ja', 'it', 'es', ''];
var labelTemplateFn = function() {
console.log('Refresh: ', $scope.langs);
var labelConfig = new sparql.BestLabelConfig($scope.langs);
return sponate.MappedConceptUtils.createMappedConceptBestLabel(labelConfig);
};
var commentTemplateFn = function() {
var labelConfig = new sparql.BestLabelConfig($scope.langs, [rdf.NodeFactory.createUri(prefixes.pokedex + 'description')]);
return sponate.MappedConceptUtils.createMappedConceptBestLabel(labelConfig);
};
//console.log('labelConfig ', labelConfig);
store.addMap({
name: 'pokemons',
template: [{
id: '?s',
label: { $ref: { target: labelTemplateFn } },
comment: { $ref: { target: commentTemplateFn} },
depiction: '?d',
}],
from: '?s a pokedex:Pokemon . Optional { ?s foaf:depiction ?d }'
});
/*
* Create a list service for our mapping and decorate it with
* keyword search support
*/
$scope.searchModes = [{
label: 'regex',
mode: 'regex'
}, {
label: 'fulltext',
mode: 'fulltext'
}];
$scope.activeSearchMode = $scope.searchModes[0];
$scope.listService = store.pokemons.getListService();
/* This line internally transparently adjusts limit/offset of requests to the list service to a
* given page size - of course only the requested range will be returned.
* This feature is combination with the caching (in this case support stems from the sparql service)
* will preload at least 100 items whenever the offset hits a 100 items boundary.
*/
$scope.listService = new service.ListServicePageExpand($scope.listService, 100);
// $scope.listService = new service.ListServiceTransformConceptMode($scope.listService, function() {
// var searchConfig = new sparql.BestLabelConfig($scope.langs, [rdf.NodeFactory.createUri(prefixes.pokedex + 'description'), vocab.rdfs.label]);
// var labelRelation = sparql.LabelUtils.createRelationPrefLabels(searchConfig);
// return labelRelation;
// });
$scope.listService = new service.ListServiceTransformConcept($scope.listService, function(searchString) {
var concept = null;
if(searchString != null) {
var searchConfig = new sparql.BestLabelConfig($scope.langs, [rdf.NodeFactory.createUri(prefixes.pokedex + 'description'), vocab.rdfs.label]);
var labelRelation = sparql.LabelUtils.createRelationPrefLabels(searchConfig);
concept = sparql.KeywordSearchUtils.createConceptRegexLabelOnly(labelRelation, searchString);
}
return concept;
});
var filterSupplierFn = function(searchString) {
var result;
var addLabels = function(arr, labelInfo) {
if(labelInfo) {
labelInfo.displayLabel && arr.push(labelInfo.displayLabel);
labelInfo.hiddenLabels && arr.push.apply(arr, labelInfo.hiddenLabels);
}
};
if(searchString != null) {
var re = new RegExp(searchString, 'mi');
result = function(entry) {
var item = entry.val;
var labels = [item.id];
addLabels(labels, item.label);
addLabels(labels, item.comment);
var r = labels && labels.some(function(x) {
var s = re.test(x);
return s;
});
return r;
};
} else {
result = function(entry) { return true; };
}
return result;
};
//$scope.listService = new service.ListServiceIndexSubString($scope.listService, filterSupplierFn, 100);
$scope.listService = new service.ListServiceTransformConcept($scope.listService, function(concept) {
return concept ? concept.searchString : null;
});
$scope.listService.fetchItems(null, 10).then(function(entries) {
console.log('foo: ', entries);
});
/*
var a = $scope.listService;
var b = new service.ListServiceIndexSubString($scope.listService, filterSupplierFn);
$scope.listService = jassa.ext.Class.create({
initialize
fetchItems: function() {
},
fetchCount: function() {
}
});
new service.ListServiceTransformConcept(function(searchMode) {
if(searchMode.mode === 'regex') {
b
}
});
*/
/*
* Angular setup
*/
$scope.availableLangs = ['de', 'en', 'jp', 'ko'];
$scope.offset = 0;
$scope.limit = 10;
$scope.totalItems = 0;
$scope.items = [];
$scope.maxSize = 7;
$scope.doFilter = function(searchString) {
$scope.filter = {
searchString: searchString,
mode: $scope.activeSearchMode.mode
};
$scope.offset = 0;
};
$scope.context = {
// TODO Get rid of the limitation of having to pass in the itemTemplate via a 'context' object
itemTemplate: 'default-list-item.html',
};
}]);
</script>
</head>
<body ng-controller="AppCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" style="padding: 3px 15px;" href="http://aksw.org" target="_blank"><img style="height: 42px;" src="http://js.geoknow.eu/images/aksw-logo.png" alt=""></img></a>
<a class="navbar-brand" href="#">Dataset Browser</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://aksw.org/ClausStadler" target="_blank">by Claus Stadler</a></li>
</ul>
</div>
</div>
</nav>
<jassa-list-browser
list-service="listService"
offset="offset"
limit="limit"
max-size="maxSize"
filter="filter"
do-filter="doFilter"
total-items="totalItems"
items="items"
langs="langs"
availableLangs="availableLangs"
search-modes="searchModes"
active-search-mode="activeSearchMode"
context="context"
item-template="itemTemplate"
></jassa-list-browser>
</body>
</html>