Benutzer:Hgzh/CoordinatesPagePopup.js

mw.loader.using( [ 'oojs-ui-core', 'oojs-ui-widgets' ], function ( mw, $, OO ) {
	'use strict';
	
	let SELECTOR = {
		anchor: '#mw-indicator-z8-SeitenKoordinaten',
		mirror: '#SeitenKoordinaten > div:not(.nomobile)', // FIXME
	};
	
	let POPUP = {
		parent: '#mw-content-text .mw-parser-output',
		id:     'SeitenKoordinaten-Popup',
		$label: $( '<b>Geodaten zu dieser Seite</b>' )
	};
	
	SELECTOR.getContent = () => {
		// ------------------------------
		// get content element
		// ------------------------------

		let $mirror = $( SELECTOR.mirror );
		if ( !$mirror.length ) {
			return false;
		}
		POPUP.$content = $mirror.clone();
		return true;
	};
	
	SELECTOR.getAnchor = () => {
		// ------------------------------
		// get anchor element
		// ------------------------------
		
		POPUP.$anchor = $( SELECTOR.anchor );
		if ( !POPUP.$anchor.length ) {
			return false;
		}
		return true;
	};
	
	POPUP.create = () => {
		// ------------------------------
		// create popup element
		// ------------------------------
		
		POPUP.object = new OO.ui.PopupWidget( {
    		$floatableContainer: POPUP.$anchor,
    		label: POPUP.$label,
    		$content: POPUP.$content,
    		id: POPUP.id,
    		align: 'backwards',
    		width: 400,
    		padded: true,
    		head: true,
    		autoClose: true,
    		autoFlip: false,
		} );
	};
	
	POPUP.bind = () => {
		// ------------------------------
		// bind popup to DOM and events
		// ------------------------------
		
		// add popup to DOM
		$( POPUP.parent ).append( POPUP.object.$element );
		
		// bind mouseenter event on anchor
		POPUP.$anchor.on( 'mouseenter', () => {
			POPUP.object.toggle( true );
		});
		
		// bind mouseleave event on popup
		$( '#' + POPUP.id ).on( 'mouseleave', () => {
			POPUP.object.toggle( false );
		});
	};
	
	POPUP.init = () => {
		// ------------------------------
		// initialize popup
		// ------------------------------
		
		// check if anchor and content for popup exist
		if ( SELECTOR.getAnchor() === false || SELECTOR.getContent() === false ) {
			return;
		}
		
		// create and bind popup
		POPUP.create();
		POPUP.bind();
	};
	
	// init popup if document ready
	$( POPUP.init() );

}( mediaWiki, jQuery, OO ) );