Element / Pubsub Viewer

This element shows a modal of a widget's/element's pubsub so the user can see how this widget/element interacts with other widgets/elements.

by chilipeppr

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div class="modal fade " id="com-chilipeppr-elem-pubsubviewer-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <table class="table table-bordered table-striped">
              <!-- <thead>
                      <tr>
                          <th style="">Signal</th>
                          <th style="">Description</th>
                      </tr>
                  </thead> -->
              <tbody>
                  <tr>
                      <td>ID</td>
                      <td class="pubsub-id">
                          com-chilipeppr-widget-tinyg
                      </td>
                  </tr>
                  <tr>
                      <td>Standalone URL</td>
                      <td class="pubsub-url">
                          http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/
                      </td>
                  </tr>
                  <tr>
                      <td>Fiddle URL</td>
                      <td class="pubsub-fiddleurl">
                          http://jsfiddle.net/chilipeppr/zMbL9/
                      </td>
                  </tr>
                  <tr>
                      <td>Description</td>
                      <td class="pubsub-desc">
                          This element shows a modal of a widget's/element's pubsub so the user can see how this widget/element interacts with other widgets/elements.
                      </td>
                  </tr>
              </tbody>
          </table>

          <div class="pubsub-interface hidden">
             ...

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-elem-pubsubviewer"], function (psv) {
    console.log("test running of " + psv.id);
    //psv.init();
    
    var divs = $('<div id="com-chilipeppr-elem-pubsubviewer-object" class=""></div>' +
    '<div id="com-chilipeppr-elem-pubsubviewer-object2" class=""></div>');
    $('body').append(divs);
    
    chilipeppr.load("#com-chilipeppr-elem-pubsubviewer-object",
        "http://fiddle.jshell.net/chilipeppr/XxEBZ/show/light/", function () {
        require(["inline:com-chilipeppr-widget-tinyg", 'inline:com-chilipeppr-elem-pubsubviewer'], function (tinyg, pubsubviewer) {
            console.log("inside require of tinyg");
            console.log("tinyg obj:", tinyg);
            tinyg.init();
            
            //psv.show(cpobj);
            //pubsubviewer.attachTo($('#com-chilipeppr-elem-pubsubviewer-object .panel-heading .dropdown-menu'), tinyg);
        });
        });

        chilipeppr.load("#com-chilipeppr-elem-pubsubviewer-object2",
        "http://fiddle.jshell.net/chilipeppr/gh45j/show/light/", function () {
        require(["inline:com-chilipeppr-widget-xyz"], function (xyz) {
            console.log("inside require of xyz");
            console.log("xyz obj:", xyz);
            xyz.init();
            //psv.show(cpobj);
            //psv.attachTo($('#com-chilipeppr-elem-pubsubviewer-object2 .panel-heading .dropdown-menu'), xyz);
        });
        });

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-elem-pubsubviewer", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-elem-pubsubviewer",
        url: "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/zMbL9/",
        name: "Element / Pubsub Viewer",
        desc: "This element shows a modal of a widget's/element's pubsub so the user can see how this widget/element interacts with other...