voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reorganize a bunch of javascript handlers.

Browse source 
The javascript is very inconsistent between pages. I'm trying to
start using a consistent pattern where the api call is kept in a
separate function from the ones that buttons and input boxes
talk to.
This commit is contained in:
voussoir 2018-07-29 01:25:53 -07:00
parent b314d6376f
commit f047235c48
11 changed files with 160 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontends/etiquette_flask/etiquette_flask/common.py
View file

@ -80,8 +80,8 @@ def P_album(album_id):
return P.get_album(album_id)
@P_wrapper
def P_bookmark(bookmarkid):
return P.get_bookmark(bookmarkid)
def P_bookmark(bookmark_id):
return P.get_bookmark(bookmark_id)
@P_wrapper
def P_photo(photo_id):

55
frontends/etiquette_flask/etiquette_flask/endpoints/bookmark_endpoints.py
View file

@ -12,20 +12,30 @@ session_manager = common.session_manager
# Individual bookmarks #############################################################################
@site.route('/bookmark/<bookmarkid>.json')
@site.route('/bookmarks/create_bookmark', methods=['POST'])
@decorators.catch_etiquette_exception
@decorators.required_fields(['url'], forbid_whitespace=True)
def post_bookmark_create():
url = request.form['url']
title = request.form.get('title', None)
user = session_manager.get(request).user
bookmark = common.P.new_bookmark(url=url, title=title, author=user)
response = etiquette.jsonify.bookmark(bookmark)
response = jsonify.make_json_response(response)
return response
@site.route('/bookmark/<bookmark_id>.json')
@session_manager.give_token
def get_bookmark_json(bookmarkid):
bookmark = common.P_bookmark(bookmarkid)
def get_bookmark_json(bookmark_id):
bookmark = common.P_bookmark(bookmark_id, response_type='json')
response = etiquette.jsonify.bookmark(bookmark)
return jsonify.make_json_response(response)
# Bookmark metadata operations #####################################################################
@site.route('/bookmark/<bookmarkid>/edit', methods=['POST'])
@site.route('/bookmark/<bookmark_id>/edit', methods=['POST'])
@session_manager.give_token
@decorators.catch_etiquette_exception
def post_bookmark_edit(bookmarkid):
bookmark = common.P_bookmark(bookmarkid)
def post_bookmark_edit(bookmark_id):
bookmark = common.P_bookmark(bookmark_id, response_type='json')
# Emptystring is okay for titles, but not for URL.
title = request.form.get('title', None)
url = request.form.get('url', None) or None
@ -35,6 +45,14 @@ def post_bookmark_edit(bookmarkid):
response = jsonify.make_json_response(response)
return response
@site.route('/bookmark/<bookmark_id>/delete', methods=['POST'])
@decorators.catch_etiquette_exception
def post_bookmark_delete(bookmark_id):
bookmark = common.P_bookmark(bookmark_id, response_type='json')
bookmark.delete()
return jsonify.make_json_response({})
# Bookmark listings ################################################################################
@site.route('/bookmarks')
@ -49,24 +67,3 @@ def get_bookmarks_html():
def get_bookmarks_json():
bookmarks = [etiquette.jsonify.bookmark(b) for b in common.P.get_bookmarks()]
return jsonify.make_json_response(bookmarks)
# Bookmark create and delete #######################################################################
@site.route('/bookmarks/create_bookmark', methods=['POST'])
@decorators.catch_etiquette_exception
@decorators.required_fields(['url'], forbid_whitespace=True)
def post_bookmarks_create():
url = request.form['url']
title = request.form.get('title', None)
user = session_manager.get(request).user
bookmark = common.P.new_bookmark(url=url, title=title, author=user)
response = etiquette.jsonify.bookmark(bookmark)
response = jsonify.make_json_response(response)
return response
@site.route('/bookmark/<bookmark_id>/delete', methods=['POST'])
@decorators.catch_etiquette_exception
def post_bookmark_delete(bookmark_id):
bookmark = common.P_bookmark(bookmark_id, response_type='json')
bookmark.delete()
return jsonify.make_json_response({})

11
frontends/etiquette_flask/etiquette_flask/endpoints/tag_endpoints.py
View file

@ -31,8 +31,6 @@ def get_tag_id_redirect(tag_id):
url = request.url.replace(url_from, url_to)
return flask.redirect(url)
# Tag metadata operations ##########################################################################
@site.route('/tag/<specific_tag>/edit', methods=['POST'])
@decorators.catch_etiquette_exception
def post_tag_edit(specific_tag):
@ -119,9 +117,6 @@ def get_tags_json(specific_tag_name=None):
@session_manager.give_token
@decorators.required_fields(['tagname'], forbid_whitespace=True)
def post_tag_create():
'''
Create a tag.
'''
easybake_string = request.form['tagname']
user = session_manager.get(request).user
notes = common.P.easybake(easybake_string, author=user)
@ -133,9 +128,6 @@ def post_tag_create():
@session_manager.give_token
@decorators.required_fields(['tagname'], forbid_whitespace=True)
def post_tag_delete_synonym():
'''
Delete a synonym.
'''
synonym = request.form['tagname']
synonym = synonym.split('+')[-1].split('.')[-1]
@ -154,9 +146,6 @@ def post_tag_delete_synonym():
@session_manager.give_token
@decorators.required_fields(['tagname'], forbid_whitespace=True)
def post_tag_delete():
'''
Delete a tag.
'''
tagname = request.form['tagname']
tagname = tagname.split('+')[0]
if '.' in tagname:

1
frontends/etiquette_flask/etiquette_flask/endpoints/user_endpoints.py
View file

@ -123,4 +123,3 @@ def post_register():
session = sessions.Session(request, user)
session_manager.add(session)
return jsonify.make_json_response({})

82
frontends/etiquette_flask/static/js/common.js
View file

@ -2,22 +2,6 @@ var common = {};
common.INPUT_TYPES = new Set(["INPUT", "TEXTAREA"]);
common.create_message_bubble =
function create_message_bubble(message_area, message_positivity, message_text, lifespan)
{
if (lifespan === undefined)
{
lifespan = 8000;
}
var message = document.createElement("div");
message.className = "message_bubble " + message_positivity;
var span = document.createElement("span");
span.innerHTML = message_text;
message.appendChild(span);
message_area.appendChild(message);
setTimeout(function(){message_area.removeChild(message);}, lifespan);
}
common._request =
function _request(method, url, callback)
{
@ -58,15 +42,6 @@ function post(url, data, callback)
request.send(data);
}
common.delete_all_children =
function delete_all_children(element)
{
while (element.firstChild)
{
element.removeChild(element.firstChild);
}
}
common.bind_box_to_button =
function bind_box_to_button(box, button, ctrl_enter)
{
@ -87,6 +62,31 @@ function bind_box_to_button(box, button, ctrl_enter)
box.addEventListener("keyup", bound_box_hook);
}
common.create_message_bubble =
function create_message_bubble(message_area, message_positivity, message_text, lifespan)
{
if (lifespan === undefined)
{
lifespan = 8000;
}
var message = document.createElement("div");
message.className = "message_bubble " + message_positivity;
var span = document.createElement("span");
span.innerHTML = message_text;
message.appendChild(span);
message_area.appendChild(message);
setTimeout(function(){message_area.removeChild(message);}, lifespan);
}
common.delete_all_children =
function delete_all_children(element)
{
while (element.firstChild)
{
element.removeChild(element.firstChild);
}
}
common.entry_with_history_hook =
function entry_with_history_hook(event)
{
@ -134,19 +134,6 @@ function html_to_element(html)
return template.content.firstChild;
}
common.normalize_tagname =
function normalize_tagname(tagname)
{
tagname = tagname.trim();
tagname = tagname.toLocaleLowerCase();
tagname = tagname.split(".");
tagname = tagname[tagname.length-1];
tagname = tagname.split("+")[0];
tagname = tagname.replace(new RegExp(" ", 'g'), "_");
tagname = tagname.replace(new RegExp("-", 'g'), "_");
return tagname;
}
common.init_button_with_confirm =
function init_button_with_confirm()
{
@ -231,6 +218,25 @@ function init_button_with_confirm()
}
}
common.normalize_tagname =
function normalize_tagname(tagname)
{
tagname = tagname.trim();
tagname = tagname.toLocaleLowerCase();
tagname = tagname.split(".");
tagname = tagname[tagname.length-1];
tagname = tagname.split("+")[0];
tagname = tagname.replace(new RegExp(" ", 'g'), "_");
tagname = tagname.replace(new RegExp("-", 'g'), "_");
return tagname;
}
common.refresh =
function refresh()
{
window.location.reload();
}
common.on_pageload =
function on_pageload()
{

3
frontends/etiquette_flask/templates/album.html
View file

@ -150,7 +150,7 @@ function _paste_unpaste_photo_clipboard(add_or_remove)
{
return;
}
location.reload();
common.refresh();
};
common.post(url, data, callback);
}
@ -162,6 +162,7 @@ function unpaste_photo_clipboard()
{
_paste_unpaste_photo_clipboard("remove_photo");
}
var paste_photo_clipboard_button = document.createElement("button");
paste_photo_clipboard_button.classList.add("green_button");
paste_photo_clipboard_button.innerText = "Add to this album";

33
frontends/etiquette_flask/templates/bookmarks.html
View file

@ -86,7 +86,7 @@
<div class="new_bookmark_card">
<input id="new_bookmark_title" type="text" placeholder="title (optional)">
<input id="new_bookmark_url" type="text" placeholder="url">
<button id="new_bookmark_button" class="green_button" onclick="submit_bookmark_form()">Create</button>
<button id="new_bookmark_button" class="green_button" onclick="create_bookmark_form()">Create</button>
</div>
</div>
</div>
@ -94,7 +94,19 @@
<script type="text/javascript">
function submit_bookmark_form()
function create_bookmark(url, title)
{
var api_url = "/bookmarks/create_bookmark";
var data = new FormData();
data.append("url", url);
if (title)
{
data.append("title", title);
}
common.post(api_url, data, common.refresh);
}
function create_bookmark_form()
{
var url = document.getElementById("new_bookmark_url").value.trim();
var title = document.getElementById("new_bookmark_title").value.trim();
@ -105,27 +117,12 @@ function submit_bookmark_form()
return create_bookmark(url, title);
}
function create_bookmark(url, title)
{
var api_url = "/bookmarks/create_bookmark";
var data = new FormData();
data.append("url", url);
if (title)
{
data.append("title", title);
}
var callback = function(){location.reload();};
common.post(api_url, data, callback);
}
function delete_bookmark(bookmark_id)
{
var url = `/bookmark/${bookmark_id}/delete`
var callback = function(){location.reload();};
common.post(url, null, callback);
common.post(url, null, common.refresh);
}
function on_open(ed, edit_element_map)
{
ed.open();

2
frontends/etiquette_flask/templates/clipboard.html
View file

@ -291,7 +291,7 @@ function refresh_metadata_callback(response)
}
else
{
location.reload();
common.refresh();
}
}

43
frontends/etiquette_flask/templates/login.html
View file

@ -81,14 +81,14 @@ button
<span>Log in</span>
<input type="text" id="login_input_username" name="username" placeholder="username" autofocus>
<input type="password" id="login_input_password" name="password" placeholder="password">
<button type="submit" id="login_submit_button" onclick="submit_login()">Log in</button>
<button type="submit" id="login_submit_button" onclick="login_form()">Log in</button>
</div>
<div id="register_form" action="/register" method="post">
<span>Register</span>
<input type="text" id="register_input_username" name="username" placeholder="username (at least {{min_username_length}})">
<input type="password" id="register_input_password_1" name="password_1" placeholder="password (at least {{min_password_length}})">
<input type="password" id="register_input_password_2" name="password_2" placeholder="password again">
<button type="submit" id="register_input_button" onclick="submit_register()">Register</button>
<button type="submit" id="register_input_button" onclick="register_form()">Register</button>
</div>
</div>
<div id="message_area">
@ -114,44 +114,55 @@ common.bind_box_to_button(register_input_password_2, register_input_button);
var message_area = document.getElementById("message_area");
function submit_login()
function login(username, password, callback)
{
var url = "/login";
data = new FormData();
data.append("username", username);
data.append("password", password);
return common.post(url, data, callback);
}
function login_form()
{
var username = document.getElementById("login_input_username").value;
var password = document.getElementById("login_input_password").value;
if (username == "" || password == "")
{
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.", 8000);
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.");
return;
}
var url = "/login";
return login(username, password, receive_callback)
}
function register(username, password_1, password_2, callback)
{
var url = "/register";
data = new FormData();
data.append("username", username);
data.append("password", password);
return common.post(url, data, receive_callback);
data.append("password_1", password_1);
data.append("password_2", password_2);
return common.post(url, data, callback);
}
function submit_register()
function register_form()
{
var username = document.getElementById("register_input_username").value;
var password_1 = document.getElementById("register_input_password_1").value;
var password_2 = document.getElementById("register_input_password_2").value;
if (username == "" || password_1 == "" || password_2 == "")
{
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.", 8000);
common.create_message_bubble(message_area, "message_negative", "Fill out the form, yo.");
return;
}
var url = "/register";
data = new FormData();
data.append("username", username);
data.append("password_1", password_1);
data.append("password_2", password_2);
return common.post(url, data, receive_callback);
return register(username, password_1, password_2, receive_callback);
}
function receive_callback(response)
{
response = response["data"];
if ("error_type" in response)
{
common.create_message_bubble(message_area, "message_negative", response["error_message"], 8000);
common.create_message_bubble(message_area, "message_negative", response["error_message"]);
return;
}
else
{

59
frontends/etiquette_flask/templates/photo.html
View file

@ -164,7 +164,7 @@
<ul id="this_tags">
<li>
<input id="add_tag_textbox" type="text" list="tag_autocomplete_datalist" autofocus>
<button id="add_tag_button" class="green_button" onclick="submit_tag(receive_callback);">add</button>
<button id="add_tag_button" class="green_button" onclick="add_photo_tag_form('{{photo.id}}');">add</button>
</li>
{% set tags = photo.get_tags()|sort_tags %}
{% for tag in tags %}
@ -172,7 +172,7 @@
{{tag_object.tag_object(tag, with_alt_description=True)}}<!--
--><button
class="remove_tag_button red_button"
onclick="remove_photo_tag('{{photo.id}}', '{{tag.name}}', receive_callback);">
onclick="remove_photo_tag_form('{{photo.id}}', '{{tag.name}}');">
</button>
</li>
{% endfor %}
@ -256,37 +256,49 @@
<script type="text/javascript">
var content_body = document.getElementById('content_body');
var add_tag_box = document.getElementById('add_tag_textbox');
var add_tag_button = document.getElementById('add_tag_button');
var message_area = document.getElementById('message_area');
add_tag_box.addEventListener("keyup", common.entry_with_history_hook);
common.bind_box_to_button(add_tag_box, add_tag_button, false);
photo_img_holder = document.getElementById("photo_img_holder");
photo_img = document.getElementById("photo_img");
var message_area = document.getElementById('message_area');
function add_photo_tag(photoid, tagname, callback)
function add_photo_tag(photo_id, tagname, callback)
{
if (tagname === ""){return}
var url = "/photo/" + photoid + "/add_tag";
var url = `/photo/${photoid}/add_tag`;
var data = new FormData();
data.append("tagname", tagname);
return common.post(url, data, callback);
}
function add_photo_tag_form(photo_id)
{
var tagname = document.getElementById("add_tag_textbox").value;
if (tagname == "")
{
return;
}
var ret = add_photo_tag('{{photo.id}}', tagname, receive_callback);
add_tag_box.value = "";
return ret;
}
function remove_photo_tag(photoid, tagname, callback)
{
if (tagname === ""){return}
var url = "/photo/" + photoid + "/remove_tag";
var data = new FormData();
data.append("tagname", tagname);
return common.post(url, data, callback);
}
function submit_tag(callback)
function remove_photo_tag_form(photo_id, tagname)
{
add_photo_tag('{{photo.id}}', add_tag_box.value, callback);
add_tag_box.value = "";
var tagname = document.getElementById("add_tag_textbox").value;
if (tagname == "")
{
return;
}
return remove_photo_tag(photo_id, tagname, receive_callback);
}
function receive_callback(response)
{
var message_text;
@ -317,20 +329,19 @@ function receive_callback(response)
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
}
function refresh_metadata(photoid)
function refresh_metadata(photo_id)
{
var url= "/photo/" + photoid + "/refresh_metadata";
var url= `/photo/${photo_id}/refresh_metadata`;
var data = new FormData();
var callback = function(){location.reload();};
common.post(url, data, callback);
common.post(url, data, common.refresh);
}
var ZOOM_BG_URL = "url('{{photo|file_link}}')";
function enable_hoverzoom(event)
{
//console.log("enable zoom");
photo_img_holder = document.getElementById("photo_img_holder");
photo_img = document.getElementById("photo_img");
var photo_img_holder = document.getElementById("photo_img_holder");
var photo_img = document.getElementById("photo_img");
if (
photo_img.naturalWidth < photo_img_holder.offsetWidth &&
photo_img.naturalHeight < photo_img_holder.offsetHeight
@ -344,21 +355,23 @@ function enable_hoverzoom(event)
photo_img_holder.style.backgroundImage = ZOOM_BG_URL;
photo_img_holder.onmousemove = move_hoverzoom;
move_hoverzoom(event)
//setTimeout(function(){img_holder.onclick = toggle_hoverzoom;}, 100);
return true;
}
function disable_hoverzoom()
{
//console.log("disable zoom");
var photo_img_holder = document.getElementById("photo_img_holder");
var photo_img = document.getElementById("photo_img");
photo_img.style.opacity = "100";
photo_img_holder.style.cursor = "";
photo_img.style.display = "";
photo_img_holder.style.backgroundImage = "none";
photo_img_holder.onmousemove = null;
//photo_img_holder.onclick = null;
}
function toggle_hoverzoom(event)
{
var photo_img = document.getElementById("photo_img");
if (photo_img.style.opacity === "0")
{
disable_hoverzoom();
@ -367,6 +380,7 @@ function toggle_hoverzoom(event)
{
enable_hoverzoom(event);
}
var content_body = document.getElementById('content_body');
if (getComputedStyle(content_body).flexDirection != "column-reverse")
{
add_tag_box.focus();
@ -375,6 +389,8 @@ function toggle_hoverzoom(event)
function move_hoverzoom(event)
{
var photo_img_holder = document.getElementById("photo_img_holder");
var photo_img = document.getElementById("photo_img");
var x;
var y;
@ -394,7 +410,6 @@ function move_hoverzoom(event)
mouse_x -= photo_img_holder.offsetLeft;
mouse_y -= photo_img_holder.offsetTop;
}
//console.log(mouse_x);
/*
Adding 5% to perceived position gives us a bit of padding around the image,

7
frontends/etiquette_flask/templates/root.html
View file

@ -33,12 +33,17 @@ body, .nice_link
{
background-color: #ffffd4;
}
#motd
{
width: 50%;
text-align: center;
}
</style>
</head>
<body>
<span>{{motd}}</span>
<span id="motd">{{motd}}</span>
<a class="nice_link" href="/search">Search</a>
<a class="nice_link" href="/tags">Browse tags</a>
<a class="nice_link" href="/albums">Browse albums</a>