: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
viewFeedInstances : function(feed){
self.viewsActive.instanceFeedActive = feed;
ctfBuilder.$forceUpdate();
* Select All Feeds in List
selectAllFeedCheckBox : function(){
if( !self.checkAllFeedsActive() ){
self.feedsList.forEach( function(feed) {
self.feedsSelected.push(feed.id);
* Select Single Feed in List
selectFeedCheckBox : function(feedID){
if(this.feedsSelected.includes(feedID)){
this.feedsSelected.splice(this.feedsSelected.indexOf(feedID),1);
this.feedsSelected.push(feedID);
ctfBuilder.$forceUpdate();
* Check if All Feeds are Selected
checkAllFeedsActive : function(){
self.feedsList.forEach( function(feed) {
if(!self.feedsSelected.includes(feed.id)){
copyToClipBoard : function(value){
const el = document.createElement('textarea');
el.className = 'ctf-fb-cp-clpboard';
document.body.appendChild(el);
document.execCommand('copy');
document.body.removeChild(el);
self.notificationElement = {
text : this.genericText.copiedClipboard,
self.notificationElement.shown = "hidden";
ctfBuilder.$forceUpdate();
/*-------------------------------------------
-------------------------------------------*/
isSectionHighLighted : function(sectionName){
return (self.highLightedSection === sectionName || self.highLightedSection === 'all')
* Enable HightLight Section
enableHighLightSection : function(sectionId){
listPostSection = ['customize_feedlayout', 'customize_colorscheme', 'customize_posts','post_style','individual_elements'],
headerSection = ['customize_header'],
likeBoxSection = ['customize_likebox'],
loadeMoreSection = ['customize_loadmorebutton'],
domBody = document.getElementsByTagName("body")[0];
domBody.classList.remove("no-overflow");
if( listPostSection.includes(sectionId) ){
self.highLightedSection = 'postList';
self.scrollToHighLightedSection("ctf-tweet-items");
}else if( headerSection.includes(sectionId) ){
self.highLightedSection = 'header';
self.scrollToHighLightedSection("ctf-header");
}else if( loadeMoreSection.includes(sectionId) ){
self.highLightedSection = 'loadMore';
self.scrollToHighLightedSection("ctf-more");
self.highLightedSection = 'all';
domBody.classList.remove("no-overflow");
* Scroll to Highlighted Section
scrollToHighLightedSection : function(sectionId){
const element = document.getElementById(sectionId) !== undefined && document.getElementById(sectionId) !== null ?
document.getElementById(sectionId) :
( document.getElementsByClassName(sectionId)[0] !== undefined && document.getElementsByClassName(sectionId)[0] !== null ? document.getElementsByClassName(sectionId)[0] : null );
if(element != undefined && element != null){
const y = element.getBoundingClientRect().top - 120 + window.pageYOffset - 10;
window.scrollTo({top: y, behavior: 'smooth'});
* Enable & Show Color Picker
showColorPickerPospup : function(controlId){
this.customizerScreens.activeColorPicker = controlId;
hideColorPickerPospup : function(){
this.customizerScreens.activeColorPicker = null;
switchCustomizerPreviewDevice : function(previewScreen){
self.customizerScreens.previewScreen = previewScreen;
self.setShortcodeGlobalSettings(true);
ctfBuilder.$forceUpdate();
switchCustomizerTab : function(tabId){
domBody = document.getElementsByTagName("body")[0];
self.customizerScreens.activeTab = tabId;
self.customizerScreens.activeSection = null;
self.customizerScreens.activeSectionData = null;
self.highLightedSection = 'all';
self.dummyLightBoxScreen = false;
domBody.classList.remove("no-overflow");
ctfBuilder.$forceUpdate();
switchCustomizerSection : function(sectionId, section, isNested = false, isBackElements){
self.customizerScreens.parentActiveSection = null;
self.customizerScreens.parentActiveSectionData = null;
self.customizerScreens.parentActiveSection = self.customizerScreens.activeSection;
self.customizerScreens.parentActiveSectionData = self.customizerScreens.activeSectionData;
self.customizerScreens.activeSection = sectionId;
self.customizerScreens.activeSectionData = section;
self.enableHighLightSection(sectionId);
ctfBuilder.$forceUpdate();
switchNestedSection : function(sectionId, section){
self.customizerScreens.activeSection = sectionId;
self.customizerScreens.activeSectionData = section;
var sectionArray = sectionId['sections'];
var elementSectionData = self.customizerSidebarBuilder;
sectionArray.map(function(elm, index){
elementSectionData = (elementSectionData[elm] != undefined && elementSectionData[elm] != null) ? elementSectionData[elm] : null;
if(elementSectionData != null){
self.customizerScreens.activeSection = sectionId['id'];
self.customizerScreens.activeSectionData = elementSectionData;
ctfBuilder.$forceUpdate();
backToPostElements : function(){
individual_elements = self.customizerSidebarBuilder['customize'].sections.customize_posts.nested_sections.individual_elements;
self.customizerScreens.activeSection = 'customize_posts';
self.customizerScreens.activeSectionData= self.customizerSidebarBuilder['customize'].sections.customize_posts;
self.switchCustomizerSection('individual_elements', individual_elements, true, true);
ctfBuilder.$forceUpdate();
changeSettingValue : function(settingID, value, doProcess = true, ajaxAction = false) {
if(Object.keys(self.inActiveExtensions).includes(settingID)){
self.viewsActive.extensionsPopupElement = self.inActiveExtensions[settingID];
self.customizerFeedData.settings[settingID] = value;
if(ajaxAction !== false){
self.customizerControlAjaxAction(ajaxAction, settingID);
if(settingID === 'num' && !self.checkNotEmpty(self.customizerFeedData.settings[settingID])){
self.customizerFeedData.settings[settingID] = 1;
self.regenerateLayout(settingID);
//Shortcode Global Layout Settings
regenerateLayout : function(settingID) {
if( relayoutFeed.includes( settingID ) ){
self.setShortcodeGlobalSettings(true);
//Get Customizer Additional CSS Classes
getAdditionalCustomizerClasses : function(){
additionalCssClasses = '';
return additionalCssClasses;
//Shortcode Global Layout Settings
setShortcodeGlobalSettings : function(flyPreview = false){
customizerSettings = self.customizerFeedData.settings;
if( flyPreview === true ){
jQuery('body').find('.ctf-tweet-media').click(function(event){
if( !self.valueIsEnabled( self.customizerFeedData.settings.disablelightbox ) ){
self.dummyLightBoxScreen = true;
jQuery('body').find('.ctf-more').unbind('click')
detroyCarousel : function(){
customizerSettings = self.customizerFeedData.settings;
//Get feed Containes Classes
getFeedClasses : function(){
customizerSettings = self.customizerFeedData.settings,
feedClasses += ' ctf-type-' + customizerSettings.type;
feedClasses += ' ctf-' + customizerSettings.layout;
feedClasses += self.ctfRebrand ? ' ctf-rebranded' : '';
feedClasses += ' ctf-styles ' + customizerSettings.class;
feedClasses += ' ctf-feed-' + self.customizerFeedData.feed_info.id;
feedClasses += (customizerSettings.tweetpoststyle != undefined) ? ' ctf-' + customizerSettings.tweetpoststyle + '-style' : '';
feedClasses += self.checkNotEmpty( customizerSettings.height ) && customizerSettings.height != 0 ? ' ctf-fixed-height' : '';
feedClasses += self.valueIsEnabled( customizerSettings.autoscroll ) ? ' ctf-autoscroll' : '';
feedClasses += self.valueIsEnabled( customizerSettings.persistentcache ) ? ' ctf-persistent' : '';
feedClasses += customizerSettings.font_method === 'fontfile' ? ' ctf-fontfile' : '';
if(customizerSettings.layout === 'masonry'){
feedClasses += ' masonry-' + customizerSettings.masonrycols + '-desktop';
feedClasses += ' masonry-' + customizerSettings.masonrytabletcols + '-tablet';
feedClasses += ' masonry-' + customizerSettings.masonrymobilecols + '-mobile';
feedClasses += self.getPaletteClass();
* Get Feed Preview Global CSS Class
getPaletteClass : function(context = ''){
colorPalette = self.customizerFeedData.settings.colorpalette;
if(self.checkNotEmpty( colorPalette )){
var feedID = colorPalette === 'custom' ? ('_' + self.customizerFeedData.feed_info.id) : '';
return colorPalette !== 'inherit' ? ' ctf' + context + '_palette_' + colorPalette + feedID : '';
//Get Number of Columns depending on the Preview Screen
getColsPreviewScreen : function(){
customizerSettings = self.customizerFeedData.settings;
if(customizerSettings.layout === 'masonry' || customizerSettings.layout === 'carousel'){
switch (self.customizerScreens.previewScreen) {
return customizerSettings.layout === 'masonry' ? customizerSettings.masonrymobilecols : customizerSettings.carouselmobilecols;
return customizerSettings.layout === 'masonry' ? customizerSettings.masonrytabletcols : customizerSettings.carouseltabletcols;
return customizerSettings.layout === 'masonry' ? customizerSettings.masonrycols : customizerSettings.carouselcols;
getTabletColsClass : function(){
customizerSettings = self.customizerFeedData.settings;
return ' ctf_tab_col_' + parseInt( customizerSettings.colstablet );
getMobileColsClass : function(){
customizerSettings = self.customizerFeedData.settings,
disableMobile = self.valueIsEnabled( customizerSettings.disablemobile );
if(disableMobile === 'false') disableMobile = '';
if ( disableMobile !== ' ctf_disable_mobile' && customizerSettings.colsmobile !== 'same' ) {
var colsmobile = parseInt( customizerSettings.colsmobile ) > 0 ? parseInt( customizerSettings.colsmobile ) : 'auto';
return ' ctf_mob_col_' + colsmobile;
var colsmobile = parseInt( customizerSettings.cols ) > 0 ? parseInt( customizerSettings.cols ) : 4;
return ' ctf_disable_mobile ctf_mob_col_' + parseInt( customizerSettings.cols );
getHeaderClass : function( headerType ){
customizerSettings = self.customizerFeedData.settings,
headerClasses = 'sb_instagram_header ';
headerClasses += 'ctf_feed_type_'+ customizerSettings['type'];
headerClasses += customizerSettings['headerstyle'] === 'centered' && headerType === 'normal' ? ' ctf_centered' : '';
headerClasses += ['medium', 'large'].includes(customizerSettings['headersize']) ? ' ctf_' + customizerSettings['headersize'] : '';
headerClasses += headerType === 'boxed' ? ' ctf_header_style_boxed' : '';
headerClasses += self.getHeaderAvatar() === false ? ' ctf_no_avatar' : '';
headerClasses += self.getPaletteClass('_header');
getHeaderName : function(){
headerData = self.customizerFeedData.headerData;
if( self.hasOwnNestedProperty(headerData, 'name') && self.checkNotEmpty( headerData['name'] ) ){
return headerData['name'];
}else if( self.hasOwnNestedProperty(headerData, 'data.full_name') ){
return headerData['data']['full_name'];
return self.getHeaderUserName();
getHeaderUserName : function(){
headerData = self.customizerFeedData.headerData;
if( self.hasOwnNestedProperty(headerData, 'username') && self.checkNotEmpty( headerData['username'] ) ){
return headerData['username'];
}else if( self.hasOwnNestedProperty(headerData, 'user.username') ){
return headerData['user']['username'];
}else if( self.hasOwnNestedProperty(headerData, 'data.username') ){
return headerData['data']['username'];
getHeaderMediaCount : function(){
headerData = self.customizerFeedData.headerData;
if( self.hasOwnNestedProperty(headerData, 'data.counts.media') ){
return headerData['data']['counts']['media'];
}else if( self.hasOwnNestedProperty(headerData, 'counts.media') ){
return headerData['counts']['media'];
}else if( self.hasOwnNestedProperty(headerData, 'media_count') ){
return headerData['media_count'];
getHeaderFollowersCount : function(){
headerData = self.customizerFeedData.headerData;
if( self.hasOwnNestedProperty(headerData, 'data.counts.followed_by') ){
return headerData['data']['counts']['followed_by'];
}else if( self.hasOwnNestedProperty(headerData, 'counts.followed_by') ){
return headerData['counts']['followed_by'];
}else if( self.hasOwnNestedProperty(headerData, 'followers_count') ){
return headerData['followers_count'];
getHeaderAvatar : function(){
customizerSettings = self.customizerFeedData.settings,
headerData = self.customizerFeedData.headerData,
header = self.customizerFeedData.header;
if( self.checkNotEmpty( customizerSettings['customavatar'] ) ){
return customizerSettings['customavatar'];
}else if( headerData['local_avatar'] != false && self.checkNotEmpty( headerData['local_avatar'] ) ){
return headerData['local_avatar'];
}else if( header['local_avatar_url'] != false && self.checkNotEmpty( header['local_avatar_url'] ) ){
return header['local_avatar_url'];
if( self.hasOwnNestedProperty(headerData, 'profile_picture') ){
return headerData['profile_picture'];
}else if( self.hasOwnNestedProperty(headerData, 'profile_picture_url') ){
return headerData['profile_picture_url'];
}else if( self.hasOwnNestedProperty(headerData, 'user.profile_picture') ){
return headerData['user']['profile_picture'];
}else if( self.hasOwnNestedProperty(headerData, 'data.profile_picture') ){
return headerData['data']['profile_picture'];
getHeaderBio : function(){
customizerSettings = self.customizerFeedData.settings,
headerData = self.customizerFeedData.headerData;
if( self.checkNotEmpty( customizerSettings['custombio'] ) ){
return customizerSettings['custombio'];
}else if( self.hasOwnNestedProperty(headerData, 'data.bio') ){
return headerData['data']['bio'];
}else if( self.hasOwnNestedProperty(headerData, 'bio') ){
return headerData['bio'];
}else if( self.hasOwnNestedProperty(headerData, 'biography') ){
return headerData['biography'];