908 lines
36 KiB
JavaScript
908 lines
36 KiB
JavaScript
/*
|
|
* This program is free software; you can redistribute it and/or
|
|
* modify it under the terms of the GNU General Public License
|
|
* as published by the Free Software Foundation; under version 2
|
|
* of the License (non-upgradable).
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program; if not, write to the Free Software
|
|
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
*
|
|
* Copyright (c) 2015-2019 (original work) Open Assessment Technologies SA ;
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* UiForm class enable you to manage form elements, initialize form component and bind common events
|
|
*
|
|
* @author Bertrand Chevrier, <bertrand.chevrier@tudor.lu>
|
|
*/
|
|
define([
|
|
'module',
|
|
'jquery',
|
|
'lodash',
|
|
'i18n',
|
|
'helpers',
|
|
'context',
|
|
'form/property',
|
|
'form/post-render-props',
|
|
'form/depends-on-property',
|
|
'util/encode',
|
|
'ckeditor',
|
|
'ui/ckeditor/ckConfigurator',
|
|
'ui/datetime/picker',
|
|
'ui/dialog/confirmDelete',
|
|
'core/request',
|
|
'util/url',
|
|
], function (
|
|
module,
|
|
$,
|
|
_,
|
|
__,
|
|
helpers,
|
|
context,
|
|
property,
|
|
postRenderProps,
|
|
dependsOn,
|
|
encode,
|
|
ckeditor,
|
|
ckConfigurator,
|
|
dateTimePicker,
|
|
confirmDialog,
|
|
request,
|
|
urlUtil,
|
|
) {
|
|
'use strict';
|
|
|
|
/**
|
|
* Create a URL based on action and module
|
|
*
|
|
* @param action
|
|
* @returns {string}
|
|
*/
|
|
var getUrl = function getUrl(action) {
|
|
var conf = module.config();
|
|
return context.root_url + conf.extension + '/' + conf.module + '/' + action;
|
|
};
|
|
|
|
var UiForm = {
|
|
|
|
/**
|
|
* Keep references to CkEditor instances, per field
|
|
*/
|
|
htmlEditors : {},
|
|
|
|
init: function init() {
|
|
var self = this;
|
|
|
|
$('body').off('change', 'input[value=notEmpty]').on('change', 'input[value=notEmpty]', function(event) {
|
|
let primaryPropertyUri = $(event.target).closest('[id^="property_"]').attr('id').replace('property_', '');
|
|
const secondaryProperties = $(`option[value=${primaryPropertyUri}][selected='selected']`).closest('[id^="property_"]');
|
|
let secondaryPropertiesCheckbox = secondaryProperties.find('[value=notEmpty]');
|
|
|
|
secondaryPropertiesCheckbox.each((i, notEmptyCheckbox) => {
|
|
if (event.target.checked) {
|
|
notEmptyCheckbox.disabled = false;
|
|
} else {
|
|
notEmptyCheckbox.disabled = true;
|
|
notEmptyCheckbox.checked = false;
|
|
}
|
|
})
|
|
});
|
|
|
|
this.counter = 0;
|
|
this.initGenerisFormPattern = new RegExp(['add', 'edit', 'mode', 'PropertiesAuthoring'].join('|'), 'i');
|
|
this.initTranslationFormPattern = /translate/;
|
|
this.htmlEditors = {};
|
|
|
|
$(document).ajaxComplete(function (event, request, settings) {
|
|
var testedUrl;
|
|
|
|
//initialize regarding the requested action
|
|
//async request waiting for html or not defined
|
|
if (settings.dataType === 'html' || !settings.dataType) {
|
|
if (settings.url.indexOf('?') !== -1) {
|
|
testedUrl = settings.url.substr(0, settings.url.indexOf('?'));
|
|
}
|
|
else {
|
|
testedUrl = settings.url;
|
|
}
|
|
|
|
self.initRendering();
|
|
self.initElements();
|
|
if (self.initGenerisFormPattern.test(testedUrl)) {
|
|
self.initOntoForms();
|
|
}
|
|
if (self.initTranslationFormPattern.test(testedUrl)) {
|
|
self.initTranslationForm();
|
|
}
|
|
}
|
|
});
|
|
this.initRendering();
|
|
},
|
|
|
|
/**
|
|
* make some adjustment on the forms
|
|
*/
|
|
initRendering: function initRendering() {
|
|
|
|
var self = this;
|
|
|
|
var $container = $('.content-block .xhtml_form:first'),
|
|
$toolBar = $container.find('.form-toolbar'),
|
|
$authoringBtn = $('.authoringOpener'),
|
|
$authoringBtnParent,
|
|
$testAuthoringBtn = $('.test-authoring'),
|
|
$rdfImportForm = $('.rdfImport #import'),
|
|
$rdfExportForm = $('.rdfExport #export');
|
|
|
|
// allows to fix label position for list of radio buttons
|
|
$('.form_desc ~.form_radlst').parent().addClass('bool-list');
|
|
|
|
// allows long labels if the following input is hidden
|
|
$('.form_desc + input[type="hidden"]').prev().addClass('hidden-input-label');
|
|
|
|
// move authoring button to toolbar, unless it is already there
|
|
if($authoringBtn.length && !$authoringBtn.hasClass('btn-info')) {
|
|
$authoringBtnParent = $authoringBtn.parent();
|
|
$authoringBtn.prepend($('<span>', { 'class': 'icon-edit' }));
|
|
$authoringBtn.addClass('btn-info small');
|
|
$authoringBtn.appendTo($toolBar);
|
|
$authoringBtnParent.remove();
|
|
}
|
|
|
|
// move test authoring button
|
|
if($testAuthoringBtn.length) {
|
|
$testAuthoringBtn.prependTo($toolBar);
|
|
}
|
|
|
|
// import Ontology styling changes
|
|
if($rdfImportForm.length) {
|
|
$('span.form_desc:empty',$rdfImportForm).hide();
|
|
$('span.form-elt-info',$rdfImportForm).css({
|
|
display: 'block',
|
|
width: '100%'
|
|
});
|
|
$('.form-elt-container.file-uploader',$rdfImportForm).css({
|
|
width: '65%',
|
|
float: 'right'
|
|
});
|
|
|
|
}
|
|
if($rdfExportForm.length){
|
|
$('div:first',$rdfExportForm).find('input[type="text"]').css('width', 'calc(65% - 23px)');
|
|
$('div:not(.form-toolbar):last span',$rdfExportForm).css('float', 'right')
|
|
.closest('div')
|
|
.find('[id*="ns_filter"]')
|
|
.addClass('btn-default small');
|
|
}
|
|
|
|
$('body').off('submit','.xhtml_form form').on('submit', '.xhtml_form form', function (e) {
|
|
var $form = $(this);
|
|
e.preventDefault();
|
|
|
|
return self.submitForm($form, self.getFormData($form));
|
|
});
|
|
|
|
$('.form-submitter').off('click').on('click', function (e) {
|
|
e.preventDefault();
|
|
$(this).addClass('current-submitter');
|
|
$(e.target).closest('.xhtml_form form').trigger('submit');
|
|
});
|
|
|
|
// modify properties
|
|
postRenderProps.init();
|
|
},
|
|
|
|
/**
|
|
* Retrieve form fields and pack to internal format for transfering
|
|
* @param {jQueryElement} $form
|
|
* @returns {object|undefined}
|
|
*/
|
|
getFormData: function getFormData($form) {
|
|
var formData = {};
|
|
var clazz = {};
|
|
var properties = [];
|
|
var indexes = [];
|
|
|
|
//for backward compatibility
|
|
if (!$('[id="tao.forms.class"]').length) {
|
|
return;
|
|
}
|
|
|
|
//get all global data
|
|
$('input.global', $form[0]).each(function () {
|
|
var $global = $(this);
|
|
var name = $global.attr('name');
|
|
if (name.indexOf('class_') > -1) {
|
|
name = name.replace('class_', '');
|
|
clazz[name] = $global.val();
|
|
|
|
}
|
|
else {
|
|
formData[name] = $global.val();
|
|
}
|
|
});
|
|
if (clazz.length !== 0) {
|
|
formData.class = clazz;
|
|
}
|
|
|
|
//get data for each property
|
|
$('.regular-property', $form[0]).each(function () {
|
|
var property = {};
|
|
var name = '',
|
|
isArray = false;
|
|
|
|
//get range on advanced mode
|
|
var range = [];
|
|
$('[id*="http_2_www_0_w3_0_org_1_2000_1_01_1_rdf-schema_3_range-TreeBox"]', this).find('.checked').each(function () {
|
|
range.push($(this).parent().attr('id'));
|
|
});
|
|
if (range.length !== 0) {
|
|
property['http_2_www_0_w3_0_org_1_2000_1_01_1_rdf-schema_3_range'] = range;
|
|
}
|
|
|
|
$(':input.property', this).each(function () {
|
|
var $property = $(this);
|
|
name = $property.attr('name').replace(/(property_)?[^_]+_/, '');
|
|
|
|
isArray = (name.indexOf('[]') === name.length - 2);
|
|
if ($property.attr('type') === 'checkbox' && isArray) {
|
|
name = name.substr(0, name.length - 2);
|
|
if ($property.is(':checked')) {
|
|
if (!_.isArray(property[name])) {
|
|
property[name] = [];
|
|
}
|
|
property[name].push($property.val());
|
|
}
|
|
|
|
} else if ($property.attr('type') === 'radio') {
|
|
if ($property.is(':checked')) {
|
|
property[name] = $property.val();
|
|
}
|
|
}
|
|
else {
|
|
property[name] = $property.val();
|
|
}
|
|
|
|
});
|
|
//get data for each index
|
|
$(':input.index', this).each(function () {
|
|
|
|
var i;
|
|
var found = false;
|
|
var name = '';
|
|
var $index = $(this);
|
|
for (i in indexes) {
|
|
if (indexes[i] && $index.attr('data-related-index') === indexes[i].uri) {
|
|
name = $index.attr('name').replace(/(index_)?[^_]+_/, '');
|
|
if ($index.attr('type') === 'radio' || $index.attr('type') === 'checkbox') {
|
|
if ($index.is(':checked')) {
|
|
indexes[i][name] = $index.val();
|
|
}
|
|
}
|
|
else {
|
|
indexes[i][name] = $index.val();
|
|
}
|
|
|
|
found = true;
|
|
}
|
|
}
|
|
if (!found) {
|
|
var index = {};
|
|
index.uri = $index.attr('data-related-index');
|
|
name = $index.attr('name').replace(/(index_)?[^_]+_/, '');
|
|
if ($index.attr('type') === 'radio') {
|
|
if ($index.is(':checked')) {
|
|
index[name] = $index.val();
|
|
}
|
|
}
|
|
else {
|
|
index[name] = $index.val();
|
|
}
|
|
indexes.push(index);
|
|
}
|
|
|
|
|
|
});
|
|
//add indexes to related property
|
|
property.indexes = indexes;
|
|
properties.push(property);
|
|
});
|
|
|
|
formData.properties = properties;
|
|
|
|
return formData;
|
|
},
|
|
|
|
initElements: function initElements() {
|
|
var self = this;
|
|
var $uriElm;
|
|
var $classUriElm;
|
|
|
|
//revert form button
|
|
$(".form-refresher").off('click').on('click', function () {
|
|
var $form = $(this).parents('form');
|
|
$(":input[name='" + $form.attr('name') + "_sent']").remove();
|
|
|
|
return $form.submit();
|
|
});
|
|
|
|
//translate button
|
|
$uriElm = $("#uri"),
|
|
$classUriElm = $("#classUri");
|
|
|
|
$(".form-translator").off('click').on('click', function () {
|
|
if ( $uriElm.length && $classUriElm.length) {
|
|
helpers.getMainContainer().load(getUrl('translateInstance'), {'uri': $uriElm.val(), 'classUri': $classUriElm.val()});
|
|
}
|
|
return false;
|
|
});
|
|
|
|
//map the wysiwyg editor to the html-area fields
|
|
$('.html-area').each(function () {
|
|
var propertyUri = this.id;
|
|
|
|
// destroy previously created editors
|
|
if (ckeditor.instances[propertyUri]) {
|
|
ckeditor.instances[propertyUri].destroy(this);
|
|
delete self.htmlEditors[propertyUri];
|
|
}
|
|
|
|
var editor = ckeditor.replace(this);
|
|
editor.config = ckConfigurator.getConfig(editor, 'htmlField', {resize_enabled : false });
|
|
self.htmlEditors[propertyUri] = editor;
|
|
});
|
|
|
|
$('.datepicker-input').each(function(){
|
|
dateTimePicker($(this).parent(), {
|
|
replaceField : this,
|
|
setup : 'datetime',
|
|
controlButtons : true
|
|
});
|
|
});
|
|
|
|
$('.box-checker').off('click').on('click', function () {
|
|
var $checker = $(this);
|
|
var regexpId = new RegExp('^' + $checker.prop('id').replace('_checker', ''), 'i');
|
|
|
|
if ($checker.hasClass('box-checker-uncheck')) {
|
|
$(":checkbox:not(:disabled)").each(function () {
|
|
if (regexpId.test(this.id)) {
|
|
//noinspection JSPotentiallyInvalidUsageOfThis,JSPotentiallyInvalidUsageOfThis
|
|
this.checked = false;
|
|
$(this).change();
|
|
}
|
|
});
|
|
$checker.removeClass('box-checker-uncheck');
|
|
$checker.text(__('Check all'));
|
|
}
|
|
else {
|
|
$(":checkbox:not(:disabled)").each(function () {
|
|
if (regexpId.test(this.id)) {
|
|
this.checked = true;
|
|
$(this).change();
|
|
}
|
|
});
|
|
$checker.addClass('box-checker-uncheck');
|
|
$checker.text(__('Uncheck all'));
|
|
}
|
|
|
|
return false;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* init special forms controls
|
|
*/
|
|
initOntoForms: function () {
|
|
|
|
|
|
//open the authoring tool on the authoringOpener button
|
|
$('.authoringOpener').click(function () {
|
|
var tabUrl = getUrl('authoring'),
|
|
tabId = 'panel-' + module.config().module.toLowerCase() + '_authoring',
|
|
$tabContainer = $('#tabs'),
|
|
$panel = (function() {
|
|
var $wantedPanel = $tabContainer.find('#' + tabId);
|
|
|
|
if(!$wantedPanel.length) {
|
|
$wantedPanel = $('<div>', { id: tabId, 'class': 'clear content-panel' }).hide();
|
|
$tabContainer.find('.content-panel').after($wantedPanel);
|
|
}
|
|
return $wantedPanel;
|
|
}());
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: tabUrl,
|
|
data: {
|
|
uri: $("#uri").val(),
|
|
classUri: $("#classUri").val()
|
|
},
|
|
dataType: 'html',
|
|
success: function (responseHtml) {
|
|
$tabContainer.find('.content-panel').not($panel).hide();
|
|
window.location.hash = tabId;
|
|
responseHtml = $(responseHtml);
|
|
responseHtml.find('#authoringBack').click(function () {
|
|
var $myPanel = $(this).parents('.content-panel'),
|
|
$otherPanel = $myPanel.prev();
|
|
$myPanel.hide();
|
|
$otherPanel.show();
|
|
});
|
|
$panel.html(responseHtml).show();
|
|
}
|
|
});
|
|
});
|
|
|
|
$('input.editVersionedFile').each(function () {
|
|
var infoUrl = context.root_url + 'tao/File/getPropertyFileInfo';
|
|
var data = {
|
|
'uri': $("#uri").val(),
|
|
'propertyUri': $(this).siblings('label.form_desc').prop('for')
|
|
};
|
|
var $_this = $(this);
|
|
$.ajax({
|
|
type: "GET",
|
|
url: infoUrl,
|
|
data: data,
|
|
dataType: 'json',
|
|
success: function (r) {
|
|
$_this.after('<span>' + r.name + '</span>');
|
|
}
|
|
});
|
|
}).click(function () {
|
|
var data = {
|
|
'uri': $("#uri").val(),
|
|
'propertyUri': $(this).siblings('label.form_desc').prop('for')
|
|
};
|
|
|
|
helpers.getMainContainer().load(getUrl('editVersionedFile'), data);
|
|
return false;
|
|
});
|
|
|
|
function buildClassPropertiesAuthoringURL(action) {
|
|
const shownExtensions = context.shownExtension;
|
|
|
|
let extension = 'tao';
|
|
let controller = 'PropertiesAuthoring';
|
|
|
|
if (shownExtensions === 'taoItems') {
|
|
extension = shownExtensions;
|
|
controller = 'Items';
|
|
}
|
|
|
|
return helpers._url(action, controller, extension);
|
|
}
|
|
|
|
/**
|
|
* Validate if property has a dependency
|
|
*/
|
|
async function checkForDependency(propertyUri) {
|
|
try {
|
|
const url = urlUtil.route('getDependentProperties', 'PropertyValues', 'tao', { propertyUri })
|
|
const response = await request({ url, method: 'GET', dataType: 'json'})
|
|
if (response.success && response.data) { return response.data; }
|
|
else { throw response; }
|
|
} catch (err) {
|
|
console.error(err);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function regularConfirmantion() {
|
|
return window.confirm(__('Please confirm property deletion!'));
|
|
}
|
|
|
|
async function getPropertyRemovalConfirmation($groupNode, uri) {
|
|
const dependencies = await checkForDependency(uri);
|
|
|
|
return new Promise((resolve, reject) => {
|
|
if (!dependencies.length) {
|
|
return regularConfirmantion() ? resolve() : reject();
|
|
} else {
|
|
const name = $groupNode.find('.property-heading-label')[0].innerText;
|
|
const dependantPropName = dependencies.reduce((prev, next, index) => {
|
|
const delimiter = index === dependencies.length - 1 ? '' : ', '
|
|
return prev + `${next.label}${delimiter}`;
|
|
}, '');
|
|
|
|
confirmDialog(
|
|
`<b>${name}</b>
|
|
${__('currently has a dependency established with ')}
|
|
<b>${dependantPropName}</b>.
|
|
${__('Deleting this property will also remove the dependency')}.
|
|
<br><br> ${__('Are you wish to delete it')}?`,
|
|
resolve,
|
|
reject
|
|
);
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* remove a form group, ie. a property
|
|
*/
|
|
async function removePropertyGroup() {
|
|
const $groupNode = $(this).closest(".form-group");
|
|
try {
|
|
await getPropertyRemovalConfirmation($groupNode, $(this).data("uri"));
|
|
} catch (err) { return; }
|
|
|
|
property.remove(
|
|
$(this).data("uri"),
|
|
$("#id").val(),
|
|
buildClassPropertiesAuthoringURL('removeClassProperty'),
|
|
function() {
|
|
$groupNode.remove();
|
|
}
|
|
);
|
|
|
|
document.getElementById('item-class-schema').click();
|
|
}
|
|
|
|
//property delete button
|
|
$(".property-deleter").off('click').on('click', removePropertyGroup);
|
|
|
|
//property add button
|
|
$(".property-adder").off('click').on('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
property.add($("#id").val(), buildClassPropertiesAuthoringURL('addClassProperty'));
|
|
});
|
|
|
|
$(".index-adder").off('click').on('click', function (e) {
|
|
e.preventDefault();
|
|
var $prependTo = $(this).closest('div');
|
|
var $groupNode = $(this).closest(".form-group");
|
|
if ($groupNode.length) {
|
|
var max = 0;
|
|
var $propertyindex = $('.property-uri', $groupNode);
|
|
var propertyindex = parseInt($propertyindex.attr('id').replace(/[\D]+/, ''));
|
|
|
|
|
|
$groupNode.find('[data-index]').each(function(){
|
|
if(max < $(this).data('index')){
|
|
max = $(this).data('index');
|
|
}
|
|
});
|
|
|
|
max = max + 1;
|
|
var uri = $groupNode.find('.property-uri').val();
|
|
$.ajax({
|
|
type: "GET",
|
|
url: helpers._url('addPropertyIndex', 'PropertiesAuthoring', 'tao'),
|
|
data: {uri : uri, index : max, propertyIndex : propertyindex},
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
$prependTo.before(response.form);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$('.property-edit-container').off('click', '.index-remover').on('click', '.index-remover', function(e){
|
|
e.preventDefault();
|
|
var $groupNode = $(this).closest(".form-group");
|
|
var uri = $groupNode.find('.property-uri').val();
|
|
|
|
var $editContainer = $($groupNode[0]).children('.property-edit-container');
|
|
$.ajax({
|
|
type: "POST",
|
|
url: helpers._url('removePropertyIndex', 'PropertiesAuthoring', 'tao'),
|
|
data: {uri : uri, indexProperty : $(this).attr('id')},
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
var $toRemove = $('[id*="'+response.id+'"], [data-related-index="'+response.id+'"]');
|
|
$toRemove.each(function(){
|
|
var $currentTarget = $(this);
|
|
while(!_.isEqual($currentTarget.parent()[0], $editContainer[0]) && $currentTarget.parent()[0] !== undefined){
|
|
$currentTarget = $currentTarget.parent();
|
|
}
|
|
$currentTarget.remove();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
$(".property-mode").off('click').on('click', function () {
|
|
var $btn = $(this);
|
|
var mode = 'simple';
|
|
var url;
|
|
|
|
if ($btn.hasClass('disabled')) {
|
|
return;
|
|
}
|
|
|
|
if ($btn.hasClass('property-mode-advanced')) {
|
|
mode = 'advanced';
|
|
}
|
|
url = $btn.parents('form').prop('action');
|
|
|
|
helpers.getMainContainer().load(url, {
|
|
'property_mode': mode,
|
|
'uri': $("#uri").val(),
|
|
'id': $("#id").val(),
|
|
'classUri': $("#classUri").val()
|
|
});
|
|
|
|
return false;
|
|
});
|
|
|
|
/**
|
|
* display or not the list regarding the property type
|
|
*/
|
|
function showPropertyList(e, isInit) {
|
|
var $this = $(this);
|
|
var $elt = $this.parent("div").next("div");
|
|
var propertiesTypes = ['list','tree'];
|
|
|
|
var re = new RegExp(propertiesTypes.join('$|').concat('$'));
|
|
if (re.test($this.val())) {
|
|
if ($elt.css('display') === 'none') {
|
|
$elt.show();
|
|
$elt.find('select').removeAttr('disabled');
|
|
}
|
|
}
|
|
else if ($elt.css('display') !== 'none') {
|
|
$elt.css('display', 'none');
|
|
$elt.find('select').prop('disabled', false);
|
|
$elt.find('select option[value=" "]').attr('selected', 'selected').trigger('change');
|
|
}
|
|
|
|
$.each(propertiesTypes, function (i, rangedPropertyName) {
|
|
var re = new RegExp(rangedPropertyName + '$');
|
|
if (re.test($this.val())) {
|
|
const $propValuesSelect = $elt.find('select');
|
|
const propValue = $propValuesSelect.val();
|
|
$propValuesSelect.html($elt.closest('.property-edit-container').find('.' + rangedPropertyName + '-template').html());
|
|
const $selectedInTemplate = $propValuesSelect.find('option[selected]');
|
|
|
|
if (!propValue || !propValue.trim()) {
|
|
if (!isInit && $selectedInTemplate.length) {
|
|
$propValuesSelect.find('option[value=" "]').attr('selected', 'selected');
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
if ($(`option[value="${propValue}"]`, $propValuesSelect).length) {
|
|
$propValuesSelect.val(propValue);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function clearPropertyListValues() {
|
|
$(this).parent("div").parent("div").children("ul.form-elt-list").remove();
|
|
}
|
|
|
|
/**
|
|
* by selecting a list, the values are displayed
|
|
*/
|
|
function showPropertyListValues() {
|
|
const $this = $(this);
|
|
const elt = $this.parent("div");
|
|
let classUri;
|
|
|
|
//load the instances and display them (the list items)
|
|
$(elt).parent("div").children("ul.form-elt-list").remove();
|
|
classUri = $this.val();
|
|
if (classUri && classUri.trim()) {
|
|
$this.parent("div").children("div.form-error").remove();
|
|
$.ajax({
|
|
url: context.root_url + 'taoBackOffice/Lists/getListElements',
|
|
type: "POST",
|
|
data: {listUri: classUri},
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
let html = "<ul class='form-elt-list'>",
|
|
property;
|
|
for (property in response) {
|
|
if(!response.hasOwnProperty(property)) {
|
|
continue;
|
|
}
|
|
html += '<li>' + encode.html(response[property]) + '</li>';
|
|
}
|
|
html += '</ul>';
|
|
$(elt).after(html);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function showDependsOnProperty() {
|
|
const $this = $(this);
|
|
const classUri = $(document.getElementById('classUri')).val();
|
|
let propertyUriToSend;
|
|
const listUri = $this.val();
|
|
const dependsId = $(this)[0].id.match(/\d+_/)[0];
|
|
const dependsOnSelect = $(document.getElementById(`${dependsId}depends-on-property`));
|
|
propertyUriToSend = $this.parent().parent().parent()[0].id;
|
|
propertyUriToSend = propertyUriToSend.replace('property_', '');
|
|
$.ajax({
|
|
url: context.root_url + 'tao/PropertyValues/getDependOnPropertyList',
|
|
type: "GET",
|
|
data: {
|
|
class_uri: classUri,
|
|
list_uri: listUri,
|
|
property_uri: propertyUriToSend,
|
|
},
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
if (response && response.data && response.data.length !== 0) {
|
|
const backendValues = response.data.reduce(
|
|
(accumulator, currentValue) => {
|
|
accumulator.push(currentValue.uriEncoded);
|
|
return accumulator;
|
|
},
|
|
[]
|
|
);
|
|
const currentValues = Object
|
|
.values(dependsOnSelect[0].options)
|
|
.map(entry => entry.value)
|
|
.filter(entry => entry !== ' ');
|
|
let haveSameData = false;
|
|
currentValues.map(entry => {
|
|
if (!backendValues.includes(entry)) {
|
|
haveSameData = true;
|
|
}
|
|
return;
|
|
});
|
|
if (dependsOnSelect[0].length <= 1 || haveSameData) {
|
|
let html = '<option value=" "> --- select --- </option>';
|
|
for (const propertyData in response.data) {
|
|
html += `<option value="${response.data[propertyData].uri}">${response.data[propertyData].label}</option>`;
|
|
}
|
|
dependsOnSelect.empty().append(html);
|
|
}
|
|
dependsOn.toggle();
|
|
} else {
|
|
dependsOnSelect.parent().hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function onTypeChange(e, flag) {
|
|
showPropertyList.bind(this)(e, flag === 'initial');
|
|
}
|
|
|
|
function onListValuesChange(e) {
|
|
clearPropertyListValues.bind(this)(e);
|
|
if (!$(this).val() || !$(this).val().trim()) {
|
|
$(this).find('option[value=" "]').attr('selected', 'selected');
|
|
}
|
|
showPropertyListValues.bind(this)(e);
|
|
showDependsOnProperty.bind(this)(e);
|
|
}
|
|
|
|
//bind functions to the drop down:
|
|
|
|
$('.property-template').each(function(){
|
|
$(this).closest('div').hide();
|
|
});
|
|
|
|
//display the values drop down regarding the selected type
|
|
var $propertyType = $(".property-type"),
|
|
$propertyListValues = $(".property-listvalues");
|
|
|
|
$propertyType.on('change', onTypeChange).trigger('change', 'initial');
|
|
|
|
//display the values of the selected list
|
|
$propertyListValues.off('change');
|
|
$propertyListValues.on('change', onListValuesChange).trigger('change');
|
|
|
|
$propertyListValues.each(function () {
|
|
var elt = $(this).parent("div");
|
|
if (!elt.hasClass('form-elt-highlight') && elt.css('display') !== 'none') {
|
|
elt.addClass('form-elt-highlight');
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* controls of the translation forms
|
|
*/
|
|
initTranslationForm: function initTranslationForm () {
|
|
var self = this;
|
|
$('#translate_lang').change(function () {
|
|
var trLang = $(this).val();
|
|
if (trLang !== '') {
|
|
$("#translation_form").find(":input").each(function () {
|
|
if (/^http/.test($(this).prop('name'))) {
|
|
$(this).val('');
|
|
}
|
|
});
|
|
$.post(
|
|
getUrl('getTranslatedData'),
|
|
{uri: $("#uri").val(), classUri: $("#classUri").val(), lang: trLang},
|
|
function (response) {
|
|
var index;
|
|
var formElt;
|
|
for (index in response) {
|
|
formElt = $(":input[name='" + index + "']");
|
|
if (formElt.hasClass('html-area') && self.htmlEditors[index]) {
|
|
self.htmlEditors[index].setData(response[index]);
|
|
}
|
|
else {
|
|
formElt.val(response[index]);
|
|
}
|
|
}
|
|
},
|
|
'json'
|
|
);
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Ajax form submit -> post the form data and display back the form into the container
|
|
* @param myForm
|
|
* @param serialize
|
|
* @return boolean
|
|
*/
|
|
submitForm: function submitForm(myForm, serialize) {
|
|
var self = this;
|
|
var $container;
|
|
|
|
try {
|
|
if (myForm.prop('enctype') === 'multipart/form-data' && myForm.find(".file-uploader").length) {
|
|
return false;
|
|
}
|
|
else {
|
|
//FIXME should use sectionAPI instead
|
|
$container = myForm.closest('.content-block');
|
|
if (!$container || $container.length === 0) {
|
|
return true;//go to the link
|
|
}
|
|
else {
|
|
//if a ckeditor is in the form we need to sync the textarea content
|
|
$('.html-area', myForm).each(function(){
|
|
if(self.htmlEditors[this.id]){
|
|
self.htmlEditors[this.id].updateElement();
|
|
}
|
|
});
|
|
|
|
serialize = typeof serialize !== 'undefined' ? serialize : myForm.serializeArray();
|
|
|
|
$('.current-submitter', myForm).each(function () {
|
|
$(this).removeClass('current-submitter');
|
|
if (Array.isArray(serialize)) {
|
|
serialize.push({name: this.name, value: this.value});
|
|
} else {
|
|
serialize[this.name] = this.value;
|
|
}
|
|
});
|
|
|
|
$('[data-depends-on-property][disabled]', myForm).each(function () {
|
|
if (Array.isArray(serialize)) {
|
|
serialize.push({name: this.name, value: this.value});
|
|
} else {
|
|
serialize[this.name] = this.value;
|
|
}
|
|
});
|
|
|
|
$container.load(myForm.prop('action'), serialize);
|
|
}
|
|
}
|
|
}
|
|
catch (exp) {
|
|
return false;
|
|
}
|
|
return false;
|
|
}
|
|
};
|
|
|
|
return UiForm;
|
|
});
|