MySensors_template

Basic Preview

by soif

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js"></script>
<div class="container">
  <div class="form-inline" id="myform">
    <div class="form-group">
      <label for="usr">Your GitHub Repo URL:</label>
      <input type="text" class="form-control" id="url" placeholder="https://github.com/soif/mysensors_template" value="https://github.com/soif/mysensors_template">
    </div>
    <button id="submit" class="btn btn-info">Parse</button>
  </div>

  <div id="preview" class="off">
    <img src="" class="img-rounded pull-right" width=100 id="img_main">
    <h2 id="name"></h2>
    <p id="baseline"></p>
    <div class="small info">
      ID : <strong id="gh_id"></strong> Version : <strong id="version"></strong> Updated : <strong id="time"></strong> Type : <strong id="type"></strong> License : <strong id="license"></strong>
    </div>
    <div id="images">

    </div>
    <div id="lists">
      <div class="pull-left">
        <h5>Authors</h5>
        <ul id="authors" class="list-group"></ul>
      </div>
      <div class="pull-right">
        <h5>Files</h5>
        <div id="hardware"></div>
      </div>
    </div>
    <div id="md"></div>

  </div>

</div>

CSS

#myform {
  background: #EEE;
  margin-bottom: 10px;
  padding: 5px 10px;
}
.info {
  color: #999
}
.info STRONG {
  color: #000;
  padding-right: 15px;
}
.off {
  display: none;
}
#images {
  margin: 20px 0;
  background: #F5F5F5;
  text-align: center;
}
.thumb {
  height: 60px;
  border: 1px solid #777;
  margin: 8px 5px;
}
#lists {
  margin: 20px 0;
  overflow: hidden;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
#lists UL LI {
  color: #999;
}
#md {
  clear: both;
  padding-bottom: 20px;
}

JavaScript

$("#submit").click(function() {
  // parse 
  var url = $("#url").val();
  var gh_raw = url.replace("https://github.com/", "https://raw.githubusercontent.com/") + "/master/";
  var json_file = gh_raw + "mysensors.json";

  $.getJSON(json_file, function(data) {
    var authors = "";
    var hardware = "";
    var images = "";

    $("#preview").show();
    $.each(data, function(key, val) {
      if (!$.isArray(val)) {
        $("#" + key).html(val);
      } else if (key == "authors") {
        $.each(val, function(k, author) {
          authors = authors +
            "<li class='list-group-item'><b><a href='mailto:" + author.email + "'>" + author.name +
            "</a></b> <i class='small'>" + author.role +
            "</i> ( <a href='" + author.homepage +
            "' target='_blank'>site</a> ) - <i> <a href='https://github.com/" + author.gh_user +
            "' target='_blank'>" + author.gh_user +
            "</a> @GithHub , <a href='http://forum.mysensors.org/user/" + author.mys_user +
            "' target='_blank'>" + author.mys_user + "</a> @MySensors )</i></li>";
        });
      } else if (key == "images") {
        $.each(val, function(k, image) {
          var img_url = gh_raw + "images/" + image.file;
          if (image.type == "main") {
            $("#img_main").attr('src', img_url).show();
          } else {
            images = images + "<a href='" + img_url + "' target='_blank' title='" + image.type + "'><img src='" + img_url + "' class='thumb'></a>";

          }
        });
      } else if (key == "hardware") {
        $.each(val, function(k, hw) {
          hardware = hardware + "<li><a href='" + hw.file + "' target='_blank'>" + hw.type + "</a></li>";
        });

      }
    });

    $("#images").html(images);
    $("#authors").html(authors);
    $("#hardware").html(hardware);

    if (data.hasOwnProperty('description')) {
      var desc_file = gh_raw + data.description;
      $.get(desc_file, function(desc) {
        var converter =...