Skip to content

Commit 2efdbe8

Browse files
dittosdittos
committed
Integrate flags into navbar
1 parent b08de99 commit 2efdbe8

File tree

4 files changed

+54
-60
lines changed

4 files changed

+54
-60
lines changed

‎logviewer/static/flag.js

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,55 @@
1-
var flag_mode = false;
21
var flags = [];
3-
function toggle_flag_mode(mode) {
4-
flag_mode = !flag_mode;
5-
if (flag_mode) {
6-
$('.time a').addClass('flaggable').click(function () {
7-
var time = $(this).text();
8-
var line = $(this).closest('tr').attr('id').substring(4);
9-
var title = prompt('Enter flag title');
10-
if (title != null)
11-
$.post(location.pathname + '/' + line + '/flags', {time: time, title: title},
12-
function(id) {
13-
add_flag({line: line, time: time, title: title, id: id, user: nickname});
14-
});
15-
});
16-
} else {
17-
$('.time a').removeClass('flaggable').unbind('click');
18-
}
19-
20-
var btn = $('#toggle-flag-mode');
21-
var desc = $('#flag-mode-desc');
22-
if (!flag_mode) {
23-
btn.text('깃발 꽂기');
24-
desc.hide();
25-
} else {
26-
btn.text('깃발 그만 꽂기');
27-
desc.show();
28-
}
29-
}
302
function add_flag(item) {
313
flags.push(item);
324
flags.sort(function(a, b) { return parseInt(a.line) - parseInt(b.line); });
335
redraw_flags();
346
}
357
function redraw_flags() {
36-
$('#flags ul').html('');
8+
$('#flags').html('');
379
if (flags.length > 0)
3810
$.each(flags, function (i, item) {
39-
$('#flags ul').append('<li>' + item.time + ' <a href="' + location.pathname + '#line' + item.line + '">' + item.title + '</a></li>');
11+
$('#flags').append('<li><a href="' + location.pathname + '#line' + item.line + '"><span class="time">' + item.time + '</span> ' + item.title + '</a></li>');
4012
});
41-
else
42-
$('#flags ul').html('<li>아직 깃발이 하나도 없네요.</li>');
13+
$('#flags').append('<li id="add-flag-link"><a href="#">깃발 추가...</a></li>');
4314
}
4415
function refresh_flags() {
4516
$.getJSON(location.pathname + '/flags', function (data) {
4617
flags = data;
4718
redraw_flags();
4819
});
4920
}
50-
$(function() {
51-
$('#toggle-flag-mode').click(function () {
52-
toggle_flag_mode();
53-
return false;
21+
22+
var inFlagMode = false;
23+
function beginFlagMode() {
24+
if (inFlagMode) return;
25+
inFlagMode = true;
26+
$('#flag-mode-desc').fadeIn('fast');
27+
$('.time a').addClass('flaggable');
28+
$('#content').on('click', '.time a', function() {
29+
var time = $(this).text();
30+
var line = $(this).closest('tr').attr('id').substring(4);
31+
var title = prompt('Enter flag title');
32+
if (title)
33+
$.post(location.pathname + '/' + line + '/flags', {time: time, title: title},
34+
function(id) {
35+
add_flag({line: line, time: time, title: title, id: id, user: window.NICKNAME});
36+
alert('추가됨');
37+
});
38+
return false;
5439
});
55-
$('#refresh-flags').click(function () {
56-
refresh_flags();
57-
return false;
40+
}
41+
function endFlagMode() {
42+
if (!inFlagMode) return;
43+
inFlagMode = false;
44+
$('#flag-mode-desc').fadeOut('fast');
45+
$('.time a').removeClass('flaggable');
46+
$('#content').off('click', '.time a');
47+
}
48+
$(function() {
49+
$('#flags').on('click', '#add-flag-link', function() {
50+
beginFlagMode();
51+
$('#flags').dropdown('toggle'); // hide dropdown
52+
return false;
5853
});
5954
refresh_flags();
6055
});

‎logviewer/static/style.css

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,14 @@
3030
padding-top: 50px;
3131
}
3232

33-
#flags { position: fixed; right: 0; bottom: 0; margin: 10px; background-color: #fff; width: 280px; padding: 10px; border: 1px solid #000; opacity: 0.4; z-index: 10; }
34-
#flags h3 { margin-top: 0; }
35-
#flags:hover { opacity: 1; }
36-
#flags ul { margin: 0; padding: 0; list-style: none; }
37-
#toggle-flag-mode { margin-top: 1em; }
33+
#flag-mode-desc {
34+
position: fixed;
35+
top: 100px;
36+
left: 50%;
37+
width: 360px;
38+
margin-left: -180px; /* 360 * 0.5 */
39+
text-align: center;
40+
}
3841
a.flaggable { font-weight: bold; color: #7a0; }
3942

4043
table { border-collapse: collapse; margin-bottom: 0; width: 100%; }

‎logviewer/templates/base.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8" />
66
<title>#langdev log: {% block title %}{% endblock %}</title>
77
<meta name="viewport" content="width=device-width">
8-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
99
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
1010
</head>
1111
<body>
@@ -29,7 +29,7 @@
2929
{% endblock %}
3030
<a name="bottom"></a>
3131
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
32-
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
32+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
3333
<script type="text/javascript" src="{{ url_for('static', filename='socket.io/socket.io.min.js') }}"></script>
3434
<script type="text/javascript">
3535
function apply_noreferrer(element) {

‎logviewer/templates/log.html

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
</ul>
1515
</li>
1616
<li class="navbar-text date">{{ log.date }}</li>
17+
<li class="dropdown">
18+
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-flag"></i> 깃발 <b class="caret"></b></a>
19+
<ul class="dropdown-menu" id="flags"></ul>
20+
</li>
1721
<li><a href="#bottom"><i class="glyphicon glyphicon-arrow-down"></i> 맨 아래로</a></li>
1822
<li><a href="http://links.langdev.org/{{ log.date.strftime('%Y/%m/%d') }}"><i class="glyphicon glyphicon-link"></i> 링크 모아보기</a></li>
1923
</ul>
@@ -31,15 +35,6 @@
3135
</ul>
3236
</div>
3337

34-
<div id="flags">
35-
<h3>건너뛰기</h3>
36-
<ul></ul>
37-
38-
<button id="refresh-flags">새로고침</button>
39-
<button id="toggle-flag-mode">깃발 꽂기</button>
40-
<p id="flag-mode-desc" style="display: none">깃발을 꽂기 원하는 줄의 시간 링크를 누르세요.</p>
41-
</div>
42-
4338
<div id="content" class="with-navbar-log">
4439
{% if options.recent %}
4540
<div class="alert alert-info">
@@ -49,6 +44,11 @@ <h3>건너뛰기</h3>
4944
</div>
5045
{% endif %}
5146

47+
<div id="flag-mode-desc" class="alert alert-warning" style="display: none">
48+
깃발을 꽂기 원하는 줄의 시간 링크를 누르세요.
49+
<a href="#" onclick="endFlagMode();return false" class="btn btn-default btn-sm">취소</a>
50+
</div>
51+
5252
{% from 'macros.html' import message_rows %}
5353
<table>
5454
{% for group in messages %}
@@ -79,6 +79,7 @@ <h3>건너뛰기</h3>
7979
{% endblock %}
8080

8181
{% block js %}
82+
<script>window.NICKNAME = '{{ username }}';</script>
8283
{% if log.is_today %}
8384
<script type="text/javascript" src="{{ url_for('static', filename='chat.js') }}"></script>
8485
<script>
@@ -100,11 +101,6 @@ <h3>건너뛰기</h3>
100101
});
101102
</script>
102103
{% endif %}
103-
<script type="text/javascript">
104-
if ($.fn.dropdown) {
105-
$('#navbar > hgroup > h1').addClass('dropdown-target').css('margin-left', '-4px');
106-
}
107-
</script>
108104
<script type="text/javascript" src="{{ url_for('static', filename='flag.js') }}"></script>
109105
<script type="text/javascript" src="{{ url_for('static', filename='highlight.js') }}"></script>
110106
{% endblock %}

0 commit comments

Comments
 (0)