session remembers header hidden state

This commit is contained in:
iou1name 2018-06-20 22:21:22 -04:00
parent 311b4723ea
commit 1529c77084
4 changed files with 59 additions and 42 deletions

View File

@ -59,6 +59,6 @@ def new_post(data):
post = bleach.clean(post.strip()) post = bleach.clean(post.strip())
post = post.replace("\n", "<br />") post = post.replace("\n", "<br />")
data["post"] = [post] data["post"] = [post]
db.insert_quest_post(int(room), post, int(time.time())) db.insert_quest_post(room, post, int(time.time()))
emit("new_post", data, room=room) emit("new_post", data, room=room)

View File

@ -5,25 +5,29 @@
<link rel="stylesheet" type="text/css" href="/static/anonkun.css"> <link rel="stylesheet" type="text/css" href="/static/anonkun.css">
<script> <script>
function toggleHeader() { function toggleHeader() {
var xhr = new XMLHttpRequest();
if (document.getElementById('header').style.display == 'initial') { if (document.getElementById('header').style.display == 'initial') {
document.getElementById('header').style.display = 'none'; document.getElementById('header').style.display = 'none';
document.getElementById('headerHidden').style.display = 'initial'; document.getElementById('headerHidden').style.display = 'initial';
xhr.open('GET', '{{ url_for("views.set_session", hide_header="on") }}', true);
} }
else { else {
document.getElementById('header').style.display = 'initial'; document.getElementById('header').style.display = 'initial';
document.getElementById('headerHidden').style.display = 'none'; document.getElementById('headerHidden').style.display = 'none';
xhr.open('GET', '{{ url_for("views.set_session", hide_header="off") }}', true);
} }
xhr.send();
} }
</script> </script>
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body> <body>
<ul id="header" class="header" style="display:initial;"> <ul id="header" class="header" style="{% if session.get("hide_header") == True %}display:none;{% else %}display:initial;{% endif %}">
<li><a onclick="toggleHeader();" href="javascript:void(0);">^</a></li> <li><a onclick="toggleHeader();" href="javascript:void(0);">^</a></li>
<li><a href="{{ url_for('views.index') }}">Home</a></li> <li><a href="{{ url_for('views.index') }}">Home</a></li>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</ul> </ul>
<ul id="headerHidden" class="header" style="display:none;"> <ul id="headerHidden" class="header" style="{% if session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}">
<li><a onclick="toggleHeader();" href="javascript:void(0);">^</a></li> <li><a onclick="toggleHeader();" href="javascript:void(0);">^</a></li>
</ul> </ul>
<div id="content">{% block content %}{% endblock %} </div> <div id="content">{% block content %}{% endblock %} </div>

View File

@ -3,48 +3,48 @@
{% block head %} {% block head %}
<script type="text/javascript" src="/static/socket.io.slim.js"></script> <script type="text/javascript" src="/static/socket.io.slim.js"></script>
<script> <script>
var socket; var socket;
var tid = setInterval( function () { var tid = setInterval( function () {
if ( document.readyState !== 'complete' ) return; if ( document.readyState !== 'complete' ) return;
clearInterval( tid ); clearInterval( tid );
socket = io.connect('https://' + document.domain + ':' + location.port);
socket.on('connect', function() {
socket.emit('joined', {room: {{ room_id }}});
});
socket.on('message', function(data) {
date = new Date(data.date * 1000);
date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
socket = io.connect('https://' + document.domain + ':' + location.port); msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> ';
socket.on('connect', function() { msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n';
socket.emit('joined', {room: '{{ room_id }}' }); msg_str += '<div class="message">' + data.message + '</div>\n';
});
socket.on('message', function(data) {
date = new Date(data.date * 1000);
date_str = date.getFullYear() + '-' + padToTwo(date.getMonth()+1) + '-' + padToTwo(date.getDate()) + ' ';
date_str += padToTwo(date.getHours()) + ':' + padToTwo(date.getMinutes()) + ':' + padToTwo(date.getSeconds());
msg_str = '<div class="messageHeader">\n<span class="messageName">' + data.name + '</span> '; mbox = document.getElementById('chatWindow');
msg_str += '<span class="messageDate">' + date_str + '</span>\n</div>\n'; mbox.innerHTML = mbox.innerHTML + msg_str;
msg_str += '<div class="message">' + data.message + '</div>\n'; mbox.scrollTop = mbox.scrollHeight;
});
mbox = document.getElementById('chatWindow'); socket.on('new_post', function(data) {
mbox.innerHTML = mbox.innerHTML + msg_str; qposts = document.getElementById('questPosts');
mbox.scrollTop = mbox.scrollHeight; qposts.innerHTML = qposts.innerHTML + '<div class="questPost">' + data.post + '</div>';
}); });
socket.on('new_post', function(data) { mtarea = document.getElementById('messageTextArea');
qposts = document.getElementById('questPosts'); mtarea.addEventListener('keypress', function(event) {
qposts.innerHTML = qposts.innerHTML + '<div class="questPost">' + data.post + '</div>'; if (event.key == 'Enter' && !event.shiftKey) {
}); text = mtarea.value.trim();
mtarea = document.getElementById('messageTextArea'); mtarea.value = '';
mtarea.addEventListener('keypress', function(event) { if (text == '') { return; }
if (event.key == 'Enter' && !event.shiftKey) { socket.emit('message', {message: text, name: 'Anonymous', room: {{ room_id }}});
text = mtarea.value.trim(); }
mtarea.value = ''; });
if (text == '') { return; } }, 100 );
socket.emit('message', {message: text, name: 'Anonymous', room: '{{ room_id }}'});
}
});
}, 100 );
</script> </script>
<script> <script>
function padToTwo(number) { function padToTwo(number) {
if (number<=99) { number = ("0"+number).slice(-2); } if (number<=99) { number = ("0"+number).slice(-2); }
return number; return number;
} }
</script> </script>
{% if session.get("user_id") == owner_id %} {% if session.get("user_id") == owner_id %}
<script> <script>
@ -53,7 +53,7 @@
text = qparea.value.trim(); text = qparea.value.trim();
qparea.value = ''; qparea.value = '';
if (text == '') { return; } if (text == '') { return; }
socket.emit('new_post', {post: text, room: '{{ room_id }}'}); socket.emit('new_post', {post: text, room: {{ room_id }}});
} }
</script> </script>
{% endif %} {% endif %}

View File

@ -103,6 +103,19 @@ def edit_quest():
return "lol" return "lol"
@views.route("/set_session")
def set_session():
"""
Allows certain session values to be set by the client.
"""
hide_header = request.args.get("hide_header")
if hide_header == "on":
session["hide_header"] = True
elif hide_header == "off":
session["hide_header"] = False
return ""
@views.route("/login", methods=["GET", "POST"]) @views.route("/login", methods=["GET", "POST"])
def login(): def login():
""" """