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
}
}