User:Samwilson/GoogleOCR sandbox.js

function GoogleOcr() {

	var messages = {
		'en': {
			'ocr': 'OCR (sandbox)',
			'button': 'Use Google OCR to extract text from this image',
			'getting-image-info': "Getting image information.",
			'ocr-in-progress': 'OCR in progress',
			'insert': 'Insert',
			'cancel': 'Cancel',
			'no-text': 'No text could be found in the image.'
		}
	};
	var toolUrl = "https://tools.wmflabs.org/ws-google-ocr/api.php";
	var loadingGifUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif';
	var lang = mw.config.get( 'wgUserLanguage' );

	var GoogleOcr = {};
	
	GoogleOcr.Dialog = function googleOcrDialog( config ) {
	    GoogleOcr.Dialog.parent.call( this, config );
	}

	OO.inheritClass( GoogleOcr.Dialog, OO.ui.ProcessDialog );

	GoogleOcr.Dialog.static.name = 'GoogleOcrDialog';
	GoogleOcr.Dialog.static.title = getMsg( 'ocr' );
	GoogleOcr.Dialog.static.size = 'full';
	GoogleOcr.Dialog.static.actions = [
	    { action: 'insert', label: getMsg( 'insert' ), flags: 'primary' },
	    { label: getMsg( 'cancel' ), flags: 'safe' }
	];

	GoogleOcr.Dialog.prototype.getBodyHeight = function () {
		return 600;
	};

	GoogleOcr.Dialog.prototype.initialize = function () {
		var $panel;
		GoogleOcr.Dialog.parent.prototype.initialize.apply( this, arguments );
		this.$img = $( '<img>' )
			.css( 'width', '100%' );
		this.$imgWrap = $( '<div>' )
			.css( 'width', '50%' );
			//.append( this.$img );
		var kartoBox = mw.loader.require( 'ext.kartographer.box' );
		this.map = kartoBox.map( {
			container: this.$imgWrap,
			center: [ 37.7868, -122.3995 ],
			zoom: 11,
			allowFullScreen: true,
			data: [ {
				"type": "Feature",
				"properties": {
					"marker-color": "#3366cc",
					"marker-size": "medium",
					"marker-symbol": ""
				},
				"geometry": {
					"type": "Point",
					"coordinates": [
						-122.39951848983763,
						37.78687738310861
					]
				}
			} ]
		} );
		this.$textarea = $( '<textarea>' )
			.css( { width: '50%' } );
		$panel = $( '<div>' )
			.css( { display: 'flex', height: '100%' } )
			.append( this.$imgWrap, this.$textarea );
		this.$body.append( $panel );
	};

	GoogleOcr.Dialog.prototype.getSetupProcess = function ( data ) {
		var dialog = this;
		return GoogleOcr.Dialog.super.prototype.getSetupProcess.call( this, data )
		.next( function () {
			dialog.pushPending();
			new mw.Api().get( {
				action: 'query',
				prop: 'imageinfo',
				titles: mw.config.get( 'wgPageName' ),
				iiprop: 'url',
				iiurlwidth: 1500
			} )
			.done( dialog.processImageInfoResult.bind( dialog ) )
			.fail( dialog.processImageInfoResult.bind( dialog ) )
			.always( function () { dialog.popPending(); } );
		}, this );
	};

	GoogleOcr.Dialog.prototype.processImageInfoResult = function ( response ) {
		var dialog = this;
		dialog.pushPending();
		if ( response.responseJSON !== undefined && response.responseJSON.error ) {
			console.log(response);
			dialog.popPending();
			mw.notify( mw.message( 'error' ) + ' ' + response.responseJSON.error.code + ' ' + response.responseJSON.error.message );
			return;
		}
		// Get thumb URL.
		var pageId = Object.keys( response.query.pages )[ 0 ];
		var imageUrl = response.query.pages[ pageId ].imageinfo[ 0 ].thumburl;
		var fullUrl = response.query.pages[ pageId ].imageinfo[ 0 ].url;
		//dialog.$img.attr( 'src', imageUrl );
		//this.$imgWrap.zoom( { url: fullUrl } );
		var requestUrl = toolUrl + "?image=" + imageUrl + "&lang="+lang;
		$.getJSON( requestUrl )
			.done( dialog.processOcrResult.bind( dialog ) )
			.fail( dialog.processOcrResult.bind( dialog ) ) // Same handler, for simplicity.
			.always( function () { dialog.popPending(); } );
	};

	GoogleOcr.Dialog.prototype.processOcrResult = function( response ) {
		if ( response.responseJSON !== undefined && response.responseJSON.error ) {
			console.log(response);
			mw.notify( mw.message( 'error' ) + ' ' + response.responseJSON.error.code + ' ' + response.responseJSON.error.message );
			return;
		}
		if ( response.text === undefined || response.text.length === 0 ) {
			mw.notify( getMsg( 'no-text' ) );
			return;
		}
		this.$textarea.val( response.text );
	}

	GoogleOcr.Dialog.prototype.getActionProcess = function ( action ) {
		var dialog = this;
		return GoogleOcr.Dialog.super.prototype.getActionProcess.call( this, action )
			.next( function () {
				if ( action === 'insert' ) {
					textSelectionOpts = {
						peri: '{{inscription |language=' + lang + ' |1=' + dialog.$textarea.val() + '}}',
						replace: true,
						selectPeri: false
					};
					$( '#wpTextbox1' ).textSelection( 'encapsulateSelection', textSelectionOpts );
					dialog.close();
				}
			} );
	};

	function getMsg( msg ) {
		if ( messages[ lang ] !== undefined && messages[ lang ][ msg ] !== undefined ) {
			return messages[ lang ][ msg ];
		} else if ( messages.en[ msg ] !== undefined ) {
			return messages.en[ msg ];
		} else {
			return '⟨' + msg + '⟩';
		}
	}

	function main() {
		var ocrDialog = new GoogleOcr.Dialog();
		OO.ui.getWindowManager().addWindows( [ ocrDialog ] );

		$( '#wpTextbox1' ).on( 'wikiEditor-toolbar-doneInitialSections', function () {
			var ocrButtonDetails = {
				type: 'button',
				icon: 'https://upload.wikimedia.org/wikipedia/commons/b/bd/GoogleOcr_WikiEditor_button.png',
				label: getMsg( 'ocr' ),
				action: {
					type: 'callback',
					execute: function() {
						OO.ui.getWindowManager().openWindow( ocrDialog );
					}
				}
			};
			var ocrButton = {
				section: 'main',
				group: 'insert',
				tools: { 'GoogleOcr': ocrButtonDetails }
			};
			$( "#wpTextbox1" ).wikiEditor( 'addToToolbar', ocrButton );
			$( "a[rel='GoogleOcr']" ).css("width", "42px");
		} );
	}

	main();
}

var isEditing = $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1,
	isFile = mw.config.get( 'wgCanonicalNamespace' ) === 'File';
if ( isEditing && isFile ) {
	var dependencies = [
		'oojs-ui-core',
		'oojs-ui-windows',
		'ext.kartographer.box'
	];
	mw.loader.using( dependencies, $.ready ).then( GoogleOcr );
}