: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
control: {event: 'change'},
control: {event: 'change'},
control: {event: 'change'},
control: {event: 'change'},
yes : { show : [ 'w', 'h', 'd' ] },
no : { hide : [ 'w', 'h', 'd' ] }
wrap_class : 'tb_disable_dc'
wrap_class : 'tb_disable_dc'
_create(data, type, id, vals, isRemovable) {
const opt = data.options[type],
li = createElement('li',{class:'tb_sort_fields_item','data-type':type},i18n[opt.label] || opt.label),
arrow = createElement('span','tb_sort_field_dropdown_pointer');
if (isRemovable === true) {
if (vals !== undefined) {
key = this._find(vals, type, true);
const wrap = api.LightBox.el.tfClass(data.id)[0];
if (wrap !== undefined) {
if (wrap.querySelector('[data-id="' + id + '"]') === null) {
else if (vals !== undefined) {
key = this._find(vals, id);
const remove = createElement('span',{class:'tb_sort_fields_remove tf_close',title:i18n.delete}),
input = createElement('input',{type:'hidden'});
if (key !== false && vals[key].val !== undefined) {
input.value = JSON.stringify(vals[key].val);
li.append(api.Helper.getIcon('ti-pencil'), arrow, input, remove);
el.tfOn('pointerdown', function (e) {
if (e.button === 0 && e.target.parentNode === this) {
doc = this.ownerDocument,
parentNode = item.parentNode;
e.stopImmediatePropagation();
let {clientX:x,clientY:y} = e;
} else if (x > box.right) {
} else if (y > box.bottom) {
const moveTo = doc.elementFromPoint(x, y),
clientX = x - holderWidth - box.left,
clientY = y - holderHeight - box.top;
holder.style.transform = 'translate(' + clientX + 'px,' + clientY + 'px)';
if (moveTo && moveTo !== item && moveTo.classList.contains('tb_sort_fields_item')) {
const side = y > prevY || x > prevX ? 'bottom' : 'top';
if (dir !== side || theLast !== moveTo) {
side === 'bottom' ? moveTo.after(clone) : moveTo.before(clone);
e.stopImmediatePropagation();
topBodyCl.add('tb_start_animate', 'tb_move_drag');
parentNode.classList.add('tb_sort_start');
if (typeof tinyMCE !== 'undefined') {
const items = parentNode.tfClass('tb_lb_wp_editor');
for (let i = items.length - 1; i > -1; --i) {
editors[id] = tinymce.get(id).getContent();
tinyMCE.execCommand('mceRemoveEditor', false, id);
holder = this.cloneNode(true);
holder = this.cloneNode(true);
holder.tfClass('tb_sort_field_dropdown')[0]?.remove();
clone = holder.cloneNode(true);
holder.className += ' tb_sort_handler';
clone.classList.add('tb_current_sort');
this.style.display = 'none';
this.after(clone, holder);
const b = holder.getBoundingClientRect();
box = parentNode.getBoundingClientRect();
holderHeight = (b.height / 2) - parentNode.offsetTop;
holderWidth = (b.width / 2) - parentNode.offsetLeft;
this.tfOff('pointermove', start, {passive: true, once: true})
.tfOff('pointermove', move, {passive: true})
.tfOff('lostpointercapture pointerup', up, {passive: true, once: true});
if (typeof tinyMCE !== 'undefined') {
for (let id in editors) {
tinyMCE.execCommand('mceAddEditor', false, id);
tinymce.get(id).setContent(editors[id]);
self.control.preview(parentNode, null, {repeat: true});
Themify.triggerEvent(parentNode, 'sortable');
parentNode.classList.remove('tb_sort_start');
topBodyCl.remove('tb_start_animate', 'tb_move_drag');
theLast = holder = dir = prevY = prevX = editors = doc = holderHeight = holderWidth = box = item = clone = null;
item.tfOn('lostpointercapture pointerup', up, {passive: true, once: true})
.tfOn('pointermove', start, {passive: true, once: true})
.tfOn('pointermove', move, {passive: true})
.setPointerCapture(e.pointerId);
_find(values, id, byType) {
for (let i = values.length - 1; i > -1; --i) {
if (values[i].id === id || (byType === true && id === values[i].type)) {
_edit(self, data, vals, el) {
let type = el.dataset.type,
wrap = el.tfClass('tb_sort_field_dropdown')[0];
wrap = createElement('','tb_sort_field_dropdown tb_sort_field_dropdown_' + type);
options = data.options[type].options || this._getDefaults(type, self);
if (type !== 'text' && !data.options[ type ].no_global_options) {
options = options.concat(this._getGlobalOptions(self));
self.is_repeat = self.is_sort = true;
if (vals !== undefined) {
const isNew = !!el.dataset.new,
by = isNew === true ? type : id,
key = this._find(vals, by, isNew);
if (key !== false && vals[key].val !== undefined) {
orig = api.Helper.cloneObject(self.values);
self.values = vals[key].val;
wrap.appendChild(self.create(options));
self.is_sort = self.is_repeat = orig = null;
if (!el.classList.contains('current')) {
el.classList.add('current');
const _close = function (e) {
if (el.contains(e.target) || (Themify_Icons.target && el.contains(Themify_Icons.target[0]) && this.tfId('themify_lightbox_fa').style.display === 'block')) {
el.classList.add('current');
el.classList.remove('current');
this.tfOff(e.type, _close, {passive: true});
topWindowDoc.tfOn('pointerdown', _close, {passive: true});
el.parentNode.removeChild(el);
self.control.preview(p, null, {repeat: true});
Themify.triggerEvent(p, 'delete');
const wrapper = createElement('','tb_sort_fields_wrap tf_box tf_rel tf_w'),
plus = createElement('',{class:'tb_ui_dropdown_label tb_sort_fields_plus tf_plus_icon',tabindex:-1}),
plusWrap = createElement('','tb_sort_fields_plus_wrap'),
ul = createElement('ul','tf_scrollbar'),
item = createElement('ul','tb_sort_fields_parent'),
values = self.values[data.id]?.slice(0) || [];
if (self.is_repeat === true) {
item.dataset.inputId = data.id;
item.className += self.is_sort === true ? ' tb_lb_sort_child' : ' tb_lb_option_child';
item.className += ' tb_lb_option';
for (let i in data.options) {
ul.appendChild(this._create(data, i));
for (let i = 0; i < values.length; ++i) {
if (self.is_new !== true || values[i].show === true) {
item.appendChild(this._create(data, values[i].type, values[i].id, values, true));
wrapper.tfOn(_CLICK_, e => {
const li = e.target.tagName === 'LI' ? e.target : e.target.parentNode;
if (li.tagName === 'LI') {
if (e.target.classList.contains('tb_sort_fields_remove')) {
this._remove(self, e.target);
if (li.closest('.tb_sort_fields_plus_wrap')) {
item.appendChild(this._create(data, e.target.dataset.type, null, values, true));
self.control.preview(item, null, {repeat: true});
this._edit(self, data, values, li);
plusWrap.append(plus, ul);
wrapper.append(item, plusWrap);
if (self.is_new === true) {
self.afterRun.push(() => {
self.control.preview(item, null, {repeat: true});
const wrapper = createElement('','tb_multi_fields tb_fields_count_' + data.options.length);
wrapper.appendChild(self.create(data.options));
_controlChange(el, btn_opacity, data) {
opacity: data.opacity === undefined ? true : !!data.opacity,
swatches: themifyColorManager.toColorsArray(),
const box = api.LightBox.el.getBoundingClientRect(),
p = $el.closest('.tfminicolors'),
panel = p.find('.tfminicolors-panel');
panel.css('visibility', 'hidden').show();//get offset
p[0].classList.toggle('tfminicolors_right', ((box.left + box.width) <= panel.offset().left + panel.width()));
panel.css('visibility', '').hide();
themifyColorManager.initColorPicker(this);
Themify.triggerEvent(this, 'themify_builder_color_picker_show', {id: id});
Themify.triggerEvent(this, 'themify_builder_color_picker_hide', {id: id});
} else if (0 >= parseFloat(opacity)) {
if (!that._is_typing && opacity !== doc.activeElement) {
btn_opacity.value = opacity;
if (hex && 0 >= parseFloat($(this).tfminicolors('opacity'))) {
$(this).tfminicolors('opacity', 0);
if ( hex && ! hex.startsWith( 'var' ) ) {
hex = hex.indexOf('--') === 0 ? 'var(' + hex + ')' : $(this).tfminicolors('rgbaString');
Themify.triggerEvent(this, 'themify_builder_color_picker_change', {id: id, val: hex});
const callback = function (e) {
let opacity = parseFloat(this.value.trim().replace(',', '.'));
if (opacity > 1 || isNaN(opacity) || opacity < 0) {
opacity = !el.value ? '' : 1;
that._is_typing = 'keyup' === e.type;
$el.tfminicolors('opacity', opacity);
btn_opacity.tfOn('blur keyup', callback, {passive: true});
el.setAttribute('data-tfminicolors-initialized', true);
setColor(input, swatch, opacityItem, val) {
if (val === 'transparent') {
isVar = val.indexOf('--') === 0;
color = ThemifyStyles.toRGBA(val);
} else if (0 >= parseFloat(opacity)) {
if (!color.includes('#')) {
input.parentNode.classList.toggle('tfminicolors-var-input', isVar);
swatch.style.background = color;
input.dataset.opacity = swatch.style.opacity = opacityItem.value = opacity;
const input = self.getEl(id);
const p = input.parentNode;
this.setColor(input, p.tfClass('tfminicolors-swatch-color')[0], p.nextElementSibling, v);
const f = createDocumentFragment(),
wrapper = createElement('','tfminicolors_wrapper'),
tfminicolors = createElement('','tfminicolors tfminicolors-theme-default'),
input = createElement('input',{type:'text',class:'tfminicolors-input',autocomplete:'off'}),
opacity = createElement('input',{class:'color_opacity',step:.1,min:0,max:1,type:'number'}),
swatch = createElement('span', 'tfminicolors-swatch tfminicolors-sprite tfminicolors-input-swatch'),
span = createElement('span','tfminicolors-swatch-color tf_abs'),
let v = self.getStyleVal(data.id);
if (data.class !== undefined) {
input.className += ' ' + data.class;
if (self.is_repeat === true) {
input.className += self.is_sort === true ? ' tb_lb_sort_child' : ' tb_lb_option_child';
input.dataset.inputId = data.id;
input.className += ' tb_lb_option';
swatch.appendChild(span);
tfminicolors.append(input, swatch);
wrapper.append(tfminicolors, opacity);
self._initControl(input, data);
swatch.tfOn(_CLICK_, () => {
wrapper.insertAdjacentElement('afterbegin', input);