: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
Vue.component('amp-pagebuilder-modal', {
template: '#amp-pagebuilder-modal-template',
document.body.addEventListener('keyup', e => {
this.hidePageBuilderPopUp();
currentLayoutData: app.mainContent,
modalCrrentTab: 'layout',
ajaxurl: amppb_panel_options.ajaxUrl,
showsavedLayouts :amppb_panel_options.savedLayouts,
importLayoutfromFile: '',
ampb_script_textarea: (app.mainContent.settingdata['scripts_data']? app.mainContent.settingdata['scripts_data']: ''),
ampb_style_textarea: (app.mainContent.settingdata['style_data']? app.mainContent.settingdata['style_data']:''),
hidePageBuilderPopUp: function(event){
settingShowTabs: function(key){
savePagebuilderSettings:function(currentLayoutData){
//app.mainContent = currentLayoutData;
app.mainContent.settingdata['scripts_data'] = this.ampb_script_textarea;
app.mainContent.settingdata['style_data'] = this.ampb_style_textarea;
this.hidePageBuilderPopUp();
removeSavedLayout: function(postId){
action: 'amppb_remove_saved_layout_data',
verify_nonce: amppb_panel_options.secure_nonce
this.$http.post(amppb_panel_options.ajaxUrl+'?action=amppb_remove_saved_layout_data',
).then(function(response){
if(response.status=="200"){
this.layoutMsg = "Layout removed successfully!";
this.showsavedLayouts = response.data;
amppb_panel_options.savedLayouts = this.showsavedLayouts;
this.save_layout = {name:"",url:""};
else if(response.status=="404"){
this.layoutMsg = "Try Again";
}else if(response.status=="403"){
this.layoutMsg = "Sorry! You don't have permission to delete the layout.";
alert('connection not establish');
savePagebuildercustomLayout: function(event){
if(!this.save_layout.name && this.save_layout.name==""){
alert("Please enter name of layout");
action: 'amppb_save_layout_data',
layoutname:this.save_layout.name,
layoutdata: JSON.stringify(this.currentLayoutData),
verify_nonce: amppb_panel_options.secure_nonce
this.$http.post(amppb_panel_options.ajaxUrl+'?action=amppb_save_layout_data',
).then(function(response){
//var somtest = response.json(response.body);
if(response.status="200"){
this.showsavedLayouts = response.data;
amppb_panel_options.savedLayouts = this.showsavedLayouts
this.save_layout = {name:"",url:""};
alert('connection not establish');
layoutFileSelected: function(event){
var currentComponent = this;
var filename = event.target.name;
var files = event.target.files;
var fileCount = event.target.files.length;
var reader = new FileReader();
reader.readAsText(rawFile, "UTF-8");
reader.onload = function (evt) {
currentComponent.importLayoutfromFile = evt.target.result;
reader.onerror = function (evt) {
alert("error reading file");
replacelayoutFromSelectedFile :function(){
var response = confirm("Replace current layout. \n Do you want to import new layout?");
app.mainContent = JSON.parse(this.importLayoutfromFile);
app.call_default_functions();
this.hidePageBuilderPopUp();
importLayout: function(event){
var response = confirm("Replace current layout. \n Do you want to import new layout?");
app.mainContent = JSON.parse(event.target.getAttribute('data-layout'));
app.call_default_functions();
this.hidePageBuilderPopUp();
viewSpacialLayouts: function(event){
this.innerLayouts = JSON.parse(event.target.getAttribute('data-info'));
this.innerLayoutsHeading = event.target.getAttribute('data-heading');
loadLayOutFolder: function(){
this.innerLayoutsHeading = '';
Vue.component('amp-pagebuilder-module-modal', {
template: '#amp-pagebuilder-module-modal-template',
modalcontent: app.modalcontent,
editModuleTempTitle: false,
mounted: function () {//On ready State for component
document.body.addEventListener('keyup', e => {
repeaterAcoordian: function(event){
var repeatHead = jQuery(event.target.parentElement).find("div.amp-accordion-head").find('span.amp-accordion-label');
var repeatContents = jQuery(event.target.parentElement).find("div.amp-accordion-content");
if(repeatContents.hasClass('active')){
repeatContents.removeClass('active');
repeatContents.addClass('hide');
repeatHead.html('(Show)');
jQuery(event.target.parentElement).removeClass("amp-repeat-active");
repeatContents.removeClass('hide');
repeatContents.addClass('active');
jQuery(event.target.parentElement).addClass("amp-repeat-active");
repeatHead.html('(Hide)');
showhideAccordian:function(event){
jQuery(event.target).parent(".amp-accordion-head").click();
hideModulePopUp: function(event){
app.showmoduleModal = false;
this.modalcontent.default_tab=key;
removeModule: function(){
var response = confirm("Do you want to delete Module? ");
app.mainContent.rows.forEach(function(rowData, rowKey){
if(rowData.id==app.modalTypeData.containerId){
if(app.modalType=='module'){
rowData.cell_data.forEach(function(moduleData, moduleKey){
if(moduleData.cell_id==app.modalTypeData.moduleId){
Vue.delete( rowData.cell_data, moduleKey );
app.call_default_functions();
saveModulePopupdata: function(fields,repeater){
if(app.stopModuleModalClose==true){
alert('Please wait till load image.');
//Save Values to main content
app.mainContent.rows.forEach(function(rowData, rowKey){
if(rowData.id==app.modalTypeData.containerId){
if(app.modalType=='module'){
rowData.cell_data.forEach(function(moduleData, moduleKey){
if(moduleData.cell_id==app.modalTypeData.moduleId){
fields.forEach(function(fieldData,fieldKey){
Vue.set( moduleData, fieldData.name, fieldData.default );
if(fieldData[fieldData.name+"_image_data"]){
Vue.set( moduleData, fieldData.name+"_image_data", fieldData[fieldData.name+"_image_data"] );
if(app.modalcontent.repeater){
moduleData.repeater = [];
app.modalcontent.repeater.showFields.forEach(function(repeatWrapper,repKey){
repeatWrapper.forEach(function(repeatField,repFieldKey){
var stringToArray = repeatField.name.split("_");
var arrayToString = stringToArray.join('_');
var finalString = arrayToString+"_"+repKey;
repeaterData[finalString] = repeatField.default;
if(repeatField[finalString+"_image_data"]){
repeaterData[finalString+"_image_data"] = repeatField[finalString+"_image_data"];
repeaterData['index'] = (repKey+1);
moduleData.repeater.push(repeaterData);
}else if(app.modalType=='rowSetting'){
fields.forEach(function(fieldData,fieldKey){
a[fieldData.name] = fieldData.default;
if(fieldData[fieldData.name+"_image_data"]){
a[fieldData.name+"_image_data"] = fieldData[fieldData.name+"_image_data"];
Vue.set( rowData, 'data', a );
app.call_default_functions();
duplicateRepeaterField: function(repeater){
//app.modalcontent.repeater.showFields.push(repeater.fields);
//Vue.set(app.modalcontent.repeater,'showFields',repeater.fields);
var allRepeaterFileds = JSON.parse(JSON.stringify(app.modalcontent.repeater.fields));
totalFields = app.modalcontent.repeater.showFields.length;
var lastName = app.modalcontent.repeater.showFields[totalFields-1][0]['name'];
var lastNamePieces = lastName.split("_");
var nextFieldCount = parseInt(lastNamePieces[lastNamePieces.length-1])+1;
allRepeaterFileds.forEach(function(newFields,newKey){
newFields.name = newFields.name+'_'+nextFieldCount;
app.modalcontent.repeater.showFields.push(allRepeaterFileds);
removeRepeaterSection:function(key,repeater){
Vue.delete( app.modalcontent.repeater.showFields, key );
repeaterShowHideCheck:function(modalcontent){
if(modalcontent.repeater.required){
var requiredCondition = modalcontent.repeater.required;
app.modalcontent.fields.forEach(function(maindata, key){
if(requiredCondition[maindata.name]){
if( maindata.default==requiredCondition[maindata.name]){
repeater_rows_moved: function(evt){
if(evt && evt.type=='end'){
editModuleTitle: function(modalcontent){
this.editModuleTempTitle = modalcontent.cell_identity_name;
saveModuleTitle: function(modalcontent){
app.mainContent.rows.forEach(function(rowData, rowKey){
if(rowData.id==app.modalTypeData.containerId){
if(app.modalType=='module'){
rowData.cell_data.forEach(function(moduleData, moduleKey){
if(moduleData.cell_id==app.modalTypeData.moduleId){
//app.modalcontent.cell_identity_name = modalcontent.cell_identity_name
Vue.set( moduleData, 'cell_identity_name', modalcontent.cell_identity_name );
this.editModuleTempTitle = false;
cancleModuleTitle: function(modalcontent){
app.modalcontent.cell_identity_name = this.editModuleTempTitle;
this.editModuleTempTitle = false;
Vue.component('module-data',{
template: '#module-data-template',
props: ['cell','cellcontainer','modulekey'],
showModulePopUp: function(event){
openModulePopup(event,'module');
duplicateModule: function(event){
currentModuleId = parseInt( event.currentTarget.getAttribute('data-module_id') );
currentcontainerId = parseInt( event.currentTarget.getAttribute('data-container_id') );
var updateRowKey = ''; var updateModuleKey = ''; var newDuplicateData = {};
app.mainContent.rows.forEach(function(rowData, rowKey){
if(rowData.id == currentcontainerId){
rowData.cell_data.forEach(function(moduleData, moduleKey){
if(moduleData.cell_id==currentModuleId){
var modulesid = parseInt(app.mainContent.totalmodules);
newDuplicateData = _.clone(moduleData);
newDuplicateData.cell_id = modulesid;
updateModuleKey = moduleKey;
app.mainContent.totalmodules = modulesid+1;
app.mainContent.rows[updateRowKey].cell_data.splice(updateModuleKey, 0,newDuplicateData);
app.mainContent.rows[updateRowKey].cell_data.push(newDuplicateData);
app.re_process_rawdata();
}//duplicateModule closed
function openModulePopup(event,type){
app.showmoduleModal = true;
popupContent = event.currentTarget.getAttribute('data-popupContent');
app.modalcontent = JSON.parse(popupContent);
currentModuleId = event.currentTarget.getAttribute('data-module_id');
currentcontainerId = event.currentTarget.getAttribute('data-container_id');
'moduleId': currentModuleId,
'containerId': currentcontainerId
//Save Values to main content
app.mainContent.rows.forEach(function(rowData, rowKey){
if(rowData.id==currentcontainerId){
rowData.cell_data.forEach(function(moduleData, moduleKey){
if(moduleData.cell_id==currentModuleId){
//app.modalcontent.repeater.showFields.forEach
app.modalcontent.cell_identity_name = moduleData.cell_identity_name;
app.modalcontent.fields.forEach(function(fieldData,fieldKey){
//if(moduleData[fieldData.name] && moduleData[fieldData.name]!=''){
if(fieldData.name in moduleData){
if(typeof moduleData[fieldData.name] !='undefined'){
var userValues = moduleData[fieldData.name];
var userValues = fieldData.default;
var userValues = fieldData.default;
if('object' != typeof(userValues)){
userValues = decodeURIComponent(encodeURIComponent(userValues));
if(fieldData['type']=='color-picker'){
//console.log(app.modalcontent.repeater);
app.modalcontent.repeater.showFields = [];
moduleData.repeater.forEach(function(savedREPValue,savedkey){
var allRepeaterFileds = JSON.parse(JSON.stringify(app.modalcontent.repeater.fields));
allRepeaterFileds.forEach(function(newFields,newKey){
newFields.name = newFields.name+'_'+savedkey;
//if(savedREPValue[newFields.name]){
//console.log(savedREPValue[newFields.name],newFields.name)
if(typeof savedREPValue[newFields.name] !='undefined'){
newFields.default = savedREPValue[newFields.name];
app.modalcontent.repeater.showFields.push(Vue.util.extend([], allRepeaterFileds));
}else if(app.modalcontent.repeater){//Added support for pre-build layouts for repeater
if(app.modalcontent.repeater && app.modalcontent.repeater.fields.length > 0){
app.modalcontent.repeater.fields.forEach(function(module,key){
repeaterArray[module.name+'_0'] = module.default;
moduleData.repeater = [];
moduleData.repeater.push(repeaterArray);
}else if(type=='rowSetting'){
currentcontainerId = event.currentTarget.getAttribute('data-container_id');
'containerId': currentcontainerId
//Save Values to main content
app.mainContent.rows.forEach(function(rowData, rowKey){
if(rowData.id==currentcontainerId){
app.modalcontent.fields.forEach(function(fieldData,fieldKey){
if(rowData.data[fieldData.name] && rowData.data[fieldData.name]!=''){
Vue.set( fieldData, 'default', rowData.data[fieldData.name] );