tobias/radicale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Web: Use class "hidden" instead of overwriting style

Browse Source
This commit is contained in:
Unrud 2020-01-16 03:58:30 +01:00
parent 1e27581afd
commit d7c7d694e0
2 changed files with 47 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
radicale/web/internal_data/fn.js
View File

@ -506,7 +506,7 @@ function LoginScene() {
if (user) { if (user) {
error = ""; error = "";
// setup logout // setup logout
logout_view.style.display = "block"; logout_view.classList.remove("hidden");
logout_btn.onclick = onlogout; logout_btn.onclick = onlogout;
logout_user_form.textContent = user; logout_user_form.textContent = user;
// Fetch principal // Fetch principal
@ -560,7 +560,7 @@ function LoginScene() {
} }
function remove_logout() { function remove_logout() {
logout_view.style.display = "none"; logout_view.classList.add("hidden");
logout_btn.onclick = null; logout_btn.onclick = null;
logout_user_form.textContent = ""; logout_user_form.textContent = "";
} }
@ -569,7 +569,7 @@ function LoginScene() {
remove_logout(); remove_logout();
fill_form(); fill_form();
form.onsubmit = onlogin; form.onsubmit = onlogin;
html_scene.style.display = "block"; html_scene.classList.remove("hidden");
let direct_login = false; let direct_login = false;
if (typeof(sessionStorage) !== "undefined") { if (typeof(sessionStorage) !== "undefined") {
// Try direct login when scene is shown for the first time and credentials are stored // Try direct login when scene is shown for the first time and credentials are stored
@ -591,7 +591,7 @@ function LoginScene() {
}; };
this.hide = function() { this.hide = function() {
read_form(); read_form();
html_scene.style.display = "none"; html_scene.classList.add("hidden");
form.onsubmit = null; form.onsubmit = null;
}; };
this.release = function() { this.release = function() {
@ -612,10 +612,10 @@ function LoginScene() {
function LoadingScene() { function LoadingScene() {
let html_scene = document.getElementById("loadingscene"); let html_scene = document.getElementById("loadingscene");
this.show = function() { this.show = function() {
html_scene.style.display = "block"; html_scene.classList.remove("hidden");
}; };
this.hide = function() { this.hide = function() {
html_scene.style.display = "none"; html_scene.classList.add("hidden");
}; };
this.release = function() {}; this.release = function() {};
} }
@ -636,7 +636,6 @@ function CollectionsScene(user, password, collection, onerror) {
let upload_btn = html_scene.querySelector("[name=upload]"); let upload_btn = html_scene.querySelector("[name=upload]");
/** @type {?number} */ let scene_index = null; /** @type {?number} */ let scene_index = null;
let saved_template_display = null;
/** @type {?XMLHttpRequest} */ let collections_req = null; /** @type {?XMLHttpRequest} */ let collections_req = null;
/** @type {?Array<Collection>} */ let collections = null; /** @type {?Array<Collection>} */ let collections = null;
/** @type {Array<Node>} */ let nodes = []; /** @type {Array<Node>} */ let nodes = [];
@ -698,6 +697,7 @@ function CollectionsScene(user, password, collection, onerror) {
function show_collections(collections) { function show_collections(collections) {
collections.forEach(function (collection) { collections.forEach(function (collection) {
let node = template.cloneNode(true); let node = template.cloneNode(true);
node.classList.remove("hidden");
let title_form = node.querySelector("[name=title]"); let title_form = node.querySelector("[name=title]");
let description_form = node.querySelector("[name=description]"); let description_form = node.querySelector("[name=description]");
let url_form = node.querySelector("[name=url]"); let url_form = node.querySelector("[name=url]");
@ -707,7 +707,7 @@ function CollectionsScene(user, password, collection, onerror) {
if (collection.color) { if (collection.color) {
color_form.style.color = collection.color; color_form.style.color = collection.color;
} else { } else {
color_form.style.display = "none"; color_form.classList.add("hidden");
} }
let possible_types = [CollectionType.ADDRESSBOOK]; let possible_types = [CollectionType.ADDRESSBOOK];
[CollectionType.CALENDAR, ""].forEach(function(e) { [CollectionType.CALENDAR, ""].forEach(function(e) {
@ -721,7 +721,7 @@ function CollectionsScene(user, password, collection, onerror) {
}); });
possible_types.forEach(function(e) { possible_types.forEach(function(e) {
if (e !== collection.type) { if (e !== collection.type) {
node.querySelector("[name=" + e + "]").style.display = "none"; node.querySelector("[name=" + e + "]").classList.add("hidden");
} }
}); });
title_form.textContent = collection.displayname || collection.href; title_form.textContent = collection.displayname || collection.href;
@ -731,7 +731,7 @@ function CollectionsScene(user, password, collection, onerror) {
url_form.textContent = href; url_form.textContent = href;
delete_btn.onclick = function(ev) {return ondelete(collection);}; delete_btn.onclick = function(ev) {return ondelete(collection);};
edit_btn.onclick = function(ev) {return onedit(collection);}; edit_btn.onclick = function(ev) {return onedit(collection);};
node.style.display = saved_template_display; node.classList.remove("hidden");
nodes.push(node); nodes.push(node);
template.parentNode.insertBefore(node, template); template.parentNode.insertBefore(node, template);
}); });
@ -756,9 +756,7 @@ function CollectionsScene(user, password, collection, onerror) {
} }
this.show = function() { this.show = function() {
saved_template_display = template.style.display; html_scene.classList.remove("hidden");
template.style.display = "none";
html_scene.style.display = "block";
new_btn.onclick = onnew; new_btn.onclick = onnew;
upload_btn.onclick = onupload; upload_btn.onclick = onupload;
filesInputForm.reset(); filesInputForm.reset();
@ -771,8 +769,7 @@ function CollectionsScene(user, password, collection, onerror) {
} }
}; };
this.hide = function() { this.hide = function() {
html_scene.style.display = "none"; html_scene.classList.add("hidden");
template.style.display = saved_template_display;
scene_index = scene_stack.length - 1; scene_index = scene_stack.length - 1;
new_btn.onclick = null; new_btn.onclick = null;
upload_btn.onclick = null; upload_btn.onclick = null;
@ -780,7 +777,7 @@ function CollectionsScene(user, password, collection, onerror) {
collections = null; collections = null;
// remove collection // remove collection
nodes.forEach(function(node) { nodes.forEach(function(node) {
template.parentNode.removeChild(node); node.parentNode.removeChild(node);
}); });
nodes = []; nodes = [];
}; };
@ -806,12 +803,7 @@ function CollectionsScene(user, password, collection, onerror) {
function UploadCollectionScene(user, password, collection, files) { function UploadCollectionScene(user, password, collection, files) {
let html_scene = document.getElementById("uploadcollectionscene"); let html_scene = document.getElementById("uploadcollectionscene");
let template = html_scene.querySelector("[name=filetemplate]"); let template = html_scene.querySelector("[name=filetemplate]");
let template_pending_form = template.querySelector("[name=pending]");
let template_success_form = template.querySelector("[name=success]");
let template_error_form = template.querySelector("[name=error]");
let saved_template_display = null;
let close_btn = html_scene.querySelector("[name=close]"); let close_btn = html_scene.querySelector("[name=close]");
let saved_close_btn_display = null;
/** @type {?number} */ let scene_index = null; /** @type {?number} */ let scene_index = null;
/** @type {?XMLHttpRequest} */ let upload_req = null; /** @type {?XMLHttpRequest} */ let upload_req = null;
@ -824,7 +816,7 @@ function UploadCollectionScene(user, password, collection, files) {
if (errors.every(error => error === null)) { if (errors.every(error => error === null)) {
pop_scene(scene_index - 1); pop_scene(scene_index - 1);
} else { } else {
close_btn.style.display = saved_close_btn_display; close_btn.classList.remove("hidden");
} }
} else { } else {
let file = files[errors.length]; let file = files[errors.length];
@ -862,38 +854,36 @@ function UploadCollectionScene(user, password, collection, files) {
let success_form = nodes[i].querySelector("[name=success]"); let success_form = nodes[i].querySelector("[name=success]");
let error_form = nodes[i].querySelector("[name=error]"); let error_form = nodes[i].querySelector("[name=error]");
if (errors.length > i) { if (errors.length > i) {
pending_form.style.display = "none"; pending_form.classList.add("hidden");
if (errors[i]) { if (errors[i]) {
success_form.style.display = "none"; success_form.classList.add("hidden");
error_form.textContent = "Error: " + errors[i]; error_form.textContent = "Error: " + errors[i];
error_form.style.display = template_error_form.style.display; error_form.classList.remove("hidden");
} else { } else {
success_form.style.display = template_success_form.style.display; success_form.classList.remove("hidden");
error_form.style.display = "none"; error_form.classList.add("hidden");
} }
} else { } else {
pending_form.style.display = template_pending_form.style.display; pending_form.classList.remove("hidden");
success_form.style.display = "none"; success_form.classList.add("hidden");
error_form.style.display = "none"; error_form.classList.add("hidden");
} }
} }
this.show = function() { this.show = function() {
saved_template_display = template.style.display; html_scene.classList.remove("hidden");
template.style.display = "none";
html_scene.style.display = "block";
saved_close_btn_display = close_btn.style.display;
if (errors.length < files.length) { if (errors.length < files.length) {
close_btn.style.display = "none"; close_btn.classList.add("hidden");
} }
close_btn.onclick = onclose; close_btn.onclick = onclose;
nodes = []; nodes = [];
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
let file = files[i]; let file = files[i];
let node = template.cloneNode(true); let node = template.cloneNode(true);
node.classList.remove("hidden");
let name_form = node.querySelector("[name=name]"); let name_form = node.querySelector("[name=name]");
name_form.textContent = file.name; name_form.textContent = file.name;
node.style.display = saved_template_display; node.classList.remove("hidden");
nodes.push(node); nodes.push(node);
updateFileStatus(i); updateFileStatus(i);
template.parentNode.insertBefore(node, template); template.parentNode.insertBefore(node, template);
@ -905,12 +895,11 @@ function UploadCollectionScene(user, password, collection, files) {
}; };
this.hide = function() { this.hide = function() {
html_scene.style.display = "none"; html_scene.classList.add("hidden");
template.style.display = saved_template_display; close_btn.classList.remove("hidden");
close_btn.style.display = saved_close_btn_display;
close_btn.onclick = null; close_btn.onclick = null;
nodes.forEach(function(node) { nodes.forEach(function(node) {
template.parentNode.removeChild(node); node.parentNode.removeChild(node);
}); });
nodes = null; nodes = null;
}; };
@ -976,14 +965,14 @@ function DeleteCollectionScene(user, password, collection) {
this.show = function() { this.show = function() {
this.release(); this.release();
scene_index = scene_stack.length - 1; scene_index = scene_stack.length - 1;
html_scene.style.display = "block"; html_scene.classList.remove("hidden");
title_form.textContent = collection.displayname || collection.href; title_form.textContent = collection.displayname || collection.href;
error_form.textContent = error ? "Error: " + error : ""; error_form.textContent = error ? "Error: " + error : "";
delete_btn.onclick = ondelete; delete_btn.onclick = ondelete;
cancel_btn.onclick = oncancel; cancel_btn.onclick = oncancel;
}; };
this.hide = function() { this.hide = function() {
html_scene.style.display = "none"; html_scene.classList.add("hidden");
cancel_btn.onclick = null; cancel_btn.onclick = null;
delete_btn.onclick = null; delete_btn.onclick = null;
}; };
@ -1125,7 +1114,7 @@ function CreateEditCollectionScene(user, password, collection) {
type_form = type_form.cloneNode(true); type_form = type_form.cloneNode(true);
saved_type_form.parentNode.replaceChild(type_form, saved_type_form); saved_type_form.parentNode.replaceChild(type_form, saved_type_form);
remove_invalid_types(); remove_invalid_types();
html_scene.style.display = "block"; html_scene.classList.remove("hidden");
if (edit) { if (edit) {
title_form.textContent = collection.displayname || collection.href; title_form.textContent = collection.displayname || collection.href;
} }
@ -1135,7 +1124,7 @@ function CreateEditCollectionScene(user, password, collection) {
}; };
this.hide = function() { this.hide = function() {
read_form(); read_form();
html_scene.style.display = "none"; html_scene.classList.add("hidden");
// restore type_form // restore type_form
type_form.parentNode.replaceChild(saved_type_form, type_form); type_form.parentNode.replaceChild(saved_type_form, type_form);
type_form = saved_type_form; type_form = saved_type_form;

23
radicale/web/internal_data/index.html
View File

@ -8,14 +8,17 @@
<title>Web interface for Radicale</title> <title>Web interface for Radicale</title>
<link href="css/main.css" media="screen" rel="stylesheet"> <link href="css/main.css" media="screen" rel="stylesheet">
<link href="css/icon.png" type="image/png" rel="shortcut icon"> <link href="css/icon.png" type="image/png" rel="shortcut icon">
<style>
.hidden {display:none;}
</style>
<nav> <nav>
<ul> <ul>
<li id="logoutview" style="display: none;"><a href="" name="link">Logout [<span name="user" style="word-wrap:break-word;"></span>]</a></li> <li id="logoutview" class="hidden"><a href="" name="link">Logout [<span name="user" style="word-wrap:break-word;"></span>]</a></li>
</ul> </ul>
</nav> </nav>
<section id="loginscene" style="display: none;"> <section id="loginscene" class="hidden">
<h1>Login</h1> <h1>Login</h1>
<form name="form"> <form name="form">
<input name="user" type="text" placeholder="Username"><br> <input name="user" type="text" placeholder="Username"><br>
@ -25,18 +28,18 @@
</form> </form>
</section> </section>
<section id="loadingscene" style="display: none;"> <section id="loadingscene" class="hidden">
<h1>Loading</h1> <h1>Loading</h1>
Please wait... Please wait...
</section> </section>
<section id="collectionsscene" style="display: none;"> <section id="collectionsscene" class="hidden">
<h1>Collections</h1> <h1>Collections</h1>
<ul> <ul>
<li><a href="" name="new">Create new addressbook or calendar</a></li> <li><a href="" name="new">Create new addressbook or calendar</a></li>
<li><a href="" name="upload">Upload addressbook or calendar</a></li> <li><a href="" name="upload">Upload addressbook or calendar</a></li>
</ul> </ul>
<article name="collectiontemplate"> <article name="collectiontemplate" class="hidden">
<h2><span name="color">█ </span><span name="title" style="word-wrap:break-word;">Title</span> <small>[<span name="ADDRESSBOOK">addressbook</span><span name="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</span><span name="CALENDAR_JOURNAL">calendar and journal</span><span name="CALENDAR_TASKS">calendar and tasks</span><span name="JOURNAL_TASKS">journal and tasks</span><span name="CALENDAR">calendar</span><span name="JOURNAL">journal</span><span name="TASKS">tasks</span>]</small></h2> <h2><span name="color">█ </span><span name="title" style="word-wrap:break-word;">Title</span> <small>[<span name="ADDRESSBOOK">addressbook</span><span name="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</span><span name="CALENDAR_JOURNAL">calendar and journal</span><span name="CALENDAR_TASKS">calendar and tasks</span><span name="JOURNAL_TASKS">journal and tasks</span><span name="CALENDAR">calendar</span><span name="JOURNAL">journal</span><span name="TASKS">tasks</span>]</small></h2>
<span name="description" style="word-wrap:break-word;">Description</span> <span name="description" style="word-wrap:break-word;">Description</span>
<ul> <ul>
@ -47,7 +50,7 @@
</article> </article>
</section> </section>
<section id="editcollectionscene" style="display: none;"> <section id="editcollectionscene" class="hidden">
<h1>Edit collection</h1> <h1>Edit collection</h1>
<h2>Edit <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>:</h2> <h2>Edit <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>:</h2>
<form> <form>
@ -74,7 +77,7 @@
</form> </form>
</section> </section>
<section id="createcollectionscene" style="display: none;"> <section id="createcollectionscene" class="hidden">
<h1>Create new collection</h1> <h1>Create new collection</h1>
<form> <form>
Title:<br> Title:<br>
@ -100,10 +103,10 @@
</form> </form>
</section> </section>
<section id="uploadcollectionscene" style="display: none;"> <section id="uploadcollectionscene" class="hidden">
<h1>Upload collection</h1> <h1>Upload collection</h1>
<ul> <ul>
<li name="filetemplate"> <li name="filetemplate" class="hidden">
Upload <span name="name" style="word-wrap:break-word;font-weight:bold;">name</span>:<br> Upload <span name="name" style="word-wrap:break-word;font-weight:bold;">name</span>:<br>
<span name="pending">Please wait...</span> <span name="pending">Please wait...</span>
<span style="color: #00A400;" name="success">Finished</span> <span style="color: #00A400;" name="success">Finished</span>
@ -115,7 +118,7 @@
</form> </form>
</section> </section>
<section id="deletecollectionscene" style="display: none;"> <section id="deletecollectionscene" class="hidden">
<h1>Delete collection</h1> <h1>Delete collection</h1>
<h2>Delete <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>?</h2> <h2>Delete <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>?</h2>
<span style="color: #A40000;" name="error"></span><br> <span style="color: #A40000;" name="error"></span><br>