User:Bargioni/viaf.js

// show useful cluster information from VIAF when hovering P214
// added first 10 titles -- 2024-03-24
// TODO add cache of VIAF data?

importStylesheet( 'User:Bargioni/viaf.css' );

mw.loader.using( 'jquery.ui' ).then( function () {
$( function($) {
     // Check if we're viewing an item
    let qid = mw.config.get( 'wbEntityId' );
    if ( !qid ) {
		return;
    }
    else {
    	Q = qid;
		qid = qid.substring(1);
    }

	let viafs = $('#P214 .wikibase-snakview-value a.external');
	// choose what to do if no P214 are listed
	$('body').append('<div style="display:none" id="VIAF_dialog" title=""></div>');
	$( "#VIAF_dialog" ).dialog({
	  autoOpen: false,
	  buttons: [
		{
		  text: "OK",
		  click: function() {
			$( this ).dialog( "close" );
		  }
		}
	  ]
	});
	viafs.mouseenter(function() {
		// let href = $(this).attr('href');
		// let href_parts = href.split('/');
		// let viafid = href_parts[href_parts.length-1];
		// let title = Q + ' - VIAF ' + viafid;
		var viafid = $(this).text();
		var title = Q + ' - VIAF ' + viafid;
		$( "#VIAF_dialog" )
			.dialog( "option", "title", title )
			.text('Loading '+$(this).attr('href')+'/viaf.json ...')
			.dialog('open');

		// clicking outside the dialog will close it
		var ele = document.getElementById('VIAF_dialog').parentElement;
		document.addEventListener('click',function(e){if(!ele.contains(e.target)) $( "#VIAF_dialog" ).dialog('close')});

		// get cluster from VIAF
		// the browser may complain (in its console) about a Content Security Policy Violation
		// see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
		// Le impostazioni della pagina hanno rilevato il caricamento di una risorsa su https://viaf.org/viaf/305821809/viaf.json (“default-src”). È stata inviata una segnalazione CSP
		// The report will be sent to viaf.org. We have to understand if this action will be considered a violation.
		$.getJSON('https://viaf.org/viaf/'+viafid+'/viaf.json',function(R){
			let H = []; // array for html code that will be displayed inside the dialog window
			if (R.redirect){
				H.push('<div>REDIRECTED TO '+R.redirect.directto+'</div>');
			}
			if (R.scavenged){
				H.push('<div>ABANDONED</div>');
			}
			if (R.mainHeadings) {
				let cluster_elements = R.mainHeadings.data;
				// console.log(cluster_elements); // debug
				H.push('<table>');
				if (!Array.isArray(cluster_elements)) {
					H.push('<tr><td>' + display(cluster_elements));
				}
				else {
					for (let i=0; i < cluster_elements.length; i++) {
						let cluster_element = cluster_elements[i];
						// console.log(cluster_element); // debug
						H.push('<tr><td>' + display(cluster_element));
					}
				}
				H.push('</table>');
				// titles -- added Mar 23, 2024
				if(R.titles && (R.titles.work.title || R.titles.work.length)) {
					H.push('<table width="80%">');
					if (R.titles.work.title) {
						// single title, transform from object to array
						let t = R.titles.work.title; 
						R.titles.work=[]; 
						R.titles.work[0]={}; 
						R.titles.work[0].title = t;
					}
					H.push('<tr><td colspan="2"><b>' + R.titles.work.length + ' titles');
					for (let i = 0; i < R.titles.work.length && i < 10; i++) {
						var W = R.titles.work[i];
						H.push('<tr><td style="text-align:right"><b>'+(i+1)+'<td>' + W.title);
					}
					H.push('</table>');
				}
			}
			$( "#VIAF_dialog" )
					.dialog( "option", "title", title )
					// .dialog( "option", "width", 'auto' )
					.dialog( "option", "width", '700px' )
					.html( H.join('') )
					.dialog( 'open' );
		})
		.fail(function(){alert('INVALID / NON EXISTENT '+viafid)});
		
	});
	// 	viafs.mouseout(function() {
	// 		$( "#VIAF_dialog" ).dialog('close');
	// 	});
} );
} );

function display(cluster_element) {
	let s = '';
	let heading = escapeHtml(cluster_element.text);
	s += '<div class="cluster_element">'+heading+'</div>';
	let sources = cluster_element.sources;
	// console.log(sources); // debug
	if (!Array.isArray(sources.sid)) {
		let source = sources.sid.replace(/\|/,'&nbsp;');
		return s+'<div class="sids"><span class="sid">'+source+'</span></div>';
	}
	s += '<div class="sids">';
	for (let j=0; j < sources.sid.length; j++) {
		let source = sources.sid[j];
		// source is an array of "source|id"
		source = source.replace(/\|/,'&nbsp;');
		s += '<span class="sid">'+source+'</span> ';
	}
	s += '</div>';
	return s;
}

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}