Compatibility with Gumshoe

[Muwak77]

I'm Using Gumshoe which has, unfortunatly a slightly unorthodox approach when rendering charactersheets.

When IncludeLinks is triggered, the sheet is not available yet (due to the dev using react), and there is only a REACT-TARGET. I Fixed it in my private Version but would love to see this in the official release, maybe you can use my approach as an Inspiration:

I added a custom selector

 elementSelectors = [
....
        '.investigator-backlinks'
    ];

IN includeActorLinks in appended a div directly to the container to display the backlinks

 includeActorLinks(sheet, html, data) {            
        if (html.hasClass("investigator sheet actor")) {

            var existingDiv = html;                    
            var newDiv = $("<div>").addClass("investigator-backlinks").text("");                      
            existingDiv.append(newDiv);

        }        
        this.includeLinks(html, data.actor);
    }

In IncludeLinks I added a variable to make shure empty divs are not displayed (as i wanted it as a sidebar (see css) and empty sidebars don't look good and give players a hint that there ARE links

...
heading.append('Linked from');
        let isEmpty=true;

...
 if(isEmpty==false) {
            if (element === undefined || element.length === 0) {
                // the callback is (presumably) directly on what we want to modify
                html.parent().append(linksDiv);
            }
            else {
                // the callback is on a parent of what we want to modify
                element.append(linksDiv);
            }
        }

Last i added som CSS to make it pretty

.investigator-backlinks {
  right: 0;
  top: 0;
  position: absolute;
  width: 250px;    
  overflow-x:hidden;

  height: auto;
  transform: translateX(calc(100% + 5px));
  z-index: 9999;
  /* background: magenta; */

}

.investigator-backlinks .journal-backlinks{
  background-color:#00000088;
  border-radius:3px;
  box-shadow: 2px 2px 2px 2px #000000;
}
.investigator-backlinks ul {
  display: flex;
  flex-wrap: wrap;
}

.investigator-backlinks li {
  display:block;
  width:100%;
}

Result looks decent

[jtracey]

Hmm, some of this looks generally useful, but I think we'll also need to add a setting for custom selectors -- not really tenable to add support for every system with custom elements, but I'm also not sure how easy it would be to add such a setting in such a way it usefully modifies whatever html/css it's being thrown at.

[Muwak77]

maybe a combined approach is the way to go:

Allow users to specify which fields in a sheet (this should IMHO be extended to items as well) shall be queried for links but in non Journal entres you don't attach the link-list to a certain control but attach it to the side of the sheet as i did it for Gumshoe.

Doing it like this makes Journal-backlinks independent of the format of the sheet and/or implementations like react where the sheet is not rendered yet when the JBL-hook is called.

We could even make it collabsible.