Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@carlosonweb
Last active December 21, 2023 19:38
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save carlosonweb/58559f7821f1a79a106b9d264b8a2071 to your computer and use it in GitHub Desktop.
Save carlosonweb/58559f7821f1a79a106b9d264b8a2071 to your computer and use it in GitHub Desktop.
Make a BB Column Clickable
/**
* Makes a BB Column clickable.
* Pre-requisite: There must be an A Tag contained within the column element.
*/
(function($){
// Exit if BB layout is in edit mode.
if ( 'undefined' != typeof window.FLBuilderConfig ) {
return;
}
$('.clickable-col').css('cursor', 'pointer');
$('.clickable-col').on('click', function(event){
$(this).find('a')[0].click();
});
$('.clickable-col a').on('click', function(event){
event.stopPropagation();
});
})(jQuery);
@zackpyle
Copy link

zackpyle commented Oct 9, 2020

@carlosonweb Suggested update to the targeting as to not happen during editing w/ BB - this becomes quite annoying!

jQuery(document).ready(function($) {
  $("body:not(.fl-builder-edit) .clickable-col").css("cursor", "pointer");
  $("body:not(.fl-builder-edit) .clickable-col").on("click", function(event) {
    $(this)
      .find("a")[0]
      .click();
  });

  $("body:not(.fl-builder-edit) .clickable-col a").on("click", function(event) {
    event.stopPropagation();
  });
});

@carlosonweb
Copy link
Author

Good catch @zackpyle. Thanks for your input. We can also check for window.FLBuilderConfig to see if the layout is in edit mode or on the live page like so:

    if ( 'undefined' != typeof window.FLBuilderConfig ) {
        // Layout is not in BB Edit mode.
    }

I'm updating the code to this:

(function($){

    if ( 'undefined' != typeof window.FLBuilderConfig ) {
        return;
    }
    
    $('.clickable-col').css('cursor', 'pointer');
    $('.clickable-col').on('click', function(event){
        $(this).find('a')[0].click();
    });

    $('.clickable-col a').on('click', function(event){
        event.stopPropagation();
    });
})(jQuery);

@zackpyle
Copy link

👍🏻

@zackpyle
Copy link

zackpyle commented Dec 19, 2023

@carlosonweb Here's a new version I have come up with that handles ctrl/cmd clicks correctly as well as buttons that may handle something else

/**
 * Makes a BB Column clickable.
 * Pre-requisite: There must be an A Tag contained within the column element and a class of clickable-col for the column
 */
jQuery(document).ready(function($) {
    // Exit if BB layout is in edit mode.
    if (typeof window.FLBuilderConfig !== 'undefined') {
        return;
    }

    $('.clickable-col').css('cursor', 'pointer');
    $('.clickable-col').on('click', function(event) {
        const link = $(this).find('a')[0];

        // Prevent link being clicked since we will handle that below
        if (event.target === link) {
            event.preventDefault();
            event.stopPropagation();
        }

        // Make sure the event target is not a button
        if (!$(event.target).is('button')) {
            // Then handle ctrl/cmd click for opening in a new tab
            if (event.ctrlKey || event.metaKey) {
                const newTab = window.open(link.href, '_blank');
                newTab.focus();
            } else {
                window.location.href = link.href;
            }
        }
    });
});

@carlosonweb
Copy link
Author

@zackpyle Awesome code! Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment