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

20
js/core/GUI.js
View File

@ -133,10 +133,13 @@ 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)
// 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 value = dictionary[key]; const value = dictionary[key];
const keyId = CSS.escape(key) + '_id'; const keyId = 'form-input-' + keyIdx;
// only create an input if the key is not in the URL: // only create an input if the key is not in the URL:
let inUrl = false; let inUrl = false;
@ -158,7 +161,7 @@ export class GUI
// if the field is required: // if the field is required:
if (key.slice(-1) === '*') if (key.slice(-1) === '*')
{ {
self._requiredKeys.push(key); self._requiredKeys.push(keyId);
} }
// if value is an array, we create a select drop-down menu: // if value is an array, we create a select drop-down menu:
@ -190,6 +193,7 @@ export class GUI
} }
} }
} }
);
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); const input = document.getElementById(keyId);
if (input) if (input)
{ {
input.oninput = (event) => GUI._onKeyChange(self, event); 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"); const input = document.getElementById('form-input-' + keyIdx);
if (input) if (input)
{ {
dictionary[key] = input.value; dictionary[key] = input.value;
} }
} }
);
self._dialogComponent.button = 'OK'; self._dialogComponent.button = 'OK';
$("#expDialog").dialog('close'); $("#expDialog").dialog('close');