Middle click ("open link in a new tab") misbehaves and moves to the targeted page about lairdubois HOT 12 CLOSED

Hi,

This only appear when you click on a creation thumbnail in creations list, no ?
Like this screenshot :

I think the problem is located here

src/ladb/CoreBundle/Resources/views/Common/_masonry-list-thumbnail.part.html.twig (line 11)

<div class="ladb-box"{% block onClickOuter %} onclick="if (event.target.tagName != 'A' && $(event.target).parent().prop('tagName') != 'A') { {% block onClickInner %}document.location = '{{ ladb_entity_url_action(entity) }}';{% endblock %} }"{% endblock %}>

from lairdubois.

Yes, my message was a bit misleading: it only affects thumbnails.

I guess this code is a Masonry given, and you are pulling Masonry automatically through a package manager? I browsed through the options for the lib and didn't find an API to opt-out of this behavior, which is unfortunate.

from lairdubois.

Oh, actually, looking at the path more thoroughly, isn't that one of your Symfony view you'd have full control over? In that case, the fix would be quite easy to implement :)

from lairdubois.

Yes we have full control on this view part. I think that the onclick JS only need to check the event.button property. But as the click on not on a A tag, but just on a DIV or what else it contains, how to do what we want ?
It's easy to avoid the double opening tab :

onclick="if (event.target.tagName != 'A' && $(event.target).parent().prop('tagName') != 'A' && **event.button == 0**) {...}

But it's not realy what we want ;)

from lairdubois.

There are a couple issues to work around:

1. there is no truly cross-browser, reliable JS API to "open in a new tab"; window.open is the closest, but has real shortcomings and cross-compatibility issues;
2. the click event is handled by a div, so direct event propagation/bubbling won't trigger native A tag's behaviors; especially target='_blank', which would come in handy (see below).

The second issue is not really a problem, as long as the processed click event is proxied to a true anchor tag with the appropriate attributes. This tag doesn't even have to pre-exist statically in the page. The other core idea to support arbitrary click behaviors (same tab or new tab) is to monitor which "key" the click was triggered by, as you said. Finally, the trick lies in promoting "open in a new tab" as the default behaviour to work around the first issue, leveraging the built-in target=_blank HTML API (and bonus, it will abide by the user's preferences, eg. could have been set to actually open in the same tab, or a different window!).

Implementing all this using inline JS is tough though, so let me define a function instead:

// Using jQuery to get things done faster, as I noticed it is used on lairdubois.fr
var openMasonryLink = function(e) {
  var link_location = $(e.target).data('link-location');
  if (link_location == undefined) { return; }

  // Emulate an "open in a new tab" kind of click by default.
  if (e.ctrlKey || e.shiftKey || e.metaKey || (e.button && e.button == 1)) {
    var $anchor = $('<a>').hide().attr({
      href: link_location,
      target: '_blank',
      class: 'ladb-masonry-transient-link' // A random uuid could be appended,
                                           // just to be safe in case someone clicks
                                           // really fast…
    });
    // This transient link must first be added to the DOM, then re-fetched from it,
    // for the native click event to properly work. jQuery's click event is
    // not effective in that situation.
    $anchor.appendTo('body');
    var $link = $('.' + $anchor.attr('class'));
    $link[0].click();
    $link.remove();
    e.preventDefault(); // or return false if no bubbling desired, etc.

  // Regular click actually? Let's just move to the specified location.  
  } else {
    document.location = link_location;
  }
};

Now the only required edit in the view is as follow:

<div class="ladb-box"{% block onClick %} onclick="openMasonryLink(event);" data-link-location="{{ ladb_entity_url_action(entity) }}"{% endblock %}>

from lairdubois.

Note: if you read my previous message through your mail client, please check it on github.com instead as I've made some edits which won't be reflected in the mail notification. 🙈

from lairdubois.

@bbeaulant have you got any chance to try it? :)

from lairdubois.

Yes, sorry, I'm a little buzzy this week to try it. But as I can see your code open link in a new _blank and then focus it. Is it what we want ? This is not exactly the default behavior.

from lairdubois.

your code open link in a new _blank and then focus it. Is it what we want ? This is not exactly the default behavior.

No, it's not. On regular clicks it will assign document.location. But if a middle-click / ctrl-click is detected, it will emulate a click on a link with target=_blank, which works just fine cross-browser.

from lairdubois.

Yes, of course the main button click go to the correct location. What I say is that the default "middle-click" behavior is to open the link in a new tab in background, not foreground.

from lairdubois.

👍

Of course having the link focus its tab is not as nice as the native behaviour where it opens in the background, but at least it prevents from messing with the current tab, and that's the best we can achieve through this technique anyway. Thank you very much for incorporating my idea and deploying in production!

from lairdubois.

Thank you for your contribution ;)

from lairdubois.