Responsive Social Feed

In this example below you will see how to do a Responsive Social Feed with some HTML / CSS and Javascript

Needed to whip up a quick demo of a responsive social feed for something (Instagram, Tumblr, whatever). Also includes a super lightweight modal.

Thumbnail
This awesome code was written by benjaminmiles, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright benjaminmiles ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Tumblr Tag Search</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Pacifico'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- Main Container-->
<div class="container">
  <!-- UI -->
  <div class="ui">
    <h2>Tag Search</h2>
    <form>
      <input type="text" id="tag" placeholder="tag" />
<!--       <input type="button" id="instagramSubmit" value="Instagram" > -->
      <input type="button" id="tumblrSubmit" value="Search" />
    </form>
  </div>
  
  <!-- Feed -->
  <div class="posts"></div>
  
</div>

<!-- Modal -->
<div class="modal">
  <div class="wrapper"><a href="#" class="close"><i class="fa fa-close"></i></a>
    <!-- Selected post will get injected here-->
  </div>
</div>

<!-- Instagram Template -->
<script type="text/template" id="instagramTemplate">
  <% _.each( data, function( post ){ %>
    <article class="post">
      <div class="content">
        <img src="<%= post.images.standard_resolution.url %>"/>
        <div class="hover">
          <a href="<%= post.link %>", target="_blank">
            <div class="info">
              <div style="background: white url(<%= post.user.profile_picture %>) no-repeat center center; background-size: 100% auto" class="avatar"></div>
              <div class="username">@<%= post.user.username %></div>
            </div>
          </a>
        </div>
      </div>
    </article>
  <% }); %>
</script>
  
<!-- Tumblr Template -->
<script type="text/template" id="tumblrTemplate">
  <% _.each( response, function( post ){ %>
    <% if ( post.type == 'photo' ){ %>
      <article class="post">
        <div class="content">
          <img src="<%= post.photos[0].original_size.url %>"/>
          <div class="hover">
            <a href="<%= post.post_url %>", target="_blank">
              <div class="info">
                <div style="background: white  url(https://api.tumblr.com/v2/blog/<%= post.blog_name %>.tumblr.com/avatar/128) no-repeat center center; background-size: 100% auto" class="avatar"></div>
                <div class="username">@<%= post.blog_name %></div>
              </div>
            </a>
          </div>
        </div>
      </article>
    <% } %>
  <% }); %>
</script>
      
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-19784624-1', 'auto');
  ga('send', 'pageview');

</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.2/packery.pkgd.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/benjaminmiles/responsive-social-feed-BoaxmM */
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

body {
  background: white;
  color: #13c0c6;
  text-shadow: 2px 2px #7feff3;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: Montserrat, helvetica, sans-serif;
  font-size: 1em;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
body.loading {
  background-color: #dcfbfc;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  transition: background-color 0.5s;
}

a {
  color: #0f9397;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
a:hover {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
  color: #13c0c6;
}

.container {
  padding: 1.5em;
}

/* basic UI */
.ui {
  text-align: center;
  margin-bottom: 1.5em;
}
.ui h2, .ui h3 {
  text-align: center;
}
.ui h2 {
  font-size: 8vw;
  font-family: "Pacifico", cursive;
  text-shadow: 0.4vw 0.4vw #dcfbfc;
  color: #11a9af;
  margin: 0.5em 0 0.7em;
}
.ui h3 {
  font-size: 3vw;
  letter-spacing: -1px;
  font-family: Montserrat, helvetica, sans-serif;
  color: #13c0c6;
  margin: 0 0 1em;
}
.ui input {
  font-size: 2.3vw;
  font-family: Montserrat, helvetica, sans-serif;
  border: none;
  border-radius: 5px;
  padding: 0.4em 0.5em;
  display: inline-block;
  vertical-align: middle;
  outline: none;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.ui input[type=text] {
  color: #13c0c6;
  background: #dcfbfc;
  border: 2px dashed #13c0c6;
  width: 35vw;
  margin-right: 0.8em;
}
.ui input[type=text]:hover, .ui input[type=text]:focus {
  background: white;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.ui input[type=button] {
  background: #13c0c6;
  color: white;
  border: 2px solid transparent;
  margin: 0 0.2em;
  width: 15vw;
}
.ui input[type=button]:hover {
  cursor: pointer;
  background: #0f9397;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.ui input[type=button]:active {
  color: #13c0c6;
  background: #0a6669;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

/* posts grid */
.posts {
  width: 100%;
}
.posts .post {
  position: relative;
  margin-bottom: 1em;
  border: 5px solid #EEE;
  box-shadow: 1px 1px 2px rgba(15, 15, 15, 0.3);
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  opacity: 0;
  display: none;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@media (min-width: 1000px) {
  .posts .post {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 23.2317609825%;
  }
  .posts .post:last-child {
    margin-right: 0;
  }
  .posts .post:nth-child(4n) {
    margin-right: 0;
  }
  .posts .post:nth-child(4n+1) {
    clear: left;
  }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .posts .post {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 31.7615653177%;
  }
  .posts .post:last-child {
    margin-right: 0;
  }
  .posts .post:nth-child(3n) {
    margin-right: 0;
  }
  .posts .post:nth-child(3n+1) {
    clear: left;
  }
}
@media (max-width: 700px) {
  .posts .post {
    margin-bottom: 0.5em;
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%;
  }
  .posts .post:last-child {
    margin-right: 0;
  }
  .posts .post:nth-child(2n) {
    margin-right: 0;
  }
  .posts .post:nth-child(2n+1) {
    clear: left;
  }
}
.posts .post .hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(19, 192, 198, 0.5);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.posts .post .hover .info {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}
.posts .post .hover .avatar {
  width: 10vw;
  height: 10vw;
  margin: 10px auto;
  border-radius: 50%;
  background-size: 100% auto;
  background: white;
  border: 5px solid white;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
@media (max-width: 700px) {
  .posts .post .hover .avatar {
    width: 20vw;
    height: 20vw;
  }
}
.posts .post .hover .username {
  text-align: center;
  color: white;
  font-family: "Pacifico", cursive;
  text-shadow: 1px 1px #0f9397;
  display: inline-block;
  padding: 0.4em 0.8em;
  font-size: 2vw;
}
.posts .post img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.posts .post:hover {
  border-color: #13c0c6;
  border-radius: 15px;
  box-shadow: 1px 1px 2px rgba(19, 192, 198, 0.5);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.posts .post:hover img {
  border-radius: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.posts .post:hover .hover {
  opacity: 1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(19, 192, 198, 0.5);
  z-index: 100;
  display: none;
}
.modal .wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.modal .wrapper .content {
  border: 22px solid white;
  border-radius: 15px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
.modal .wrapper .content .avatar {
  position: absolute;
  z-index: 10;
  width: 100px;
  height: 100px;
  background: white;
  margin: 10px auto;
  border-radius: 50%;
  background-size: 100% auto;
  border: 10px solid white;
  bottom: -3.5em;
  left: -2.5em;
  display: none;
}
.modal .wrapper .content .username {
  position: absolute;
  z-index: 9;
  bottom: -0.4em;
  left: 1.5em;
  font-size: 1.5em;
  color: #13c0c6;
  font-family: "Pacifico", cursive;
  background: white;
  display: none;
  bottom: -0.8em;
  left: 0.5em;
  border-right: 18px solid white;
  border-bottom: 8px solid white;
  border-radius: 10px;
  padding-left: 2.2em;
}
.modal .wrapper .content img {
  display: block;
  max-width: 70vw;
  max-height: 70vh;
  width: auto;
  height: auto;
}
.modal .wrapper .close {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  font-size: 2em;
  line-height: 1.2em;
  background: white;
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  text-align: center;
  z-index: 100;
  display: none;
}


/*Downloaded from https://www.codeseek.co/benjaminmiles/responsive-social-feed-BoaxmM */
(function() {
  // Variables
  var $packery, defaultTag, fetchPosts, init, instagramClientId, instagramTemplate, randomService, setupPosts, tumblrApiKey, tumblrTemplate;

  defaultTag = "busterkeaton";

  $packery = null;

  // Instagram (replace with your client id) 
  instagramClientId = "b638d8afbce24fd3874217a73da8e53a";

  instagramTemplate = _.template($('#instagramTemplate').html());

  // Tumblr (replace with your api key)
  tumblrApiKey = "UcPvk5p7iXWOZqe2AinpV7zQfEf7WHCpqUA8wRJeSAWKUwBazy";

  tumblrTemplate = _.template($('#tumblrTemplate').html());

  // Fetch Social Posts
  fetchPosts = function(tag, service) {
    var endpoint, template;
    if (tag && tag !== "" && service) {
      
      // Switch service endpoints and templates
      switch (service) {
        case "instagram":
          endpoint = `https://api.instagram.com/v1/tags/${tag}/media/recent?client_id=${instagramClientId}&callback=?`;
          template = instagramTemplate;
          break;
        case "tumblr":
          endpoint = `https://api.tumblr.com/v2/tagged?tag=${tag}&api_key=${tumblrApiKey}&callback=?`;
          template = tumblrTemplate;
      }
      
      // Go and get stuff
      return $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        cache: false,
        url: endpoint,
        success: function(response) {
          //console.log response
          return setupPosts(response, template);
        }
      });
    }
  };

  // Setup posts from response data and apply underscore template
  setupPosts = function(posts, template) {
    // Do some sort of loading thing
    $("body").addClass("loading");
    
    // Clear post dom first
    $(".posts").html("");
    
    // Apply underscore template
    $(".posts").append(template(posts));
    
    // Destroy current packery instance
    if ($packery) {
      $(".posts").packery('destroy');
    }
    
    // set timeout image load workaround for packery
    return setTimeout(function() {
      var delay;
      // Fade posts in one at a time
      delay = 0;
      $('.post').each(function(index) {
        $(this).velocity("transition.slideUpIn", {
          delay: delay,
          duration: 500
        });
        return delay += 50;
      });
      // now pack it in
      $packery = $(".posts").packery({
        itemSelector: '.post'
      });
      
      // Remove some sort of loading thing
      return $("body").removeClass("loading");
    }, 1000);
  };

  // Search a random service
  randomService = function(tag) {
    // fetchPosts(tag, _.sample(["instagram","tumblr"]))
    return fetchPosts(tag, "tumblr");
  };

  
  // Setup interface, click handlers, etc
  init = function() {
    // Open Modal
    $("body").on("click", ".posts .post", function(e) {
      var $post;
      e.preventDefault();
      // Remove current post
      $(".modal").find(".content").remove();
      // Add new one and
      $post = $(this).find(".content").clone().appendTo(".modal .wrapper");
      // Animate In
      $(".modal").velocity("fadeIn", 500);
      $(".modal .avatar").velocity("transition.slideDownIn", {
        delay: 500,
        duration: 500
      });
      $(".modal .username").velocity("transition.slideLeftIn", {
        delay: 1000,
        duration: 500
      });
      return $(".modal .close").velocity("transition.slideUpIn", {
        delay: 500,
        duration: 500
      });
    });
    
    // Close Modal
    $("body").on("click touchend", ".modal .close", function(e) {
      e.preventDefault();
      // Animate Out
      $(".modal").velocity("fadeOut", 500);
      $(".modal .avatar").velocity("transition.slideUpOut", 500);
      $(".modal .username").velocity("transition.slideLeftOut", 500);
      return $(".modal .close").velocity("transition.slideDownOut", 500);
    });
    
    // Submit buttons
    $("#instagramSubmit").on("click touchend", function(e) {
      e.preventDefault();
      return fetchPosts($("#tag").val(), "instagram");
    });
    $("#tumblrSubmit").on("click touchend", function(e) {
      e.preventDefault();
      return fetchPosts($("#tag").val(), "tumblr");
    });
    // Random service on enter
    $("form").on("submit", function(e) {
      e.preventDefault();
      return randomService($("#tag").val(), defaultTag);
    });
    
    // Finally kick things off with the default tag and a random service
    $("#tag").val(defaultTag);
    return randomService(defaultTag);
  };

  // GOT TIME
  init();

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTtBQUFBLE1BQUEsUUFBQSxFQUFBLFVBQUEsRUFBQSxVQUFBLEVBQUEsSUFBQSxFQUFBLGlCQUFBLEVBQUEsaUJBQUEsRUFBQSxhQUFBLEVBQUEsVUFBQSxFQUFBLFlBQUEsRUFBQTs7RUFDQSxVQUFBLEdBQWE7O0VBQ2IsUUFBQSxHQUFXLEtBRlg7OztFQUlBLGlCQUFBLEdBQW9COztFQUNwQixpQkFBQSxHQUFvQixDQUFDLENBQUMsUUFBRixDQUFXLENBQUEsQ0FBRSxvQkFBRixDQUF1QixDQUFDLElBQXhCLENBQUEsQ0FBWCxFQUxwQjs7O0VBT0EsWUFBQSxHQUFlOztFQUNmLGNBQUEsR0FBaUIsQ0FBQyxDQUFDLFFBQUYsQ0FBVyxDQUFBLENBQUUsaUJBQUYsQ0FBb0IsQ0FBQyxJQUFyQixDQUFBLENBQVgsRUFSakI7OztFQVdBLFVBQUEsR0FBYSxRQUFBLENBQUMsR0FBRCxFQUFNLE9BQU4sQ0FBQTtBQUNYLFFBQUEsUUFBQSxFQUFBO0lBQUEsSUFBRyxHQUFBLElBQVEsR0FBQSxLQUFPLEVBQWYsSUFBc0IsT0FBekI7OztBQUdFLGNBQU8sT0FBUDtBQUFBLGFBQ08sV0FEUDtVQUVJLFFBQUEsR0FBVyxDQUFBLGtDQUFBLENBQUEsQ0FBcUMsR0FBckMsQ0FBeUMsd0JBQXpDLENBQUEsQ0FBbUUsaUJBQW5FLENBQXFGLFdBQXJGO1VBQ1gsUUFBQSxHQUFXO0FBRlI7QUFEUCxhQUlPLFFBSlA7VUFLSSxRQUFBLEdBQVcsQ0FBQSxxQ0FBQSxDQUFBLENBQXdDLEdBQXhDLENBQTRDLFNBQTVDLENBQUEsQ0FBdUQsWUFBdkQsQ0FBb0UsV0FBcEU7VUFDWCxRQUFBLEdBQVc7QUFOZixPQUFBOzs7YUFTQSxDQUFDLENBQUMsSUFBRixDQUNFO1FBQUEsSUFBQSxFQUFNLEtBQU47UUFDQSxRQUFBLEVBQVUsT0FEVjtRQUVBLEtBQUEs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QXJFUDs7O0VBZ0hBLElBQUEsQ0FBQTtBQWhIQSIsInNvdXJjZXNDb250ZW50IjpbIiMgVmFyaWFibGVzXG5kZWZhdWx0VGFnID0gXCJidXN0ZXJrZWF0b25cIlxuJHBhY2tlcnkgPSBudWxsXG4jIEluc3RhZ3JhbSAocmVwbGFjZSB3aXRoIHlvdXIgY2xpZW50IGlkKSBcbmluc3RhZ3JhbUNsaWVudElkID0gXCJiNjM4ZDhhZmJjZTI0ZmQzODc0MjE3YTczZGE4ZTUzYVwiXG5pbnN0YWdyYW1UZW1wbGF0ZSA9IF8udGVtcGxhdGUoJCgnI2luc3RhZ3JhbVRlbXBsYXRlJykuaHRtbCgpKVxuIyBUdW1ibHIgKHJlcGxhY2Ugd2l0aCB5b3VyIGFwaSBrZXkpXG50dW1ibHJBcGlLZXkgPSBcIlVjUHZrNXA3aVhXT1pxZTJBaW5wVjd6UWZFZjdXSENwcVVBOHdSSmVTQVdLVXdCYXp5XCJcbnR1bWJsclRlbXBsYXRlID0gXy50ZW1wbGF0ZSgkKCcjdHVtYmxyVGVtcGxhdGUnKS5odG1sKCkpXG5cbiMgRmV0Y2ggU29jaWFsIFBvc3RzXG5mZXRjaFBvc3RzID0gKHRhZywgc2VydmljZSktPlxuICBpZiB0YWcgYW5kIHRhZyAhPSBcIlwiIGFuZCBzZXJ2aWNlXG4gICAgXG4gICAgIyBTd2l0Y2ggc2VydmljZSBlbmRwb2ludHMgYW5kIHRlbXBsYXRlc1xuICAgIHN3aXRjaCBzZXJ2aWNlIFxuICAgICAgd2hlbiBcImluc3RhZ3JhbVwiXG4gICAgICAgIGVuZHBvaW50ID0gXCJodHRwczovL2FwaS5pbnN0YWdyYW0uY29tL3YxL3RhZ3MvI3t0YWd9L21lZGlhL3JlY2VudD9jbGllbnRfaWQ9I3tpbnN0YWdyYW1DbGllbnRJZH0mY2FsbGJhY2s9P1wiXG4gICAgICAgIHRlbXBsYXRlID0gaW5zdGFncmFtVGVtcGxhdGVcbiAgICAgIHdoZW4gXCJ0dW1ibHJcIlxuICAgICAgICBlbmRwb2ludCA9IFwiaHR0cHM6Ly9hcGkudHVtYmxyLmNvbS92Mi90YWdnZWQ/dGFnPSN7dGFnfSZhcGlfa2V5PSN7dHVtYmxyQXBpS2V5fSZjYWxsYmFjaz0/XCJcbiAgICAgICAgdGVtcGxhdGUgPSB0dW1ibHJUZW1wbGF0ZVxuICAgIFxuICAgICMgR28gYW5kIGdldCBzdHVmZlxuICAgICQuYWpheFxuICAgICAgdHlwZTogJ0dFVCdcbiAgICAgIGRhdGFUeXBlOiAnanNvbnAnXG4gICAgICBjYWNoZTogZmFsc2VcbiAgICAgIHVybDogZW5kcG9pbnRcbiAgICAgIHN1Y2Nlc3M6IChyZXNwb25zZSkgLT5cbiAgICAgICAgI2NvbnNvbGUubG9nIHJlc3BvbnNlXG4gICAgICAgIHNldHVwUG9zdHMgcmVzcG9uc2UsIHRlbXBsYXRlXG5cbiMgU2V0dXAgcG9zdHMgZnJvbSByZXNwb25zZSBkYXRhIGFuZCBhcHBseSB1bmRlcnNjb3JlIHRlbXBsYXRlXG5zZXR1cFBvc3RzID0gKHBvc3RzLCB0ZW1wbGF0ZSktPlxuICAjIERvIHNvbWUgc29ydCBvZiBsb2FkaW5nIHRoaW5nXG4gICQoXCJib2R5XCIpLmFkZENsYXNzIFwibG9hZGluZ1wiXG4gIFxuICAjIENsZWFyIHBvc3QgZG9tIGZpcnN0XG4gICQoXCIucG9zdHNcIikuaHRtbChcIlwiKVxuICBcbiAgIyBBcHBseSB1bmRlcnNjb3JlIHRlbXBsYXRlXG4gICQoXCIucG9zdHNcIikuYXBwZW5kIHRlbXBsYXRlKHBvc3RzKVxuICBcbiAgIyBEZXN0cm95IGN1cnJlbnQgcGFja2VyeSBpbnN0YW5jZVxuICBpZiAkcGFja2VyeSB0aGVuICQoXCIucG9zdHNcIikucGFja2VyeSgnZGVzdHJveScpXG4gIFxuICAjIHNldCB0aW1lb3V0IGltYWdlIGxvYWQgd29ya2Fyb3VuZCBmb3IgcGFja2VyeVxuICBzZXRUaW1lb3V0IC0+XG4gICAgIyBGYWRlIHBvc3RzIGluIG9uZSBhdCBhIHRpbWVcbiAgICBkZWxheSA9IDBcbiAgICAkKCcucG9zdCcpLmVhY2ggKGluZGV4KSAtPlxuICAgICAgJCh0aGlzKS52ZWxvY2l0eShcInRyYW5zaXRpb24uc2xpZGVVcEluXCIsIHsgZGVsYXk6IGRlbGF5LCBkdXJhdGlvbjogNTAwIH0pXG4gICAgICBkZWxheSArPSA1MFxuXG4gICAgIyBub3cgcGFjayBpdCBpblxuICAgICRwYWNrZXJ5ID0gJChcIi5wb3N0c1wiKS5wYWNrZXJ5IFxuICAgICAgaXRlbVNlbGVjdG9yOiAnLnBvc3QnXG4gICAgXG4gICAgIyBSZW1vdmUgc29tZSBzb3J0IG9mIGxvYWRpbmcgdGhpbmdcbiAgICAkKFwiYm9keVwiKS5yZW1vdmVDbGFzcyBcImxvYWRpbmdcIlxuICAsIDEwMDBcblxuIyBTZWFyY2ggYSByYW5kb20gc2VydmljZVxucmFuZG9tU2VydmljZSA9ICh0YWcpLT5cbiAgIyBmZXRjaFBvc3RzKHRhZywgXy5zYW1wbGUoW1wiaW5zdGFncmFtXCIsXCJ0dW1ibHJcIl0pKVxuICBmZXRjaFBvc3RzKHRhZywgXCJ0dW1ibHJcIilcbiAgXG4jIFNldHVwIGludGVyZmFjZSwgY2xpY2sgaGFuZGxlcnMsIGV0Y1xuaW5pdCA9ICgpLT5cbiAgIyBPcGVuIE1vZGFsXG4gICQoXCJib2R5XCIpLm9uIFwiY2xpY2tcIiwgXCIucG9zdHMgLnBvc3RcIiwgKGUpLT5cbiAgICBlLnByZXZlbnREZWZhdWx0KClcbiAgICAjIFJlbW92ZSBjdXJyZW50IHBvc3RcbiAgICAkKFwiLm1vZGFsXCIpLmZpbmQoXCIuY29udGVudFwiKS5yZW1vdmUoKVxuICAgICMgQWRkIG5ldyBvbmUgYW5kXG4gICAgJHBvc3QgPSAkKHRoaXMpLmZpbmQoXCIuY29udGVudFwiKS5jbG9uZSgpLmFwcGVuZFRvKFwiLm1vZGFsIC53cmFwcGVyXCIpXG4gICAgIyBBbmltYXRlIEluXG4gICAgJChcIi5tb2RhbFwiKS52ZWxvY2l0eShcImZhZGVJblwiLCA1MDApXG4gICAgJChcIi5tb2RhbCAuYXZhdGFyXCIpLnZlbG9jaXR5KFwidHJhbnNpdGlvbi5zbGlkZURvd25JblwiLCB7IGRlbGF5OiA1MDAsIGR1cmF0aW9uOiA1MDAgfSlcbiAgICAkKFwiLm1vZGFsIC51c2VybmFtZVwiKS52ZWxvY2l0eShcInRyYW5zaXRpb24uc2xpZGVMZWZ0SW5cIiwgeyBkZWxheTogMTAwMCwgZHVyYXRpb246IDUwMCB9KVxuICAgICQoXCIubW9kYWwgLmNsb3NlXCIpLnZlbG9jaXR5KFwidHJhbnNpdGlvbi5zbGlkZVVwSW5cIiwgeyBkZWxheTogNTAwLCBkdXJhdGlvbjogNTAwIH0pXG4gICAgICBcbiAgIyBDbG9zZSBNb2RhbFxuICAkKFwiYm9keVwiKS5vbiBcImNsaWNrIHRvdWNoZW5kXCIsIFwiLm1vZGFsIC5jbG9zZVwiLCAoZSktPlxuICAgIGUucHJldmVudERlZmF1bHQoKVxuICAgICMgQW5pbWF0ZSBPdXRcbiAgICAkKFwiLm1vZGFsXCIpLnZlbG9jaXR5KFwiZmFkZU91dFwiLCA1MDApXG4gICAgJChcIi5tb2RhbCAuYXZhdGFyXCIpLnZlbG9jaXR5KFwidHJhbnNpdGlvbi5zbGlkZVVwT3V0XCIsIDUwMClcbiAgICAkKFwiLm1vZGFsIC51c2VybmFtZVwiKS52ZWxvY2l0eShcInRyYW5zaXRpb24uc2xpZGVMZWZ0T3V0XCIsIDUwMClcbiAgICAkKFwiLm1vZGFsIC5jbG9zZVwiKS52ZWxvY2l0eShcInRyYW5zaXRpb24uc2xpZGVEb3duT3V0XCIsIDUwMClcbiAgICBcbiAgIyBTdWJtaXQgYnV0dG9uc1xuICAkKFwiI2luc3RhZ3JhbVN1Ym1pdFwiKS5vbiBcImNsaWNrIHRvdWNoZW5kXCIsIChlKS0+XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgZmV0Y2hQb3N0cygkKFwiI3RhZ1wiKS52YWwoKSwgXCJpbnN0YWdyYW1cIilcblxuICAkKFwiI3R1bWJsclN1Ym1pdFwiKS5vbiBcImNsaWNrIHRvdWNoZW5kXCIsIChlKS0+XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgZmV0Y2hQb3N0cygkKFwiI3RhZ1wiKS52YWwoKSwgXCJ0dW1ibHJcIilcblxuICAjIFJhbmRvbSBzZXJ2aWNlIG9uIGVudGVyXG4gICQoXCJmb3JtXCIpLm9uIFwic3VibWl0XCIsIChlKS0+XG4gICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgcmFuZG9tU2VydmljZSgkKFwiI3RhZ1wiKS52YWwoKSwgZGVmYXVsdFRhZylcbiAgXG4gICMgRmluYWxseSBraWNrIHRoaW5ncyBvZmYgd2l0aCB0aGUgZGVmYXVsdCB0YWcgYW5kIGEgcmFuZG9tIHNlcnZpY2VcbiAgJChcIiN0YWdcIikudmFsKGRlZmF1bHRUYWcpXG4gIHJhbmRvbVNlcnZpY2UoZGVmYXVsdFRhZylcblxuXG4jIEdPVCBUSU1FXG5pbml0KClcbiJdfQ==
//# sourceURL=coffeescript

Comments