Edit File by line

((api,ToolBar,_CLICK_,body,topBody,topBodyCl,topWindow,topWindowDoc) => {

[0] Fix | Delete

"use strict";

[1] Fix | Delete

const isFrontend=api.isFrontend;

[2] Fix | Delete

[3] Fix | Delete

api.MainPanel = class {

[4] Fix | Delete

static size = null;

[5] Fix | Delete

static #storageKey ='tb_module_panel';

[6] Fix | Delete

static async initialize() {

[7] Fix | Delete

const containers = {},

[8] Fix | Delete

root = doc.tfId('tb_main_panel_root'),

[9] Fix | Delete

fr = root.firstElementChild,

[10] Fix | Delete

fragment=createDocumentFragment();

[11] Fix | Delete

[12] Fix | Delete

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

[13] Fix | Delete

if (fr) { // shadowrootmode="open" isn't support

[14] Fix | Delete

root.attachShadow({

[15] Fix | Delete

mode: fr.getAttribute('shadowrootmode')

[16] Fix | Delete

}).appendChild(fr.content);

[17] Fix | Delete

fr.remove();

[18] Fix | Delete

}

[19] Fix | Delete

root.shadowRoot.prepend(fragment);

[20] Fix | Delete

this.el = root.shadowRoot.tfId('main_panel');

[21] Fix | Delete

let j = 1,

[22] Fix | Delete

builder=themifyBuilder,

[23] Fix | Delete

favs=builder.favorite,

[24] Fix | Delete

modules=builder.modules,

[25] Fix | Delete

i18n=builder.i18n.label,

[26] Fix | Delete

arr=Object.keys(modules).sort(),

[27] Fix | Delete

oldAddons=new Map;

[28] Fix | Delete

if ( typeof favs === 'object' && favs !== null && ! Array.isArray( favs )) {

[29] Fix | Delete

favs = Object.values( favs );

[30] Fix | Delete

}

[31] Fix | Delete

await api.jsModuleLoaded();

[32] Fix | Delete

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

[33] Fix | Delete

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

[34] Fix | Delete

let slug=arr[i];

[35] Fix | Delete

if(slug!=='page-break'){

[36] Fix | Delete

let module = createElement('','module module_' + slug),

[37] Fix | Delete

favorite = createElement('span','favorite tb_disable_sorting'),

[38] Fix | Delete

name = createElement('span','module_name',modules[slug].name),

[39] Fix | Delete

add = createElement('button',{class:'tf_plus_icon add_module_btn tb_disable_sorting tf_rel',type:'button',title:i18n.add_module}),

[40] Fix | Delete

dataset=module.dataset,

[41] Fix | Delete

icon = modules[slug].icon,

[42] Fix | Delete

isFavorited=favs?.includes(slug),

[43] Fix | Delete

obj=api.Module.getModuleClassName(slug);

[44] Fix | Delete

if(obj){

[45] Fix | Delete

let cat=obj.getGroup();

[46] Fix | Delete

dataset.categories = cat;

[47] Fix | Delete

if (isFavorited===true) {

[48] Fix | Delete

module.className += ' favorited';

[49] Fix | Delete

}

[50] Fix | Delete

add.dataset.type = 'module';

[51] Fix | Delete

dataset.slug = slug;

[52] Fix | Delete

dataset.index = j++;

[53] Fix | Delete

module.draggable = true;

[54] Fix | Delete

favorite.title=i18n.add_fv;

[55] Fix | Delete

favorite.appendChild(api.Helper.getIcon('ti-star'));

[56] Fix | Delete

if (icon) {

[57] Fix | Delete

module.appendChild(api.Helper.getIcon('ti-' + icon));

[58] Fix | Delete

}

[59] Fix | Delete

module.append(favorite, name, add);

[60] Fix | Delete

let categories = isFavorited===true ? ['favorite'] : cat;

[61] Fix | Delete

for (let k = 0; k < categories.length; ++k) {

[62] Fix | Delete

containers[categories[k]]??= createDocumentFragment();

[63] Fix | Delete

containers[categories[k]].appendChild(module.cloneNode(true));

[64] Fix | Delete

}

[65] Fix | Delete

}else{

[66] Fix | Delete

oldAddons.set(slug,modules[slug].name || slug);

[67] Fix | Delete

}

[68] Fix | Delete

}

[69] Fix | Delete

}

[70] Fix | Delete

let categories = this.el.tfClass('panel_category');

[71] Fix | Delete

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

[72] Fix | Delete

let c = categories[i].dataset.category;

[73] Fix | Delete

if (c) {

[74] Fix | Delete

if (undefined !== containers[c]) {

[75] Fix | Delete

categories[i].appendChild(containers[c]);

[76] Fix | Delete

} else {

[77] Fix | Delete

categories[i].parentNode.style.display = 'none';

[78] Fix | Delete

}

[79] Fix | Delete

}

[80] Fix | Delete

}

[81] Fix | Delete

if(oldAddons.size>0){

[82] Fix | Delete

api.isOld=true;

[83] Fix | Delete

this._updateAddonsMessage(oldAddons);

[84] Fix | Delete

}

[85] Fix | Delete

if (isFrontend) {

[86] Fix | Delete

topBody.appendChild(root);

[87] Fix | Delete

}

[88] Fix | Delete

try{

[89] Fix | Delete

if(!CSS.supports('container-type:inline-size') || !CSS.supports('selector(:has(*))')){

[90] Fix | Delete

throw '';

[91] Fix | Delete

}

[92] Fix | Delete

}

[93] Fix | Delete

catch(e){

[94] Fix | Delete

this._updateBrowserMessage();

[95] Fix | Delete

}

[96] Fix | Delete

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

[97] Fix | Delete

}

[98] Fix | Delete

static init(){

[99] Fix | Delete

this.updateStorage();

[100] Fix | Delete

if(api.isDocked){

[101] Fix | Delete

api.Dock.setDocked(false);

[102] Fix | Delete

} else {

[103] Fix | Delete

this.closeFloat();

[104] Fix | Delete

}

[105] Fix | Delete

[106] Fix | Delete

this._draggable();

[107] Fix | Delete

this.initClick();

[108] Fix | Delete

this.initSearch();

[109] Fix | Delete

api.jsModuleLoaded().then(()=>{

[110] Fix | Delete

setTimeout(()=>{

[111] Fix | Delete

api.Drag(this.el);

[112] Fix | Delete

},1000);

[113] Fix | Delete

});

[114] Fix | Delete

this.el.getRootNode().host.classList.remove('tf_hide');

[115] Fix | Delete

}

[116] Fix | Delete

static tabs(elm) {

[117] Fix | Delete

const target = elm.dataset.target;

[118] Fix | Delete

if (target) {

[119] Fix | Delete

const parent = elm.closest('.panel'),

[120] Fix | Delete

hideTabs = parent.tfClass(elm.dataset.hide),

[121] Fix | Delete

showTabs = parent.tfClass(target),

[122] Fix | Delete

notFound = parent.tfClass('tb_no_content')[0],

[123] Fix | Delete

search = parent.tfClass('panel_search')[0],

[124] Fix | Delete

current = elm.closest('li'),

[125] Fix | Delete

nav = current.parentNode,

[126] Fix | Delete

menu = nav.children,

[127] Fix | Delete

dropdownLabel = nav.parentNode.querySelector(':scope>.dropdown_label');

[128] Fix | Delete

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

[129] Fix | Delete

hideTabs[i].style.display = 'none';

[130] Fix | Delete

}

[131] Fix | Delete

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

[132] Fix | Delete

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

[133] Fix | Delete

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

[134] Fix | Delete

}

[135] Fix | Delete

notFound?.classList.toggle('tf_hide', showTabs.length > 0);

[136] Fix | Delete

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

[137] Fix | Delete

menu[i].classList.toggle('current', menu[i] === current);

[138] Fix | Delete

}

[139] Fix | Delete

if (search) {

[140] Fix | Delete

search.value = '';

[141] Fix | Delete

}

[142] Fix | Delete

[143] Fix | Delete

if (dropdownLabel) {

[144] Fix | Delete

dropdownLabel.textContent = elm.textContent;

[145] Fix | Delete

}

[146] Fix | Delete

Themify.triggerEvent(this.el, 'tb_panel_tab_' + target);

[147] Fix | Delete

Themify.trigger('tb_panel_tab_' + target, parent);

[148] Fix | Delete

}

[149] Fix | Delete

}

[150] Fix | Delete

static initClick(e) {

[151] Fix | Delete

this.el.tfOn(_CLICK_, e => {

[152] Fix | Delete

const events = {

[153] Fix | Delete

'.add_module_btn': 'addComponent',

[154] Fix | Delete

'.panel_close': 'closeFloat',

[155] Fix | Delete

'.minimize': 'minimize',

[156] Fix | Delete

'.nav_tab': 'tabs',

[157] Fix | Delete

'.favorite': 'toggleFavoriteModule',

[158] Fix | Delete

'.panel_title': 'toggleAccordion'

[159] Fix | Delete

};

[160] Fix | Delete

for (let sel in events) {

[161] Fix | Delete

if (e.target.closest(sel)) {

[162] Fix | Delete

e.preventDefault();

[163] Fix | Delete

e.stopPropagation();

[164] Fix | Delete

this[events[sel]](e.target);

[165] Fix | Delete

break;

[166] Fix | Delete

}

[167] Fix | Delete

}

[168] Fix | Delete

})

[169] Fix | Delete

.tfOn('tb_panel_tab_panel_rows', () => {

[170] Fix | Delete

this.rowPanel();

[171] Fix | Delete

}, {

[172] Fix | Delete

once: true,

[173] Fix | Delete

passive: true

[174] Fix | Delete

})

[175] Fix | Delete

.tfOn('tb_panel_tab_panel_library', () => {

[176] Fix | Delete

this.libraryPanel();

[177] Fix | Delete

}, {

[178] Fix | Delete

once: true,

[179] Fix | Delete

passive: true

[180] Fix | Delete

})

[181] Fix | Delete

.getRootNode().querySelector('.docked_min')?.tfOn(_CLICK_,e=>{

[182] Fix | Delete

e.stopPropagation();

[183] Fix | Delete

this.dockMinimize();

[184] Fix | Delete

},{passive:true});

[185] Fix | Delete

[186] Fix | Delete

}

[187] Fix | Delete

static async rowPanel() {

[188] Fix | Delete

const link = this.el.getRootNode().querySelectorAll('style');

[189] Fix | Delete

await Promise.all([Themify.loadJs(api.componentsURL + 'predesigned-rows',!!api.preDesignedRows), Themify.loadCss(Themify.builder_url + 'css/editor/components/predesigned-rows', null,null, link[link.length - 3].nextElementSibling)]);

[190] Fix | Delete

new api.preDesignedRows(this.el.tfClass('predesigned_container')[0]);

[191] Fix | Delete

}

[192] Fix | Delete

static async libraryPanel() {

[193] Fix | Delete

const link = this.el.getRootNode().querySelectorAll('style');

[194] Fix | Delete

await Promise.all([Themify.loadJs(api.componentsURL + 'library',!!api.Library), Themify.loadCss(Themify.builder_url + 'css/editor/components/library', null,null, link[link.length - 3].nextElementSibling)]);

[195] Fix | Delete

new api.Library(this.el.tfClass('library_container')[0]);

[196] Fix | Delete

}

[197] Fix | Delete

static toggleAccordion(item) {

[198] Fix | Delete

item.closest('.panel_acc').classList.toggle('tb_collapsed');

[199] Fix | Delete

}

[200] Fix | Delete

static toggleFavoriteModule(el) {

[201] Fix | Delete

const module = el.closest('.module'),

[202] Fix | Delete

slug = module.dataset.slug,

[203] Fix | Delete

[204] Fix | Delete

trEnd = function(e) {

[205] Fix | Delete

this.classList.toggle('favorited');

[206] Fix | Delete

const categories = this.dataset.categories.split(','),

[207] Fix | Delete

parent = this.closest('.panel_modules_wrap'),

[208] Fix | Delete

fav = parent.querySelector('[data-category="favorite"]');

[209] Fix | Delete

if (this.classList.contains('favorited')) {

[210] Fix | Delete

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

[211] Fix | Delete

let cat = parent.querySelector('[data-category="' + categories[i] + '"]');

[212] Fix | Delete

if(cat){

[213] Fix | Delete

let items=cat.tfClass('module_' + slug);

[214] Fix | Delete

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

[215] Fix | Delete

if(this!==items[j]){

[216] Fix | Delete

items[j].remove();

[217] Fix | Delete

if (cat.childElementCount===0) {

[218] Fix | Delete

cat.parentNode.style.display='none';

[219] Fix | Delete

}

[220] Fix | Delete

}

[221] Fix | Delete

else{

[222] Fix | Delete

fav.appendChild(this);

[223] Fix | Delete

if (cat.childElementCount===0) {

[224] Fix | Delete

cat.parentNode.style.display='none';

[225] Fix | Delete

}

[226] Fix | Delete

requestAnimationFrame(()=>{

[227] Fix | Delete

requestAnimationFrame(()=>{

[228] Fix | Delete

fav.parentNode.style.display=this.style.transform=this.style.opacity='';

[229] Fix | Delete

});

[230] Fix | Delete

});

[231] Fix | Delete

}

[232] Fix | Delete

}

[233] Fix | Delete

}

[234] Fix | Delete

}

[235] Fix | Delete

}

[236] Fix | Delete

else {

[237] Fix | Delete

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

[238] Fix | Delete

let cat = parent.querySelector('[data-category="' + categories[i] + '"]'),

[239] Fix | Delete

clone=this.cloneNode(true),

[240] Fix | Delete

p = ~~clone.dataset.index,

[241] Fix | Delete

place = null;

[242] Fix | Delete

if(cat){

[243] Fix | Delete

while (--p !== 0) {

[244] Fix | Delete

place = cat.querySelector('[data-index="' + p + '"]');

[245] Fix | Delete

if (place!==null) {

[246] Fix | Delete

break;

[247] Fix | Delete

}

[248] Fix | Delete

}

[249] Fix | Delete

place?.after(clone) || cat.prepend(clone);

[250] Fix | Delete

cat.parentNode.style.display='';

[251] Fix | Delete

requestAnimationFrame(()=>{

[252] Fix | Delete

requestAnimationFrame(()=>{

[253] Fix | Delete

clone.style.transform=clone.style.opacity='';

[254] Fix | Delete

});

[255] Fix | Delete

});

[256] Fix | Delete

}

[257] Fix | Delete

}

[258] Fix | Delete

this.remove();

[259] Fix | Delete

if (fav.tfClass('module').length===0) {

[260] Fix | Delete

fav.parentNode.style.display='none';

[261] Fix | Delete

}

[262] Fix | Delete

}

[263] Fix | Delete

};

[264] Fix | Delete

[265] Fix | Delete

module.tfOn('transitionend',trEnd, {

[266] Fix | Delete

passive: true,

[267] Fix | Delete

once: true

[268] Fix | Delete

})

[269] Fix | Delete

.style.opacity = 0;

[270] Fix | Delete

module.style.transform = 'scale(.5)';

[271] Fix | Delete

[272] Fix | Delete

api.LocalFetch({

[273] Fix | Delete

action:'tb_module_favorite',

[274] Fix | Delete

module_name: slug,

[275] Fix | Delete

module_state:module.classList.contains('favorited')?0:1

[276] Fix | Delete

}, 'text');

[277] Fix | Delete

}

[278] Fix | Delete

static dockMinimize() {

[279] Fix | Delete

const workspace = topWindowDoc.tfClass('tb_workspace_container')[0],

[280] Fix | Delete

items=[topBody,this.el];

[281] Fix | Delete

if(api.activeModel){

[282] Fix | Delete

items.push(api.LightBox.el);

[283] Fix | Delete

}

[284] Fix | Delete

workspace.tfOn('transitionend', function() {

[285] Fix | Delete

this.style.transition ='';

[286] Fix | Delete

Themify.trigger('tb_resize_lightbox');

[287] Fix | Delete

api.Utils.onResize(true);

[288] Fix | Delete

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

[289] Fix | Delete

.style.transition = 'width .3s';

[290] Fix | Delete

[291] Fix | Delete

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

[292] Fix | Delete

items[i].classList.toggle('tb_dock_minimized');

[293] Fix | Delete

}

[294] Fix | Delete

}

[295] Fix | Delete

static minimize(e) {

[296] Fix | Delete

const el= this.el,

[297] Fix | Delete

cl = el.classList;

[298] Fix | Delete

if (cl.contains('is_minimized')) {

[299] Fix | Delete

const storage = this._getStorage();

[300] Fix | Delete

el.style.height = storage.height ? (storage.height + 'px') : '';

[301] Fix | Delete

}

[302] Fix | Delete

cl.toggle('is_minimized');

[303] Fix | Delete

}

[304] Fix | Delete

static openFloat(e) {

[305] Fix | Delete

const el=this.el,

[306] Fix | Delete

classes=[ToolBar.el.classList,el.classList,bodyCl];

[307] Fix | Delete

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

[308] Fix | Delete

classes[i].remove('tb_panel_closed');

[309] Fix | Delete

}

[310] Fix | Delete

el.style.display = '';

[311] Fix | Delete

api.SmallPanel.hide();

[312] Fix | Delete

requestAnimationFrame(()=>{

[313] Fix | Delete

el.tfClass('panel_search')[0].focus();

[314] Fix | Delete

});

[315] Fix | Delete

}

[316] Fix | Delete

static closeFloat(e) {

[317] Fix | Delete

if (e) {

[318] Fix | Delete

api.Dock.set(false);

[319] Fix | Delete

}

[320] Fix | Delete

const el=this.el,

[321] Fix | Delete

classes=[ToolBar.el.classList,el.classList,bodyCl];

[322] Fix | Delete

el.style.display = 'none';

[323] Fix | Delete

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

[324] Fix | Delete

classes[i].add('tb_panel_closed');

[325] Fix | Delete

}

[326] Fix | Delete

}

[327] Fix | Delete

static addComponent(target) {

[328] Fix | Delete

const type = target.dataset.type,

[329] Fix | Delete

slug=target.closest('[data-slug]')?.dataset.slug || '',

[330] Fix | Delete

_this=this,

[331] Fix | Delete

scrollTo=_this.el!==api.SmallPanel.el;

[332] Fix | Delete

if ('module' === type) {

[333] Fix | Delete

_this.newModule(slug,scrollTo);

[334] Fix | Delete

}

[335] Fix | Delete

else if ('page_break' === type) {

[336] Fix | Delete

_this.newPageBreak(scrollTo);

[337] Fix | Delete

}

[338] Fix | Delete

else if ('row' === type) {

[339] Fix | Delete

_this.newGrid(slug,scrollTo);

[340] Fix | Delete

}

[341] Fix | Delete

else if ('predesigned' === type) {

[342] Fix | Delete

_this.newPredesign(slug,scrollTo);

[343] Fix | Delete

}

[344] Fix | Delete

}

[345] Fix | Delete

static newModule(slug,scrollTo,settings) {

[346] Fix | Delete

const builder=api.Builder.get(),

[347] Fix | Delete

dummy=createElement(),

[348] Fix | Delete

holder=builder.el.querySelector('.tb_column_btn_plus.clicked');

[349] Fix | Delete

if(holder){

[350] Fix | Delete

const subHolder=holder.parentNode;

[351] Fix | Delete

if(subHolder.classList.contains('module_column')){

[352] Fix | Delete

subHolder.tfClass('tb_holder')[0].appendChild(dummy);

[353] Fix | Delete

}

[354] Fix | Delete

else{

[355] Fix | Delete

subHolder.parentNode.after(dummy);

[356] Fix | Delete

}

[357] Fix | Delete

}

[358] Fix | Delete

else{

[359] Fix | Delete

builder.newRowAvailable(true).el.tfClass('tb_holder')[0].appendChild(dummy);

[360] Fix | Delete

}

[361] Fix | Delete

api.SmallPanel.hide();

[362] Fix | Delete

return api.Drop.module(dummy, false,slug,scrollTo,settings);

[363] Fix | Delete

}

[364] Fix | Delete

static newPageBreak(scrollTo) {

[365] Fix | Delete

api.undoManager.start('move');

[366] Fix | Delete

let builder=api.Builder.get(),

[367] Fix | Delete

dummy=createElement(),

[368] Fix | Delete

holder=builder.el.querySelector('.tb_column_btn_plus.clicked');

[369] Fix | Delete

if(holder){

[370] Fix | Delete

holder=holder.closest('.module_row');

[371] Fix | Delete

}

[372] Fix | Delete

else{

[373] Fix | Delete

const rows=builder.el.tfClass('module_row');

[374] Fix | Delete

holder=rows[rows.length-1];

[375] Fix | Delete

}

[376] Fix | Delete

holder.after(dummy);

[377] Fix | Delete

api.SmallPanel.hide();

[378] Fix | Delete

api.Drop.row(dummy,'pagebreak',null,scrollTo).then(()=>{

[379] Fix | Delete

api.undoManager.end('move');

[380] Fix | Delete

});

[381] Fix | Delete

}

[382] Fix | Delete

static newGrid(slug,scrollTo) {

[383] Fix | Delete

api.undoManager.start('move');

[384] Fix | Delete

let builder=api.Builder.get(),

[385] Fix | Delete

dummy=createElement(),

[386] Fix | Delete

holder=builder.el.querySelector('.tb_column_btn_plus.clicked');

[387] Fix | Delete

if(holder){

[388] Fix | Delete

const subHolder=holder.parentNode;

[389] Fix | Delete

if(subHolder.classList.contains('module_column')){

[390] Fix | Delete

subHolder.tfClass('tb_holder')[0].appendChild(dummy);

[391] Fix | Delete

}

[392] Fix | Delete

else{

[393] Fix | Delete

subHolder.parentNode.after(dummy);

[394] Fix | Delete

}

[395] Fix | Delete

}

[396] Fix | Delete

else{

[397] Fix | Delete

if(builder.hasRows!==false){

[398] Fix | Delete

for(let rows=builder.el.children,i=rows.length-1;i>-1;--i){

[399] Fix | Delete

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

[400] Fix | Delete

holder=rows[i];

[401] Fix | Delete

break;

[402] Fix | Delete

}

[403] Fix | Delete

}

[404] Fix | Delete

if ( holder ) {

[405] Fix | Delete

holder.after(dummy);

[406] Fix | Delete

} else {

[407] Fix | Delete

builder.el.prepend( dummy );

[408] Fix | Delete

}

[409] Fix | Delete

}else{

[410] Fix | Delete

builder.el.tfClass('tb_holder')[0].appendChild(dummy);

[411] Fix | Delete

}

[412] Fix | Delete

}

[413] Fix | Delete

api.SmallPanel.hide();

[414] Fix | Delete

api.Drop.row(dummy,'grid',slug,scrollTo).then(()=>{

[415] Fix | Delete

api.undoManager.end('move');

[416] Fix | Delete

});

[417] Fix | Delete

}

[418] Fix | Delete

static newPredesign(slug,scrollTo){

[419] Fix | Delete

api.undoManager.start('move');

[420] Fix | Delete

[421] Fix | Delete

let builder=api.Builder.get(),

[422] Fix | Delete

dummy=createElement(),

[423] Fix | Delete

holder=builder.el.querySelector('.tb_column_btn_plus.clicked')?.closest('.module_row');

[424] Fix | Delete

if(!holder){

[425] Fix | Delete

const rows=builder.el.tfClass('module_row');

[426] Fix | Delete

holder=rows[rows.length-1];

[427] Fix | Delete

}

[428] Fix | Delete

holder.after(dummy);

[429] Fix | Delete

api.SmallPanel.hide();

[430] Fix | Delete

api.Drop.row(dummy,'predesign',slug,scrollTo).then(()=>{

[431] Fix | Delete

api.undoManager.end('move');

[432] Fix | Delete

});

[433] Fix | Delete

}

[434] Fix | Delete

static setResponsiveTabs(cl) {

[435] Fix | Delete

if (!api.isDocked) {

[436] Fix | Delete

cl??= this.getPanelClass(this._getStorage().width);

[437] Fix | Delete

this.el.classList.add(cl);

[438] Fix | Delete

}

[439] Fix | Delete

}

[440] Fix | Delete

static getPanelClass(w) {

[441] Fix | Delete

let cl = 'tb_float_large';

[442] Fix | Delete

if (w <= 195) {

[443] Fix | Delete

cl = 'tb_float_xsmall';

[444] Fix | Delete

} else if (w <= 270) {

[445] Fix | Delete

cl = 'tb_float_small';

[446] Fix | Delete

}

[447] Fix | Delete

return cl;

[448] Fix | Delete

}

[449] Fix | Delete

static _draggable() {

[450] Fix | Delete

const self = this,

[451] Fix | Delete

handle = this.el.tfClass('drag_handle')[0];

[452] Fix | Delete

if (!api.isDocked) {

[453] Fix | Delete

this.setResponsiveTabs();

[454] Fix | Delete

}

[455] Fix | Delete

handle.tfOn('pointerdown', function(e) {

[456] Fix | Delete

if (e.button === 0) {

[457] Fix | Delete

e.stopImmediatePropagation();

[458] Fix | Delete

let timer,

[459] Fix | Delete

el = self.el,

[460] Fix | Delete

owner = this.ownerDocument;

[461] Fix | Delete

el.style.willChange='transform';

[462] Fix | Delete

const _x = e.clientX,

[463] Fix | Delete

_y = e.clientY,

[464] Fix | Delete

box = el.getBoundingClientRect(),

[465] Fix | Delete

dragX = box.left - _x,

[466] Fix | Delete

dragY = box.top - _y,

[467] Fix | Delete

width = box.width,

[468] Fix | Delete

draggableCallback = e => {

[469] Fix | Delete

e.stopImmediatePropagation();

[470] Fix | Delete

timer = requestAnimationFrame(() => {

[471] Fix | Delete

if(el!==null){

[472] Fix | Delete

const {clientX:x,clientY:y} = e,

[473] Fix | Delete

clientX = dragX + x,

[474] Fix | Delete

clientY = dragY + y;

[475] Fix | Delete

el.style.transform = 'translate(' + clientX + 'px,' + clientY + 'px)';

[476] Fix | Delete

Themify.trigger('tb_panel_drag', [clientX, width]);

[477] Fix | Delete

}

[478] Fix | Delete

});

[479] Fix | Delete

[480] Fix | Delete

startDrag = e=>{

[481] Fix | Delete

e.stopImmediatePropagation();

[482] Fix | Delete

owner.body.classList.add('tb_start_animate');

[483] Fix | Delete

ToolBar.el.classList.add('tb_start_animate');

[484] Fix | Delete

el.classList.add('tb_start_animate');

[485] Fix | Delete

api.SmallPanel.hide();

[486] Fix | Delete

Themify.trigger('tb_panel_drag_start');

[487] Fix | Delete

[488] Fix | Delete

up=function(e) {

[489] Fix | Delete

e.stopImmediatePropagation();

[490] Fix | Delete

cancelAnimationFrame(timer);

[491] Fix | Delete

this.tfOff('pointermove', startDrag, {passive: true,once: true})

[492] Fix | Delete

.tfOff('pointermove', draggableCallback, {passive: true})

[493] Fix | Delete

.tfOff('lostpointercapture pointerup', up, {passive: true,once: true});

[494] Fix | Delete

el.style.willChange='';

[495] Fix | Delete

Themify.trigger('tb_panel_drag_end');

[496] Fix | Delete

self.updateStorage();

[497] Fix | Delete

owner.body.classList.remove('tb_start_animate');

[498] Fix | Delete

ToolBar.el.classList.remove('tb_start_animate');

[499] Fix | Delete

12 3