EditorTheme scripts

General
1

Hi all,
I'm just discovered the possibility to extend basic editor functionality through editor theme, in particular with scripts.

I'm wondering how to do that. I didn't find any example so I've got various questions.

For example:

  1. is jquery supported in my script?
  2. how to attach event or monitoring them?

I made a try just with some simple code to console log on document ready, or to check if deploy button is pressed.

Something like:

$(document).on('click', '#red-ui-header-button-deploy', function() {
    // Esegui il tuo codice al click del pulsante deploy
    // parent.postMessage("Il tuo messaggio da inviare", "*");
    alert("ecco qui!");
    console.log("ecco qui!!!!");
});

$( document ).ready(function() {
    console.log( "ready!" );
});

I save it on a .js file, then i configure on settings.js page/scripts with an array containing the absolute path (/data/myscript.js).

But it seems nothing change.

If there's an example or somebody could gently provide me that I would be very happy. :slight_smile:

Thanks in advance.

2

Okay,
I found a way to do it: really cool!

But now i'm wondering how to check if the flow was just changed or if it's already saved?
My first impression was checking the deploy button class (if disabled or not), but I think there's a better way.

Any suggestion about this point?

3

For other people's reference, you can load additional resources to the Editor via the editorTheme property in settings.js, as in this example:

editorTheme: {
   // some stuff
   /** Load additional resources to the Editor page */
   page: {
       // css: '/src/nr-source/ti-theme/ti-editor-styles.css',
       scripts: '/src/nr-source/ti-theme/ti-editor-fns.js',
   },
   // more stuff
},

There are a number of events you should be able to use since you seem to be able to access the RED object.

RED.events.on("runtime-state", function(event) { .. })
RED.events.on("nodes:remove", function(n) { .. })
RED.events.on("nodes:add", function(n) { ... })
RED.events.on('deploy', function() { ... })
RED.events.on('workspace:dirty', function(data) { ... })
RED.events.on('nodes:change', function(data) { ... })

1 Like
4

Perfect!

Just to share, here:

https://nodered.org/docs/api/ui/events/

there's the list of all RED events that you can check in you script.

In my case, I just added a script like this one:

$( document ).ready(function() {
  console.log( "Additional script ready!" );

  RED.events.on('workspace:dirty', function(data) {
            if (data.dirty) console.log("Something change...");
            window.parent.postMessage({changed:data.dirty}, '*');
  })


  RED.events.on('deploy', function(data) {
            console.log("Deployed");
            window.parent.postMessage({changed:false}, '*');
  })

});

In this way I can use Node_Red client inside an iFrame of the main application and, through postmessage method, share status or other changing with the main application.

Please note that probably in my case is just enough to check the "workspace:dirty" event, but for a couple of things I'll develop next I preferred to check also the "deploy" event.

Thank you @TotallyInformation .

1 Like
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.