link whole .brewItem card to /edit or /share?

[ericscheid]

From #240

The whole card should be either a link to the Edit Page if you are the author, or to the Share page if not the author...still retain the little pop up/:hover element that shows the current 4 options, but anticipate the users click based on authorship when clicking anywhere else on the card.

The common action is to either edit-if-author or view-share-if-visitor. Make that the easiest.

[G-Ambatte]

We should be able to attach an onClick method to the BrewItem which will then contains the logic to redirect appropriately; my initial feeling is that this should be a relatively simple change which should improve the User Page user experience.

[ericscheid]

Better to attach an event listener to a higher container, and from there detect if the element clicked was the brewItem (and not the individual links in the sidebar.

document.querySelectorAll('.published,.unpublished')
.forEach( 
  item => { 
    item.addEventListener( 'click', 
      (event) => {
        // do the hard work here
      }
  } );

The "hard work" would be

1. determining if the click landed inside element with ancestor <div class="links"> (if so just return true and let the brwser handle the click); and failing that
2. determine if the click was on an element with ancestor <div class="brewItem">, then find the appropriate link in the .links div inside that .brewItem.

With item 2, it would be handy if each of the <a> elements had an appropriate identifying class, like this:

<div class="links">
  <a href="/share/mumble" class="share" ...>...</a>
  <a href="/edit/mumble" class="edit" ...>...</a>
  <a href="/download/mumble" class="download" ...>...</a>
  <a class="delete">...</a>
</div>

(This would be preferable to doing document.querySelector('[href^="/edit"]'), as class="edit" is deliberate and explicit, while href^="edit"` might be subject to change for reasons completely unrelated to this click handler. Thus: safer.)

While we're at it, the two divs currently found via document.querySelectorAll('.published,.unpublished') could maybe have a "collection" class also applied (in anticipation of future efforts of having folders/views/collections). Alternatively, the event listener could simply be attached to .phb since we're only handling those clicks with event.target.closest('.brewItem') (and thus the interactive elements within .phb .sort-container can still have their clicks passed to them by default).

I will have the // hard work here bit figured out soon. Fiddling about in the console now...

[ericscheid]

So, something like this, but optimised/linted/etc

document.querySelector('.phb')
  .addEventListener( 'click', 
    (event) => {
      // do the hard work here
      let brewItem = event.target.closest('.brewItem');
      if ( !brewItem ) return true;
      if ( brewItem && event.target.closest('.links') ) return true;
      if ( brewItem ) {
        event.preventDefault();
        let editLink = brewItem.querySelector('[href^="/edit/"]');
        let shareLink = brewItem.querySelector('[href^="/share/"]');
        if ( editLink ) {
          let href = editLink.getAttribute('href');
          window.open(href, '_blank').focus();
          return false;
        }
        if ( shareLink ) {
          let href = shareLink.getAttribute('href');
          window.open(href, '_blank').focus();
          return false;
        }
        return true;
      }
    }
  );

Copy/paste that into your browser console to test.

Tested on my userpage, works (opens the editlink). Tested on some other userpage, works (opens the sharelink).

Both ignore clicks between .brewitems, ignores clicks on the big headings, ignores clicks in the .links (both actual links and black background with no links).