Viewing File: /home/maglabs/bambinos/wp-content/plugins/novaworks/public/js/admin/mega-menu.js
var novamm = novamm || {};
(function ( $, _ ) {
'use strict';
var wp = window.wp;
novamm = {
init: function () {
this.$body = $( document.body );
this.$modal = $( '#novamm-mega-menu' );
this.itemData = {};
this.templates = {};
this.frame = wp.media( {
library: {
type: 'image'
}
} );
this.initTemplates();
this.initActions();
},
initTemplates: function () {
_.each( novaMenuModal, function ( name ) {
novamm.templates[name] = wp.template( 'novamm-' + name );
} );
},
initActions: function () {
novamm.$body
.on( 'click', '.opensettings', this.openModal )
.on( 'click', '.novamm-modal-backdrop, .novamm-modal-close, .novamm-button-cancel', this.closeModal );
novamm.$modal
.on( 'click', '.novamm-menu a', this.switchPanel )
.on( 'change', '.novamm-mega-width-field select', this.toggleWidthField )
.on( 'click', '.novamm-column-handle', this.resizeMegaColumn )
.on( 'click', '.novamm-button-save', this.saveChanges );
},
openModal: function ( event ) {
event.preventDefault();
novamm.getItemData( this );
novamm.$modal.show();
novamm.$body.addClass( 'modal-open' );
novamm.render();
return false;
},
closeModal: function () {
novamm.$modal.hide().find( '.novamm-content' ).html( '' );
novamm.$body.removeClass( 'modal-open' );
return false;
},
switchPanel: function ( e ) {
e.preventDefault();
var $el = $( this ),
panel = $el.data( 'panel' );
$el.addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
novamm.openSettings( panel );
},
render: function () {
// Render menu
novamm.$modal.find( '.novamm-frame-menu .novamm-menu' ).html( novamm.templates.menu( novamm.itemData ) );
var $activeMenu = novamm.$modal.find( '.novamm-menu a.active' );
// Render content
this.openSettings( $activeMenu.data( 'panel' ) );
},
openSettings: function ( panel ) {
var $content = novamm.$modal.find( '.novamm-frame-content .novamm-content' ),
$panel = $content.children( '#novamm-panel-' + panel );
if ( $panel.length ) {
$panel.addClass( 'active' ).siblings().removeClass( 'active' );
} else {
$content.append( novamm.templates[panel]( novamm.itemData ) );
$content.children( '#novamm-panel-' + panel ).addClass( 'active' ).siblings().removeClass( 'active' );
if ( 'mega' === panel ) {
novamm.initMegaColumns();
}
if ( 'design' === panel ) {
novamm.initDesignFields();
}
if ( 'settings' === panel ) {
novamm.initSettingsFields();
}
if ( 'icon' === panel ) {
novamm.initIconFields();
}
}
// Render title
var title = novamm.$modal.find( '.novamm-frame-menu .novamm-menu a[data-panel=' + panel + ']' ).data( 'title' );
novamm.$modal.find( '.novamm-frame-title' ).html( novamm.templates.title( {title: title} ) );
},
toggleWidthField: function() {
if ( 'custom' === $( this ).val() ) {
$( this ).closest( '.setting-field' ).next( '.setting-field' ).show();
} else {
$( this ).closest( '.setting-field' ).next( '.setting-field' ).hide();
}
},
resizeMegaColumn: function ( e ) {
e.preventDefault();
var $el = $( e.currentTarget ),
$column = $el.closest( '.novamm-submenu-column' ),
currentWidth = $column.data( 'width' ),
widthData = novamm.getWidthData( currentWidth ),
nextWidth;
if ( ! widthData ) {
return;
}
if ( $el.hasClass( 'novamm-resizable-w' ) ) {
nextWidth = widthData.increase ? widthData.increase : widthData;
} else {
nextWidth = widthData.decrease ? widthData.decrease : widthData;
}
$column[0].style.width = nextWidth.width;
$column.data( 'width', nextWidth.width );
$column.find( '.novamm-column-width-label' ).text( nextWidth.label );
$column.find( '.menu-item-depth-0 .menu-item-width' ).val( nextWidth.width );
},
getWidthData: function( width ) {
var steps = [
{width: '12.50%', label: '1/8'},
{width: '20.00%', label: '1/5'},
{width: '25.00%', label: '1/4'},
{width: '33.33%', label: '1/3'},
{width: '37.50%', label: '3/8'},
{width: '50.00%', label: '1/2'},
{width: '62.50%', label: '5/8'},
{width: '66.66%', label: '2/3'},
{width: '75.00%', label: '3/4'},
{width: '87.50%', label: '7/8'},
{width: '100.00%', label: '1/1'}
];
var index = _.findIndex( steps, function( data ) { return data.width === width; } );
if ( index === 'undefined' ) {
return false;
}
var data = {
index: index,
width: steps[index].width,
label: steps[index].label
};
if ( index > 0 ) {
data.decrease = {
index: index - 1,
width: steps[index - 1].width,
label: steps[index - 1].label
};
}
if ( index < steps.length - 1 ) {
data.increase = {
index: index + 1,
width: steps[index + 1].width,
label: steps[index + 1].label
};
}
return data;
},
initMegaColumns: function () {
var $columns = novamm.$modal.find( '#novamm-panel-mega .novamm-submenu-column' ),
defaultWidth = '20.00%';
if ( !$columns.length ) {
return;
}
// Support maximum 5 columns
if ( $columns.length <= 5 ) {
defaultWidth = String( ( 100 / $columns.length ).toFixed( 2 ) ) + '%';
}
_.each( $columns, function ( column ) {
var width = column.dataset.width;
if ( ! parseInt( width ) ) {
width = defaultWidth;
}
var widthData = novamm.getWidthData( width );
column.style.width = widthData.width;
column.dataset.width = widthData.width;
$( column ).find( '.menu-item-depth-0 .menu-item-width' ).val( width );
$( column ).find( '.novamm-column-width-label' ).text( widthData.label );
} );
},
initDesignFields: function () {
novamm.$modal.find( '.background-color-picker' ).wpColorPicker();
// Background image
novamm.$modal.on( 'click', '.background-image .upload-button', function ( e ) {
e.preventDefault();
var $el = $( this );
// Remove all attached 'select' event
novamm.frame.off( 'select' );
// Update inputs when select image
novamm.frame.on( 'select', function () {
// Update input value for single image selection
var url = novamm.frame.state().get( 'selection' ).first().toJSON().url;
$el.siblings( '.background-image-preview' ).addClass( 'has-image' ).html( '<img src="' + url + '">' );
$el.siblings( 'input' ).val( url );
$el.siblings( '.remove-button' ).removeClass( 'hidden' );
} );
novamm.frame.open();
} ).on( 'click', '.background-image .remove-button', function ( e ) {
e.preventDefault();
var $el = $( this );
$el.siblings( '.background-image-preview' ).removeClass( 'has-image' ).html( '' );
$el.siblings( 'input' ).val( '' );
$el.addClass( 'hidden' );
} );
// Background position
novamm.$modal.on( 'change', '.background-position select', function () {
var $el = $( this );
if ( 'custom' === $el.val() ) {
$el.next( 'input' ).removeClass( 'hidden' );
} else {
$el.next( 'input' ).addClass( 'hidden' );
}
} );
},
initSettingsFields: function() {
novamm.$modal.on( 'change', '.item-visible-fields input', function () {
var $row = $( this ).closest( '.item-visible-fields' ),
val = $row.find( 'input:checked' ).val();
if ( 'visible' === val ) {
$row.next( '.item-link-field' ).show();
} else {
$row.next( '.item-link-field' ).hide();
}
} );
},
initIconFields: function () {
var $input = novamm.$modal.find( '#novamm-icon-input' ),
$preview = novamm.$modal.find( '#novamm-selected-icon' ),
$icons = novamm.$modal.find( '.novamm-icon-selector .icons i' );
novamm.$modal.on( 'click', '.novamm-icon-selector .icons i', function () {
var $el = $( this ),
icon = $el.data( 'icon' );
$el.addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
$input.val( icon );
$preview.html( '<i class="' + icon + '"></i>' );
} );
$preview.on( 'click', 'i', function () {
$( this ).remove();
$input.val( '' );
} );
novamm.$modal.on( 'keyup', '.novamm-icon-search', function () {
var term = $( this ).val().toUpperCase();
if ( !term ) {
$icons.show();
} else {
$icons.hide().filter( function () {
return $( this ).data( 'icon' ).toUpperCase().indexOf( term ) > -1;
} ).show();
}
} );
},
getItemData: function ( menuItem ) {
var $menuItem = $( menuItem ).closest( 'li.menu-item' ),
$menuData = $menuItem.find( '.mega-data' ),
children = $menuItem.childMenuItems(),
megaData = $menuData.data( 'mega' );
megaData.content = $menuData.html();
novamm.itemData = {
depth : $menuItem.menuItemDepth(),
megaData: megaData,
data : $menuItem.getItemData(),
children: [],
element : $menuItem.get( 0 )
};
if ( !_.isEmpty( children ) ) {
_.each( children, function ( item ) {
var $item = $( item ),
$itemData = $item.find( '.mega-data' ),
depth = $item.menuItemDepth(),
megaData = $itemData.data( 'mega' );
megaData.content = $itemData.html();
novamm.itemData.children.push( {
depth : depth,
subDepth: depth - novamm.itemData.depth - 1,
data : $item.getItemData(),
megaData: megaData,
element : item
} );
} );
}
},
setItemData: function ( item, data ) {
var $dataHolder = $( item ).find( '.mega-data' );
if ( _.has( data, 'content' ) ) {
$dataHolder.html( data.content );
delete data.content;
}
$dataHolder.data( 'mega', data );
},
getFieldName: function ( name, id ) {
name = name.split( '.' );
name = '[' + name.join( '][' ) + ']';
return 'menu-item-mega[' + id + ']' + name;
},
saveChanges: function () {
var $inputs = novamm.$modal.find( '.novamm-content :input' ),
$spinner = novamm.$modal.find( '.novamm-toolbar .spinner' );
$inputs.each( function() {
var $input = $( this );
if ( $input.is( ':checkbox' ) && $input.is( ':not(:checked)' ) ) {
$input.attr( 'value', '0' ).prop( 'checked', true );
}
} );
var data = $inputs.serialize();
$inputs.filter( '[value="0"]' ).prop( 'checked', false );
$spinner.addClass( 'is-active' );
$.post( ajaxurl, {
action: 'nova_addons_save_menu_item_data',
data : data
}, function ( res ) {
if ( !res.success ) {
return;
}
var data = res.data['menu-item-mega'];
// Update parent menu item
if ( _.has( data, novamm.itemData.data['menu-item-db-id'] ) ) {
novamm.setItemData( novamm.itemData.element, data[novamm.itemData.data['menu-item-db-id']] );
}
_.each( novamm.itemData.children, function ( menuItem ) {
if ( !_.has( data, menuItem.data['menu-item-db-id'] ) ) {
return;
}
novamm.setItemData( menuItem.element, data[menuItem.data['menu-item-db-id']] );
} );
$spinner.removeClass( 'is-active' );
novamm.closeModal();
} );
}
};
$( function () {
novamm.init();
} );
})( jQuery, _ );
Back to Directory
File Manager