: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
fieldName=tbpDynamic.field_name,
getData = function (callback) {
if ( DynamicCache ===null ) {
key=Themify.hash(tbpDynamic.v+Object.keys(tbpDynamic.items)),
writeStorage=function(value){
sessionStorage.setItem(name,JSON.stringify({'v':value,'h':key}));
readStorage=function () {
if(themifyBuilder.debug){
let result=sessionStorage.getItem(name);
result = JSON.parse(result);
if(result['h']===key && result['v']){
DynamicCache = readStorage();
url: themifyBuilder.ajaxurl,
action: 'tpb_get_dynamic_content_fields',
tb_load_nonce: themifyBuilder.tb_load_nonce
success: function ( data ) {
getPreviewVal = function(vals,callback){
const result=function(v){
if(before!==undefined || after!==undefined){
if(typeof vals!=='string'){
if(!vals || vals['item']===undefined){
req = $.extend(true,{},vals);
after =req['text_after'],
before=req['text_before'];
delete req['text_before'];
delete req['text_after'];
req = JSON.stringify(req);
if(api.Forms.LayoutPart.id && document.body.classList.contains('tbp_app_is_edit')){
postId =api.Instances.Builder[api.builderIndex].el.parentNode.id;
postId = postId.split('-')[1];
postId=typeof tbp_local!=='undefined' && tbp_local['id']!==undefined && !tbp_local['isArchive']?tbp_local['id']:themifyBuilder.post_ID;
const key = Themify.hash(req+postId);
if(CacheRequest[key]===undefined){
url: themifyBuilder.ajaxurl,
action: 'tpb_get_dynamic_content_preview',
tb_load_nonce: themifyBuilder.tb_load_nonce,
success : function( data ) {
CacheRequest[key] = data['error']?data['error']:(data['value']==='' || data['value']==='false' ? null : data['value']);
result(CacheRequest[key]);
result(CacheRequest[key]);
createOptions=function(type,values){
const oldVals= ThemifyConstructor.values,
options_wrap=document.createElement('div'),
Options =Object.values($.extend(true,{}, DynamicCache)),
dynamic=tbpDynamic.items;
options_wrap.className='tbp_dynamic_content_options';
for(let i=Options.length-1;i>-1;--i){
if(Options[i].id==='item'){
let group = Options[i].options;
for(let k in group[j]['options']){
if(dynamic[ k ]!==undefined && dynamic[ k ]['type'].indexOf(type)===-1 ) {
delete group[j]['options'][k];
if(Object.keys(group[j]['options']).length===0){
ThemifyConstructor.values = values;
const form= ThemifyConstructor.create(Options),
opt=form.querySelectorAll('.tb_lb_option');
// prevent Builder from saving these fields individually
for(let i=opt.length-1;i>-1;--i){
opt[i].classList.remove('tb_lb_option','tb_lb_option_child');
ThemifyConstructor.values=oldVals;
options_wrap.appendChild(form);
EnableDc=function(el,init){
let field = el.parentNode.closest('.tb_field'),
parent=field.getElementsByClassName('tb_input')[0],
if(parent!==undefined && parent.parentNode.classList.contains('tb_has_dc')){
const id = getId(field,type);
const index=getRepeatIndex(field);
if(DC[pid][index]!==undefined){
if(values[id]!==undefined){
field.classList.add('tbp_dc_active');
let placeholder=field.getElementsByClassName( 'tbp_dc_input' )[0];
if (placeholder===undefined ) {
const wrap=document.createElement('div');
placeholder=document.createElement('input');
wrap.className='tbp_dc_wrap';
placeholder.className='tbp_dc_input xlarge';
placeholder.setAttribute('readonly',true);
const onTypeChange= function(el){
const dcWrap = el.closest('.tbp_dc_wrap'),
itemType=dcWrap.querySelector('#item'),
items = itemType.closest('.tb_field').nextElementSibling.children,
generalCl='field_general_'+type;
placeholder.value=itemType.options[itemType.selectedIndex].text;
blocks.push(itemType.parentNode);
for(let i=items.length-1;i>-1;--i){
if(v!=='' && (items[i].classList.contains(cl) || items[i].classList.contains(generalCl))){
items[i].style['display']='block';
items[i].style['display']='';
ThemifyConstructor.callbacks();
const vals= update_value( id, blocks,dcWrap );
getPreviewVal(vals,function(res){
/* fallback value in preview */
res = type === 'image'?tbpDynamic.placeholder_image:'{' + vals['item'] + '}';
const item = getField(itemType,id);
obj =tinymce.get( item.id );
obj.setContent( String( res ) );
Themify.triggerEvent(item,'change');
if( type!=='image' && item.nodeName!=='SELECT'){
Themify.triggerEvent(item,'keyup');
placeholder.addEventListener('click',function(e){
e.stopImmediatePropagation();
let options_wrap = this.nextElementSibling;
options_wrap = createOptions(type,values[id]);
$(options_wrap).on( 'change.dc_preview', ':input',function(e){
this.parentNode.appendChild(options_wrap);
const isVisible=options_wrap.style['display']!=='block',
Optitems =ThemifyBuilderCommon.Lightbox.$lightbox[0].getElementsByClassName('tbp_dynamic_content_options');
for(let i=Optitems.length-1;i>-1;--i){
Optitems[i].style['display']='';
const Click = function(e){
if(e.target.closest('.tbp_dc_wrap')===null){
document.removeEventListener('mousedown',Click,{passive:true});
window.top.document.removeEventListener('mousedown',Click,{passive:true});
options_wrap.style['display']='';
$(document).triggerHandler('mouseup');
document.addEventListener('mousedown',Click,{passive:true});
window.top.document.addEventListener('mousedown',Click,{passive:true});
options_wrap.style['display']='block';
options_wrap.style['display']='';
wrap.appendChild(api.Utils.getIcon('ti-pencil'));
wrap.appendChild(placeholder);
if(values[ id ]!==undefined){
const value= values[ id ]['item'],
opt = DynamicCache[0]['options'];
if(opt[i]['options'][value]!==undefined){
placeholder.value=opt[i]['options'][value];
if(type==='image' && ThemifyConstructor.clicked==='styling'){
const imgOptions=field.closest('.tb_tab').getElementsByClassName('tb_image_options');
for(let i=imgOptions.length-1;i>-1;--i){
imgOptions[i].classList.remove('_tb_hide_binding');
ThemifyConstructor.callbacks();
setOrigValue(field,id,type);
else if(init===undefined){
setOrigValue(field,id,type);
if(values[id]!==undefined){
else if(init===undefined){
revertOrigValue(field,id,type);
field.classList.remove('tbp_dc_active');
update_value( id, null,field );
getRepeatIndex=function(el){
return $(el.closest('.tb_repeatable_field')).index();
getRepeatId=function(el){
const item= el.parentNode.closest('.tb_row_js_wrapper');
return item!==null?item.getAttribute('id'):null;
toggleStylesheet=function(disable){
if(api.mode==='visual' && ThemifyConstructor.clicked==='styling'){
let el = api.liveStylingInstance.$liveStyledElmt[0].closest('.tb_active_layout_part');
el=api.liveStylingInstance.$liveStyledElmt[0];
const styles=el.getElementsByClassName('tbp_dc_styles');
for(let i=styles.length-1;i>-1;--i){
styles[i].sheet.disabled =disable;
const cl=type==='image'?'tb_uploader_input':(el.parentNode.closest('.tb_repeatable_field_content')!==null?'tb_lb_option_child':'tb_lb_option'),
item = el.getElementsByClassName(cl)[0];
id=item.getAttribute('data-input-id');
id=item.getAttribute('id');
update_value=function ( key, val,item ) {
index=getRepeatIndex(item);
if(dc[pid][index]!==undefined){
else if( dc[pid][index]!==undefined && dc[pid][index][key]!==undefined){
delete dc[pid][index][key];
const len=Object.keys(dc[pid][index]).length;
if(len===0 || (len===1 && dc[pid][index]['o']!==undefined)){
if ( Object.keys( dc[pid] ).length === 0 || ( Object.keys( dc[pid] ).length === 1 && dc[pid]['repeatable'] !== undefined ) ) {
if(DC[ pid ]===undefined){
DC[ pid ]['repeatable'] = 1; // flag for "builder" field type (repetable fields)
if(DC[pid][index]===undefined){
if(DC[pid][index][key]===undefined){
orig =DC[pid][index][key]['o']!==undefined? DC[pid][index][key]['o']:null;
if(DC[ key ]===undefined){
orig =DC[key]['o']!==undefined? DC[key]['o']:null;
for(let i=val.length-1;i>-1;--i){
let items = val[i].querySelectorAll('input,textarea,select');
for(let j=items.length-1;j>-1;--j){
if(v!=='' && !items[j].parentNode.parentNode.classList.contains('_tb_hide_binding')){
val=api.Utils.clear(values);
DC[pid][index][key] = val;
DC[pid][index][key]['o'] = orig;
hidden.value=JSON.stringify( dc );
getField=function(field,id){
let item = field.closest('.tb_repeatable_field_content');
item=item.querySelector('.tb_lb_option_child[data-input-id="'+id+'"]');
item = ThemifyBuilderCommon.Lightbox.$lightbox[0].querySelector('#'+id);