mirror of
https://gitlab.com/comenius-institut/foerbico/metadata-form.git
synced 2025-12-07 15:24:31 +00:00
1242 lines
54 KiB
HTML
1242 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<title>FOERBICO Metadaten Formular</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> -->
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"/>
|
|
|
|
<!-- jQuery Select2 -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"/>
|
|
|
|
<!-- datepicker -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.de.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/locales/bootstrap-datepicker.en-US.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"/>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
|
|
|
|
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-de_DE.min.js"></script>
|
|
<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
|
|
<style>
|
|
.btn-primary {
|
|
background-color: #0A1F40;
|
|
border: 0;
|
|
}
|
|
.btn-outline-primary {
|
|
color: #0A1F40;
|
|
border-color: #0A1F40;
|
|
}
|
|
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
|
|
background-color: #0A1F40;
|
|
border-color: #0A1F40;
|
|
}
|
|
.btn-outline-primary:hover {
|
|
background-color: #0A1F40;
|
|
border-color: #0A1F40;
|
|
}
|
|
|
|
.main {
|
|
margin-top: 40px;
|
|
padding: 0 60px;
|
|
margin-bottom: 50px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.input-dropdown {
|
|
background: #F1F6DF;
|
|
color: #0A1F40;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
|
|
@media only screen and (min-width: 1400px) {
|
|
.dualpane {
|
|
display: flex;
|
|
flex-direction: row;
|
|
column-gap: 40px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1400px) {
|
|
.dualpane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 40px;
|
|
}
|
|
.widescreen {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-light bg-light shadow" style="display: flex; justify-content: space-between;">
|
|
<div class="navbar-brand">
|
|
<img src="logo.svg" height="50" width="50" alt="LOGO">
|
|
</div>
|
|
<div>
|
|
<h2 data-i18n="FORM_HEADING">Kurskatalog Metadaten Formular</h2>
|
|
</div>
|
|
<div class="form-inline">
|
|
<form class=" ml-auto mr-3">
|
|
<button class="btn" type="button" data-toggle="modal" data-target="#importModal">Import</button>
|
|
</form>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarLanguageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span id="selectedLanguageLabel">DE</span>
|
|
</a>
|
|
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarLanguageDropdown">
|
|
<a class="dropdown-item" onclick="changeLanguage('en')">English</a>
|
|
<a class="dropdown-item" onclick="changeLanguage('de')">Deutsch</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Import</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<textarea rows="15" class="form-control" id="importData" placeholder="Daten" data-i18n-placeholder="LABEL_IMPORT_DATA_PLACEHOLDER"></textarea>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="LABEL_CLOSE">Schließen</button>
|
|
<button type="button" class="btn btn-primary" data-i18n="LABEL_IMPORT" onclick="importData()">Import</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="dualpane">
|
|
<!-- left side -->
|
|
<div style="flex: 2;" class="card">
|
|
<form id="metadata-form" class="was-validated">
|
|
<div class="form-group">
|
|
<label for="inputTitle" class="form-row col-form-label" data-i18n="LABEL_TITLE">Titel</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="inputTitle" placeholder="Titel"
|
|
data-i18n-placeholder="LABEL_TITLE" value="" oninput="generate()" required>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputDescription" class="form-row col-form-label"
|
|
data-i18n="LABEL_DESCRIPTION">Beschreibung</label>
|
|
<div class="form-row">
|
|
<textarea class="form-control" id="inputDescription" oninput="generate()" placeholder="Beschreibung" data-i18n-placeholder="LABEL_DESCRIPTION"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputTags" class="form-row col-form-label" data-i18n="LABEL_KEYWORDS">Schlagworte</label>
|
|
<div class="form-row">
|
|
<input type="text" class="form-control" id="inputTags" placeholder="Komma getrennte Liste von Schlagworten"
|
|
data-i18n-placeholder="LABEL_KEYWORDS_PLACEHOLDER" value="" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputEducationalLevel" class="form-row col-form-label" data-i18n="LABEL_EDUCATIONALLEVEL">Bildungsstufe</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputEducationalLevel" data-i18n-title="LABEL_EDUCATIONALLEVEL_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputResourceType" class="form-row col-form-label" data-i18n="LABEL_LEARNINGRESOURCETYPE">Materialart</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputResourceType" data-live-search="true" data-i18n-title="LABEL_LEARNINGRESOURCETYPE_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="creator-list" class="form-row col-form-label" data-i18n="LABEL_CREATOR">Autor</label>
|
|
<div class="form-row">
|
|
<ul class="list-group col" id="creator-list">
|
|
<li class="list-group-item">
|
|
<button type="button" onclick="addCreator()" class="btn btn-primary"><i class="fa fa-plus"></i> <span
|
|
data-i18n="LABEL_CREATOR_ADD">Autor hinzufügen</span></button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputLanguage" class="form-row col-form-label" data-i18n="LABEL_LANGUAGE">Sprache</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputLanguage" data-i18n-title="LABEL_CHOOSE" required multiple>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="choicesLicense" class="form-row col-form-label" data-i18n="LABEL_LICENSE">Lizenz</label>
|
|
<div class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<input type="radio" value="ccLicense" name="license" id="radioLicenseCC" onchange="ccOrSoftwareLicense()" checked>
|
|
<label data-i18n="LABEL_CC_LICENSE">CC-Lizenz</label>
|
|
</div>
|
|
<div class="col-sm-7" id="choicesLicense">
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input type="checkbox" onclick="chooseCCLicense()" class="form-check-input" id="inputLicenseBY" value="BY"
|
|
checked>
|
|
<span data-i18n="LABEL_LICENSE_CHECKBOX_BY">darf ohne Namensnennung verwendet werden</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input type="checkbox" onclick="chooseCCLicense()" class="form-check-input" id="inputLicenseSA" value="SA"
|
|
checked>
|
|
<span data-i18n="LABEL_LICENSE_CHECKBOX_SA">darf unter anderer Lizenz veröffentlicht werden</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input type="checkbox" onclick="chooseCCLicense()" class="form-check-input" id="inputLicenseND" value="ND"
|
|
checked>
|
|
<span data-i18n="LABEL_LICENSE_CHECKBOX_ND">darf verändert werden</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input type="checkbox" onclick="chooseCCLicense()" class="form-check-input" id="inputLicenseNC" value="NC"
|
|
checked>
|
|
<span data-i18n="LABEL_LICENSE_CHECKBOX_NC">darf kommerziell genutzt werden</span>
|
|
<input type="hidden" id="licenseUrl"
|
|
value="https://creativecommons.org/share-your-work/public-domain/cc0/">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<label for="choicesLicense" id="choosenLicense" class="col-form-label">CC-0</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-3" id="softwareLicense">
|
|
<input type="radio" value="softwareLicenseInput" name="license" id="radioLicenseSoftware" onchange="ccOrSoftwareLicense()">
|
|
<label data-i18n="LABEL_SOFTWARE_LICENSE">Software-Lizenz</label>
|
|
</div>
|
|
<div class="col-sm-9" style="padding-top: 1ch">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSoftwareLicense" data-live-search="true" data-i18n-title="LABEL_LICENSE" required disabled>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputSubjectOf" class="form-row col-form-label" data-i18n="LABEL_SUBJECT">Fach</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSubjectOf" data-live-search="true" data-i18n-title="LABEL_CHOOSE" multiple>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputUrl" class="form-row col-form-label" data-i18n="LABEL_URL">URL</label>
|
|
<div class="form-row">
|
|
<input type="url" class="form-control" id="inputUrl" placeholder="URL" data-i18n-placeholder="LABEL_URL_PLACEHOLDER" value="" oninput="generate()">
|
|
<div class="valid-feedback"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputImage" class="form-row col-form-label" data-i18n="LABEL_IMAGE_URL">Vorschaubild URL</label>
|
|
<div class="form-row">
|
|
<input type="url" class="form-control" id="inputImage" placeholder="Vorschaubild URL" data-i18n-placeholder="LABEL_IMAGE_URL" value="" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputStatus" class="form-row col-form-label" data-i18n="LABEL_STATUS">Status</label>
|
|
<div class="form-row">
|
|
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputStatus" onchange="createOrUpdateDatePicker()" required>
|
|
<option value="Draft" data-i18n="LABEL_STATUS_DRAFT" selected>Entwurf</option>
|
|
<option value="Incomplete" data-i18n="LABEL_STATUS_INCOMPLETE">Unvollständig</option>
|
|
<option value="Published" data-i18n="LABEL_STATUS_PUBLISHED">Veröffentlicht</option>
|
|
</select>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" id="datePublishedFormGroup">
|
|
<label for="datePublished" class="form-row col-form-label" data-i18n="LABEL_DATE_PUBLISHED">Veröffentlichungsdatum</label>
|
|
<div class="form-row input-group date" id="datepicker1" data-target-input="nearest">
|
|
<input type="text" id="datepickerInput" class="form-control datepicker-input" data-target="#datepicker1"/>
|
|
<div class="input-group-append" data-target="#datepicker1" data-toggle="datepicker">
|
|
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- right side -->
|
|
<div style="flex: 1;">
|
|
<div class="card">
|
|
<h3 style="text-align: center;" data-i18n="LABEL_METADATA_OUTPUT">Metadata output</h3>
|
|
|
|
<div class="form-group mt-4">
|
|
<ul class="nav nav-tabs" id="outputTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="yaml-tab" data-toggle="tab" data-target="#yaml" type="button" role="tab" aria-controls="yaml" aria-selected="true">YAML</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="json-tab" data-toggle="tab" data-target="#json" type="button" role="tab" aria-controls="json" aria-selected="false">JSON</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content mt-1" id="outputTabContent">
|
|
<div class="tab-pane fade show active" id="yaml" role="tabpanel" aria-labelledby="yaml-tab">
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<button type="button" disabled onclick="copy_generated_output('yaml_output')" class="btn btn-primary my-2" id="button_copy_generated_output_yaml"><i class="fa fa-copy"></i> YAML <span data-i18n="LABEL_COPY">Kopieren</span></button>
|
|
<button type="button" onclick="resetForm()" class="btn btn-primary my-2"><i class="fa fa-rotate-left"></i> <span data-i18n="LABEL_RESET">Reset</span></button>
|
|
</div>
|
|
<textarea class="form-control" rows="15" id="yaml_output"></textarea>
|
|
</div>
|
|
<div class="tab-pane fade" id="json" role="tabpanel" aria-labelledby="json-tab">
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<button type="button" disabled onclick="copy_generated_output('json_output')" class="btn btn-primary my-2" id="button_copy_generated_output_json"><i class="fa fa-copy"></i> JSON <span data-i18n="LABEL_COPY">Kopieren</span></button>
|
|
<button type="button" onclick="resetForm();" class="btn btn-primary my-2"><i class="fa fa-rotate-left"></i> <span data-i18n="LABEL_RESET">Reset</span></button>
|
|
</div>
|
|
<textarea class="form-control" rows="15" id="json_output"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="copied_to_clipboard_toast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-body"><span data-i18n="LABEL_COPIED_TO_CLIPBOARD">In die Zwischenablage kopiert</span></div>
|
|
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<footer class="bg-light text-center">
|
|
<div class="text-center p-3">
|
|
GitLab:
|
|
<a class="text-dark" href="https://gitlab.com/oersi/metadata-form">https://gitlab.com/oersi/metadata-form</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
init();
|
|
|
|
async function init() {
|
|
await loadVocabs();
|
|
await i18nLoader();
|
|
chooseCCLicense();
|
|
addSoftwareLicenses();
|
|
addCreator();
|
|
$("#inputEducationalLevel option[value='https://w3id.org/kim/educationalLevel/level_A']").attr("selected", "true");
|
|
$('.selectpicker').on('change', function (e) {
|
|
generate();
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
|
|
var userLang = navigator.language || navigator.userLanguage;
|
|
if (userLang) {
|
|
changeLanguage(userLang);
|
|
}
|
|
|
|
}
|
|
|
|
let vocabInstitutions = []
|
|
|
|
function loadVocabs() {
|
|
$(document).ready(function () {
|
|
$.getJSON("vocabs/educationalLevel.json", function (result) {
|
|
$.each(result, function (i, item) {
|
|
$("#inputEducationalLevel").append('<option value="' + item + '" data-i18n="' + item + '"></option>');
|
|
});
|
|
});
|
|
$.getJSON("vocabs/hcrt.json", function (result) {
|
|
$.each(result, function (i, item) {
|
|
$("#inputResourceType").append('<option value="' + item + '" data-i18n="' + item + '"></option>');
|
|
});
|
|
});
|
|
$.getJSON("vocabs/language.json", function (result) {
|
|
$.each(result, function (i, item) {
|
|
$("#inputLanguage").append('<option value="' + item + '" data-i18n="' + item + '"></option>');
|
|
});
|
|
});
|
|
$.getJSON("vocabs/organizations.json", function (result) {
|
|
vocabInstitutions = result;
|
|
});
|
|
$.getJSON("vocabs/subject.json", function (result) {
|
|
$.each(result, function (i, item) {
|
|
$("#inputSubjectOf").append('<option value="' + item + '" data-i18n="' + item + '"></option>');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
var licenses = [
|
|
{
|
|
shortName: "CC-0",
|
|
color: "green",
|
|
name: "Public Domain",
|
|
url: "https://creativecommons.org/publicdomain/zero/1.0/deed.de",
|
|
icon: ""
|
|
},
|
|
{
|
|
shortName: "CC BY",
|
|
color: "green",
|
|
name: "Namensnennung 4.0 International",
|
|
url: "https://creativecommons.org/licenses/by/4.0/deed.de",
|
|
icon: ""
|
|
},
|
|
{
|
|
shortName: "CC BY-SA",
|
|
color: "yellow",
|
|
name: "Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International",
|
|
url: "https://creativecommons.org/licenses/by-sa/4.0/deed.de",
|
|
icon: ""
|
|
},
|
|
{
|
|
shortName: "CC BY-ND",
|
|
color: "orange",
|
|
name: "Namensnennung - Keine Bearbeitungen 4.0 International",
|
|
url: "https://creativecommons.org/licenses/by-nd/4.0/deed.de",
|
|
icon: ""
|
|
},
|
|
{
|
|
shortName: "CC BY-NC",
|
|
color: "red",
|
|
name: "Namensnennung-Nicht kommerziell 4.0 International",
|
|
url: "https://creativecommons.org/licenses/by-nc/4.0/deed.de",
|
|
icon: ""
|
|
},
|
|
{
|
|
shortName: "CC BY-SA-NC",
|
|
color: "red",
|
|
name: "Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International",
|
|
url: "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de",
|
|
icon: ""
|
|
},
|
|
{
|
|
shortName: "CC BY-ND-NC",
|
|
color: "red",
|
|
name: "Namensnennung - Nicht kommerziell - Keine Bearbeitungen 4.0 International",
|
|
url: "https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de",
|
|
icon: ""
|
|
}
|
|
];
|
|
|
|
const softwareLicenses = [
|
|
{
|
|
name: 'Apache License 2.0',
|
|
url:'https://opensource.org/license/apache-2-0'
|
|
},
|
|
{
|
|
name: 'BSD 2-Clause "Simplified" License',
|
|
url: 'https://opensource.org/license/bsd-2-clause'
|
|
},
|
|
{
|
|
name: 'BSD 3-Clause "New" or "Revised" License',
|
|
url: 'https://opensource.org/license/bsd-3-clause',
|
|
},
|
|
{
|
|
name: 'GNU General Public License v2.0',
|
|
url: 'https://opensource.org/license/gpl-2-0',
|
|
},
|
|
{
|
|
name: 'GNU General Public License v3.0',
|
|
url: 'https://opensource.org/license/gpl-3-0',
|
|
},
|
|
{
|
|
name: 'GNU Lesser General Public License v2.1',
|
|
url: 'https://opensource.org/license/lgpl-2-1',
|
|
},
|
|
{
|
|
name: 'GNU Affero General Public License v3.0',
|
|
url: 'https://www.gnu.org/licenses/agpl-3.0.html',
|
|
},
|
|
{
|
|
name: 'MIT License',
|
|
url: 'https://opensource.org/license/mit',
|
|
},
|
|
{
|
|
name: 'GNU Free Documentation License',
|
|
url: 'https://www.gnu.org/licenses/fdl-1.3.html',
|
|
},
|
|
{
|
|
name: 'Zero-Clause BSD',
|
|
url: 'https://opensource.org/license/0bsd'
|
|
}
|
|
]
|
|
|
|
function chooseCCLicense() {
|
|
const by = document.getElementById("inputLicenseBY")
|
|
const sa = document.getElementById("inputLicenseSA")
|
|
const nd = document.getElementById("inputLicenseND")
|
|
const nc = document.getElementById("inputLicenseNC")
|
|
let licenseShortName = "CC"
|
|
if (by.checked === false) {
|
|
licenseShortName += " " + by.value
|
|
}
|
|
if (sa.checked === false) {
|
|
licenseShortName += "-" + sa.value
|
|
}
|
|
if (nd.checked === false) {
|
|
licenseShortName += "-" + nd.value
|
|
}
|
|
if (nc.checked === false) {
|
|
licenseShortName += "-" + nc.value
|
|
}
|
|
if (licenseShortName === "CC") {
|
|
licenseShortName = "CC-0"
|
|
}
|
|
document.getElementById("choosenLicense").innerText = licenseShortName
|
|
|
|
let color = ""
|
|
switch (licenseShortName) {
|
|
case "CC-0":
|
|
color = "green"
|
|
by.disabled = false;
|
|
sa.disabled = true;
|
|
nd.disabled = true;
|
|
nc.disabled = true;
|
|
break;
|
|
case "CC BY":
|
|
color = "green"
|
|
by.disabled = false;
|
|
sa.disabled = false;
|
|
nd.disabled = false;
|
|
nc.disabled = false;
|
|
break;
|
|
case "CC BY-SA":
|
|
color = "orange"
|
|
by.disabled = true;
|
|
sa.disabled = false;
|
|
nd.disabled = true;
|
|
nc.disabled = false;
|
|
break;
|
|
case "CC BY-ND":
|
|
color = "orange"
|
|
by.disabled = true;
|
|
sa.disabled = true;
|
|
nd.disabled = false;
|
|
nc.disabled = false;
|
|
break;
|
|
case "CC BY-NC":
|
|
color = "red"
|
|
by.disabled = true;
|
|
sa.disabled = false;
|
|
nd.disabled = false;
|
|
nc.disabled = false;
|
|
break;
|
|
case "CC BY-SA-NC":
|
|
color = "red"
|
|
by.disabled = true;
|
|
sa.disabled = false;
|
|
nd.disabled = true;
|
|
nc.disabled = false;
|
|
break;
|
|
case "CC BY-ND-NC":
|
|
color = "red"
|
|
by.disabled = true;
|
|
sa.disabled = true;
|
|
nd.disabled = false;
|
|
nc.disabled = false;
|
|
break;
|
|
default:
|
|
color = "grey"
|
|
document.getElementById("choosenLicense").innerText = i18next.t("LABEL_INVALID_LICENSE")
|
|
document.getElementById("licenseUrl").value = ""
|
|
by.disabled = false;
|
|
sa.disabled = false;
|
|
nd.disabled = false;
|
|
nc.disabled = false;
|
|
}
|
|
document.getElementById("choosenLicense").style.color = color
|
|
|
|
for (x in licenses) {
|
|
if (licenses[x].shortName === licenseShortName) {
|
|
document.getElementById("licenseUrl").value = licenses[x].url
|
|
}
|
|
}
|
|
|
|
generate();
|
|
}
|
|
|
|
function addSoftwareLicenses() {
|
|
softwareLicenses.forEach((item) => {
|
|
$("#inputSoftwareLicense").append('<option value="' + item.url + '" data-i18n="' + item.name + '">'+item.name+'</option>');
|
|
});
|
|
}
|
|
|
|
function ccOrSoftwareLicense() {
|
|
if(document.getElementById("radioLicenseCC").checked) {
|
|
document.getElementById("inputLicenseBY").disabled = false;
|
|
document.getElementById("choicesLicense").style = "";
|
|
chooseCCLicense();
|
|
document.getElementById("inputSoftwareLicense").setAttribute("disabled", "true");
|
|
} else {
|
|
document.getElementById("inputLicenseBY").disabled = true;
|
|
document.getElementById("choicesLicense").style = "color: gray";
|
|
document.getElementById("choosenLicense").style = "color: gray";
|
|
document.getElementById("inputSoftwareLicense").removeAttribute("disabled");
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
}
|
|
|
|
function splitKeywords(keywordString) {
|
|
const keywords = keywordString.split(",");
|
|
return keywords.map((k) => k.trim());
|
|
}
|
|
|
|
function changeCreatorType(creatorListItem, type) {
|
|
if (type === "Person") {
|
|
creatorListItem.getElementsByClassName("person-label")[0].classList.add("active");
|
|
creatorListItem.getElementsByClassName("person-radio")[0].setAttribute("checked", "true");
|
|
creatorListItem.getElementsByClassName("organization-label")[0].classList.remove("active");
|
|
creatorListItem.getElementsByClassName("organization-radio")[0].removeAttribute("checked");
|
|
} else {
|
|
creatorListItem.getElementsByClassName("person-label")[0].classList.remove("active");
|
|
creatorListItem.getElementsByClassName("person-radio")[0].removeAttribute("checked");
|
|
creatorListItem.getElementsByClassName("organization-label")[0].classList.add("active");
|
|
creatorListItem.getElementsByClassName("organization-radio")[0].setAttribute("checked", "true");
|
|
}
|
|
|
|
const personElements = creatorListItem.getElementsByClassName("person-element");
|
|
for (let i = 0; i < personElements.length; i++) {
|
|
personElements[i].style.display = type === "Person" ? "flex" : "none";
|
|
}
|
|
const organizationElements = creatorListItem.getElementsByClassName("organization-element")
|
|
for (let i = 0; i < organizationElements.length; i++) {
|
|
organizationElements[i].style.display = type === "Organization" ? "flex" : "none"
|
|
}
|
|
|
|
generate();
|
|
}
|
|
|
|
function changeAffiliationType(creatorListItem, type) {
|
|
const affiliationElements = creatorListItem.getElementsByClassName("inputAffiliation")
|
|
for (const element of affiliationElements) {
|
|
if (element.classList.contains("customAffiliation")) {
|
|
element.disabled = type !== "custom";
|
|
} else {
|
|
element.disabled = type === "custom";
|
|
}
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
}
|
|
|
|
function changeOrganizationType(creatorListItem, type) {
|
|
const organizationElements = creatorListItem.getElementsByClassName("inputOrganization")
|
|
for (const element of organizationElements) {
|
|
if (element.classList.contains("customOrganization")) {
|
|
element.disabled = type !== "custom";
|
|
} else {
|
|
element.disabled = type === "custom";
|
|
}
|
|
}
|
|
$('.selectpicker').selectpicker('refresh');
|
|
generate();
|
|
}
|
|
|
|
function addCreator(firstName = "", lastName = "", authorId = "", institution = "", organizationName = "", type = "Person", affiliationName = "") {
|
|
const creatorList = document.getElementById("creator-list");
|
|
const item = document.createElement("li");
|
|
item.setAttribute("class", "list-group-item");
|
|
let institutionOptions = "";
|
|
let organizationOptions = "";
|
|
$.each(vocabInstitutions, function (i, item) {
|
|
institutionOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
|
|
organizationOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
|
|
});
|
|
if (institution?.length > 0 && !vocabInstitutions.find((e) => e["ror"] === institution)) {
|
|
if (affiliationName?.length > 0) {
|
|
institutionOptions += '<option value="' + institution + '"' + ' selected>' + affiliationName + '</option>';
|
|
}
|
|
if (organizationName?.length > 0) {
|
|
organizationOptions += '<option value="' + institution + '"' + ' selected>' + organizationName + '</option>';
|
|
}
|
|
}
|
|
let customInstitutionSelected = institution === "" && affiliationName !== "";
|
|
let customOrganizationSelected = institution === "" && organizationName !== "";
|
|
let radioGroupName = creatorList.childElementCount > 1 ? $(creatorList.lastElementChild.previousElementSibling).find('.inputType').find('input').attr('name') : ''
|
|
radioGroupName += 'x'
|
|
|
|
item.innerHTML = `
|
|
<div class="form-row">
|
|
<div class="btn-group btn-group-toggle inputType" role="group" data-toggle="buttons">
|
|
<label class="btn btn-outline-primary person-label ${type === "Person" ? "active" : ""}" onclick="changeCreatorType(this.parentNode.parentNode.parentNode, 'Person')">
|
|
<input type="radio" class="person-radio" name="${radioGroupName}" ${type === "Person" ? "checked" : ""} value="Person"><span data-i18n="LABEL_PERSON">Person</span>
|
|
</label>
|
|
<label class="btn btn-outline-primary organization-label ${type === "Organization" ? "active" : ""}" onclick="changeCreatorType(this.parentNode.parentNode.parentNode, 'Organization')">
|
|
<input type="radio" class="organization-radio" name="${radioGroupName}" ${type === "Organization" ? "checked" : ""} value="Organization"><span data-i18n="LABEL_ORGANIZATION">Organisation</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-row mt-3 person-element" ${type !== "Person" ? 'style="display:none;"':''}>
|
|
<div class="col">
|
|
<input type="text" class="form-control inputGivenName" placeholder="Vorname" data-i18n-placeholder="LABEL_CREATOR_GIVEN_NAME" value="${firstName}" oninput="generate()" required >
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
<div class="col">
|
|
<input type="text" class="form-control inputFamilyName" placeholder="Nachname" data-i18n-placeholder="LABEL_CREATOR_LAST_NAME" value="${lastName}" oninput="generate()" required>
|
|
<div class="valid-feedback"></div>
|
|
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-row mt-2 person-element" ${type !== "Person" ? 'style="display:none;"':''}>
|
|
<div class="col">
|
|
<input type="url" class="form-control inputAuthorId" placeholder="Persönliche ID (optional, wie ORCID, GND)" data-i18n-placeholder="LABEL_CREATOR_ID" value="${authorId}" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row mt-2 person-element" ${type !== "Person" ? 'style="display:none;"':''}>
|
|
<div class="col-1 m-auto" style="flex-basis: content">
|
|
<input class="affiliationType" type="radio" name="institution_${radioGroupName}" aria-label="radio button for institution list" ${customInstitutionSelected ? "":"checked"} value="standard" onclick="changeAffiliationType(this.parentNode.parentNode.parentNode, 'standard')">
|
|
</div>
|
|
|
|
<div class="col-11 mb-1" id="select-div">
|
|
<select ${customInstitutionSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="form-select inputAffiliation select-institution" id="institution-select">
|
|
<option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></option>
|
|
${institutionOptions}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row person-element" ${type !== "Person" ? 'style="display:none;"':''}>
|
|
<div class="col-1 m-auto" style="flex-basis: content">
|
|
<input class="affiliationType" type="radio" name="institution_${radioGroupName}" aria-label="radio button for custom institution" ${customInstitutionSelected ? "checked":""} value="custom" onclick="changeAffiliationType(this.parentNode.parentNode.parentNode, 'custom')">
|
|
</div>
|
|
<div class="col-11">
|
|
<input type="text" ${customInstitutionSelected ? "":"disabled"} class="form-control customAffiliation inputAffiliation" placeholder="Institution" data-i18n-placeholder="LABEL_CUSTOM_INSTITUTION" value="${customInstitutionSelected ? affiliationName:""}" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row mt-2 organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
|
|
<div class="col-1 m-auto" style="flex-basis: content">
|
|
<input class="organizationType" type="radio" name="organization_${radioGroupName}" aria-label="radio button for organization list" ${customOrganizationSelected ? "":"checked"} value="standard" onclick="changeOrganizationType(this.parentNode.parentNode.parentNode, 'standard')">
|
|
</div>
|
|
<div class="col-11 mb-1" id="select-div">
|
|
<select ${customOrganizationSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="form-select inputOrganization select-organization" id="organization-select">
|
|
<option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></option>
|
|
${organizationOptions}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
|
|
<div class="col-1 m-auto" style="flex-basis: content">
|
|
<input class="organizationType" type="radio" name="organization_${radioGroupName}" aria-label="radio button for organization list" ${customOrganizationSelected ? "checked":""} value="custom" onclick="changeOrganizationType(this.parentNode.parentNode.parentNode, 'custom')">
|
|
</div>
|
|
<div class="col-11">
|
|
<input type="text" ${customOrganizationSelected ? "":"disabled"} class="form-control customOrganization inputOrganization" placeholder="Institution" data-i18n-placeholder="LABEL_CUSTOM_INSTITUTION" value="${customOrganizationSelected ? organizationName:""}" oninput="generate()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row mt-2">
|
|
<div class="col">
|
|
<button type="button" onclick="removeCreator(this.parentNode.parentNode.parentNode)" class="btn btn-primary"><i class="fa fa-minus"></i> <span data-i18n="LABEL_CREATOR_REMOVE"> Autor entfernen</span></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
creatorList.insertBefore(item, creatorList.lastElementChild);
|
|
createOrUpdateSelectInputAffiliation();
|
|
createOrUpdateSelectOrganization();
|
|
createOrUpdateDatePicker();
|
|
updateContent();
|
|
}
|
|
|
|
function removeCreator(creatorListItem) {
|
|
creatorListItem.parentNode.removeChild(creatorListItem);
|
|
generate();
|
|
}
|
|
|
|
function getCreators() {
|
|
const creatorsElement = document.getElementById("creator-list").querySelectorAll(".list-group-item");
|
|
const creators = [];
|
|
for (let i = 0; i < creatorsElement.length - 1; i++) {
|
|
const typeElement = creatorsElement[i].getElementsByClassName("inputType")[0];
|
|
const type = $(typeElement).find('input:radio:checked').val()
|
|
if (type === "Organization") {
|
|
const organizationTypeElement = creatorsElement[i].querySelector("input.organizationType:checked");
|
|
let organizationInput, organization;
|
|
if ("custom" === organizationTypeElement.value) {
|
|
organizationInput = creatorsElement[i].getElementsByClassName("customOrganization")[0].value.trim();
|
|
organization = organizationInput ? {
|
|
name: organizationInput
|
|
} : undefined;
|
|
} else {
|
|
organizationInput = creatorsElement[i].querySelector("select.inputOrganization");
|
|
let organizationName = organizationInput.options[organizationInput.selectedIndex].innerHTML;
|
|
organization = organizationInput && organizationName != "Choose Institution ..." ? {
|
|
name: organizationName,
|
|
id: organizationInput.value
|
|
} : undefined;
|
|
}
|
|
if (organization) {
|
|
creators.push({
|
|
name: organization.name,
|
|
id: organization.id ? organization.id : undefined,
|
|
type: "Organization"
|
|
});
|
|
}
|
|
} else {
|
|
const creatorId = creatorsElement[i].getElementsByClassName("inputAuthorId")[0].value;
|
|
const affiliationTypeElement = creatorsElement[i].querySelector("input.affiliationType:checked");
|
|
let affiliation
|
|
if ("custom" === affiliationTypeElement.value) {
|
|
const affiliationInput = creatorsElement[i].getElementsByClassName("customAffiliation")[0].value.trim();
|
|
affiliation = affiliationInput ? {
|
|
name: affiliationInput,
|
|
type: "Organization"
|
|
} : undefined
|
|
} else {
|
|
const affiliationInput = creatorsElement[i].querySelector("select.inputAffiliation");
|
|
affiliation = affiliationInput.value;
|
|
if (affiliation && affiliation != "Choose Institution ...")
|
|
affiliation = {
|
|
name: affiliationInput.options[affiliationInput.selectedIndex].innerHTML,
|
|
id: affiliationInput.value,
|
|
type: "Organization"
|
|
};
|
|
}
|
|
creators.push({
|
|
givenName: creatorsElement[i].getElementsByClassName("inputGivenName")[0].value.trim(),
|
|
familyName: creatorsElement[i].getElementsByClassName("inputFamilyName")[0].value.trim(),
|
|
id: creatorId ? creatorId : undefined,
|
|
type: "Person",
|
|
affiliation: affiliation
|
|
});
|
|
}
|
|
}
|
|
return creators;
|
|
}
|
|
|
|
function copy_generated_output(text_element_id) {
|
|
if (!navigator.clipboard) {
|
|
return;
|
|
}
|
|
navigator.clipboard.writeText(document.getElementById(text_element_id).value).then(function() {
|
|
$("#copied_to_clipboard_toast").toast("show");
|
|
}, function(err) {
|
|
console.error('Async: Could not copy text: ', err);
|
|
});
|
|
}
|
|
|
|
function resetForm() {
|
|
if (window.confirm(i18next.t("LABEL_CONFIRM_RESET"))) {
|
|
document.getElementById("metadata-form").reset();
|
|
$('.selectpicker').on('change', function (e) {
|
|
generate();
|
|
});
|
|
$('.selectpicker').selectpicker('refresh');
|
|
setCreators();
|
|
chooseCCLicense();
|
|
ccOrSoftwareLicense();
|
|
createOrUpdateDatePicker(reset=true);
|
|
generate();
|
|
}
|
|
}
|
|
|
|
function generate() {
|
|
const creators = getCreators()
|
|
const selectedLanguages = $('#inputLanguage').val();
|
|
const selectedSubjects = $('#inputSubjectOf').val();
|
|
const selectedResourceTypes = $('#inputResourceType').val();
|
|
const selectedEducationalLevel = $('#inputEducationalLevel').val();
|
|
const identifier = document.getElementById("inputUrl").value;
|
|
const datePublished = $("#datepickerInput").datepicker("getDate");
|
|
let meta = {
|
|
"@context": "https://schema.org/",
|
|
creativeWorkStatus: document.getElementById("inputStatus").value,
|
|
type: "LearningResource",
|
|
name: document.getElementById("inputTitle").value,
|
|
description: document.getElementById("inputDescription").value,
|
|
}
|
|
if(document.getElementById("radioLicenseCC").checked) {
|
|
meta.license = document.getElementById("licenseUrl").value
|
|
} else {
|
|
meta.license = document.getElementById("inputSoftwareLicense").value
|
|
}
|
|
if (identifier) {
|
|
meta.id = identifier;
|
|
}
|
|
if (creators.length > 0) {
|
|
meta.creator = creators
|
|
}
|
|
if (document.getElementById("inputTags").value) {
|
|
meta.keywords = splitKeywords(document.getElementById("inputTags").value)
|
|
}
|
|
if (selectedLanguages.length > 0) {
|
|
meta.inLanguage = selectedLanguages;
|
|
}
|
|
if (selectedSubjects.length > 0) {
|
|
meta.about = selectedSubjects
|
|
}
|
|
if (document.getElementById("inputImage").value) {
|
|
meta.image = document.getElementById("inputImage").value
|
|
}
|
|
if (selectedResourceTypes.length > 0) {
|
|
meta.learningResourceType = selectedResourceTypes
|
|
}
|
|
if (selectedEducationalLevel.length > 0) {
|
|
meta.educationalLevel = selectedEducationalLevel
|
|
}
|
|
if (meta.creativeWorkStatus == "Published" && datePublished) {
|
|
let dateString = datePublished.getFullYear() + "-"
|
|
+ ('0' + (datePublished.getMonth()+1)).slice(-2) + "-"
|
|
+ ('0' + datePublished.getDate()).slice(-2);
|
|
meta.datePublished = dateString;
|
|
}
|
|
document.getElementById("yaml_output").value = jsyaml.dump(meta);
|
|
document.getElementById("json_output").value = JSON.stringify(meta, null, 2);
|
|
if (navigator.clipboard) {
|
|
document.getElementById("button_copy_generated_output_yaml").disabled = false
|
|
document.getElementById("button_copy_generated_output_json").disabled = false
|
|
}
|
|
}
|
|
|
|
function setCreators(creators) {
|
|
const creatorsElement = document.getElementById("creator-list").querySelectorAll(".list-group-item");
|
|
for (let i = 0; i < creatorsElement.length - 1; i++) {
|
|
removeCreator(creatorsElement[i]);
|
|
}
|
|
if (creators) {
|
|
for (let i = 0; i < creators.length; i++) {
|
|
if (creators[i].type === "Organization") {
|
|
const name = creators[i].name ? creators[i].name : "";
|
|
const ror = creators[i].id ? creators[i].id : "";
|
|
addCreator("", "", "", ror, name, "Organization");
|
|
} else {
|
|
const firstName = creators[i].givenName ? creators[i].givenName : creators[i].name.split(" ")[0];
|
|
const lastName = creators[i].familyName ? creators[i].familyName: creators[i].name.substring(creators[i].name.indexOf(" ") + 1);
|
|
const authorId = creators[i].id ? creators[i].id : "";
|
|
const ror = creators[i].affiliation?.id ? creators[i].affiliation.id : "";
|
|
const affiliationName = creators[i].affiliation?.name ? creators[i].affiliation.name : "";
|
|
addCreator(firstName, lastName, authorId, ror, "", "Person", affiliationName);
|
|
}
|
|
}
|
|
} else {
|
|
addCreator();
|
|
}
|
|
}
|
|
function importData() {
|
|
try {
|
|
const idMap = (o) => (typeof o === 'string' || o instanceof String) ? o : o.id;
|
|
const data = jsyaml.load(document.getElementById("importData").value);
|
|
const aboutIds = data.about ? data.about.map(idMap) : [];
|
|
const learningResourceTypeIds = data.learningResourceType ? data.learningResourceType.map(idMap) : [];
|
|
const educationalLevelIds = data.educationalLevel ? data.educationalLevel.map(idMap) : [];
|
|
const licenseUrl = data.license ? idMap(data.license) : ""
|
|
|
|
document.getElementById("inputStatus").value = data.creativeWorkStatus ? data.creativeWorkStatus : "Draft";
|
|
$("#datepickerInput").datepicker("update", new Date(data.datePublished));
|
|
document.getElementById("inputUrl").value = data.id ? data.id : "";
|
|
document.getElementById("inputTitle").value = data.name;
|
|
setCreators(data.creator ? data.creator : []);
|
|
document.getElementById("inputTags").value = data.keywords ? data.keywords.join(", ") : "";
|
|
document.getElementById("inputDescription").value = data.description ? data.description : "";
|
|
$('#inputLanguage').val(data.inLanguage ? data.inLanguage : []).selectpicker('refresh');
|
|
$('#inputSubjectOf').val(aboutIds).selectpicker('refresh');
|
|
setLicense((data.license && data.license.id) ? idMap(data.license) : data.license)
|
|
document.getElementById("inputImage").value = data.image ? data.image : "";
|
|
$('#inputResourceType').val(learningResourceTypeIds).selectpicker('refresh');
|
|
if (educationalLevelIds.length > 0) {
|
|
$('#inputEducationalLevel').val(educationalLevelIds).selectpicker('refresh');
|
|
}
|
|
} catch (e) {
|
|
console.warn(e);
|
|
alert(i18next.t("LABEL_IMPORT_ERROR_MSG"));
|
|
} finally {
|
|
$('#importModal').modal('hide')
|
|
}
|
|
}
|
|
function setLicense(license) {
|
|
if (license.startsWith("https://creativecommons.org/")) {
|
|
const by = document.getElementById("inputLicenseBY")
|
|
const sa = document.getElementById("inputLicenseSA")
|
|
const nd = document.getElementById("inputLicenseND")
|
|
const nc = document.getElementById("inputLicenseNC")
|
|
if (license.startsWith("https://creativecommons.org/publicdomain/zero/")) {
|
|
by.checked = true;
|
|
sa.checked = true;
|
|
nd.checked = true;
|
|
nc.checked = true;
|
|
} else if (license.startsWith("https://creativecommons.org/licenses/by/")) {
|
|
by.checked = false;
|
|
sa.checked = true;
|
|
nd.checked = true;
|
|
nc.checked = true;
|
|
} else if (license.startsWith("https://creativecommons.org/licenses/by-sa/")) {
|
|
by.checked = false;
|
|
sa.checked = false;
|
|
nd.checked = true;
|
|
nc.checked = true;
|
|
} else if (license.startsWith("https://creativecommons.org/licenses/by-nd/")) {
|
|
by.checked = false;
|
|
sa.checked = true;
|
|
nd.checked = false;
|
|
nc.checked = true;
|
|
} else if (license.startsWith("https://creativecommons.org/licenses/by-nc/")) {
|
|
by.checked = false;
|
|
sa.checked = true;
|
|
nd.checked = true;
|
|
nc.checked = false;
|
|
} else if (license.startsWith("https://creativecommons.org/licenses/by-nc-sa/")) {
|
|
by.checked = false;
|
|
sa.checked = false;
|
|
nd.checked = true;
|
|
nc.checked = false;
|
|
} else if (license.startsWith("https://creativecommons.org/licenses/by-nc-nd/")) {
|
|
by.checked = false;
|
|
sa.checked = true;
|
|
nd.checked = false;
|
|
nc.checked = false;
|
|
} else {
|
|
by.checked = false;
|
|
sa.checked = false;
|
|
nd.checked = false;
|
|
nc.checked = false;
|
|
}
|
|
chooseCCLicense();
|
|
} else {
|
|
document.getElementById("inputSoftwareLicense").name = softwareLicenses.find(l => l.url == license).name;
|
|
document.getElementById("inputSoftwareLicense").value = license;
|
|
document.getElementById("radioLicenseSoftware").checked = "true";
|
|
document.getElementById("inputLicenseBY").disabled = true;
|
|
document.getElementById("choicesLicense").style = "color: gray";
|
|
document.getElementById("choosenLicense").style = "color: gray";
|
|
document.getElementById("inputSoftwareLicense").removeAttribute("disabled");
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
}
|
|
|
|
async function i18nLoader() {
|
|
const langs = ["en", "de"];
|
|
const jsons = await Promise.all(
|
|
langs.map((l) => fetch("i18n/" + l + ".json").then((r) => r.json()))
|
|
);
|
|
const educationalLevelLabels = await Promise.all(
|
|
langs.map((l) => fetch("i18n/educationalLevel-" + l + ".json").then((r) => r.json()))
|
|
);
|
|
const hcrt = await Promise.all(
|
|
langs.map((l) => fetch("i18n/hcrt-" + l + ".json").then((r) => r.json()))
|
|
);
|
|
const languageLabels = await Promise.all(
|
|
langs.map((l) => fetch("i18n/language-" + l + ".json").then((r) => r.json()))
|
|
);
|
|
const subjectLabels = await Promise.all(
|
|
langs.map((l) => fetch("i18n/subject-" + l + ".json").then((r) => r.json()))
|
|
);
|
|
const res = langs.reduce((acc, l, idx) => {
|
|
acc[l] = {translation: {...jsons[idx], ...educationalLevelLabels[idx], ...hcrt[idx], ...languageLabels[idx], ...subjectLabels[idx]}};
|
|
return acc;
|
|
}, {});
|
|
await i18next.init({
|
|
lng: "de",
|
|
debug: false,
|
|
nsSeparator: "#",
|
|
resources: res,
|
|
fallbackLng: 'en'
|
|
});
|
|
updateContent();
|
|
i18next.on("languageChanged", () => {
|
|
updateContent();
|
|
});
|
|
}
|
|
function changeLanguage(languageCode) {
|
|
i18next.changeLanguage(languageCode);
|
|
document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
|
|
createOrUpdateSelectInputAffiliation();
|
|
createOrUpdateSelectOrganization();
|
|
createOrUpdateDatePicker();
|
|
}
|
|
|
|
function createOrUpdateSelectOrganization() {
|
|
$('.select-organization').select2({
|
|
language: {
|
|
noResults: () => i18next.t("LABEL_NO_INSTITUTION_FOUND")
|
|
},
|
|
placeholder: i18next.t("LABEL_ORGANIZATION_CHOOSE"),
|
|
theme: "bootstrap",
|
|
ajax: {
|
|
url: 'https://api.ror.org/organizations?query=',
|
|
data: function (params) {
|
|
return {
|
|
query: params.term,
|
|
filter: "types:Education"
|
|
}
|
|
},
|
|
processResults: function (data, params) {
|
|
let results = [];
|
|
|
|
if (params.term) {
|
|
let localInstitutions = vocabInstitutions.map(institution => ({"name": institution["label"], "id": institution["ror"]}));
|
|
let rorInstitutions = data["items"].map(institution => ({"name": institution.name, "id": institution.id}));
|
|
|
|
let matchedLocalInstitutions = localInstitutions.filter(function(item) {
|
|
return item.name.toLowerCase().includes(params.term.toLowerCase());
|
|
});
|
|
|
|
let filteredRorInstitutions = rorInstitutions.filter(function(item) {
|
|
return !matchedLocalInstitutions.find(value => value.id == item.id);
|
|
});
|
|
|
|
results = [...matchedLocalInstitutions, ...filteredRorInstitutions];
|
|
}
|
|
|
|
return {
|
|
results: $.map(results, function(item) {
|
|
return {
|
|
text: item.name,
|
|
id: item.id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
});
|
|
$('.select-organization').on('select2:select', function (e) {
|
|
generate();
|
|
});
|
|
}
|
|
|
|
function createOrUpdateSelectInputAffiliation() {
|
|
$('.select-institution').select2({
|
|
language: {
|
|
noResults: () => i18next.t("LABEL_NO_INSTITUTION_FOUND")
|
|
},
|
|
placeholder: i18next.t("LABEL_ORGANIZATION_CHOOSE"),
|
|
theme: "bootstrap",
|
|
ajax: {
|
|
url: 'https://api.ror.org/organizations?query=',
|
|
data: function (params) {
|
|
return {
|
|
query: params.term,
|
|
filter: "types:Education"
|
|
}
|
|
},
|
|
processResults: function (data, params) {
|
|
let results = [];
|
|
|
|
if (params.term) {
|
|
let localInstitutions = vocabInstitutions.map(institution => ({"name": institution["label"], "id": institution["ror"]}));
|
|
let rorInstitutions = data["items"].map(institution => ({"name": institution.name, "id": institution.id}));
|
|
|
|
let matchedLocalInstitutions = localInstitutions.filter(function(item) {
|
|
return item.name.toLowerCase().includes(params.term.toLowerCase());
|
|
});
|
|
|
|
let filteredRorInstitutions = rorInstitutions.filter(function(item) {
|
|
return !matchedLocalInstitutions.find(value => value.id == item.id);
|
|
});
|
|
|
|
results = [...matchedLocalInstitutions, ...filteredRorInstitutions];
|
|
}
|
|
|
|
return {
|
|
results: $.map(results, function(item) {
|
|
return {
|
|
text: item.name,
|
|
id: item.id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
});
|
|
$('.select-institution').on('select2:select', function (e) {
|
|
generate();
|
|
});
|
|
}
|
|
|
|
function createOrUpdateDatePicker(reset=false) {
|
|
// Keep previously set date when changing the language
|
|
let date = $("#datepickerInput").datepicker("getDate");
|
|
|
|
if (document.getElementById("inputStatus").value != "Published") {
|
|
document.getElementById("datepickerInput").required = false;
|
|
document.getElementById("datePublishedFormGroup").hidden = true;
|
|
} else {
|
|
// Make required if input status is set to published
|
|
document.getElementById("datepickerInput").required = true;
|
|
document.getElementById("datePublishedFormGroup").hidden = false;
|
|
}
|
|
$('#datepickerInput').datepicker("destroy");
|
|
let language = document.getElementById("selectedLanguageLabel").textContent.toLowerCase();
|
|
if (language == "en") language += "-US";
|
|
$('#datepickerInput').datepicker({
|
|
language: language
|
|
});
|
|
if (date && !reset) {
|
|
$("#datepickerInput").datepicker("update", new Date(date));
|
|
} else {
|
|
$("#datepickerInput").val("").datepicker("update");;
|
|
}
|
|
$("#datepickerInput").datepicker().on("changeDate", function(e) {
|
|
generate();
|
|
});
|
|
}
|
|
|
|
function updateContent() {
|
|
let elements = document.querySelectorAll('[data-i18n]');
|
|
for (let i = 0; i < elements.length; i++) {
|
|
const element = elements[i];
|
|
const k = element.getAttribute("data-i18n");
|
|
element.innerHTML = i18next.t(k);
|
|
}
|
|
elements = document.querySelectorAll('[data-i18n-placeholder]');
|
|
for (let i = 0; i < elements.length; i++) {
|
|
const element = elements[i];
|
|
const k = element.getAttribute("data-i18n-placeholder");
|
|
element.setAttribute("placeholder", i18next.t(k));
|
|
}
|
|
$("[data-i18n-title]").each( function () {
|
|
const k = $(this).attr("data-i18n-title")
|
|
$(this).selectpicker({title: i18next.t(k)}).selectpicker('render');
|
|
})
|
|
$('.selectpicker').selectpicker('refresh');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|