Widget / Embed Sidebar

Show the ChiliPeppr Google Plus stream.

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>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<div data-role="page" id="com-chilipeppr-widget-embedsidebar" 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 class="panel-title" data-toggle="popover">Embed Sidebar</span>
    </div>
    <div id="com-chilipeppr-widget-embedsidebar-body" class="panel-body">
        <div class="container-fluid">
            blah blah
            <a href="#mypanel" data-role="button" data-inline="true" data-icon="bars">Default panel</a>
        </div>
    </div>
    <div id="com-chilipeppr-widget-embedsidebar-ftr" class="panel-footer hidden">
    </div>
    <div data-role="panel" id="mypanel" data-position="right" data-display="reveal" data-animate="false">
        <!-- panel content goes here -->
        panel content
    </div><!-- /panel -->
</div>

CSS

#com-chilipeppr-widget-tinyg-body {
    /* padding:0; */
}
.com-chilipeppr-interface-cnccontroller-stat .col {
    padding:0 10px 0 0;
}
.com-chilipeppr-interface-cnccontroller-stat .col:last-child {
    padding:0;
}
.com-chilipeppr-interface-cnccontroller-stat .progress {
    margin-bottom:0;
}
.com-chilipeppr-interface-cnccontroller-stat .stat-row {
    padding-top:2px;
}
.com-chilipeppr-interface-cnccontroller-stat div.col.lblpad {
    padding-left:10px;
}
.com-chilipeppr-interface-cnccontroller-stat  .stat-unit {
    font-size:9px;
    display:none;
}
.com-chilipeppr-interface-cnccontroller-stat  div.col.well {
    margin-bottom:0px;
    padding-left:5px;
}
.com-chilipeppr-interface-cnccontroller-stat  .stat-sm {
    font-size:10px;
}

JavaScript

requirejs.config({
    paths: {
        jqueryMobile: '//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min'
    }
});
// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-embedside"], function (gp) {
    console.log("test running of " + gp.id);
    gp.init();
    //gp.showGooglePlus();
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-embedside", ["chilipeppr_ready", "jqueryMobile"], function () {
    return {
        id: "com-chilipeppr-widget-embedside",
        url: "http://fiddle.jshell.net/chilipeppr/DpuWW/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/DpuWW/",
        name: "Widget / Embed Side",
        desc: "This widget shows sidebar on right.",
        init: function () {
            window["parsetags"] = "explicit";
            this.forkSetup();
            this.embedSideBar();            
            console.log(this.name + " done loading.");
        },
        embedSideBar: function() {

            //$( "#mypanel" ).trigger( "updatelayout" );
            $( "#mypanel" ).panel( {
                create: function( event, ui ) { console.log("create. event:", event, "ui:", ui);},
                close: function( event, ui ) { console.log("close. event:", event, "ui:", ui);},
                beforeopen: function( event, ui ) { console.log("beforeopen. event:", event, "ui:", ui);},
                beforeclose: function( event, ui ) { console.log("beforeclose. event:", event, "ui:", ui);},
                open: function( event, ui ) { console.log("open. event:", event, "ui:", ui);}
            });
            $( "#mypanel" ).on( "panelcreate", function( event, ui ) {
                console.log("got panelcreate. event:", event, "ui:", ui);
            } );
            //setTimeout(function() {
                $( "#mypanel" ).panel( "toggle" , {} );
                //$( "#mypanel" ).panel( "open" , {} );
            //}, 10);
            
        },
...