@gregoriusrippenstein/node-red-contrib-introspection 0.3.5 → 0.4.0

package/README.md

@@ -89,9 +89,16 @@ Inspired by the [dsm](https://flows.nodered.org/node/node-red-contrib-dsm) packa
 
 Send a flow to another Node-RED instance. This will replace **any existing** flows on the other server, use with care. Under the hood this uses the [Node-RED API](https://nodered.org/docs/api/admin/methods/post/flows/) to post a new flow to the server. This node also supports authentication if the other server happens to have some.
 
-### TriggerImport
+### ClientCode
 
-This node will open the Node-RED import dialog and insert the payload, i.e. a flow object, into the dialog. The flow can then be imported into the existing workspace. See the [RSS example](https://flowhub.org/f/e02ba6e534f7a0f4) for more details. Payload must be a valid flow object, i.e. a Javascript array with one object per node. The import dialog will complain should this not be the case.
+ClientCode is a node for executing client side, i.e., in the editor, Javascript code triggered by a server side event. Any code that can be executed in the browseer console can be executed in the ClientCode node. It replaces the TriggerImport node by being more generic, TriggerImport executed very specific code for a server side event, ClientCode can emulate that behaviour.
+
+The context for code execution includes the following:
+
+- `payload` which is the the `msg.payload` value
+- `topic` which is the `msg.topic` value
+
+For more details, [client side code](https://github.com/gorenje/node-red-contrib-introspection/blob/2f5aca9374b28fcb6890c312f943f913ecb4cfce/nodes/60-client-code.html#L3-L8) with the context and [server side code](https://github.com/gorenje/node-red-contrib-introspection/blob/2f5aca9374b28fcb6890c312f943f913ecb4cfce/nodes/60-client-code.js#L13-L22).
 
 ## Node-RED Versions
 
@@ -106,7 +113,7 @@ There are [example flows](/examples) contained in the package, examples can also
 - [Screenshot](https://flowhub.org/f/07b2d0f3b0445ab5)
 - [DrawSVG](https://flowhub.org/f/141037dcda5b69fd)
 - [GetFlows](https://flowhub.org/f/0b1bfbf6e540be66)
-- [TriggerImport](https://flowhub.org/f/e02ba6e534f7a0f4)
+- [ClientCode](https://flowhub.org/f/e02ba6e534f7a0f4)
 
 ## License
 

package/nodes/60-client-code.html

@@ -0,0 +1,153 @@
+<script type="text/javascript">
+
+ RED.comms.subscribe('introspect:client-code-perform', (event,data) => {
+   if ( data.msg == "execfunc" ) {
+     var payload = data.payload;
+     eval( data.func );
+   }
+ });
+
+  RED.nodes.registerType('ClientCode',{
+    color: '#e5e4ef',
+    icon: "icons/subflow.svg",
+    category: 'introspection',
+    paletteLabel: "ClientCode",
+    defaults: {
+      name: {
+        value:"",
+      },
+      clientcode: {
+        value: ""
+      },
+      format: {
+        value: ""
+      }
+    },
+    inputs:1,
+    outputs:1,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    labelStyle: function() {
+      return this.name?"node_label_italic":"";
+    },
+
+    oneditsave: function() {
+      $('#node-input-clientcode').val(this.editor.getValue());
+      this.editor.destroy();
+      delete this.editor;
+    },
+
+    oneditcancel: function() {
+      this.editor.destroy();
+      delete this.editor;
+    },
+
+    oneditprepare: function() {
+      const that = this;
+      const stateId = RED.editor.generateViewStateId("node", this, "");
+
+      this.editor = RED.editor.createEditor({
+        id: 'node-input-clientcode-editor',
+        mode: 'ace/mode/html',
+        stateId: stateId,
+        value: $("#node-input-screenshot").val()
+      });
+
+      this.editor.setValue( that.clientcode );
+
+      $("#node-input-format").on("change", function() {
+        var mod = "ace/mode/"+$("#node-input-format").val();
+        that.editor.getSession().setMode({
+          path: mod,
+          v: Date.now()
+        });
+      });
+
+      RED.popover.tooltip($("#node-clientcode-expand-editor"), RED._("node-red:common.label.expand"));
+      $("#node-clientcode-expand-editor").on("click", function (e) {
+        e.preventDefault();
+        const value = that.editor.getValue();
+        that.editor.saveView();
+        RED.editor.editText({
+          mode: $("#node-input-format").val(),
+          value: value,
+          stateId: stateId,
+          width: "Infinity",
+          focus: true,
+          complete: function (v, cursor) {
+            that.editor.setValue(v, -1);
+            setTimeout(function () {
+              that.editor.restoreView();
+              that.editor.focus();
+            }, 250);
+          }
+        })
+      })
+
+    },
+
+    oneditresize: function(size) {
+      var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+      var height = $("#dialog-form").height();
+      for (var i=0; i<rows.length; i++) {
+        height -= $(rows[i]).outerHeight(true);
+      }
+      var editorRow = $("#dialog-form>div.node-text-editor-row");
+      height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+      $(".node-text-editor").css("height",height+"px");
+      this.editor.resize();
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="ClientCode">
+  <div class="form-row">
+      <label for="node-input-name">
+          <i class="fa fa-tag"></i>
+          <span data-i18n="common.label.name">Name</span>
+      </label>
+      <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+
+  <div class="form-row" style="position: relative; margin-bottom: 0px;">
+      <label for="node-input-clientcode">
+          <i class="fa fa-file-code-o"></i> Client Code
+      </label>
+      <input type="hidden" id="node-input-clientcode" autofocus="autofocus">
+
+      <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
+          Syntax:
+          <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
+              <option value="handlebars">mustache</option>
+              <option value="html">HTML</option>
+              <option value="json">JSON</option>
+              <option value="javascript">JavaScript</option>
+              <option value="css">CSS</option>
+              <option value="markdown">Markdown</option>
+              <option value="php">PHP</option>
+              <option value="python">Python</option>
+              <option value="sql">SQL</option>
+              <option value="yaml">YAML</option>
+              <option value="text">None</option>
+          </select>
+          <button type="button" id="node-clientcode-expand-editor"
+                  class="red-ui-button red-ui-button-small">
+              <i class="fa fa-expand"></i>
+          </button>
+      </div>
+  </div>
+
+  <div class="form-row node-text-editor-row">
+      <div style="height: 250px; min-height:150px;"
+           class="node-text-editor"
+           id="node-input-clientcode-editor" ></div>
+  </div>
+ <input type="hidden" id="node-input-clientcode">
+</script>
+
+<script type="text/html" data-help-name="ClientCode">
+  <p>Execute Javascript code in the Node-RED frontend, triggered from the server.</p>
+</script>

package/nodes/60-client-code.js

@@ -0,0 +1,28 @@
+module.exports = function(RED) {
+  function ClientCodeFunctionality(config) {
+    RED.nodes.createNode(this,config);
+
+    var node = this;
+    var cfg = config;
+
+    node.on('close', function() {
+      node.status({});
+    });
+
+    node.on("input", function(msg, send, done) {
+      RED.comms.publish(
+        "introspect:client-code-perform",
+        RED.util.encodeObject({
+          msg:     "execfunc",
+          payload: msg.payload,
+          topic:   msg.topic,
+          func:    cfg.clientcode,
+          nodeid:  node.id
+        })
+      );
+
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("ClientCode", ClientCodeFunctionality);
+}

package/nodes/{55-trigger-import.html → __55-trigger-import.html}

@@ -1,5 +1,37 @@
 <script type="text/javascript">
 
+ /*
+   * How to connect nodes:
+    var namesToId = {}
+
+    RED.nodes.eachNode((n) => {
+    if ( n._def.category == "rssfeeds") {
+      namesToId[n.name] = n.id
+    }
+    })
+
+    RED.nodes.eachNode((n) => {
+      if ( n._def.category == "rssfeeds" && n._def.label() == "Hacker News: New Comments") {
+          var title = n.name.match(/^New[ ]+comment[ ]+by.+\"(.*)\"/)[1];
+          var tgtId = namesToId[title];
+          if ( tgtId ) {
+              var t = RED.nodes.node(tgtId);
+             RED.nodes.addLink( { source: n, sourcePort: 0, target: t});
+             RED.view.select([t,n])
+          }
+       }
+     })
+
+    * How to move
+
+    var t = RED.nodes.node("23e18922a0b896f1")
+    t.x = XXXX;
+    t.y = YYYY;
+    t.dirty = true;
+    RED.view.redraw(true)
+
+  */
+
  RED.comms.subscribe('introspect:trigger-import-delete', (event,data) => {
    if ( data.msg == "delete-old-nodes" ) {
      RED.view.select(false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "dependencies": {
     "got": "latest"
   },
@@ -16,16 +16,16 @@
   "node-red": {
     "version": ">=2.0.0",
     "nodes": {
-      "seeker":          "nodes/05-seeker.js",
-      "sink":            "nodes/10-sink.js",
-      "screenshot":      "nodes/15-screenshot.js",
-      "orphans":         "nodes/20-orphans.js",
-      "ismobile":        "nodes/25-ismobile.js",
-      "navigator":       "nodes/30-navigator.js",
-      "drawsvg":         "nodes/40-drawsvg.js",
-      "getflows":        "nodes/45-get-flows.js",
-      "sendflow":        "nodes/50-send-flow.js",
-      "triggerimport":   "nodes/55-trigger-import.js"
+      "seeker":        "nodes/05-seeker.js",
+      "sink":          "nodes/10-sink.js",
+      "screenshot":    "nodes/15-screenshot.js",
+      "orphans":       "nodes/20-orphans.js",
+      "ismobile":      "nodes/25-ismobile.js",
+      "navigator":     "nodes/30-navigator.js",
+      "drawsvg":       "nodes/40-drawsvg.js",
+      "getflows":      "nodes/45-get-flows.js",
+      "sendflow":      "nodes/50-send-flow.js",
+      "clientcode":    "nodes/60-client-code.js"
     }
   },
   "description": "Node-RED Editor-only nodes for introspecting flows.",

package/nodes/55-trigger-import.js

@@ -1,38 +0,0 @@
-module.exports = function(RED) {
-  function TriggerImportFunctionality(config) {
-    RED.nodes.createNode(this,config);
-
-    var node = this;
-    var cfg = config;
-
-    node.on('close', function() {
-      node.status({});
-    });
-
-    node.on("input", function(msg, send, done) {
-      if ( msg.payload && msg.payload.cmd == "delete-nodes" ) {
-        RED.comms.publish('introspect:trigger-import-delete',
-                          RED.util.encodeObject({
-                            msg:     "delete-old-nodes",
-                            payload: msg.payload,
-                          })
-        );
-
-        send(msg);
-        return;
-      }
-
-      RED.comms.publish("introspect:trigger-import-tripped",
-                        RED.util.encodeObject({
-                          flowContent:      msg.payload,
-                          msg:              "import-flow",
-                          autoimport:       cfg.autoimport,
-                          removeduplicates: cfg.removeduplicates,
-                        })
-      );
-
-      send(msg);
-    });
-  }
-  RED.nodes.registerType("TriggerImport", TriggerImportFunctionality);
-}