Edit File by line

(($,api,bodyCl,_CLICK_)=> {

[0] Fix | Delete

"use strict";

[1] Fix | Delete

$.ThemifyGradient = function (element, options) {

[2] Fix | Delete

const defaults = {

[3] Fix | Delete

gradient: $.ThemifyGradient.default,

[4] Fix | Delete

width: 173,

[5] Fix | Delete

height: 15,

[6] Fix | Delete

point: 8,

[7] Fix | Delete

angle: 180,

[8] Fix | Delete

circle: false,

[9] Fix | Delete

type: 'linear', // [linear / radial]

[10] Fix | Delete

onChange() {

[11] Fix | Delete

[12] Fix | Delete

onInit() {

[13] Fix | Delete

}

[14] Fix | Delete

[15] Fix | Delete

$element = $(element);

[16] Fix | Delete

let $pointsContainer,

[17] Fix | Delete

$pointsInfosContent,

[18] Fix | Delete

$pointColor,

[19] Fix | Delete

$pointPosition,

[20] Fix | Delete

$btnPointDelete,

[21] Fix | Delete

_context,

[22] Fix | Delete

_selPoint,

[23] Fix | Delete

points = [];

[24] Fix | Delete

this.isInit = false;

[25] Fix | Delete

this.initSwatchesFlag = false;

[26] Fix | Delete

this.settings = {};

[27] Fix | Delete

this.__constructor = function () {

[28] Fix | Delete

this.settings = {...defaults, ...options};

[29] Fix | Delete

this.update();

[30] Fix | Delete

this.settings.onInit();

[31] Fix | Delete

this.isInit = true;

[32] Fix | Delete

return this;

[33] Fix | Delete

};

[34] Fix | Delete

this.updateSettings = function (options) {

[35] Fix | Delete

this.settings = {...defaults, ...options};

[36] Fix | Delete

this.update();

[37] Fix | Delete

return this;

[38] Fix | Delete

};

[39] Fix | Delete

this.update = function () {

[40] Fix | Delete

this._setupPoints();

[41] Fix | Delete

this._setup();

[42] Fix | Delete

this._render();

[43] Fix | Delete

};

[44] Fix | Delete

this.getCSSvalue = function () {

[45] Fix | Delete

const defCss = [],

[46] Fix | Delete

defDir = this.settings.type === 'radial'?(this.settings.circle ? 'circle,' : ''):this.settings.angle + 'deg,';

[47] Fix | Delete

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

[48] Fix | Delete

defCss.push(points[i][1] + ' ' + points[i][0]);

[49] Fix | Delete

}

[50] Fix | Delete

return this.settings.type + '-gradient(' + defDir + defCss.join(', ') + ')';

[51] Fix | Delete

};

[52] Fix | Delete

this.getString = function () {

[53] Fix | Delete

let out = '';

[54] Fix | Delete

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

[55] Fix | Delete

out += points[i][0] + ' ' + points[i][1] + '|';

[56] Fix | Delete

}

[57] Fix | Delete

return out.substr(0, out.length - 1);

[58] Fix | Delete

};

[59] Fix | Delete

this.setType = function (type) {

[60] Fix | Delete

this.settings.type = type;

[61] Fix | Delete

this.settings.onChange(this.getString(), this.getCSSvalue());

[62] Fix | Delete

};

[63] Fix | Delete

this.setAngle = function (angle) {

[64] Fix | Delete

this.settings.angle = angle;

[65] Fix | Delete

this.settings.onChange(this.getString(), this.getCSSvalue());

[66] Fix | Delete

};

[67] Fix | Delete

this.setRadialCircle = function (circle) {

[68] Fix | Delete

this.settings.circle = circle;

[69] Fix | Delete

this.settings.onChange(this.getString(), this.getCSSvalue());

[70] Fix | Delete

};

[71] Fix | Delete

this._setupPoints = function () {

[72] Fix | Delete

points = [];

[73] Fix | Delete

if (Array.isArray(this.settings.gradient)) {

[74] Fix | Delete

points = this.settings.gradient;

[75] Fix | Delete

}

[76] Fix | Delete

else {

[77] Fix | Delete

points = this._getGradientFromString(this.settings.gradient);

[78] Fix | Delete

}

[79] Fix | Delete

};

[80] Fix | Delete

this._setup = function () {

[81] Fix | Delete

const self = this,

[82] Fix | Delete

fragment = createDocumentFragment(),

[83] Fix | Delete

_container = createElement('',{class: 'themifyGradient tf_rel',tabindex:-1}),

[84] Fix | Delete

pointsInfos = createElement('','gradient-pointer-info'),

[85] Fix | Delete

tmpDiv1=createElement(),

[86] Fix | Delete

oldGradient=element.tfClass('themifyGradient')[0];

[87] Fix | Delete

[88] Fix | Delete

$btnPointDelete = createElement('a',{href:'#',class:'gradient-point-delete tf_close'});

[89] Fix | Delete

$pointColor = createElement('', 'point-color');

[90] Fix | Delete

$pointPosition = createElement('input',{type:'text',class:'point-position'});

[91] Fix | Delete

$pointsContainer = createElement('', 'points');

[92] Fix | Delete

$pointsInfosContent = createElement('','content');

[93] Fix | Delete

[94] Fix | Delete

[95] Fix | Delete

let _canvas = createElement('canvas',{width:self.settings.width,height:self.settings.height});

[96] Fix | Delete

tmpDiv1.style.backgroundColor='#00ff00';

[97] Fix | Delete

$pointColor.appendChild(tmpDiv1);

[98] Fix | Delete

$pointsInfosContent.append($pointColor,createElement('span','gradient_delimiter'),$pointPosition,createElement('span','gradient_percent','%'),$btnPointDelete);

[99] Fix | Delete

pointsInfos.append(createElement('','gradient-pointer-arrow'),$pointsInfosContent);

[100] Fix | Delete

fragment.append($pointsContainer,_canvas,pointsInfos);

[101] Fix | Delete

[102] Fix | Delete

_container.appendChild(fragment);

[103] Fix | Delete

[104] Fix | Delete

if(oldGradient){

[105] Fix | Delete

oldGradient.remove();

[106] Fix | Delete

}

[107] Fix | Delete

element.prepend(_container);

[108] Fix | Delete

// Add swatches HTML

[109] Fix | Delete

if(!element.tfClass('tb_gradient_swatches')[0]){

[110] Fix | Delete

element.appendChild(this.swatchesHTML());

[111] Fix | Delete

this.initSwatches();

[112] Fix | Delete

}

[113] Fix | Delete

[114] Fix | Delete

$pointsInfosContent = $($pointsInfosContent);

[115] Fix | Delete

$pointColor = $($pointColor);

[116] Fix | Delete

$pointPosition = $($pointPosition);

[117] Fix | Delete

$btnPointDelete = $($btnPointDelete);

[118] Fix | Delete

$pointsContainer = $($pointsContainer);

[119] Fix | Delete

_context = _canvas.getContext('2d');

[120] Fix | Delete

[121] Fix | Delete

_canvas = $(_canvas);

[122] Fix | Delete

[123] Fix | Delete

_canvas.off('click').on('click', function (e) {

[124] Fix | Delete

const offset = $(this).offset();

[125] Fix | Delete

let defaultColor = 'rgba(0,0,0, 1)',

[126] Fix | Delete

minDist = 999999999999,

[127] Fix | Delete

clickPosition = e.pageX - offset.left;

[128] Fix | Delete

clickPosition = Math.round((clickPosition * 100) / self.settings.width);

[129] Fix | Delete

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

[130] Fix | Delete

points[i][0] = parseInt(points[i][0]);

[131] Fix | Delete

if ((points[i][0] < clickPosition) && (clickPosition - points[i][0] < minDist)) {

[132] Fix | Delete

minDist = clickPosition - points[i][0];

[133] Fix | Delete

defaultColor = points[i][1];

[134] Fix | Delete

}

[135] Fix | Delete

else if ((points[i][0] > clickPosition) && (points[i][0] - clickPosition < minDist)) {

[136] Fix | Delete

minDist = points[i][0] - clickPosition;

[137] Fix | Delete

defaultColor = points[i][1];

[138] Fix | Delete

}

[139] Fix | Delete

}

[140] Fix | Delete

points.push([clickPosition + '%', defaultColor]);

[141] Fix | Delete

points.sort(self._sortByPosition);

[142] Fix | Delete

self._render();

[143] Fix | Delete

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

[144] Fix | Delete

if (points[i][0] === clickPosition + '%') {

[145] Fix | Delete

self._selectPoint($pointsContainer.find('.point:eq(' + i + ')')[0]);

[146] Fix | Delete

}

[147] Fix | Delete

}

[148] Fix | Delete

if (api.isFrontend) {

[149] Fix | Delete

setTimeout(self._colorPickerPosition, 315);

[150] Fix | Delete

}

[151] Fix | Delete

[152] Fix | Delete

});

[153] Fix | Delete

this.pointEvents();

[154] Fix | Delete

[155] Fix | Delete

};

[156] Fix | Delete

this.pointEvents = function () {

[157] Fix | Delete

const self = this,

[158] Fix | Delete

listener = e=> {

[159] Fix | Delete

const _this=e.target;

[160] Fix | Delete

if(_this.classList.contains('point-position')){

[161] Fix | Delete

let v = parseInt(_this.value.trim());

[162] Fix | Delete

if (isNaN(v)) {

[163] Fix | Delete

v = 0;

[164] Fix | Delete

}

[165] Fix | Delete

else if (v < 0) {

[166] Fix | Delete

v = Math.abs(v);

[167] Fix | Delete

}

[168] Fix | Delete

else if (v >= 98) {

[169] Fix | Delete

v = 98;

[170] Fix | Delete

}

[171] Fix | Delete

if (e.type !== 'focusout') {

[172] Fix | Delete

v = Math.round((v * this.settings.width) / 100);

[173] Fix | Delete

$(_this).closest('.themifyGradient').find('.themify_current_point').css('left', v);

[174] Fix | Delete

this._renderCanvas();

[175] Fix | Delete

}

[176] Fix | Delete

else {

[177] Fix | Delete

_this.value = v;

[178] Fix | Delete

}

[179] Fix | Delete

}

[180] Fix | Delete

};

[181] Fix | Delete

$pointsInfosContent[0].tfOn('focusout keyup',listener,{passive: false});

[182] Fix | Delete

[183] Fix | Delete

$pointsContainer[0].tfOn('keyup',e=>{

[184] Fix | Delete

if (e.code === 'Delete' && doc.activeElement.tagName !== 'INPUT') {

[185] Fix | Delete

$pointPosition.focus();

[186] Fix | Delete

this.removePoint(e);

[187] Fix | Delete

}

[188] Fix | Delete

},{passive: false})

[189] Fix | Delete

.tfOn(_CLICK_,e=>{

[190] Fix | Delete

if(e.target.classList.contains('point')){

[191] Fix | Delete

this._selectPoint(e.target);

[192] Fix | Delete

if (api.isFrontend) {//fix drag/drop window focus

[193] Fix | Delete

this._colorPickerPosition();

[194] Fix | Delete

}

[195] Fix | Delete

}

[196] Fix | Delete

},{passive:true})

[197] Fix | Delete

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

[198] Fix | Delete

if(e.button === 0 && e.target.classList.contains('point')){

[199] Fix | Delete

e.stopImmediatePropagation();

[200] Fix | Delete

let timer;

[201] Fix | Delete

const p=e.target,

[202] Fix | Delete

_startDrag=e=>{

[203] Fix | Delete

element.focus();

[204] Fix | Delete

p.classList.add('tb_gradient_drag_point');

[205] Fix | Delete

bodyCl.add('tb_start_animate','tb_move_drag','tb_gradient_drag');

[206] Fix | Delete

[207] Fix | Delete

max=self.settings.width,

[208] Fix | Delete

marginLeft=parseFloat(getComputedStyle(p).getPropertyValue('margin-left')) || 0,

[209] Fix | Delete

dragX=p.offsetLeft-e.clientX,

[210] Fix | Delete

_move=e=>{

[211] Fix | Delete

e.stopImmediatePropagation();

[212] Fix | Delete

timer=requestAnimationFrame(()=>{

[213] Fix | Delete

let clientX=dragX+e.clientX-marginLeft;

[214] Fix | Delete

if(clientX>max){

[215] Fix | Delete

clientX=max;

[216] Fix | Delete

}

[217] Fix | Delete

else if(clientX<0){

[218] Fix | Delete

clientX=0;

[219] Fix | Delete

}

[220] Fix | Delete

p.style.left=clientX+'px';

[221] Fix | Delete

self._selectPoint(p, true);

[222] Fix | Delete

self._renderCanvas();

[223] Fix | Delete

});

[224] Fix | Delete

[225] Fix | Delete

_up=function(e){

[226] Fix | Delete

if(timer){

[227] Fix | Delete

cancelAnimationFrame(timer);

[228] Fix | Delete

}

[229] Fix | Delete

e.stopImmediatePropagation();

[230] Fix | Delete

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

[231] Fix | Delete

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

[232] Fix | Delete

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

[233] Fix | Delete

bodyCl.remove('tb_start_animate','tb_move_drag','tb_gradient_drag');

[234] Fix | Delete

this.classList.remove('tb_gradient_drag_point');

[235] Fix | Delete

element.focus();

[236] Fix | Delete

timer=null;

[237] Fix | Delete

};

[238] Fix | Delete

p.tfOn('lostpointercapture pointerup',_up, {passive: true,once:true})

[239] Fix | Delete

.tfOn('pointermove', _startDrag,{passive: true,once:true})

[240] Fix | Delete

.tfOn('pointermove', _move, {passive: true})

[241] Fix | Delete

.setPointerCapture(e.pointerId);

[242] Fix | Delete

}

[243] Fix | Delete

},{passive:true});

[244] Fix | Delete

[245] Fix | Delete

};

[246] Fix | Delete

this._render = function () {

[247] Fix | Delete

this._initGradientPoints();

[248] Fix | Delete

this._renderCanvas();

[249] Fix | Delete

};

[250] Fix | Delete

this._colorPickerPosition = function () {

[251] Fix | Delete

const lightbox = $(api.LightBox.el),

[252] Fix | Delete

p = $pointsInfosContent.find('.tfminicolors'),

[253] Fix | Delete

el = p.find('.tfminicolors-panel');

[254] Fix | Delete

if(el.length>0){

[255] Fix | Delete

if ((lightbox.offset().left + lightbox.width()) <= el.offset().left + el.width()) {

[256] Fix | Delete

p.addClass('tb_minicolors_right');

[257] Fix | Delete

}

[258] Fix | Delete

else {

[259] Fix | Delete

p.removeClass('tb_minicolors_right');

[260] Fix | Delete

}

[261] Fix | Delete

}

[262] Fix | Delete

};

[263] Fix | Delete

this._initGradientPoints = function () {

[264] Fix | Delete

const fragment = createDocumentFragment();

[265] Fix | Delete

for (let i = 0, len = points.length; i < len; ++i) {

[266] Fix | Delete

let p=createElement('', 'point');

[267] Fix | Delete

p.style.backgroundColor = points[i][1];

[268] Fix | Delete

p.style.left = ((parseInt(points[i][0]) * this.settings.width) / 100)+'px';

[269] Fix | Delete

[270] Fix | Delete

fragment.appendChild(p);

[271] Fix | Delete

}

[272] Fix | Delete

$pointsContainer[0].replaceChildren(fragment);

[273] Fix | Delete

};

[274] Fix | Delete

this.hexToRgb = function (hex) {

[275] Fix | Delete

// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")

[276] Fix | Delete

hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_m, r, g, b)=>{

[277] Fix | Delete

return r + r + g + g + b + b;

[278] Fix | Delete

});

[279] Fix | Delete

[280] Fix | Delete

const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

[281] Fix | Delete

return result ? {

[282] Fix | Delete

r: parseInt(result[1], 16),

[283] Fix | Delete

g: parseInt(result[2], 16),

[284] Fix | Delete

b: parseInt(result[3], 16)

[285] Fix | Delete

} : null;

[286] Fix | Delete

};

[287] Fix | Delete

this._selectPoint = function (el, is_drag) {

[288] Fix | Delete

if(!el){

[289] Fix | Delete

return;

[290] Fix | Delete

}

[291] Fix | Delete

const self = this;

[292] Fix | Delete

let left = parseInt(el.style.left);

[293] Fix | Delete

$pointPosition.val(Math.round((left / this.settings.width) * 100));

[294] Fix | Delete

left -= 30;

[295] Fix | Delete

if (left < 0 && bodyCl.contains('tb_module_panel_docked')) {

[296] Fix | Delete

left = 3;

[297] Fix | Delete

}

[298] Fix | Delete

$pointsInfosContent[0].parentNode.style.marginLeft=left + 'px';

[299] Fix | Delete

if (is_drag) {

[300] Fix | Delete

return false;

[301] Fix | Delete

}

[302] Fix | Delete

$element.focus();

[303] Fix | Delete

_selPoint = $(el);

[304] Fix | Delete

_selPoint.addClass('themify_current_point').siblings().removeClass('themify_current_point');

[305] Fix | Delete

let bgColor = _selPoint.css('backgroundColor');

[306] Fix | Delete

$element.find('.point-color .tfminicolors').remove();

[307] Fix | Delete

[308] Fix | Delete

// create the color picker element

[309] Fix | Delete

let $input = $pointColor.find('.themify-color-picker');

[310] Fix | Delete

if ($input.length === 0) {

[311] Fix | Delete

$input = $('<input type="text" class="themify-color-picker" />');

[312] Fix | Delete

$input.appendTo($pointColor).tfminicolors({

[313] Fix | Delete

opacity: true,

[314] Fix | Delete

changeDelay: 10,

[315] Fix | Delete

change(value, opacity) {

[316] Fix | Delete

let rgb = self.hexToRgb(value);

[317] Fix | Delete

if (!rgb) {

[318] Fix | Delete

rgb = {r: 255, g: 255, b: 255};

[319] Fix | Delete

opacity = 1;

[320] Fix | Delete

}

[321] Fix | Delete

_selPoint.css('backgroundColor', 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')');

[322] Fix | Delete

self._renderCanvas();

[323] Fix | Delete

}

[324] Fix | Delete

});

[325] Fix | Delete

$element.find('.tfminicolors').first().addClass('tfminicolors-focus');

[326] Fix | Delete

$btnPointDelete.off('click').on('click', this.removePoint.bind(this));

[327] Fix | Delete

}

[328] Fix | Delete

let rgb = bgColor.replace(/^rgba?$|\s+|$$/g, '').split(','),

[329] Fix | Delete

opacity = rgb.length === 4 ? rgb.pop() : 1; // opacity is the last item in the array

[330] Fix | Delete

rgb = this._rgbToHex(rgb);

[331] Fix | Delete

// set the color for colorpicker

[332] Fix | Delete

$input.val(rgb).attr('data-opacity', opacity).data('opacity', opacity).tfminicolors('settings', {value: rgb});

[333] Fix | Delete

};

[334] Fix | Delete

this._renderCanvas = function () {

[335] Fix | Delete

const items = $pointsContainer[0].tfClass('point');

[336] Fix | Delete

points = [];

[337] Fix | Delete

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

[338] Fix | Delete

let position = Math.round((parseInt(items[i].style.left) / this.settings.width) * 100);

[339] Fix | Delete

points.push([position + '%', items[i].style.backgroundColor]);

[340] Fix | Delete

}

[341] Fix | Delete

points.sort(this._sortByPosition);

[342] Fix | Delete

this._renderToCanvas();

[343] Fix | Delete

if (this.isInit) {

[344] Fix | Delete

this.settings.onChange(this.getString(), this.getCSSvalue());

[345] Fix | Delete

}

[346] Fix | Delete

};

[347] Fix | Delete

this._renderToCanvas = function () {

[348] Fix | Delete

const gradient = _context.createLinearGradient(0, 0, this.settings.width, 0);

[349] Fix | Delete

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

[350] Fix | Delete

gradient.addColorStop(parseInt(points[i][0]) / 100, points[i][1]);

[351] Fix | Delete

}

[352] Fix | Delete

_context.clearRect(0, 0, this.settings.width, this.settings.height);

[353] Fix | Delete

_context.fillStyle = gradient;

[354] Fix | Delete

_context.fillRect(0, 0, this.settings.width, this.settings.height);

[355] Fix | Delete

};

[356] Fix | Delete

this._getGradientFromString = function (gradient) {

[357] Fix | Delete

const arr =[],

[358] Fix | Delete

points = gradient.split('|');

[359] Fix | Delete

for (let i = 0, len = points.length; i < len; ++i) {

[360] Fix | Delete

let position,

[361] Fix | Delete

el = points[i],

[362] Fix | Delete

index = el.indexOf('%'),

[363] Fix | Delete

sub = el.substr(index - 3, index);

[364] Fix | Delete

if (sub === '100' || sub === '100%') {

[365] Fix | Delete

position = '100%';

[366] Fix | Delete

}

[367] Fix | Delete

else if (index > 1) {

[368] Fix | Delete

position = parseInt(el.substr(index - 2, index));

[369] Fix | Delete

position += '%';

[370] Fix | Delete

}

[371] Fix | Delete

else {

[372] Fix | Delete

position = parseInt(el.substr(index - 1, index));

[373] Fix | Delete

position += '%';

[374] Fix | Delete

}

[375] Fix | Delete

arr.push([position, el.replace(position, '')]);

[376] Fix | Delete

}

[377] Fix | Delete

return arr;

[378] Fix | Delete

};

[379] Fix | Delete

this._rgbToHex = function (rgb) {

[380] Fix | Delete

const R = rgb[0], G = rgb[1], B = rgb[2],

[381] Fix | Delete

toHex=n=>{

[382] Fix | Delete

n = parseInt(n, 10);

[383] Fix | Delete

if (isNaN(n)) {

[384] Fix | Delete

return '00';

[385] Fix | Delete

}

[386] Fix | Delete

n = Math.max(0, Math.min(n, 255));

[387] Fix | Delete

return '0123456789ABCDEF'.charAt((n - n % 16) / 16) + '0123456789ABCDEF'.charAt(n % 16);

[388] Fix | Delete

};

[389] Fix | Delete

return '#' + toHex(R) + toHex(G) + toHex(B);

[390] Fix | Delete

};

[391] Fix | Delete

this._sortByPosition = function (data_A, data_B) {

[392] Fix | Delete

data_A = parseInt(data_A[0]);

[393] Fix | Delete

data_B = parseInt(data_B[0]);

[394] Fix | Delete

return data_A < data_B ? -1 : (data_A > data_B ? 1 : 0);

[395] Fix | Delete

};

[396] Fix | Delete

this.removePoint = function(e){

[397] Fix | Delete

e.preventDefault();

[398] Fix | Delete

if (points.length > 1) {

[399] Fix | Delete

points.splice(_selPoint.index(), 1);

[400] Fix | Delete

const p=$pointsInfosContent[0].parentNode;

[401] Fix | Delete

p.style.display='none';

[402] Fix | Delete

setTimeout(()=>{

[403] Fix | Delete

p.style.display='';

[404] Fix | Delete

},50);

[405] Fix | Delete

this._render();

[406] Fix | Delete

}

[407] Fix | Delete

};

[408] Fix | Delete

this.swatchesHTML = function(){

[409] Fix | Delete

const fr = createDocumentFragment(),

[410] Fix | Delete

dropdownIcon = createElement('',{class:'tf_cm_dropdown_icon',tabindex:-1}),

[411] Fix | Delete

swatchesContainer = createElement('ul','tb_gradient_swatches tf_scrollbar tf_w'),

[412] Fix | Delete

dropdown = themifyColorManager.makeImportExportDropdown(),

[413] Fix | Delete

addBtn = createElement('button',{class: 'tb_gradient_add_swatch tf_plus_icon',type:'button'});

[414] Fix | Delete

addBtn.tfOn(_CLICK_,this.saveSwatch.bind(this))

[415] Fix | Delete

.appendChild(createElement('span','themify_tooltip',i18n.save_gradient));

[416] Fix | Delete

[417] Fix | Delete

dropdown.tfOn(_CLICK_,e=>{

[418] Fix | Delete

this.swatchesDropdownClicked(e);

[419] Fix | Delete

});

[420] Fix | Delete

dropdownIcon.append(createElement('span','themify_tooltip',i18n.ie_gradient),api.Helper.getIcon('ti-import'),dropdown);

[421] Fix | Delete

swatchesContainer.tfOn(_CLICK_,e=>{

[422] Fix | Delete

this.swatchClicked(e);

[423] Fix | Delete

});

[424] Fix | Delete

[425] Fix | Delete

fr.append(addBtn,dropdownIcon,swatchesContainer);

[426] Fix | Delete

return fr;

[427] Fix | Delete

};

[428] Fix | Delete

this.swatchesDropdownClicked = function ( e ) {

[429] Fix | Delete

e.preventDefault();

[430] Fix | Delete

e.stopPropagation();

[431] Fix | Delete

const target = e.target,

[432] Fix | Delete

classList = target.classList;

[433] Fix | Delete

if(classList.contains('tb_cm_export')){

[434] Fix | Delete

target.parentNode.parentNode.parentNode.blur();

[435] Fix | Delete

themifyColorManager.exportColors( 'gradients' );

[436] Fix | Delete

}

[437] Fix | Delete

else if(classList.contains('tb_cm_import')){

[438] Fix | Delete

target.parentNode.parentNode.parentNode.blur();

[439] Fix | Delete

themifyColorManager.importColors('gradients');

[440] Fix | Delete

}

[441] Fix | Delete

};

[442] Fix | Delete

this.saveSwatch = function () {

[443] Fix | Delete

if('' === this.getString() || '' === this.getCSSvalue())return false;

[444] Fix | Delete

[445] Fix | Delete

const swatches = Object.keys(themifyCM.gradients),

[446] Fix | Delete

css = this.getCSSvalue();

[447] Fix | Delete

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

[448] Fix | Delete

if ( themifyCM.gradients[swatches[i]].css === css ){

[449] Fix | Delete

return null;

[450] Fix | Delete

}

[451] Fix | Delete

}

[452] Fix | Delete

const id = themifyColorManager.UID(),

[453] Fix | Delete

swatch = {

[454] Fix | Delete

id : id,

[455] Fix | Delete

setting : JSON.parse(JSON.stringify(this.settings)),

[456] Fix | Delete

gradient : this.getString(),

[457] Fix | Delete

css : css,

[458] Fix | Delete

points : points

[459] Fix | Delete

};

[460] Fix | Delete

themifyCM.gradients[id] = swatch;

[461] Fix | Delete

this.addSwatch(swatch);

[462] Fix | Delete

themifyColorManager.updateColorSwatches('gradients');

[463] Fix | Delete

};

[464] Fix | Delete

this.addSwatch = function ( swatch, init ) {

[465] Fix | Delete

const sw = createElement('li',{class:'tb_gradient_swatch','data-id':swatch.id});

[466] Fix | Delete

sw.style.background = swatch.css;

[467] Fix | Delete

[468] Fix | Delete

sw.appendChild(createElement('span','tf_delete_swatch tf_close'));

[469] Fix | Delete

if(init){

[470] Fix | Delete

const container = element.parentElement.tfClass('tb_gradient_swatches')[0];

[471] Fix | Delete

container.insertBefore(sw, container.firstChild);

[472] Fix | Delete

}

[473] Fix | Delete

else{

[474] Fix | Delete

const gradients = api.LightBox.el.tfClass('tb_gradient_swatches');

[475] Fix | Delete

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

[476] Fix | Delete

gradients[i].insertBefore(sw.cloneNode(true), gradients[i].firstChild);

[477] Fix | Delete

}

[478] Fix | Delete

}

[479] Fix | Delete

};

[480] Fix | Delete

this.swatchClicked = function(e){

[481] Fix | Delete

e.preventDefault();

[482] Fix | Delete

const target = e.target,

[483] Fix | Delete

classList = target.classList;

[484] Fix | Delete

if(classList.contains('tb_gradient_swatch')){

[485] Fix | Delete

this.selectSwatch(target.dataset.id);

[486] Fix | Delete

}

[487] Fix | Delete

else if(classList.contains('tf_delete_swatch')){

[488] Fix | Delete

this.removeSwatch(target.parentNode.dataset.id);

[489] Fix | Delete

themifyColorManager.updateColorSwatches('gradients');

[490] Fix | Delete

}

[491] Fix | Delete

};

[492] Fix | Delete

this.removeSwatch = function(id){

[493] Fix | Delete

const swatches = api.LightBox.el.querySelectorAll('.tb_gradient_swatch[data-id="'+id+'"]');

[494] Fix | Delete

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

[495] Fix | Delete

swatches[i].remove();

[496] Fix | Delete

}

[497] Fix | Delete

delete themifyCM.gradients[id];

[498] Fix | Delete

};

[499] Fix | Delete