User:Lucas Werkmeister/wd-image-positions.js

/**
 * User script to accompany the Wikidata Image Positions tool,
 * showing “relative position within image” qualifiers on “depicts” statements
 * as areas on a file.
 * 
 * See also https://wd-image-positions.toolforge.org/ .
 */
( function ( mw, $ ) {
    if ( mw.config.get( 'wgNamespaceNumber' ) !== 6 ) {
        return; // not in the File: namespace
    }
    if ( mw.config.get( 'wgAction' ) !== 'view' || mw.config.get( 'wgDiffNewId' ) !== null ) {
    	return; // not a regular file view
    }
    if ( mw.config.get( 'wgArticleId' ) === 0 ) {
    	return; // no such file
    }

    mw.hook( 'wikibase.entityPage.entityLoaded' ).add( function ( entity ) {
    	if ( !entity.statements ) {
    		return; // no statements at all
    	}
    	var statements = [].concat(
    		entity.statements.P180 || [], // depicts
    		entity.statements.P9664 || [] // named place on map
		);
        if ( !statements.some( function ( statement ) {
            return Object.prototype.hasOwnProperty.call( statement, 'qualifiers' ) &&
                Object.prototype.hasOwnProperty.call( statement.qualifiers, 'P2677' );
        } ) ) {
            return; // no relative position within image qualifiers on any relevant statement
        }

        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.href = 'https://wd-image-positions.toolforge.org/static/depicted.css';
        document.head.appendChild( link );
        var style = document.createElement( 'style' );
        style.textContent = '#file .wd-image-positions--depicted { visibility: hidden; }\n' +
            '#file > div:hover .wd-image-positions--depicted { visibility: visible; }';
        document.head.appendChild( style );
        $.get(
            'https://wd-image-positions.toolforge.org/api/v1/depicteds_html/file/' +
            encodeURIComponent( mw.config.get( 'wgTitle' ).replace(/ /g, '_') ) +
            '?uselang=' + mw.config.get( 'wgUserLanguage' )
        ).then( function ( html ) {
            $( '#file a' ).first().append( html );
        }, console.error );
    } );

    function waitForImageAnnotator() {
        var deferred = $.Deferred(),
            delay = 1,
            file = document.getElementById( 'file' );
        if ( file === null && mw.util.getParamValue( 'redirect' ) === 'no' ) {
        	return deferred.promise(); // redirect page
        	// otherwise, if file is null, I’d like to see an error and investigate why –
        	// unclear if we should look up file again in the loop below,
        	// or abort like here
        }
        function check() {
            if ( file.firstElementChild.nodeName.toLowerCase() === 'div' ) {
                deferred.resolve();
            } else {
                setTimeout( check, delay *= 1.5 );
            }
        }
        check();
        return deferred.promise();
    }
    
    waitForImageAnnotator().then( function () {
        $( '#ImageAnnotationHelpButton' ).after(
            '&nbsp;/ <form style="display: inline" action="https://wd-image-positions.toolforge.org/file/' +
            mw.html.escape( encodeURIComponent( mw.config.get( 'wgTitle' ).replace( / /g, '_' ) ) ) +
            '"><button type="submit">Add a Structured Data region</button></form>'
        );
    } );
} )( mediaWiki, jQuery );