HoshinoKoji/psychojs
1
0
Fork 0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-11 16:18:10 +00:00
Code Actions Packages Releases Activity

Merge pull request #252 from thewhodidthis/bf#215--css-escape

Browse Source 
core/GUI: refactor CSS naming of dialog box input elements
This commit is contained in:
Alain Pitiot 2021-02-20 08:53:24 +01:00 committed by GitHub
commit 6c293c1cbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
js/core/GUI.js
View File

@ -133,63 +133,67 @@ export class GUI
// add a combobox or text areas for each entry in the dictionary:
htmlCode += '<form>';
for (const key in dictionary)
{
const value = dictionary[key];
const keyId = CSS.escape(key) + '_id';
// only create an input if the key is not in the URL:
let inUrl = false;
const cleanedDictKey = key.trim().toLowerCase();
infoFromUrl.forEach((urlValue, urlKey) =>
// These may include Symbols as opposed to when using a for...in loop,
// but only strings are allowed in PsychoPy
Object.keys(dictionary).forEach((key, keyIdx) =>
{
const cleanedUrlKey = urlKey.trim().toLowerCase();
if (cleanedUrlKey === cleanedDictKey)
const value = dictionary[key];
const keyId = 'form-input-' + keyIdx;
// only create an input if the key is not in the URL:
let inUrl = false;
const cleanedDictKey = key.trim().toLowerCase();
infoFromUrl.forEach((urlValue, urlKey) =>
{
const cleanedUrlKey = urlKey.trim().toLowerCase();
if (cleanedUrlKey === cleanedDictKey)
{
inUrl = true;
// break;
}
});
if (!inUrl)
{
inUrl = true;
// break;
}
});
htmlCode += '<label for="' + keyId + '">' + key + '</label>';
if (!inUrl)
{
htmlCode += '<label for="' + keyId + '">' + key + '</label>';
// if the field is required:
if (key.slice(-1) === '*')
{
self._requiredKeys.push(key);
}
// if value is an array, we create a select drop-down menu:
if (Array.isArray(value))
{
htmlCode += '<select name="' + key + '" id="' + keyId + '" class="text ui-widget-content' +
' ui-corner-all">';
// if the field is required, we add an empty option and select it:
// if the field is required:
if (key.slice(-1) === '*')
{
htmlCode += '<option disabled selected>...</option>';
self._requiredKeys.push(keyId);
}
for (const option of value)
// if value is an array, we create a select drop-down menu:
if (Array.isArray(value))
{
htmlCode += '<option>' + option + '</option>';
htmlCode += '<select name="' + key + '" id="' + keyId + '" class="text ui-widget-content' +
' ui-corner-all">';
// if the field is required, we add an empty option and select it:
if (key.slice(-1) === '*')
{
htmlCode += '<option disabled selected>...</option>';
}
for (const option of value)
{
htmlCode += '<option>' + option + '</option>';
}
htmlCode += '</select>';
$('#' + keyId).selectmenu({classes: {}});
}
htmlCode += '</select>';
$('#' + keyId).selectmenu({classes: {}});
}
// otherwise we use a single string input:
else /*if (typeof value === 'string')*/
{
htmlCode += '<input type="text" name="' + key + '" id="' + keyId;
htmlCode += '" value="' + value + '" class="text ui-widget-content ui-corner-all">';
// otherwise we use a single string input:
else /*if (typeof value === 'string')*/
{
htmlCode += '<input type="text" name="' + key + '" id="' + keyId;
htmlCode += '" value="' + value + '" class="text ui-widget-content ui-corner-all">';
}
}
}
}
);
htmlCode += '</form>';
@ -215,15 +219,15 @@ export class GUI
// setup change event handlers for all required keys:
for (const key of this._requiredKeys)
{
const keyId = CSS.escape(key) + '_id';
const input = document.getElementById(keyId);
if (input)
this._requiredKeys.forEach((keyId) =>
{
input.oninput = (event) => GUI._onKeyChange(self, event);
const input = document.getElementById(keyId);
if (input)
{
input.oninput = (event) => GUI._onKeyChange(self, event);
}
}
}
);
// init and open the dialog box:
self._dialogComponent.button = 'Cancel';
@ -256,14 +260,16 @@ export class GUI
{
// update dictionary:
for (const key in dictionary)
{
const input = document.getElementById(CSS.escape(key) + "_id");
if (input)
Object.keys(dictionary).forEach((key, keyIdx) =>
{
dictionary[key] = input.value;
const input = document.getElementById('form-input-' + keyIdx);
if (input)
{
dictionary[key] = input.value;
}
}
}
);
self._dialogComponent.button = 'OK';
$("#expDialog").dialog('close');