“NY Times” comment drawer

View Demo

Source

index.html


<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Comment drawer (Click comments link)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">
    <link rel="stylesheet" href="drawer.css">
  </head>

  <body>

    <div id="content">
      <a class="comment-count"><span></span> comments</a>
      <h1>This is a title</h1>
      <p>Pour-over typewriter kale chips fanny pack.  Meggings ennui McSweeney's Marfa.  Fingerstache church-key pour-over cronut, tousled sartorial whatever fanny pack drinking vinegar plaid authentic.  Roof party you probably haven't heard of them distillery, locavore bicycle rights narwhal 3 wolf moon DIY mumblecore Austin small batch chia next level.  Letterpress you probably haven't heard of them polaroid leggings Vice iPhone street art, meggings fixie.  Blog kale chips try-hard cred mumblecore.  Craft beer pork belly freegan, bicycle rights artisan seitan lomo chillwave listicle keytar.</p>
      <h2>A subtitle</h2>
      <p>Tumblr salvia pop-up selfies shabby chic, chambray migas Schlitz 90's mixtape Carles vinyl cornhole Marfa.  DIY mixtape selvage Pitchfork fanny pack.  Pitchfork selfies Austin fanny pack, Godard bicycle rights crucifix actually.  Fixie lo-fi typewriter jean shorts tofu.  Flexitarian vegan fashion axe roof party, chambray ugh twee Pitchfork.  Meggings slow-carb farm-to-table +1, freegan wayfarers YOLO trust fund.  Hashtag farm-to-table plaid pork belly, gastropub Wes Anderson heirloom messenger bag keffiyeh +1.</p>
      <p>Marfa freegan food truck, art party Pinterest post-ironic plaid tilde brunch.  Craft beer sartorial chia trust fund, try-hard plaid High Life quinoa mlkshk.  You probably haven't heard of them Brooklyn asymmetrical, ennui butcher cray bespoke.  Chambray McSweeney's vegan, 8-bit organic Blue Bottle seitan Williamsburg Odd Future vinyl XOXO polaroid Carles authentic.  Biodiesel church-key pug try-hard Carles 3 wolf moon.  Flannel typewriter forage slow-carb.  Meditation taxidermy Shoreditch Helvetica, bicycle rights farm-to-table freegan synth aesthetic +1.</p>
      <p>Banjo food truck Intelligentsia synth leggings Pinterest.  Synth meditation blog, Truffaut lomo you probably haven't heard of them viral.  Squid trust fund pork belly leggings, put a bird on it photo booth tattooed swag stumptown Godard tousled Shoreditch food truck.  Taxidermy meggings bespoke, mumblecore synth irony retro pork belly tote bag paleo.  Slow-carb tousled DIY synth listicle.  Keytar Vice Helvetica ethical four dollar toast, gluten-free whatever Bushwick.  Godard retro single-origin coffee cronut messenger bag.</p>

      <p>
        <a class="comment-count"><span></span> comments</a>
      </p>
    </div>

    <div id="drawer">
      <a class="comment-close"></a>
      <a class="muut" href="https://muut.com/i/playground/comments"
        data-show_title="false">Comments</a>
    </div>

    <script src="https://muut.com/common/js/jquery-1.11.2.min.js"></script>
    <script src="https://cdn.muut.com/1/moot.min.js"></script>
    <script src="drawer.js"></script>

  </body>

</html>

drawer.js


// show & hide
$('.comment-count, .comment-close').click(function() {
  $('body').toggleClass('with-comments')
})

// esc key closes
$(document).keyup(function(e) {
  if (e.which == 27) $('body').removeClass('with-comments')
})

// comment count
$(function() {
  var app = muut(),
      $counter = $('.comment-count'),
      $count = $('span', $counter),
      comment_count = 0,
      timer

  app.one('load', function(page) {

    $.each(page, function(i, thread) {
      comment_count += thread.reply_count + 1

      // user is typing...
      thread.on('type', function() {
        $counter.addClass('typing')
        clearTimeout(timer)
        timer = setTimeout(function() {
          $counter.removeClass('typing')
        }, 1000)
      })

    })

    $count.text(comment_count).parent().show()

    app.on('post', function(post, from_channel) {
      $count.text(++comment_count)
      $counter.addClass('added')
      setTimeout(function() { $counter.removeClass('added') }, 100)
    })

  })

})

drawer.css

body {
  font-size: 140%;
  text-align: center;
  font-family: garamond;
  -moz-transition: background-color .3s .1s;
  -webkit-transition: background-color .3s .1s;
  transition: background-color .3s .1s
}
#content {
  margin: 5em auto;
  max-width: 660px;
  text-align: left;
  line-height: 1.5;
  position: relative;
  top: 0;
  left: 0;
  -moz-transition: left .3s .1s;
  -webkit-transition: left .3s .1s;
  transition: left .3s .1s;
  padding: 0 0.6em 10em
}
.comment-count {
  color: #777;
  float: right;
  position: relative;
  top: 0.9em;
  left: -0.9em;
  display: none;
  cursor: pointer;
  -moz-transition: -moz-transform .2s;
  -webkit-transition: -webkit-transform .2s;
  transition: transform .2s
}
.comment-count:hover {
  color: #333
}
.comment-count:before {
  font-family: icon;
  content: "R";
  margin-right: .3em
}
.comment-count.typing:after {
  position: absolute;
  font-family: icon;
  font-size: 80%;
  color: #4bbd00;
  margin: .2em 0 0 .4em;
  content: "i"
}
.comment-count.added {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}
#drawer {
  width: 30em;
  position: fixed;
  top: 0;
  right: -35em;
  background-color: #fff;
  font-size: 80%;
  text-align: left;
  padding: 2.4em;
  font-family: arvo;
  overflow: auto;
  height: 100%;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
}
#drawer .comment-close {
  position: fixed;
  top: -3.5em;
  right: 32em;
  font-family: black3;
  padding: 0.6em;
  cursor: pointer;
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -moz-transition: top .3s .3s, opacity .3s;
  -webkit-transition: top .3s .3s, opacity .3s;
  transition: top .3s .3s, opacity .3s
}
#drawer .comment-close:hover {
  color: #262626
}
#drawer .comment-close:before {
  font-family: icon;
  content: "x";
  margin-right: .3em;
  font-size: 120%
}
body.with-comments {
  background-color: #eee
}
body.with-comments #drawer {
  right: 0;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=1)
}
body.with-comments #drawer .comment-close {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=1);
  top: 0
}
body.with-comments #content {
  left: -14em
}
@media (max-width: 700px) {
  .with-comments {
    overflow: hidden
  }
  #drawer {
    font-size: 70%;
    width: 22em
  }
  #drawer .comment-close {
    box-shadow: none;
    right: 24.2em
  }
}

View Demo