User login

Keeping Drupal's contextual links working even when the whole content item is linked offsite or triggering a lightbox

We have a site where one content type (publicity, for news items and awards) are listed, but the whole thing is wrapped in an anchor tag and linked to outside content. To prevent leaving the site before the contextual edit link is shown, i did this:

    /**
     * Allow content editors to reach contextual links without being taken away
     * to a publicity outbound link first.
     */
    $('.grid__item a').on("click tap", function(e) {
        var origtarget = e.originalEvent.originalTarget;
        if (!origtarget) {
          origtarget = e.originalEvent.currentTarget;
        }
        if (origtarget.type === 'button') {
          e.preventDefault();
        }
    });

For another content type on the same site that also never links to its own page, but instead opens in a lightbox if any part of it is clicked, and further had additional effects making it probably impossible to get the contextual links outside of the element triggering the lightbox, i did this:

    $('.lightbox').on("click tap", function(e) {
        var origtarget = e.originalEvent.originalTarget;
        if (!origtarget) {
          origtarget = e.originalEvent.currentTarget;
        }
        if (origtarget.className !== 'trigger focusable'
            && origtarget.innerText !== 'Edit'
            && origtarget.innerText !== 'Delete'
            ) {
            $.featherlight($(this).attr('data-img'));
            e.stopPropagation();
            return false;
        }
    });

There must be a better way, right?

Searched words: 
javascript stop propagation outside link allow inside click

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.