Widget Developer Documentation

Samples

This widget creates a Disqus comment section on your web page. As sample code it’s extremely simple. It mainly shows how to build a widget to wrap around some third-party code.

<?php
//
// Disqus widget
//
// Most of this code is provided by Disqus. The widget allows
// the user to easily enter their "shortname". Nothing fancy.
//
if ( !Moboom::deviceHasProfile('Feature Phone')) {

    $disqus_shortname = Moboom::getWidgetSetting('disqus_shortname');
    ?>

    <div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = '<?= $disqus_shortname ?>';

        (function () {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
<?
}

This is a more typical and sophisticated widget. It uses multiple scripts and multiple style sheets. It was built as a demonstration, to show how to wrap a third-party library in a Moboom widget.

<?php
//
// Product Switch widget
//
// Built as a wrapper around the Codrops sample "View Mode Switch"
//   http://tympanus.net/codrops/2013/07/01/view-mode-switch/
//
// The scripts and styles are included in the Codrops download.
// No changes were made; only the PHP code is interesting here.
//
// Note that the <ul> tag is given an ID ("#cbp-container"), which
// is referenced in the script below. This is why the script is loaded
// directly, rather than using registerScriptFile().
//
// Also, it's generally a best practice to ensure that any IDs in your
// widget are unique, in order to allow multiple instances of the
// widget to coexist peacefully on a single web page. One simple way
// to accomplish this is to append a random number to the ID:
//
//    $uniqueId = mt_rand(100,999); // generate a 3-digit random number
//    $itemID = "cbp-container-$uniqueId"
//

$baseURL = Moboom::getBaseUrl();
Moboom::registerScriptFile( $baseURL . 'js/cbpViewModeSwitch.js', Moboom::POS_END);
Moboom::registerScriptFile( $baseURL . 'js/classie.js', Moboom::POS_END);
Moboom::registerScriptFile( $baseURL . 'js/jPages.js', Moboom::POS_END);
Moboom::registerCssFile(    $baseURL . 'css/main.css');
Moboom::registerCssFile(    $baseURL . 'css/holder.css');
Moboom::registerCssFile(    $baseURL . 'css/icons-fontawesome.css');

$cbp_items = Moboom::getWidgetSetting('cbp_collection');
$items_per_page = intval( Moboom::getWidgetSetting('items_per_page', 8));
?>

<div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-grid">
    <div class="cbp-vm-options">
        <a href="#" class="cbp-vm-icon cbp-vm-grid cbp-vm-selected" data-view="cbp-vm-view-grid">Grid View</a>
        <a href="#" class="cbp-vm-icon cbp-vm-list" data-view="cbp-vm-view-list">List View</a>
    </div>
    <ul id="cbp-container">
        <?php
        foreach ($cbp_items as $item) {
            if(!empty($item["cbp_image"]) )
                $imagelink = Moboom::createImageUrl( $item["cbp_image"]);
            else
                $imagelink = '';
            ?>
            <li>
                <a class="cbp-vm-image" href="<?= $item['cbp_image_link'] ?>"><img src="<?= $imagelink ?>"></a>
                <h3 class="cbp-vm-title"><?= $item['cbp_title'] ?></h3>
                <div class="cbp-vm-price"><?= $item['cbp_price'] ?></div>
                <div class="cbp-vm-details"><?= $item['cbp_desc'] ?></div>
                <a class="cbp-vm-icon cbp-vm-add" href="<?= $item['cbp_btn_link'] ?>"><?= $item['cbp_btn_text'] ?></a>
            </li>
        <?php } ?>
    </ul>
</div>
<div class="holder"></div>

<script>
    // when document is ready
    $(function(){
        // initiate the plugin
        $("div.holder").jPages({
            containerID  : "cbp-container",
            perPage      : <?= $items_per_page ?>,
            startPage    : 1,
            startRange   : 1,
            midRange     : 5,
            endRange     : 1
        });
    });
</script>

This widget was built for a site which needed a simple “open/close” toggle. The button toggles the state of the selected page element. This allows the user to create a content box that is arbitrarily complex, and have the whole thing easily hidden behind the toggle button.

<?php
//
// ToggleBox widget
//
// Creates a combination of a button and a hide-able div. The
// button toggles the visibility of the div.
//

Moboom::registerScriptFile( Moboom::getBaseUrl() . 'toggleBox.js', Moboom::POS_END);

// settings
//
$buttonText = Moboom::getWidgetSetting('buttonText');
$pageElt = Moboom::getWidgetSetting('content');

// start open? either by user request, or by default on feature phones.
//
if( Moboom::deviceHasProfile('Feature Phone'))
    $startOpen = true;
else
    $startOpen = Moboom::getWidgetSetting('startOpen', true);
?>

<a class="toggler btn<?php if ( $startOpen) echo ' on' ?>"><?php echo $buttonText ?></a>

<div class="toggleContent"<?php if ( $startOpen) echo ' style="display:block"' ?>>
    <?php Moboom::includePageElement( $pageElt, null); ?>
</div>

The styles below are stored in the default styles for the widget (in the “advanced styles” section).

.togglebox {

    a.toggler {
        color: @toggleTextColor;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: @toggleButtonColor2;
        *background-color: @toggleButtonColor2;
        background-image: -moz-linear-gradient(top, @toggleButtonColor1, @toggleButtonColor2);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@toggleButtonColor1), to(@toggleButtonColor2));
        background-image: -webkit-linear-gradient(top, @toggleButtonColor1, @toggleButtonColor2);
        background-image: -o-linear-gradient(top, @toggleButtonColor1, @toggleButtonColor2);
        background-image: linear-gradient(to bottom, @toggleButtonColor1, @toggleButtonColor2);
        background-repeat: repeat-x;
        border-radius:2px;
        border-color: @toggleButtonColor2;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@toggleButtonColor1', endColorstr='@toggleButtonColor2', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

        &:hover,
        &:active,
        &.active,
        &.disabled,
        &[disabled] {
           color: #FFFFFF;
           background-color: @toggleButtonColor2;
           *background-color: #003bb3;
        }

        &.on {
           box-shadow: 0 0 7px rgba(0,0,0,0.3);
        }
    }

    .toggleContent {
        background:#fff;
        padding:12px;
        margin:6px 0;
        box-shadow: 0 0 7px rgba(0,0,0,0.2);
        display: none;
        border:1px solid #aaa;
        border-radius: 3px;
    }
}
$(function() {

    $('.togglebox a.toggler').click( function(e) {

        var $b = $(this),
            $c = $b.next();

      	e.preventDefault();
        $b.toggleClass('on');
        $c.slideToggle( 250);
    });
});

This is an extremely simple login widget.

<?php
//
// Login Widget
//
// The simplest possible version. This widget creates a form, with
// no validation, and posts back to itself.
//

if ( !isset($_POST[ 'loginAction'])) {
?>
    <form class="form-horizontal" method="POST">
        <div class="control-group">
            <label class="control-label" for="username">Email address:</label>
            <div class="controls">
                <input type="text" id="username" name="username" placeholder="Email">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="password">Password</label>
            <div class="controls">
                <input type="password" id="password" name="password" placeholder="Password">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <input type="submit" name="loginAction" value="login" class='btn btn-primary' />
            </div>
        </div>
    </form>
<?
} else {
    Moboom::userLogin(
        $_POST['username'],
        $_POST['password'],
        Moboom::createUrl( '/user-home'),           // on success
        Moboom::createUrl( '/access-denied?e=3'));  // on failure
}