Changeset View
Changeset View
Standalone View
Standalone View
dynamic_form.js
/** | /** | ||||
* Copyright (C) 2019 The Software Heritage developers | * Copyright (C) 2019 The Software Heritage developers | ||||
* See the AUTHORS file at the top-level directory of this distribution | * See the AUTHORS file at the top-level directory of this distribution | ||||
* License: GNU Affero General Public License version 3, or any later version | * License: GNU Affero General Public License version 3, or any later version | ||||
* See top-level LICENSE file for more information | * See top-level LICENSE file for more information | ||||
*/ | */ | ||||
"use strict"; | "use strict"; | ||||
/////////////////BEGIN-PERSONS | |||||
function createPersonFieldset(personPrefix, legend) { | function createPersonFieldset(personPrefix, legend) { | ||||
// Creates a fieldset containing inputs for informations about a person | // Creates a fieldset containing inputs for informations about a person | ||||
var fieldset = document.createElement("fieldset") | var fieldset = document.createElement("fieldset") | ||||
fieldset.classList.add("person"); | fieldset.classList.add("person"); | ||||
fieldset.id = personPrefix; | fieldset.id = personPrefix; | ||||
fieldset.innerHTML = ` | fieldset.innerHTML = ` | ||||
<legend>${legend}</legend> | <legend>${legend}</legend> | ||||
Show All 12 Lines | fieldset.innerHTML = ` | ||||
<input type="email" id="${personPrefix}_email" name="${personPrefix}_email" | <input type="email" id="${personPrefix}_email" name="${personPrefix}_email" | ||||
placeholder="jane.doe@example.org" /> | placeholder="jane.doe@example.org" /> | ||||
</p> | </p> | ||||
<p> | <p> | ||||
<label for="${personPrefix}_id">URI</label> | <label for="${personPrefix}_id">URI</label> | ||||
<input type="url" id="${personPrefix}_id" name="${personPrefix}_id" | <input type="url" id="${personPrefix}_id" name="${personPrefix}_id" | ||||
placeholder="http://orcid.org/0000-0002-1825-0097" /> | placeholder="http://orcid.org/0000-0002-1825-0097" /> | ||||
</p> | </p> | ||||
<p> | |||||
<label for="${personPrefix}_affiliation">Affiliation</label> | |||||
<input type="url" id="${personPrefix}_affiliation" name="${personPrefix}_affiliation" | |||||
placeholder="Department of Computer Science, University of Pisa" /> | |||||
</p> | |||||
`; | `; | ||||
return fieldset; | return fieldset; | ||||
} | } | ||||
function addPersonWithId(container, prefix, legend, id) { | function addPersonWithId(container, prefix, legend, id) { | ||||
var fieldset = createPersonFieldset(`${prefix}_${id}`, `${legend} #${id}`); | var fieldset = createPersonFieldset(`${prefix}_${id}`, `${legend} #${id}`); | ||||
Show All 33 Lines | |||||
function removePersons(prefix) { | function removePersons(prefix) { | ||||
var nbPersons = getNbPersons(prefix); | var nbPersons = getNbPersons(prefix); | ||||
var personContainer = document.querySelector(`#${prefix}_container`) | var personContainer = document.querySelector(`#${prefix}_container`) | ||||
for (let personId = 1; personId <= nbPersons; personId++) { | for (let personId = 1; personId <= nbPersons; personId++) { | ||||
removePerson(prefix) | removePerson(prefix) | ||||
} | } | ||||
} | } | ||||
/////////////////END-PERSONS | |||||
/////////////////BEGIN-ARRAYS | |||||
function createArrayFieldset(prefix, legend, postfix) { | |||||
// Creates a fieldset containing inputs for informations about an array field | |||||
var fieldset = document.createElement(`fieldset_${prefix}`) | |||||
fieldset.classList.add(prefix); | |||||
fieldset.id = prefix; | |||||
fieldset.innerHTML = ` | |||||
<legend>${legend}</legend> | |||||
<p> | |||||
<label for="${prefix}_${postfix}">${legend}</label> | |||||
<input type="text" id="${prefix}_${postfix}" name="${prefix}_${postfix}" | |||||
placeholder="Cool-stuff" required="true" /> | |||||
</p> | |||||
`; | |||||
return fieldset; | |||||
} | |||||
function addArrayWithId(container, prefix, legend, id) { | |||||
var fieldset = createArrayFieldset(`${prefix}_${id}`, `${legend} #${id}`,`${prefix}`); | |||||
container.appendChild(fieldset); | |||||
} | |||||
function addArray(prefix, legend) { | |||||
var container = document.querySelector(`#${prefix}_container`); | |||||
var ArrayId = getNbArray(prefix) + 1; | |||||
addArrayWithId(container, prefix, legend, ArrayId); | |||||
setNbArray(prefix, ArrayId); | |||||
return ArrayId; | |||||
} | |||||
function removeArray(prefix) { | |||||
var ArrayId = getNbArray(prefix); | |||||
document.querySelector(`#${prefix}_${ArrayId}`).remove(); | |||||
setNbPersons(prefix, ArrayId-1); | |||||
} | |||||
// Initialize a group of keywords on page load. | |||||
// Useful if the page is reloaded. | |||||
function initArrays(prefix, legend) { | |||||
var nbArray = getNbArray(prefix); | |||||
var ArrayContainer = document.querySelector(`#${prefix}_container`) | |||||
for (let ArrayId = 1; ArrayId <= nbArray; ArrayId++) { | |||||
addKeywordWithId(ArrayContainer, prefix, legend, ArrayId); | |||||
} | |||||
} | |||||
function removeArray(prefix) { | |||||
var nbArray = getNbArray(prefix); | |||||
var ArrayContainer = document.querySelector(`#${prefix}_container`) | |||||
for (let ArrayId = 1; ArrayId <= nbArray; ArrayId++) { | |||||
removeArray(prefix) | |||||
} | |||||
} | |||||
/////////////////END-KEYWORDS | |||||
function resetForm() { | function resetForm() { | ||||
removePersons('author'); | removePersons('author'); | ||||
removePersons('contributor'); | removePersons('contributor'); | ||||
// Reset the form after deleting elements, so nbPersons doesn't get | // Reset the form after deleting elements, so nbPersons doesn't get | ||||
// reset before it's read. | // reset before it's read. | ||||
document.querySelector('#inputForm').reset(); | document.querySelector('#inputForm').reset(); | ||||
Show All 12 Lines | function initCallbacks() { | ||||
document.querySelector('#importCodemeta') | document.querySelector('#importCodemeta') | ||||
.addEventListener('click', importCodemeta); | .addEventListener('click', importCodemeta); | ||||
document.querySelector('#inputForm') | document.querySelector('#inputForm') | ||||
.addEventListener('change', generateCodemeta); | .addEventListener('change', generateCodemeta); | ||||
initPersons('author', 'Author'); | initPersons('author', 'Author'); | ||||
initPersons('contributor', 'Contributor'); | initPersons('contributor', 'Contributor'); | ||||
initArrays('keyword', 'Keyword'); | |||||
initArrays('software_requirements', 'Software Requirements'); | |||||
} | } |