Most fields are optional. Mandatory fields will be highlighted when generating Codemeta.
codemeta.json:
Most fields are optional. Mandatory fields will be highlighted when generating Codemeta.
codemeta.json:
`; return fieldset; } function addPersonWithId(container, prefix, legend, id) { var personPrefix = `${prefix}_${id}`; var fieldset = createPersonFieldset(personPrefix, `${legend} #${id}`); container.appendChild(fieldset); document.querySelector(`#${personPrefix}_moveToLeft`) .addEventListener('click', () => movePerson(prefix, id, "left")); document.querySelector(`#${personPrefix}_moveToRight`) .addEventListener('click', () => movePerson(prefix, id, "right")); } function movePerson(prefix, id1, direction) { var nbPersons = getNbPersons(prefix); var id2; // Computer id2, the id of the person to flip id1 with (wraps around the // end of the list of persons) if (direction == "left") { id2 = id1 - 1; if (id2 <= 0) { id2 = nbPersons; } } else { id2 = id1 + 1; if (id2 > nbPersons) { id2 = 1; } } // Flip the field values, one by one personFields.forEach((fieldName) => { var field1 = document.querySelector(`#${prefix}_${id1}_${fieldName}`); var field2 = document.querySelector(`#${prefix}_${id2}_${fieldName}`); var value1 = field1.value; var value2 = field2.value; field2.value = value1; field1.value = value2; }); // Form was changed; regenerate generateCodemeta(); } function addPerson(prefix, legend) { var container = document.querySelector(`#${prefix}_container`); var personId = getNbPersons(prefix) + 1; addPersonWithId(container, prefix, legend, personId); setNbPersons(prefix, personId); return personId; } function removePerson(prefix) { var personId = getNbPersons(prefix); document.querySelector(`#${prefix}_${personId}`).remove(); - setNbPersons(prefix, personId-1); + setNbPersons(prefix, personId - 1); } // Initialize a group of persons (authors, contributors) on page load. // Useful if the page is reloaded. function initPersons(prefix, legend) { var nbPersons = getNbPersons(prefix); var personContainer = document.querySelector(`#${prefix}_container`) for (let personId = 1; personId <= nbPersons; personId++) { addPersonWithId(personContainer, prefix, legend, personId); } } function removePersons(prefix) { var nbPersons = getNbPersons(prefix); var personContainer = document.querySelector(`#${prefix}_container`) for (let personId = 1; personId <= nbPersons; personId++) { removePerson(prefix) } } function resetForm() { removePersons('author'); removePersons('contributor'); + // Reset the list of selected licenses + document.getElementById("selected-licenses").innerHTML = ''; // Reset the form after deleting elements, so nbPersons doesn't get // reset before it's read. document.querySelector('#inputForm').reset(); } function fieldToLower(event) { event.target.value = event.target.value.toLowerCase(); } function initCallbacks() { document.querySelector('#license') - .addEventListener('change', validateLicense); + .addEventListener('keyup', validateLicense); document.querySelector('#generateCodemeta') .addEventListener('click', generateCodemeta); document.querySelector('#resetForm') .addEventListener('click', resetForm); document.querySelector('#validateCodemeta') .addEventListener('click', () => parseAndValidateCodemeta(true)); document.querySelector('#importCodemeta') .addEventListener('click', importCodemeta); document.querySelector('#inputForm') .addEventListener('change', generateCodemeta); document.querySelector('#developmentStatus') .addEventListener('change', fieldToLower); initPersons('author', 'Author'); initPersons('contributor', 'Contributor'); } diff --git a/js/fields_data.js b/js/fields_data.js index b60374e..de21e4a 100644 --- a/js/fields_data.js +++ b/js/fields_data.js @@ -1,51 +1,80 @@ /** * Copyright (C) 2019 The Software Heritage developers * See the AUTHORS file at the top-level directory of this distribution * License: GNU Affero General Public License version 3, or any later version * See top-level LICENSE file for more information */ "use strict"; var SPDX_LICENSES = null; var SPDX_LICENSE_IDS = null; function initSpdx() { var xhr = new XMLHttpRequest(); xhr.open('GET', './data/spdx/licenses.json', true); xhr.onload = function () { if (xhr.status === 200) { SPDX_LICENSES = JSON.parse(xhr.response)['licenses']; var datalist = document.getElementById('licenses'); SPDX_LICENSES.forEach(function (license) { var option = document.createElement('option'); option.value = license['licenseId']; option.label = `${license['licenseId']}: ${license['name']}`; datalist.appendChild(option); }); SPDX_LICENSE_IDS = SPDX_LICENSES.map(function (license) { return license['licenseId']; }) } } xhr.send(); } -function validateLicense() { +function insertLicenseElement(licenseId) { + let selectedLicenses = document.getElementById("selected-licenses"); + let newLicense = document.createElement("div"); + newLicense.className = "selected-license"; + newLicense.innerHTML = ` + ${licenseId} + + `; + + selectedLicenses.appendChild(newLicense); + return newLicense; +} + +function validateLicense(e) { + // continue only if Enter/Tab key is pressed + if (e.keyCode && e.keyCode !== 13 && e.keyCode !== 9) { + return; + } + // Note: For some reason e.keyCode is undefined when Enter/Tab key is pressed. + // Maybe it's because of the datalist. But the above condition should + // work in either case. + var licenseField = document.getElementById('license'); var license = licenseField.value; if (SPDX_LICENSE_IDS !== null && SPDX_LICENSE_IDS.indexOf(license) == -1) { licenseField.setCustomValidity('Unknown license id'); } else { + insertLicenseElement(license); + + licenseField.value = ""; licenseField.setCustomValidity(''); + generateCodemeta(); } +} +function removeLicense(btn) { + btn.parentElement.remove(); + generateCodemeta(); } function initFieldsData() { initSpdx(); } diff --git a/main.css b/main.css index dfa7c62..6204b47 100644 --- a/main.css +++ b/main.css @@ -1,78 +1,82 @@ /** * Copyright (C) 2019 The Software Heritage developers * See the AUTHORS file at the top-level directory of this distribution * License: GNU Affero General Public License version 3, or any later version * See top-level LICENSE file for more information */ /* This file contains the main CSS to make the form/application usable, * without being especially pretty. */ #noscriptError { color: red; } .person { display: inline-block; } #inputForm { max-width: 100%; display: flex; flex-wrap: wrap; } /* A fieldset that contains only label/input pairs */ .leafFieldset { flex: auto; } p input, p textarea { width: 100%; box-sizing: border-box; } .dynamicFields { width: 100%; } .dynamicFields .moveButtons { width: 100%; display: flex; justify-content: space-between; } #license { /* License names are long */ min-width: 20em; } #funding { /* Funding names are long */ min-width: 20em; } input[type=URL] { /* URLs are longer than the other fields */ min-width: 20em; } .field-description { color : rgb(100, 104, 103); font-size: small; } #codemetaText { width: 100%; min-height: 10em; border: 1px solid black; } #errorMessage { color: red; } input:invalid { color: red; } + +.selected-license { + margin: 2px; +}