Scenario used in demo application

// scenario from demo application

// create new scenario
var scenario = new smh();

// populate steps ....

scenario.addStepWait(1000);

// open introduction dialog
scenario.addStep(function (context, _continue) {
    $('#message-intro').popup({
        color: 'transparent',
        closeelement: ".btn, .close",
        transition: 'all 0.3s',
        onclose: _continue // pause execution until user closes the dialog
    }).popup('show');
});

// block input
scenario.addStepBlockScreen();

scenario.addStepWait(500);

//show tooltip for the list
scenario.addStep(function (context) {
    $('#users-list-panel').tooltip({
        html: true,
        placement: "right",
        trigger: "manual",
        title: '<h4 style="white-space: nowrap;">Here is the list of users.</h4>'
    }).tooltip("show");
});

scenario.addStepWait(500);

// add glow effect to the list
scenario.addStepGlow({
    element: '#users-list-panel',
    duration: 400,
});

scenario.addStepWait(1500);

// destroy tooltip
scenario.addStep(function (context) {
    $('#users-list-panel').tooltip("destroy");
});

// remove glow effect from the list
scenario.addStepUnglow({
    element: '#users-list-panel'
})

scenario.addStepWait(500);

// show tooltip to prompt user to open details
scenario.addStep(function (context) {
    $('#users-list-panel').tooltip({
        html: true,
        placement: "right",
        trigger: "manual",
        title: '<h4 style="white-space: nowrap;">Try to open details for one of them.</h4>'
    }).tooltip("show");
});

scenario.addStepWait(500);

// add glow effect to all buttons in the list
scenario.addStepGlow({
    element: '#users-list-panel .btn',
    duration: 400,
    color: 'green'
});

scenario.addStepUnblockScreen();

// pause execution until user clicks on open button
scenario.addStep(function(cotext, _continue){
    $('#users-list-panel .btn').click(_continue);
});

scenario.addStepBlockScreen();

scenario.addStepWait(500);

// destroy tooltip
scenario.addStep(function (context) {
    $('#users-list-panel').tooltip("destroy");
});

// remove glow effect from buttons
scenario.addStepUnglow({
    element: '#users-list-panel .btn',
    color: 'green'
})

scenario.addStepUnblockScreen();

// show the next popup
scenario.addStep(function (cotext, _continue) {
    $('#message-after-details').popup({
        color: 'transparent',
        closeelement: ".btn, .close",
        transition: 'all 0.3s',
        onclose: _continue // pause execution until user closes the dialog
    }).popup('show');
});

scenario.addStepWait(500);

// show tooltip for color selector button
scenario.addStep(function (context) {
    $('#open-color-selector').tooltip({
        html: true,
        placement: "left",
        trigger: "manual",
        title: '<h4 style="white-space: nowrap;">Now try this cute button.</h4>'
    }).tooltip("show");
    // change dialog button text
    $('#color-popup .btn').text('Got it');
});

scenario.addStepWait(500);

// add glow effect to color selector button
scenario.addStepGlow({
    element: '#open-color-selector',
    color: 'green',
    duration: 400
});

// pause execution until user opens color selection dialog
scenario.addStep(function (cotext, _continue) {
    $('#open-color-selector').click(_continue);
});

// remove glow effect from color selector button
scenario.addStepUnglow({
    element: '#open-color-selector',
    color: 'green',
    duration: 400
});

// destroy tooltip
scenario.addStep(function (context) {
    $('#open-color-selector').tooltip("destroy");
});

scenario.addStepBlockScreen();

scenario.addStepWait(500);

// show "how to use" tooltip for color selector
scenario.addStep(function (context) {
    $('#color-sliders').tooltip({
        html: true,
        placement: "right",
        trigger: "manual",
        title: '<h4 style="white-space: nowrap;">You can use it in following way...</h4>'
    }).tooltip("show");
});

scenario.addStepWait(1000);

// move color sliders
scenario.addStepAnimateMultiple(
    { r: 0, g: 0, b: 0 },
    { r: 255, g: 0, b: 255},
    1000,
    setRgbSlidersValue,
    'swing');

// move color sliders again
scenario.addStepAnimateMultiple(
    { r: 255, g: 0, b: 255 },
    { r: 0, g: 255, b: 0 },
    2000,
    setRgbSlidersValue,
    'swing');

scenario.addStepUnblockScreen();

scenario.addStep(function (cotext, _continue) {
    $('#color-popup').popup({
        closeelement: ".btn, .close",
        onclose: _continue // pause execution until user close color selection dialog
    });
});

scenario.addStepWait(500);

// highlight run scenario link
scenario.addStepGlow({
    element: '#run-scenario',
});

// open summary dialog
scenario.addStep(function (cotext, _continue) {
    $('#message-completed').popup({
        color: 'transparent',
        closeelement: ".btn, .close",
        transition: 'all 0.3s',
        onclose: _continue // pause execution until user closes the dialog
    }).popup('show');
});

// remove glow effect from run scenario link
scenario.addStepUnglow({
    element: '#run-scenario',
});

scenario.addStep(function () {
    // revert button caption that we changed earlier in scenario
    $('#color-popup .btn').text('Close');
    // destroy tooltip
    $('#color-sliders').tooltip("destroy");
    // reset color selector values
    setRgbSlidersValue({ r: 0, g: 0, b: 0 });
})

// ............................................

scenario.execute();