Web: Replace attribute name with data-name

This commit is contained in:
Unrud 2020-01-16 03:58:31 +01:00
parent d7c7d694e0
commit 1ef067c7e9
2 changed files with 73 additions and 73 deletions

View File

@ -476,13 +476,13 @@ function pop_scene(index) {
*/
function LoginScene() {
let html_scene = document.getElementById("loginscene");
let form = html_scene.querySelector("[name=form]");
let user_form = html_scene.querySelector("[name=user]");
let password_form = html_scene.querySelector("[name=password]");
let error_form = html_scene.querySelector("[name=error]");
let form = html_scene.querySelector("[data-name=form]");
let user_form = html_scene.querySelector("[data-name=user]");
let password_form = html_scene.querySelector("[data-name=password]");
let error_form = html_scene.querySelector("[data-name=error]");
let logout_view = document.getElementById("logoutview");
let logout_user_form = logout_view.querySelector("[name=user]");
let logout_btn = logout_view.querySelector("[name=link]");
let logout_user_form = logout_view.querySelector("[data-name=user]");
let logout_btn = logout_view.querySelector("[data-name=link]");
/** @type {?number} */ let scene_index = null;
let user = "";
@ -631,9 +631,9 @@ function LoadingScene() {
*/
function CollectionsScene(user, password, collection, onerror) {
let html_scene = document.getElementById("collectionsscene");
let template = html_scene.querySelector("[name=collectiontemplate]");
let new_btn = html_scene.querySelector("[name=new]");
let upload_btn = html_scene.querySelector("[name=upload]");
let template = html_scene.querySelector("[data-name=collectiontemplate]");
let new_btn = html_scene.querySelector("[data-name=new]");
let upload_btn = html_scene.querySelector("[data-name=upload]");
/** @type {?number} */ let scene_index = null;
/** @type {?XMLHttpRequest} */ let collections_req = null;
@ -698,12 +698,12 @@ function CollectionsScene(user, password, collection, onerror) {
collections.forEach(function (collection) {
let node = template.cloneNode(true);
node.classList.remove("hidden");
let title_form = node.querySelector("[name=title]");
let description_form = node.querySelector("[name=description]");
let url_form = node.querySelector("[name=url]");
let color_form = node.querySelector("[name=color]");
let delete_btn = node.querySelector("[name=delete]");
let edit_btn = node.querySelector("[name=edit]");
let title_form = node.querySelector("[data-name=title]");
let description_form = node.querySelector("[data-name=description]");
let url_form = node.querySelector("[data-name=url]");
let color_form = node.querySelector("[data-name=color]");
let delete_btn = node.querySelector("[data-name=delete]");
let edit_btn = node.querySelector("[data-name=edit]");
if (collection.color) {
color_form.style.color = collection.color;
} else {
@ -721,7 +721,7 @@ function CollectionsScene(user, password, collection, onerror) {
});
possible_types.forEach(function(e) {
if (e !== collection.type) {
node.querySelector("[name=" + e + "]").classList.add("hidden");
node.querySelector("[data-name=" + e + "]").classList.add("hidden");
}
});
title_form.textContent = collection.displayname || collection.href;
@ -802,8 +802,8 @@ function CollectionsScene(user, password, collection, onerror) {
*/
function UploadCollectionScene(user, password, collection, files) {
let html_scene = document.getElementById("uploadcollectionscene");
let template = html_scene.querySelector("[name=filetemplate]");
let close_btn = html_scene.querySelector("[name=close]");
let template = html_scene.querySelector("[data-name=filetemplate]");
let close_btn = html_scene.querySelector("[data-name=close]");
/** @type {?number} */ let scene_index = null;
/** @type {?XMLHttpRequest} */ let upload_req = null;
@ -850,9 +850,9 @@ function UploadCollectionScene(user, password, collection, files) {
if (nodes === null) {
return;
}
let pending_form = nodes[i].querySelector("[name=pending]");
let success_form = nodes[i].querySelector("[name=success]");
let error_form = nodes[i].querySelector("[name=error]");
let pending_form = nodes[i].querySelector("[data-name=pending]");
let success_form = nodes[i].querySelector("[data-name=success]");
let error_form = nodes[i].querySelector("[data-name=error]");
if (errors.length > i) {
pending_form.classList.add("hidden");
if (errors[i]) {
@ -881,7 +881,7 @@ function UploadCollectionScene(user, password, collection, files) {
let file = files[i];
let node = template.cloneNode(true);
node.classList.remove("hidden");
let name_form = node.querySelector("[name=name]");
let name_form = node.querySelector("[data-name=name]");
name_form.textContent = file.name;
node.classList.remove("hidden");
nodes.push(node);
@ -921,11 +921,11 @@ function UploadCollectionScene(user, password, collection, files) {
*/
function DeleteCollectionScene(user, password, collection) {
let html_scene = document.getElementById("deletecollectionscene");
let title_form = html_scene.querySelector("[name=title]");
let error_form = html_scene.querySelector("[name=error]");
let delete_btn = html_scene.querySelector("[name=delete]");
let cancel_btn = html_scene.querySelector("[name=cancel]");
let no_btn = html_scene.querySelector("[name=no]");
let title_form = html_scene.querySelector("[data-name=title]");
let error_form = html_scene.querySelector("[data-name=error]");
let delete_btn = html_scene.querySelector("[data-name=delete]");
let cancel_btn = html_scene.querySelector("[data-name=cancel]");
let no_btn = html_scene.querySelector("[data-name=no]");
/** @type {?number} */ let scene_index = null;
/** @type {?XMLHttpRequest} */ let delete_req = null;
@ -1010,14 +1010,14 @@ function randHex(length) {
function CreateEditCollectionScene(user, password, collection) {
let edit = collection.type !== CollectionType.PRINCIPAL;
let html_scene = document.getElementById(edit ? "editcollectionscene" : "createcollectionscene");
let title_form = edit ? html_scene.querySelector("[name=title]") : null;
let error_form = html_scene.querySelector("[name=error]");
let displayname_form = html_scene.querySelector("[name=displayname]");
let description_form = html_scene.querySelector("[name=description]");
let type_form = html_scene.querySelector("[name=type]");
let color_form = html_scene.querySelector("[name=color]");
let submit_btn = html_scene.querySelector("[name=submit]");
let cancel_btn = html_scene.querySelector("[name=cancel]");
let title_form = edit ? html_scene.querySelector("[data-name=title]") : null;
let error_form = html_scene.querySelector("[data-name=error]");
let displayname_form = html_scene.querySelector("[data-name=displayname]");
let description_form = html_scene.querySelector("[data-name=description]");
let type_form = html_scene.querySelector("[data-name=type]");
let color_form = html_scene.querySelector("[data-name=color]");
let submit_btn = html_scene.querySelector("[data-name=submit]");
let cancel_btn = html_scene.querySelector("[data-name=cancel]");
/** @type {?number} */ let scene_index = null;
/** @type {?XMLHttpRequest} */ let create_edit_req = null;

View File

@ -14,16 +14,16 @@
<nav>
<ul>
<li id="logoutview" class="hidden"><a href="" name="link">Logout [<span name="user" style="word-wrap:break-word;"></span>]</a></li>
<li id="logoutview" class="hidden"><a href="" data-name="link">Logout [<span data-name="user" style="word-wrap:break-word;"></span>]</a></li>
</ul>
</nav>
<section id="loginscene" class="hidden">
<h1>Login</h1>
<form name="form">
<input name="user" type="text" placeholder="Username"><br>
<input name="password" type="password" placeholder="Password"><br>
<span style="color: #A40000;" name="error"></span><br>
<form data-name="form">
<input data-name="user" type="text" placeholder="Username"><br>
<input data-name="password" type="password" placeholder="Password"><br>
<span style="color: #A40000;" data-name="error"></span><br>
<button type="submit">Next</button>
</form>
</section>
@ -36,30 +36,30 @@
<section id="collectionsscene" class="hidden">
<h1>Collections</h1>
<ul>
<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="" data-name="new">Create new addressbook or calendar</a></li>
<li><a href="" data-name="upload">Upload addressbook or calendar</a></li>
</ul>
<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>
<span name="description" style="word-wrap:break-word;">Description</span>
<article data-name="collectiontemplate" class="hidden">
<h2><span data-name="color"></span><span data-name="title" style="word-wrap:break-word;">Title</span> <small>[<span data-name="ADDRESSBOOK">addressbook</span><span data-name="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</span><span data-name="CALENDAR_JOURNAL">calendar and journal</span><span data-name="CALENDAR_TASKS">calendar and tasks</span><span data-name="JOURNAL_TASKS">journal and tasks</span><span data-name="CALENDAR">calendar</span><span data-name="JOURNAL">journal</span><span data-name="TASKS">tasks</span>]</small></h2>
<span data-name="description" style="word-wrap:break-word;">Description</span>
<ul>
<li>URL: <a name="url" style="word-wrap:break-word;">url</a></li>
<li><a href="" name="edit">Edit</a></li>
<li><a href="" name="delete">Delete</a></li>
<li>URL: <a data-name="url" style="word-wrap:break-word;">url</a></li>
<li><a href="" data-name="edit">Edit</a></li>
<li><a href="" data-name="delete">Delete</a></li>
</ul>
</article>
</section>
<section id="editcollectionscene" class="hidden">
<h1>Edit collection</h1>
<h2>Edit <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>:</h2>
<h2>Edit <span data-name="title" style="word-wrap:break-word;font-weight:bold;">title</span>:</h2>
<form>
Title:<br>
<input name="displayname" type="text"><br>
<input data-name="displayname" type="text"><br>
Description:<br>
<input name="description" type="text"><br>
<input data-name="description" type="text"><br>
Type:<br>
<select name="type">
<select data-name="type">
<option value="ADDRESSBOOK">addressbook</option>
<option value="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</option>
<option value="CALENDAR_JOURNAL">calendar and journal</option>
@ -70,10 +70,10 @@
<option value="TASKS">tasks</option>
</select><br>
Color:<br>
<input name="color" type="color"><br>
<span style="color: #A40000;" name="error"></span><br>
<button type="submit" name="submit">Save</button>
<button type="button" name="cancel">Cancel</button>
<input data-name="color" type="color"><br>
<span style="color: #A40000;" data-name="error"></span><br>
<button type="submit" data-name="submit">Save</button>
<button type="button" data-name="cancel">Cancel</button>
</form>
</section>
@ -81,11 +81,11 @@
<h1>Create new collection</h1>
<form>
Title:<br>
<input name="displayname" type="text"><br>
<input data-name="displayname" type="text"><br>
Description:<br>
<input name="description" type="text"><br>
<input data-name="description" type="text"><br>
Type:<br>
<select name="type">
<select data-name="type">
<option value="ADDRESSBOOK">addressbook</option>
<option value="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</option>
<option value="CALENDAR_JOURNAL">calendar and journal</option>
@ -96,34 +96,34 @@
<option value="TASKS">tasks</option>
</select><br>
Color:<br>
<input name="color" type="color"><br>
<span style="color: #A40000;" name="error"></span><br>
<button type="submit" name="submit">Create</button>
<button type="button" name="cancel">Cancel</button>
<input data-name="color" type="color"><br>
<span style="color: #A40000;" data-name="error"></span><br>
<button type="submit" data-name="submit">Create</button>
<button type="button" data-name="cancel">Cancel</button>
</form>
</section>
<section id="uploadcollectionscene" class="hidden">
<h1>Upload collection</h1>
<ul>
<li name="filetemplate" class="hidden">
Upload <span name="name" style="word-wrap:break-word;font-weight:bold;">name</span>:<br>
<span name="pending">Please wait...</span>
<span style="color: #00A400;" name="success">Finished</span>
<span style="color: #A40000;" name="error"></span>
<li data-name="filetemplate" class="hidden">
Upload <span data-name="name" style="word-wrap:break-word;font-weight:bold;">name</span>:<br>
<span data-name="pending">Please wait...</span>
<span style="color: #00A400;" data-name="success">Finished</span>
<span style="color: #A40000;" data-name="error"></span>
</li>
</ul>
<form>
<button type="button" name="close">Close</button>
<button type="button" data-name="close">Close</button>
</form>
</section>
<section id="deletecollectionscene" class="hidden">
<h1>Delete collection</h1>
<h2>Delete <span name="title" style="word-wrap:break-word;font-weight:bold;">title</span>?</h2>
<span style="color: #A40000;" name="error"></span><br>
<h2>Delete <span data-name="title" style="word-wrap:break-word;font-weight:bold;">title</span>?</h2>
<span style="color: #A40000;" data-name="error"></span><br>
<form>
<button type="button" name="delete">Yes</button>
<button type="button" name="cancel">No</button>
<button type="button" data-name="delete">Yes</button>
<button type="button" data-name="cancel">No</button>
</form>
</section>