How to load a javascript file in a module

[adrianmak]

I'm learning how to write my own module.

To learn how to write a module, one of method is to read modules developed by other people.

Take Module Manager module which is written by @Soma

https://github.com/somatonic/ModulesManager/blob/master/ModulesManager.module

While I read thru the source, I could not find a javascript thing load statement to load the ModuleManager.js

https://github.com/somatonic/ModulesManager/blob/6ddf1f872b17773cff2426e6f196d4d07c6ee709/ModulesManager.module#L173-L175

I could find only these two lines which is output two javascript variables used by ModuleManager.js. It is not to load the ModuleManager.js for this module.

https://github.com/somatonic/ModulesManager/blob/6ddf1f872b17773cff2426e6f196d4d07c6ee709/ModulesManager.module#L173-L175

https://github.com/somatonic/ModulesManager/blob/6ddf1f872b17773cff2426e6f196d4d07c6ee709/ModulesManager.module#L173-L175

 

Anyone could explain how the module load its own ModuleManager.js file ?

 

 

[BitPoet]

ModuleManager inherits from the Process class and calls its parent's init method here. Process::init in turn invokes Modules::loadModuleFileAssets. This method looks for .js and .css files in the same location and with the same name as the module it is called for and, if found, adds them to $config->scripts / $config->styles.

Admin themes all have lines like these in their template code to load the contents of the $config->scripts and $config->styles:

	<?php foreach($config->styles as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />"; ?>

	<?php foreach($config->scripts as $file) echo "\n\t<script type='text/javascript' src='$file'></script>"; ?>

 

[adrianmak]

Thank you for explanation........

[flydev]

Another way if you would like to load arbitrary JavaScript file in your module is :

• Define an array with the files defined in it :

protected $jsfiles = array(
	'js/MyScript.js'
);

• Then in ready(), write :

foreach ($this->jsfiles as $jsfile) {
	$this->config->scripts->add($this->config->urls->MyModule . $jsfile);
}

 

And, the question "Why my JS file are loaded before Jquery ? Should I call my script in init(), ready() or execute() ?

@ryan answer :

Quote

That's right, it just needs to be moved anywhere after the PW initialization (after init, after ready). JqueryCore is not an autoload module (since its only used by admin) so all the autoload modules init before it does. If your module has an execute() or render() or something like that, that's where you'd want to move your script loader. This is also important for an autoload module because some sites use $config->scripts or $config->styles for the front-end, and you wouldn't want your module loading into that context, because who knows if they are even using jQuery in their site.

 

[adrianmak]

I wrote a few lines of code to practice.

ProcessTest.module

<?php

class ProcessTest extends Process {

    function init() {
        parent::init();
    }

    function ___execute() {

        $this->config->js("demo", "value passed from process module");
        $out = "";
        $out .= "<h2 class='tagline'>Process Test module title</h2>";

        return $out;
    }
}

ProcessTest.js

;
(function($, config) {

    var text = config.demo;

    $("h2.tagline").addClass("color-red");   
    console.log(text);

})(jQuery, config);

ProcessTest.css

.color-red {
    color: #F00;
}

 

I could display the string in console.log passed from the module. But the jquery addClass is not working properly. No class added in the selected element.

[BitPoet]

Perhaps the script runs too early. In that case, wrap the code in a document ready handler.

[adrianmak]

6 hours ago, BitPoet said:

Perhaps the script runs too early. In that case, wrap the code in a document ready handler.

If the code wrapped in a document ready function, how to pass value to a jquery document ready function ?

I checked from internet, there is no way to pass parameter to a jquery document ready function

[kongondo]

Quote

how to pass value to a jquery document ready function ?

Something like this...

// your functions
function doSomething($) {
  // @note: non-self-executing function
  // 'config' is a global PW variable 
  var text = config.demo;
  $("h2.tagline").addClass("color-red");
  console.log(text);
}
// ready
jQuery(document).ready(function ($) {
  doSomething($);// pass jQuery ($) if needed
});

 

Edited April 8, 2018 by kongondo

[BitPoet]

@kongondo's example is exactly what I meant. It's unfortunately a bit hidden in the jQuery api docs, but the third example in the $(document).ready() docs illustrates that the ready handler is passed the jQuery object.

[bernhard]

14 hours ago, adrianmak said:

If the code wrapped in a document ready function, how to pass value to a jquery document ready function ?

why do you need that complicated setup? maybe I missed something here but why not just like this?

$(document).ready(function() {
  var text = ProcessWire.config.demo;
  $("h2.tagline").addClass("color-red");
  console.log(text);
});

 

[adrianmak]

9 hours ago, bernhard said:

why do you need that complicated setup? maybe I missed something here but why not just like this?

$(document).ready(function() {
  var text = ProcessWire.config.demo;
  $("h2.tagline").addClass("color-red");
  console.log(text);
});

 

I leaned from @soma ModuleManager process module.
The js script is written like that.

What I key to learn is to pass variable from php to js.

The class might be passed from php

 

The code I wrote is just for learning purpose. Probably make nonsense at all.