WD Socken

Fills a select box with values from the query service

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>
<h2>Bygdeband integration med Wikipedia:<br />
Prototype testar söka "Svenska socknar" 
</h2>
<div id="explain">
Min tanke är ibland kan en sökning vara bättre än att hoppa till huvudartikeln. I nya <a href="https://www.hembygd.se/shf/plats/2" target=_blank>Bygdeband</a> länkar man sig till en artikel i Wikipedia en variant är istället <a href="https://www.mediawiki.org/wiki/API:Search">API:Search</a> och söka i Wikipedia <br /><br />
1) hämtar alla socknar till listbox<br />
2) sökning sker</div>  <br /><ll class="list">
Mer om sök API<br />
<table border=0 width=600px><tr><td><ll class="list">
  <li><a href="https://www.mediawiki.org/wiki/API:Search">API:Search</a></li>
  <li><a href="https://www.mediawiki.org/wiki/Page_Previews">Page Previews</a></li>
  <li><a href="https://minancestry.blogspot.com/2018/09/page-preview-wikipedia.html">Blogpost</a></li>
</ll>
</td></td><td><ll class="list">
<li><a target=_blank href="https://jsfiddle.net/salgo60/jmpvg8wh/embedded/result/">Bygdeband Församlingar</a></li>
<li><a target=_blank href="https://jsfiddle.net/salgo60/0baqun1h/embedded/result/">Bygdeband Distrikt</a></li>
</td></tr></table><br />
<select class="itemList" >
  <option>Välj socken</option>
</select><select class="searchOptionList" disabled="disabled">
  <option value="">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...

CSS

body {
   color: #444;
   background: #e2ecff;
   /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #9ab8f4, #e2ecff);
   /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #9ab8f4, #e2ecff);
   /* 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;
 }

 #URL {
   margin-top: 20px;
   padding: 0 5%;
   color: darkblue;
 }

 #Hits {
   margin-top: 20px;
   padding: 0 5%;
   color: #437746;
   font-size: 30px;
 }

 .more {
   color: darkgreen;
 }

 #output {
   margin-top: 40px;
   padding: 0 5%;
 }


 .list a {
   text-decoration: none;
 }

 li a:hover {
   background: lightgreen;
 }

 h2 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;
 }


 .Item {
   background-color: aliceblue;
   margin: 8px;
   size: 12px;
   border-radius: 25px;
   border: 2px solid darkBlue;
   padding: 20px;
   width: 500px;
   height: 150px;
 }

 .searchmatch {
   color: #a0ccd2;
 }

 #explain {
   color: darkgreen;
   font-family: "Times New Roman", Times, serif;
 }

JavaScript

$(function() {
	new WOW().init();
	var limit = 'limit 10000'; // For testing set number  retrieved


	var query = 'SELECT ?itemLabel WHERE { ?item wdt:P31/wdt:P279* wd:Q1523821. ?item wdt:P17 wd:Q34. SERVICE wikibase:label { bd:serviceParam wikibase:language "sv" } } ORDER BY ?itemLabel ' + limit ; 
	var api = new wikibase.queryService.api.Sparql();
	api.query(query).done(function() {
 					var nrHits = api.getResultRawData().results.bindings.length;
		$("#Hits").html("Socknar som hämtats från Wikidata till listboxen = " + nrHits + " <div data-wow-duration='6s' data-wow-offset='10' class='wow bounceInUp more'>välj en socken</div>");   $.each(api.getResultRawData().results.bindings, function(key, value) {
  		$('.itemList').append($('<option/>').text(value.itemLabel.value));
  	});
	});
});

	$( '.searchOptionList' ).change(function() {       
    var srcopt = '&srqiprofile=' + $('.searchOptionList').val();
    $("#URL").html(srcopt);

  });
	$( '.itemList' ).change(function() {       
    var input = $('.itemList').val();
    var srcopt = '&srqiprofile=classic';
    
//		srcopt = '&srqiprofile=' + $('.searchOptionList').val();
//    $("#URL").html(srcopt);
		var searchLimit = 400 // number of results in search 
    var url = `https://sv.wikipedia.org/w/api.php?action=query&list=search&srsearch=` + input + `&srlimit=` + searchLimit + `&format=json&prop=info&inprop=url` + srcopt;

    $.ajax({
      type: "GET",
      url: url,
      dataType: "jsonp",
      success: function(data) {
        let info = data.query.search;
        console.log(info);

        if (info.length === 0) {
          let notFound = "";
          notFound += `
            <div id="not-found" class="wow fadeIn text-center" data-wow-duration="0.5s">
              <p> No result for parameter </p>
            </div>
          `
          $("#output").html(notFound);
          $("#not-found").delay(5000).fadeOut(500);
        } else {
          let output = "";
          let numberofHits = "Antal...