Wikipedia Viewer

index.html

<link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss|3d-float' rel='stylesheet' type='text/css'>
<div class="container-fluid nopadding"> 
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <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 font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid"> 
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#wikisearch"><span class="glyphicon glyphicon-search"></span> WIKIPEDIA SEARCH</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/3358cf711ea08f28a88c" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="wikisearch"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-md-12"> 
        <h2 class="font-effect-3d-float"><img class="wikilogo" src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg"/> WikipediA Search</h2>
        <div class="input-group input-group-sm">
          <span class="input-group-btn hidden">
            <button class="btn btn-default" type="button" id="do-random" onclick="getRandomWiki();"><span class="glyphicon glyphicon-refresh"></span> Random Wiki</button>
          </span>
          <span class="input-group-addon hidden" id="sizing-addon3"><span class="glyphicon glyphicon-search"></span></span>
          <input type="text" class="form-control hidden srch" placeholder="WikipediA Search" aria-describedby="sizing-addon3" id="news-search">
          <span class="input-group-btn input-group-btn-1 hidden">
            <button class="btn btn-default" type="button" id="do-search" onclick="searchWiki();addResetButton();"><span class="glyphicon glyphicon-ok"></span> Search</button>
          </span>
        </div>
        <p class="output font-effect-emboss"> 
          Search output
        </p>
        <span class="credits font-effect-3d-float">credits <a href="https://en.wikipedia.org/wiki/File:Wikipedia-logo-v2.svg" target=_blank>wikipedia</a> - <a href="http://www.flaticon.com/authors/freepik" target=_blank>flaticon</a> - <a href="http://backgrounds.mysitemyway.com/" target=_blank>mysitemyway</a><br>licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

script.js

// example api call
// https://en.wikipedia.org/w/api.php?action=opensearch&search=api&limit=10&namespace=0&format=json
var apiEndpointURLopensearch = "https://en.wikipedia.org/w/api.php?action=opensearch&search=";
var apiRequestEnding = "&limit=10&namespace=0&format=json&callback=?";
var apiResuestSuggestionsEnding = "&format=json&callback=?";
var output = "";
$(document).ready(function(){
  output += "<div class='list-group'>";
  $(".input-group-addon").removeClass("hidden");
  $(".input-group-addon").addClass("animated fadeInLeftBig");
  setTimeout(function(){
    $(".srch").removeClass("hidden");
    $(".srch").addClass("animated fadeInDownBig");
  },1000);
  setTimeout(function(){
    $(".input-group-btn").removeClass("hidden");
    $(".input-group-btn").addClass("animated fadeInRightBig");
  },2000);
  $("#news-search").keyup(function(event){
    if (event.keyCode == 13){
      $(".output").html("");
      $("#do-search").click();
    }
  });
  suggestKeywords();
});
function searchWiki(){
  output = "";
  var keyword = $("#news-search").val();
  var endpointURL = apiEndpointURLopensearch+keyword+apiRequestEnding;
  var name =[], description = [], link = [];
  $.getJSON(endpointURL, function(json){
    if (json[1].length > 0){
      name = json[1];
      description = json[2];
      link = json[3];
      for (var i=0;i<name.length;i++){
        var headingOutput = "<h4 class='list-group-item-heading'>"+name[i]+"</h4>";
        var descriptionOutput;
        if (description[i] != ""){
          descriptionOutput = "<p class='list-group-item-text' id='description'>"+description[i]+"</p>";
        }else{
          descriptionOutput = "<img id='na' src='http://cdn.flaticon.com/svg/16/16096.svg'/>";
        }
        output += "<a href='"+link[i]+"' class='list-group-item' target=_blank><span class='marker'></span>"+headingOutput+descriptionOutput+"</a>";
        if (i === name.length-1){
          output += "</div>";
          $(".output").html(output);
          setMarkerHeight();
        }
      }
    }else{
      output += "<a href='#' class='list-group-item' target=_blank><h4 class='list-group-item-heading'>Nothing found</h4><p class='list-group-item-text' id='description'>Search another word</p></a></div>";
      $(".output").html(output);
    }
  });
}

function setMarkerHeight(){
  $(".list-group-item-heading").each(function(i,obj){
    var headingHTML = $(this).html();
    var parent = $(this).parent();
    var parentHeight = parent.height();
    var marker = parent.find(".marker");
    marker.hide();
    marker.height(parentHeight);
    parent.mouseover(function(){
      marker.show();
      resetMarkerHeight($(this));
    }).mouseout(function(){
      marker.hide();
    });
  });
}
function resetMarkerHeight(prnt){
  var thisHeight = prnt.height();
  var thisMarker = prnt.find(".marker");
  thisMarker.height(thisHeight);
}

function addResetButton(){
  if ($("#do-reset").length == 0){
    var searchButtonObjHTML = $(".input-group-btn-1").html();
    var resetButtonMarkup = "<button class='btn btn-default' type='button' id='do-reset' onclick='resetInputOutput();'><span class='glyphicon glyphicon-trash'></span> Reset</button>";
    var newButtonsBlock = searchButtonObjHTML + resetButtonMarkup;
    $(".input-group-btn-1").html(newButtonsBlock);
  }
  //alert(searchButtonObjHTML);
}
function resetInputOutput(){
  $("#news-search").val("");
  $(".output").html("Search output");
  var removeResetButton = "<button class='btn btn-default' type='button' id='do-search' onclick='searchWiki();addResetButton();'><span class='glyphicon glyphicon-ok'></span> Search</button>";
  $(".input-group-btn-1").html(removeResetButton);
}

function suggestKeywords(){
  $("#news-search").autocomplete({
    source: function(request,response){
      console.log(request.term);
      var requestURL = apiEndpointURLopensearch+request.term+apiResuestSuggestionsEnding;
      console.log(requestURL);
      $.getJSON(requestURL,function(json){
        console.log("json length: "+json.length);
      }).success(function(data){
        console.log(data[1]);
        response(data[1]);
      });
    }
  });
}

function getRandomWiki(){
  $(".output").html("");
  var requestRandomIdURL = "https://en.wikipedia.org/w/api.php?action=query&list=random&rnlimit=1&format=json&callback=?";
  var requestWikiExtractById1 = "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro=&explaintext=&pageids=";
  var requestWikiUrlById1 = "https://en.wikipedia.org/w/api.php?action=query&prop=info&inprop=url&pageids=";
  // https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro=&explaintext=&pageids=132132
  var requestWikiById2 = "&format=json&callback=?";
  $.getJSON(requestRandomIdURL,function(json){
    console.log("id resolve json: "+JSON.stringify(json));
  }).success(function(data){
    var articleId = data["query"]["random"][0]["id"];
    console.log(articleId);
    // output article extract
    var requestWikiById = requestWikiExtractById1+articleId+requestWikiById2;
    $.getJSON(requestWikiById, function(json){
      console.log("article json: "+JSON.stringify(json));
    }).success(function(data){
      var articleJSONobject = data["query"]["pages"][articleId];
      var pageTitle = articleJSONobject["title"];
      var pageExtract = articleJSONobject["extract"];
      if (pageExtract == ""){pageExtract = "Endpoint https://www.mediawiki.org/wiki/API:Random returns pretty mush junk, when used to resolve articles' extracts.<br>If you see this message hit 'Random Wiki' button again.";}
      var articleOutput = "<a id='article-link' href='#' target=_blank><span class='randomWikiArticleHeading font-effect-3d-float'>"+pageTitle+"</span><p class='well randomWikiArticle col-xs-12 col-sm-12 col-md-12 col-lg-12'>"+pageExtract+"</p></a>";
      $(".output").html(articleOutput);
    });
    // attach link
    var requestWikiById = requestWikiUrlById1+articleId+requestWikiById2;
    $.getJSON(requestWikiById, function(json){
      console.log("article json: "+JSON.stringify(json));
    }).success(function(data){
      var articleJSONobject = data["query"]["pages"][articleId];
      var pageURL = articleJSONobject["fullurl"];
      $("#article-link").attr("href",pageURL);
    });
  });
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.home {background: transparent url('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/1197/full/grungy-mauve-brown-seamless-textures-part-2-20.jpg') fixed center top / cover;min-height: 100vh;height: auto !important;margin-top: 0.95em;}
.nopadding {padding: 0;}
body {color:#ffffff; font-family: 'Play', sans-serif;font-size: 2.2em;overflow-x:hidden;}
.navbar-brand {font-size: 1em;}
.wikilogo{height:1em;}
.img-border {border-radius: 50%;height: 40vh;}
.sect {padding-top: 2vh;}
.social-btn-blk {background-color: #000000;}
.social-btn-wht {background-color: #ffffff;}
.img-fit{width:100%;}
h2{text-align:center;margin-top:4vh;}
p{margin-top:0.5vh;}
.credits{display:block;text-align:center;font-size:0.75em;}
.credits a:hover{text-decoration:none;}
.output{text-align:center;}
.output a{color:#ffffff;}
.output a:hover{text-decoration:none;}
#na{width:1.5em;}
#description{font-size:0.85em;color:#db9356;text-shadow:1px 1px 2px #f4a460;text-align:left;}
.marker{display:inline;width:0.4em;height:4em;background-color:#181009;float:left;box-shadow:1px 1px 2px #302013;margin-right:0.5em;border-radius:0.5em;}
.ui-widget{width:1em;font-size:0.7em;}
.randomWikiArticle{font-size:0.85em;color:#000000;font-weight:bold;text-shadow:1px 1px 2px #d3d3d3;text-align:left;}
.randomWikiArticle a{color:green;}
randomWikiArticleHeading{color:gray;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />

WikipediaViewer.markdown

Wikipedia Viewer

A Pen by V on CodePen.

License.