patternplate-client/application/components/pattern/pattern-demo.js

Universal javascript client application for patternplate

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _queryString = require('query-string');

var _queryString2 = _interopRequireDefault(_queryString);

var _urlQuery = require('../../utils/url-query');

var _urlQuery2 = _interopRequireDefault(_urlQuery);

var _frame = require('../common/frame');

var _frame2 = _interopRequireDefault(_frame);

var _patternRuler = require('./pattern-ruler');

var _patternRuler2 = _interopRequireDefault(_patternRuler);

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

function PatternDemo(props) {
	var source = _urlQuery2.default.format({
		pathname: props.base + 'demo/' + props.target + '/index.html',
		query: { environment: props.environment }
	});

	var query = _queryString2.default.stringify({
		'reload-time': props.reloadTime
	});

	var src = [source, query].filter(Boolean).join('?');
	var className = (0, _classnames2.default)('pattern-demo-container', {
		'pattern-demo-container--opacity': props.opacity
	});
	var demoClassName = (0, _classnames2.default)('pattern-demo', {
		'pattern-demo--resizable': props.resizeable
	});

	return _react2.default.createElement(
		'div',
		{ className: className },
		props.rulers && _react2.default.createElement(
			'div',
			{ className: 'rulers' },
			_react2.default.createElement(_patternRuler2.default, {
				type: 'vertical',
				step: 10,
				length: props.rulerLengthY,
				markers: [props.height],
				offset: props.rulerY
			}),
			_react2.default.createElement(_patternRuler2.default, {
				type: 'horizontal',
				step: 10,
				length: props.rulerLengthX,
				markers: [props.width],
				offset: props.rulerX
			})
		),
		_react2.default.createElement(_frame2.default, {
			className: demoClassName,
			id: source,
			height: props.height,
			onLoad: props.onReady,
			onError: props.onError,
			onScroll: props.onScroll,
			onResize: props.onResize,
			resizeable: props.rulers,
			resize: props.resize,
			src: src,
			width: props.width
		})
	);
}

exports.default = PatternDemo;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NvdXJjZS9hcHBsaWNhdGlvbi9jb21wb25lbnRzL3BhdHRlcm4vcGF0dGVybi1kZW1vLmpzIl0sIm5hbWVzIjpbIlBhdHRlcm5EZW1vIiwicHJvcHMiLCJzb3VyY2UiLCJmb3JtYXQiLCJwYXRobmFtZSIsImJhc2UiLCJ0YXJnZXQiLCJxdWVyeSIsImVudmlyb25tZW50Iiwic3RyaW5naWZ5IiwicmVsb2FkVGltZSIsInNyYyIsImZpbHRlciIsIkJvb2xlYW4iLCJqb2luIiwiY2xhc3NOYW1lIiwib3BhY2l0eSIsImRlbW9DbGFzc05hbWUiLCJyZXNpemVhYmxlIiwicnVsZXJzIiwicnVsZXJMZW5ndGhZIiwiaGVpZ2h0IiwicnVsZXJZIiwicnVsZXJMZW5ndGhYIiwid2lkdGgiLCJydWxlclgiLCJvblJlYWR5Iiwib25FcnJvciIsIm9uU2Nyb2xsIiwib25SZXNpemUiLCJyZXNpemUiXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBOzs7O0FBQ0E7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7QUFDQTs7Ozs7O0FBRUEsU0FBU0EsV0FBVCxDQUFxQkMsS0FBckIsRUFBNEI7QUFDM0IsS0FBTUMsU0FBUyxtQkFBU0MsTUFBVCxDQUFnQjtBQUM5QkMsWUFBYUgsTUFBTUksSUFBbkIsYUFBK0JKLE1BQU1LLE1BQXJDLGdCQUQ4QjtBQUU5QkMsU0FBTyxFQUFDQyxhQUFhUCxNQUFNTyxXQUFwQjtBQUZ1QixFQUFoQixDQUFmOztBQUtBLEtBQU1ELFFBQVEsc0JBQVlFLFNBQVosQ0FBc0I7QUFDbkMsaUJBQWVSLE1BQU1TO0FBRGMsRUFBdEIsQ0FBZDs7QUFJQSxLQUFNQyxNQUFNLENBQUNULE1BQUQsRUFBU0ssS0FBVCxFQUFnQkssTUFBaEIsQ0FBdUJDLE9BQXZCLEVBQWdDQyxJQUFoQyxDQUFxQyxHQUFyQyxDQUFaO0FBQ0EsS0FBTUMsWUFBWSwwQkFBSyx3QkFBTCxFQUErQjtBQUNoRCxxQ0FBbUNkLE1BQU1lO0FBRE8sRUFBL0IsQ0FBbEI7QUFHQSxLQUFNQyxnQkFBZ0IsMEJBQUssY0FBTCxFQUFxQjtBQUMxQyw2QkFBMkJoQixNQUFNaUI7QUFEUyxFQUFyQixDQUF0Qjs7QUFJQSxRQUNDO0FBQUE7QUFBQSxJQUFLLFdBQVdILFNBQWhCO0FBRUVkLFFBQU1rQixNQUFOLElBQ0M7QUFBQTtBQUFBLEtBQUssV0FBVSxRQUFmO0FBQ0M7QUFDQyxVQUFLLFVBRE47QUFFQyxVQUFNLEVBRlA7QUFHQyxZQUFRbEIsTUFBTW1CLFlBSGY7QUFJQyxhQUFTLENBQUNuQixNQUFNb0IsTUFBUCxDQUpWO0FBS0MsWUFBUXBCLE1BQU1xQjtBQUxmLEtBREQ7QUFRQztBQUNDLFVBQUssWUFETjtBQUVDLFVBQU0sRUFGUDtBQUdDLFlBQVFyQixNQUFNc0IsWUFIZjtBQUlDLGFBQVMsQ0FBQ3RCLE1BQU11QixLQUFQLENBSlY7QUFLQyxZQUFRdkIsTUFBTXdCO0FBTGY7QUFSRCxHQUhIO0FBb0JDO0FBQ0MsY0FBV1IsYUFEWjtBQUVDLE9BQUlmLE1BRkw7QUFHQyxXQUFRRCxNQUFNb0IsTUFIZjtBQUlDLFdBQVFwQixNQUFNeUIsT0FKZjtBQUtDLFlBQVN6QixNQUFNMEIsT0FMaEI7QUFNQyxhQUFVMUIsTUFBTTJCLFFBTmpCO0FBT0MsYUFBVTNCLE1BQU00QixRQVBqQjtBQVFDLGVBQVk1QixNQUFNa0IsTUFSbkI7QUFTQyxXQUFRbEIsTUFBTTZCLE1BVGY7QUFVQyxRQUFLbkIsR0FWTjtBQVdDLFVBQU9WLE1BQU11QjtBQVhkO0FBcEJELEVBREQ7QUFvQ0E7O2tCQXdCY3hCLFciLCJmaWxlIjoicGF0dGVybi1kZW1vLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7UHJvcFR5cGVzIGFzIHR5cGVzfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgam9pbiBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCBxdWVyeVN0cmluZyBmcm9tICdxdWVyeS1zdHJpbmcnO1xuaW1wb3J0IHVybFF1ZXJ5IGZyb20gJy4uLy4uL3V0aWxzL3VybC1xdWVyeSc7XG5pbXBvcnQgRnJhbWUgZnJvbSAnLi4vY29tbW9uL2ZyYW1lJztcbmltcG9ydCBSdWxlciBmcm9tICcuL3BhdHRlcm4tcnVsZXInO1xuXG5mdW5jdGlvbiBQYXR0ZXJuRGVtbyhwcm9wcykge1xuXHRjb25zdCBzb3VyY2UgPSB1cmxRdWVyeS5mb3JtYXQoe1xuXHRcdHBhdGhuYW1lOiBgJHtwcm9wcy5iYXNlfWRlbW8vJHtwcm9wcy50YXJnZXR9L2luZGV4Lmh0bWxgLFxuXHRcdHF1ZXJ5OiB7ZW52aXJvbm1lbnQ6IHByb3BzLmVudmlyb25tZW50fVxuXHR9KTtcblxuXHRjb25zdCBxdWVyeSA9IHF1ZXJ5U3RyaW5nLnN0cmluZ2lmeSh7XG5cdFx0J3JlbG9hZC10aW1lJzogcHJvcHMucmVsb2FkVGltZVxuXHR9KTtcblxuXHRjb25zdCBzcmMgPSBbc291cmNlLCBxdWVyeV0uZmlsdGVyKEJvb2xlYW4pLmpvaW4oJz8nKTtcblx0Y29uc3QgY2xhc3NOYW1lID0gam9pbigncGF0dGVybi1kZW1vLWNvbnRhaW5lcicsIHtcblx0XHQncGF0dGVybi1kZW1vLWNvbnRhaW5lci0tb3BhY2l0eSc6IHByb3BzLm9wYWNpdHlcblx0fSk7XG5cdGNvbnN0IGRlbW9DbGFzc05hbWUgPSBqb2luKCdwYXR0ZXJuLWRlbW8nLCB7XG5cdFx0J3BhdHRlcm4tZGVtby0tcmVzaXphYmxlJzogcHJvcHMucmVzaXplYWJsZVxuXHR9KTtcblxuXHRyZXR1cm4gKFxuXHRcdDxkaXYgY2xhc3NOYW1lPXtjbGFzc05hbWV9PlxuXHRcdFx0e1xuXHRcdFx0XHRwcm9wcy5ydWxlcnMgJiZcblx0XHRcdFx0XHQ8ZGl2IGNsYXNzTmFtZT1cInJ1bGVyc1wiPlxuXHRcdFx0XHRcdFx0PFJ1bGVyXG5cdFx0XHRcdFx0XHRcdHR5cGU9XCJ2ZXJ0aWNhbFwiXG5cdFx0XHRcdFx0XHRcdHN0ZXA9ezEwfVxuXHRcdFx0XHRcdFx0XHRsZW5ndGg9e3Byb3BzLnJ1bGVyTGVuZ3RoWX1cblx0XHRcdFx0XHRcdFx0bWFya2Vycz17W3Byb3BzLmhlaWdodF19XG5cdFx0XHRcdFx0XHRcdG9mZnNldD17cHJvcHMucnVsZXJZfVxuXHRcdFx0XHRcdFx0XHQvPlxuXHRcdFx0XHRcdFx0PFJ1bGVyXG5cdFx0XHRcdFx0XHRcdHR5cGU9XCJob3Jpem9udGFsXCJcblx0XHRcdFx0XHRcdFx0c3RlcD17MTB9XG5cdFx0XHRcdFx0XHRcdGxlbmd0aD17cHJvcHMucnVsZXJMZW5ndGhYfVxuXHRcdFx0XHRcdFx0XHRtYXJrZXJzPXtbcHJvcHMud2lkdGhdfVxuXHRcdFx0XHRcdFx0XHRvZmZzZXQ9e3Byb3BzLnJ1bGVyWH1cblx0XHRcdFx0XHRcdFx0Lz5cblx0XHRcdFx0XHQ8L2Rpdj5cblx0XHRcdH1cblx0XHRcdDxGcmFtZVxuXHRcdFx0XHRjbGFzc05hbWU9e2RlbW9DbGFzc05hbWV9XG5cdFx0XHRcdGlkPXtzb3VyY2V9XG5cdFx0XHRcdGhlaWdodD17cHJvcHMuaGVpZ2h0fVxuXHRcdFx0XHRvbkxvYWQ9e3Byb3BzLm9uUmVhZHl9XG5cdFx0XHRcdG9uRXJyb3I9e3Byb3BzLm9uRXJyb3J9XG5cdFx0XHRcdG9uU2Nyb2xsPXtwcm9wcy5vblNjcm9sbH1cblx0XHRcdFx0b25SZXNpemU9e3Byb3BzLm9uUmVzaXplfVxuXHRcdFx0XHRyZXNpemVhYmxlPXtwcm9wcy5ydWxlcnN9XG5cdFx0XHRcdHJlc2l6ZT17cHJvcHMucmVzaXplfVxuXHRcdFx0XHRzcmM9e3NyY31cblx0XHRcdFx0d2lkdGg9e3Byb3BzLndpZHRofVxuXHRcdFx0XHQvPlxuXHRcdDwvZGl2PlxuXHQpO1xufVxuXG5QYXR0ZXJuRGVtby5wcm9wVHlwZXMgPSB7XG5cdGJhc2U6IHR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuXHRlbnZpcm9ubWVudDogdHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG5cdGhlaWdodDogdHlwZXMubnVtYmVyLFxuXHRvbkVycm9yOiB0eXBlcy5mdW5jLmlzUmVxdWlyZWQsXG5cdG9uUmVhZHk6IHR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcblx0b25SZXNpemU6IHR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcblx0b25TY3JvbGw6IHR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcblx0b3BhY2l0eTogdHlwZXMuYm9vbC5pc1JlcXVpcmVkLFxuXHRsb2FkaW5nOiB0eXBlcy5ib29sLmlzUmVxdWlyZWQsXG5cdHJlbG9hZFRpbWU6IHR5cGVzLm51bWJlcixcblx0cmVzaXplYWJsZTogdHlwZXMuYm9vbC5pc1JlcXVpcmVkLFxuXHRyZXNpemU6IHR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcblx0cnVsZXJzOiB0eXBlcy5ib29sLmlzUmVxdWlyZWQsXG5cdHJ1bGVyWDogdHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG5cdHJ1bGVyTGVuZ3RoWDogdHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG5cdHJ1bGVyWTogdHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG5cdHJ1bGVyTGVuZ3RoWTogdHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG5cdHRhcmdldDogdHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG5cdHdpZHRoOiB0eXBlcy5udW1iZXJcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhdHRlcm5EZW1vO1xuIl19