IPB/applications/core/interface/js/internalEmbedHandler.js

/*
 * IPS embed handling
 * https://www.invisioncommunity.com
 */
( function () {
	"use strict";

	var _origin;
	var _div;
	var _posting = false;
	var _timer;
	var _timeout = 200; //ms
	var _embedId = '';
	var _embedMaxWidth = null;
	var _initialHeight = 0;

	/**
	 * Init method, called when the document is ready
	 *
	 * @returns {void}
	 */
	function init() {
		// Check for postMessage and JSON support
		if( !window.postMessage || !window.JSON.parse ){
			return;
		}

		// Work out our URL
		_div = ips.utils.get('ipsEmbed');
		var url = ips.utils.parseURL( window.location );

		if( url.protocol == '' || url.protocol == ':' ){
			ips.utils.log( url );
			url.protocol = window.location.protocol;
		}

		// Set our origin
		_origin = url.protocol + '//' + url.host;
		ips.utils.log( "Origin in loader is " + _origin );

		// Hide the content
		_div.style.opacity = '0.00001';

		_initialHeight = ips.utils.getObjHeight( _div );

		// Check for any truncated text
		var truncated = document.querySelectorAll('[data-truncate]');

		if( truncated ){
			for( var n = 0; n < truncated.length; n++ ){
				var size = parseInt( truncated[ n ].getAttribute('data-truncate') || 5 );
				clamp( truncated[ n ], size );
			}
		}

		ips.eventHandler.on( document.body, 'click', clickLink );

		// Set all links to open in a new tab/window
		var links = document.querySelectorAll('a');
		for( var i = 0; i < links.length; i++ ){
			links[i].setAttribute('target', '_blank');
		}

		startTimeout();
	};

	var _showEmbed = function () {
		document.body.className = document.body.className.replace('unloaded ', '');
		ips.utils.fadeIn( _div );
	};

	/**
	 * Starts our main loop, which posts messages to the parent frame as needed
	 *
	 * @returns {void}
	 */
	var startTimeout = function () {

		var currentSize = 0;
		var repeats = 0;

		ips.utils.log("Starting timeout...");

		// Main loop
		_timer = setInterval( function () {
			// What we want to do here is make the loading process more pleasant and less jumpy.
			// To do that, we'll make the embed invisible until we've fetched the same height 6 times
			// in a row (approx 1 second). If that happens we'll assume it has finished loading, and then
			// we'll fade it in and start sending the recorded height to the parent for resizing.

			var height = ips.utils.getObjHeight( _div );

			// If we HAVEN'T started posting our size
			if( !_posting ){
				if( height == currentSize ){
					repeats++;
				} else {
					// The height has changed, so reset our repeat counter
					repeats = 0;
				}

				if( repeats == 6 ){
					_posting = true;
					_showEmbed();
				}
			}

			currentSize = height;

			if( _posting ){
				if( _embedMaxWidth !== null ){
					_postMessage('dims', {
						height: height,
						width: _embedMaxWidth
					});
				} else {
					_postMessage('height', {
						height: height
					});
				}
			}
		}, _timeout);
	};

	/**
	 * Posts a message to the iframe
	 *
	 * @param	{number} 	[pageNo]	Page number to load
	 * @returns {void}
	 */
	var _postMessage = function (method, obj) {
		// Send to parent window
		window.top.postMessage( JSON.stringify( ips.utils.extendObj( obj || {}, {
			method: method,
			embedId: _embedId
		} ) ), _origin );
	};

	/**
	 * Handles link clicks, to check for dialogs. If one is found, the options are passed
	 * up to the parent to display.
	 *
	 * @returns {void}
	 */
	var clickLink = function (e) {
		var link = e.target.closest('a');

		if( link !== null ){
			if( link.hasAttributes() ){
				var output = {};
				var attrs = link.attributes;

				for( var i = attrs.length - 1; i > 0; i-- ){
					if( attrs[i].name !== 'class' && attrs[i].name !== 'title' ){
						output[ attrs[i].name ] = attrs[i].value;
					}
				}

				if( output['data-ipsdialog'] !== undefined ){
					e.preventDefault();

					_postMessage('dialog', {
						url: link.href,
						options: output
					});
				}
			}
		}
	};

	/**
	 * Events sent to the iframe
	 */
	var messageEvents = {
		/**
		 * The parent is ready for messages
		 *
		 * @param 	{object} 	data 	Data from the iframe
		 * @returns {void}
		 */
		ready: function (data) {
			_embedId = data.embedId;
			_postMessage('ok');
		},

		stop: function (data) {
			clearInterval( _timer );
			ips.eventHandler.off( window, 'message', windowMessage );
		},

		responsiveState: function (data) {
			if( data.currentIs === 'phone' ){
				document.body.className += ' ipsRichEmbed_phone';
			} else {
				document.body.className = document.body.className.replace( ' ipsRichEmbed_phone', '' );
			}
		}
	};

	/*******************************************************************************************/
	/* Boring stuff below */
	// Main message handler
	ips.eventHandler.on( window, 'message', windowMessage );

	function windowMessage (e) {
		if( e.origin !== _origin ){
			ips.utils.log( e.origin + 'does not equal' + _origin );
			return;
		}

		try {
			var pmData = JSON.parse( e.data );
			var method = pmData.method;
		} catch (err) {
			ips.utils.error("iframe: invalid data.");
			Debug.error(err.message)
			return;
		}

		if( method && typeof messageEvents[ method ] != 'undefined' ){
			ips.utils.log("Called " + method );
			messageEvents[ method ].call( this, pmData );
		} else {
			ips.utils.log("Method " + method + " doesn't exist");
		}
	};

	ips.utils.contentLoaded( window, function () {
		init();
	});
})();