Syncronize filter tabs between components

App Development
1

I have two components on the same page with identical sets of filter tabs. I’d like to synchronize the components so that clicking on a filter in one component selects the same/matching filter in the other component. I expect this might be possible with some custom javascript. Has anyone done something similiar?

1 Like
2

anyone? @Chem?

3

Here’s some code that can help.

You basically put in all the IDs of the components. Then when you if you click on the nth filter tab, it will click on the nth filter tab of the other components.

Demo can be seen here:

sync tabs

Code:

	var componentToSync = ['component_6', 'component_18']; // add a comma seperated list of component ids here. 

    jQuery('body').not('.not-assigned').on('click', '.filter-tabs > .nav.nav-tabs > li > a', function() {
        if (jQuery(this).hasClass('justClicked')) {
            jQuery(this).removeClass('justClicked');
            return;
        } else {
            var ele = [];
            for(var i in componentToSync) {
                ele.push(componentToSync[i].split('component_').join(''));
            }
            var eleData = '[data-obj-id="'+ele.join('"],[data-obj-id="')+'"]';
            if (jQuery(this).parents(eleData).length > 0) {
                var index = jQuery(this).parent().index();
                jQuery('[data-obj-id="'+ele.join('"] .filter-tabs > .nav.nav-tabs > li:eq('+index+') a,[data-obj-id="')+'"] .filter-tabs > .nav.nav-tabs > li:eq('+index+') a').not(this).addClass('justClicked').trigger('click');
            }
        }
    }).addClass('not-assigned');

I hope this helps, let me know if you have any other questions.

2 Likes
4

Moe, this is fantastic.
Much appreciated!

6 
var componentList = ['component_1', 'component_2', 'component_3'];

var cmp = [];
componentList.forEach(x => {
   cmp.push('[data-obj-id="'+ x.replace('component_', '')+'"]'); 
});
cmp = cmp.join(',');
jQuery('body').on('click', '.filter-tabs > .nav.nav-tabs > li > a', function() {
    if (jQuery(this).hasClass('clicked')) {
        jQuery(this).removeClass('clicked');
        return;
    } else {
        let curPos = $(this).parent().index(),
            wrapper = jQuery(this).parents(cmp),
            components = $(cmp).not(wrapper);
        if(components.length){
            components.find(".filter-tabs li:eq("+ curPos +") a").addClass('clicked').trigger("click")
        }
    }
});
2 Likes