View source for Leonie/links.js

/**
 * Appends a button to every Item-Page, that will embed two iframe-Graphs, that show the items linking to and linking from this item.
 * > Usage:
 *     Create a page under: https://your.wiki.com/wiki/User:UserName/links.js and paste the code.
 *     In: https://your.wiki.com/wiki/User:UserName/common.js or https://your.wiki.com/wiki/MediaWiki:Common.js (global)
 *     include the script via: importScript("User:UserName/links.js")
 */


var messages, entityid = mw.config.get('wbEntityId');
var div = '#wb-item-' + entityid;

// ----- HTML ----- //

// The link-button to add the link-queries to the page
var links = `
<div id="itemlinks-container" style="background-color:#eaecf0; border:1px solid #c8ccd1; width:65em">
  <span id="itemlinks" class="wikibase-toolbarbutton wikibase-toolbar-item wikibase-toolbar-button wikibase-toolbar-button-add">
    <a href="#" title="View Graph of Links to/from Item">
      <span class="wb-icon"></span>
      see item links
    </a>
  </span>
</div>`;


// The embeded query for backlinks of the current item (i.e. backlinks -> item)
var iframeBack = `
<iframe id="iframe-backlinks" style="width: 100%; height: 50vh; border: none;" 
src="https://query.graphit.ur.de/embed.html#%23defaultView%3AGraph%0APREFIX%20wdt%3A%20%3Chttps%3A%2F%2Fgraphit.ur.de%2Fprop%2Fdirect%2F%3E%0APREFIX%20wd%3A%20%3Chttps%3A%2F%2Fgraphit.ur.de%2Fentity%2F%3E%0Aselect%20distinct%20%3Fpre%20%3FpreLabel%20%3Fitem%20%3FitemLabel%20%3Frgb%20%3FedgeLabel%20%7B%0A%20%20values%20%28%3Fitem%29%20%7B%28wd%3A`
+ entityid + 
`%29%7D%0A%20%20BIND%28%22D0E1E6%22%20as%20%3Frgb%29%0A%0A%20%20OPTIONAL%20%7B%20%3Fpre%20%3Fprop%20%3Fitem.%20%7D%0A%20%20%3Fproperty%20wikibase%3AdirectClaim%20%3Fprop.%0A%20%20%3Fedge%20%3Fdummy%20%3Fprop%20%3B%20rdf%3Atype%20wikibase%3AProperty%0A%20%20%20%20%20%20%20%20%0ASERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%7D"
referrerpolicy="origin" sandbox="allow-scripts allow-same-origin allow-popups" >
</iframe>`;

// The embeded query for frontlinks of the current item (i.e. item -> frontlinks)
var iframeFront = `
<iframe id="iframe-frontlinks" style="width: 100%; height: 50vh; border: none;" 
src="https://query.graphit.ur.de/embed.html#%23defaultView%3AGraph%0APREFIX%20wdt%3A%20%3Chttps%3A%2F%2Fgraphit.ur.de%2Fprop%2Fdirect%2F%3E%0APREFIX%20wd%3A%20%3Chttps%3A%2F%2Fgraphit.ur.de%2Fentity%2F%3E%0Aselect%20distinct%20%3Fitem%20%3FitemLabel%20%3Frgb%20%3Fpost%20%3FpostLabel%20%3FedgeLabel%20%7B%20%0A%20%20values%20%28%3Fitem%29%20%7B%28wd%3A`
+ entityid + 
`%29%7D%0A%20%20BIND%28%22D0E1E6%22%20as%20%3Frgb%29%0A%20%20%0A%20%20OPTIONAL%20%7B%20%3Fitem%20%3Fprop%20%3Fpost.%20%7D%0A%20%20%3Fproperty%20wikibase%3AdirectClaim%20%3Fprop.%0A%20%20%3Fedge%20%3Fdummy%20%3Fprop%20%3B%20rdf%3Atype%20wikibase%3AProperty%0A%20%20%20%20%20%20%20%20%0ASERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%7D"
referrerpolicy="origin" sandbox="allow-scripts allow-same-origin allow-popups" >
</iframe>`;

// A Table showing both queries side by side
var linkView = 
`
<table class="wikitable" id="linkview-table" style="width:65em;">
<tr> 
  <th> <b> Backlinks </b> </th>
  <th> <b> Frontlinks </b> </th>
</tr>
<tr>  
   <td style="width:50%">
    ` + iframeBack +`
  </td>
  <td style="width:50%">
    ` + iframeFront +`
  </td>
</tr>
</table>`;


// ----- FUNCTIONS ----- //

function loadLinks() {
    $(div).append(linkView);
    $('#itemlinks-container').remove();
}

function init() {
    if(entityid) {
        $('#mw-content-text').append(links);
        $('#itemlinks').click( function ( event ) {
                console.log("click");
                event.preventDefault();
                loadLinks();
            });
    }
}

$(init);