@bigfishtv/cockpit/es5/utils/previewUtils.js

'use strict';

exports.__esModule = true;
exports.init = init;
exports.openPreviewWindow = openPreviewWindow;
exports.closePreviewWindow = closePreviewWindow;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactRedux = require('react-redux');

var _PreviewWindow = require('../components/preview/PreviewWindow');

var _PreviewWindow2 = _interopRequireDefault(_PreviewWindow);

var _preview = require('../actions/preview');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var previewWindow = null; /**
                           * Preview Utilities
                           * @module Utilities/previewUtils
                           */

var store = null;

/**
 * Makes a reference to redux store for notification dispatches
 * @param  {Object} store
 */
function init(_store) {
	store = _store;
}

/**
 * Opens preview window and creates react instance, PreviewWindow is wrapped with store
 */
function openPreviewWindow() {
	// create preview window and the root div
	try {
		previewWindow = window.open('about:blank', 'preview' + Math.round(Math.random() * 100000000));
	} catch (e) {
		return alert('Unable to open preview window, check if you have any popup blockers active');
	}

	if (!previewWindow) alert('Unable to open preview window, check if you have any popup blockers active');

	// render into preview window after a brief timeout (firefox is slow)
	setTimeout(function () {
		var div = previewWindow.document.createElement('div');
		previewWindow.document.body.appendChild(div);

		// when preview window closes, notify primary window
		previewWindow.addEventListener('beforeunload', function () {
			store.dispatch((0, _preview.disablePreview)());
		});

		// when primary window closes, also close preview window
		window.addEventListener('beforeunload', closePreviewWindow);

		// copy cockpit styles from primary window to preview window
		cloneStylesheets(window, previewWindow);

		// stop scrolling on body
		previewWindow.document.body.style.overflow = 'hidden';

		// render the preview window content
		_reactDom2.default.render(_react2.default.createElement(
			_reactRedux.Provider,
			{ store: store },
			_react2.default.createElement(_PreviewWindow2.default, { onTitleChange: function onTitleChange(title) {
					return previewWindow.document.title = '[PREVIEW] ' + title;
				} })
		), div);
	}, 50);
}

/**
 * Closes preview window
 */
function closePreviewWindow() {
	if (previewWindow && previewWindow.close) {
		previewWindow.close();
		previewWindow = null;
	}
}

/**
 * Clones styles from ones window to another
 * @param  {Object} fromWindow 	- reference to a window object
 * @param  {Object} toWindow 	- reference to a window object
 */
function cloneStylesheets(fromWindow, toWindow) {
	var stylesheets = fromWindow.document.head.querySelectorAll('link[rel=stylesheet]');
	for (var i = 0; i < stylesheets.length; i++) {
		var stylesheet = toWindow.document.createElement('link');
		stylesheet.rel = 'stylesheet';
		stylesheet.href = stylesheets.item(i).href;
		stylesheet.href = stylesheet.href; // this is required to add protocol & hostname
		toWindow.document.head.appendChild(stylesheet);
	}
}