✓ 0 Smithsonian American Art museum P1795

Fills a select box from Getty

by Magnus Sälgö

HTML

<script src="https://cdn.rawgit.com/wikimedia/wikidata-query-gui/master/wikibase/queryService/api/Sparql.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div id="explain">
<h3>Integration with Wikipedia: Smithsonian American Art Museum<a href="https://www.wikidata.org/wiki/Property_talk:P1795" target=_blank>P2432</a></h3>
Prototype to test searching in Wikipedia people presented at "Smithsonian American Art 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...

CSS

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
body {
   color: #222;
   background: #BBD2C5;
   /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #DD6900, #FFD2C5);
   /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #DD6900, #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: #999;
   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...

JavaScript

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

$(function() {
	new WOW().init();


 $.event.trigger("ajaxStart");
	var query = 'SELECT ?itemLabel WHERE { ?item wdt:P31 wd:Q5. ?item wdt:P1795 ?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 Smithsonian American Art 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"
     ...