Skip to content

Instantly share code, notes, and snippets.

@teampopong
Created September 3, 2012 17:28
Show Gist options
  • Save teampopong/3611124 to your computer and use it in GitHub Desktop.
Save teampopong/3611124 to your computer and use it in GitHub Desktop.

서로 다른 stance에 서서 토론하는 것을 시각적으로 잘 표현한 댓글 시스템을 만들려는 시도.
첫 프로토타입으로 나왔으나 관심을 못 받아서 묻힘-_-;

[
{
"author": "강철",
"date": "2011.09.02 11:42",
"content": "JavaScript는 초보 개발자가 오류를 저지를 수 있는 다양한 종류의 크고 작은 함정을 지니고 있다. 이런 자바스크립트의 나쁜 특성들은 때때로 버그를 스노볼처럼 키워가며 무시무시한 결과를 가져올 수 있다."
},
{
"author": "최승준",
"date": "2011.09.03 12:45",
"content": "솔직히 코딩을 그리 수퍼 잘한다 할 수 없지만.왜 일케 코딩 이야기는 마음이 편안하고 즐거운 것일까요.하하.잼있다.오래오래 할 수 있으면 좋겠다는~ 물론 누가 그걸로 일 시키면 도망갈꺼지만!"
},
{
"author": "양정민",
"date": "2011.09.04 16:23",
"content": "@cornchz 그냥 아 이런것도 있구나 하면서 읽어봤음. 그러나 역시 잘 모르겠음"
},
{
"author": "최승준",
"date": "2011.09.04 18:20",
"content": "시간을 멈추고 윤리를 무시하고 현생 전 인류의 뇌를 1시간만 동시에 빌려서 그리드컴퓨팅으로 뭔가를 계산하거나 푼다고 하면 뭘 해야할까.이런 관점에서라면 지나가는 행인들이 유휴자원으로 보인다. ㅋㅋㅋ"
}
]
(function () {
var TMPL_COMMENT = $('#tmpl-comment').html();
d3.json('comments.json', function (comments) {
$.each(comments, function (i, comment) {
var commentHtml = Mustache.render(TMPL_COMMENT, comment);
if (!!i) {
$('#childcomments').prepend(commentHtml);
} else {
$('#maincomment').append($(commentHtml).children());
}
});
// Animation for the moment a child comment is selected.
$('#childcomments .comment:not(.newcomment)').click(function () {
// change 'position' attribute to 'absolute'
var $this = $(this),
o = $this.position();
$this.css({
'position': 'absolute',
'left': o.left,
'top': o.top
});
// hide children comments slowly
$('#childcomments .comment').not(this).slideUp();
// slowly move it to the place of the main comment
o = $('#maincomment').position();
$('#maincomment').css('visibility', 'hidden');
$(this).animate({
left: o.left,
top: o.top
}, 1000, function () {
$('#maincomment').css('visibility', '');
$(this).hide();
$(this).css({
'position': '',
'left': '',
'top': ''
});
$('#childcomments .comment').slideDown();
});
});
$('.newcomment').click(function () {
$('.cmd-newcomment').hide();
$('.writecomment').show();
});
$('.writecomment .embed').click(function () {
var $popup = $('#embedpopup');
$popup.css({
'left': (window.innerWidth - $popup.width())/2,
'top': (window.innerHeight - $popup.height())/2
}).show();
});
$('#embedpopup').click(function () {
$(this).hide();
});
});
}());
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>icomment</title>
<script type="text/javascript" src="//popong.com/static/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="//popong.com/static/js/mustache.js"></script>
<script type="text/javascript" src="//popong.com/static/js/d3.v2.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="maincomment" class="comment">
</div>
<div id="childcomments">
<div class="comment newcomment">
<div class="cmd-newcomment"><center><p>새 덧글 쓰기</p></center></div>
<div class="writecomment" style="display: none">
<textarea rows="3"></textarea>
<button type="button" class="embed">인용하기</button>
<button type="submit" class="submit">게시</button>
</div>
</div>
</div>
</div>
<div id="embedpopup" style="display: none">
<img src="readme.png" style="width: 100%; height: 100%;"/>
</div>
<script type="text/mustache" id="tmpl-comment">
<div class="comment">
<p><span class="author">{{author}}</span><span class="date">{{date}}</span></p>
<p><span class="content">{{content}}</span></p>
</div>
</script>
<script type="text/javascript" src="icomment.js"></script>
</body>
</html>
#container {
display: table;
font-size: 0.8em;
}
#maincomment,
#childcomments {
display: table-cell;
}
.comment {
/* size */
vertical-align: middle;
width: 400px;
margin-left: 20px;
padding: 0 12px 0 12px;
line-height: 150%;
/* interaction */
cursor: pointer;
/* text */
color: #2f2f4f;
/* box shape */
border: 1px solid #bbd;
border-radius: 5px;
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0.15, rgb(223,223,255)),
color-stop(0.58, rgb(241,241,255))
);
background-image: -moz-linear-gradient(
right bottom,
rgb(223,223,255) 15%,
rgb(241,241,255) 58%
);
}
.comment:hover {
/* box shape */
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0.15, rgb(209,209,255)),
color-stop(0.58, rgb(228,228,255))
);
background-image: -moz-linear-gradient(
right bottom,
rgb(213,213,255) 15%,
rgb(229,229,255) 58%
);
}
.newcomment {
border: 1px dashed #bbd;
background: #fff;
}
.newcomment:hover {
background: #eef;
}
.writecomment {
padding: 10px;
}
.writecomment textarea {
border: 1px solid #aaa;
width: 100%;
}
.writecomment .embed {
margin: 0;
}
.writecomment .submit {
margin: 0;
float: right;
}
#childcomments .comment {
margin-bottom: 10px;
}
#childcomments .comment:last-child {
margin-bottom: 0;
}
.comment .author {
font-weight: bold;
}
.comment .date {
float: right;
font-style: italic;
}
.comment .content {
}
#embedpopup {
display: table;
position: fixed;
left: 0;
top: 0;
width: 800px;
height: 500px;
cursor: pointer;
/* box shape */
border: 1px solid #ccc;
border-radius: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment