bolt-visualiser v7.2.11

visualiser bolt

Structure

For use with the connected insights orchestrater.

Active code lives in the bolt directory. This is copied into the project by the skeletor-cli.

The rest is just dev fluff.

Setup

HTML

Include the following div in your slide to inject the bolt index.html into the app:

<div class="bolt-visualiser-container"></div>

If your bolt requires modals, store the HTML in bolt/assets/html. Add the basename of the modal to the bolts.json in the modals array, i.e.:

{
  "visualiser": {
    "package": "visualiser",
    "renderId": "",
    "renderClass": "bolt-visualiser-container",
    "modelInputs": {},
    "modals": [
      "visualiser-modal"
    ]
  }
}

These will be loaded dynamically when the bolt is setup.

To show the modal, use the standard skeletor ways of doing it, e.g:

<button class="bolt-visualiser-modal-btn showModal" data-target="bolt-visualiser-modal"><i class="fa fa-gears" aria-hidden="true"></i> <mtech-msg>Bolt modal</mtech-msg></button>

Or programmatically:

MA.pilot.showmodal(`bolt-visualiser-modal`);

data

Edit the bolts.json to suit your app. The default inputs may not map onto the data in your tool.

If the bolt has code that needs to be excluded in your use case, add the paths to the excludes array:

{
"excludes":["assets/js/excludeMe.js", "assets/js/excludeDir/**/*"]
}

If the bolt has files that should not be copied into the target project, add the paths to the ignore array:

{
"ignore":["lib", "lib/**/*"]
}

Code

After a bolt is selected, the bolt uses the wrench to emit a post:bolt event.

hotrod should hook into this to handle any extra functionality:

/**
 * Handle bolt changes.
 * @method _postBolt
 * @param {Event} evt event object
 * @memberof MtechAccess.hotrod
 * @private
 */
function _postBolt(evt) {
  if (evt.boltData.id === `visualiser`) {
    // do something!
  }
}