Hydra.js - Register/Start Modules
HTML
<script src="https://github.com/tcorral/Hydra.js/raw/master/src/Hydra.js"></script>
<div id="container">
<h3>Press buttons to see the messages in the "console"...</h3>
<ol>
<li><button id='launchModule'>Start Module</button> → press button to start the module</li>
<li><button id='launchModuleData'>Start Module</button> → press button to start the module with data</li>
<li><button id='launchModuleInstanceData'>Start Module</button> → press button to start another instance of the module with data: </li>
</ol>
</div>
<a href="#" id="clear_logs">[clear logs]</a>
<div id="logs"></div>
CSS
#container { padding:10px; font-family: Arial; }
#logs { height:500px; margin:20px 10px; padding:10px; font-family: Courier; font-size:11px; border:1px solid #000; overflow-y:scroll; }
em { font-family: Courier; font-size:13px; font-weight:bold; }
h3 { font-style: italic; margin-bottom:10px; }
#clear_logs { position: absolute; right: 9px; margin-top: -5px; }
JavaScript
// Register the Module
Hydra.module.register( 'my-simple-module', function( bus ){
return {
init: function( oData ) {
// Code that will be executed when this module is started.
logIt ( new Date(), "blue" );
logIt ("Module Started", "green");
logIt ("module: " + this.__module_id__, "orange");
logIt ("instance: " + this.__instance_id__, "orange");
oData && oData.msg ? logIt ("msg: " + oData.msg) : null;
logIt ("<br/>");
}
};
});
$(document).ready(function () {
$("#launchModule").click(function () {
Hydra.module.start("my-simple-module");
return false;
});
$("#launchModuleData").click(function () {
Hydra.module.start("my-simple-module", "xxxxxx-instance", { msg: "SOME message" });
return false;
});
$("#launchModuleInstanceData").click(function () {
Hydra.module.start("my-simple-module", "my-first-instance", { msg: "FIRST message" });
Hydra.module.start("my-simple-module", "my-second-instance", { msg: "SECOND message" });
return false;
});
});
/* ----------------------------------------------------------- */
// HELPERS to log results
var oLogs = document.getElementById( 'logs' );
function logIt ( sMsg, sColor ){
var oParag = document.createElement('p');
sColor ? oParag.style.color = sColor : null;
oParag.innerHTML = sMsg;
oLogs.appendChild(oParag);
oLogs.scrollTop = oLogs.scrollHeight;
}
$("#clear_logs").click ( function () {
$(oLogs).html("");
});
/* ----------------------------------------------------------- */