From a3183f64d6ed11898ee3e49439947e640771608e Mon Sep 17 00:00:00 2001
From: "Mark M. Florida" <markflorida@wustl.edu>
Date: Thu, 17 Mar 2016 11:18:29 -0500
Subject: [PATCH] XNAT-4140 - Refactored scriptEditor.js and added hooks to
Scrips.vm to allow loading another script in the currently open editor, which
will allow a different version of the script being edited to be loaded
on-the-fly.
---
.../webapp/scripts/xnat/app/scriptEditor.js | 104 ++++++++++++++----
.../webapp/xnat-templates/screens/Scripts.vm | 9 +-
2 files changed, 92 insertions(+), 21 deletions(-)
diff --git a/src/main/webapp/scripts/xnat/app/scriptEditor.js b/src/main/webapp/scripts/xnat/app/scriptEditor.js
index 130c92e9..e18c92d8 100644
--- a/src/main/webapp/scripts/xnat/app/scriptEditor.js
+++ b/src/main/webapp/scripts/xnat/app/scriptEditor.js
@@ -166,18 +166,66 @@ var XNAT = getObject(XNAT||{});
}
}
- // open xmodal dialog for script editing
- function renderEditor( json ){
+ var counter = 0;
+
+ // load script into the editor
+ function loadEditor($dialog, json){
json = json || {};
+ console.log(json);
+
+ var scriptId = json.scriptId || '';
+ var lang = json.language || 'groovy';
+ var time = json.timestamp || '';
+
+ $dialog.find('.id').val(json.id || '');
+ $dialog.find('.scriptId').val(scriptId);
+ $dialog.find('.language').val(lang);
+ $dialog.find('.timestamp').val(time);
+ $dialog.find('.script-description').val(json.description || '');
+
+ if (scriptId){
+ $dialog.find('.script-id-text').html(scriptId);
+ $dialog.find('.script-id-input').remove();
+ //$dialog.find('.script-id-input').val(scriptId);
+ }
+
+ var $wrapper = $dialog.find('.editor-wrapper');
+
+ // make sure the editor wrapper is empty
+ $wrapper.empty();
+
+ // create an entirely new editor div
+ var _editor = document.createElement('div');
+ _editor.id = 'script-' + (scriptId || (json.id||++counter)) + '-content';
+ _editor.className = 'editor-content';
+ _editor.innerHTML = XNAT.utils.escapeXML(json.content) || '';
+ _editor.style = 'position:absolute;top:0;right:0;bottom:0;left:0;border: 1px solid #ccc';
+
+ // put the new editor div in the wrapper
+ $wrapper.append(_editor);
+
+ // save the id to outer scope for other functions
+ scriptEditor.editor_id = _editor.id;
+
+ var aceEditor = ace.edit(_editor);
+ aceEditor.setTheme("ace/theme/eclipse");
+ aceEditor.getSession().setMode("ace/mode/" + stringLower(lang));
+
+ }
+
+
+ // open xmodal dialog for script editing
+ function renderEditor( json ){
+
var scriptId = json.scriptId || '';
var lang = json.language || 'groovy';
var time = json.timestamp || '';
var opts = {};
opts.width = 880;
- opts.height = 665;
+ opts.height = 695;
//opts.top = 100;
opts.scroll = false;
opts.template = $('#script-editor-template');
@@ -211,35 +259,51 @@ var XNAT = getObject(XNAT||{});
var $dialog = obj.$modal;
- $dialog.find('.id').val(json.id || '');
- $dialog.find('.scriptId').val(scriptId);
- $dialog.find('.language').val(lang);
- $dialog.find('.timestamp').val(time);
- $dialog.find('.script-description').val(json.description || '');
+ loadEditor($dialog, json);
- if (scriptId){
- $dialog.find('.script-id-text').html(scriptId);
- $dialog.find('.script-id-input').remove();
- //$dialog.find('.script-id-input').val(scriptId);
- }
+ /*
- var $editor = $dialog.find('.editor-content');
- $editor.html(XNAT.utils.escapeXML(json.content) || '');
- $editor.attr('id', (scriptId || obj.id) + '-editor-content');
+ // VERSION MENU START
+ // NEEDS EDITING FOR IMPLEMENTATION
- scriptEditor.editor_id = $editor.attr('id');
+ var $versionMenu = $dialog.find('.script-version');
- var editor = ace.edit(scriptEditor.editor_id);
- editor.setTheme("ace/theme/eclipse");
- editor.getSession().setMode("ace/mode/" + stringLower(lang));
+ //////////////////////////////////////////////////////////////////////
+ // populate the 'version' menu
+ // THIS IS A PLACEHOLDER
+ // REPLACE WITH VERSIONS FROM 'json'
+ //////////////////////////////////////////////////////////////////////
+ $('#scripts-table').find('[data-script-id]').each(function(){
+ var id = $(this).data('script-id');
+ var $option = $(document.createElement('option'));
+ //$option.attr('data-url', scriptURL(id));
+ $option.html(id);
+ $option.val(id);
+ $versionMenu.append($option);
+ });
+ //////////////////////////////////////////////////////////////////////
+
+ // put select menu handler here
+ $versionMenu.on('change', function(){
+ xhr.getJSON(scriptURL(this.value), function(data){
+ loadEditor($dialog, data)
+ });
+ });
+
+ // VERSION MENU END
+
+ */
};
opts.afterShow = function(obj){
if (!scriptId){
obj.$modal.find('.script-id-input').focus().select();
}
+ // TODO: prompt user to save if they could lose unsaved changes
};
+
xmodal.open(opts);
+
}
// open dialog to choose language
diff --git a/src/main/webapp/xnat-templates/screens/Scripts.vm b/src/main/webapp/xnat-templates/screens/Scripts.vm
index b6111558..db72d0dc 100644
--- a/src/main/webapp/xnat-templates/screens/Scripts.vm
+++ b/src/main/webapp/xnat-templates/screens/Scripts.vm
@@ -314,9 +314,16 @@
<td><b>Description: </b> </td>
<td><input type="text" name="script-description" class="script-description" size="80" value=""></td>
</tr>
+ <!-- VERSION MENU
+ <tr>
+ <td><b>Load Version: </b> </td>
+ <td><select name="script-version" class="script-version"></select></td>
+ </tr>
+ -->
</table>
<br>
- <div style="width:840px;height:482px;position:relative;">
+ <div class="editor-wrapper" style="width:840px;height:482px;position:relative;">
+ <!-- the '.editor-content' div gets replaced when the script content is loaded -->
<div class="editor-content" style="position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid #ccc;"></div>
</div>
</div><!-- /#script-editor-template -->
--
GitLab