User:Abbe98/common.js

importScript( 'User:Abbe98/mapillary.js' );
importScript( 'User:Abbe98/warper-viewer.js' );
importScript( 'User:Magnus_Manske/sdc_tool.js' );
mw.loader.load( 'https://commons.wikimedia.org/w/index.php?title=User:Lucas_Werkmeister/wd-image-positions.js&action=raw&ctype=text/javascript' );
//importScript( 'User:Abbe98/bbr.js' );

/* TEMP */

mw.loader.using(['oojs-ui-windows', 'oojs-ui-core', 'ext.kartographer.box'], function () {
	var kartoBox = mw.loader.require('ext.kartographer.box'), map;

    if (mw.config.values.wgCanonicalNamespace === 'File') {
        $('#p-views').children('ul').prepend('<li id="georeference-start"><span><a href="#">Georeference</a></span></li>');
        var fileUrl = document.querySelector('#file img').src;
    
        function MainDialog(config) {
            MainDialog.parent.call(this, config);
        }
        OO.inheritClass(MainDialog, OO.ui.ProcessDialog);

        MainDialog.static.name = 'mainDialog';
        MainDialog.static.size = 'larger';
	    MainDialog.static.actions = [
			{ 
				action: 'save', 
				modes: 'edit', 
				label: 'Save', 
				flags: [ 'primary', 'progressive' ] 
			},
			{ 
				modes: 'edit', 
				label: 'Cancel', 
				flags: [ 'safe', 'close' ]
			}
	    ];
        MainDialog.prototype.initialize = function() {
            MainDialog.parent.prototype.initialize.apply(this);
            this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
            this.content.$element.append('<div id="georeference-map" style="height: 400px; width: 50%; float: left;"></div>');
            this.content.$element.append('<div id="georeference-image" style="height: 400px; width: 50%; float: left; text-align: center;"><img style="max-height: 100%; max-width: 100%;" src="' + fileUrl + '"/></div>');
            this.content.$element.append('<svg style="left: 166px; top: 150px; position: absolute; pointer-events: none; z-index: 10000; height: 100px;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="-255 347 100 100" style="enable-background:new -255 347 100 100;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><circle class="st0" cx="-205" cy="397" r="47"/><circle cx="-205" cy="397" r="4.8"/></svg>');
            this.content.$element.append('<div style="clear: both;"></div>');
            this.$body.append(this.content.$element);
        };

        MainDialog.prototype.getBodyHeight = function() {
            return this.content.$element.outerHeight(true);
        };
        
        function timeout(ms) {
		    return new Promise(function(resolve) { setTimeout(resolve, ms);});
		}
        
	    MainDialog.prototype.getActionProcess = function (action) {
			if (action === 'save') {
				var dialog = this;
				// return new OO.ui.Error('Permission denied');
				return new OO.ui.Process(function() {
					timeout(5000).then(function() {
						dialog.close();
					});
				});
			}
			return MainDialog.super.prototype.getActionProcess.call(this, action);
		};

        var dialog = new MainDialog();

        // Create and append a window manager, which opens and closes the window.
        var windowManager = new OO.ui.WindowManager();
        $('body').append(windowManager.$element);
        windowManager.addWindows([dialog]);

        // Open the window!
        $('#georeference-start').find('a').click(function(e) {
            windowManager.openWindow(dialog);

            setTimeout(function () {
            	map = kartoBox.map({
					container: $('#georeference-map')[ 0 ],
					center: [ 37.7868, -122.3995 ],
					zoom: 11,
			        allowFullScreen: false
				});
            }, 200);
        });
    }
}).fail(function(e) { console.log(e); });