Possible bug with get_script_depends / before_enqueue_scripts

[ProgressionStudios]

Using the Hello World Plugin example for showing custom JS per widget (https://github.com/pojome/elementor-hello-world). I noticed the JavaScript doesn't load when the frontend editor is open:

I replaced the /assets/js/hello-world.js file with the code below to make a simple test changing the background color to yellow:

( function( $ ) { $(".elementor-widget-container").css("background-color", "yellow"); } )( jQuery );

Screen-shot when viewing normally: http://i.imgur.com/noWYvsQ.png
Screen-shot when front-end editor open (No yellow highlight): http://i.imgur.com/RWAy3vo.png

Let me know if this is a bug or of I am doing something wrong.

[KingYes]

Are you write your JS code like this structure: https://github.com/pojome/elementor-hello-world/blob/master/assets/js/hello-world.js ?

[ProgressionStudios]

I replaced all the code in the hello-word.js with:

( function( $ ) { $(".elementor-widget-container").css("background-color", "yellow"); } )( jQuery );

Can you provide a simple code example with the above code using the hello-world example (Simple background color change)? It sounds like I'm not understanding your example located here: https://github.com/pojome/elementor-hello-world/blob/master/assets/js/hello-world.js

[KingYes]

You don't use global jQuery selector on your widget. You need to based on $scope variable.

[ProgressionStudios]

Unfortunately I don't understand what you are saying. I am trying to enqueue a javascript file only when a specific widget is called. If I use the default WordPress wp_enqueue_scripts, it works great on both frontend and backend. However I don't want the javascript to show up on all pages when it's not needed. I assumed the solution was to use:

add_action( 'elementor/frontend/after_register_scripts', function() { wp_register_script( 'hello-world', plugins_url( '/assets/js/hello-world.js', ELEMENTOR_HELLO_WORLD__FILE__ ), [ 'jquery' ], false, true ); } );

and then adding get_script_depends for the widget area:

public function get_script_depends() { return [ 'hello-world' ]; }

But it sounds like I will also need to wrap additional javascript around the code and refer to the $scope variable? I am either missing the concept or it is very difficult to do a simple enqueue of a javascript file per widget (For example including a prettyPhoto lightbox file for one widget).

Perhaps you can put a simple example together using the code above for the hello-world widget code I was testing (that may help out as I don't understand the $scope variable and what is required)?

$(".can-be-any-class-just-an-example").css("background-color", "yellow");

PS: I really appreciate the help and responsiveness.

[KingYes]

Like this:

( function( $ ) {
	var WidgetHelloWorldHandler = function( $scope, $ ) {
		$scope.find( '.can-be-any-class-just-an-example' ).css( 'background-color', 'yellow' );
	};
	
	// Make sure you run this code under Elementor..
	$( window ).on( 'elementor/frontend/init', function() {
		elementorFrontend.hooks.addAction( 'frontend/element_ready/hello-world.default', WidgetHelloWorldHandler );
	} );
} )( jQuery );

Just change the hello-world to your Widget ID..

[michellomp]

@KingYes I had a question when you have
var rellax = new Rellax('.rellax', {center: true});
how do you base it on $scope variable ?
Thanks

[KingYes]

@michellomp:

Like this:
var rellax = new Rellax( $scope.find( '.rellax' ), { center: true } );