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();
Copyright © 2015