<?php
/**
* Underscore.js template
*
* @package fusion-builder
* @since 2.0
*/
?>
<script type="text/template" id="front-end-navigator-template">
<div class="awb-builder-nav">
<#
if ( Array.isArray( navigatorItems ) && navigatorItems.length ) {
navigatorItems = removeRows( navigatorItems );
generateNavigationList( navigatorItems, 1 );
} else {
displayEmptyMessage();
}
#>
</div>
<# function displayEmptyMessage() { #>
<div class="awb-builder-nav__empty-message-wrapper">
<div class="fusion-builder-option custom">
<div class="important-description">
<div class="fusion-redux-important-notice">
<div class="awb-builder-nav__empty-icon"><i class="fusiona-navigator"></i></div>
<div class="awb-builder-nav__empty-message-title"><?php esc_html_e( 'Navigator', 'fusion-builder' ); ?></div>
<div class="awb-builder-nav__empty-message"><?php esc_html_e( 'No content has been added to the post yet.', 'fusion-builder' ); ?></div>
</div>
</div>
</div>
</div>
<# } #>
<# function generateNavigationList( navigationItems, indent) { #>
<#
var nextItemWillCollapse,
collapsedClass,
haveChildren,
itemType,
isElementItem,
itemTypeClass,
headerTypeClass,
addInsideTypeClass,
icon,
listPositionClass = ( indent === 1 ? 'awb-builder-nav__list-main' : 'awb-builder-nav__list-submenu' ),
i;
#>
<ul class="{{ listPositionClass }}">
<# for ( i = 0; i < navigationItems.length; i++ ) { #>
<#
collapsedClass = ( collapsedItems[ navigationItems[i].view.cid ] ? ' awb-builder-nav__list-item--collapsed' : '' );
haveChildren = ( navigationItems[i].children.length ? true : false );
noChildrenItemClass = ( haveChildren ? '' : ' awb-builder-nav__list-item--no-children' );
itemType = getItemType( navigationItems[i] );
isSpecialContainerItem = ( 'special-container' === itemType );
isElementItem = ( 'element' === itemType );
itemTypeClass = 'awb-builder-nav__list-item--' + itemType;
headerTypeClass = 'awb-builder-nav__item-header--' + itemType;
addInsideTypeClass = 'awb-builder-nav__add-inside--' + itemType;
#>
<li class="awb-builder-nav__list-item {{ itemTypeClass }}{{ noChildrenItemClass }}{{ collapsedClass }}" data-awb-view-cid="{{ navigationItems[i].view.cid }}">
<div class="awb-builder-nav__item-header {{ headerTypeClass }}">
<# if ( ! isSpecialContainerItem && ( haveChildren || ! isElementItem ) ) { #>
<button class="awb-builder-nav__collapse-btn" aria-label="<# buttonLabel( 'collapse', '' ) #>" title="<# buttonLabel( 'collapse', '' ) #>"><i class="fusiona-caret-down"></i></button>
<# } #>
<# if ( isElementItem || isSpecialContainerItem ) { #>
<# icon = ( isSpecialContainerItem ? 'fusiona-minus' : getItemIcon( navigationItems[i] ) ); #>
<div class="awb-builder-nav__item-icon"><i class="{{ icon }}" aria-hidden="true"></i></div>
<# } #>
<div class="awb-builder-nav__item-name">{{ navigationItems[i].name }}{{ getColumnDisplaySize( navigationItems[i] ) }}</div>
<div class="awb-builder-nav__item-actions">
<# if ( isButtonAllowed( 'edit', itemType, navigationItems[i] ) ) { #>
<button class="awb-builder-nav__btn-edit" aria-label="<# buttonLabel( 'edit', itemType ) #>" title="<# buttonLabel( 'edit', itemType ) #>"><i class="fusiona-pen" aria-hidden="true"></i></button>
<# } #>
<# if ( isButtonAllowed( 'add', itemType, navigationItems[i] ) ) { #>
<button class="awb-builder-nav__btn-add" aria-label="<# buttonLabel( 'add', itemType ) #>" title="<# buttonLabel( 'add', itemType ) #>">
<# if ( 'column' === itemType || 'nested-column' === itemType ) { #>
<i class="fusiona-add-columns" aria-hidden="true"></i>
<# } else if ( 'container' === itemType || isSpecialContainerItem ) { #>
<i class="fusiona-add-container" aria-hidden="true"></i>
<# } else { #>
<i class="fusiona-plus" aria-hidden="true"></i>
<# } #>
</button>
<# } #>
<# if ( isButtonAllowed( 'clone', itemType, navigationItems[i] ) ) { #>
<button class="awb-builder-nav__btn-clone" aria-label="<# buttonLabel( 'clone', itemType ) #>" title="<# buttonLabel( 'clone', itemType ) #>"><i class="fusiona-file-add" aria-hidden="true"></i></button>
<# } #>
<# if ( isButtonAllowed( 'remove', itemType, navigationItems[i] ) ) { #>
<button class="awb-builder-nav__btn-remove" aria-label="<# buttonLabel( 'remove', itemType ) #>" title="<# buttonLabel( 'remove', itemType ) #>"><i class="fusiona-trash-o" aria-hidden="true"></i></button>
<# } #>
</div>
</div>
<# if ( ! isElementItem && ! isSpecialContainerItem ) { #>
<#
// UL html list needs to be generated for columns and containers even if they don't have children, to allow jQuery sortable.
generateNavigationList( navigationItems[i].children, indent + 1 );
#>
<div class="awb-builder-nav__add-inside {{ addInsideTypeClass }}">
<div class="awb-builder-nav__item-icon"><i class="{{ getAddInsideBtnIcon( itemType ) }}" aria-hidden="true"></i></div>
<div class="awb-builder-nav__add-inside-text"><# addInsideBtnText( itemType ) #></div>
</div>
<# } #>
</li>
<# } #>
</ul>
<# } #>
<# function removeRows( navigatorItems ) {
var childrenCopy,
i,
j,
newChildren = [];
for ( i = 0; i < navigatorItems.length; i++ ) {
if ( 'container' === getItemType( navigatorItems[i] ) ) {
newChildren = [];
for ( j=0; j < navigatorItems[i].children.length; j++ ) {
newChildren = newChildren.concat( navigatorItems[i].children[j].children );
}
navigatorItems[i].children = removeRows( newChildren );
} else {
navigatorItems[i].children = removeRows( navigatorItems[i].children );
continue;
}
}
return navigatorItems;
} #>
<# function getItemType( item ) {
switch(item.model.get( 'element_type' ) ) {
case 'fusion_builder_container':
return 'container';
case 'fusion_woo_checkout_form':
case 'fusion_builder_next_page':
case 'fusion_builder_form_step':
return 'special-container';
case 'fusion_builder_row':
return 'row';
case 'fusion_builder_column':
return 'column';
case 'fusion_builder_row_inner':
return 'nested-row';
case 'fusion_builder_column_inner':
return 'nested-column';
default:
return 'element';
}
} #>
<# function getItemIcon( item ) {
var itemType = item.model.get( 'element_type' );
if ( ! fusionAllElements || ! fusionAllElements[ itemType ] || ! fusionAllElements[ itemType ].icon ) {
return '';
}
return fusionAllElements[ itemType ].icon;
} #>
<# function getColumnDisplaySize( item ) {
if ( 'column' !== getItemType( item ) ) {
return '';
}
if ( ! item.view || ! item.view.values || ! item.view.values.type ) {
return '';
}
if ( item.view.values.type.indexOf('_') !== -1 ) {
return ' ' + item.view.values.type.replace( '_', '/' );
} else {
if ( 'auto' === item.view.values.type ) {
return ' Auto';
} else if( item.view.values.type.indexOf('px') !== -1 || item.view.values.type.indexOf('calc') !== -1 ) {
return ' ' + item.view.values.type;
} else {
return ' ' + parseInt( item.view.values.type ) + '%';
}
}
} #>
<# function isButtonAllowed( buttonType, elementType, item ) {
if ( 'special-container' === elementType ) {
let itemElType = item.model.get( 'element_type' );
if ( 'fusion_builder_form_step' === itemElType ) {
return true;
}
if ( 'remove' === buttonType ) {
return true;
}
return false;
}
if ( ! navigatorType ) {
return true;
}
if ( 'sections' === navigatorType ) {
if ( 'container' === elementType ) {
if ( 'edit' === buttonType ) {
return true;
} else {
return false;
}
} else {
return true;
}
}
if ( 'post_cards' === navigatorType || 'columns' === navigatorType ) {
if ( 'container' === elementType ) {
return false;
} else if ( 'column' === elementType ) {
if ( 'edit' === buttonType ) {
return true;
} else {
return false;
}
} else {
return true;
}
}
if ( 'elements' === navigatorType ) {
if ( 'element' !== elementType ) {
return false;
} else {
if ( 'edit' === buttonType ) {
return true;
} else {
return false;
}
}
}
return true;
} #>
<# function buttonLabel( buttonType, itemType ) {
if ( 'collapse' === buttonType ) {
#><?php esc_html_e( 'Collapse / Expand', 'fusion-builder' ); ?><#
return;
}
if ( 'container' === itemType ) {
if ( 'edit' === buttonType ) {
#><?php esc_html_e( 'Container Options', 'fusion-builder' ); ?><#
} else if ( 'add' === buttonType ) {
#><?php esc_html_e( 'Add Container', 'fusion-builder' ); ?><#
} else if ( 'clone' === buttonType ) {
#><?php esc_html_e( 'Clone Container', 'fusion-builder' ); ?><#
} else if ( 'remove' === buttonType ) {
#><?php esc_html_e( 'Delete Container', 'fusion-builder' ); ?><#
}
} else if ( 'column' === itemType ) {
if ( 'edit' === buttonType ) {
#><?php esc_html_e( 'Column Options', 'fusion-builder' ); ?><#
} else if ( 'add' === buttonType ) {
#><?php esc_html_e( 'Add Columns', 'fusion-builder' ); ?><#
} else if ( 'clone' === buttonType ) {
#><?php esc_html_e( 'Clone Column', 'fusion-builder' ); ?><#
} else if ( 'remove' === buttonType ) {
#><?php esc_html_e( 'Delete Column', 'fusion-builder' ); ?><#
}
} else if ( 'element' === itemType ) {
if ( 'edit' === buttonType ) {
#><?php esc_html_e( 'Element Options', 'fusion-builder' ); ?><#
} else if ( 'add' === buttonType ) {
#><?php esc_html_e( 'Add Element Below', 'fusion-builder' ); ?><#
} else if ( 'clone' === buttonType ) {
#><?php esc_html_e( 'Clone Element', 'fusion-builder' ); ?><#
} else if ( 'remove' === buttonType ) {
#><?php esc_html_e( 'Delete Element', 'fusion-builder' ); ?><#
}
} else if ( 'nested-row' === itemType ) {
if ( 'edit' === buttonType ) {
#><?php esc_html_e( 'Open Nested Columns', 'fusion-builder' ); ?><#
} else if ( 'add' === buttonType ) {
#><?php esc_html_e( 'Add Columns', 'fusion-builder' ); ?><#
} else if ( 'clone' === buttonType ) {
#><?php esc_html_e( 'Clone Element', 'fusion-builder' ); ?><#
} else if ( 'remove' === buttonType ) {
#><?php esc_html_e( 'Delete Element', 'fusion-builder' ); ?><#
}
} else if ( 'nested-column' === itemType ) {
if ( 'edit' === buttonType ) {
#><?php esc_html_e( 'Column Options', 'fusion-builder' ); ?><#
} else if ( 'add' === buttonType ) {
#><?php esc_html_e( 'Add Element Below', 'fusion-builder' ); ?><#
} else if ( 'clone' === buttonType ) {
#><?php esc_html_e( 'Clone Column', 'fusion-builder' ); ?><#
} else if ( 'remove' === buttonType ) {
#><?php esc_html_e( 'Delete Column', 'fusion-builder' ); ?><#
}
} else if ( 'special-container' === itemType ) {
if ( 'remove' === buttonType ) {
#><?php esc_html_e( 'Delete Special Container', 'fusion-builder' ); ?><#
}
}
} #>
<# function getAddInsideBtnIcon( type ) {
if ( 'container' === type ) {
return 'fusiona-add-columns';
} else if ( 'nested-row' === type ) {
return 'fusiona-add-columns';
} else {
return 'fusiona-plus';
}
} #>
<# function addInsideBtnText( type ) {
if ( 'container' === type ) {
#><?php esc_html_e( 'Add Columns', 'fusion-builder' ); ?><#
} else if ( 'nested-row' === type ) {
#><?php esc_html_e( 'Add Nested Columns', 'fusion-builder' ); ?><#
} else {
#><?php esc_html_e( 'Add Element', 'fusion-builder' ); ?><#
}
} #>
</script>