Merge pull request #90 from sijiazhao/master

BF: Multiple fixes, mostly re GUI dlg; fixes #52

js/core/GUI.js

@@ -79,7 +79,7 @@ export class GUI
 		this._progressBarMax = 0;
 		this._allResourcesDownloaded = false;
 		this._requiredKeys = [];
-		this._nbSetRequiredKeys = 0;
+		this._setRequiredKeys = new Map();
 
 
 		// prepare PsychoJS component:
@@ -130,7 +130,7 @@ export class GUI
 				htmlCode += '<form>';
 				for (const key in dictionary) {
 					const value = dictionary[key];
-					const keyId = key + '_id';
+					const keyId = $.escapeSelector(key) + '_id';
 
 					// only create an input if the key is not in the URL:
 					let inUrl = false;
@@ -146,7 +146,7 @@ export class GUI
 
 					if (!inUrl)
 					{
-						htmlCode += '<label for="' + key + '">' + key + '</label>';
+						htmlCode += '<label for="' + keyId + '">' + key + '</label>';
 
 						// if the field is required:
 						if (key.slice(-1) === '*')
@@ -200,10 +200,10 @@ export class GUI
 
 				// setup change event handlers for all required keys:
 				for (const key of this._requiredKeys) {
-					const keyId = key + '_id';
+					const keyId = $.escapeSelector(key) + '_id';
 					const input = document.getElementById(keyId);
 					if (input)
-						input.onchange = (event) => GUI._onKeyChange(self, event);
+						input.oninput = (event) => GUI._onKeyChange(self, event);
 				}
 
 				// init and open the dialog box:
@@ -227,7 +227,7 @@ export class GUI
 
 								// update dictionary:
 								for (const key in dictionary) {
-									const input = document.getElementById(key + "_id");
+									const input = document.getElementById($.escapeSelector(key) + "_id");
 									if (input)
 										dictionary[key] = input.value;
 								}
@@ -255,6 +255,7 @@ export class GUI
 					// close is called by both buttons and when the user clicks on the cross:
 					close: function () {
 						//$.unblockUI();
+						$(this).dialog('destroy').remove();
 						self._dialogComponent.status = PsychoJS.Status.FINISHED;
 					}
 
@@ -313,8 +314,6 @@ export class GUI
 		showOK = true,
 		onOK
 	} = {}) {
-		// destroy previous dialog box:
-		this.destroyDialog();
 
 		let htmlCode;
 		let titleColour;
@@ -410,7 +409,7 @@ export class GUI
 				id: "buttonOk",
 				text: "Ok",
 				click: function() {
-					$(this).dialog("close");
+					$(this).dialog("destroy").remove();
 
 					// execute callback function:
 					if (typeof onOK !== 'undefined')
@@ -504,24 +503,6 @@ export class GUI
 	}
 
 
-	/**
-	 * Destroy the currently opened dialog box.
-	 * 
-	 * @name module:core.GUI#dialog
-	 * @function
-	 * @public
-	 */
-	destroyDialog()
-	{
-		if ($("#expDialog").length) {
-			$("#expDialog").dialog("destroy");
-		}
-		if ($("#msgDialog").length) {
-			$("#msgDialog").dialog("destroy");
-		}
-	}
-
-
 	/**
 	 * Listener for resource event from the [Server Manager]{@link ServerManager}.
 	 *
@@ -581,7 +562,7 @@ export class GUI
 	 */
 	_updateOkButtonStatus()
 	{
-		if (this._psychoJS.getEnvironment() === ExperimentHandler.Environment.LOCAL || (this._allResourcesDownloaded && this._nbSetRequiredKeys >= this._requiredKeys.length) )
+		if (this._psychoJS.getEnvironment() === ExperimentHandler.Environment.LOCAL || (this._allResourcesDownloaded && this._setRequiredKeys.size >= this._requiredKeys.length) )
 		{
 			$("#buttonOk").button("option", "disabled", false);
 		} else
@@ -656,9 +637,9 @@ export class GUI
 		const value = element.value;
 
 		if (typeof value !== 'undefined' && value.length > 0)
-			gui._nbSetRequiredKeys++;
+			gui._setRequiredKeys.set(event.target, true);
 		else
-			gui._nbSetRequiredKeys--;
+			gui._setRequiredKeys.delete(event.target);
 
 		gui._updateOkButtonStatus();
 	}

js/core/PsychoJS.js

@@ -387,9 +387,6 @@ export class PsychoJS
 					// close the window:
 					self._window.close();
 
-					// destroy dialog boxes:
-					self._gui.destroyDialog();
-
 					// remove everything from the browser window:
 					while (document.body.hasChildNodes())
 						document.body.removeChild(document.body.lastChild);

js/core/ServerManager.js

@@ -315,6 +315,7 @@ export class ServerManager extends PsychObject {
 		// we use an anonymous async function here since downloadResources is non-blocking (asynchronous)
 		// but we want to run the asynchronous _listResources and _downloadResources in sequence
 		const self = this;
+		const newResources = new Map();
 		let download = async () => {
 			try {
 				if (self._psychoJS.config.environment === ExperimentHandler.Environment.SERVER) {
@@ -327,13 +328,17 @@ export class ServerManager extends PsychObject {
 					}
 					else {
 						// only registered the specified resources:
-						for (const {name, path} of resources)
-							self._resources.set(name, { path });
+						for (const {name, path} of resources) {
+							self._resources.set(name, {path});
+							newResources.set(name, {path});
+						}
 					}
 				} else {
 					// register the specified resources:
-					for (const {name, path} of resources)
-						self._resources.set(name, { path });
+					for (const {name, path} of resources) {
+						self._resources.set(name, {path});
+						newResources.set(name, {path});
+					}
 				}
 
 				self._nbResources = self._resources.size;
@@ -343,7 +348,7 @@ export class ServerManager extends PsychObject {
 				self.emit(ServerManager.Event.RESOURCE, { message: ServerManager.Event.RESOURCES_REGISTERED, count: self._nbResources });
 
 				// download the registered resources:
-				await self._downloadRegisteredResources();
+				await self._downloadRegisteredResources(newResources);
 			}
 			catch (error) {
 				console.log('error', error);
@@ -556,7 +561,7 @@ export class ServerManager extends PsychObject {
 	 * @function
 	 * @private
 	 */
-	_downloadRegisteredResources()
+	_downloadRegisteredResources(resources = new Map())
 	{
 		const response = { origin: 'ServerManager._downloadResources', context: 'when downloading the resources for experiment: ' + this._psychoJS.config.experiment.name };
 
@@ -570,6 +575,9 @@ export class ServerManager extends PsychObject {
 		this._resourceQueue = new createjs.LoadQueue(true); //, this._psychoJS.config.experiment.resourceDirectory);
 
 		const self = this;
+
+		const filesToDownload = resources.size ? resources : this._resources;
+
 		this._resourceQueue.addEventListener("filestart", event => {
 			self.emit(ServerManager.Event.RESOURCE, { message: ServerManager.Event.DOWNLOADING_RESOURCE, resource: event.item.id });
 		});
@@ -584,7 +592,7 @@ export class ServerManager extends PsychObject {
 		// loading completed:
 		this._resourceQueue.addEventListener("complete", event => {
 			self._resourceQueue.close();
-			if (self._nbLoadedResources === self._nbResources) {
+			if (self._nbLoadedResources === filesToDownload.size) {
 				self.setStatus(ServerManager.Status.READY);
 				self.emit(ServerManager.Event.RESOURCE, { message: ServerManager.Event.DOWNLOAD_COMPLETED });
 			}
@@ -602,7 +610,7 @@ export class ServerManager extends PsychObject {
 		// (*) dispatch resources to preload.js or howler.js based on extension:
 		let manifest = [];
 		let soundResources = [];
-		for (const [name, path_data] of this._resources)
+		for (const [name, path_data] of filesToDownload)
 		{
 			const nameParts = name.toLowerCase().split('.');
 			const extension = (nameParts.length > 1) ? nameParts.pop() : undefined;
@@ -642,7 +650,7 @@ export class ServerManager extends PsychObject {
 		if (manifest.length > 0)
 			this._resourceQueue.loadManifest(manifest);
 		else {
-			if (this._nbLoadedResources === this._nbResources) {
+			if (this._nbLoadedResources === filesToDownload.size) {
 				this.setStatus(ServerManager.Status.READY);
 				this.emit(ServerManager.Event.RESOURCE, { message: ServerManager.Event.DOWNLOAD_COMPLETED });
 			}
@@ -665,7 +673,7 @@ export class ServerManager extends PsychObject {
 				// self._resources.set(resource.name, howl);
 				self.emit(ServerManager.Event.RESOURCE, { message: ServerManager.Event.RESOURCE_DOWNLOADED, resource: name });
 
-				if (self._nbLoadedResources === self._nbResources) {
+				if (self._nbLoadedResources === filesToDownload.size) {
 					self.setStatus(ServerManager.Status.READY);
 					self.emit(ServerManager.Event.RESOURCE, { message: ServerManager.Event.DOWNLOAD_COMPLETED });
 				}