...
| Info |
|---|
Work in progress. Will be implemented in Rogo 7.1 (October/November 2019) |
| Warning |
|---|
Not yet merged into develop |
In order to modernise Rogo we are modularising our javascript and implementing requirejs.
...
| Table of Contents |
|---|
Directory Structure
| <base_dir>/js/src/ | core source files |
| <base_dir>/js/modules/ | contains core js modules |
| <base_dir>/js/ | contains core initialisation scripts |
| <functionality_dir>/js/src/ | functional area source files |
| <functionality_dir>/js/ | contains modules and initialisation scripts for functional area |
| <plugin_dir>/js/src/ | plugin source files |
| <plugin_dir>/js/modules/ | contains modules for plugin |
| <plugin_dir>/js/ | contains initialisation scripts for plugin |
Important Files
| <base_dir>/js/modules/requireconfig.min.js | module used to |
| access configurartion items | |
| <base_dir>/js/main.min.js | configures module loading and default js modules |
| <base_dir>/js/rogo.min.js | initialisation script - sets configuration items etc |
| <base_dir>/js/require.js | the requirejs library |
HTML File Structure
Each page in rogo will have the following js header where the rogo configuration is set, requirejs initiated and default modules loaded. Pages may have an additional js load to initiate page specifc modules.
...
Loading config into js
Config is loading loaded into the js via the rogoconfig element on the page. rogo.js reads the attributes in as follows:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
requirejs(['ui', 'jquery', 'jqueryvalidate', 'jqueryui'], function (UIUi, $) { var ui = new UIUi(); // Validate ldap options, and toggle extra settings. $("#installForm").validate(); $('#useLdap').change(function () { $('#ldapOptions').toggle(); }); $('#uselookupLdap').change(function () { $('#ldaplookupOptions').toggle(); }); $('#config').click(function() { ui.go_config(); }); }); |
...
The jsxls module can then access the strings using the landlang_string method. i.e.
| Code Block | ||||
|---|---|---|---|---|
| ||||
requirejs(['jsxls', 'jquery', 'jqueryvalidate'], function (jsxlsJsxls, $) { $('#forgotten_pw').validate({ messages: { email: jsxlsJsxls.lang_string['emailaddressinvalid'], } }); }); |
Coding Standards
- The first letter of variables included via RequireJS should be capitalised, and local variables should be lowercase
Code Block language js title example.js requirejs(['ui', 'jquery'], function (Ui, $) { var ui = new Ui(); $('#config').click(function() { ui.go_config(); }); });