Widget / Hello World IntroJs

This widget is just a Hello World example.

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 id="com-chilipeppr-widget-hellointrojs" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group">
            </div>
            <div class="btn-group">
                <div class="dropdown">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                
                </ul>
                </div>
            </div>
        </div>
        <span data-step="1" data-intro="This is a ChiliPeppr Widget title" class="panel-title" data-toggle="popover">Hello World IntroJs</span>
    </div>
    <div id="com-chilipeppr-widget-hello-body" class="panel-body">
        <a class="btn btn-large btn-success btn-startIntroJs" href="javascript:">Show me how</a>
        Hello World inside the body of the widget.
        
    </div>
    <div id="com-chilipeppr-widget-hello-ftr" class="panel-footer hidden">
</div>

JavaScript

requirejs.config({
    paths: {
        IntroJs: 'http://usablica.github.io/intro.js/intro',
    },
    shim: {
    }
});

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-hellointrojs"], function (hello) {
    console.log("test running of " + hello.id);
    hello.init();
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-hellointrojs", ["chilipeppr_ready", "IntroJs"], function (cp, introJs) {
    return {
        id: "com-chilipeppr-widget-hellointrojs",
        url: "http://fiddle.jshell.net/chilipeppr/fLtfxtzn/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/fLtfxtzn/",
        name: "Widget / Hello World IntroJs",
        desc: "This widget is just a Hello World IntroJs example.",
        publish: {
        },
        subscribe: {},
        foreignPublish: {
        },
        foreignSubscribe: {
        },
        init: function () {

            this.forkSetup();

            this.setupIntroJs();
            
            console.log(this.name + " done loading.");
        },
        introJs: null,
        setupIntroJs: function() {
            console.log("introJs", introJs);
            this.introJs = introJs;
            var that = this;
            $('.btn-startIntroJs').click(function() {
                that.introJs().start();
            });
            this.addCss();
        },
        addCss: function() {
            var cssfile = "http://usablica.github.io/intro.js/introjs.css"
            // load jquery-ui css, but make sure nobody else loaded it
            if (!$("link[href='" + cssfile + "']").length)
                $('<link>')
                    .appendTo('head')
                    .attr({type : 'text/css', rel : 'stylesheet'})
                    .attr('href', cssfile);

        },
        forkSetup: function () {
            var topCssSelector = '#com-chilipeppr-widget-hellointrojs';
            
            $(topCssSelector + '...