| Current File : /home/kelaby89/www/wp/wp-content/plugins/trx_addons/components/cpt/layouts/layouts.js |
/* global jQuery, TRX_ADDONS_STORAGE */
jQuery(document).on('action.ready_trx_addons', function() {
"use strict";
// How to handle fix/unfix rows:
// true - Intersection observers are used
// false - a scroll event handler is used
var USE_OBSERVERS = trx_addons_apply_filters( 'trx_addons_filter_use_observers_to_fix_rows', true )
&& typeof IntersectionObserver != 'undefined';
// Common objects
var $window = jQuery( window ),
$document = jQuery( document ),
$body = jQuery( 'body' );
// Return the row 'id' or data-id (if 'id' is empty)
function get_id( row ) {
return row.attr('id') ? row.attr('id') : row.attr('data-id');
}
// Handle fixed rows
//---------------------------------------------------------
if ( ! TRX_ADDONS_STORAGE['pagebuilder_preview_mode'] && ! $body.hasClass( 'sc_layouts_row_fixed_inited' ) ) {
var rows = jQuery('.sc_layouts_row_fixed'),
rows_always = rows.filter('.sc_layouts_row_fixed_always'),
rows_delayed = rows.filter('.sc_layouts_row_delay_fixed'),
last_scroll_offset = -1;
// If page contain fixed rows
if ( rows.length > 0 ) {
rows.each( function( idx ) {
// Add placeholders after each row
var row = rows.eq( idx );
if ( row.hasClass('sc_layouts_row_hide_unfixed' ) ) {
if ( ! row.prev().hasClass('sc_layouts_row_unfixed_placeholder') ) {
row.before( '<div class="sc_layouts_row_unfixed_placeholder">'
+ ( USE_OBSERVERS ? '<div class="sc_layouts_row_fixed_marker_on"></div>' : '' )
+ '</div>');
}
}
if ( ! row.next().hasClass('sc_layouts_row_fixed_placeholder') ) {
row.after('<div class="sc_layouts_row_fixed_placeholder" style="background-color:'+row.css('background-color')+';"><div class="sc_layouts_row_fixed_marker_off"></div></div>');
if ( USE_OBSERVERS && ! row.hasClass('sc_layouts_row_hide_unfixed' ) ) {
row.append('<div class="sc_layouts_row_fixed_marker_on"></div>');
}
}
// Add class 'sc_layouts_row_fixed_with_fullscreen' to the row if it contains the element with class 'search_style_fullscreen'
if ( row.find( trx_addons_apply_filters( 'trx_addons_filter_fullscreen_elements', '.search_style_fullscreen,.search_modern' ) ).length > 0 ) {
row.addClass( 'sc_layouts_row_fixed_with_fullscreen' );
}
} );
// Add handlers to fix/unfix rows
var timedFix = trx_addons_throttle( function() {
trx_addons_cpt_layouts_fix_rows( {
rows: rows,
rows_always: rows_always
} );
}, 150 );
$document
.on('action.scroll_trx_addons', function() {
trx_addons_cpt_layouts_hide_fixed_rows();
if ( ! USE_OBSERVERS ) {
trx_addons_cpt_layouts_fix_rows( {
rows: rows,
rows_always: rows_always
} );
} else {
timedFix();
}
})
.on('action.resize_trx_addons', function() {
// Update global values
trx_addons_cpt_layouts_check_mobile_breakpoint();
trx_addons_cpt_layouts_hide_fixed_rows();
trx_addons_cpt_layouts_fix_rows( {
rows: rows,
rows_always: rows_always,
resize: true
} );
});
// Add observer to fix/unfix rows
if ( USE_OBSERVERS ) {
var fixed_rows_observe = function() {
rows.each( function( idx ) {
var row = rows.eq( idx );
var last_fixed_time = row.data('trx-addons-last-fixed-time') || 0;
var delay = trx_addons_cpt_layouts_fix_rows_delay( row );
var marker_off = row.next().find( '>.sc_layouts_row_fixed_marker_off' );
var marker_on = row.hasClass( 'sc_layouts_row_hide_unfixed' )
? row.prev().find( '>.sc_layouts_row_fixed_marker_on' )
: row.find( '>.sc_layouts_row_fixed_marker_on' );
var observer = row.data( 'trx-addons-fixed-observer' );
if ( observer ) {
if ( marker_off.length ) observer.unobserve( marker_off.get(0) );
if ( marker_on.length ) observer.unobserve( marker_on.get(0) );
observer.disconnect();
observer = null;
}
// Skip hidden rows without a class 'sc_layouts_row_hide_unfixed'
if ( row.css('display') == 'none' && ! row.hasClass('sc_layouts_row_hide_unfixed' ) ) {
return;
}
// On mobile devices skip rows without a class 'sc_layouts_row_fixed_always'
if ( trx_addons_window_width() < TRX_ADDONS_STORAGE['mobile_breakpoint_fixedrows_off']
&& ! row.hasClass( 'sc_layouts_row_fixed_always' )
) {
return;
}
var row_height = row.hasClass( 'sc_layouts_row_hide_unfixed' ) ? 0 : row.outerHeight();
// Create an observer for each row (to pay account an individual settings for delay)
observer = new IntersectionObserver( function( entries ) {
var time = new Date().getTime();
entries.forEach( function( entry ) {
var marker = jQuery( entry.target ),
marker_offset = marker.offset().top,
parent = marker.parent(),
row = parent;
if ( parent.hasClass( 'sc_layouts_row_unfixed_placeholder' ) ) {
row = row.next();
} else if ( parent.hasClass( 'sc_layouts_row_fixed_placeholder' ) ) {
row = row.prev();
}
var animation_off_timeout = trx_addons_cpt_layouts_fix_rows_off_timeout( delay );
// marker_off is come in to the viewport
if ( row.hasClass( 'sc_layouts_row_fixed_on' ) && entry.isIntersecting ) {
if ( time - last_fixed_time > animation_off_timeout && entry.boundingClientRect.top >= entry.rootBounds.top ) {
if ( ! row.hasClass( 'sc_layouts_row_fixed_animation_off' ) ) {
trx_addons_cpt_layouts_fix_rows( {
rows: rows,
rows_always: rows_always,
force_row: row,
force_state: 'off'
} );
last_fixed_time = time;
}
}
// marker_on is go out from the viewport
} else if ( ! row.hasClass( 'sc_layouts_row_fixed_on' ) && ! entry.isIntersecting ) {
if ( time - last_fixed_time > animation_off_timeout && entry.boundingClientRect.bottom < entry.rootBounds.top ) {
trx_addons_cpt_layouts_fix_rows( {
rows: rows,
rows_always: rows_always,
force_row: row,
force_state: 'on'
} );
last_fixed_time = time;
}
}
} );
}, {
root: null,
rootMargin: ( delay - trx_addons_fixed_rows_height() + ( ! $body.hasClass('hide_fixed_rows') && row.hasClass( 'sc_layouts_row_fixed_on' ) ? row_height : 0 ) ) + 'px 0px 0px 0px',
threshold: 0
}
);
var marker = row.hasClass( 'sc_layouts_row_fixed_on' ) ? marker_off : marker_on;
observer.observe( marker.get(0) );
row.data( {
'trx-addons-fixed-observer': observer,
'trx-addons-last-fixed-time': last_fixed_time
} );
} );
};
$document.on('action.sc_layouts_row_fixed_on action.sc_layouts_row_fixed_off', fixed_rows_observe );
fixed_rows_observe();
}
// Add a class to the body
$body.addClass( 'sc_layouts_row_fixed_inited' );
}
}
function trx_addons_cpt_layouts_fix_rows_delay( row ) {
return trx_addons_apply_filters( 'trx_addons_filter_fixed_rows_delay',
row.hasClass( 'sc_layouts_row_delay_fixed' )
? Math.max( 300, trx_addons_window_height() / 4 * 3 )
: 0
);
}
function trx_addons_cpt_layouts_fix_rows_off_timeout( delay ) {
return trx_addons_apply_filters( 'trx_addons_filter_sc_layouts_row_fixed_off_timeout',
delay > 0 ? 400 : 0, // Timeout must be equal to the css-animation time (see layouts.[s]css)
delay
);
}
// Hide fixed rows on scroll down
function trx_addons_cpt_layouts_hide_fixed_rows() {
if ( TRX_ADDONS_STORAGE['hide_fixed_rows'] > 0 && ! window.trx_addons_document_animate_to_busy ) {
var scroll_delta = 50;
var scroll_offset = trx_addons_window_scroll_top();
if ( last_scroll_offset >= 0 ) {
var event = '';
// Scroll down
if ( scroll_offset > last_scroll_offset + scroll_delta ) {
if ( scroll_offset > trx_addons_window_height() * ( rows_delayed.length > 0 ? 1.5 : 0.6667 ) && ! $body.hasClass( 'hide_fixed_rows' ) ) {
$body.addClass( 'hide_fixed_rows' );
event = 'off';
}
last_scroll_offset = scroll_offset;
// Scroll up
} else if ( scroll_offset < last_scroll_offset - scroll_delta ) {
if ( $body.hasClass( 'hide_fixed_rows' ) ) {
$body.removeClass( 'hide_fixed_rows' );
event = 'on';
}
last_scroll_offset = scroll_offset;
}
// Trigger event
if ( event ) {
$document.trigger( 'action.sc_layouts_row_fixed_' + event, [ rows.filter('.sc_layouts_row_fixed_on') ] );
}
} else {
last_scroll_offset = scroll_offset;
}
}
}
// Break fixing on mobile devices (except rows with class 'sc_layouts_row_fixed_always')
function trx_addons_cpt_layouts_check_mobile_breakpoint() {
if ( trx_addons_window_width() < TRX_ADDONS_STORAGE['mobile_breakpoint_fixedrows_off'] ) {
rows.each( function( idx ) {
var row = rows.eq( idx );
if ( ! row.hasClass( 'sc_layouts_row_fixed_always' ) ) {
row.removeClass( 'sc_layouts_row_fixed_on' ).css( { 'top': 'auto' } );
}
});
}
}
// Fix/unfix rows
function trx_addons_cpt_layouts_fix_rows( args ) {
var rows = args.rows,
rows_always = args.rows_always,
resize = args.resize || false,
force_row = args.force_row || null,
force_state = args.force_state || '';
// Break fixing on mobile devices (except rows with class 'sc_layouts_row_fixed_always')
if ( trx_addons_window_width() < TRX_ADDONS_STORAGE['mobile_breakpoint_fixedrows_off'] ) {
if ( rows_always.length === 0 ) {
return;
} else {
rows = rows_always;
}
}
var scroll_offset = $window.scrollTop();
var rows_offset = trx_addons_adminbar_height();
rows.each( function( idx ) {
var row = rows.eq( idx );
var placeholder = row.next();
var h = row.outerHeight();
if ( ( row.css('display') == 'none' || h === 0 ) && ! row.hasClass('sc_layouts_row_hide_unfixed' ) ) {
placeholder.height(0);
return;
}
var ph = row.hasClass( 'sc_layouts_row_fixed_on' ) ? placeholder.outerHeight() : 0;
var row_unfixed_placeholder = row.hasClass('sc_layouts_row_hide_unfixed' ) ? row.prev() : false;
var delay = trx_addons_cpt_layouts_fix_rows_delay( row );
var animation_off_timeout = trx_addons_cpt_layouts_fix_rows_off_timeout( delay );
var offset = parseInt( row.hasClass( 'sc_layouts_row_fixed_on' )
? placeholder.offset().top
: ( row.hasClass('sc_layouts_row_hide_unfixed' )
? row_unfixed_placeholder.offset().top
: row.offset().top
),
10 );
if ( isNaN( offset ) ) {
offset = 0;
}
// Unfix row
if ( ( force_state == 'off' && row.is( force_row ) )
|| ( ! force_state && ( scroll_offset + rows_offset < offset + delay || h < ph ) )
) {
if ( row.hasClass( 'sc_layouts_row_fixed_on' ) ) {
if ( animation_off_timeout > 0 ) {
row.addClass( 'sc_layouts_row_fixed_animation_off' );
}
setTimeout( function() {
row
.removeClass( 'sc_layouts_row_fixed_on'
+ ( animation_off_timeout > 0 ? ' sc_layouts_row_fixed_animation_off' : '' ) )
.css( { 'top': 'auto' } );
$document.trigger( 'action.sc_layouts_row_fixed_off', [ row ] );
}, animation_off_timeout );
}
// Fix row
} else {
if ( ! row.hasClass( 'sc_layouts_row_fixed_on' ) ) {
if ( ( force_state == 'on' && row.is( force_row ) )
|| ( rows_offset + h < trx_addons_window_height() * 0.33 ) //! force_state && - if force_state='on' from observer and two fixed rows are near - only one (forced) row is processed
) {
if ( ! row.hasClass( 'sc_layouts_row_hide_unfixed' ) ) {
ph = h;
placeholder.height( ph );
}
row.addClass( 'sc_layouts_row_fixed_on' ).css( { 'top': rows_offset + 'px' } );
h = row.outerHeight();
if ( ph != h && ! row.hasClass( 'sc_layouts_row_hide_unfixed' ) ) {
ph = h;
placeholder.height( h );
}
$document.trigger( 'action.sc_layouts_row_fixed_on', [ row ] );
}
} else if ( resize && row.hasClass( 'sc_layouts_row_fixed_on' ) && row.offset().top != rows_offset ) {
row.css( { 'top': rows_offset + 'px' } );
}
rows_offset += h;
}
if ( force_state && row.is( force_row ) ) {
force_state = '';
force_row = null;
}
});
}
// Layouts as a submenu
//---------------------------------------------------------
// Stretch submenu with layouts
window.trx_addons_stretch_submenu = function(menu_item) {
var done = false;
if ( ! menu_item.length ) {
return done;
}
var parent_class = menu_item.parent().attr('class');
if ( TRX_ADDONS_STORAGE['menu_stretch'] == 1
&& ! menu_item.hasClass('trx_addons_no_stretch')
&& parent_class.indexOf('trx_addons_no_stretch') == -1
&& ! menu_item.parents('.sc_layouts_menu').hasClass('sc_layouts_menu_dir_vertical')
&& trx_addons_apply_filters( 'trx_addons_filter_stretch_menu',
menu_item.hasClass('sc_layouts_submenu')
|| parent_class.indexOf('columns-') != -1
|| parent_class.indexOf('trx_addons_stretch_') != -1,
menu_item
)
) {
var menu = menu_item.parents("ul");
if ( menu.length == 1 ) {
var $body = jQuery('body'),
li = menu_item.parents("li").eq(0),
stretch_to = trx_addons_apply_filters( 'trx_addons_filter_stretch_menu_to',
li.hasClass( 'trx_addons_stretch_window' )
? 'window'
: ( li.hasClass( 'trx_addons_stretch_window_boxed' )
? 'window_boxed'
: 'content'
),
menu_item
),
content_wrap_selector = trx_addons_apply_filters( 'trx_addons_filter_stretch_menu_content_wrap_selector', '.content_wrap', menu_item ),
content_wrap = jQuery( content_wrap_selector ).eq(0);
if ( ! content_wrap.length ) {
$body.append( trx_addons_apply_filters( 'trx_addons_filter_stretch_menu_content_wrap_html',
'<div class="content_wrap" style="height:0;visibility:hidden;"></div>',
menu_item
) );
content_wrap = jQuery( content_wrap_selector ).eq(0);
if ( ! content_wrap.length ) {
content_wrap = trx_addons_apply_filters( 'trx_addons_filter_stretch_menu_content_wrap', content_wrap, menu_item );
}
}
if ( content_wrap.length == 1 ) {
var bw = $body.innerWidth(),
cw = trx_addons_apply_filters( 'trx_addons_filter_stretch_menu_content_wrap_width', content_wrap.innerWidth(), menu_item, content_wrap ),
cw_offset = content_wrap.offset().left,
li_offset = li.offset().left;
menu_item
.css( {
'width': ( stretch_to == 'window' ? bw : cw ) + 'px',
'max-width': 'none',
'left': -li_offset + ( stretch_to == 'window' ? 0 : cw_offset ) + 'px',
'right': 'auto'
} );
if ( stretch_to == 'window' ) {
menu_item
.data( 'reset-style', '.elementor-section-boxed > .elementor-container,.e-con-boxed > .e-con-inner' )
.find( '.elementor-section-boxed > .elementor-container,.e-con-boxed > .e-con-inner' ).css( {'max-width': 'none' } );
} else if ( stretch_to == 'window_boxed' ) {
var bg = menu_item.find('> .sc_layouts_menu_stretch_bg');
if ( bg.length === 0 ) {
menu_item.append( '<span class="sc_layouts_menu_stretch_bg"></span>' );
bg = menu_item.find('> .sc_layouts_menu_stretch_bg');
bg.css( {
'background-color': menu_item.css('background-color')
} );
}
bg.css( {
'left': -(cw_offset + 1) + 'px',
'right': -(bw - cw_offset - cw + 1) + 'px'
} );
}
done = true;
$document.trigger('action.resize_trx_addons', [menu_item] );
}
}
}
return done;
};
} );