teampopong/README.md

## README.md

      
    Raw
  

              README.md
            
          
    서로 다른 stance에 서서 토론하는 것을 시각적으로 잘 표현한 댓글 시스템을 만들려는 시도.

첫 프로토타입으로 나왔으나 관심을 못 받아서 묻힘-_-;

  
## readme.png

      
    Raw
  

              readme.png
            
          
## comments.json
[
    {
        "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시간만 동시에 빌려서 그리드컴퓨팅으로 뭔가를 계산하거나 푼다고 하면 뭘 해야할까.이런 관점에서라면 지나가는 행인들이 유휴자원으로 보인다. ㅋㅋㅋ"
    }
]

## icomment.js
(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();
    });
});

}());

## index.html
<!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>

## style.css
#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;
}
	[
	{
	"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;
	}