Added Javascript Render UI

index.html

@@ -26,8 +26,11 @@
     <script src="js/modules/newCodeEditorUI.js"></script>
     <script src="js/modules/newMicroserviceUI.js"></script>
     <script src="js/modules/newMicroserviceUI_configUI.js"></script>
+    <script src="js/modules/newJavascriptRenderUI.js"></script>
+    <script src="js/modules/newJavascriptRenderUI_configUI.js"></script>
 
     <script src="js/widgets/MicroserviceUI_manifest.js"></script>
+    <script src="js/widgets/JavascriptRenderUI_manifest.js"></script>
 
     <script src="js/main.js"></script>
   </body>

js/OliveUI.js

@@ -16,6 +16,7 @@
 
       var widget = OliveUI.modules.newWidgetUI({
         initialView: 'render',
+        widgetTitle: widgetName,
         removeBtnClickFn: function () {
           widgetRootDiv.remove();
           delete _state.widgetInstances[uuid];

js/main.js

@@ -10,6 +10,7 @@
 
   var widget1 = oliveUI.createWidgetInstance('Microservice UI');
   var widget2 = oliveUI.createWidgetInstance('Microservice UI');
+  var widget3 = oliveUI.createWidgetInstance('Javascript Render UI');
 
   oliveUI.setWidgetInstanceConfiguration(widget1, {
     microserviceInputs: {
@@ -31,4 +32,10 @@
     serviceName: 'Test 2'
   });
 
+  oliveUI.setWidgetInstanceConfiguration(widget3, {
+    javascriptAlg: `return $('<button>Test</button>').click(function () {
+      alert('Test button clicked');
+    });`
+  });
+
 }(OliveUI));

js/modules/newJavascriptRenderUI.js

+(function (OliveUI, Utils) {
+  'use strict';
+
+  var _statics = {
+    init: {
+      loadJavascriptContent: function (_dom, content) {
+        var alg = content.javascriptAlg;
+        try {
+          var algF = new Function(alg + '\n//# sourceURL=' + Utils.generateUUID() + '.js');
+          var domOut = algF();
+          _dom.outputDiv.empty().append(domOut);
+        } catch (e) {
+          Utils.showError(e, _dom.messageDiv);
+        }
+      }
+    }
+  };
+
+  var _newJavascriptRenderUI = function (config = {}) {
+    var _dom = {
+      messageDiv: $('<div>'),
+      outputDiv: $('<div>')
+    };
+    return {
+      render: function () {
+        return $('<div>').append(
+          _dom.messageDiv,
+          _dom.outputDiv);
+      },
+      setContent: function (content = {}) {
+        content.javascriptAlg = content.javascriptAlg || '';
+        _statics.init.loadJavascriptContent(_dom, content);
+      }
+    };
+  };
+
+  OliveUI.modules.newJavascriptRenderUI = _newJavascriptRenderUI;
+
+}(OliveUI, OliveUI.utils));

js/modules/newJavascriptRenderUI_configUI.js

+(function (OliveUI, newCodeEditorUI) {
+  'use strict';
+
+  var _newJavascriptRenderUI_configUI = function (config = {}) {
+    var _dom = {
+      rootNode: $('<div>')
+    };
+    var _sub = {
+      codeEditor: newCodeEditorUI({})
+    };
+
+    return {
+      getContent: function () {
+        return {
+          javascriptAlg: _sub.codeEditor.getContent()
+        };
+      },
+      setContent: function (content = {}) {
+        _sub.codeEditor.setContent(content.javascriptAlg || '/*Javascript algoritm that "return" a DOM object.*/\n');
+      },
+      render: function () {
+        return _dom.rootNode.empty().append(
+          _sub.codeEditor.render()
+        );
+      },
+      refresh: function () {
+        _sub.codeEditor.refresh();
+      }
+    };
+  };
+
+  OliveUI.modules.newJavascriptRenderUI_configUI = _newJavascriptRenderUI_configUI;
+
+}(OliveUI, OliveUI.modules.newCodeEditorUI));

js/modules/newMicroserviceUI.js

@@ -22,7 +22,7 @@
             alg = 'return $("<pre>").append($("<code>").append(JSON.stringify(output, null, 2)));';
           }
           try {
-            var algF = new Function('output', alg + '\n//# sourceURL=microservice_custom_alg.js');
+            var algF = new Function('output', alg + '\n//# sourceURL=' + Utils.generateUUID() + '.js');
             var domOut = algF(data);
             _dom.outputDiv.empty().append(domOut);
           } catch (e) {

js/modules/newWidgetUI.js

@@ -50,6 +50,7 @@
         _dom.deleteBtn.toggle(config.removeBtnClickFn ? config.deleteBtnVisible : false);
       },
       initWidget: function (_dom, config, _state) {
+        _dom.panelTitle.html(config.widgetTitle);
         _statics.init.initButtonsVisibility(_dom, config);
         _dom.renderModuleDom.hide();
         _dom.configModuleDom.hide();
@@ -98,6 +99,7 @@
 
   var _newWidgetUI = function (config = {}) {
     config.initialView = config.initialView || 'render'; //render or config
+    config.widgetTitle = config.widgetTitle || '';
     config.removeBtnClickFn = config.removeBtnClickFn || null;
     config.refreshBtnVisible = config.refreshBtnVisible != null ? config.refreshBtnVisible : true;
     config.settingBtnVisible = config.settingBtnVisible != null ? config.settingBtnVisible : true;

js/widgets/JavascriptRenderUI_manifest.js

+(function (OliveUI, newJavascriptRenderUI, newJavascriptRenderUI_configUI) {
+  'use strict';
+
+  OliveUI.addWidgetManifest({
+
+    name: 'Javascript Render UI',
+    description: '',
+
+    createUIFn: function () {
+      return newJavascriptRenderUI({});
+    },
+
+    createConfigurationUIFn: function () {
+      return newJavascriptRenderUI_configUI({});
+    }
+  });
+
+}(OliveUI, OliveUI.modules.newJavascriptRenderUI, OliveUI.modules.newJavascriptRenderUI_configUI));