Hello wiki

hello-wiki.markdown

Hello wiki

Experiment with Google's Material Design Lite and Sass

A Pen by Charlotte Tan on CodePen.

License.

index.html

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--hide-phone"></div>
  <div class="mdl-cell mdl-cell--4-col center">
    <a href="https://en.wikipedia.org/wiki/Special:Random">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
      Hit me!
    </button>
    </a>
  </div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--hide-phone"></div>
</div>

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--5-col mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div>
  <div class="mdl-cell mdl-cell--2-col">

    <form id="searchForm" action="#">
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="search">
        <label class="mdl-textfield__label" for="search"><i class="material-icons">search</i></label>
      </div>
    </form>


  </div>
  <div class="mdl-cell mdl-cell--5-col mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div>
</div>

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
    <ul id="resultList" class="mdl-list">
    </ul>
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
</div>

script.js

$(function() {
  var WIKI_API = 'https://en.wikipedia.org/w/api.php?callback=?';
  var wikiQuery = {
    action: 'query',
    list: 'search',
    format: 'json'
  };

  var $search = $('#search');
  var $searchForm = $("#searchForm");
  var $resultList = $('#resultList');
  var $noResults = $('<li>', {
    class: 'center'
  }).text('No results :(');

  var populateResults = function(data) {
    $resultList.empty();

    if (!data.query.search.length) {
      $resultList.append($noResults);
    }
    data.query.search.forEach(function(ele, index, array) {

      var $listItem = $('<li>', {
        class: 'mdl-list__item mdl-list__item--three-line'
      });
      var $spanTitle = $('<span>', {
        class: 'mdl-list__item-primary-content'
      }).html('<span>' + ele.title + '</span>');
      var $spanSnippet = $('<span>', {
        class: 'mdl-list__item-text-body'
      }).html(ele.snippet + '...');
      $spanTitle.append($spanSnippet);
      $listItem.append($spanTitle);

      $resultList.append($listItem);

    });
  };

  var performSearch = function(e) {
    e.preventDefault();
    wikiQuery.srsearch = $search.val();
    $.getJSON(WIKI_API, wikiQuery, populateResults);
  };

  $searchForm.submit(performSearch);
  
  // bootstrap some data so that we can see the preview in codepen
  $search.val('Seattle');
  $searchForm.trigger('submit');
});

scripts

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.sass

$amber100: #FFECB3

.center
  text-align: center
  
.searchmatch
  background-color: $amber100

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://code.getmdl.io/1.1.3/material.lime-amber.min.css" rel="stylesheet" />

wikipedia-search.markdown

Wikipedia Search

Experiment with Google's Material Design Lite and Sass

A Pen by Charlotte Tan on CodePen.

License.