gfbio_search_visualization.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
	<ModulePrefs title="Search Visualization" author="Database Research Group of Uni Marburg" height="300">
		<Require feature="pubsub-2">
			<Param name="topics">
                <![CDATA[
				<Topic title="GFBio Listener" name="gfbio.search.selectedData.listener"
                	   description="Listens to GFBio Search data" type="string" subscribe="true" />
                ]]>
			</Param>
		</Require>
	</ModulePrefs>
	<UserPref
			name="visualization_html"
			display_name="URL to the gfbio_search_visualization.html"
			required="true"
			default_value="https://vat.gfbio.org/search-widget/gfbio_search_visualization.html"
	/>
	<Content type="html">
	<![CDATA[
        <script type="text/javascript">
        	const userPrefs = new gadgets.Prefs();
        	const visualizationHtml = userPrefs.getString('visualization_html');

            let iframe = undefined;

            /**
             * Receive Liferay event an pass it to the iframe's window.
             * @param topic
             * @param data
             * @param subscriberData
             */
            function receiveVisualizationRequest(topic, data, subscriberData) {
                iframe.contentWindow.postMessage(data, '*');
            }

            // subscribe to the channel as soon as the message hub is ready
            gadgets.HubSettings.onConnect = function(hub, suc, err) {
                gadgets.Hub.subscribe('gfbio.search.selectedData', receiveVisualizationRequest);
            };

            // create iframe
            (function() {
                iframe = document.createElement('iframe');
                iframe.id = 'searchVisualizationFrame';
                iframe.src = visualizationHtml;
                iframe.style.border = 'none';
                iframe.style.margin = 0;
                iframe.style.padding = 0;
                iframe.style.height = '100%';
                iframe.style.width = '100%';
                document.getElementsByTagName('body')[0].appendChild(iframe);
            })();
        </script>
	]]>
	</Content>
</Module>