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

View File

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