-
-
Save Mashpy/fc75065c845c5689ac8058c2c597c18a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ========================================================= | |
* composer-view.js v0.2.1 | |
* ========================================================= | |
* Copyright 2013 Wpbakery | |
* | |
* Visual composer backbone/underscore version | |
* ========================================================= */ | |
(function ( $ ) { | |
var i18n = window.i18nLocale, | |
store = vc.storage, | |
Shortcodes = vc.shortcodes; | |
vc.templateOptions = { | |
default: { | |
evaluate: /<%([\s\S]+?)%>/g, | |
interpolate: /<%=([\s\S]+?)%>/g, | |
escape: /<%-([\s\S]+?)%>/g | |
}, | |
custom: { | |
evaluate: /<#([\s\S]+?)#>/g, | |
interpolate: /\{\{\{([\s\S]+?)\}\}\}/g, | |
escape: /\{\{([^\}]+?)\}\}(?!\})/g | |
} | |
}; | |
vc.builder = { | |
toString: function ( model, type ) { | |
var params = model.get( 'params' ), | |
content = _.isString( params.content ) ? params.content : ''; | |
return wp.shortcode.string( { | |
tag: model.get( 'shortcode' ), | |
attrs: _.omit( params, 'content' ), | |
content: content, | |
type: _.isString( type ) ? type : '' | |
} ); | |
} | |
}; | |
/** | |
* Default view for shortcode as block inside Visual composer design mode. | |
* @type {*} | |
*/ | |
vc.clone_index = 1; | |
vc.saved_custom_css = false; | |
var ShortcodeView = vc.shortcode_view = Backbone.View.extend( { | |
tagName: 'div', | |
$content: '', | |
use_default_content: false, | |
params: {}, | |
events: { | |
'click .column_delete,.vc_control-btn-delete': 'deleteShortcode', | |
'click .column_add,.vc_control-btn-prepend': 'addElement', | |
'click .column_edit,.vc_control-btn-edit, .column_edit_trigger': 'editElement', | |
'click .column_clone,.vc_control-btn-clone': 'clone', | |
'mousemove': 'checkControlsPosition' | |
}, | |
removeView: function () { | |
vc.closeActivePanel( this.model ); | |
this.remove(); | |
}, | |
checkControlsPosition: function () { | |
if ( ! this.$controls_buttons ) { | |
return; | |
} | |
var window_top, element_position_top, new_position, | |
element_height = this.$el.height(), | |
window_height = $( window ).height(); | |
if ( element_height > window_height ) { | |
window_top = $( window ).scrollTop(); | |
element_position_top = this.$el.offset().top; | |
new_position = (window_top - element_position_top) + $( window ).height() / 2; | |
if ( 40 < new_position && new_position < element_height ) { | |
this.$controls_buttons.css( 'top', new_position ); | |
} else if ( new_position > element_height ) { | |
this.$controls_buttons.css( 'top', element_height - 40 ); | |
} else { | |
this.$controls_buttons.css( 'top', 40 ); | |
} | |
} | |
}, | |
initialize: function () { | |
this.model.bind( 'destroy', this.removeView, this ); | |
this.model.bind( 'change:params', this.changeShortcodeParams, this ); | |
this.model.bind( 'change_parent_id', this.changeShortcodeParent, this ); | |
this.createParams(); | |
}, | |
hasUserAccess: function () { | |
var shortcodeTag; | |
shortcodeTag = this.model.get( 'shortcode' ); | |
if ( - 1 < _.indexOf( [ | |
"vc_row", | |
"vc_column", | |
"vc_row_inner", | |
"vc_column_inner" | |
], shortcodeTag ) ) { | |
return true; // we cannot block controls for these shortcodes; | |
} | |
if ( ! _.every( vc.roles.current_user, function ( role ) { | |
return ! (! _.isUndefined( vc.roles[ role ] ) && ! _.isUndefined( vc.roles[ role ][ 'shortcodes' ] ) && _.isUndefined( vc.roles[ role ][ 'shortcodes' ][ shortcodeTag ] )); | |
} ) ) { | |
return false; | |
} | |
return true; | |
}, | |
createParams: function () { | |
var tag, settings, params; | |
tag = this.model.get( 'shortcode' ); | |
settings = _.isObject( vc.map[ tag ] ) && _.isArray( vc.map[ tag ].params ) ? vc.map[ tag ].params : []; | |
params = this.model.get( 'params' ); | |
this.params = {}; | |
_.each( settings, function ( param ) { | |
this.params[ param.param_name ] = param; | |
}, this ); | |
}, | |
setContent: function () { | |
this.$content = this.$el.find( '> .wpb_element_wrapper > .vc_container_for_children,' | |
+ ' > .vc_element-wrapper > .vc_container_for_children' ); | |
}, | |
setEmpty: function () { | |
}, | |
unsetEmpty: function () { | |
}, | |
checkIsEmpty: function () { | |
if ( this.model.get( 'parent_id' ) ) { | |
vc.app.views[ this.model.get( 'parent_id' ) ].checkIsEmpty(); | |
} | |
}, | |
/** | |
* Convert html into correct element | |
* @param html | |
*/ | |
html2element: function ( html ) { | |
var attributes = {}, | |
$template; | |
if ( _.isString( html ) ) { | |
this.template = _.template( html ); | |
$template = $( this.template( this.model.toJSON(), vc.templateOptions.default ).trim() ); | |
} else { | |
this.template = html; | |
$template = html; | |
} | |
_.each( $template.get( 0 ).attributes, function ( attr ) { | |
attributes[ attr.name ] = attr.value; | |
} ); | |
this.$el.attr( attributes ).html( $template.html() ); | |
this.setContent(); | |
this.renderContent(); | |
}, | |
render: function () { | |
var $shortcode_template_el = $( '#vc_shortcode-template-' + this.model.get( 'shortcode' ) ); | |
if ( $shortcode_template_el.is( 'script' ) ) { | |
this.html2element( _.template( $shortcode_template_el.html(), | |
this.model.toJSON(), | |
vc.templateOptions.default ) ); | |
} else { | |
var params = this.model.get( 'params' ); | |
$.ajax( { | |
type: 'POST', | |
url: window.ajaxurl, | |
data: { | |
action: 'wpb_get_element_backend_html', | |
data_element: this.model.get( 'shortcode' ), | |
data_width: _.isUndefined( params.width ) ? '1/1' : params.width | |
}, | |
dataType: 'html', | |
context: this | |
} ).done( function ( html ) { | |
this.html2element( html ); | |
} ); | |
} | |
this.model.view = this; | |
this.$controls_buttons = this.$el.find( '.vc_controls > :first' ); | |
return this; | |
}, | |
renderContent: function () { | |
this.$el.attr( 'data-model-id', this.model.get( 'id' ) ); | |
this.$el.data( 'model', this.model ); | |
return this; | |
}, | |
changedContent: function ( view ) { | |
}, | |
_loadDefaults: function () { | |
var tag, | |
hasChilds; | |
tag = this.model.get( 'shortcode' ); | |
hasChilds = ! ! vc.shortcodes.where( { parent_id: this.model.get( 'id' ) } ).length; | |
if ( ! hasChilds && true === this.use_default_content && _.isObject( vc.map[ tag ] ) && _.isString( vc.map[ tag ].default_content ) && vc.map[ tag ].default_content.length ) { | |
this.use_default_content = false; | |
Shortcodes.createFromString( vc.map[ tag ].default_content, this.model ); | |
} | |
}, | |
_callJsCallback: function () { | |
//Fire INIT callback if it is defined | |
var tag = this.model.get( 'shortcode' ); | |
if ( _.isObject( vc.map[ tag ] ) && _.isObject( vc.map[ tag ].js_callback ) && ! _.isUndefined( vc.map[ tag ].js_callback.init ) ) { | |
var fn = vc.map[ tag ].js_callback.init; | |
window[ fn ]( this.$el ); | |
} | |
}, | |
ready: function ( e ) { | |
this._loadDefaults(); | |
this._callJsCallback(); | |
if ( this.model.get( 'parent_id' ) && _.isObject( vc.app.views[ this.model.get( 'parent_id' ) ] ) ) { | |
vc.app.views[ this.model.get( 'parent_id' ) ].changedContent( this ); | |
} | |
_.defer( _.bind( function () { | |
vc.events.trigger( 'shortcodeView:ready' ); | |
vc.events.trigger( 'shortcodeView:ready:' + this.model.get( 'shortcode' ) ); | |
}, this ) ); | |
return this; | |
}, | |
// View utils {{ | |
addShortcode: function ( view, method ) { | |
var before_shortcode; | |
before_shortcode = _.last( vc.shortcodes.filter( function ( shortcode ) { | |
return shortcode.get( 'parent_id' ) === this.get( 'parent_id' ) && parseFloat( shortcode.get( 'order' ) ) < parseFloat( this.get( 'order' ) ); | |
}, view.model ) ); | |
if ( before_shortcode ) { | |
view.render().$el.insertAfter( '[data-model-id=' + before_shortcode.id + ']' ); | |
} else if ( 'append' === method ) { | |
this.$content.append( view.render().el ); | |
} else { | |
this.$content.prepend( view.render().el ); | |
} | |
}, | |
changeShortcodeParams: function ( model ) { | |
var tag, | |
params, | |
settings, | |
view; | |
// Triggered when shortcode being updated | |
tag = model.get( 'shortcode' ); | |
params = model.get( 'params' ); | |
settings = vc.map[ tag ]; | |
_.defer( function () { | |
vc.events.trigger( 'backend.shortcodeViewChangeParams:' + tag ); | |
} ); | |
if ( _.isArray( settings.params ) ) { | |
_.each( settings.params, function ( param_settings ) { | |
var name, | |
value, | |
$wrapper, | |
label_value, | |
$admin_label; | |
name = param_settings.param_name; | |
value = params[ name ]; | |
$wrapper = this.$el.find( '> .wpb_element_wrapper, > .vc_element-wrapper' ); | |
label_value = value; | |
$admin_label = $wrapper.children( '.admin_label_' + name ); | |
if ( _.isObject( vc.atts[ param_settings.type ] ) && _.isFunction( vc.atts[ param_settings.type ].render ) ) { | |
value = vc.atts[ param_settings.type ].render.call( this, param_settings, value ); | |
} | |
if ( $wrapper.children( '.' + param_settings.param_name ).is( 'input,textarea,select' ) ) { | |
$wrapper.children( '[name=' + param_settings.param_name + ']' ).val( value ); | |
} else if ( $wrapper.children( '.' + param_settings.param_name ).is( 'iframe' ) ) { | |
$wrapper.children( '[name=' + param_settings.param_name + ']' ).attr( 'src', value ); | |
} else if ( $wrapper.children( '.' + param_settings.param_name ).is( 'img' ) ) { | |
var $img; | |
$img = $wrapper.children( '[name=' + param_settings.param_name + ']' ); | |
if ( value && value.match( /^\d+$/ ) ) { | |
$.ajax( { | |
type: 'POST', | |
url: window.ajaxurl, | |
data: { | |
action: 'wpb_single_image_src', | |
content: value, | |
size: 'thumbnail' | |
}, | |
dataType: 'html', | |
context: this | |
} ).done( function ( url ) { | |
$img.attr( 'src', url ); | |
} ); | |
} else if ( value ) { | |
$img.attr( 'src', value ); | |
} | |
} else { | |
$wrapper.children( '[name=' + param_settings.param_name + ']' ).html( value ? value : '' ); | |
} | |
if ( $admin_label.length ) { | |
var inverted_value; | |
if ( '' === value || _.isUndefined( value ) ) { | |
$admin_label.hide().addClass( 'hidden-label' ); | |
} else { | |
if ( _.isObject( param_settings.value ) && ! _.isArray( param_settings.value ) && 'checkbox' === param_settings.type ) { | |
inverted_value = _.invert( param_settings.value ); | |
label_value = _.map( value.split( /[\s]*\,[\s]*/ ), function ( val ) { | |
return _.isString( inverted_value[ val ] ) ? inverted_value[ val ] : val; | |
} ).join( ', ' ); | |
} else if ( _.isObject( param_settings.value ) && ! _.isArray( param_settings.value ) ) { | |
inverted_value = _.invert( param_settings.value ); | |
label_value = _.isString( inverted_value[ value ] ) ? inverted_value[ value ] : value; | |
} | |
$admin_label.html( '<label>' + $admin_label.find( 'label' ).text() + '</label>: ' + label_value ); | |
$admin_label.show().removeClass( 'hidden-label' ); | |
} | |
} | |
}, this ); | |
} | |
view = vc.app.views[ model.get( 'parent_id' ) ]; | |
if ( false !== model.get( 'parent_id' ) && _.isObject( view ) ) { | |
view.checkIsEmpty(); | |
} | |
}, | |
changeShortcodeParent: function ( model ) { | |
if ( false === this.model.get( 'parent_id' ) ) { | |
return model; | |
} | |
var $parent_view = $( '[data-model-id=' + this.model.get( 'parent_id' ) + ']' ), | |
view = vc.app.views[ this.model.get( 'parent_id' ) ]; | |
this.$el.appendTo( $parent_view.find( '> .wpb_element_wrapper > .wpb_column_container,' | |
+ ' > .vc_element-wrapper > .wpb_column_container' ) ); | |
view.checkIsEmpty(); | |
}, | |
// }} | |
// Event Actions {{ | |
deleteShortcode: function ( e ) { | |
if ( _.isObject( e ) ) { | |
e.preventDefault(); | |
} | |
var answer = confirm( i18n.press_ok_to_delete_section ); | |
if ( true === answer ) { | |
this.model.destroy(); | |
} | |
}, | |
addElement: function ( e ) { | |
_.isObject( e ) && e.preventDefault(); | |
vc.add_element_block_view.render( this.model, | |
! _.isObject( e ) || ! $( e.currentTarget ).closest( '.bottom-controls' ).hasClass( 'bottom-controls' ) ); | |
}, | |
editElement: function ( e ) { | |
if ( _.isObject( e ) ) { | |
e.preventDefault(); | |
} | |
if ( ! vc.active_panel || ! vc.active_panel.model || ! this.model || ( vc.active_panel.model && this.model && vc.active_panel.model.get( 'id' ) != this.model.get( 'id' ) ) ) { | |
vc.closeActivePanel(); | |
vc.edit_element_block_view.render( this.model ); | |
} | |
}, | |
clone: function ( e ) { | |
if ( _.isObject( e ) ) { | |
e.preventDefault(); | |
} | |
vc.clone_index = vc.clone_index / 10; | |
return this.cloneModel( this.model, this.model.get( 'parent_id' ) ); | |
}, | |
cloneModel: function ( model, parent_id, save_order ) { | |
var new_order, | |
model_clone, | |
params, | |
tag; | |
new_order = _.isBoolean( save_order ) && true === save_order ? model.get( 'order' ) : parseFloat( model.get( 'order' ) ) + vc.clone_index; | |
params = _.extend( {}, model.get( 'params' ) ); | |
tag = model.get( 'shortcode' ); | |
model_clone = Shortcodes.create( { | |
shortcode: tag, | |
id: window.vc_guid(), | |
parent_id: parent_id, | |
order: new_order, | |
cloned: true, | |
cloned_from: model.toJSON(), | |
params: params | |
} ); | |
_.each( Shortcodes.where( { parent_id: model.id } ), function ( shortcode ) { | |
this.cloneModel( shortcode, model_clone.get( 'id' ), true ); | |
}, this ); | |
return model_clone; | |
} | |
} ); | |
var VisualComposer = vc.visualComposerView = Backbone.View.extend( { | |
el: $( '#wpb_visual_composer' ), | |
views: {}, | |
disableFixedNav: false, | |
events: { | |
"click #wpb-add-new-row": 'createRow', | |
'click #vc_post-settings-button': 'editSettings', | |
'click #vc_add-new-element, .vc_add-element-button, .vc_add-element-not-empty-button': 'addElement', | |
'click .vc_add-text-block-button': 'addTextBlock', | |
'click .wpb_switch-to-composer': 'switchComposer', | |
'click #vc_templates-editor-button': 'openTemplatesWindow', | |
'click #vc_templates-more-layouts': 'openTemplatesWindow', | |
'click .vc_template[data-template_unique_id] > .wpb_wrapper': 'loadDefaultTemplate', | |
'click #wpb-save-post': 'save', | |
'click .vc_control-preview': 'preview' | |
}, | |
initialize: function () { | |
this.accessPolicy = $( '.vc_js_composer_group_access_show_rule' ).val(); | |
if ( 'no' === this.accessPolicy ) { | |
return false; | |
} | |
this.buildRelevance(); | |
_.bindAll( this, | |
'switchComposer', | |
'dropButton', | |
'processScroll', | |
'updateRowsSorting', | |
'updateElementsSorting' ); | |
vc.events.on( 'shortcodes:add', vcAddShortcodeDefaultParams, this ); | |
vc.events.on( 'shortcodes:add', vc.atts.addShortcodeIdParam, this ); // update vc_grid_id on shortcode adding | |
vc.events.on( 'shortcodes:add', this.addShortcode, this ); | |
vc.events.on( 'shortcodes:destroy', this.checkEmpty, this ); | |
Shortcodes.on( 'change:params', this.changeParamsEvents, this ); | |
Shortcodes.on( 'reset', this.addAll, this ); | |
this.render(); | |
}, | |
changeParamsEvents: function ( model ) { | |
vc.events.triggerShortcodeEvents( 'update', model ); | |
}, | |
render: function () { | |
var front = ''; | |
// Find required elemnts of the view. | |
this.$vcStatus = $( '#wpb_vc_js_status' ); | |
this.$metablock_content = $( '.metabox-composer-content' ); | |
this.$content = $( "#visual_composer_content" ); | |
this.$post = $( '#postdivrich' ); | |
this.$loading_block = $( '#vc_logo' ); | |
if ( 'only' !== this.accessPolicy ) { | |
if ( vc_frontend_enabled ) { | |
front = '<span class="vc_spacer"></span><a class="wpb_switch-to-front-composer" href="' + $( '#wpb-edit-inline' ).attr( 'href' ) + '">' + window.i18nLocale.main_button_title_frontend_editor + '</a>'; | |
} | |
this.$buttonsContainer = $( '<div class="composer-switch"><span class="logo-icon"></span><span class="vc_spacer"></span><a class="wpb_switch-to-composer" href="#">' + window.i18nLocale.main_button_title_backend_editor + '</a>' + front + '</div>' ).insertAfter( 'div#titlediv' ); | |
this.$switchButton = this.$buttonsContainer.find( '.wpb_switch-to-composer' ); | |
this.$switchButton.click( this.switchComposer ); | |
} | |
vc.add_element_block_view = new vc.AddElementUIPanelBackendEditor( { el: '#vc_ui-panel-add-element' } ); | |
vc.edit_element_block_view = new vc.EditElementUIPanel( { el: '#vc_ui-panel-edit-element' } ); | |
/** | |
* @deprecated 4.4 | |
* @type {vc.TemplatesEditorPanelViewBackendEditor} | |
*/ | |
vc.templates_editor_view = new vc.TemplatesEditorPanelViewBackendEditor( { el: '#vc_templates-editor' } ); | |
vc.templates_panel_view = new vc.TemplateWindowUIPanelBackendEditor( { el: '#vc_ui-panel-templates' } ); | |
vc.post_settings_view = new vc.PostSettingsUIPanelBackendEditor( { el: '#vc_ui-panel-post-settings' } ); | |
this.setSortable(); | |
this.setDraggable(); | |
vc.is_mobile = 0 < $( 'body.mobile' ).length; | |
vc.saved_custom_css = $( '#wpb_custom_post_css_field' ).val(); | |
vc.updateSettingsBadge(); | |
/** | |
* @since 4.5 | |
*/ | |
_.defer( function () { | |
vc.events.trigger( 'app.render' ); | |
} ); | |
return this; | |
}, | |
addAll: function () { | |
this.views = {}; | |
this.$content.removeClass( 'loading' ).empty(); | |
this.addChild( false ); | |
this.checkEmpty(); | |
this.$loading_block.removeClass( 'vc_ajax-loading' ); | |
this.$metablock_content.removeClass( 'vc_loading-shortcodes' ); | |
}, | |
addChild: function ( parent_id ) { | |
_.each( vc.shortcodes.where( { parent_id: parent_id } ), function ( shortcode ) { | |
this.appendShortcode( shortcode ); | |
this.setSortable(); | |
this.addChild( shortcode.get( 'id' ) ); | |
}, this ); | |
}, | |
getView: function ( model ) { | |
var view; | |
if ( _.isObject( vc.map[ model.get( 'shortcode' ) ] ) && _.isString( vc.map[ model.get( 'shortcode' ) ].js_view ) && vc.map[ model.get( 'shortcode' ) ].js_view.length && ! _.isUndefined( window[ window.vc.map[ model.get( 'shortcode' ) ].js_view ] ) ) { | |
view = new window[ window.vc.map[ model.get( 'shortcode' ) ].js_view ]( { model: model } ); | |
} else { | |
view = new ShortcodeView( { model: model } ); | |
} | |
model.set( { view: view } ); | |
return view; | |
}, | |
setDraggable: function () { | |
$( '#wpb-add-new-element, #wpb-add-new-row' ).draggable( { | |
helper: function () { | |
return $( '<div id="drag_placeholder"></div>' ).appendTo( 'body' ); | |
}, | |
zIndex: 99999, | |
// cursorAt: { left: 10, top : 20 }, | |
cursor: "move", | |
// appendTo: "body", | |
revert: "invalid", | |
start: function ( event, ui ) { | |
$( "#drag_placeholder" ).addClass( "column_placeholder" ).html( window.i18nLocale.drag_drop_me_in_column ); | |
} | |
} ); | |
this.$content.droppable( { | |
greedy: true, | |
accept: ".dropable_el,.dropable_row", | |
hoverClass: "wpb_ui-state-active", | |
drop: this.dropButton | |
} ); | |
}, | |
dropButton: function ( event, ui ) { | |
if ( ui.draggable.is( '#wpb-add-new-element' ) ) { | |
this.addElement(); | |
} else if ( ui.draggable.is( '#wpb-add-new-row' ) ) { | |
this.createRow(); | |
} | |
}, | |
appendShortcode: function ( model ) { | |
var view, parentModelView, params; | |
view = this.getView( model ); | |
params = _.extend( vc.getDefaults( model.get( 'shortcode' ) ), model.get( 'params' ) ); | |
model.set( 'params', params, { silent: true } ); | |
parentModelView = false !== model.get( 'parent_id' ) ? | |
this.views[ model.get( 'parent_id' ) ] : false; | |
this.views[ model.id ] = view; | |
if ( model.get( 'parent_id' ) ) { | |
var parentView; | |
parentView = this.views[ model.get( 'parent_id' ) ]; | |
parentView.unsetEmpty(); | |
} | |
if ( parentModelView ) { | |
parentModelView.addShortcode( view, 'append' ); | |
} else { | |
this.$content.append( view.render().el ); | |
} | |
view.ready(); | |
view.changeShortcodeParams( model ); // Refactor | |
view.checkIsEmpty(); | |
this.setNotEmpty(); | |
}, | |
addShortcode: function ( model ) { | |
var view, parentModelView, params; | |
params = _.extend( vc.getDefaults( model.get( 'shortcode' ) ), model.get( 'params' ) ); | |
model.set( 'params', params, { silent: true } ); | |
view = this.getView( model ); | |
parentModelView = false !== model.get( 'parent_id' ) ? | |
this.views[ model.get( 'parent_id' ) ] : false; | |
view.use_default_content = true !== model.get( 'cloned' ); | |
this.views[ model.id ] = view; | |
if ( parentModelView ) { | |
parentModelView.addShortcode( view ); | |
parentModelView.checkIsEmpty(); | |
var self; | |
self = this; | |
_.defer( function () { | |
view.changeShortcodeParams && view.changeShortcodeParams( model ); | |
view.ready(); | |
self.setSortable(); | |
self.setNotEmpty(); | |
} ); | |
} else { | |
this.addRow( view ); | |
_.defer( function () { | |
view.changeShortcodeParams && view.changeShortcodeParams( model ); | |
} ); | |
} | |
}, | |
addRow: function ( view ) { | |
var before_shortcode; | |
before_shortcode = _.last( vc.shortcodes.filter( function ( shortcode ) { | |
return false === shortcode.get( 'parent_id' ) && parseFloat( shortcode.get( 'order' ) ) < parseFloat( this.get( 'order' ) ); | |
}, view.model ) ); | |
if ( before_shortcode ) { | |
view.render().$el.insertAfter( '[data-model-id=' + before_shortcode.id + ']' ); | |
} else { | |
this.$content.append( view.render().el ); | |
} | |
}, | |
addTextBlock: function ( e ) { | |
var row, column, params; | |
e.preventDefault(); | |
row = Shortcodes.create( { | |
shortcode: 'vc_row' | |
} ); | |
column = Shortcodes.create( { | |
shortcode: 'vc_column', | |
params: { width: '1/1' }, | |
parent_id: row.id, | |
root_id: row.id | |
} ); | |
params = vc.getDefaults( 'vc_column_text' ); | |
if ( 'undefined' !== typeof(window.vc_settings_presets[ 'vc_column_text' ]) ) { | |
params = _.extend( params, window.vc_settings_presets[ 'vc_column_text' ] ); | |
} | |
return Shortcodes.create( { | |
shortcode: 'vc_column_text', | |
parent_id: column.id, | |
root_id: row.id, | |
params: params | |
} ); | |
}, | |
/** | |
* Create row | |
*/ | |
createRow: function () { | |
var row = Shortcodes.create( { shortcode: 'vc_row' } ); | |
Shortcodes.create( { | |
shortcode: 'vc_column', | |
params: { width: '1/1' }, | |
parent_id: row.id, | |
root_id: row.id | |
} ); | |
return row; | |
}, | |
/** | |
* Add Element with a help of modal view. | |
*/ | |
addElement: function ( e ) { | |
_.isObject( e ) && e.preventDefault(); | |
vc.add_element_block_view.render( false ); | |
}, | |
/** | |
* @deprecated 4.4 use openTemplatesWindow | |
* @param e | |
*/ | |
openTemplatesEditor: function ( e ) { | |
e && e.preventDefault(); | |
vc.templates_editor_view.render().show(); | |
}, | |
openTemplatesWindow: function ( e ) { | |
e && e.preventDefault(); | |
if ( $( e.currentTarget ).is( '#vc_templates-more-layouts' ) ) { | |
vc.templates_panel_view.once( 'show', function () { | |
$( '[data-vc-ui-element-target="[data-tab=default_templates]"]' ).click(); | |
} ); | |
} | |
vc.templates_panel_view.render().show(); | |
}, | |
loadDefaultTemplate: function ( e ) { | |
e && e.preventDefault(); | |
vc.templates_panel_view.loadTemplate( e ); | |
}, | |
editSettings: function ( e ) { | |
e && e.preventDefault(); | |
vc.post_settings_view.render().show(); | |
}, | |
sortingStarted: function ( event, ui ) { | |
$( '#visual_composer_content' ).addClass( 'vc_sorting-started' ); | |
}, | |
sortingStopped: function ( event, ui ) { | |
$( '#visual_composer_content' ).removeClass( 'vc_sorting-started' ); | |
}, | |
updateElementsSorting: function ( event, ui ) { | |
_.defer( function ( app, event, ui ) { | |
var $current_container = ui.item.parent().closest( '[data-model-id]' ), | |
parent = $current_container.data( 'model' ), | |
model = ui.item.data( 'model' ), | |
models = app.views[ parent.id ].$content.find( '> [data-model-id]' ), | |
i = 0; | |
// Change parent if block moved to another container. | |
if ( ! _.isNull( ui.sender ) ) { | |
var old_parent_id = model.get( 'parent_id' ); | |
store.lock(); | |
model.save( { parent_id: parent.id } ); | |
app.views[ old_parent_id ].checkIsEmpty(); | |
app.views[ parent.id ].checkIsEmpty(); | |
} | |
models.each( function () { | |
var shortcode = $( this ).data( 'model' ); | |
store.lock(); | |
shortcode.save( { 'order': i ++ } ); | |
} ); | |
model.save(); | |
}, this, event, ui ); | |
}, | |
updateRowsSorting: function () { | |
_.defer( function ( app ) { | |
var $rows = app.$content.find( app.rowSortableSelector ); | |
$rows.each( function () { | |
var index = $( this ).index(); | |
if ( $rows.length - 1 > index ) { | |
store.lock(); | |
} | |
$( this ).data( 'model' ).save( { 'order': index } ); | |
} ); | |
}, this ); | |
}, | |
renderPlaceholder: function ( event, element ) { | |
var tag = $( element ).data( 'element_type' ); | |
var is_container = _.isObject( vc.map[ tag ] ) && ( ( _.isBoolean( vc.map[ tag ].is_container ) && true === vc.map[ tag ].is_container ) || ! _.isEmpty( vc.map[ tag ].as_parent ) ); | |
var $helper = $( '<div class="vc_helper vc_helper-' + tag + '"><i class="vc_element-icon' | |
+ ( vc.map[ tag ].icon ? ' ' + vc.map[ tag ].icon : '' ) | |
+ '"' | |
+ ( is_container ? ' data-is-container="true"' : '' ) | |
+ '></i> ' + vc.map[ tag ].name + '</div>' ).prependTo( 'body' ); | |
return $helper; | |
}, | |
rowSortableSelector: "> .wpb_vc_row", | |
setSortable: function () { | |
// 1st level sorting (rows). work also in wp41. | |
$( '.wpb_main_sortable' ).sortable( { | |
forcePlaceholderSize: true, | |
placeholder: "widgets-placeholder", | |
cursor: "move", | |
items: this.rowSortableSelector, // wpb_sortablee | |
handle: '.column_move', | |
distance: 0.5, | |
start: this.sortingStarted, | |
stop: this.sortingStopped, | |
update: this.updateRowsSorting, | |
over: function ( event, ui ) { | |
ui.placeholder.css( { maxWidth: ui.placeholder.parent().width() } ); | |
} | |
} ); | |
// 2st level sorting (elements). | |
$( '.wpb_column_container' ).sortable( { | |
forcePlaceholderSize: true, | |
forceHelperSize: false, | |
connectWith: ".wpb_column_container", | |
placeholder: "vc_placeholder", | |
items: "> div.wpb_sortable", //wpb_sortablee | |
helper: this.renderPlaceholder, | |
distance: 3, | |
scroll: true, | |
scrollSensitivity: 70, | |
cursor: 'move', | |
cursorAt: { top: 20, left: 16 }, | |
tolerance: 'intersect', // this helps with dragging textblock into tabs | |
start: function () { | |
$( '#visual_composer_content' ).addClass( 'vc_sorting-started' ); | |
$( '.vc_not_inner_content' ).addClass( 'dragging_in' ); | |
}, | |
stop: function ( event, ui ) { | |
$( '#visual_composer_content' ).removeClass( 'vc_sorting-started' ); | |
$( '.dragging_in' ).removeClass( 'dragging_in' ); | |
var tag = ui.item.data( 'element_type' ), | |
parent_tag = ui.item.parent().closest( '[data-element_type]' ).data( 'element_type' ), | |
allowed_container_element = ! _.isUndefined( vc.map[ parent_tag ].allowed_container_element ) ? vc.map[ parent_tag ].allowed_container_element : true; | |
if ( ! vc.check_relevance( parent_tag, tag ) ) { | |
$( this ).sortable( 'cancel' ); | |
} | |
var is_container = _.isObject( vc.map[ tag ] ) && ( ( _.isBoolean( vc.map[ tag ].is_container ) && true === vc.map[ tag ].is_container ) || ! _.isEmpty( vc.map[ tag ].as_parent ) ); | |
if ( is_container && ! (true === allowed_container_element || allowed_container_element === ui.item.data( 'element_type' ).replace( /_inner$/, | |
'' )) ) { | |
$( this ).sortable( 'cancel' ); | |
} | |
$( '.vc_sorting-empty-container' ).removeClass( 'vc_sorting-empty-container' ); | |
}, | |
update: this.updateElementsSorting, | |
over: function ( event, ui ) { | |
var tag = ui.item.data( 'element_type' ), | |
parent_tag = ui.placeholder.closest( '[data-element_type]' ).data( 'element_type' ), | |
allowed_container_element = ! _.isUndefined( vc.map[ parent_tag ].allowed_container_element ) ? vc.map[ parent_tag ].allowed_container_element : true; | |
if ( ! vc.check_relevance( parent_tag, tag ) ) { | |
ui.placeholder.addClass( 'vc_hidden-placeholder' ); | |
return false; | |
} | |
var is_container = _.isObject( vc.map[ tag ] ) && ( ( _.isBoolean( vc.map[ tag ].is_container ) && true === vc.map[ tag ].is_container ) || ! _.isEmpty( vc.map[ tag ].as_parent ) ); | |
if ( is_container && ! (true === allowed_container_element || allowed_container_element === ui.item.data( 'element_type' ).replace( /_inner$/, | |
'' )) ) { | |
ui.placeholder.addClass( 'vc_hidden-placeholder' ); | |
return false; | |
} | |
if ( ! _.isNull( ui.sender ) && ui.sender.length && ! ui.sender.find( '[data-element_type]:visible' ).length ) { | |
ui.sender.addClass( 'vc_sorting-empty-container' ); | |
} | |
ui.placeholder.removeClass( 'vc_hidden-placeholder' ); | |
ui.placeholder.css( { maxWidth: ui.placeholder.parent().width() } ); | |
} | |
} ); | |
return this; | |
}, | |
setNotEmpty: function () { | |
$( '#vc_no-content-helper' ).addClass( 'vc_not-empty' ); | |
}, | |
setIsEmpty: function () { | |
$( '#vc_no-content-helper' ).removeClass( 'vc_not-empty' ) | |
}, | |
checkEmpty: function ( model ) { | |
if ( _.isObject( model ) && false !== model.get( 'parent_id' ) && model.get( 'parent_id' ) != model.id ) { | |
var parent_view = this.views[ model.get( 'parent_id' ) ]; | |
parent_view.checkIsEmpty(); | |
} | |
if ( 0 === Shortcodes.length ) { | |
this.setIsEmpty(); | |
} else { | |
this.setNotEmpty(); | |
} | |
}, | |
switchComposer: function ( e ) { | |
if ( _.isObject( e ) ) { | |
e.preventDefault(); | |
} | |
if ( 'shown' === this.status ) { | |
if ( 'only' !== this.accessPolicy ) { | |
! _.isUndefined( this.$switchButton ) && this.$switchButton.text( window.i18nLocale.main_button_title_backend_editor ); | |
! _.isUndefined( this.$buttonsContainer ) && this.$buttonsContainer.removeClass( 'vc_backend-status' ); | |
} | |
this.close(); | |
this.status = 'closed'; | |
} else { | |
if ( 'only' !== this.accessPolicy ) { | |
! _.isUndefined( this.$switchButton ) && this.$switchButton.text( window.i18nLocale.main_button_title_revert ); | |
! _.isUndefined( this.$buttonsContainer ) && this.$buttonsContainer.addClass( 'vc_backend-status' ); | |
} | |
this.show(); | |
this.status = 'shown'; | |
} | |
}, | |
show: function () { | |
this.$el.show(); | |
this.$post.hide(); | |
this.$vcStatus.val( "true" ); | |
this.navOnScroll(); | |
if ( vc.storage.isContentChanged() ) { | |
vc.app.setLoading(); | |
vc.app.views = {}; | |
// @todo 4.5 why setTimeout not defer? | |
window.setTimeout( function () { | |
Shortcodes.fetch( { reset: true } ); | |
vc.events.trigger( 'backendEditor.show' ); | |
}, 100 ); | |
} | |
}, | |
setLoading: function () { | |
this.setNotEmpty(); | |
this.$loading_block.addClass( 'vc_ajax-loading' ); | |
this.$metablock_content.addClass( 'vc_loading-shortcodes' ); | |
}, | |
close: function () { | |
this.$vcStatus.val( "false" ); | |
this.$el.hide(); | |
if ( _.isObject( window.editorExpand ) ) { | |
_.defer( function () { | |
window.editorExpand.on(); | |
window.editorExpand.on(); // double call fixes "space" in height | |
} ); | |
} | |
this.$post.show(); | |
_.defer( function () { | |
vc.events.trigger( 'backendEditor.close' ); | |
} ); | |
}, | |
checkVcStatus: function () { | |
if ( 'only' === this.accessPolicy || 'true' === this.$vcStatus.val() ) { | |
this.switchComposer(); | |
} | |
}, | |
setNavTop: function () { | |
this.navTop = this.$nav.length && this.$nav.offset().top - 28; | |
}, | |
save: function () { | |
$( '#wpb-save-post' ).text( window.i18nLocale.loading ); | |
$( '#publish' ).click(); | |
}, | |
preview: function () { | |
$( '#post-preview' ).click(); | |
}, | |
navOnScroll: function () { | |
var $win = $( window ); | |
this.$nav = $( '#vc_navbar' ); | |
this.setNavTop(); | |
this.processScroll(); | |
$win.unbind( 'scroll.composer' ).on( 'scroll.composer', this.processScroll ); | |
}, | |
processScroll: function ( e ) { | |
if ( true === this.disableFixedNav ) { | |
this.$nav.removeClass( 'vc_subnav-fixed' ); | |
return; | |
} | |
if ( ! this.navTop || 0 > this.navTop ) { | |
this.setNavTop(); | |
} | |
this.scrollTop = $( window ).scrollTop() + 80; | |
if ( 0 < this.navTop && this.scrollTop >= this.navTop && ! this.isFixed ) { | |
this.isFixed = 1; | |
this.$nav.addClass( 'vc_subnav-fixed' ); | |
} else if ( this.scrollTop <= this.navTop && this.isFixed ) { | |
this.isFixed = 0; | |
this.$nav.removeClass( 'vc_subnav-fixed' ); | |
} | |
}, | |
buildRelevance: function () { | |
vc.shortcode_relevance = {}; | |
_.map( vc.map, function ( object ) { | |
if ( _.isObject( object.as_parent ) && _.isString( object.as_parent.only ) ) { | |
vc.shortcode_relevance[ 'parent_only_' + object.base ] = object.as_parent.only.replace( /\s/, | |
'' ).split( ',' ); | |
} | |
if ( _.isObject( object.as_parent ) && _.isString( object.as_parent.except ) ) { | |
vc.shortcode_relevance[ 'parent_except_' + object.base ] = object.as_parent.except.replace( /\s/, | |
'' ).split( ',' ); | |
} | |
if ( _.isObject( object.as_child ) && _.isString( object.as_child.only ) ) { | |
vc.shortcode_relevance[ 'child_only_' + object.base ] = object.as_child.only.replace( /\s/, | |
'' ).split( ',' ); | |
} | |
if ( _.isObject( object.as_child ) && _.isString( object.as_child.except ) ) { | |
vc.shortcode_relevance[ 'child_except_' + object.base ] = object.as_child.except.replace( /\s/, | |
'' ).split( ',' ); | |
} | |
} ); | |
/** | |
* Check parent/children relationship between two tags | |
* @param tag | |
* @param related_tag | |
* @return boolean - Returns true if relevance is positive | |
*/ | |
vc.check_relevance = function ( tag, related_tag ) { | |
if ( _.isArray( vc.shortcode_relevance[ 'parent_only_' + tag ] ) && ! _.contains( vc.shortcode_relevance[ 'parent_only_' + tag ], | |
related_tag ) ) { | |
return false; | |
} | |
if ( _.isArray( vc.shortcode_relevance[ 'parent_except_' + tag ] ) && _.contains( vc.shortcode_relevance[ 'parent_except_' + tag ], | |
related_tag ) ) { | |
return false; | |
} | |
if ( _.isArray( vc.shortcode_relevance[ 'child_only_' + related_tag ] ) && ! _.contains( vc.shortcode_relevance[ 'child_only_' + related_tag ], | |
tag ) ) { | |
return false; | |
} | |
if ( _.isArray( vc.shortcode_relevance[ 'child_except_' + related_tag ] ) && _.contains( vc.shortcode_relevance[ 'child_except' + related_tag ], | |
tag ) ) { | |
return false; | |
} | |
return true; | |
}; | |
} | |
} ); | |
$( function () { | |
if ( $( '#wpb_visual_composer' ).is( 'div' ) ) { | |
var app = vc.app = new VisualComposer(); | |
'no' !== app.accessPolicy && vc.app.checkVcStatus(); | |
} | |
} ); | |
/** | |
* Called when initial content rendered or when content changed in tinymce | |
*/ | |
Shortcodes.on( 'sync', function ( collection ) { | |
if ( _.isObject( collection ) && ! _.isEmpty( collection.models ) ) { | |
_.each( collection.models, function ( model ) { | |
vc.events.triggerShortcodeEvents( 'sync', model ); | |
} ); | |
} | |
} ); | |
/** | |
* Called when shortcode created | |
*/ | |
Shortcodes.on( 'add', function ( model ) { | |
if ( _.isObject( model ) ) { | |
vc.events.triggerShortcodeEvents( 'add', model ); | |
} | |
} ); | |
})( window.jQuery ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If this not work. replace listed below code at line number at "62" in file location /js_composer/assets/js/backend/composer-view.js
html2element: function(html) { var $template, attributes = {}, template = html; $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) { attributes[attr.name] = attr.value }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent() },
Reference Link : https://stackoverflow.com/questions/36605420/plugin-throwing-typeerror-after-wordpress-4-5-update