HoshinoKoji/psychojs
1
0
Fork 0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-12 16:48: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: // add a combobox or text areas for each entry in the dictionary:
htmlCode += '<form>'; 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: // These may include Symbols as opposed to when using a for...in loop,
let inUrl = false; // but only strings are allowed in PsychoPy
const cleanedDictKey = key.trim().toLowerCase(); Object.keys(dictionary).forEach((key, keyIdx) =>
infoFromUrl.forEach((urlValue, urlKey) =>
{ {
const cleanedUrlKey = urlKey.trim().toLowerCase(); const value = dictionary[key];
if (cleanedUrlKey === cleanedDictKey) 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; htmlCode += '<label for="' + keyId + '">' + key + '</label>';
// break;
}
});
if (!inUrl) // if the field is required:
{
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 (key.slice(-1) === '*') 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>'; // otherwise we use a single string input:
$('#' + keyId).selectmenu({classes: {}}); else /*if (typeof value === 'string')*/
} {
htmlCode += '<input type="text" name="' + key + '" id="' + keyId;
// otherwise we use a single string input: htmlCode += '" value="' + value + '" class="text ui-widget-content ui-corner-all">';
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>'; htmlCode += '</form>';
@ -215,15 +219,15 @@ export class GUI
// setup change event handlers for all required keys: // setup change event handlers for all required keys:
for (const key of this._requiredKeys) this._requiredKeys.forEach((keyId) =>
{
const keyId = CSS.escape(key) + '_id';
const input = document.getElementById(keyId);
if (input)
{ {
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: // init and open the dialog box:
self._dialogComponent.button = 'Cancel'; self._dialogComponent.button = 'Cancel';
@ -256,14 +260,16 @@ export class GUI
{ {
// update dictionary: // update dictionary:
for (const key in dictionary) Object.keys(dictionary).forEach((key, keyIdx) =>
{
const input = document.getElementById(CSS.escape(key) + "_id");
if (input)
{ {
dictionary[key] = input.value; const input = document.getElementById('form-input-' + keyIdx);
if (input)
{
dictionary[key] = input.value;
}
} }
} );
self._dialogComponent.button = 'OK'; self._dialogComponent.button = 'OK';
$("#expDialog").dialog('close'); $("#expDialog").dialog('close');