Edit File by line

(api => {

[0] Fix | Delete

"use strict";

[1] Fix | Delete

api.Builder=class {

[2] Fix | Delete

static items=[];

[3] Fix | Delete

#lastRow;

[4] Fix | Delete

emptyModules=new Set;

[5] Fix | Delete

constructor(el, rows,customCss) {

[6] Fix | Delete

const cl=el.classList,

[7] Fix | Delete

_this=this,

[8] Fix | Delete

fr = createDocumentFragment();

[9] Fix | Delete

cl.remove('not_editable_builder');

[10] Fix | Delete

cl.add('tb_active_builder','tf_rel');

[11] Fix | Delete

_this.id=el.dataset.postid;

[12] Fix | Delete

el.id='themify_builder_content-' + _this.id;

[13] Fix | Delete

_this.el = el;

[14] Fix | Delete

_this.isSaved=false;

[15] Fix | Delete

_this.customCss=customCss || '';

[16] Fix | Delete

_this.constructor.items.push(_this);

[17] Fix | Delete

for (let i = 0; i < rows.length; ++i) {

[18] Fix | Delete

fr.appendChild((new api.Row(rows[i])).el);

[19] Fix | Delete

}

[20] Fix | Delete

if(api.isVisual){

[21] Fix | Delete

let css_id='tb_custom_css_'+_this.id,

[22] Fix | Delete

builderCss=doc.tfId(css_id);

[23] Fix | Delete

if(builderCss===null){

[24] Fix | Delete

builderCss = createElement('style',{id:css_id});

[25] Fix | Delete

doc.head.appendChild(builderCss);

[26] Fix | Delete

}

[27] Fix | Delete

builderCss.innerHTML = _this.customCss;

[28] Fix | Delete

}

[29] Fix | Delete

_this.el.appendChild(fr);

[30] Fix | Delete

api.Registry.on(_this, 'tb_init', _this.init);

[31] Fix | Delete

}

[32] Fix | Delete

init() {

[33] Fix | Delete

if (api.isVisual) {

[34] Fix | Delete

setTimeout(() => {

[35] Fix | Delete

api.Utils.onResize(true);

[36] Fix | Delete

}, 3000);

[37] Fix | Delete

}

[38] Fix | Delete

this._lastRowBlock();

[39] Fix | Delete

setTimeout(() => {

[40] Fix | Delete

api.Utils.setColumnsCount(this.el.tfClass('module_column'));

[41] Fix | Delete

if (!api.isVisual) {

[42] Fix | Delete

api.GS.init();

[43] Fix | Delete

}

[44] Fix | Delete

this.newRowAvailable();

[45] Fix | Delete

this.insertLayoutButton();

[46] Fix | Delete

api.ModulePageBreak.countModules();

[47] Fix | Delete

if(this.emptyModules.size>0){

[48] Fix | Delete

TF_Notification.showHide('warning',i18n.empty_modules.replace('%s',Array.from(this.emptyModules).join(', ')),10000);

[49] Fix | Delete

}

[50] Fix | Delete

this.emptyModules.clear();

[51] Fix | Delete

}, 1000);

[52] Fix | Delete

}

[53] Fix | Delete

static get(index){

[54] Fix | Delete

index??= this.items.length-1;

[55] Fix | Delete

return this.items[index];

[56] Fix | Delete

}

[57] Fix | Delete

static backendModeHolder(id){

[58] Fix | Delete

return createElement('',{

[59] Fix | Delete

class:'themify_builder themify_builder_content-'+id,

[60] Fix | Delete

'data-postid':id

[61] Fix | Delete

});

[62] Fix | Delete

}

[63] Fix | Delete

destroy(){

[64] Fix | Delete

const _this=this,

[65] Fix | Delete

el=_this.el,

[66] Fix | Delete

cl=el.classList,

[67] Fix | Delete

items = el.querySelectorAll('[data-cid]'),

[68] Fix | Delete

builderItems=_this.constructor.items,

[69] Fix | Delete

builderCss=doc.tfId('tb_custom_css_'+_this.id);

[70] Fix | Delete

api.Registry.off(_this);

[71] Fix | Delete

_this.emptyModules.clear();

[72] Fix | Delete

for (let i = items.length-1; i>-1; --i) {

[73] Fix | Delete

api.Registry.get(items[i].dataset.cid)?.destroy(true);

[74] Fix | Delete

}

[75] Fix | Delete

for(let i=builderItems.length-1;i>-1;--i){

[76] Fix | Delete

if(builderItems[i]===_this){

[77] Fix | Delete

builderItems[i]=null;

[78] Fix | Delete

builderItems.splice(i,1);

[79] Fix | Delete

break;

[80] Fix | Delete

}

[81] Fix | Delete

}

[82] Fix | Delete

el.replaceChildren();

[83] Fix | Delete

el.removeAttribute('id');

[84] Fix | Delete

cl.remove('tb_active_builder','tf_rel');

[85] Fix | Delete

cl.add('not_editable_builder');

[86] Fix | Delete

builderCss?.remove();

[87] Fix | Delete

}

[88] Fix | Delete

toJSON(saving) {

[89] Fix | Delete

const option_data = [],

[90] Fix | Delete

rows = this.el.children,

[91] Fix | Delete

checkNotEmpty=cols=>{

[92] Fix | Delete

return cols.length>1 || cols[0].modules?.length>0 || (cols[0].styling && Object.keys(cols[0].styling).length>0);

[93] Fix | Delete

};

[94] Fix | Delete

for (let i = 0; i < rows.length; ++i) {

[95] Fix | Delete

if (rows[i].classList.contains('module_row')) {

[96] Fix | Delete

let data = api.Utils.getRowSettings(rows[i], 'row', saving);

[97] Fix | Delete

if (!saving || (data.styling && Object.keys(data.styling).length>0) || (data.cols && checkNotEmpty(data.cols))) {

[98] Fix | Delete

option_data.push(data);

[99] Fix | Delete

}

[100] Fix | Delete

}

[101] Fix | Delete

}

[102] Fix | Delete

return option_data;

[103] Fix | Delete

}

[104] Fix | Delete

removeLayoutButton() {

[105] Fix | Delete

for (let importBtn = this.el.tfClass('tb_import_layout_button'),i = importBtn.length - 1; i > -1; --i) {

[106] Fix | Delete

importBtn[i].remove();

[107] Fix | Delete

}

[108] Fix | Delete

}

[109] Fix | Delete

insertLayoutButton() {

[110] Fix | Delete

if (api.isGSPage !== true && this.#lastRow) {

[111] Fix | Delete

this.removeLayoutButton();

[112] Fix | Delete

const row = this.el.tfClass('module_row');

[113] Fix | Delete

if (row.length < 2 && !row[0]?.tfClass('active_module')[0]) {

[114] Fix | Delete

const importBtn = createElement('a','tb_import_layout_button',i18n.text_import_layout_button);

[115] Fix | Delete

importBtn.tfOn(_CLICK_, e => {

[116] Fix | Delete

e.stopPropagation();

[117] Fix | Delete

Themify.triggerEvent(api.ToolBar.el.tfClass('load_layout')[0],e.type);

[118] Fix | Delete

},{passive:true}).href='javascript:;';

[119] Fix | Delete

this.#lastRow.getRootNode().host.before(importBtn);

[120] Fix | Delete

}

[121] Fix | Delete

}

[122] Fix | Delete

}

[123] Fix | Delete

newRowAvailable(ignore) {

[124] Fix | Delete

if (api.isGSPage !== true) {

[125] Fix | Delete

const child = this.el.children,

[126] Fix | Delete

len = ignore===true?0:child.length;

[127] Fix | Delete

let row;

[128] Fix | Delete

if (len !== 0) {

[129] Fix | Delete

for (let i = len - 1; i > -1; --i) {

[130] Fix | Delete

if (child[i].tfClass('active_module')[0]===undefined && child[i].classList.contains('module_row')) {

[131] Fix | Delete

row=api.Registry.get(child[i].dataset.cid);

[132] Fix | Delete

break;

[133] Fix | Delete

}

[134] Fix | Delete

}

[135] Fix | Delete

}

[136] Fix | Delete

if (!row) {

[137] Fix | Delete

row = new api.Row(api.Utils.grid(1)[0]);

[138] Fix | Delete

api.Utils.setColumnsCount(row.el.tfClass('module_column'));

[139] Fix | Delete

if(this.#lastRow){

[140] Fix | Delete

this.#lastRow.getRootNode().host.before(row.el);

[141] Fix | Delete

}else{

[142] Fix | Delete

this.el.appendChild(row.el);

[143] Fix | Delete

}

[144] Fix | Delete

}

[145] Fix | Delete

return row;

[146] Fix | Delete

}

[147] Fix | Delete

}

[148] Fix | Delete

_lastRowBlock(){

[149] Fix | Delete

if(api.isGSPage !== true && (!this.#lastRow || !this.el.contains(this.#lastRow.getRootNode().host))){

[150] Fix | Delete

const root = createElement('',{class:'tb_disable_sorting tf_w tf_hidden',id:'tb_last_row_add_btn'}),

[151] Fix | Delete

tpl=doc.tfId('tmpl-last_row_add_btn');

[152] Fix | Delete

root.attachShadow({

[153] Fix | Delete

mode:'open'

[154] Fix | Delete

}).appendChild(tpl.content.cloneNode(true));

[155] Fix | Delete

this.el.appendChild(root);

[156] Fix | Delete

this.#lastRow = root.shadowRoot.tfId('container');

[157] Fix | Delete

[158] Fix | Delete

Themify.on('tb_toolbar_loaded', ()=>{

[159] Fix | Delete

setTimeout(()=>{

[160] Fix | Delete

[161] Fix | Delete

const fragment=createDocumentFragment();

[162] Fix | Delete

fragment.append(api.ToolBar.getBaseCss(),api.MainPanel.el.getRootNode().querySelector('#module_drag_grids_style').cloneNode(true));

[163] Fix | Delete

root.shadowRoot.prepend(fragment);

[164] Fix | Delete

root.classList.remove('tf_hidden');

[165] Fix | Delete

setTimeout(()=>{

[166] Fix | Delete

this.#lastRow.appendChild(doc.tfId('tmpl-last_row_expand').content.cloneNode(true));

[167] Fix | Delete

},700);

[168] Fix | Delete

this.#lastRow.tfOn(_CLICK_, function(e) {

[169] Fix | Delete

e.stopPropagation();

[170] Fix | Delete

const target = e.target,

[171] Fix | Delete

grid = target.closest('.tb_grid'),

[172] Fix | Delete

cl=this.classList;

[173] Fix | Delete

if (grid !== null) {

[174] Fix | Delete

cl.add('hide');

[175] Fix | Delete

api.MainPanel.newGrid(grid.dataset.slug,false);

[176] Fix | Delete

}

[177] Fix | Delete

else if (target.closest('.block')) {

[178] Fix | Delete

const host=this.getRootNode().host;

[179] Fix | Delete

host.classList.remove('clicked');

[180] Fix | Delete

cl.add('hide');

[181] Fix | Delete

api.SmallPanel.show(host);

[182] Fix | Delete

}

[183] Fix | Delete

else if (target.classList.contains('add_btn')) {

[184] Fix | Delete

cl.remove('hide');

[185] Fix | Delete

}

[186] Fix | Delete

},{passive:true});

[187] Fix | Delete

[188] Fix | Delete

},500);

[189] Fix | Delete

[190] Fix | Delete

},true,api.ToolBar?.isLoaded===true);

[191] Fix | Delete

}

[192] Fix | Delete

}

[193] Fix | Delete

async reLoad(json,merge,reset=true) {

[194] Fix | Delete

if(merge===true){

[195] Fix | Delete

await api.LightBox.save();

[196] Fix | Delete

}

[197] Fix | Delete

else{

[198] Fix | Delete

api.LightBox.close();

[199] Fix | Delete

}

[200] Fix | Delete

const builder=this.el;

[201] Fix | Delete

let data = json.builder_data || json,

[202] Fix | Delete

customCss=json.custom_css || '',

[203] Fix | Delete

isMainBuilder=!api.isVisual || builder.parentNode.closest('.themify_builder')===null;//is main builder

[204] Fix | Delete

data=api.Helper.correctBuilderData(data);

[205] Fix | Delete

if(merge===true){

[206] Fix | Delete

data= this.toJSON().concat(data);

[207] Fix | Delete

customCss=this.customCss+customCss;

[208] Fix | Delete

}

[209] Fix | Delete

else if(isMainBuilder===true && reset===true){

[210] Fix | Delete

api.GS.reset();

[211] Fix | Delete

}

[212] Fix | Delete

[213] Fix | Delete

[214] Fix | Delete

if (json.used_gs !== undefined) {

[215] Fix | Delete

//gs data in old versions save as nested array

[216] Fix | Delete

for(let i in json.used_gs){

[217] Fix | Delete

let gs=json.used_gs[i];

[218] Fix | Delete

if(gs.data?.[0]){

[219] Fix | Delete

let type=gs.type,

[220] Fix | Delete

st=api.Helper.cloneObject(gs.data),

[221] Fix | Delete

uniqId=api.Helper.generateUniqueID();

[222] Fix | Delete

gs.data=[{

[223] Fix | Delete

element_id:'row'+uniqId

[224] Fix | Delete

}];

[225] Fix | Delete

if(type!=='row' && type!=='subrow'){

[226] Fix | Delete

gs.data[0].cols=[{

[227] Fix | Delete

element_id: 'col'+uniqId

[228] Fix | Delete

}];

[229] Fix | Delete

if(type==='column'){

[230] Fix | Delete

gs.data[0].cols[0].styling=st;

[231] Fix | Delete

}

[232] Fix | Delete

else{

[233] Fix | Delete

gs.data[0].cols[0].modules=[{

[234] Fix | Delete

mod_name:type,

[235] Fix | Delete

mod_settings:st

[236] Fix | Delete

}];

[237] Fix | Delete

}

[238] Fix | Delete

}

[239] Fix | Delete

else{

[240] Fix | Delete

gs.data[0].styling=st;

[241] Fix | Delete

}

[242] Fix | Delete

}

[243] Fix | Delete

else{

[244] Fix | Delete

delete json.used_gs[i];

[245] Fix | Delete

}

[246] Fix | Delete

}

[247] Fix | Delete

api.GS.styles = {...api.GS.styles,...json.used_gs};

[248] Fix | Delete

}

[249] Fix | Delete

[250] Fix | Delete

this.destroy();

[251] Fix | Delete

const newBuilder = new api.Builder(builder,data,customCss);

[252] Fix | Delete

if(reset===true){

[253] Fix | Delete

api.undoManager.reset();

[254] Fix | Delete

}

[255] Fix | Delete

let settings;

[256] Fix | Delete

if (isMainBuilder===false) {

[257] Fix | Delete

settings = [];

[258] Fix | Delete

for (let items = newBuilder.el.querySelectorAll('[data-cid]'),i = items.length-1; i>-1; --i) {

[259] Fix | Delete

settings.push(items[i].dataset.cid);

[260] Fix | Delete

}

[261] Fix | Delete

}

[262] Fix | Delete

else if (api.isVisual) {

[263] Fix | Delete

api.liveStylingInstance.reset();

[264] Fix | Delete

}

[265] Fix | Delete

if (api.isVisual) {

[266] Fix | Delete

await api.bootstrap(settings, json.used_gs,false);

[267] Fix | Delete

await api.setCss(newBuilder.toJSON());

[268] Fix | Delete

await api.correctColumnPaddings();

[269] Fix | Delete

}

[270] Fix | Delete

api.Registry.trigger(newBuilder,'tb_init');

[271] Fix | Delete

api.Utils.runJs(newBuilder.el, null, true);

[272] Fix | Delete

api.Spinner.showLoader('done');

[273] Fix | Delete

}

[274] Fix | Delete

async save() {

[275] Fix | Delete

const saveBtnCl=api.ToolBar.el.tfClass('save_wrap')[0].classList;

[276] Fix | Delete

try{

[277] Fix | Delete

if(saveBtnCl.contains('disabled')){

[278] Fix | Delete

throw 'isWorking';

[279] Fix | Delete

}

[280] Fix | Delete

saveBtnCl.add('disabled');

[281] Fix | Delete

await api.LightBox.save();

[282] Fix | Delete

[283] Fix | Delete

api.Spinner.showLoader();

[284] Fix | Delete

const allImages=api.Utils.getAllImages();

[285] Fix | Delete

try{//if there is an error don't break builder saving

[286] Fix | Delete

await api.Utils.importThemifyImages(allImages.get('themify'));//upload images and change urls in the settings

[287] Fix | Delete

}

[288] Fix | Delete

catch(e){

[289] Fix | Delete

[290] Fix | Delete

}

[291] Fix | Delete

const id = this.id,

[292] Fix | Delete

data = this.toJSON(true),

[293] Fix | Delete

customCss=this.customCss || '';

[294] Fix | Delete

let res,

[295] Fix | Delete

localImages=allImages.get('local');

[296] Fix | Delete

localImages=localImages.size>0?JSON.stringify(Array.from(localImages)):'';

[297] Fix | Delete

await api.GS.setImport(api.GS.styles, null, true);

[298] Fix | Delete

let builder=JSON.stringify(data),

[299] Fix | Delete

success=false,

[300] Fix | Delete

ajaxData={

[301] Fix | Delete

sourceEditor: api.isVisual ? 'frontend' : 'backend',

[302] Fix | Delete

action:'tb_save_data',

[303] Fix | Delete

mode:'gzip',

[304] Fix | Delete

custom_css:customCss

[305] Fix | Delete

};

[306] Fix | Delete

try{

[307] Fix | Delete

const prms=[api.Helper.gzip(builder)];

[308] Fix | Delete

if(localImages){

[309] Fix | Delete

prms.push(api.Helper.gzip(localImages));

[310] Fix | Delete

}

[311] Fix | Delete

const gzip=await Promise.all(prms);

[312] Fix | Delete

ajaxData.data=gzip[0];

[313] Fix | Delete

if(gzip[1]){

[314] Fix | Delete

ajaxData.images=gzip[1];

[315] Fix | Delete

}

[316] Fix | Delete

res=await api.LocalFetch(ajaxData);

[317] Fix | Delete

if (!res.success) {

[318] Fix | Delete

throw '';

[319] Fix | Delete

}

[320] Fix | Delete

success=true;

[321] Fix | Delete

}

[322] Fix | Delete

catch(e){

[323] Fix | Delete

[324] Fix | Delete

}

[325] Fix | Delete

if(success===false){

[326] Fix | Delete

try{

[327] Fix | Delete

delete ajaxData.mode;

[328] Fix | Delete

ajaxData.data=builder;

[329] Fix | Delete

if(localImages){

[330] Fix | Delete

ajaxData.images=localImages;

[331] Fix | Delete

}

[332] Fix | Delete

builder=null;

[333] Fix | Delete

res=await api.LocalFetch(ajaxData);

[334] Fix | Delete

if (!res.success) {

[335] Fix | Delete

throw res;

[336] Fix | Delete

}

[337] Fix | Delete

success=true;

[338] Fix | Delete

}

[339] Fix | Delete

catch(e){

[340] Fix | Delete

[341] Fix | Delete

}

[342] Fix | Delete

if(success===false){

[343] Fix | Delete

try{

[344] Fix | Delete

/* new attempt: send the Builder data as binary file to server */

[345] Fix | Delete

ajaxData.data=new Blob( [ ajaxData.data ], { type: 'application/json' });

[346] Fix | Delete

res=await api.LocalFetch(ajaxData);

[347] Fix | Delete

if (!res.success) {

[348] Fix | Delete

throw res;

[349] Fix | Delete

}

[350] Fix | Delete

}

[351] Fix | Delete

finally{

[352] Fix | Delete

}

[353] Fix | Delete

}

[354] Fix | Delete

}

[355] Fix | Delete

res=res.data;

[356] Fix | Delete

const savedCss=await api.Utils.saveCss(data, customCss, id);

[357] Fix | Delete

res.css_file=savedCss.css_file;

[358] Fix | Delete

api.Spinner.showLoader('done');

[359] Fix | Delete

Themify.trigger('themify_builder_save_data', res);

[360] Fix | Delete

this.isSaved=true;

[361] Fix | Delete

return res;

[362] Fix | Delete

}

[363] Fix | Delete

catch(e){

[364] Fix | Delete

await Promise.all([api.Spinner.showLoader('error'),TF_Notification.showHide('error',e.status===403?i18n.errorSave403:i18n.errorSaveBuilder,5000)]);

[365] Fix | Delete

throw e;

[366] Fix | Delete

}

[367] Fix | Delete

finally{

[368] Fix | Delete

saveBtnCl.remove('disabled');

[369] Fix | Delete

}

[370] Fix | Delete

}

[371] Fix | Delete

};

[372] Fix | Delete

[373] Fix | Delete

})(tb_app);

[374] Fix | Delete