Reorganize a bunch of javascript handlers.

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.

frontends/etiquette_flask/etiquette_flask/common.py

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

frontends/etiquette_flask/etiquette_flask/endpoints/bookmark_endpoints.py

@@ -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):
+def get_bookmark_json(bookmark_id):
-    bookmark = common.P_bookmark(bookmarkid)
+    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/<bookmark_id>/edit', methods=['POST'])
-
-@site.route('/bookmark/<bookmarkid>/edit', methods=['POST'])
 @session_manager.give_token
 @decorators.catch_etiquette_exception
-def post_bookmark_edit(bookmarkid):
+def post_bookmark_edit(bookmark_id):
-    bookmark = common.P_bookmark(bookmarkid)
+    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({})

frontends/etiquette_flask/etiquette_flask/endpoints/tag_endpoints.py

@@ -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:

frontends/etiquette_flask/etiquette_flask/endpoints/user_endpoints.py

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

frontends/etiquette_flask/static/js/common.js

@@ -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()
 {

frontends/etiquette_flask/templates/album.html

@@ -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";

frontends/etiquette_flask/templates/bookmarks.html

@@ -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, common.refresh);
-    common.post(url, null, callback);
 }
 
-
 function on_open(ed, edit_element_map)
 {
     ed.open();

frontends/etiquette_flask/templates/clipboard.html

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

frontends/etiquette_flask/templates/login.html

@@ -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);
+    data.append("password_1", password_1);
-    return common.post(url, data, receive_callback);
+    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";
+    return register(username, password_1, password_2, receive_callback);
-    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);
 }
+
 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
     {

frontends/etiquette_flask/templates/photo.html

@@ -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");
+var message_area = document.getElementById('message_area');
-photo_img = document.getElementById("photo_img");
 
-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);
+    var tagname = document.getElementById("add_tag_textbox").value;
-    add_tag_box.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, common.refresh);
-    common.post(url, data, callback);
 }
 
 var ZOOM_BG_URL = "url('{{photo|file_link}}')";
 function enable_hoverzoom(event)
 {
     //console.log("enable zoom");
-    photo_img_holder = document.getElementById("photo_img_holder");
+    var photo_img_holder = document.getElementById("photo_img_holder");
-    photo_img = document.getElementById("photo_img");
+    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,

frontends/etiquette_flask/templates/root.html

@@ -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>