Edit File by line

e.stopImmediatePropagation();

[500] Fix | Delete

e.preventDefault();

[501] Fix | Delete

}

[502] Fix | Delete

obj.save();

[503] Fix | Delete

const v = input.value.trim() || '',

[504] Fix | Delete

style = doc.tfId(css_id),

[505] Fix | Delete

err = topWindow.CodeMirror.lint.css(v, {

[506] Fix | Delete

errors: 1

[507] Fix | Delete

});

[508] Fix | Delete

if (err?.length > 0) {

[509] Fix | Delete

const answer = await api.LiteLightBox.confirm({

[510] Fix | Delete

msg: themifyBuilder.i18n.broken_code.replace('%s','CSS')

[511] Fix | Delete

});

[512] Fix | Delete

if ( answer === 'no' ) {

[513] Fix | Delete

return;

[514] Fix | Delete

}

[515] Fix | Delete

}

[516] Fix | Delete

if (style) {

[517] Fix | Delete

style.innerHTML = v;

[518] Fix | Delete

}

[519] Fix | Delete

builder.customCss=v;

[520] Fix | Delete

[521] Fix | Delete

api.LightBox.close();

[522] Fix | Delete

};

[523] Fix | Delete

input.value = builder.customCss || '';

[524] Fix | Delete

obj=await api.Helper.codeMirror(input,'css',{autofocus:true} );

[525] Fix | Delete

obj.editor.on('change', cm=> {

[526] Fix | Delete

const v = cm.getValue().trim();

[527] Fix | Delete

if (api.isVisual) {

[528] Fix | Delete

let el = doc.tfId(css_id);

[529] Fix | Delete

if (el === null) {

[530] Fix | Delete

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

[531] Fix | Delete

doc.head.appendChild(el);

[532] Fix | Delete

}

[533] Fix | Delete

el.innerHTML = v;

[534] Fix | Delete

}

[535] Fix | Delete

});

[536] Fix | Delete

[537] Fix | Delete

[538] Fix | Delete

saveBtn.tfOn(_CLICK_,save);

[539] Fix | Delete

Themify.on('tb_save_lb',save)

[540] Fix | Delete

.on('themify_builder_lightbox_close', () => {

[541] Fix | Delete

lb.classList.remove('tb_custom_css_lightbox');

[542] Fix | Delete

saveBtn.tfOff(_CLICK_,save,{once:true});

[543] Fix | Delete

Themify.off('tb_save_lb',save);

[544] Fix | Delete

if(api.Builder.get(1)===undefined){

[545] Fix | Delete

this.el.tfClass('custom_css')[0].classList.toggle('active',!!builder.customCss);

[546] Fix | Delete

}

[547] Fix | Delete

else{

[548] Fix | Delete

target.classList.remove('active');

[549] Fix | Delete

}

[550] Fix | Delete

obj.destroy();

[551] Fix | Delete

input=saveBtn=obj=builder=null;

[552] Fix | Delete

},true);

[553] Fix | Delete

}

[554] Fix | Delete

catch(e){

[555] Fix | Delete

[556] Fix | Delete

}

[557] Fix | Delete

[558] Fix | Delete

async previewBuilder(e) {

[559] Fix | Delete

const item = e.item,

[560] Fix | Delete

builder=api.Builder.get().el;

[561] Fix | Delete

item.classList.toggle('active');

[562] Fix | Delete

api.isPreview = !api.isPreview;

[563] Fix | Delete

if(api.isPreview){

[564] Fix | Delete

if(!api.isVisual && isFrontend){

[565] Fix | Delete

await this.backendMode(e);

[566] Fix | Delete

}

[567] Fix | Delete

}

[568] Fix | Delete

else{

[569] Fix | Delete

topWindowDoc.tfId('tb_iframe').style.height = '';

[570] Fix | Delete

}

[571] Fix | Delete

bodyCl.toggle('tb_preview_only');

[572] Fix | Delete

bodyCl.toggle('themify_builder_active');

[573] Fix | Delete

topBodyCl.toggle('tb_preview_only');

[574] Fix | Delete

api.ToolBar.el.classList.toggle('tb_preview_only');

[575] Fix | Delete

api.MainPanel.el.classList.toggle('tb_preview_only');

[576] Fix | Delete

if (api.isPreview) {

[577] Fix | Delete

for (let row_inner = builder.tfClass('row_inner'),i = row_inner.length - 1; i > -1; --i) {

[578] Fix | Delete

if (row_inner[i].childElementCount === 1 && row_inner[i].tfClass('active_module')[0] === undefined) {

[579] Fix | Delete

let column = row_inner[i].tfClass('module_column')[0];

[580] Fix | Delete

if (column !== undefined) {

[581] Fix | Delete

let mcolumn = Registry.get(column.dataset.cid);

[582] Fix | Delete

if (mcolumn && Object.keys(mcolumn.get('styling')).length === 0) {

[583] Fix | Delete

let row = row_inner[i].closest('.module_row'),

[584] Fix | Delete

mrow = Registry.get(row.dataset.cid);

[585] Fix | Delete

if (mrow && Object.keys(mrow.get('styling')).length === 0) {

[586] Fix | Delete

row.classList.add('tf_hide');

[587] Fix | Delete

}

[588] Fix | Delete

}

[589] Fix | Delete

}

[590] Fix | Delete

[591] Fix | Delete

}

[592] Fix | Delete

}

[593] Fix | Delete

}

[594] Fix | Delete

else {

[595] Fix | Delete

for (let rows = builder.querySelectorAll('.tf_hide.module_row'),i = rows.length - 1; i > -1; --i) {

[596] Fix | Delete

rows[i].classList.remove('tf_hide');

[597] Fix | Delete

}

[598] Fix | Delete

}

[599] Fix | Delete

[600] Fix | Delete

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

[601] Fix | Delete

let item=items[i];

[602] Fix | Delete

if(isFrontend){

[603] Fix | Delete

Registry.get(items[i].dataset.cid)?.previewVisibility();

[604] Fix | Delete

}

[605] Fix | Delete

item.draggable=!api.isPreview;

[606] Fix | Delete

}

[607] Fix | Delete

[608] Fix | Delete

[609] Fix | Delete

_setPopularDevices(){

[610] Fix | Delete

const bpPoints = themify_vars.breakpoints,

[611] Fix | Delete

mobile={

[612] Fix | Delete

ip7pl: [414, 736],

[613] Fix | Delete

ipxr: [414, 896],

[614] Fix | Delete

ipxs: [375, 812],

[615] Fix | Delete

ip8: [375, 667],

[616] Fix | Delete

glxs9pl: [412, 846],

[617] Fix | Delete

glxs8pl: [360, 740],

[618] Fix | Delete

glxs7: [360, 640],

[619] Fix | Delete

huawp20: [360, 748],

[620] Fix | Delete

huawp10: [360, 640]

[621] Fix | Delete

[622] Fix | Delete

tablet={

[623] Fix | Delete

nexus9: [768, 1024],

[624] Fix | Delete

ipadm : [768, 1024],

[625] Fix | Delete

glxyt10: [800, 1280],

[626] Fix | Delete

ip_air : [820, 1180],

[627] Fix | Delete

ippro : [1024, 1366]

[628] Fix | Delete

[629] Fix | Delete

wrap=this.el.tfClass('breakpoint_switcher')[0];

[630] Fix | Delete

for (let bp in bpPoints) {

[631] Fix | Delete

if(bp!=='desktop'){

[632] Fix | Delete

let ul=createElement('ul',{class:'submenu devices tf_hide tf_abs_t',tabindex:-1}),

[633] Fix | Delete

first=createElement('li','','Breakpoint Settings'),

[634] Fix | Delete

val=bpPoints[bp],

[635] Fix | Delete

devices = 'mobile' === bp ? mobile : tablet;

[636] Fix | Delete

first.dataset.width='mobile' === bp ? val :val[1];

[637] Fix | Delete

if(bp!=='mobile'){

[638] Fix | Delete

first.dataset.height='tablet' === bp?bpPoints.tablet_landscape[1]:val[0];

[639] Fix | Delete

}

[640] Fix | Delete

ul.appendChild(first);

[641] Fix | Delete

for(let d in devices){

[642] Fix | Delete

let size = 'tablet_landscape' === bp ? [devices[d][1],devices[d][0]] : devices[d];

[643] Fix | Delete

ul.appendChild(createElement('li',{'data-width':size[0],'data-height':size[1]},i18n[d]+' ('+size[0]+'X'+size[1]+')'));

[644] Fix | Delete

}

[645] Fix | Delete

wrap.tfClass(bp)[0].appendChild(ul);

[646] Fix | Delete

}

[647] Fix | Delete

}

[648] Fix | Delete

[649] Fix | Delete

deviceSwitcher(e) {

[650] Fix | Delete

const item = e.target,

[651] Fix | Delete

{width:w,height:h}=item.dataset;

[652] Fix | Delete

if (w) {

[653] Fix | Delete

this.el.tfClass('selected_device')[0]?.classList.remove('selected_device');

[654] Fix | Delete

item.classList.add('selected_device');

[655] Fix | Delete

return this.switchToBreakpoint(1 * w, 1 * h);

[656] Fix | Delete

}

[657] Fix | Delete

return Promise.reject();

[658] Fix | Delete

[659] Fix | Delete

breakpointSwitcher(e) {

[660] Fix | Delete

let breakpoint = 'desktop',

[661] Fix | Delete

[662] Fix | Delete

if(typeof e==='string'){

[663] Fix | Delete

breakpoint=e;

[664] Fix | Delete

}

[665] Fix | Delete

else{

[666] Fix | Delete

const item = e.item;

[667] Fix | Delete

if (item.classList.contains('breakpoint-tablet')) {

[668] Fix | Delete

breakpoint = 'tablet';

[669] Fix | Delete

} else if (item.classList.contains('breakpoint-tablet_landscape')) {

[670] Fix | Delete

breakpoint = 'tablet_landscape';

[671] Fix | Delete

} else if (item.classList.contains('breakpoint-mobile')) {

[672] Fix | Delete

breakpoint = 'mobile';

[673] Fix | Delete

}

[674] Fix | Delete

}

[675] Fix | Delete

if (api.activeBreakPoint === breakpoint) {

[676] Fix | Delete

// Already in this breakpoint, so return

[677] Fix | Delete

return;

[678] Fix | Delete

}

[679] Fix | Delete

[680] Fix | Delete

w = breakpoint !== 'desktop' ? api.Utils.getBPWidth(breakpoint) - 1 : '';

[681] Fix | Delete

[682] Fix | Delete

return this.switchToBreakpoint(w, '');

[683] Fix | Delete

[684] Fix | Delete

[685] Fix | Delete

_iframeScroll() {

[686] Fix | Delete

if (this.scrollY !== window.scrollY) {

[687] Fix | Delete

window.scroll(0, this.scrollY);

[688] Fix | Delete

}

[689] Fix | Delete

if (this.scrollY !== topWindow.scrollY) {

[690] Fix | Delete

topWindow.scroll(0, this.scrollY);

[691] Fix | Delete

}

[692] Fix | Delete

[693] Fix | Delete

switchToBreakpoint(w, h) {

[694] Fix | Delete

return new Promise(resolve => {

[695] Fix | Delete

if(topBodyCl.contains('tb_start_change_mode')){

[696] Fix | Delete

resolve();

[697] Fix | Delete

return;

[698] Fix | Delete

}

[699] Fix | Delete

let breakpoint = 'desktop',

[700] Fix | Delete

prevBreakPoint = api.activeBreakPoint,

[701] Fix | Delete

iframe=topWindowDoc.tfId('tb_iframe');

[702] Fix | Delete

[703] Fix | Delete

if (w) {

[704] Fix | Delete

w *= 1;

[705] Fix | Delete

const bpPoints = themify_vars.breakpoints;

[706] Fix | Delete

for (let i in bpPoints) {

[707] Fix | Delete

if (Array.isArray(bpPoints[i])) {

[708] Fix | Delete

if (bpPoints[i][0] <= w && w <= bpPoints[i][1]) {

[709] Fix | Delete

breakpoint = i;

[710] Fix | Delete

break;

[711] Fix | Delete

}

[712] Fix | Delete

} else if (w <= bpPoints[i]) {

[713] Fix | Delete

breakpoint = i;

[714] Fix | Delete

break;

[715] Fix | Delete

}

[716] Fix | Delete

}

[717] Fix | Delete

if (api.isDocked !== false && 'tablet_landscape' === breakpoint) {

[718] Fix | Delete

const wspace = topBody.tfClass('tb_workspace_container').offsetWidth;

[719] Fix | Delete

if (wspace < w) {

[720] Fix | Delete

w = wspace; // make preview fit the screen when dock mode active

[721] Fix | Delete

}

[722] Fix | Delete

}

[723] Fix | Delete

w += 'px';

[724] Fix | Delete

}

[725] Fix | Delete

else{

[726] Fix | Delete

w='';

[727] Fix | Delete

}

[728] Fix | Delete

if (h>0) {

[729] Fix | Delete

h += 'px';

[730] Fix | Delete

}

[731] Fix | Delete

else{

[732] Fix | Delete

h='';

[733] Fix | Delete

}

[734] Fix | Delete

if (iframe!==null && w === iframe.style.width && h === iframe.style.height) {

[735] Fix | Delete

resolve();

[736] Fix | Delete

return;

[737] Fix | Delete

}

[738] Fix | Delete

api.SmallPanel.hide();

[739] Fix | Delete

api.ActionBar.disable=true;

[740] Fix | Delete

if (iframe!==null) {

[741] Fix | Delete

let willChange = w !== '' ? 'width' : '';

[742] Fix | Delete

if (h !== '') {

[743] Fix | Delete

willChange += h !== '' ? (willChange !== '' ? ',height' : '') : '';

[744] Fix | Delete

}

[745] Fix | Delete

iframe.style.willChange = willChange;

[746] Fix | Delete

api.ActionBar.clear();

[747] Fix | Delete

}

[748] Fix | Delete

let classses = [bodyCl, topBodyCl, this.el.classList,api.MainPanel.el.classList, api.SmallPanel.el.classList],

[749] Fix | Delete

items = [],

[750] Fix | Delete

viewportElement,//need to keep scroll position,to avoid scroll jumping

[751] Fix | Delete

is_resizing = iframe?.classList.contains('tb_resizing_start'),

[752] Fix | Delete

callback = () => {

[753] Fix | Delete

if (isFrontend) {

[754] Fix | Delete

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

[755] Fix | Delete

items[i].style.display = '';

[756] Fix | Delete

}

[757] Fix | Delete

bodyCl.toggle('tf_scrollbar', breakpoint !== 'desktop');

[758] Fix | Delete

}

[759] Fix | Delete

//this.el.tfClass('compact_switcher')[0].tfTag('svg')[0].className = item.tfTag('svg')[0].className;

[760] Fix | Delete

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

[761] Fix | Delete

let cls=classses[i];

[762] Fix | Delete

cls.remove('builder-breakpoint-' + prevBreakPoint);

[763] Fix | Delete

cls.toggle('tb_responsive_mode', breakpoint !== 'desktop');

[764] Fix | Delete

cls.add('builder-breakpoint-' + breakpoint);

[765] Fix | Delete

}

[766] Fix | Delete

const _finish=()=>{

[767] Fix | Delete

Themify.trigger('themify_builder_change_mode', [prevBreakPoint, breakpoint]);

[768] Fix | Delete

api.scrollTo=api.ActionBar.disable = classses = viewportElement= iframe=items = is_resizing=prevBreakPoint = breakpoint = null;

[769] Fix | Delete

};

[770] Fix | Delete

if (isFrontend) {

[771] Fix | Delete

iframe.style.willChange = '';

[772] Fix | Delete

if (breakpoint === 'desktop') {

[773] Fix | Delete

topBody.style.height = '';

[774] Fix | Delete

}

[775] Fix | Delete

topWindow.tfOff('scroll', this._iframeScroll, {

[776] Fix | Delete

passive: true

[777] Fix | Delete

});

[778] Fix | Delete

window.tfOff('scroll', this._iframeScroll, {

[779] Fix | Delete

passive: true

[780] Fix | Delete

});

[781] Fix | Delete

if (breakpoint !== 'desktop') {

[782] Fix | Delete

topWindow.tfOn('scroll', this._iframeScroll, {

[783] Fix | Delete

passive: true

[784] Fix | Delete

});

[785] Fix | Delete

window.tfOn('scroll', this._iframeScroll, {

[786] Fix | Delete

passive: true

[787] Fix | Delete

});

[788] Fix | Delete

}

[789] Fix | Delete

if(!api.scrollTo && viewportElement){

[790] Fix | Delete

api.scrollTo=viewportElement;

[791] Fix | Delete

}

[792] Fix | Delete

api.Utils.scrollTo(api.scrollTo);

[793] Fix | Delete

[794] Fix | Delete

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

[795] Fix | Delete

classses[i].remove('tb_start_animate');

[796] Fix | Delete

}

[797] Fix | Delete

if(iframe!==null){

[798] Fix | Delete

iframe.style.transition='';

[799] Fix | Delete

}

[800] Fix | Delete

setTimeout(() => {

[801] Fix | Delete

api.Utils.onResize(true).then(() => {

[802] Fix | Delete

api.Utils.setColumnsCount(doc.tfClass('module_column'));

[803] Fix | Delete

if(breakpoint==='desktop'){

[804] Fix | Delete

this.el.tfClass('selected_device')[0]?.classList.remove('selected_device');

[805] Fix | Delete

}

[806] Fix | Delete

api.Utils.scrollTo(api.scrollTo);//maybe js change position

[807] Fix | Delete

topWindow.scroll(0,window.scrollY);

[808] Fix | Delete

[809] Fix | Delete

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

[810] Fix | Delete

classses[i].remove('tb_start_change_mode');

[811] Fix | Delete

}

[812] Fix | Delete

_finish();

[813] Fix | Delete

resolve();

[814] Fix | Delete

});

[815] Fix | Delete

}, 150);

[816] Fix | Delete

}

[817] Fix | Delete

else{

[818] Fix | Delete

_finish();

[819] Fix | Delete

resolve();

[820] Fix | Delete

}

[821] Fix | Delete

[822] Fix | Delete

[823] Fix | Delete

zoom=api.zoomMeta && ~~api.zoomMeta!==100?this.zoom({item:this.el.tfClass('zoom_toggle')[0]}):Promise.resolve();

[824] Fix | Delete

// disable zoom if active

[825] Fix | Delete

zoom.then(()=>{

[826] Fix | Delete

api.activeBreakPoint = breakpoint;

[827] Fix | Delete

if (isFrontend) {

[828] Fix | Delete

viewportElement=api.liveStylingInstance.el?api.liveStylingInstance.el:doc.elementFromPoint((Themify.w/2)-20, this.el.offsetHeight);

[829] Fix | Delete

//hide the hidden rows for fast resizing

[830] Fix | Delete

const childs = api.Builder.get().el.children,

[831] Fix | Delete

fillHidden = el => {

[832] Fix | Delete

if (el !== null && el !== undefined) {

[833] Fix | Delete

const off = el.getBoundingClientRect();

[834] Fix | Delete

if ((off.bottom < 0 && off.top < 0) || off.top > Themify.h) {

[835] Fix | Delete

el.style.display = 'none';

[836] Fix | Delete

items.push(el);

[837] Fix | Delete

}

[838] Fix | Delete

}

[839] Fix | Delete

};

[840] Fix | Delete

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

[841] Fix | Delete

fillHidden(childs[i]);

[842] Fix | Delete

}

[843] Fix | Delete

fillHidden(doc.tfId('headerwrap'));

[844] Fix | Delete

fillHidden(doc.tfId('footerwrap'));

[845] Fix | Delete

[846] Fix | Delete

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

[847] Fix | Delete

classses[i].add('tb_start_animate', 'tb_start_change_mode'); //disable all transitions

[848] Fix | Delete

}

[849] Fix | Delete

setTimeout(()=>{

[850] Fix | Delete

if (!is_resizing) {

[851] Fix | Delete

iframe.tfOn('transitionend', callback,{passive:true,once:true})

[852] Fix | Delete

.style.height = h;

[853] Fix | Delete

iframe.style.width = w;

[854] Fix | Delete

}

[855] Fix | Delete

else {

[856] Fix | Delete

callback();

[857] Fix | Delete

}

[858] Fix | Delete

},50);

[859] Fix | Delete

}

[860] Fix | Delete

else {

[861] Fix | Delete

callback();

[862] Fix | Delete

}

[863] Fix | Delete

});

[864] Fix | Delete

});

[865] Fix | Delete

}

[866] Fix | Delete

};

[867] Fix | Delete

if (doc.readyState === 'interactive' || doc.readyState === 'complete') {

[868] Fix | Delete

api.ToolBar.init();

[869] Fix | Delete

}

[870] Fix | Delete

else {

[871] Fix | Delete

doc.tfOn('DOMContentLoaded', ()=>{

[872] Fix | Delete

api.ToolBar.init();

[873] Fix | Delete

}, {once: true, passive: true});

[874] Fix | Delete

}

[875] Fix | Delete

[876] Fix | Delete

[877] Fix | Delete

})(tb_app,_CLICK_,body,topBody,bodyCl,topThemify,topWindowDoc);

[878] Fix | Delete