MediaWiki:Gadget-Global-OWIDPopup.js

var OWIDPopup = {

	messages: {
		en: {
			OWIDPopupConsentMessage: 'The content of Our World in Data is hosted externally. Do you consent to share your IP with them to show this content?',
			OWIDPopupConsentYes: 'Yes',
			OWIDPopupConsentNo: 'No',
			OWIDPopupFrameBack: 'Back',
		},
		es: {
			OWIDPopupConsentMessage: 'El contenido de Our World in Data está alojado externamente. ¿Aceptas compartir tu IP con ellos para mostrar este contenido?',
			OWIDPopupConsentYes: 'Sí',
			OWIDPopupConsentNo: 'No',
			OWIDPopupFrameBack: 'Atrás',
		},
		eu: {
			OWIDPopupConsentMessage: 'OurWorldInDatako edukia kanpoan ostatuta dago. Zure IPa eurekin partekatzea onartzen al duzu eduki hau bistaratzeko?',
			OWIDPopupConsentYes: 'Bai',
			OWIDPopupConsentNo: 'Ez',
			OWIDPopupFrameBack: 'Atzera',
		},
		ja: {
			OWIDPopupConsentMessage: 'Our World in Dataのコンテンツは外部でホストされています。あなたは、コンテンツを表示するためにあなたのIPアドレスを外部と共有することに同意しますか？',
			OWIDPopupConsentYes: 'はい',
			OWIDPopupConsentNo: 'いいえ',
			OWIDPopupFrameBack: '戻る',
		}
	},

	init: function () {
		OWIDPopup.setMessages();
		mw.hook( 'wikipage.content' ).add( OWIDPopup.addPlayButton );
	},

	/**
	 * Set the interface messages in the most appropriate language
	 *
	 * Favor the user language first, the page language second, the wiki language third, and lastly English
	 */
	setMessages: function () {
		var userLanguage = mw.config.get( 'wgUserLanguage' );
		if ( userLanguage in OWIDPopup.messages ) {
			mw.messages.set( OWIDPopup.messages[ userLanguage ] );
			return;
		}
		var pageLanguage = mw.config.get( 'wgPageContentLanguage' );
		if ( pageLanguage in OWIDPopup.messages ) {
			mw.messages.set( OWIDPopup.messages[ pageLanguage ] );
			return;
		}
		var contentLanguage = mw.config.get( 'wgContentLanguage' );
		if ( contentLanguage in OWIDPopup.messages ) {
			mw.messages.set( OWIDPopup.messages[ contentLanguage ] );
			return;
		}
		mw.messages.set( OWIDPopup.messages.en );
	},

	/**
	 * Append a play button ► to every OWIDPopup div
 	 */
	addPlayButton: function ( $content ) {
		$content.find( 'div.OWIDPopup' ).each( function () {
			var $frame = $( this );
			var owid = $frame.data( 'owid' );
			var title = $frame.data( 'title' );
			if ( !owid || !owid.match( /^(grapher|explorers)\/[a-z0-9-]+($|\?)/ ) ) {
				return;
			}
			var data = { owid: owid, title: title };
			var $play = $( '<div class="OWIDPopup-play">►</div>' );
			$play.on( 'click', data, OWIDPopup.showConsent );
			$frame.append( $play );
		} );
	},

	showConsent: function ( event ) {
		// Load dependencies
		var state = mw.loader.getState( 'oojs-ui-windows' );
		if ( state === 'registered' ) {
			mw.loader.using( 'oojs-ui-windows', () => OWIDPopup.showConsent( event ) );
			return;
		}

		var consent = mw.cookie.get( 'OWIDPopupConsent' );
		if ( consent ) {
			OWIDPopup.showFrame( event.data );
		} else {
			var message = mw.msg( 'OWIDPopupConsentMessage' );
			var config = {
				actions: [ {
					action: 'accept',
					label: mw.msg( 'OWIDPopupConsentYes' ),
					flags: 'primary'
				}, {
					action: 'reject',
					label: mw.msg( 'OWIDPopupConsentNo' ),
					flags: 'safe'
				} ]
			};
			OO.ui.confirm( message, config ).done( function ( confirm ) {
				if ( confirm ) {
					mw.cookie.set( 'OWIDPopupConsent', 1 );
					OWIDPopup.showFrame( event.data );
			    }
			} );
		}
	},

	showFrame: function ( data ) {
		var $iframe = $( '<iframe></iframe>' ).attr( {
			src: 'https://ourworldindata.org/' + data.owid,
			width: '100%',
			height: '600px',
			// If we want to be more paranoid we can remove allow-same-origin, however that may cause problems
			// with some ajax requests OWIDPopup makes and will reduce cacheability for minimal gain.
			// A future to-do might be to look into the "credentialess" attribute.
			sandbox: 'allow-scripts allow-top-navigation-by-user-activation allow-same-origin',
			frameborder: 0
		} );
		var config = {
			size: 'full',
			title: data.title,
			actions: [ {
				action: 'accept',
				label: mw.msg( 'OWIDPopupFrameBack' ),
				flags: [ 'primary', 'progressive' ]
			} ]
		};
		OO.ui.alert( $iframe, config );
	}
};

$( OWIDPopup.init );