@patternplate/client
Version:
Universal javascript client application for patternplate
261 lines (206 loc) • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactHelmet = _interopRequireDefault(require("react-helmet"));
var _tagHoc = _interopRequireDefault(require("tag-hoc"));
var _reactRedux = require("react-redux");
var _redux = require("redux");
var _reselect = require("reselect");
var _componentLink = require("@patternplate/component-link");
var _components = require("@patternplate/components");
var actions = _interopRequireWildcard(require("../actions"));
var demo = _interopRequireWildcard(require("../selectors/demo"));
var _logo = _interopRequireDefault(require("./logo"));
var _favicon = _interopRequireDefault(require("./favicon"));
var _indicator = _interopRequireDefault(require("./indicator"));
var _link = _interopRequireDefault(require("./link"));
var _message = _interopRequireDefault(require("./message"));
var _navigation = _interopRequireWildcard(require("./navigation"));
var _toggleNavigation = _interopRequireDefault(require("./toggle-navigation"));
var _toggleSearch = _interopRequireDefault(require("./toggle-search"));
var _search = _interopRequireDefault(require("./search"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const selectThemes = (0, _reselect.createSelector)(state => state.config.ui, ui => _components.themes.getThemes(ui));
const selectLines = (0, _reselect.createSelector)(state => state.messages, demo.selectSrc, (messages, src) => (messages[src] || "").split("\n").filter(Boolean));
const selectMessage = (0, _reselect.createSelector)(selectLines, lines => lines.slice(0, 2).map(l => l.trim()).join("\n"));
const selectHasMessage = (0, _reselect.createSelector)(selectMessage, message => typeof message === "string" && message !== "");
function mapProps(state) {
const q = state.routing.locationBeforeTransitions.query;
return {
base: state.base,
description: state.schema.description,
lightbox: state.lightbox,
location: state.routing.locationBeforeTransitions,
networkEnabled: state.networkEnabled,
logo: state.config.ui.renderedLogo,
navigationEnabled: state.navigationEnabled,
searchEnabled: state.searchEnabled,
theme: state.theme,
themes: selectThemes(state),
title: state.config.title || state.schema.name,
hasMessage: selectHasMessage(state),
screenshot: q.screenshot === "true",
showComponents: state.config.ui.showComponents === undefined ? true : state.config.ui.showComponents,
jsWarningEnabled: q["js-warning-enabled"] !== "false" && q["js-warning-enabled"] !== false,
browserWarningEnabled: q["browser-warning-enabled"] !== "false" && q["browser-warning-enabled"] !== false
};
}
function mapDispatch(dispatch) {
return (0, _redux.bindActionCreators)({
onLoad: () => actions.listen({
url: "api"
}),
onResize: actions.windowResize
}, dispatch);
}
const injections = [{
target: _componentLink.Link,
source: _link.default
}, {
target: _components.Link,
source: _link.default
}];
class Application extends _react.default.Component {
componentDidMount() {
document.body.style.overflow = this.props.screenshot ? "hidden" : "auto";
}
componentDidUpdate() {
document.body.style.overflow = this.props.screenshot ? "hidden" : "auto";
}
render() {
const props = this.props;
return _react.default.createElement(_components.injection.InjectionProvider, {
injections: injections
}, _react.default.createElement(_components.ThemeProvider, {
theme: props.themes[props.theme]
}, _react.default.createElement(StyledApplication, {
screenshot: props.screenshot
}, _react.default.createElement(_reactHelmet.default, {
meta: meta(props),
title: props.title
}), _react.default.createElement(_favicon.default, null), _react.default.createElement(_components.ThemeProvider, {
theme: props.themes.dark
}, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(NavigationControl, {
"data-toggle-name": "navigation",
"data-trigger-name": "navigation",
"data-toggle-enabled": props.navigationEnabled,
enabled: props.navigationEnabled
}, _react.default.createElement(_toggleNavigation.default, null)), _react.default.createElement(StyledNavigationBox, {
"data-toggle-name": "navigation",
"data-toggle-enabled": props.visible,
enabled: props.navigationEnabled
}, _react.default.createElement(_navigation.default, {
showComponents: props.showComponents
}, _react.default.createElement(_navigation.NavigationHeader, null, _react.default.createElement(_logo.default, null)), _react.default.createElement(_navigation.NavigationToolbar, null, _react.default.createElement("div", null), _react.default.createElement(_toggleSearch.default, null), _react.default.createElement(_indicator.default, null)))))), _react.default.createElement(StyledContentContainer, {
"data-scrolling": true
}, _react.default.createElement(StyledContent, null, props.browserWarningEnabled && _react.default.createElement(StyledBrowserWarning, {
navigationEnabled: props.navigationEnabled,
"data-browser-warning": true
}, _react.default.createElement(StyledBrowserContainer, null, _react.default.createElement(StyledBrowserContent, null, _react.default.createElement(StyledWarningLabel, null, "Nice browser. Is it antique?"), _react.default.createElement(StyledBrowserText, null, "No, seriously - your browser is so old that some features of patternplate don't work as expected."), _react.default.createElement(StyledBrowserText, null, "Don't worry - you can either continue with a restricted version or install an up-to-date browser.")), _react.default.createElement(StyledBrowserContainerClose, {
title: `Close browser warning`,
query: {
"browser-warning-enabled": false
}
}, _react.default.createElement(_components.Icon, {
symbol: "close"
})))), props.jsWarningEnabled && _react.default.createElement(StyledBrowserWarning, {
navigationEnabled: props.navigationEnabled,
"data-js-warning": true
}, _react.default.createElement(StyledBrowserContainer, null, _react.default.createElement(StyledBrowserContent, null, _react.default.createElement(StyledWarningLabel, null, "We messed up."), _react.default.createElement(StyledBrowserText, null, "Sorry, but your user experience might be affected."), _react.default.createElement(_components.Text, null, "- Try reloading the page"), _react.default.createElement(_components.Text, null, "- Report the problem at github.com/patternplate/patternplate")), _react.default.createElement(StyledBrowserContainerClose, {
title: `Close browser warning`,
query: {
"js-warning-enabled": false
}
}, _react.default.createElement(_components.Icon, {
symbol: "close"
})))), props.hasMessage && _react.default.createElement(StyledMessageBox, null, _react.default.createElement(_message.default, null)), props.children, props.searchEnabled && _react.default.createElement(_components.ThemeProvider, {
theme: props.themes.dark
}, _react.default.createElement(StyledSearchBox, {
navigationEnabled: props.navigationEnabled,
screenshot: props.screenshot
}, _react.default.createElement(StyledSearchFrame, null, _react.default.createElement(_search.default, null)))))))));
}
}
var _default = (0, _reactRedux.connect)(mapProps, mapDispatch)(Application);
exports.default = _default;
const WIDTH = 300;
const NAVIGATION_WIDTH = props => props.enabled ? WIDTH : 0;
const TOOLBAR_HEIGHT = 60;
const StyledWarningLabel = (0, _components.styled)(_components.Text).withConfig({
displayName: "application__StyledWarningLabel"
})(["font-weight:bold;margin-bottom:1.3em;"]);
const StyledBrowserWarning = _components.styled.div.withConfig({
displayName: "application__StyledBrowserWarning"
})(["display:none;box-sizing:border-box;position:absolute;position:sticky;top:0;z-index:4;right:0;left:0;width:100%;padding:15px 20px;padding-left:", "px;background:", ";"], props => props.navigationEnabled ? 20 : 60, props => props.theme.colors.warning);
const StyledBrowserContainer = _components.styled.div.withConfig({
displayName: "application__StyledBrowserContainer"
})(["position:relative;display:flex;align-items:center;width:100%;max-width:1240px;margin:0 auto;justify-content:space-between;"]);
const StyledBrowserContent = _components.styled.div.withConfig({
displayName: "application__StyledBrowserContent"
})([""]);
const StyledBrowserText = (0, _components.styled)(_components.Text).withConfig({
displayName: "application__StyledBrowserText"
})(["margin-bottom:1.3em;"]);
const StyledBrowserContainerClose = (0, _components.styled)(_componentLink.Link).withConfig({
displayName: "application__StyledBrowserContainerClose"
})(["flex-shrink:0;margin-left:15px;&:link,&:visited,&:active{color:", ";}"], props => props.theme.colors.color);
const StyledApplication = _components.styled.div.withConfig({
displayName: "application__StyledApplication"
})(["position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;background:", ";", ";"], props => props.theme.colors.background, props => !props.screenshot ? "" : (0, _components.css)(["height:calc(100vh - 100px);width:calc(100vw - 100px);margin:50px;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,0.15);overflow:hidden;"]));
const StyledNavigationBox = (0, _components.styled)((0, _tagHoc.default)(["enabled"])("div")).withConfig({
displayName: "application__StyledNavigationBox"
})(["position:relative;z-index:2;height:100%;width:", "px;flex:0 0 ", "px;overflow:hidden;&[data-toggle-enabled=\"true\"]{display:block;}&[data-toggle-enabled=\"false\"]{display:none;}"], NAVIGATION_WIDTH, NAVIGATION_WIDTH);
const StyledMessageBox = _components.styled.div.withConfig({
displayName: "application__StyledMessageBox"
})(["position:absolute;box-sizing:border-box;z-index:3;padding:15px;width:100%;overflow:hidden;"]);
const StyledContent = _components.styled.div.withConfig({
displayName: "application__StyledContent"
})(["flex:1 1 100%;width:100%;"]);
const StyledContentContainer = _components.styled.div.withConfig({
displayName: "application__StyledContentContainer"
})(["flex:1 1 calc(100% - ", "px);width:calc(100% - ", "px);flex-direction:column;overflow:auto;position:relative;"], NAVIGATION_WIDTH, NAVIGATION_WIDTH);
const WITH_SCREENSHOT_OFFSET = factor => props => {
if (props.screenshot) {
return factor * 50;
}
return 0;
};
const WITH_NAVIGATION_OFFSET = factor => props => {
if (props.navigationEnabled) {
return factor * 300;
}
return 0;
};
const SUM = (...args) => props => args.reduce((acc, fn) => acc + fn(props), 0);
const StyledSearchBox = _components.styled.div.withConfig({
displayName: "application__StyledSearchBox"
})(["position:fixed;z-index:2;top:12.5vh;bottom:10vh;right:", "px;left:", "px;width:calc( 100% - ", "px );pointer-events:none;"], WITH_SCREENSHOT_OFFSET(1), SUM(WITH_NAVIGATION_OFFSET(1), WITH_SCREENSHOT_OFFSET(1)), SUM(WITH_NAVIGATION_OFFSET(1), WITH_SCREENSHOT_OFFSET(2)));
const StyledSearchFrame = _components.styled.div.withConfig({
displayName: "application__StyledSearchFrame"
})(["width:90%;min-width:320px;max-width:750px;max-height:100%;margin:0 auto;overflow:hidden;"]);
const StyledFloatingBox = _components.styled.div.withConfig({
displayName: "application__StyledFloatingBox"
})(["position:absolute;pointer-events:none;z-index:2;right:0;bottom:0;left:0;padding:10px 15px;height:300px;display:flex;"]);
const StyledInfoPane = _components.styled.div.withConfig({
displayName: "application__StyledInfoPane"
})(["flex:0 0 auto;box-sizing:border-box;pointer-events:all;"]);
const StyledPane = _components.styled.div.withConfig({
displayName: "application__StyledPane"
})(["flex:1 1 auto;box-sizing:border-box;height:100%;width:100%;overflow:hidden;pointer-events:all;"]);
const NavigationControl = _components.styled.div.withConfig({
displayName: "application__NavigationControl"
})(["display:flex;align-items:center;justify-content:center;position:absolute;z-index:5;top:0;left:", "px;transform:translate(-", "%);color:", ";width:60px;height:60px;background:", ";&[data-toggle-enabled=\"true\"]{left:300;transform:translate(-100%);color:", ";background:", ";}&[data-toggle-enabled=\"false\"]{left:0;transform:translate(0);color:", ";background:#fff;}@media screen and (min-width:720px){background:transparent;&::before{display:none;}}"], props => props.enabled ? 300 : 0, props => props.enabled ? 100 : 0, props => props.enabled ? props.theme.colors.color : props.theme.colors.background, props => props.enabled ? props.theme.colors.backgroundSecondary : "#fff", props => props.theme.colors.color, props => props.theme.colors.backgroundSecondary, props => props.theme.colors.background);
function meta(props) {
return [{
name: "description",
content: props.description
}, {
name: "viewport",
content: "width=device-width, initial-scale=1"
}];
}
//# sourceMappingURL=application.js.map