/**
* Used for the tutorial on the sandbox
*/
jQuery(document).ready(function($){
var dslcBubblePosCheck;
$(document).on('click', '.dslc-tut-proceed-secondary', function(e) {
e.preventDefault();
$('.video-modal').fadeIn(500, function(){
$('.videoThumb[href*="' + $('.video-modal').data('video-id') + '"]').click();
$('.video-modal').fitVids();
lc_calc_video_width();
});
});
$(document).on('mousedown', '.dslc-tut-prevent, .dslca-action-disabled, .dslc-tut-panel-prevent', function(e) {
$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 5 });
setTimeout( function(){
$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 10 });
setTimeout( function(){
$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 5 });
setTimeout( function(){
$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 0 });
}, 20);
}, 20);
}, 20);
});
function dslc_tut_keep_up( dslcStep ) {
dslcBubblePosCheck = setInterval( function(){
var dslcBubble, dslcOffset, dslcLeftOffset, dslcTopOffset, dslcArrOffsetLeft, dslcType, dslcAnimation, dslcBubbleHeight, dslcTut, dslcTutIDVar;
dslcBubble = $('.dslc-tut-bubble');
if ( $(dslcStep.dslc_target).is(':visible') ) {
dslcOffset = $(dslcStep.dslc_target).offset();
dslcLeftOffset = dslcOffset.left + ( $(dslcStep.dslc_target).outerWidth() / 2 - dslcBubble.outerWidth() / 2 )
/**
* Stop from going outside ( left side )
*/
if ( dslcLeftOffset < 0 ) {
dslcArrOffsetLeft = ( dslcBubble.width() / 2 ) + dslcLeftOffset + $(dslcStep.dslc_target).width() / 2 + 15 + 3 + 'px';
dslcLeftOffset = 15;
}
/**
* Stop from going outise ( right side )
*/
if ( ( dslcBubble.outerWidth() + dslcLeftOffset ) > $(window).width() ) {
dslcArrOffsetLeft = ( dslcBubble.outerWidth() - $(dslcStep.dslc_target).width() / 2 ) - ( $(window).width() - ( $(dslcStep.dslc_target).offset().left + $(dslcStep.dslc_target).width() ) ) + 'px';
if ( parseInt( dslcArrOffsetLeft ) > ( dslcBubble.outerWidth() - 20 ) ) {
dslcArrOffsetLeft = dslcBubble.outerWidth() - 20 + 'px';
}
dslcLeftOffset = $(window).width() - dslcBubble.outerWidth() - 15;
}
/**
* Position - Action/Information
*/
if ( dslcStep.dslc_type == 'action' )
dslcTopOffset = dslcOffset.top - dslcBubble.outerHeight() - 10;
else
dslcTopOffset = dslcBubbleOverlay.height() / 2 - dslcBubble.outerHeight() / 2 - 59;
/**
* Position - Bellow
*/
if ( dslcStep[ 'dslc_pos' ] == 'bellow' ) {
dslcTopOffset += $(dslcStep.dslc_target).outerHeight() + dslcBubble.outerHeight() + 20;
}
dslcBubble.stop().css({ top : dslcTopOffset, left : dslcLeftOffset });
$("head").append($(''));
}
}, 200);
}
function dslc_tut_prevent( dslc_event, dslc_allow ) {
//console.log( dslc_event );
//console.log( dslc_allow );
false;
}
function dslc_tut_proceed() {
var dslcBubble, dslcStepID, dslcStep, dslcOffset, dslcLeftOffset, dslcTopOffset, dslcArrOffsetLeft, dslcType, dslcAnimation, dslcBubbleHeight, dslcTut, dslcTutIDVar;
dslcTut = dslcTuts[$('#dslc_tut_settings').data('post-id')];
dslcBubble = $('.dslc-tut-bubble');
dslcBubbleOverlay = $('.dslc-tut-bubble-overlay');
dslcStepID = dslcBubble.data('step');
dslcStep = dslcTut[ dslcStepID ];
dslcType = dslcStep.dslc_type;
dslcAnimation = dslcStep.dslc_animation;
/**
* Do NOT let them do stuff they should not
*/
// Stop all events on all element
/*$(document).on('mousedown mouseup click', 'a, span, div', function(e){
dslc_tut_prevent( e, '.dslc-tut-proceed' );
});*/
//$('*').off('mousedown mouseup click mouseenter mouseleave', false);
//$('a:not("' + dslcStep.dslc_event_el + '")').on('mousedown mouseup click mouseenter mouseleave', false);
// Alow events on specific elements
//$('.dslc-tut-proceed').off( 'mousedown mouseup click', false );
// Allow events on elements specific to the step
//$( dslcStep.dslc_allow_events_el ).on( dslcStep.dslc_allow_events );
/* Function to call on start */
if ( dslcStep[ 'dslc_func_start' ] !== undefined ) {
dslcStep[ 'dslc_func_start']();
}
/* Position */
if ( dslcStep[ 'dslc_pos' ] !== undefined ) {
//nadda
} else {
dslcStep[ 'dslc_pos' ] = 'above';
}
/* Recalculate */
if ( dslcStep[ 'dslc_keep_up' ] !== undefined ) {
//nadda
} else {
dslcStep[ 'dslc_keep_up' ] = true;
}
if ( parseInt( dslcTut.length ) == ( dslcStepID + 0 ) ) {
dslcBubble.hide();
}
if ( dslcStep[ 'dslc_parent_el' ] !== undefined ) {
//nadda
} else {
dslcStep[ 'dslc_parent_el' ] = false;
}
// Increment the step
dslcBubble.data( 'step', dslcStepID + 1 )
// Add event for proceeding
$(document).on( dslcStep.dslc_event, dslcStep.dslc_event_el, function(){
// Remove this event ( no longer needed )
$(document).off( dslcStep.dslc_event );
if ( dslcStep[ 'dslc_func_end' ] !== undefined ) {
dslcStep[ 'dslc_func_end']();
}
// Proceed to next step
dslc_tut_proceed();
});
// Position the bubble
var dslcStepCheck = setInterval( function(){
if ( $(dslcStep.dslc_target).length
&& $(dslcStep.dslc_target).not(':animated')
&& ! $(dslcStep.dslc_target).is(':hidden')
&& $(dslcStep.dslc_target).offset().left <= ( $(window).width() - $(dslcStep.dslc_target).outerWidth() )
&& $(dslcStep.dslc_event_el).not(':animated')
&& ! $( 'body' ).hasClass('dslca-anim-in-progress')
&& ( $('.dslca-container').length == 0 || $('.dslca-container').css('bottom') == '0px' )
) {
clearInterval( dslcBubblePosCheck );
clearInterval( dslcStepCheck );
// Limit to specific element
if ( $( dslcStep.dslc_target ).css('position') == 'static' ) {
$( dslcStep.dslc_target ).css('position', 'relative');
}
if ( $( dslcStep.dslc_event_el ).css('position') == 'static' ) {
$( dslcStep.dslc_event_el ).css('position', 'relative');
}
$('.dslc-tut-revert-zindex').each(function(){
$(this).css( 'z-index', $(this).data('orig-zindex') ).removeClass('dslc-tut-revert-zindex');
});
if ( dslcStep.dslc_target != 'body' ) {
$( dslcStep.dslc_target ).data('orig-zindex', $( dslcStep.dslc_target ).css('z-index') ).addClass('dslc-tut-revert-zindex').css({ 'z-index' : 9999997 });
}
if ( $( dslcStep.dslc_event_el ).hasClass('dslc-tut-revert-zindex') ) {
// nadda
} else {
$( dslcStep.dslc_event_el ).data('orig-zindex', $( dslcStep.dslc_event_el ).css('z-index') ).css({ 'z-index' : 9999997 }).addClass('dslc-tut-revert-zindex');
}
if ( $( dslcStep.dslc_parent_el ).hasClass('dslc-tut-revert-zindex') ) {
// nadda
} else {
$( dslcStep.dslc_parent_el ).data('orig-zindex', $( dslcStep.dslc_parent_el ).css('z-index') ).css({ 'z-index' : 9999997 }).addClass('dslc-tut-revert-zindex');
}
// Animation
if ( dslcAnimation == 'fade' )
dslcBubble.css({ opacity : 0 });
// Add bubble text
dslcBubble.html( dslcStep.dslc_label );
// Add type class
dslcBubble.removeClass( 'dslc-tut-bubble-type-action dslc-tut-bubble-type-information' ).addClass( 'dslc-tut-bubble-type-' + dslcType );
dslcBubble.removeClass( 'dslc-tut-bubble-pos-above dslc-tut-bubble-pos-bellow' ).addClass( 'dslc-tut-bubble-pos-' + dslcStep['dslc_pos'] );
// If information show overlay
if ( dslcType == 'information' )
dslcBubbleOverlay.fadeIn(300);
else
dslcBubbleOverlay.fadeOut(200);
dslcOffset = $(dslcStep.dslc_target).offset();
dslcLeftOffset = dslcOffset.left + ( $(dslcStep.dslc_target).outerWidth() / 2 - dslcBubble.outerWidth() / 2 )
var dslcArrOffsetLeft = '50%';
/**
* Stop from going outside ( left side )
*/
if ( dslcLeftOffset < 0 ) {
dslcArrOffsetLeft = ( dslcBubble.width() / 2 ) + dslcLeftOffset + $(dslcStep.dslc_target).width() / 2 + 15 + 3 + 'px';
dslcLeftOffset = 15;
}
/**
* Stop from going outise ( right side )
*/
if ( ( dslcBubble.outerWidth() + dslcLeftOffset ) > $(window).width() ) {
dslcArrOffsetLeft = ( dslcBubble.outerWidth() - $(dslcStep.dslc_target).width() / 2 ) - ( $(window).width() - ( $(dslcStep.dslc_target).offset().left + $(dslcStep.dslc_target).width() ) ) + 'px';
dslcLeftOffset = $(window).width() - dslcBubble.outerWidth() - 15;
}
/**
* Position - Action/Information
*/
if ( dslcType == 'action' )
dslcTopOffset = dslcOffset.top - dslcBubble.outerHeight() - 10;
else
dslcTopOffset = dslcBubbleOverlay.height() / 2 - dslcBubble.outerHeight() / 2 - 59;
/**
* Position - Bellow
*/
if ( dslcStep[ 'dslc_pos' ] == 'bellow' ) {
dslcTopOffset += $(dslcStep.dslc_target).outerHeight() + dslcBubble.outerHeight() + 20;
}
/**
* Animation - Fade/Slide
*/
if ( dslcAnimation == 'fade' ) {
dslcBubble.stop().css({ top : dslcTopOffset + 20, left : dslcLeftOffset }).animate({ top : dslcTopOffset, opacity : 1 }, 400, function(){
if ( dslcStep[ 'dslc_keep_up' ] && dslcStep['dslc_type'] == 'action' )
dslc_tut_keep_up( dslcStep );
});
} else {
dslcBubble.stop().css({ opacity : 1 }).animate({ top : dslcTopOffset, left : dslcLeftOffset }, 400, function(){
if ( dslcStep[ 'dslc_keep_up' ] && dslcStep['dslc_type'] == 'action' )
dslc_tut_keep_up( dslcStep );
});
}
/**
* CSS Arrow
*/
$("head").append($(''));
}
}, 300);
}
// Add the tut bubble
jQuery('body').append('');
jQuery('.dslca-container').append('');
var dslcTuts = [];
dslcTuts['502'] = [
{
'dslc_type' : 'information',
'dslc_label' : 'Welcome'
+ ''
+ 'Welcome to the Live Composer interactive tutorial.
'
+ 'In this step by step guide, we will show you some of the core functionalities of this plugin.
'
+ '
'
+ 'START TUTORIAL',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
{
'dslc_type' : 'action',
'dslc_label' : 'First of all, let\'s activate the Live Composer.',
'dslc_target' : '.dslca-activate-composer-hook',
'dslc_event_el' : '.dslca-activate-composer-hook',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_animation' : 'fade'
},
];
dslcTuts['495'] = [
{
'dslc_type' : 'information',
'dslc_label' : 'Welcome'
+ ''
+ 'Welcome to the Live Composer interactive tutorial.
'
+ 'In this step by step guide, we will show you some of the core functionalities of this plugin.
'
+ '
'
+ 'Start CHAPTER ONE',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
},
{
'dslc_type' : 'information',
'dslc_label' : '1. Row'
+ '1/3 Adding a Row'
+ ''
+ 'Here is the structure of Live Composer: Rows > Module Areas > Modules.
Let\'s start by adding a row.
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
{ /* bubble */
'dslc_type' : 'action',
'dslc_label' : 'Create your first row, it will be automatically populated with a modules area.',
'dslc_target' : '.dslca-add-modules-section-hook',
'dslc_event_el' : '.dslca-add-modules-section-hook',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_animation' : 'fade',
'dslc_func_end' : function(){
$('.dslca-add-modules-section-hook').addClass('dslca-action-disabled');
}
},
{ /* info */
'dslc_type' : 'information',
'dslc_label' : '1. Row2/3 Row OptionsNow that you have a row you could start adding module areas and modules.
But first, let\'s see what can be done with a row.
continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'When you rollover a row some options show up. Those are : Edit - Duplicate - Move - Delete. For now, let\'s click on the cog icon to edit this row',
'dslc_target' : '.dslc-modules-section',
'dslc_event_el' : '.dslc-modules-section',
'dslc_event' : 'mouseenter.dslc_tut_add_row',
'dslc_animation' : 'fade',
'dslc_pos' : 'bellow',
'dslc_func_start' : function() {
$('.dslca-modules-area-manage').css({ 'visibility' : 'hidden' });
$('.dslca-modules-section-manage .dslca-manage-action').addClass('dslca-action-disabled');
$('.dslca-edit-modules-section-hook').removeClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'When you rollover a row some options show up. Those are : Edit - Duplicate - Move - Delete. For now, let\'s click on the cog icon to edit this row',
'dslc_target' : '.dslca-edit-modules-section-hook',
'dslc_event_el' : '.dslca-edit-modules-section-hook',
'dslc_parent_el' : '.dslc-modules-section',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_animation' : 'slide',
'dslc_pos' : 'bellow',
'dslc_func_end' : function(){
$('.dslca-modules-section-manage .dslca-manage-action').removeClass('dslca-action-disabled');
}
},
{ /* Make the options are visible */
'dslc_type' : 'information',
'dslc_label' : '1. Row3/3 Options Panel'
+ 'Every time you want to edit a row or a module, the Options Panel will appear.
'
+ 'There are multiple options, for now let\'s change the background color and the padding for this row.'
+ '
continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
},
{
'dslc_type' : 'action',
'dslc_label' : 'First, let\'s change the background color, choose any color and click here to continue once you are done.',
'dslc_target' : '.dslca-modules-section-edit-option[data-id="bg_color"]',
'dslc_event_el' : '.dslca-modules-section-edit-option[data-id="bg_color"] input',
'dslc_event' : 'mouseup.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_parent_el' : '.dslca-container',
'dslc_func_start' : function(){
$('.dslc-tut-panel-prevent').show();
$('.dslca-modules-section-edit-option[data-id="bg_color"]').css( 'z-index', 1000001 );
},
},
{
'dslc_type' : 'action',
'dslc_label' : 'First, let\'s change the background color, choose any color and click here to continue once you are done.',
'dslc_target' : '.colorpicker:visible',
'dslc_event_el' : '.dslc-tut-proceed-2',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'slide',
'dslc_func_end' : function(){
$('.dslc-tut-panel-prevent').hide();
$('.dslca-container').css( 'z-index', 99999 );
$('.dslca-modules-section-edit-option[data-id="bg_color"]').css( 'z-index', 'auto' );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Good, now you will need to drag this scrollbar to the right to access the padding vertical options.',
'dslc_target' : '.jspDrag',
'dslc_event_el' : '.dslca-container',
'dslc_event' : 'mouseup.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'slide',
'dslc_keep_up' : false,
'dslc_func_start' : function(){
$('.dslc-tut-panel-prevent').show();
$('.jspHorizontalBar').css( 'z-index', 1000001 );
},
},
{
'dslc_type' : 'action',
'dslc_label' : 'Go ahead and change this padding value, this will add space vertically on this whole row.',
'dslc_target' : '.dslca-modules-section-edit-option[data-id="padding"]',
'dslc_event_el' : '.dslca-modules-section-edit-option[data-id="padding"]',
'dslc_parent_el' : '.dslca-container',
'dslc_event' : 'mouseup.dslc_tut_modules_info',
'dslc_animation' : 'slide',
'dslc_func_start' : function(){
$('.jspHorizontalBar').css( 'z-index', 'auto' );
$('.dslca-modules-section-edit-option[data-id="padding"]').css( 'z-index', 1000001 );
},
'dslc_func_end' : function(){
$('.dslca-module-edit-save').css( 'z-index', 1000001 );
},
},
{
'dslc_type' : 'action',
'dslc_label' : 'Everytime you are done editing an element, you have to confirm or cancel those changes. Let\'s confirm these changes now.',
'dslc_target' : '.dslca-module-edit-save',
'dslc_event_el' : '.dslca-module-edit-save',
'dslc_parent_el' : '.dslca-container',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
},
},
{
'dslc_type' : 'information',
'dslc_label' : '1. Rowfinished'
+ 'Congratulations on completing the first chapter of this tutorial.
'
+ 'Now that you know how to change options for a row, let\'s see what can be done with modules area.'
+ '
'
+ 'start chapter two',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslc-tut-panel-prevent').hide();
$('.dslca-module-edit-save').css( 'z-index', 'auto' );
},
},
];
dslcTuts['497'] = [
{
'dslc_type' : 'information',
'dslc_label' : '2. Modules Area'
+ '1/5 Column System'
+ ''
+ 'In this chapter, we will show you how to work with module areas.'
+ '
First thing, let\'s see how you can build your own layout.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslca-modules-section-manage').css({ 'visibility' : 'hidden' });
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'When you rollover a modules area some options show up. Those are : Duplicate - Move - Layout - Delete.
For now, let\'s click on the layout icon to change the width of this modules area.',
'dslc_target' : '.dslc-modules-area',
'dslc_event_el' : '.dslc-modules-area',
'dslc_event' : 'mouseenter.dslc_tut_add_row',
'dslc_animation' : 'fade',
'dslc_pos' : 'above'
},
{
'dslc_type' : 'action',
'dslc_label' : 'When you rollover a modules area some options show up. Those are : Duplicate - Move - Layout - Delete.
For now, let\'s click on the layout icon to change the width of this modules area.',
'dslc_target' : '.dslca-change-width-modules-area-hook .dslc-icon-columns',
'dslc_event_el' : '.dslca-change-width-modules-area-hook',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-modules-area-manage').addClass('dslc-tut-force-show');
$('.dslca-delete-modules-area-hook, .dslca-move-modules-area-hook, .dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
},
'dslc_func_end' : function(){
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click on this 6/12 layout option.',
'dslc_target' : '.dslca-change-width-modules-area-options span[data-size="6"]',
'dslc_event_el' : '.dslca-change-width-modules-area-options span[data-size="6"]',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-section',
'dslc_animation' : 'fade',
'dslc_pos' : 'bellow',
'dslc_func_start' : function(){
$('.dslca-change-width-modules-area-options span, .dslca-change-width-modules-area-hook').addClass('dslca-action-disabled');
$('.dslca-change-width-modules-area-options span[data-size="6"]').removeClass('dslca-action-disabled');
},
'dslc_func_end' : function(){
$('.dslca-change-width-modules-area-options span, .dslca-change-width-modules-area-hook').removeClass('dslca-action-disabled');
$('.dslca-delete-modules-area-hook, .dslca-move-modules-area-hook, .dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'information',
'dslc_label' : '2. Modules Area'
+ '2/5 Duplicating'
+ ''
+ 'Now that you\'ve changed the layout of the modules area, let\'s duplicate it.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslca-modules-area-manage').removeClass('dslc-tut-force-show');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Rollover the modules area to make the options appear.',
'dslc_target' : '.dslc-modules-area',
'dslc_event_el' : '.dslc-modules-area',
'dslc_event' : 'mouseenter.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area',
'dslc_animation' : 'fade',
'dslc_pos' : 'above'
},
{
'dslc_type' : 'action',
'dslc_label' : 'Now click on the duplicate icon.',
'dslc_target' : '.dslca-copy-modules-area-hook',
'dslc_event_el' : '.dslca-copy-modules-area-hook',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area',
'dslc_animation' : 'slide',
'dslc_pos' : 'bellow',
'dslc_func_start' : function(){
$('.dslca-modules-area-manage').addClass('dslc-tut-force-show');
},
'dslc_func_end' : function(){
$('.dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'information',
'dslc_label' : '2. Modules Area'
+ '3/5 Adding Area'
+ ''
+ 'It\'s time to add a new modules area.'
+ '
Below are the available modules. For now, let\'s add a new modules area.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslca-modules-area-manage').removeClass('dslc-tut-force-show');
$('.dslc-modules-area').css( 'z-index', 'auto' );
$('.dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click & Drag this item and release it over the row.',
'dslc_target' : '.dslca-module[data-id="DSLC_M_A"]',
'dslc_event_el' : '.dslca-module[data-id="DSLC_M_A"]',
'dslc_event' : 'mousedown.dslc_tut_add_row',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'fade',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslc-tut-panel-prevent').show();
$('.dslca-module[data-id="DSLC_M_A"]').css( 'z-index', 1000001 );
},
'dslc_func_end' : function(){
$('.dslc-tut-panel-prevent').hide();
$('.dslca-container').css( 'z-index', 99999 );
$('.dslca-module[data-id="DSLC_M_A"]').css( 'z-index', 'auto' );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click & Drag this item and release it over the row.',
'dslc_target' : '.dslc-modules-section',
'dslc_event_el' : $(document),
'dslc_event' : 'mouseup.dslc_tut_add_row',
'dslc_animation' : 'slide',
'dslc_pos' : 'bellow',
'dslc_func_end' : function(){
if ( $('body').hasClass('dslca-anim-in-progress') ) {
// nadda
} else {
$('.dslc-tut-bubble').data('step', 8);
}
}
},
{
'dslc_type' : 'information',
'dslc_label' : '2. Modules Area'
+ '4/5 Reordering'
+ ''
+ 'Modules areas, like rows, can be moved. Let\'s move the modules area you just created.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
},
{
'dslc_type' : 'action',
'dslc_label' : 'Rollover the modules area to make the options appear.',
'dslc_target' : '.dslc-modules-area.dslc-12-col',
'dslc_event_el' : '.dslc-modules-area.dslc-12-col',
'dslc_event' : 'mouseenter.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area.dslc-12-col',
'dslc_animation' : 'fade',
'dslc_pos' : 'above'
},
{
'dslc_type' : 'action',
'dslc_label' : 'Now Click & Drag the move icon to move the modules area on top of the 2 others.',
'dslc_target' : '.dslc-modules-area.dslc-12-col .dslca-move-modules-area-hook',
'dslc_event_el' : '.dslc-modules-area.dslc-12-col .dslca-move-modules-area-hook',
'dslc_event' : 'mousedown.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area.dslc-12-col',
'dslc_animation' : 'slide',
'dslc_pos' : 'bellow',
'dslc_func_start' : function(){
$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').addClass('dslc-tut-force-show');
$('.dslc-modules-area.dslc-12-col .dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
},
'dslc_func_end' : function(){
$('.dslc-modules-area.dslc-12-col .dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Now Click & Drag the move icon to move the modules area on top of the 2 others.',
'dslc_target' : '.dslc-modules-section',
'dslc_event_el' : $(document),
'dslc_event' : 'mouseup.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_end' : function(){
if ( $('.dslc-modules-area:first-child').hasClass('dslc-12-col') ) {
// nadda
} else {
$('.dslc-tut-bubble').data('step', 12);
}
}
},
{
'dslc_type' : 'information',
'dslc_label' : '2. Modules Area'
+ '5/5 Deleting'
+ ''
+ 'The last thing that you can do with modules areas is to delete them.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').removeClass('dslc-tut-force-show');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Rollover the modules area to make the options appear.',
'dslc_target' : '.dslc-modules-area.dslc-12-col',
'dslc_event_el' : '.dslc-modules-area.dslc-12-col',
'dslc_event' : 'mouseenter.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area',
'dslc_animation' : 'fade',
'dslc_pos' : 'above',
},
{
'dslc_type' : 'action',
'dslc_label' : 'Now click the delete icon to delete the modules area.',
'dslc_target' : '.dslc-modules-area.dslc-12-col .dslca-delete-modules-area-hook',
'dslc_event_el' : '.dslc-modules-area.dslc-12-col .dslca-delete-modules-area-hook',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-modules-area.dslc-12-col',
'dslc_animation' : 'slide',
'dslc_pos' : 'bellow',
'dslc_func_start' : function(){
$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').addClass('dslc-tut-force-show');
$('.dslca-copy-modules-area-hook, .dslca-move-modules-area-hook, .dslca-change-width-modules-area-hook').addClass('dslca-action-disabled');
},
'dslc_func_end' : function(){
$('.dslca-copy-modules-area-hook, .dslca-move-modules-area-hook, .dslca-change-width-modules-area-hook').removeClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'information',
'dslc_label' : '2. Modules Area'
+ 'finished'
+ ''
+ 'Congrats on completing Chapter Two of this interactive tutorial.'
+ '
Now that you know everything about rows and modules areas, it\'s time for you to learn how to use modules.'
+ '
'
+ 'start chapter Three',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').removeClass('dslc-tut-force-show');
}
},
];
dslcTuts['500'] = [
{
'dslc_type' : 'information',
'dslc_label' : '3. Modules'
+ '1/3 Adding modules'
+ ''
+ 'In this chapter, we will show you how to use modules.'
+ '
These are the most important part of the Live Composer and they will allow you to display your content.'
+ '
To start, let\'s add a module.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click & Drag this item and release it over the modules area.',
'dslc_target' : '.dslca-module[data-id="DSLC_Blog"]',
'dslc_event_el' : '.dslca-module[data-id="DSLC_Blog"]',
'dslc_event' : 'mousedown.dslc_tut_add_row',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'fade',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslc-tut-panel-prevent').show();
$('.dslca-module[data-id="DSLC_Blog"]').css( 'z-index', 1000001 );
},
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click & Drag this item and release it over the modules area.',
'dslc_target' : '.dslc-modules-area',
'dslc_event_el' : $(document),
'dslc_event' : 'mouseup.dslc_tut_add_row',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_end' : function(){
$('.dslc-tut-panel-prevent').hide();
$('.dslca-module[data-id="DSLC_Blog"]').css( 'z-index', 'auto' );
if ( $('body').hasClass('dslca-anim-in-progress') ) {
// nadda
} else {
$('.dslc-tut-bubble').data('step', 1);
}
}
},
{
'dslc_type' : 'information',
'dslc_label' : '3. Modules'
+ ''
+ 'Some modules will take the content that you created in the WordPress admin.'
+ '
This is the case for the blog module, it retreives the blog post that you have created.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
{
'dslc_type' : 'information',
'dslc_label' : '3. Modules'
+ '2/3 Functionality'
+ ''
+ 'Every module has it\'s own set of options. There are Functionality and Styling options.'
+ '
For now let\'s take a look at the Functionality options for the blog module.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
{
'dslc_type' : 'action',
'dslc_label' : 'Rollover the module to make the options appear and click on the edit icon.',
'dslc_target' : '.dslca-module-edit-hook',
'dslc_event_el' : '.dslca-module-edit-hook',
'dslc_event' : 'click.dslc_tut_add_row',
'dslc_parent_el' : '.dslc-module-front',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslc-module-front').trigger('mouseenter');
$('.dslca-copy-module-hook, .dslca-move-module-hook, .dslca-delete-module-hook').addClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Go ahead and change the posts per row to 2.',
'dslc_target' : '.dslca-module-edit-option[data-id="columns"]',
'dslc_event_el' : '.dslca-module-edit-option[data-id="columns"]',
'dslc_event' : 'change.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'fade',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-copy-module-hook, .dslca-move-module-hook, .dslca-delete-module-hook').removeClass('dslca-action-disabled');
$('.dslc-tut-panel-prevent').show();
$('.dslca-module-edit-option[data-id="columns"]').css( 'z-index', 1000001 );
},
'dslc_func_end' : function(){
if ( $('.dslca-module-edit-field[data-id="columns"]').val() != 6 ) {
$('.dslc-tut-bubble').data('step', 6);
}
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'You can test any other option in this panel, once you are done click here to continue.',
'dslc_target' : '.dslca-module-edit-options',
'dslc_event_el' : '.dslc-tut-proceed-2',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-module-edit-option[data-id="columns"]').css( 'z-index', 'auto' );
$('.dslca-module-edit-options-wrapper').css( 'z-index', 1000001 );
}
},
{
'dslc_type' : 'information',
'dslc_label' : '3. Modules'
+ '3/3 Styling'
+ ''
+ 'There are also a lot of styling options that you can change for every module, let\'s change a few now.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslca-module-edit-options-wrapper').css( 'z-index', 'auto' );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click on the styling tab to show the styling options.',
'dslc_target' : '.dslca-options-filter-hook[data-section="styling"]',
'dslc_event_el' : '.dslca-options-filter-hook[data-section="styling"]',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_parent_el' : '.dslca-container',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-options-filter-hook[data-section="styling"]').css( 'z-index', 1000001 );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'All the options are categorized by the element they affect. Click on any of the tabs to change the options available.',
'dslc_target' : '.dslca-module-edit-options-tab-hook[data-id="main_styling"]',
'dslc_event_el' : '.dslca-module-edit-options-tab-hook',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_parent_el' : '.dslca-container',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-options-filter-hook[data-section="styling"]').css( 'z-index', 'auto' );
$('.dslca-module-edit-options-tab-hook').css( 'z-index', 1000001 );
},
'dslc_func_end' : function(){
$('.dslca-module-edit-options-tab-hook').css( 'z-index', 'auto !important' );
$('.dslca-module-edit-options-wrapper').css( 'z-index', '1000001 !important' );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'There is a lot of styling options. Go ahead and play with them and once you are done click on confirm.',
'dslc_target' : '.dslca-module-edit-save',
'dslc_event_el' : '.dslca-module-edit-save',
'dslc_event' : 'click.dslc_tut_modules_info_2',
'dslc_animation' : 'slide',
'dslc_parent_el' : '.dslca-container',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-module-edit-options').css( 'z-index', 1000001 );
}
},
{
'dslc_type' : 'information',
'dslc_label' : '3. Modules'
+ 'finished'
+ ''
+ 'Congrats on completing Chapter Three of this interactive tutorial.'
+ '
Before going on to the next step, you can take a look at some videos on how modules can be edited. Simply click on the launch video button below.'
+ '
Once you are ready to continue, click to start chapter four, you will learn how to use the templates system.'
+ '
'
+ 'launch videos'
+ 'start chapter four',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function() {
$('.dslc-tut-panel-prevent').hide();
$('.dslca-module-edit-options-wrapper').css( 'z-index', 'auto' );
}
}
];
dslcTuts['504'] = [
{
'dslc_type' : 'information',
'dslc_label' : '4. Templates System'
+ '1/2 Load'
+ ''
+ 'In this chapter, we will show you how to use the templates system.'
+ '
The templates system consists of 4 main features: Save, Load, Export and Import.'
+ '
Let\'s start of by loading an existing template.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function(){
$('.dslca-section-title-filter-options span[data-origin="user"]').trigger('click');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click this tab to switch to the templates management.',
'dslc_target' : '.dslca-go-to-section-templates',
'dslc_event_el' : '.dslca-go-to-section-templates',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_parent_el' : '.dslca-container',
'dslc_pos' : 'above',
'dslc_func_start' : function() {
$('.dslc-tut-panel-prevent').show();
},
'dslc_func_end' : function() {
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click Load to see the available templates.',
'dslc_target' : '.dslca-go-to-section-hook[data-section=".dslca-templates-load"]',
'dslc_event_el' : '.dslca-go-to-section-hook[data-section=".dslca-templates-load"]',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_parent_el' : '.dslca-container',
'dslc_pos' : 'above',
'dslc_func_start' : function() {
//$('.dslca-go-to-section-hook[data-section=".dslca-templates-load"]').css( 'z-index', 1000001 );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click Chapter Four to load the template.',
'dslc_target' : '.dslca-template[data-id="chapter-four"]',
'dslc_event_el' : '.dslca-template[data-id="chapter-four"]',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_parent_el' : '.dslca-container',
'dslc_pos' : 'above',
'dslc_func_start' : function() {
//$('.dslca-go-to-section-hook[data-section=".dslca-templates-load"]').css( 'z-index', 'auto' );
//$('.dslca-template[data-id="chapter-four"]').css( 'z-index', 1000001 );
}
},
{
'dslc_type' : 'information',
'dslc_label' : '4. Templates System'
+ ''
+ 'The template is now loaded. You can of course modify it as you wish.'
+ '
Let\'s move the sidebar on the right of the blog.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade',
'dslc_func_start' : function() {
$('.dslc-tut-panel-prevent').hide();
$('.dslca-template[data-id="chapter-four"]').css( 'z-index', 'auto' );
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Let\'s move this modules area on the right of the blog.',
'dslc_target' : '.dslc-modules-area.dslc-3-col',
'dslc_event_el' : '.dslc-modules-area.dslc-3-col',
'dslc_event' : 'mouseenter.dslc_tut_modules_info',
'dslc_parent_el' : '.dslc-modules-area.dslc-3-col',
'dslc_animation' : 'fade',
'dslc_pos' : 'above',
'dslc_func_start' : function() {
$('.dslca-change-width-modules-area-hook, .dslca-delete-modules-area-hook, .dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Let\'s move this modules area on the right of the blog.',
'dslc_target' : '.dslc-modules-area.dslc-3-col .dslca-move-modules-area-hook',
'dslc_event_el' : '.dslc-modules-area.dslc-3-col .dslca-move-modules-area-hook',
'dslc_event' : 'mousedown.dslc_tut_modules_info',
'dslc_parent_el' : '.dslc-modules-area.dslc-3-col',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_start' : function() {
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Drop the modules area bellow.',
'dslc_target' : '.dslc-post.dslc-last-col',
'dslc_event_el' : $(document),
'dslc_event' : 'mouseup.dslc_tut_modules_info',
'dslc_parent_el' : '.dslc-modules-area.dslc-3-col',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_keep_up' : false,
'dslc_func_start' : function(){
$('.dslca-change-width-modules-area-hook, .dslca-delete-modules-area-hook, .dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'information',
'dslc_label' : '4. Templates System'
+ '2/2 Import'
+ ''
+ 'In the textarea bellow, you can see how an export looks like, let\'s import it. Select the "text" and copy it, when done click continue.
'
+ '
.'
+ '
'
+ 'continue',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click this tab to switch to the main templates management section.',
'dslc_target' : '.dslca-go-to-section-templates',
'dslc_event_el' : '.dslca-go-to-section-templates',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'fade',
'dslc_pos' : 'above',
'dslc_func_start' : function() {
$('.dslc-tut-panel-prevent').show();
}
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click Import, paste the code in the textarea and click the import button.',
'dslc_target' : '.dslca-open-modal-hook[data-modal=".dslca-modal-templates-import"]',
'dslc_event_el' : '.dslca-open-modal-hook[data-modal=".dslca-modal-templates-import"]',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'fade',
'dslc_pos' : 'above'
},
{
'dslc_type' : 'action',
'dslc_label' : 'Click Import, paste the code in the textarea and click the import button.',
'dslc_target' : '.dslca-modal-templates-import',
'dslc_event_el' : '.dslca-submit',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_parent_el' : '.dslca-container',
'dslc_animation' : 'slide',
'dslc_pos' : 'above',
'dslc_func_start' : function(){
$('.dslca-close-modal-hook').addClass('dslca-action-disabled');
}
},
{
'dslc_type' : 'information',
'dslc_label' : '4. Templates System'
+ 'finished'
+ ''
+ 'Congrats on completing the Basics Tutorial for Live Composer.'
+ '
Of course, we couldn\'t cover everything you can do with Live Composer. Our goal was to show you how easy it is to work with it.'
+ '
Now you can go play around with the plugin in our sandbox mode or look at some videos showing how the plugin works in more details.'
+ '
'
+ 'launch videos'
+ 'go to sandbox',
'dslc_target' : 'body',
'dslc_event_el' : '.dslc-tut-proceed',
'dslc_event' : 'click.dslc_tut_modules_info',
'dslc_animation' : 'fade'
},
];
dslc_tut_proceed();
});