@gregoriusrippenstein/node-red-contrib-introspection 0.0.10 → 0.1.1

package/README.md

@@ -53,13 +53,25 @@ Since version 0.0.5 the Screenshot node takes one input. That input will trigger
 
 There is an example [flow](/examples/trigger-and-save-screenshot.json) that demonstrates this feature. The author is aware that this is dangerously close to enabling spyware for flow modification, please see the [LICENSE](/LICENSE) and behaviour. 
 
+### IsMobile
+
+Is a palette-only node meaning that it should not be included in any flows. It's single purpose is to remove the palette and sidebars on devices which have a screen width less that 890px. Node-RED has both bars open by default, that makes the mobile experience not so nice. This node is a simple hack that uses `onpaletteadd` callback to close both bars if the device is detected to have "small" width.
+
+If this functionality is not desired, then disable this node in the palette manager.
+
+### Navigator
+
+Is a palette-only node meaning that it should not be included in any flows. What it does is to highlight nodes if they are referenced in the URL. This node will check the hash value of the URL and if it contains a node id, it will jump to the workspace and focus on the node in question. The node id should be given in the form of `/n/<node id>`, for example: [`.../#flow/878170e6f86c502b/n/b3baf3ca092064a9`](https://demo.openmindmap.org/omm/#flow/878170e6f86c502b/n/b3baf3ca092064a9). Any flow id that is given will be ignored and instead the flow of the node will be shown.
+
+This is a hack that uses the `onpaletteadd` callback to do its magic. If this functionality is not desired, then disable this node in the palette manager.
+
 ## Examples
 
 There are some example flow contained in the package. There are also examples to be found online: 
 
-- [Orphans](https://demo.openmindmap.org/omm/#flow/3ebb65fdbecb182e) - node is top left of flow or search for `type:Orphans`
-- [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c) - top right
-- [Screenshot](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e) - top left
+- [Orphans](https://demo.openmindmap.org/omm/#flow/3ebb65fdbecb182e/n/2be3f8794979d47b) - node is top left of flow or search for `type:Orphans`
+- [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae/n/b5f189a78d829197) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c/n/e3262d9d2791ab78) - top right
+- [Screenshot](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e/n/499b1383580831aa) - top left
 
 Example screenshot: 
 

package/nodes/15-screenshot.html

@@ -249,14 +249,24 @@
       if ( !window[functName] ) {
         window[functName] = (e,m) => {
           if ( m.msg == "timer-tripped" ) {
-            RED.notify("Screenshot triggered", { type: "warning" });
+
+            if ( m.notification != "off" ) {
+              RED.notify("Screenshot triggered", { type: "warning" });
+            }
+
+            var notification = m.notification;
             nr_intro_generate_svg( (svgdata) => {
               $.ajax({
                 type: "POST",
                 url: "/screenshot",
-                data: { d: svgdata },
+                data: {
+                  ...m,
+                  d: svgdata
+                },
                 complete: (data) => {
-                  RED.notify("Screenshot posted", { type: "success" });
+                  if ( notification != "off" ) {
+                    RED.notify("Screenshot posted", { type: "success" });
+                  }
                 },
                 dataType: "image/svg+xml;charset=utf-8"
               });

package/nodes/15-screenshot.js

@@ -11,10 +11,11 @@ module.exports = function(RED) {
 
     node.on("input", function(msg, send, done) {
       RED.comms.publish("introspect:" + node.id, RED.util.encodeObject({
+        ...msg,
         msg: "timer-tripped",
       }));
 
-      node.status({ fill: "green", shape: "dot", text:"Taking screenshot" });
+      node.status({ fill: "green", shape: "dot", text: "Taking screenshot" });
       setTimeout( () => { node.status({}) }, 1432 );
 
       send(msg);

package/nodes/25-ismobile.html

@@ -0,0 +1,51 @@
+<script type="text/javascript">
+  RED.nodes.registerType('IsMobile',{
+    color: '#e5e4ef',
+    icon: "font-awesome/fa-mobile",
+    category: 'introspection',
+    defaults: {
+      name: {
+        value:"",
+      },
+    },
+    inputs:0,
+    outputs:0,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    labelStyle: function() {
+      return this.name?"node_label_italic":"";
+    },
+
+    onpaletteadd: () => {
+      setTimeout( function() {
+        RED.sidebar.info.show()
+      }, 1000);
+
+      // a random value of 890px to indicate mobile, is very arbitrary.
+      if ( window.matchMedia('only screen and (max-width: 890px)').matches ) {
+        setTimeout( function() {
+          // taken from https://discourse.nodered.org/t/togglepalette-v-togglesidebar/78169/3
+          RED.actions.invoke("core:toggle-palette", false)
+          RED.actions.invoke("core:toggle-sidebar", false)
+        }, 1400);
+      }
+    },
+
+    onpaletteremove: () => {
+    },
+  });
+</script>
+
+<script type="text/html" data-template-name="IsMobile">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="Name">
+    </div>
+</script>
+
+<script type="text/html" data-help-name="IsMobile">
+    <p>A palette-only node, this does not get included in any flow. This node hides the palette bar and the sidebar on mobile devices. If not required, disable the node in the palette manager.</p>
+</script>

package/nodes/25-ismobile.js

@@ -0,0 +1,17 @@
+module.exports = function(RED) {
+  function IsMobileFunctionality(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) {
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("IsMobile", IsMobileFunctionality);
+}

package/nodes/30-navigator.html

@@ -0,0 +1,53 @@
+<script type="text/javascript">
+  RED.nodes.registerType('Navigator',{
+    color: '#e5e4ef',
+    icon: "font-awesome/fa-crosshairs",
+    category: 'introspection',
+    defaults: {
+      name: {
+        value:"",
+      },
+    },
+    inputs:0,
+    outputs:0,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    labelStyle: function() {
+      return this.name?"node_label_italic":"";
+    },
+
+    onpaletteadd: () => {
+      var nodeId = window.location.hash.match(/\/n\/(.{16})/);
+
+      // RED.nodes is not initialised at this point, so there is no way to
+      // check whether the nodeId really does exist, so we assume that nodeId
+      // will be eventually addded to a workspace.
+      if ( nodeId ) {
+        var hndlr = (node) => {
+          if ( node.id == nodeId[1] ) {
+            setTimeout( function() {
+              RED.workspaces.show(RED.nodes.node(nodeId[1]).z,false,false,true);
+              RED.view.reveal(nodeId[1],true)
+            }, 1234);
+            RED.events.off("nodes:add", hndlr);
+          }
+        };
+        RED.events.on("nodes:add", hndlr);
+      }
+    },
+  });
+</script>
+
+<script type="text/html" data-template-name="Navigator">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="Name">
+    </div>
+</script>
+
+<script type="text/html" data-help-name="Navigator">
+  <p>A palette-only node, this does not get included in any flow. This node ensures that nodes are focused on when the url contains `/n/[nodeid]`. If not required, disable the node in the palette manager.</p>
+</script>

package/nodes/30-navigator.js

@@ -0,0 +1,17 @@
+module.exports = function(RED) {
+  function NavigatorFunctionality(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) {
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("Navigator", NavigatorFunctionality);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.0.10",
+  "version": "0.1.1",
   "keywords": [
     "node-red"
   ],
@@ -8,7 +8,7 @@
   "license": "SEE LICENSE IN https://github.com/gorenje/node-red-contrib-introspection/blob/main/LICENSE",
   "author": "Gerrit Riessen <nodered@spreads-the.love> (https://spread-the.love)",
   "engines": {
-    "node": ">=6"
+    "node": ">=8"
   },
   "node-red": {
     "version": ">=2.0.0",
@@ -16,7 +16,9 @@
       "seeker":     "nodes/05-seeker.js",
       "sink":       "nodes/10-sink.js",
       "screenshot": "nodes/15-screenshot.js",
-      "orphans":    "nodes/20-orphans.js"
+      "orphans":    "nodes/20-orphans.js",
+      "ismobile":   "nodes/25-ismobile.js",
+      "navigator":  "nodes/30-navigator.js"
     }
   },
   "description": "Node-RED Editor-only nodes for introspecting flows.",