diff --git a/index.html b/index.html
index cda6dc8..df6d3f8 100644
--- a/index.html
+++ b/index.html
@@ -1,394 +1,396 @@
<!doctype html>
<!--
Copyright (C) 2019-2020 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
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>CodeMeta generator</title>
<script src="./js/utils.js"></script>
<script src="./js/fields_data.js"></script>
<script src="./js/dynamic_form.js"></script>
<script src="./js/codemeta_generation.js"></script>
<script src="./js/validation/primitives.js"></script>
<script src="./js/validation/things.js"></script>
<script src="./js/validation/index.js"></script>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="stylesheet" type="text/css" href="./codemeta.css">
</head>
<body>
<header>
<h1>CodeMeta generator v3.0</h1>
</header>
<main>
<p>Most fields are optional. Mandatory fields will be highlighted when generating Codemeta.</p>
<noscript>
<p id="noscriptError">
This application requires Javascript to show dynamic fields in the form,
and generate a JSON file; but your browser does not support Javascript.
If you cannot use a browser with Javascript support, you can try
<a href="https://codemeta.github.io/tools/">one of the other available tools</a>
or write the codemeta.json file directly.
</p>
</noscript>
<form id="inputForm">
<fieldset id="fieldsetSoftwareItself" class="leafFieldset">
<legend>The software itself</legend>
<p title="The name of the software">
<label for="name">Name</label>
<input type="text" name="name" id="name" aria-describedby="name_descr"
placeholder="My Software" required="required" />
<span class="field-description" id="name_descr">the software title</span>
</p>
<p title="a brief description of the software">
<label for="description">Description</label>
<textarea rows="4" cols="50"
name="description" id="description"
placeholder="My Software computes ephemerides and orbit propagation. It has been developed from early ´80." ></textarea>
</p>
<p title="The date on which the software was created.">
<label for="dateCreated">Creation date</label>
<input type="text" name="dateCreated" id="dateCreated"
placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" />
</p>
<p title="Date of first publication.">
<label for="datePublished">First release date</label>
<input type="text" name="datePublished" id="datePublished"
placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" />
</p>
<p>
<label for="license">License(s)</label>
<input list="licenses" name="license" id="license"
aria-describedby="licenses_descr"> <!-- TODO: insert placeholder -->
<datalist id="licenses">
</datalist>
<!-- This datalist is be filled automatically -->
<br />
<span class="field-description" id="licenses_descr">from <a href="https://spdx.org/license-list">SPDX licence list</a></span>
<div id="selected-licenses">
<!-- This div is to be filled as the user selects licenses -->
</div>
</p>
</fieldset>
<fieldset id="fieldsetDiscoverabilityAndCitation" class="leafFieldset">
<legend>Discoverability and citation</legend>
<p title="Unique identifier">
<label for="identifier">Unique identifier</label>
<input type="text" name="identifier" id="identifier"
placeholder="10.151.xxxxx" aria-describedby="identifier_descr" />
<br />
<span class="field-description" id="identifier_descr">
such as ISBNs, GTIN codes, UUIDs etc.. <a href="http://schema.org/identifier">http://schema.org/identifier</a>
</span>
</p>
<!-- TODO:define better
I looked at the schema.org definition of identifier (https://schema.org/identifier),
it can be text, url or PropertyValue.
Used as follows in data representation with microdata:
<div property="identifier" typeof="PropertyValue">
<span property="propertyID">DOI</span>:
<span property="value">10.151.xxxxx</span>
</div>
we can use that with identifier-type and identifier-value to have a clearer idea
of what needs to be in the input.
-->
<p title="Type of the software application">
<label for="applicationCategory">Application category</label>
<input type="text" name="applicationCategory" id="applicationCategory"
placeholder="Astronomy" />
</p>
<p title="Comma-separated list of keywords">
<label for="keywords">Keywords</label>
<input type="text" name="keywords" id="keywords"
placeholder="ephemerides, orbit, astronomy" />
</p>
<p title="Funding / grant">
<label for="funding">Funding</label>
<input type="text" name="funding" id="funding" aria-describedby="funding_descr"
placeholder="PRA_2018_73"/>
<br />
<span class="field-description" id="funding_descr">grant funding software development</span>
</p>
<p title="Funding / organization">
<label for="funder">Funder</label>
<input type="text" name="funder" id="funder" aria-describedby="funder_descr"
placeholder="Università di Pisa"/>
<br />
<span class="field-description" id="funder_descr">organization funding software development</span>
</p>
Authors and contributors can be added below
</fieldset>
<fieldset id="fieldsetDevelopmentCommunity" class="leafFieldset">
<legend>Development community / tools</legend>
<p title="Link to the repository where the un-compiled, human readable code and related code is located (SVN, Git, GitHub, CodePlex, institutional GitLab instance, etc.).">
<label for="codeRepository">Code repository</label>
<input type="URL" name="codeRepository" id="codeRepository"
placeholder="git+https://github.com/You/RepoName.git" />
</p>
<p title="Link to continuous integration service (Travis-CI, Gitlab CI, etc.).">
<label for="contIntegration">Continuous integration</label>
<input type="URL" name="contIntegration" id="contIntegration"
placeholder="https://travis-ci.org/You/RepoName" />
</p>
<p title="Link to a place for users/developpers to report and manage bugs (JIRA, GitHub issues, etc.).">
<label for="issueTracker">Issue tracker</label>
<input type="URL" name="issueTracker" id="issueTracker"
placeholder="https://github.com/You/RepoName/issues" />
</p>
<p title="Related document, software, tools">
<label for="relatedLink">Related links</label>
<br />
<textarea rows="4" cols="50"
name="relatedLink" id="relatedLink"></textarea>
</fieldset>
<fieldset id="fieldsetRuntime" class="leafFieldset">
<legend>Run-time environment</legend>
<p title="Programming Languages, separated by commas">
<label for="programmingLanguage">Programming Language</label>
<input type="text" name="programmingLanguage" id="programmingLanguage"
placeholder="C#, Java, Python 3" />
</p>
<p title="Runtime Platforms, separated by commas">
<label for="runtimePlatform">Runtime Platform</label>
<input type="text" name="runtimePlatform" id="runtimePlatform"
placeholder=".NET, JVM" />
</p>
<p title="Operating Systems, separated by commas">
<label for="operatingSystem">Operating System</label>
<input type="text" name="operatingSystem" id="operatingSystem"
placeholder="Android 1.6, Linux, Windows, macOS" />
</p>
<p title="Required software to run/use this one.">
<label for="softwareRequirements">Other software requirements</label>
<br />
<textarea rows="4" cols="50"
name="softwareRequirements" id="softwareRequirements"
placeholder=
"Python 3.4
https://github.com/psf/requests"></textarea>
</fieldset>
<fieldset id="fieldsetCurrentVersion" class="leafFieldset">
<legend>Current version of the software</legend>
<p title="Version number of the software">
<label for="version">Version number</label>
<input type="text" name="version" id="version"
placeholder="1.0.0" />
</p>
<p title="The date on which the software was most recently modified.">
<label for="dateModified">Release date</label>
<input type="text" name="dateModified" id="dateModified"
placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" />
</p>
<p title="Download link">
<label for="downloadUrl">Download URL</label>
<input type="URL" name="downloadUrl" id="downloadUrl"
placeholder="https://example.org/MySoftware.tar.gz" />
</p>
<p title="a brief description of the software">
<label for="releaseNotes">Release notes</label>
<br />
<textarea rows="4" cols="50"
name="releaseNotes" id="releaseNotes"
placeholder=
"Change log: this and that;
Bugfixes: that and this." ></textarea>
</p>
<!--TODO: referencePublication as ScholarlyArticle array -->
</fieldset>
<fieldset id="review_container" class="leafFieldset">
<legend>Editorial review</legend>
<p title="Scholarly article describing this software">
<label for="referencePublication">Reference Publication</label>
<input type="URL" name="referencePublication" id="referencePublication"
placeholder="https://doi.org/10.1000/xyz123" />
</p>
<p title="Part or facet of the object being review ">
<label for="reviewAspect">Review aspect</label>
<input type="text" name="reviewAspect" id="reviewAspect"
placeholder="Object facet" />
</p>
<p title="The actual body of the review ">
<label for="reviewBody">Review body</label>
<textarea rows="4" cols="50"
name="reviewBody" id="reviewBody"
placeholder="Review about my software." ></textarea>
</p>
</fieldset>
<fieldset id="fieldsetAdditionalInfo" class="leafFieldset">
<legend>Additional Info</legend>
<p title="Development Status">
<label for="developmentStatus">Development Status</label>
<datalist id="developmentStatuses">
<option value="concept">
<option value="wip">
<option value="suspended">
<option value="abandoned">
<option value="active">
<option value="inactive">
<option value="unsupported">
<option value="moved">
</datalist>
<input list="developmentStatuses" id="developmentStatus" aria-describedby="developmentStatuses_descr"
pattern="concept|wip|suspended|abandoned|active|inactive|unsupported|moved">
<br />
<span class="field-description" id="developmentStatuses_descr">
see <a href="http://www.repostatus.org">www.repostatus.org</a> for details
</span>
</p>
<p title="Source Code of">
<label for="isSourceCodeOf">Is Source Code of</label>
<input type="text" name="isSourceCodeOf" id="isSourceCodeOf"
placeholder="Bigger Application" />
</p>
<p title="Part of">
<label for="isPartOf">Is part of</label>
<input type="URL" name="isPartOf" id="isPartOf"
placeholder="http://The.Bigger.Framework.org" />
</p>
</fieldset>
<div class="dynamicFields">
<fieldset class="persons" id="author_container">
<legend>Authors</legend>
<input type="hidden" id="author_nb" value="0" />
<div id="addRemoveAuthor">
<input type="button" id="author_add" value="Add one"
onclick="addPerson('author', 'Author');" />
<input type="button" id="author_remove" value="Remove last"
onclick="removePerson('author');" />
</div>
</fieldset>
<fieldset class="persons" id="contributor_container">
<legend>Contributors</legend>
<p>Order of contributors does not matter.</p>
<input type="hidden" id="contributor_nb" value="0" />
<div id="addRemoveContributor">
<input type="button" id="contributor_add" value="Add one"
onclick="addPerson('contributor', 'Contributor');" />
<input type="button" id="contributor_remove" value="Remove last"
onclick="removePerson('contributor');" />
</div>
</fieldset>
</div>
</form>
<form>
<input type="button" id="generateCodemetaV3" value="Generate codemeta.json v3.0" disabled
title="Creates a codemeta.json v3.0 file below, from the information provided above." />
<input type="button" id="generateCodemetaV2" value="Generate codemeta.json v2.0" disabled
title="Creates a codemeta.json v2.0 file below, from the information provided above." />
<input type="button" id="resetForm" value="Reset form"
title="Erases all fields." />
<input type="button" id="validateCodemeta" value="Validate codemeta.json" disabled
title="Checks the codemeta.json file below is valid, and displays errors." />
<input type="button" id="importCodemeta" value="Import codemeta.json" disabled
title="Fills the fields above based on the codemeta.json file below." />
+ <a id="downloadCodemeta"><input type="button" value="Download codemeta.json" disabled
+ title="Download the codemeta.json file as displayed below." /></a>
</form>
<p id="errorMessage">
</p>
<p>codemeta.json:</p>
<pre contentEditable="true" id="codemetaText"></pre>
</main>
<footer>
<p style="text-align:center;">
Do you want to improve this tool ?
Check out the
<a href="https://github.com/codemeta/codemeta-generator">
CodeMeta-generator repository</a>
<br />
Join the
<a href="https://github.com/codemeta/codemeta">CodeMeta community</a>
discussion
<br />
The CodeMeta vocabulary -
<a href="https://doi.org/10.5063/schema/codemeta-2.0">v2.0</a>
-
<a href="https://w3id.org/codemeta/3.0">v3.0</a>
</p>
<h2 style="text-align:right;">Contributed by</h2>
<p style="text-align:right;">
<a href="https://www.softwareheritage.org/save-and-reference-research-software/">
<img alt="Software Heritage" src="https://annex.softwareheritage.org/public/logo/software-heritage-logo-title-motto.svg"
width="300">
</a>
</p>
</footer>
<script src="./js/libs/jsonld/jsonld.min.js"></script>
<script>
Promise.all([loadSpdxData(), loadContextData()]).then(results => {
const [licenses, contexts] = results;
SPDX_LICENSES = licenses;
SPDX_LICENSE_IDS = licenses.map(license => license['licenseId']);
initJsonldLoader(contexts);
initFields();
initCallbacks();
loadStateFromStorage();
});
</script>
</body>
</html>
diff --git a/js/codemeta_generation.js b/js/codemeta_generation.js
index 6dd111d..6366558 100644
--- a/js/codemeta_generation.js
+++ b/js/codemeta_generation.js
@@ -1,437 +1,446 @@
/**
* Copyright (C) 2019-2020 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";
const LOCAL_CONTEXT_PATH = "./data/contexts/codemeta-local.jsonld";
const LOCAL_CONTEXT_URL = "local";
const CODEMETA_CONTEXTS = {
"2.0": {
path: "./data/contexts/codemeta-2.0.jsonld",
url: "https://doi.org/10.5063/schema/codemeta-2.0"
},
"3.0": {
path: "./data/contexts/codemeta-3.0.jsonld",
url: "https://w3id.org/codemeta/3.0"
}
}
const SPDX_PREFIX = 'https://spdx.org/licenses/';
const loadContextData = async () => {
const [contextLocal, contextV2, contextV3] =
await Promise.all([
fetch(LOCAL_CONTEXT_PATH).then(response => response.json()),
fetch(CODEMETA_CONTEXTS["2.0"].path).then(response => response.json()),
fetch(CODEMETA_CONTEXTS["3.0"].path).then(response => response.json())
]);
return {
[LOCAL_CONTEXT_URL]: contextLocal,
[CODEMETA_CONTEXTS["2.0"].url]: contextV2,
[CODEMETA_CONTEXTS["3.0"].url]: contextV3
}
}
const getJsonldCustomLoader = contexts => {
return url => {
const xhrDocumentLoader = jsonld.documentLoaders.xhr();
if (url in contexts) {
return {
contextUrl: null,
document: contexts[url],
documentUrl: url
};
}
return xhrDocumentLoader(url);
}
};
const initJsonldLoader = contexts => {
jsonld.documentLoader = getJsonldCustomLoader(contexts);
};
function emptyToUndefined(v) {
if (v == null || v == "")
return undefined;
else
return v;
}
function getIfSet(query) {
return emptyToUndefined(document.querySelector(query).value);
}
function setIfDefined(query, value) {
if (value !== undefined) {
document.querySelector(query).value = value;
}
}
function getLicenses() {
let selectedLicenses = Array.from(document.getElementById("selected-licenses").children);
return selectedLicenses.map(licenseDiv => SPDX_PREFIX + licenseDiv.children[0].innerText);
}
// Names of codemeta properties with a matching HTML field name
const directCodemetaFields = [
'codeRepository',
'contIntegration',
'dateCreated',
'datePublished',
'dateModified',
'downloadUrl',
'issueTracker',
'name',
'version',
'identifier',
'description',
'applicationCategory',
'releaseNotes',
'funding',
'developmentStatus',
'isSourceCodeOf',
'isPartOf',
'referencePublication'
];
const splittedCodemetaFields = [
['keywords', ','],
['programmingLanguage', ','],
['runtimePlatform', ','],
['operatingSystem', ','],
['softwareRequirements', '\n'],
['relatedLink', '\n'],
]
// Names of codemeta properties with a matching HTML field name,
// in a Person object
const directPersonCodemetaFields = [
'givenName',
'familyName',
'email',
'affiliation',
];
const directRoleCodemetaFields = [
'roleName',
'startDate',
'endDate',
];
const directReviewCodemetaFields = [
'reviewAspect',
'reviewBody'
];
const crossCodemetaFields = {
"contIntegration": ["contIntegration", "continuousIntegration"],
// "embargoDate": ["embargoDate", "embargoEndDate"], Not present in the form yet TODO ?
};
function generateShortOrg(fieldName) {
var affiliation = getIfSet(fieldName);
if (affiliation !== undefined) {
if (isUrl(affiliation)) {
return {
"@type": "Organization",
"@id": affiliation,
};
}
else {
return {
"@type": "Organization",
"name": affiliation,
};
}
}
else {
return undefined;
}
}
function generatePerson(idPrefix) {
var doc = {
"@type": "Person",
}
var id = getIfSet(`#${idPrefix}_id`);
if (id !== undefined) {
doc["@id"] = id;
}
directPersonCodemetaFields.forEach(function (item, index) {
doc[item] = getIfSet(`#${idPrefix}_${item}`);
});
doc["affiliation"] = generateShortOrg(`#${idPrefix}_affiliation`);
return doc;
}
function generateRole(id) {
const doc = {
"@type": "Role"
};
directRoleCodemetaFields.forEach(function (item, index) {
doc[item] = getIfSet(`#${id} .${item}`);
});
return doc;
}
function generateRoles(idPrefix, person) {
const roles = [];
const roleNodes = document.querySelectorAll(`ul[id^=${idPrefix}_role_`);
roleNodes.forEach(roleNode => {
const role = generateRole(roleNode.id);
role["schema:author"] = person; // Prefix with "schema:" to prevent it from expanding into a list
roles.push(role);
});
return roles;
}
function generatePersons(prefix) {
var persons = [];
var nbPersons = getNbPersons(prefix);
for (let personId = 1; personId <= nbPersons; personId++) {
const idPrefix = `${prefix}_${personId}`;
const person = generatePerson(idPrefix);
persons.push(person);
const roles = generateRoles(idPrefix, person);
if (roles.length > 0) {
persons = persons.concat(roles);
}
}
return persons;
}
function generateReview() {
const doc = {
"@type": "Review"
};
directReviewCodemetaFields.forEach(function (item, index) {
doc[item] = getIfSet(`#${item}`);
});
return doc;
}
async function buildExpandedJson() {
var doc = {
"@context": LOCAL_CONTEXT_URL,
"@type": "SoftwareSourceCode",
};
let licenses = getLicenses();
if (licenses.length > 0) {
doc["license"] = licenses;
}
// Generate most fields
directCodemetaFields.forEach(function (item, index) {
doc[item] = getIfSet('#' + item)
});
doc["funder"] = generateShortOrg('#funder', doc["affiliation"]);
const review = generateReview();
if (review["reviewAspect"] || review["reviewBody"]) {
doc["review"] = generateReview();
}
// Generate simple fields parsed simply by splitting
splittedCodemetaFields.forEach(function (item, index) {
const id = item[0];
const separator = item[1];
const value = getIfSet('#' + id);
if (value !== undefined) {
doc[id] = value.split(separator).map(trimSpaces);
}
});
// Generate dynamic fields
var authors = generatePersons('author');
if (authors.length > 0) {
doc["author"] = authors;
}
var contributors = generatePersons('contributor');
if (contributors.length > 0) {
doc["contributor"] = contributors;
}
for (const [key, items] of Object.entries(crossCodemetaFields)) {
items.forEach(item => {
doc[item] = doc[key];
});
}
return await jsonld.expand(doc);
}
// v2.0 is still default version for generation, for now
async function generateCodemeta(codemetaVersion = "2.0") {
var inputForm = document.querySelector('#inputForm');
var codemetaText, errorHTML;
if (inputForm.checkValidity()) {
const expanded = await buildExpandedJson();
const compacted = await jsonld.compact(expanded, CODEMETA_CONTEXTS[codemetaVersion].url);
codemetaText = JSON.stringify(compacted, null, 4);
errorHTML = "";
}
else {
codemetaText = "";
errorHTML = "invalid input (see error above)";
inputForm.reportValidity();
}
document.querySelector('#codemetaText').innerText = codemetaText;
setError(errorHTML);
// Run validator on the exported value, for extra validation.
// If this finds a validation, it means there is a bug in our code (either
// generation or validation), and the generation MUST NOT generate an
// invalid codemeta file, regardless of user input.
if (codemetaText && !validateDocument(JSON.parse(codemetaText))) {
alert('Bug detected! The data you wrote is correct; but for some reason, it seems we generated an invalid codemeta.json. Please report this bug at https://github.com/codemeta/codemeta-generator/issues/new and copy-paste the generated codemeta.json file. Thanks!');
}
if (codemetaText) {
// For restoring the form state on page reload
sessionStorage.setItem('codemetaText', codemetaText);
}
}
// Imports a single field (name or @id) from an Organization.
function importShortOrg(fieldName, doc) {
if (doc !== undefined) {
// Use @id if set, else use name
setIfDefined(fieldName, doc["name"]);
setIfDefined(fieldName, getDocumentId(doc));
}
}
function importReview(doc) {
if (doc !== undefined) {
directReviewCodemetaFields.forEach(item => {
setIfDefined('#' + item, doc[item]);
});
}
}
function authorsEqual(author1, author2) {
// TODO should test more properties for equality?
return author1.givenName === author2.givenName
&& author1.familyName === author2.familyName
&& author1.email === author2.email;
}
function getSingleAuthorsFromRoles(docs) {
return docs.filter(doc => getDocumentType(doc) === "Role")
.map(doc => doc["schema:author"])
.reduce((authorSet, currentAuthor) => {
const foundAuthor = authorSet.find(author => authorsEqual(author, currentAuthor));
if (!foundAuthor) {
return authorSet.concat([currentAuthor]);
} else {
return authorSet;
}
}, []);
}
function importRoles(personPrefix, roles) {
roles.forEach(role => {
const roleId = addRole(`${personPrefix}`);
directRoleCodemetaFields.forEach(item => {
setIfDefined(`#${personPrefix}_${item}_${roleId}`, role[item]);
});
});
}
function importPersons(prefix, legend, docs) {
if (docs === undefined) {
return;
}
const authors = docs.filter(doc => getDocumentType(doc) === "Person");
const authorsFromRoles = getSingleAuthorsFromRoles(docs);
const allAuthorDocs = authors.concat(authorsFromRoles)
.reduce((authors, currentAuthor) => {
if (!authors.find(author => authorsEqual(author, currentAuthor))) {
authors.push(currentAuthor);
}
return authors;
}, []);
allAuthorDocs.forEach(function (doc, index) {
var personId = addPerson(prefix, legend);
setIfDefined(`#${prefix}_${personId}_id`, getDocumentId(doc));
directPersonCodemetaFields.forEach(function (item, index) {
setIfDefined(`#${prefix}_${personId}_${item}`, doc[item]);
});
importShortOrg(`#${prefix}_${personId}_affiliation`, doc['affiliation']);
const roles = docs.filter(currentDoc => getDocumentType(currentDoc) === "Role")
.filter(currentDoc => authorsEqual(currentDoc["schema:author"], doc));
importRoles(`${prefix}_${personId}`, roles);
});
}
async function importCodemeta() {
var inputForm = document.querySelector('#inputForm');
var doc = await parseAndValidateCodemeta(false);
resetForm();
if (doc['license'] !== undefined) {
if (typeof doc['license'] === 'string') {
doc['license'] = [doc['license']];
}
doc['license'].forEach(l => {
if (l.indexOf(SPDX_PREFIX) !== 0) { return; }
let licenseId = l.substring(SPDX_PREFIX.length);
insertLicenseElement(licenseId);
});
}
directCodemetaFields.forEach(function (item, index) {
setIfDefined('#' + item, doc[item]);
});
importShortOrg('#funder', doc["funder"]);
importReview(doc["review"]);
// Import simple fields by joining on their separator
splittedCodemetaFields.forEach(function (item, index) {
const id = item[0];
const separator = item[1];
let value = doc[id];
if (value !== undefined) {
if (Array.isArray(value)) {
value = value.join(separator);
}
setIfDefined('#' + id, value);
}
});
for (const [key, items] of Object.entries(crossCodemetaFields)) {
let value = "";
items.forEach(item => {
value = doc[item] || value;
});
setIfDefined(`#${key}`, value);
}
importPersons('author', 'Author', doc['author'])
importPersons('contributor', 'Contributor', doc['contributor'])
}
function loadStateFromStorage() {
var codemetaText = sessionStorage.getItem('codemetaText')
if (codemetaText) {
document.querySelector('#codemetaText').innerText = codemetaText;
importCodemeta();
}
}
+
+function downloadCodemeta() {
+ const codemetaText = document.querySelector('#codemetaText').innerText;
+ const blob = new Blob([codemetaText], {type: 'application/json'});
+ const url = URL.createObjectURL(blob);
+ document.querySelector('#downloadCodemeta').href = url;
+ document.querySelector('#downloadCodemeta').download = "codemeta.json";
+ URL.revokeObjectURL(url);
+}
diff --git a/js/dynamic_form.js b/js/dynamic_form.js
index f15aba8..dc56d45 100644
--- a/js/dynamic_form.js
+++ b/js/dynamic_form.js
@@ -1,232 +1,236 @@
/**
* 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";
// List of all HTML fields in a Person fieldset.
const personFields = [
'givenName',
'familyName',
'email',
'id',
'affiliation',
];
function createPersonFieldset(personPrefix, legend) {
// Creates a fieldset containing inputs for informations about a person
var fieldset = document.createElement("fieldset")
var moveButtons;
fieldset.classList.add("person");
fieldset.classList.add("leafFieldset");
fieldset.id = personPrefix;
fieldset.innerHTML = `
<legend>${legend}</legend>
<div class="moveButtons">
<input type="button" id="${personPrefix}_moveToLeft" value="<" class="moveToLeft"
title="Moves this person to the left." />
<input type="button" id="${personPrefix}_moveToRight" value=">" class="moveToRight"
title="Moves this person to the right." />
</div>
<p>
<label for="${personPrefix}_givenName">Given name</label>
<input type="text" id="${personPrefix}_givenName" name="${personPrefix}_givenName"
placeholder="Jane" required="true" />
</p>
<p>
<label for="${personPrefix}_familyName">Family name</label>
<input type="text" id="${personPrefix}_familyName" name="${personPrefix}_familyName"
placeholder="Doe" />
</p>
<p>
<label for="${personPrefix}_email">E-mail address</label>
<input type="email" id="${personPrefix}_email" name="${personPrefix}_email"
placeholder="jane.doe@example.org" />
</p>
<p>
<label for="${personPrefix}_id">URI</label>
<input type="url" id="${personPrefix}_id" name="${personPrefix}_id"
placeholder="http://orcid.org/0000-0002-1825-0097" />
</p>
<p>
<label for="${personPrefix}_affiliation">Affiliation</label>
<input type="text" id="${personPrefix}_affiliation" name="${personPrefix}_affiliation"
placeholder="Department of Computer Science, University of Pisa" />
</p>
<input type="hidden" id="${personPrefix}_role_index" value="0" />
<input type="button" id="${personPrefix}_role_add" value="Add one role" />
`;
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"));
document.querySelector(`#${personPrefix}_role_add`)
.addEventListener('click', () => addRole(personPrefix));
}
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);
}
// 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 addRole(personPrefix) {
const roleButtonGroup = document.querySelector(`#${personPrefix}_role_add`);
const roleIndexNode = document.querySelector(`#${personPrefix}_role_index`);
const roleIndex = parseInt(roleIndexNode.value, 10);
const ul = document.createElement("ul")
ul.classList.add("role");
ul.id = `${personPrefix}_role_${roleIndex}`;
ul.innerHTML = `
<li><label for="${personPrefix}_roleName_${roleIndex}">Role</label>
<input type="text" class="roleName" id="${personPrefix}_roleName_${roleIndex}" name="${personPrefix}_roleName_${roleIndex}"
placeholder="Developer" size="10" /></li>
<li><label for="${personPrefix}_startDate_${roleIndex}">Start date:</label>
<input type="date" class="startDate" id="${personPrefix}_startDate_${roleIndex}" name="${personPrefix}_startDate_${roleIndex}" /></li>
<li><label for="${personPrefix}_endDate_${roleIndex}">End date:</label>
<input type="date" class="endDate" id="${personPrefix}_endDate_${roleIndex}" name="${personPrefix}_endDate_${roleIndex}" /></li>
<li><input type="button" id="${personPrefix}_role_remove_${roleIndex}" value="X" title="Remove role" /></li>
`;
roleButtonGroup.after(ul);
document.querySelector(`#${personPrefix}_role_remove_${roleIndex}`)
.addEventListener('click', () => removeRole(personPrefix, roleIndex));
roleIndexNode.value = roleIndex + 1;
return roleIndex;
}
function removeRole(personPrefix, roleIndex) {
document.querySelector(`#${personPrefix}_role_${roleIndex}`).remove();
}
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);
document.querySelector('#generateCodemetaV2').disabled = false;
document.querySelector('#generateCodemetaV2')
.addEventListener('click', () => generateCodemeta("2.0"));
document.querySelector('#generateCodemetaV3').disabled = false;
document.querySelector('#generateCodemetaV3')
.addEventListener('click', () => generateCodemeta("3.0"));
document.querySelector('#resetForm')
.addEventListener('click', resetForm);
document.querySelector('#validateCodemeta').disabled = false;
document.querySelector('#validateCodemeta')
.addEventListener('click', () => parseAndValidateCodemeta(true));
document.querySelector('#importCodemeta').disabled = false;
document.querySelector('#importCodemeta')
.addEventListener('click', importCodemeta);
+ document.querySelector('#downloadCodemeta input').disabled = false;
+ document.querySelector('#downloadCodemeta input')
+ .addEventListener('click', downloadCodemeta);
+
document.querySelector('#inputForm')
.addEventListener('change', () => generateCodemeta());
document.querySelector('#developmentStatus')
.addEventListener('change', fieldToLower);
initPersons('author', 'Author');
initPersons('contributor', 'Contributor');
}