@gregoriusrippenstein/node-red-contrib-nodedev 0.6.0 → 0.6.2

package/nodes/templates/tmplplugin.js

@@ -12,7 +12,7 @@ module.exports = function (RED) {
     }
   }
 
-  RED.plugins.registerPlugin("msg-tracer-plugin", {
+  RED.plugins.registerPlugin("{{ node.name }}-plugin", {
     onadd: () => {
       RED.hooks.add(OnReceiveHookName, {{ node.name }}OnReceiveHook)
 

package/nodes/templates/tmplsidebar.html

@@ -158,12 +158,12 @@
 
       // anything that requires the config node goes here.
       let fillInSidebarForm = () => {
-         RED.events.off('runtime-state', fillInSidebarForm )
+         RED.events.off('flows:loaded', fillInSidebarForm )
 
          // At startup load your config node data into the plugin sidebar html elements
          $("#node-input-data").val(globalYourConfigNode.data);
       }
-      RED.events.on('runtime-state', fillInSidebarForm )
+      RED.events.on('flows:loaded', fillInSidebarForm )
    };
 
    RED.plugins.registerPlugin("{{ node.name }}-sidebar-plugin", { onadd: registerPluginOnAdd });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "dependencies": {
     "pako":          "^2.1.0",
     "tar-stream":    "^3.1.6",

package/plugins/node-factory-sidebar.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-(function() {
+   (function() {
    var globalYourConfigNode = null;
 
    function doGenerateOTP(cfgnode, cb) {
@@ -326,7 +326,7 @@
       })
 
       let fillInSiderBarForm = () => {
-         RED.events.off('runtime-state', fillInSiderBarForm);
+         RED.events.off('flows:loaded', fillInSiderBarForm);
          ensureYourConfigNodeExists();
 
          $("#node-input-nodefactorysidebar-package-registry").val(globalYourConfigNode.pkgregistry);
@@ -343,8 +343,101 @@
          $('#node-input-nodedev-sidebar-otp-counter').val(globalYourConfigNode.counter || globalYourConfigNode._def.defaults.counter.value)
 
          $("#node-input-nodefactorysidebar-package-version").val(globalYourConfigNode.pkgversion);
+
+
+         function addTargetToExternalLinks(el) {
+            $(el).find("a").each(function (el) {
+                  const href = $(this).attr('href');
+                  if (/^https?:/.test(href)) {
+                     $(this).attr('target', '_blank');
+                  }
+            });
+            return el;
+         }
+
+         // Adds `text` to `target` with the following additions:
+         // - wraps text in a div with class `red-ui-help`
+         // - wraps text in a span with class `red-ui-text-bidi-aware` and sets the `dir` attribute to the base text direction of the text
+         // - wraps any text nodes in a span
+         // - wraps any H3 elements in an anchor with class `red-ui-help-info-header` and adds a click handler to toggle the visibility of the following elements until the next H3
+         // - ensures any <a> links to external sites open in a new tab
+         function renderInfoText(text, target, options) {
+            const info = addTargetToExternalLinks($('<div class="red-ui-help"><span class="red-ui-text-bidi-aware" dir=\"' + RED.text.bidi.resolveBaseTextDir(text) + '">' + text + '</span></div>')).appendTo(target);
+            info.find(".red-ui-text-bidi-aware").contents().filter(function () { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap("<span></span>");
+            if (options?.collapseSections !== false) {
+                  const foldingHeader = "H3";
+                  const breakHeader = ["H1", "H2", "H3"];
+                  info.find(foldingHeader).wrapInner('<a class="red-ui-help-info-header expanded" href="#"></a>')
+                     .find("a").prepend('<i class="fa fa-angle-right">').on("click", function (e) {
+                        e.preventDefault();
+                        const isExpanded = $(this).hasClass('expanded');
+                        let el = $(this).parent().next();
+                        while (el.length === 1 && breakHeader.indexOf(el[0].nodeName) === -1) {
+                              el.toggle(!isExpanded);
+                              el = el.next();
+                        }
+                        $(this).toggleClass('expanded', !isExpanded);
+                     });
+            }
+         }
+
+         // this adds the badge to the top of the PkgFile node.
+         RED.view.annotations.register("pkgfile-node-info-docs", {
+            type: "badge",
+            class: "red-ui-flow-node-docs",
+            element: function (node) {
+                  const docsBadge = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+                  const pageOutline = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                  pageOutline.setAttribute("x", 0);
+                  pageOutline.setAttribute("y", 0);
+                  pageOutline.setAttribute("rx", 2);
+                  pageOutline.setAttribute("width", 7);
+                  pageOutline.setAttribute("height", 10);
+                  docsBadge.appendChild(pageOutline)
+
+                  const pageLines = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                  pageLines.setAttribute("d", "M 7 3 h -3 v -3 M 2 8 h 3 M 2 6 h 3 M 2 4 h 2")
+                  docsBadge.appendChild(pageLines)
+                  return docsBadge;
+            },
+            show: function (n) { return n.type == "PkgFile" },
+            popover: {
+                  content: function (n, popoverInstance) {
+                     const section = $('<div class="red-ui-sidebar-section red-ui-flow-annotation-popover-section"></div>')
+                     const banner = $('<div class="red-ui-sidebar-banner"></div>').appendTo(section)
+                     $('<div class="red-ui-sidebar-banner-icon"><i class="fa fa-info"></i></div>').appendTo(banner)
+                     $('<div class="red-ui-sidebar-banner-label" data-i18n="sidebar.info.name"></div>').appendTo(banner)
+                     const tools = $('<div class="red-ui-sidebar-banner-tools"></div>').appendTo(banner)
+                     const canEdit = RED.user.hasPermission('flows.write') && !RED.workspaces.isLocked()
+                     if (canEdit) {
+                        const editButton = $('<button type="button" data-i18n="[title]common.label.edit"><i class="fa fa-pencil"></i></button>').appendTo(tools)
+                        editButton.on('click', function (evt) {
+                              evt.preventDefault()
+                              evt.stopPropagation()
+                              if (popoverInstance) { popoverInstance.close() }
+                              RED.editor.edit(n)
+                        })
+                     }
+                     const body = $('<div class="red-ui-flow-annotation-popover-body contact-node-popover-content"></div>').appendTo(section)
+                     renderInfoText(RED.utils.renderMarkdown(n._def.info.call(n)), body, { collapseSections: false });
+
+                     // Resolve data-i18n attributes on content
+                     section.i18n()
+
+                     // On the next tick, render any unrendered mermaid diagrams
+                     // (Already-rendered diagrams will be skipped via the `mermaid-processed` attribute)
+                     setTimeout(function () {
+                        RED.editor.mermaid.render()
+                     }, 0)
+
+                     return section
+                  },
+                  width: 400
+            }
+         })
       }
-      RED.events.on('runtime-state', fillInSiderBarForm);
+      RED.events.on('flows:loaded', fillInSiderBarForm);
    };
 
    RED.plugins.registerPlugin("nodedev-sidebar-plugin", { onadd: initialiseSideBarForm });
@@ -353,7 +446,7 @@
 
 <!-- The html for the right sidebar plugin screen -->
 <script type="text/x-red" data-template-name="NodeFactorySidebar">
-<div style="position: relative; height: 100%; overflow-y: auto;">
+   <div style="position: relative; height: 100%; overflow-y: auto;">
 <div class="form-row func-nodedev-pkgimporter-tabs-row">
     <ul style="min-width: 600px; margin-bottom: 20px;" id="func-nodedev-pkgimporter-tabs"></ul>
 </div>
@@ -484,4 +577,4 @@
     </div>
 </div>
 </div>
-</script>
+</script>