Edit File by line

(api => {

[0] Fix | Delete

"use strict";

[1] Fix | Delete

api.ModuleImage = class extends api.Module {

[2] Fix | Delete

constructor(fields) {

[3] Fix | Delete

super(fields);

[4] Fix | Delete

}

[5] Fix | Delete

static getOptions() {

[6] Fix | Delete

return [

[7] Fix | Delete

{

[8] Fix | Delete

id: 'mod_title_image',

[9] Fix | Delete

type: 'title'

[10] Fix | Delete

[11] Fix | Delete

{

[12] Fix | Delete

id: 'style_image',

[13] Fix | Delete

type: 'layout',

[14] Fix | Delete

label: 'imgst',

[15] Fix | Delete

mode: 'sprite',

[16] Fix | Delete

options: [

[17] Fix | Delete

{

[18] Fix | Delete

img: 'image_top',

[19] Fix | Delete

value: 'image-top',

[20] Fix | Delete

label: 'imgtop'

[21] Fix | Delete

[22] Fix | Delete

{

[23] Fix | Delete

img: 'image_left',

[24] Fix | Delete

value: 'image-left',

[25] Fix | Delete

label: 'imgleft'

[26] Fix | Delete

[27] Fix | Delete

{

[28] Fix | Delete

img: 'image_center',

[29] Fix | Delete

value: 'image-center',

[30] Fix | Delete

label: 'imgcenter'

[31] Fix | Delete

[32] Fix | Delete

{

[33] Fix | Delete

img: 'image_right',

[34] Fix | Delete

value: 'image-right',

[35] Fix | Delete

label: 'imgright'

[36] Fix | Delete

[37] Fix | Delete

{

[38] Fix | Delete

img: 'image_overlay',

[39] Fix | Delete

value: 'image-overlay',

[40] Fix | Delete

label: 'pover'

[41] Fix | Delete

[42] Fix | Delete

{

[43] Fix | Delete

img: 'image_card_layout',

[44] Fix | Delete

value: 'image-card-layout',

[45] Fix | Delete

label: 'clay'

[46] Fix | Delete

[47] Fix | Delete

{

[48] Fix | Delete

img: 'image_centered_overlay',

[49] Fix | Delete

value: 'image-full-overlay',

[50] Fix | Delete

label: 'fover'

[51] Fix | Delete

}

[52] Fix | Delete

[53] Fix | Delete

binding: {

[54] Fix | Delete

not_empty: {

[55] Fix | Delete

hide: 'caption_on_overlay'

[56] Fix | Delete

[57] Fix | Delete

'image-overlay': {

[58] Fix | Delete

show: 'caption_on_overlay'

[59] Fix | Delete

[60] Fix | Delete

'image-full-overlay': {

[61] Fix | Delete

show: 'caption_on_overlay'

[62] Fix | Delete

}

[63] Fix | Delete

[64] Fix | Delete

control: {

[65] Fix | Delete

classSelector: ''

[66] Fix | Delete

}

[67] Fix | Delete

[68] Fix | Delete

{

[69] Fix | Delete

id: 'caption_on_overlay',

[70] Fix | Delete

type: 'checkbox',

[71] Fix | Delete

label: '',

[72] Fix | Delete

options: [

[73] Fix | Delete

{

[74] Fix | Delete

[75] Fix | Delete

value: 'sover_h'

[76] Fix | Delete

}

[77] Fix | Delete

]

[78] Fix | Delete

[79] Fix | Delete

{

[80] Fix | Delete

id: 'url_image',

[81] Fix | Delete

type: 'image',

[82] Fix | Delete

label: 'imgurl',

[83] Fix | Delete

required: {

[84] Fix | Delete

message: 'imgerr'

[85] Fix | Delete

}

[86] Fix | Delete

[87] Fix | Delete

{

[88] Fix | Delete

id: 'appearance_image',

[89] Fix | Delete

type: 'checkbox',

[90] Fix | Delete

label: 'app',

[91] Fix | Delete

img_appearance: true

[92] Fix | Delete

[93] Fix | Delete

{

[94] Fix | Delete

id: 'image_size_image',

[95] Fix | Delete

type: 'image_size'

[96] Fix | Delete

[97] Fix | Delete

{

[98] Fix | Delete

id: 'width_image',

[99] Fix | Delete

label: 'w',

[100] Fix | Delete

type: 'number',

[101] Fix | Delete

after: 'px'

[102] Fix | Delete

[103] Fix | Delete

{

[104] Fix | Delete

id: 'auto_fullwidth',

[105] Fix | Delete

type: 'checkbox',

[106] Fix | Delete

label: '',

[107] Fix | Delete

options: [

[108] Fix | Delete

{

[109] Fix | Delete

[110] Fix | Delete

value: 'afullwimg'

[111] Fix | Delete

}

[112] Fix | Delete

[113] Fix | Delete

wrap_class: 'auto_fullwidth'

[114] Fix | Delete

[115] Fix | Delete

{

[116] Fix | Delete

id: 'height_image',

[117] Fix | Delete

type: 'number',

[118] Fix | Delete

label: 'ht',

[119] Fix | Delete

after: 'px'

[120] Fix | Delete

[121] Fix | Delete

{

[122] Fix | Delete

id: 'title_image',

[123] Fix | Delete

type: 'text',

[124] Fix | Delete

label: 'imgt',

[125] Fix | Delete

control: {

[126] Fix | Delete

selector: "[data-name='title_image']"

[127] Fix | Delete

}

[128] Fix | Delete

[129] Fix | Delete

{

[130] Fix | Delete

id: 'title_tag',

[131] Fix | Delete

type: 'select',

[132] Fix | Delete

label: 'tht',

[133] Fix | Delete

h_tags: true,

[134] Fix | Delete

default: 'h3'

[135] Fix | Delete

[136] Fix | Delete

{

[137] Fix | Delete

id: 'link_image',

[138] Fix | Delete

type: 'url',

[139] Fix | Delete

label: 'imgl',

[140] Fix | Delete

binding: {

[141] Fix | Delete

empty: {

[142] Fix | Delete

hide: [

[143] Fix | Delete

'param_image',

[144] Fix | Delete

'image_zoom_icon',

[145] Fix | Delete

'lightbox_size'

[146] Fix | Delete

]

[147] Fix | Delete

[148] Fix | Delete

not_empty: {

[149] Fix | Delete

show: [

[150] Fix | Delete

'param_image',

[151] Fix | Delete

'image_zoom_icon',

[152] Fix | Delete

'lightbox_size'

[153] Fix | Delete

]

[154] Fix | Delete

}

[155] Fix | Delete

}

[156] Fix | Delete

[157] Fix | Delete

{

[158] Fix | Delete

id: 'param_image',

[159] Fix | Delete

type: 'radio',

[160] Fix | Delete

label: 'o_l',

[161] Fix | Delete

link_type: true,

[162] Fix | Delete

option_js: true,

[163] Fix | Delete

wrap_class: 'link_options tb_compact_radios',

[164] Fix | Delete

binding: {

[165] Fix | Delete

regular: {

[166] Fix | Delete

hide: 'lightbox_size'

[167] Fix | Delete

[168] Fix | Delete

newtab: {

[169] Fix | Delete

hide: 'lightbox_size'

[170] Fix | Delete

[171] Fix | Delete

lightbox: {

[172] Fix | Delete

show: 'lightbox_size'

[173] Fix | Delete

}

[174] Fix | Delete

}

[175] Fix | Delete

[176] Fix | Delete

{

[177] Fix | Delete

type: 'multi',

[178] Fix | Delete

label: 'lbdim',

[179] Fix | Delete

id: 'multi_lightbox',

[180] Fix | Delete

options: [

[181] Fix | Delete

{

[182] Fix | Delete

id: 'lightbox_width',

[183] Fix | Delete

type: 'range',

[184] Fix | Delete

label: 'w',

[185] Fix | Delete

control: false,

[186] Fix | Delete

units: {

[187] Fix | Delete

px: {

[188] Fix | Delete

max: 3500

[189] Fix | Delete

[190] Fix | Delete

'%': ''

[191] Fix | Delete

}

[192] Fix | Delete

[193] Fix | Delete

{

[194] Fix | Delete

id: 'lightbox_height',

[195] Fix | Delete

type: 'range',

[196] Fix | Delete

label: 'ht',

[197] Fix | Delete

control: false,

[198] Fix | Delete

units: {

[199] Fix | Delete

px: {

[200] Fix | Delete

max: 3500

[201] Fix | Delete

[202] Fix | Delete

'%': ''

[203] Fix | Delete

}

[204] Fix | Delete

}

[205] Fix | Delete

[206] Fix | Delete

wrap_class: 'tb_group_element_lightbox'

[207] Fix | Delete

[208] Fix | Delete

{

[209] Fix | Delete

id: 'image_zoom_icon',

[210] Fix | Delete

type: 'checkbox',

[211] Fix | Delete

label: '',

[212] Fix | Delete

options: [

[213] Fix | Delete

{

[214] Fix | Delete

[215] Fix | Delete

value: 'szoomic'

[216] Fix | Delete

}

[217] Fix | Delete

[218] Fix | Delete

wrap_class: 'tb_group_element_lightbox tb_group_element_newtab'

[219] Fix | Delete

[220] Fix | Delete

{

[221] Fix | Delete

id: 'caption_image',

[222] Fix | Delete

type: 'textarea',

[223] Fix | Delete

label: 'imgc',

[224] Fix | Delete

control: {

[225] Fix | Delete

selector: '.image-caption'

[226] Fix | Delete

}

[227] Fix | Delete

[228] Fix | Delete

{

[229] Fix | Delete

id: 'alt_image',

[230] Fix | Delete

type: 'text',

[231] Fix | Delete

label: 'alt',

[232] Fix | Delete

help: 'alth',

[233] Fix | Delete

control: false

[234] Fix | Delete

[235] Fix | Delete

{

[236] Fix | Delete

type: 'custom_css_id',

[237] Fix | Delete

custom_css: 'css_image'

[238] Fix | Delete

}

[239] Fix | Delete

];

[240] Fix | Delete

}

[241] Fix | Delete

static builderSave(settings) {

[242] Fix | Delete

const def = {

[243] Fix | Delete

style_image: 'image-top',

[244] Fix | Delete

param_image: 'regular',

[245] Fix | Delete

lightbox_width_unit: 'px',

[246] Fix | Delete

lightbox_height_unit: 'px',

[247] Fix | Delete

title_tag: 'h3',

[248] Fix | Delete

auto_fullwidth: false,

[249] Fix | Delete

appearance_image: false,

[250] Fix | Delete

caption_on_overlay:false

[251] Fix | Delete

[252] Fix | Delete

units = ['font_size_caption', 'line_height_caption', 'f_s_c_h'];

[253] Fix | Delete

for (let key in def) {

[254] Fix | Delete

if (settings[key] === def[key]) {

[255] Fix | Delete

delete settings[key];

[256] Fix | Delete

}

[257] Fix | Delete

}

[258] Fix | Delete

if (settings.style_image !== 'image-overlay' && settings.style_image !== 'image-full-overlay') {

[259] Fix | Delete

delete settings.caption_on_overlay;

[260] Fix | Delete

}

[261] Fix | Delete

if (!settings.link_image) {

[262] Fix | Delete

delete settings.param_image;

[263] Fix | Delete

}

[264] Fix | Delete

if (!settings.param_image) {

[265] Fix | Delete

delete settings.image_zoom_icon;

[266] Fix | Delete

}

[267] Fix | Delete

if (settings.auto_fullwidth==='|' || settings.auto_fullwidth==='false') {

[268] Fix | Delete

delete settings.auto_fullwidth;

[269] Fix | Delete

}

[270] Fix | Delete

if (settings.appearance_image==='|' || settings.appearance_image==='false') {

[271] Fix | Delete

delete settings.appearance_image;

[272] Fix | Delete

}

[273] Fix | Delete

if (settings.param_image !== 'lightbox') {

[274] Fix | Delete

delete settings.lightbox_width;

[275] Fix | Delete

delete settings.lightbox_height;

[276] Fix | Delete

}

[277] Fix | Delete

if (!settings.lightbox_width) {

[278] Fix | Delete

delete settings.lightbox_width_unit;

[279] Fix | Delete

}

[280] Fix | Delete

if (!settings.lightbox_height) {

[281] Fix | Delete

delete settings.lightbox_height_unit;

[282] Fix | Delete

}

[283] Fix | Delete

for (let bps = api.breakpointsReverse, i = bps.length - 1; i > -1; --i) {

[284] Fix | Delete

let bp = bps[i];

[285] Fix | Delete

//Image Gradient

[286] Fix | Delete

this.clearImageGradient('background_image', 'background_color', 'background_repeat', 'background_position', bp, settings);

[287] Fix | Delete

this.clearImageGradient('b_i_h', 'bg_c_h', 'b_r_h', 'b_p_h', bp, settings);

[288] Fix | Delete

//Font color

[289] Fix | Delete

this.clearFontColor('font_color_type', 'font_color', 'font_gradient_color', bp, settings);

[290] Fix | Delete

this.clearFontColor('f_c_t_h', 'f_c_h', 'f_g_c_h', bp, settings);

[291] Fix | Delete

//Text Shadow

[292] Fix | Delete

this.clearShadow('text-shadow', 0, bp, settings);

[293] Fix | Delete

this.clearShadow('t_sh_h', 0, bp, settings);

[294] Fix | Delete

this.clearShadow('t_sh_m_t', 0, bp, settings);

[295] Fix | Delete

this.clearShadow('t_sh_m_t_h', 0, bp, settings);

[296] Fix | Delete

//paddings

[297] Fix | Delete

this.clearPadding('padding', bp, settings);

[298] Fix | Delete

this.clearPadding('p_h', bp, settings);

[299] Fix | Delete

this.clearPadding('i_t_p', bp, settings);

[300] Fix | Delete

this.clearPadding('i_t_p_h', bp, settings);

[301] Fix | Delete

this.clearPadding('c_p', bp, settings);

[302] Fix | Delete

this.clearPadding('c_p_h', bp, settings);

[303] Fix | Delete

//margin

[304] Fix | Delete

this.clearPadding('margin', bp, settings);

[305] Fix | Delete

this.clearPadding('m_h', bp, settings);

[306] Fix | Delete

this.clearPadding('title_margin', bp, settings);

[307] Fix | Delete

this.clearPadding('t_m_h', bp, settings);

[308] Fix | Delete

this.clearPadding('i_t_m', bp, settings);

[309] Fix | Delete

this.clearPadding('i_t_m_h', bp, settings);

[310] Fix | Delete

this.clearPadding('c_m', bp, settings);

[311] Fix | Delete

this.clearPadding('c_m_h', bp, settings);

[312] Fix | Delete

//border-radius

[313] Fix | Delete

this.clearPadding('b_ra', bp, settings);

[314] Fix | Delete

this.clearPadding('r_c_h', bp, settings);

[315] Fix | Delete

this.clearPadding('i_t_r_c', bp, settings);

[316] Fix | Delete

this.clearPadding('i_t_r_c_h', bp, settings);

[317] Fix | Delete

this.clearPadding('c_r_c', bp, settings);

[318] Fix | Delete

this.clearPadding('c_r_c_h', bp, settings);

[319] Fix | Delete

//border

[320] Fix | Delete

this.clearBorder('border', bp, settings);

[321] Fix | Delete

this.clearBorder('b_h', bp, settings);

[322] Fix | Delete

this.clearBorder('i_t_b', bp, settings);

[323] Fix | Delete

this.clearBorder('i_t_b_h', bp, settings);

[324] Fix | Delete

//filters

[325] Fix | Delete

this.clearFilter('bl_m', 'css_f', bp, settings);

[326] Fix | Delete

this.clearFilter('_h', 'css_f_h', bp, settings);

[327] Fix | Delete

//width,height

[328] Fix | Delete

this.clearWidth('w', bp, settings);

[329] Fix | Delete

this.clearWidth('ht', bp, settings, 1);

[330] Fix | Delete

//Box Shadow

[331] Fix | Delete

this.clearShadow('b_sh', 1, bp, settings);

[332] Fix | Delete

this.clearShadow('sh_h', 1, bp, settings);

[333] Fix | Delete

this.clearShadow('i_t_sh', 1, bp, settings);

[334] Fix | Delete

this.clearShadow('i_t_sh_h', 1, bp, settings);

[335] Fix | Delete

this.clearShadow('c_sh', 1, bp, settings);

[336] Fix | Delete

this.clearShadow('c_sh_h', 1, bp, settings);

[337] Fix | Delete

//position

[338] Fix | Delete

this.clearPosition('po', bp, settings);

[339] Fix | Delete

//transform

[340] Fix | Delete

this.clearTransform('tr', bp, settings);

[341] Fix | Delete

this.clearTransform('tr-h', bp, settings);

[342] Fix | Delete

//units

[343] Fix | Delete

this.clearUnits(units, bp, settings);

[344] Fix | Delete

}

[345] Fix | Delete

super.builderSave(settings);

[346] Fix | Delete

}

[347] Fix | Delete

async edit(type){

[348] Fix | Delete

await super.edit(type);

[349] Fix | Delete

if((!type || type==='setting') && !this.get('mod_settings').url_image){

[350] Fix | Delete

ThemifyConstructor.afterRun.push(() => {

[351] Fix | Delete

Themify.triggerEvent(ThemifyConstructor.getEl('url_image').parentNode.tfClass('tb_upload_btn')[0], _CLICK_);

[352] Fix | Delete

});

[353] Fix | Delete

}

[354] Fix | Delete

}

[355] Fix | Delete

getImage(data) {

[356] Fix | Delete

const setting = data || this.get('mod_settings'),

[357] Fix | Delete

imgUrl = setting.url_image,

[358] Fix | Delete

img = new Image(32, 32);

[359] Fix | Delete

if (imgUrl) {

[360] Fix | Delete

img.src = imgUrl;

[361] Fix | Delete

if (!api.activeModel) {

[362] Fix | Delete

img.loading = 'lazy';

[363] Fix | Delete

}

[364] Fix | Delete

img.alt = this.getName();

[365] Fix | Delete

return img;

[366] Fix | Delete

}

[367] Fix | Delete

return super.getImage(setting);

[368] Fix | Delete

}

[369] Fix | Delete

preview(data) {

[370] Fix | Delete

let module = createElement(),

[371] Fix | Delete

wrap = createElement('','image-wrap tf_rel tf_mw'),

[372] Fix | Delete

{style_image:imageStyle='image-top',url_image:url} = data,

[373] Fix | Delete

classes = ['module', 'module-image', imageStyle, 'tf_mw'],

[374] Fix | Delete

img,

[375] Fix | Delete

linkParams = {},

[376] Fix | Delete

constructor=this.constructor;

[377] Fix | Delete

if (data.auto_fullwidth) {

[378] Fix | Delete

classes.push('auto_fullwidth');

[379] Fix | Delete

}

[380] Fix | Delete

if (data.caption_on_overlay === 'yes' && ('image-overlay' === imageStyle || 'image-full-overlay' === imageStyle)) {

[381] Fix | Delete

classes.push('active-caption-hover');

[382] Fix | Delete

}

[383] Fix | Delete

if (data.css_image) {

[384] Fix | Delete

classes.push(data.css_image);

[385] Fix | Delete

}

[386] Fix | Delete

if (data.appearance_image) {

[387] Fix | Delete

classes.push(data.appearance_image.split('|').join(' '));

[388] Fix | Delete

}

[389] Fix | Delete

module.className = classes.join(' ');

[390] Fix | Delete

if (url) {

[391] Fix | Delete

img = constructor.setEditableImage(createElement('img'),'url_image','width_image','height_image',data);

[392] Fix | Delete

if (data.alt_image) {

[393] Fix | Delete

img.alt = data.alt_image;

[394] Fix | Delete

}

[395] Fix | Delete

}

[396] Fix | Delete

if (data.link_image) {

[397] Fix | Delete

const linkType = data.param_image;

[398] Fix | Delete

if (linkType === 'lightbox') {

[399] Fix | Delete

const lbParams = [];

[400] Fix | Delete

if (data.lightbox_width) {

[401] Fix | Delete

lbParams.push(data.lightbox_width + (data.lightbox_width_unit || 'px'));

[402] Fix | Delete

}

[403] Fix | Delete

if (data.lightbox_height) {

[404] Fix | Delete

lbParams.push(data.lightbox_height + (data.lightbox_height_unit || 'px'));

[405] Fix | Delete

}

[406] Fix | Delete

if (lbParams.length > 0) {

[407] Fix | Delete

linkParams['data-zoom-config']=lbParams.join('|');

[408] Fix | Delete

}

[409] Fix | Delete

linkParams.class='lightbox-builder themify_lightbox';

[410] Fix | Delete

}

[411] Fix | Delete

else if (linkType === 'newtab') {

[412] Fix | Delete

linkParams.rel= 'noopener';

[413] Fix | Delete

linkParams.target='_blank';

[414] Fix | Delete

}

[415] Fix | Delete

linkParams.href=data.link_image;

[416] Fix | Delete

const link =createElement('a',linkParams);

[417] Fix | Delete

if (linkType && linkType !== 'regular' && data.image_zoom_icon === 'zoom' && imageStyle !== 'image-full-overlay') {

[418] Fix | Delete

const zoom = createElement('span','zoom');

[419] Fix | Delete

zoom.appendChild(api.Helper.getIcon((linkType === 'lightbox' ? 'ti-search' : 'ti-new-window')));

[420] Fix | Delete

link.appendChild(zoom);

[421] Fix | Delete

}

[422] Fix | Delete

if (img) {

[423] Fix | Delete

link.appendChild(img);

[424] Fix | Delete

}

[425] Fix | Delete

wrap.appendChild(link);

[426] Fix | Delete

}

[427] Fix | Delete

else if (img) {

[428] Fix | Delete

wrap.appendChild(img);

[429] Fix | Delete

}

[430] Fix | Delete

[431] Fix | Delete

if (data.mod_title_image) {

[432] Fix | Delete

module.appendChild(constructor.getModuleTitle(data.mod_title_image, 'mod_title_image'));

[433] Fix | Delete

}

[434] Fix | Delete

module.appendChild(wrap);

[435] Fix | Delete

if (data.title_image || data.caption_image) {

[436] Fix | Delete

const content = createElement('','image-content'+(imageStyle === 'image-full-overlay'?' tf_overflow':''));

[437] Fix | Delete

if (data.title_image) {

[438] Fix | Delete

let titleTag =createElement(data.title_tag || 'h3','image-title'),

[439] Fix | Delete

editTag = titleTag;

[440] Fix | Delete

if (data.link_image) {

[441] Fix | Delete

const link =createElement('a',linkParams);

[442] Fix | Delete

titleTag.appendChild(link);

[443] Fix | Delete

editTag = link;

[444] Fix | Delete

}

[445] Fix | Delete

constructor._setEditableContent(editTag,'title_image',data.title_image);

[446] Fix | Delete

content.appendChild(titleTag);

[447] Fix | Delete

}

[448] Fix | Delete

if (data.caption_image) {

[449] Fix | Delete

content.appendChild(constructor._setEditableContent(createElement('','image-caption tb_text_wrap'),'caption_image',data.caption_image));

[450] Fix | Delete

}

[451] Fix | Delete

if (imageStyle === 'image-overlay') {

[452] Fix | Delete

wrap.appendChild(content);

[453] Fix | Delete

} else {

[454] Fix | Delete

module.appendChild(content);

[455] Fix | Delete

}

[456] Fix | Delete

}

[457] Fix | Delete

return module;

[458] Fix | Delete

}

[459] Fix | Delete

};

[460] Fix | Delete

})(tb_app);

[461] Fix | Delete