patternplate-client/application/components/common/frame/index.js

Universal javascript client application for patternplate

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.default = undefined;

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _class2, _temp;

var _autobindDecorator = require('autobind-decorator');

var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _lodash = require('lodash');

var _pureRenderDecorator = require('pure-render-decorator');

var _pureRenderDecorator2 = _interopRequireDefault(_pureRenderDecorator);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _bind = require('./bind');

var _bind2 = _interopRequireDefault(_bind);

var _handles = require('./handles');

var _handles2 = _interopRequireDefault(_handles);

var _relay = require('./relay');

var _relay2 = _interopRequireDefault(_relay);

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

var Frame = (0, _pureRenderDecorator2.default)(_class = (0, _autobindDecorator2.default)(_class = (_temp = _class2 = function (_Component) {
	(0, _inherits3.default)(Frame, _Component);

	function Frame() {
		(0, _classCallCheck3.default)(this, Frame);
		return (0, _possibleConstructorReturn3.default)(this, (Frame.__proto__ || (0, _getPrototypeOf2.default)(Frame)).apply(this, arguments));
	}

	(0, _createClass3.default)(Frame, [{
		key: 'handleDiagonalDrag',
		value: function handleDiagonalDrag(e) {
			var rect = (0, _reactDom.findDOMNode)(this.ref).getBoundingClientRect();
			this.props.resize({
				y: Math.round(e.pageY - rect.top),
				x: Math.round(e.pageX - rect.left)
			});
		}
	}, {
		key: 'handleHorizontalSubmit',
		value: function handleHorizontalSubmit(e) {
			this.props.resize({
				y: e.target.value
			});
		}
	}, {
		key: 'handleHorizontalDrag',
		value: function handleHorizontalDrag(e) {
			var rect = (0, _reactDom.findDOMNode)(this.ref).getBoundingClientRect();
			this.props.resize({
				y: Math.round(e.pageY - rect.top)
			});
		}
	}, {
		key: 'handleVerticalSubmit',
		value: function handleVerticalSubmit(e) {
			this.props.resize({
				x: e.target.value
			});
		}
	}, {
		key: 'handleVerticalDrag',
		value: function handleVerticalDrag(e) {
			var rect = (0, _reactDom.findDOMNode)(this.ref).getBoundingClientRect();
			this.props.resize({
				x: Math.round(e.pageX - rect.left)
			});
		}
	}, {
		key: 'saveRef',
		value: function saveRef(ref) {
			this.ref = ref;
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			var props = this.props;


			var onLoad = function onLoad(e) {
				(0, _bind2.default)(_this2.ref, _this2.props);
				props.onLoad(e);
			};

			var frameClassName = (0, _classnames2.default)('iframe', {
				'iframe--resizeable': props.resizeable
			});

			var frameResizeClassName = (0, _classnames2.default)('frame__resize-container', 'pattern__frame');

			var style = props.resizeable ? {
				width: props.width,
				height: props.height
			} : {};

			return _react2.default.createElement(
				'div',
				{ className: props.className },
				_react2.default.createElement(
					'div',
					{ className: frameResizeClassName, style: style },
					_react2.default.createElement('iframe', {
						className: frameClassName,
						onLoad: (0, _relay2.default)(onLoad, props.onError),
						ref: this.saveRef,
						src: props.src,
						sandbox: props.sandbox,
						onKeyDown: this.handleKeyDown
					}),
					props.resizeable && _react2.default.createElement(_handles2.default, {
						height: props.height,
						onDragDiagonal: this.handleDiagonalDrag,
						onDragHorizontal: this.handleHorizontalDrag,
						onDragVertical: this.handleVerticalDrag,
						onSubmitHorizontal: this.handleHorizontalSubmit,
						onSubmitVertical: this.handleVerticalSubmit,
						width: props.width
					})
				)
			);
		}
	}]);
	return Frame;
}(_react.Component), _class2.displayName = 'Frame', _class2.defaultProps = {
	resize: _lodash.noop
}, _temp)) || _class) || _class;

exports.default = Frame;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NvdXJjZS9hcHBsaWNhdGlvbi9jb21wb25lbnRzL2NvbW1vbi9mcmFtZS9pbmRleC5qcyJdLCJuYW1lcyI6WyJGcmFtZSIsImUiLCJyZWN0IiwicmVmIiwiZ2V0Qm91bmRpbmdDbGllbnRSZWN0IiwicHJvcHMiLCJyZXNpemUiLCJ5IiwiTWF0aCIsInJvdW5kIiwicGFnZVkiLCJ0b3AiLCJ4IiwicGFnZVgiLCJsZWZ0IiwidGFyZ2V0IiwidmFsdWUiLCJvbkxvYWQiLCJmcmFtZUNsYXNzTmFtZSIsInJlc2l6ZWFibGUiLCJmcmFtZVJlc2l6ZUNsYXNzTmFtZSIsInN0eWxlIiwid2lkdGgiLCJoZWlnaHQiLCJjbGFzc05hbWUiLCJvbkVycm9yIiwic2F2ZVJlZiIsInNyYyIsInNhbmRib3giLCJoYW5kbGVLZXlEb3duIiwiaGFuZGxlRGlhZ29uYWxEcmFnIiwiaGFuZGxlSG9yaXpvbnRhbERyYWciLCJoYW5kbGVWZXJ0aWNhbERyYWciLCJoYW5kbGVIb3Jpem9udGFsU3VibWl0IiwiaGFuZGxlVmVydGljYWxTdWJtaXQiLCJkaXNwbGF5TmFtZSIsImRlZmF1bHRQcm9wcyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7OztBQUNBOzs7O0FBQ0E7O0FBQ0E7Ozs7QUFDQTs7OztBQUNBOztBQUVBOzs7O0FBQ0E7Ozs7QUFDQTs7Ozs7O0lBSXFCQSxLOzs7Ozs7Ozs7O3FDQWdCREMsQyxFQUFHO0FBQ3JCLE9BQU1DLE9BQU8sMkJBQVksS0FBS0MsR0FBakIsRUFBc0JDLHFCQUF0QixFQUFiO0FBQ0EsUUFBS0MsS0FBTCxDQUFXQyxNQUFYLENBQWtCO0FBQ2pCQyxPQUFHQyxLQUFLQyxLQUFMLENBQVdSLEVBQUVTLEtBQUYsR0FBVVIsS0FBS1MsR0FBMUIsQ0FEYztBQUVqQkMsT0FBR0osS0FBS0MsS0FBTCxDQUFXUixFQUFFWSxLQUFGLEdBQVVYLEtBQUtZLElBQTFCO0FBRmMsSUFBbEI7QUFJQTs7O3lDQUVzQmIsQyxFQUFHO0FBQ3pCLFFBQUtJLEtBQUwsQ0FBV0MsTUFBWCxDQUFrQjtBQUNqQkMsT0FBR04sRUFBRWMsTUFBRixDQUFTQztBQURLLElBQWxCO0FBR0E7Ozt1Q0FFb0JmLEMsRUFBRztBQUN2QixPQUFNQyxPQUFPLDJCQUFZLEtBQUtDLEdBQWpCLEVBQXNCQyxxQkFBdEIsRUFBYjtBQUNBLFFBQUtDLEtBQUwsQ0FBV0MsTUFBWCxDQUFrQjtBQUNqQkMsT0FBR0MsS0FBS0MsS0FBTCxDQUFXUixFQUFFUyxLQUFGLEdBQVVSLEtBQUtTLEdBQTFCO0FBRGMsSUFBbEI7QUFHQTs7O3VDQUVvQlYsQyxFQUFHO0FBQ3ZCLFFBQUtJLEtBQUwsQ0FBV0MsTUFBWCxDQUFrQjtBQUNqQk0sT0FBR1gsRUFBRWMsTUFBRixDQUFTQztBQURLLElBQWxCO0FBR0E7OztxQ0FFa0JmLEMsRUFBRztBQUNyQixPQUFNQyxPQUFPLDJCQUFZLEtBQUtDLEdBQWpCLEVBQXNCQyxxQkFBdEIsRUFBYjtBQUNBLFFBQUtDLEtBQUwsQ0FBV0MsTUFBWCxDQUFrQjtBQUNqQk0sT0FBR0osS0FBS0MsS0FBTCxDQUFXUixFQUFFWSxLQUFGLEdBQVVYLEtBQUtZLElBQTFCO0FBRGMsSUFBbEI7QUFHQTs7OzBCQUVPWCxHLEVBQUs7QUFDWixRQUFLQSxHQUFMLEdBQVdBLEdBQVg7QUFDQTs7OzJCQUVRO0FBQUE7O0FBQUEsT0FDREUsS0FEQyxHQUNRLElBRFIsQ0FDREEsS0FEQzs7O0FBR1IsT0FBTVksU0FBUyxTQUFUQSxNQUFTLElBQUs7QUFDbkIsd0JBQUssT0FBS2QsR0FBVixFQUFlLE9BQUtFLEtBQXBCO0FBQ0FBLFVBQU1ZLE1BQU4sQ0FBYWhCLENBQWI7QUFDQSxJQUhEOztBQUtBLE9BQU1pQixpQkFBaUIsMEJBQ3RCLFFBRHNCLEVBRXRCO0FBQ0MsMEJBQXNCYixNQUFNYztBQUQ3QixJQUZzQixDQUF2Qjs7QUFPQSxPQUFNQyx1QkFBdUIsMEJBQzVCLHlCQUQ0QixFQUU1QixnQkFGNEIsQ0FBN0I7O0FBS0EsT0FBTUMsUUFBUWhCLE1BQU1jLFVBQU4sR0FBbUI7QUFDaENHLFdBQU9qQixNQUFNaUIsS0FEbUI7QUFFaENDLFlBQVFsQixNQUFNa0I7QUFGa0IsSUFBbkIsR0FHVixFQUhKOztBQUtBLFVBQ0M7QUFBQTtBQUFBLE1BQUssV0FBV2xCLE1BQU1tQixTQUF0QjtBQUNDO0FBQUE7QUFBQSxPQUFLLFdBQVdKLG9CQUFoQixFQUFzQyxPQUFPQyxLQUE3QztBQUNDO0FBQ0MsaUJBQVdILGNBRFo7QUFFQyxjQUFRLHFCQUFNRCxNQUFOLEVBQWNaLE1BQU1vQixPQUFwQixDQUZUO0FBR0MsV0FBSyxLQUFLQyxPQUhYO0FBSUMsV0FBS3JCLE1BQU1zQixHQUpaO0FBS0MsZUFBU3RCLE1BQU11QixPQUxoQjtBQU1DLGlCQUFXLEtBQUtDO0FBTmpCLE9BREQ7QUFVRXhCLFdBQU1jLFVBQU4sSUFDQztBQUNDLGNBQVFkLE1BQU1rQixNQURmO0FBRUMsc0JBQWdCLEtBQUtPLGtCQUZ0QjtBQUdDLHdCQUFrQixLQUFLQyxvQkFIeEI7QUFJQyxzQkFBZ0IsS0FBS0Msa0JBSnRCO0FBS0MsMEJBQW9CLEtBQUtDLHNCQUwxQjtBQU1DLHdCQUFrQixLQUFLQyxvQkFOeEI7QUFPQyxhQUFPN0IsTUFBTWlCO0FBUGQ7QUFYSDtBQURELElBREQ7QUEwQkE7Ozs2QkF4R01hLFcsR0FBYyxPLFVBV2RDLFksR0FBZTtBQUNyQjlCO0FBRHFCLEM7O2tCQVpGTixLIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGF1dG9iaW5kIGZyb20gJ2F1dG9iaW5kLWRlY29yYXRvcic7XG5pbXBvcnQgam9pbiBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCB7bm9vcH0gZnJvbSAnbG9kYXNoJztcbmltcG9ydCBwdXJlIGZyb20gJ3B1cmUtcmVuZGVyLWRlY29yYXRvcic7XG5pbXBvcnQgUmVhY3QsIHtDb21wb25lbnQsIFByb3BUeXBlcyBhcyB0eXBlc30gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtmaW5kRE9NTm9kZX0gZnJvbSAncmVhY3QtZG9tJztcblxuaW1wb3J0IGJpbmQgZnJvbSAnLi9iaW5kJztcbmltcG9ydCBIYW5kbGVzIGZyb20gJy4vaGFuZGxlcyc7XG5pbXBvcnQgcmVsYXkgZnJvbSAnLi9yZWxheSc7XG5cbkBwdXJlXG5AYXV0b2JpbmRcbmV4cG9ydCBkZWZhdWx0IGNsYXNzIEZyYW1lIGV4dGVuZHMgQ29tcG9uZW50IHtcblx0c3RhdGljIGRpc3BsYXlOYW1lID0gJ0ZyYW1lJztcblxuXHRzdGF0aWMgcHJvcFR5cGVzID0ge1xuXHRcdHNyYzogdHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG5cdFx0aGVpZ2h0OiB0eXBlcy5udW1iZXIsXG5cdFx0aWQ6IHR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuXHRcdHJlc2l6ZWFibGU6IHR5cGVzLmJvb2wuaXNSZXF1aXJlZCxcblx0XHRyZXNpemU6IHR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcblx0XHR3aWR0aDogdHlwZXMubnVtYmVyXG5cdH07XG5cblx0c3RhdGljIGRlZmF1bHRQcm9wcyA9IHtcblx0XHRyZXNpemU6IG5vb3Bcblx0fTtcblxuXHRoYW5kbGVEaWFnb25hbERyYWcoZSkge1xuXHRcdGNvbnN0IHJlY3QgPSBmaW5kRE9NTm9kZSh0aGlzLnJlZikuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cdFx0dGhpcy5wcm9wcy5yZXNpemUoe1xuXHRcdFx0eTogTWF0aC5yb3VuZChlLnBhZ2VZIC0gcmVjdC50b3ApLFxuXHRcdFx0eDogTWF0aC5yb3VuZChlLnBhZ2VYIC0gcmVjdC5sZWZ0KVxuXHRcdH0pO1xuXHR9XG5cblx0aGFuZGxlSG9yaXpvbnRhbFN1Ym1pdChlKSB7XG5cdFx0dGhpcy5wcm9wcy5yZXNpemUoe1xuXHRcdFx0eTogZS50YXJnZXQudmFsdWVcblx0XHR9KTtcblx0fVxuXG5cdGhhbmRsZUhvcml6b250YWxEcmFnKGUpIHtcblx0XHRjb25zdCByZWN0ID0gZmluZERPTU5vZGUodGhpcy5yZWYpLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuXHRcdHRoaXMucHJvcHMucmVzaXplKHtcblx0XHRcdHk6IE1hdGgucm91bmQoZS5wYWdlWSAtIHJlY3QudG9wKVxuXHRcdH0pO1xuXHR9XG5cblx0aGFuZGxlVmVydGljYWxTdWJtaXQoZSkge1xuXHRcdHRoaXMucHJvcHMucmVzaXplKHtcblx0XHRcdHg6IGUudGFyZ2V0LnZhbHVlXG5cdFx0fSk7XG5cdH1cblxuXHRoYW5kbGVWZXJ0aWNhbERyYWcoZSkge1xuXHRcdGNvbnN0IHJlY3QgPSBmaW5kRE9NTm9kZSh0aGlzLnJlZikuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cdFx0dGhpcy5wcm9wcy5yZXNpemUoe1xuXHRcdFx0eDogTWF0aC5yb3VuZChlLnBhZ2VYIC0gcmVjdC5sZWZ0KVxuXHRcdH0pO1xuXHR9XG5cblx0c2F2ZVJlZihyZWYpIHtcblx0XHR0aGlzLnJlZiA9IHJlZjtcblx0fVxuXG5cdHJlbmRlcigpIHtcblx0XHRjb25zdCB7cHJvcHN9ID0gdGhpcztcblxuXHRcdGNvbnN0IG9uTG9hZCA9IGUgPT4ge1xuXHRcdFx0YmluZCh0aGlzLnJlZiwgdGhpcy5wcm9wcyk7XG5cdFx0XHRwcm9wcy5vbkxvYWQoZSk7XG5cdFx0fTtcblxuXHRcdGNvbnN0IGZyYW1lQ2xhc3NOYW1lID0gam9pbihcblx0XHRcdCdpZnJhbWUnLFxuXHRcdFx0e1xuXHRcdFx0XHQnaWZyYW1lLS1yZXNpemVhYmxlJzogcHJvcHMucmVzaXplYWJsZVxuXHRcdFx0fVxuXHRcdCk7XG5cblx0XHRjb25zdCBmcmFtZVJlc2l6ZUNsYXNzTmFtZSA9IGpvaW4oXG5cdFx0XHQnZnJhbWVfX3Jlc2l6ZS1jb250YWluZXInLFxuXHRcdFx0J3BhdHRlcm5fX2ZyYW1lJ1xuXHRcdCk7XG5cblx0XHRjb25zdCBzdHlsZSA9IHByb3BzLnJlc2l6ZWFibGUgPyB7XG5cdFx0XHR3aWR0aDogcHJvcHMud2lkdGgsXG5cdFx0XHRoZWlnaHQ6IHByb3BzLmhlaWdodFxuXHRcdH0gOiB7fTtcblxuXHRcdHJldHVybiAoXG5cdFx0XHQ8ZGl2IGNsYXNzTmFtZT17cHJvcHMuY2xhc3NOYW1lfT5cblx0XHRcdFx0PGRpdiBjbGFzc05hbWU9e2ZyYW1lUmVzaXplQ2xhc3NOYW1lfSBzdHlsZT17c3R5bGV9PlxuXHRcdFx0XHRcdDxpZnJhbWVcblx0XHRcdFx0XHRcdGNsYXNzTmFtZT17ZnJhbWVDbGFzc05hbWV9XG5cdFx0XHRcdFx0XHRvbkxvYWQ9e3JlbGF5KG9uTG9hZCwgcHJvcHMub25FcnJvcil9XG5cdFx0XHRcdFx0XHRyZWY9e3RoaXMuc2F2ZVJlZn1cblx0XHRcdFx0XHRcdHNyYz17cHJvcHMuc3JjfVxuXHRcdFx0XHRcdFx0c2FuZGJveD17cHJvcHMuc2FuZGJveH1cblx0XHRcdFx0XHRcdG9uS2V5RG93bj17dGhpcy5oYW5kbGVLZXlEb3dufVxuXHRcdFx0XHRcdFx0Lz5cblx0XHRcdFx0XHR7XG5cdFx0XHRcdFx0XHRwcm9wcy5yZXNpemVhYmxlICYmXG5cdFx0XHRcdFx0XHRcdDxIYW5kbGVzXG5cdFx0XHRcdFx0XHRcdFx0aGVpZ2h0PXtwcm9wcy5oZWlnaHR9XG5cdFx0XHRcdFx0XHRcdFx0b25EcmFnRGlhZ29uYWw9e3RoaXMuaGFuZGxlRGlhZ29uYWxEcmFnfVxuXHRcdFx0XHRcdFx0XHRcdG9uRHJhZ0hvcml6b250YWw9e3RoaXMuaGFuZGxlSG9yaXpvbnRhbERyYWd9XG5cdFx0XHRcdFx0XHRcdFx0b25EcmFnVmVydGljYWw9e3RoaXMuaGFuZGxlVmVydGljYWxEcmFnfVxuXHRcdFx0XHRcdFx0XHRcdG9uU3VibWl0SG9yaXpvbnRhbD17dGhpcy5oYW5kbGVIb3Jpem9udGFsU3VibWl0fVxuXHRcdFx0XHRcdFx0XHRcdG9uU3VibWl0VmVydGljYWw9e3RoaXMuaGFuZGxlVmVydGljYWxTdWJtaXR9XG5cdFx0XHRcdFx0XHRcdFx0d2lkdGg9e3Byb3BzLndpZHRofVxuXHRcdFx0XHRcdFx0XHRcdC8+XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHQ8L2Rpdj5cblx0XHRcdDwvZGl2PlxuXHRcdCk7XG5cdH1cbn1cbiJdfQ==