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

Keep editor open until response. New Submitting... text.

Browse source
This commit is contained in:
voussoir 2017-05-05 21:17:13 -07:00
parent e5d22e766a
commit 19a9aee4fe
1 changed files with 59 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,11 +57,12 @@ p
<p id="description_text">{{album.description}}</p> <p id="description_text">{{album.description}}</p>
<div id="description_editor" class="hidden"> <div id="description_editor" class="hidden">
<textarea id="description_editor_box" placeholder="description">{{album.description}}</textarea> <textarea id="description_editor_box" placeholder="description">{{album.description}}</textarea>
<span> <span>
<button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button> <button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button>
<button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button> <button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button>
</span> </span>
<span id="edit_submitting_spinner">Submitting...</span>
</div> </div>
{% set viewparam = "?view=list" if view == "list" else "" %} {% set viewparam = "?view=list" if view == "list" else "" %}
@ -127,10 +128,11 @@ var title_editor = document.getElementById("title_editor");
var description_text = document.getElementById("description_text"); var description_text = document.getElementById("description_text");
var description_editor = document.getElementById("description_editor"); var description_editor = document.getElementById("description_editor");
var description_editor_box = document.getElementById("description_editor_box"); var description_editor_box = document.getElementById("description_editor_box");
var edit_submitting_spinner = document.getElementById("edit_submitting_spinner");
bind_box_to_button(title_editor, save_button); bind_box_to_button(title_editor, save_button);
var title_is_blank = "{{album.title}}" === ""; var title_is_blank = {{ (album.title == '')|int }};
var blank_title_text = "Album {{album.id}}"; var blank_title_text = "Album {{album.id}}";
function submit_tag(callback) function submit_tag(callback)
@ -139,14 +141,37 @@ function submit_tag(callback)
add_tag_box.value = ""; add_tag_box.value = "";
} }
function start_editing() function show_editor()
{ {
edit_button.classList.add("hidden"); edit_button.classList.add("hidden");
edit_submitting_spinner.classList.add("hidden");
title_text.classList.add("hidden"); title_text.classList.add("hidden");
title_editor.classList.remove("hidden"); title_editor.classList.remove("hidden");
description_text.classList.add("hidden"); description_text.classList.add("hidden");
description_editor.classList.remove("hidden"); description_editor.classList.remove("hidden");
}
function show_spinner()
{
edit_submitting_spinner.classList.remove("hidden");
}
function hide_editor()
{
edit_button.classList.remove("hidden");
edit_submitting_spinner.classList.add("hidden");
title_text.classList.remove("hidden");
title_editor.classList.add("hidden");
description_text.classList.remove("hidden");
description_editor.classList.add("hidden");
}
function start_editing()
{
if (title_is_blank) if (title_is_blank)
{ {
title_editor.value = ""; title_editor.value = "";
@ -155,6 +180,7 @@ function start_editing()
{ {
title_editor.value = title_text.innerText; title_editor.value = title_text.innerText;
} }
show_editor();
title_editor.focus(); title_editor.focus();
description_editor_box.value = description_text.innerText; description_editor_box.value = description_text.innerText;
} }
@ -163,10 +189,30 @@ function finish_editing(do_save)
{ {
if (do_save === true) if (do_save === true)
{ {
console.log("save");
var title = title_editor.value; var title = title_editor.value;
var description = description_editor_box.value; var description = description_editor_box.value;
if (title === "")
var url = "/album/{{album.id}}/edit";
var data = new FormData();
data.append("title", title);
data.append("description", description);
show_spinner();
post(url, data, callback_edit);
}
else
{
}
}
function callback_edit(response)
{
console.log(response);
if (response["_status"] == 200)
{
if (response["title"] === "")
{ {
document.title = "Album {{album.id}}"; document.title = "Album {{album.id}}";
title_text.innerText = blank_title_text; title_text.innerText = blank_title_text;
@ -174,24 +220,13 @@ function finish_editing(do_save)
} }
else else
{ {
document.title = "Album " + title; document.title = "Album " + response["title"];
title_text.innerText = title; title_text.innerText = response["title"];
title_is_blank = false; title_is_blank = false;
} }
description_text.innerText = description; description_text.innerText = response["description"];
hide_editor();
var url = "/album/{{album.id}}/edit";
var data = new FormData();
data.append("title", title);
data.append("description", description);
callback = function(){};
post(url, data, callback);
} }
edit_button.classList.remove("hidden");
title_text.classList.remove("hidden");
title_editor.classList.add("hidden");
description_text.classList.remove("hidden");
description_editor.classList.add("hidden");
} }
</script> </script>
</html> </html>