$(function() {
new WOW().init();
var query = 'SELECT ?itemLabel WHERE { ?item wdt:P31 wd:Q5. ?item wdt:P2432 ?Mus. SERVICE wikibase:label { bd:serviceParam wikibase:language "sv","en" } } ORDER BY ?itemLabel '; // finds SKBL related people
var api = new wikibase.queryService.api.Sparql();
api.query(query).done(function() {
var nrHits = api.getResultRawData().results.bindings.length;
$("#Hits").html("Artists from J Paul Getty museum in the listbox = " + nrHits + " <div data-wow-duration='6s' data-wow-offset='10' class='wow bounceInUp more'>Select an artist</div>");
$.each(api.getResultRawData().results.bindings, function(key, value) {
$('.SKBLList').append($('<option/>').text(value.itemLabel.value));
});
});
});
$( '.wikiLang' ).change(function() {
retrieveWiki();
});
$( '.SKBLList' ).change(function() {
retrieveWiki();
});
$( '.searchOptionList' ).change(function() {
retrieveWiki();
});
function retrieveWiki(){
var input = $('.SKBLList').val();
//var srcopt = '&srqiprofile=classic';
var srcopt = $('.searchOptionList').val();
var wikiLang = $('.wikiLang').val();
var searchLimit = 400 // number of results in search
var url = `https://` + wikiLang + `.wikipedia.org/w/api.php?action=query&list=search&srsearch=` + input + `&srlimit=` + searchLimit + `&format=json&prop=info&inprop=url` + srcopt;
$("#URL").html('<b<b>API Wikipedia:</b> <a href="' + url + '" target=_blank>' + url + '</a>');
$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
success: function(data) {
let info = data.query.search;
console.log(info);
if (info.length === 0) {
let numberofHits = "No hits in " + wikiLang + " Wikipedia"
$("#Hits").html(numberofHits);
let output = "";
output += `
<div id="not-found" class="wow fadeIn text-center" data-wow-duration="0.5s">
<p> No result for parameter </p>
</div>
`
$("#output").html(output);
} else {
let output = "";
let numberofHits = "Number of hits in " + wikiLang + " Wikipedia = " + info.length + " using search opt = " + srcopt + " <div data-wow-duration='6s' data-wow-offset='10' class='wow bounceInUp more'>scroll down to learn more about " + input + " in " + wikiLang + " Wikipedia</div>"
$("#Hits").html(numberofHits);
$.each(info, (i, val) => {
output += `
<div class="text-left" id="results">
<div class="wow slideInLeft result" data-wow-offset="100" data-wow-duration="3s">
<h2 id="title"><a href="http://${wikiLang}.wikipedia.org/wiki/${val.title}" target="_blank">${val.title}</a></h2>
<p id="desc">${val.snippet}</p>
</div>
</div>
`
});
$("#output").html(output);
}
},
error: function() {
console.log("Error");
}
})
}
<div id="explain">
<h3>Integration with Wikipedia: J Paul Getty museum <a href="https://www.wikidata.org/wiki/Property_talk:P2432" target=_blank>P2432</a></h3>
Prototype to test searching in Wikipedia people presented at "J Paul Getty museum"
<br>What knows Wikipedia in different language versions about those people? When selecting one person a Wikipedia search is done and the result is displayed as "snippets" ==> the search engine explains why this Wikipedia article is of interest...if you have questions dont hesitate to contact Magnus Sälgö <a href="https://twitter.com/salgo60" target=_blank>twitter</a> +46-70-5937579</div> <br />See also<br /><br />
<ll class="list"><li>Same for <a target=_blank href="https://jsfiddle.net/salgo60/2qut3yxj/embedded/result/">Swedish Church parishes in Wikidata</a> and for <a target=blank href=" https://jsfiddle.net/salgo60/7etq6rmu/embedded/result/"">SBL</a></li>
<li><a href="https://www.mediawiki.org/wiki/API:Search">API:Search</a></li>
</ll><br /><br />
<select class="wikiLang">
<option value="en">English</option>
<option value="sv">Swedish</option>
<option value="de">German</option>
<option value="no">Norway</option>
<option value="da">Danish</option>
<option value="fi">Finland</option>
<option value="it">Italy</option>
<option value="ru">Russian</option>
<option value="eo">Esperanto</option>
<option value="ja">Japan</option>
<option value="zh">China</option>
<option value="pl">Poland</option>
<option value="sq">Albanian</option>
<option value="als">Alemannic</option>
<option value="roa-rup">Aromanian</option>
<option value="map-bms">Banyumasan</option>
<option value="nds-nl">Dutch Low Saxon</option>
<option value="bh">Bihari</option>
<option value="zh-yue">Cantonese</option>
<option value="ms">Min Nan</option>
<option value="ksh">Ripuarian</option>
</select><select class="SKBLList" >
<option>Select an artist</option>
</select><select class="searchOptionList">
<option value="classic">Search option srqiprofile</option>
<option value="classic">classic</option>
<option value="wsum_inclinks">Weighted sum based on incoming links</option>
<option value="wsum_inclinks_pv">Weighted sum based on incoming links and weekly pageviews</option>
<option value="popular_inclinks_pv">Ranking based primarily on page views</option>
<option value="popular_inclinks">Ranking based primarily on incoming link counts</option>
<option value="engine_autoselect">Let the search engine decide on the best profile to use.</option>
</select><br />
<div id="URL"></div
<div id="currParish"></div></a>
<div id="Hits"></div>
<div id="output"></div>
body {
color: #444;
background: #BBD2C5;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #006976, #FFD2C5);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #006976, #FFD2C5);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Dosis', sans-serif;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
font-size: 16px;
}
a {
color: #444;
cursor: pointer;
}
a:hover {
color: #555;
text-decoration: none;
}
#Hits {
margin-top: 10px;
padding: 0 5%;
color: white;
font-size: 34px;
}
#output {
margin-top: 40px;
padding: 0 5%;
}
.list a {
text-decoration: none;
}
li a:hover {
background: lightgreen;
}
#text {
padding: 10px 20px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border: 0px solid;
width: 50%;
}
#text:focus {
box-shadow: 1px 3px 40px 5px #536970;
outline: none;
}
#not-found p {
font-size: 20px;
}
.result {
padding: 0.5% 2%;
background: #fff;
margin: 1.5%;
border-left: 7px solid #536976;
}
.result h2 {
color: #536976;
}
button {
background: #536976;
color: #fff;
padding: 10px 20px;
border: 1px solid #536976;
border-radius: 30px;
margin-left: -55px;
}
.currParish {
background-color: aliceblue;
margin: 8px;
size: 12px;
border-radius: 25px;
border: 2px solid darkBlue;
padding: 20px;
width: 500px;
height:150px;
}
.searchmatch{
color: darkblue;
}
#explain
{
color: darkgreen;
font-family: "Times New Roman", Times, serif;
}
.explain2
{
color: darkgreen;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
}
.more {
color: darkgreen;
}
#URL {
margin-top: 20px;
padding: 0 5%;
color: darkblue;
}