+ const items = children.map((child, index) => (
+
({
op: 'patch',
path: url,
data: nestContent(content[index]),
+ headers: headers,
})),
};
}
@@ -199,3 +208,45 @@ export function updateColumnsContent(url, index) {
indexcolumns: index,
};
}
+
+/**
+ * Lock content function.
+ * @function lockContent
+ * @param {string} urls Content url(s)
+ * @returns {Object} Lock content action.
+ */
+export function lockContent(urls) {
+ return {
+ type: LOCK_CONTENT,
+ mode: 'serial',
+ request:
+ typeof urls === 'string'
+ ? { op: 'post', path: `${urls}/@lock` }
+ : urls.map((url) => ({ op: 'post', path: `${url}/@lock` })),
+ };
+}
+
+/**
+ * Unlock content function.
+ * @function unlockContent
+ * @param {string|Array} urls Content url(s).
+ * @returns {Object} Unlock content action.
+ */
+export function unlockContent(urls, force = false) {
+ return {
+ type: UNLOCK_CONTENT,
+ mode: 'serial',
+ request:
+ typeof urls === 'string'
+ ? {
+ op: 'del',
+ path: `${urls}/@lock`,
+ data: force ? { force: true } : {},
+ }
+ : urls.map((url) => ({
+ op: 'del',
+ path: `${url}/@lock`,
+ data: force ? { force: true } : {},
+ })),
+ };
+}
diff --git a/src/customizations/volto/components/theme/App/App.jsx b/src/customizations/volto/components/theme/App/App.jsx
index e705d05..ce2b0f2 100644
--- a/src/customizations/volto/components/theme/App/App.jsx
+++ b/src/customizations/volto/components/theme/App/App.jsx
@@ -6,6 +6,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
+import jwtDecode from 'jwt-decode';
import { compose } from 'redux';
import { asyncConnect } from '@plone/volto/helpers';
import { Segment, Container } from 'semantic-ui-react';
@@ -17,8 +18,10 @@ import trim from 'lodash/trim';
import cx from 'classnames';
import config from '@plone/volto/registry';
import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
-
+import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
import Error from '@plone/volto/error';
+import { visitBlocks } from '@plone/volto/helpers/Blocks/Blocks';
import ViewletsRenderer from '@eeacms/volto-addons-forest/Viewlets/Render';
@@ -205,6 +208,11 @@ class App extends Component {
+ {
+ const content = await store.dispatch(
+ getContent(getBaseUrl(location.pathname)),
+ );
+
+ const promises = [];
+ const { blocksConfig } = config.blocks;
+
+ const visitor = ([id, data]) => {
+ const blockType = data['@type'];
+ const { getAsyncData } = blocksConfig[blockType];
+ if (getAsyncData) {
+ const p = getAsyncData({
+ store,
+ dispatch: store.dispatch,
+ path: location.pathname,
+ location,
+ id,
+ data,
+ });
+ if (!p?.length) {
+ throw new Error(
+ 'You should return a list of promises from getAsyncData',
+ );
+ }
+ promises.push(...p);
+ }
+ };
+
+ visitBlocks(content, visitor);
+
+ await Promise.allSettled(promises);
+
+ return content;
+};
export default compose(
asyncConnect([
{
key: 'content',
- promise: ({ location, store: { dispatch } }) =>
- __SERVER__ && dispatch(getContent(getBaseUrl(location.pathname))),
+ promise: ({ location, store }) =>
+ __SERVER__ && fetchContent({ store, location }),
},
{
key: 'frontpage_slides',
@@ -306,6 +349,9 @@ export default compose(
connect(
(state, props) => ({
pathname: props.location.pathname,
+ userId: state.userSession.token
+ ? jwtDecode(state.userSession.token).sub
+ : '',
token: state.userSession.token,
content: state.content.data,
apiError: state.apierror.error,
diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
index 0e9060c..c6014ed 100644
--- a/src/customizations/volto/components/theme/Navigation/Navigation.jsx
+++ b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -74,16 +74,6 @@ class Navigation extends Component {
};
}
- /**
- * Component will mount
- * @method componentWillMount
- * @returns {undefined}getBasePath
- */
- componentWillMount() {
- // this.props.getNavigation(getBaseUrl(this.props.pathname), 2);
- this.closeMobileMenu();
- }
-
/**
* Component will receive props
* @method componentWillReceiveProps
@@ -120,6 +110,7 @@ class Navigation extends Component {
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside, false);
+ this.closeMobileMenu();
}
componentWillUnmount() {
diff --git a/src/customizations/volto/helpers/Html/Html.jsx b/src/customizations/volto/helpers/Html/Html.jsx
index 9c1db2e..f448654 100644
--- a/src/customizations/volto/helpers/Html/Html.jsx
+++ b/src/customizations/volto/helpers/Html/Html.jsx
@@ -5,11 +5,33 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
import serialize from 'serialize-javascript';
import { join } from 'lodash';
-import { BodyClass } from '@plone/volto/helpers';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
import { runtimeConfig } from '@plone/volto/runtime_config';
+import config from '@plone/volto/registry';
+
+const CRITICAL_CSS_TEMPLATE = `function alter() {
+ document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
+ }
+ if (window.addEventListener) {
+ window.addEventListener('DOMContentLoaded', alter, false)
+ } else {
+ window.onload=alter
+ }`;
+
+export const loadReducers = (state = {}) => {
+ const { settings } = config;
+ return Object.assign(
+ {},
+ ...Object.keys(state).map((name) =>
+ settings.initialReducersBlacklist.includes(name)
+ ? {}
+ : { [name]: state[name] },
+ ),
+ );
+};
/**
* Html class.
@@ -20,6 +42,14 @@ import { runtimeConfig } from '@plone/volto/runtime_config';
* The only thing this component doesn't (and can't) include is the
* HTML doctype declaration, which is added to the rendered output
* by the server.js file.
+ *
+ * Critical.css behaviour: when a file `public/critical.css` is present, the
+ * loading of stylesheets is changed. The styles in critical.css are inlined in
+ * the generated HTML, and the whole story needs to change completely: instead
+ * of treating stylesheets as priority for rendering, we want to defer their
+ * loading as much as possible. So we change the stylesheets to be prefetched
+ * and we switch their rel back to stylesheets at document ready event.
+ *
* @function Html
* @param {Object} props Component properties.
* @param {Object} props.assets Assets to be rendered.
@@ -57,11 +87,16 @@ class Html extends Component {
* @returns {string} Markup for the component.
*/
render() {
- const { extractor, markup, store } = this.props;
+ const {
+ extractor,
+ markup,
+ store,
+ criticalCss,
+ apiPath,
+ publicURL,
+ } = this.props;
const head = Helmet.rewind();
const bodyClass = join(BodyClass.rewind(), ' ');
- const pathName = store.getState()?.router.location.pathname;
- const renderScripts = ['/header', '/head', '/footer'].includes(pathName);
return (
@@ -69,32 +104,79 @@ class Html extends Component {
{head.base.toComponent()}
{head.title.toComponent()}
{head.meta.toComponent()}
- {!renderScripts && head.link.toComponent()}
- {!renderScripts && head.script.toComponent()}
+ {head.link.toComponent()}
+ {head.script.toComponent()}
-
-
+
+
+
+
+
+ {process.env.NODE_ENV === 'production' && criticalCss && (
+
+ )}
{/* Add the crossorigin while in development */}
- {!renderScripts &&
- extractor.getLinkElements().map((elem) =>
- React.cloneElement(elem, {
- crossOrigin:
- process.env.NODE_ENV === 'production' ? undefined : 'true',
- }),
- )}
- {/* Styles in development are loaded with Webpack's style-loader, in production,
- they need to be static*/}
- {!renderScripts && process.env.NODE_ENV === 'production' && (
- <>{extractor.getStyleElements()}
+ {extractor.getLinkElements().map((elem) =>
+ React.cloneElement(elem, {
+ crossOrigin:
+ process.env.NODE_ENV === 'production' ? undefined : 'true',
+ rel: !criticalCss
+ ? elem.props.rel
+ : elem.props.as === 'style'
+ ? 'prefetch'
+ : elem.props.rel,
+ }),
)}
+ {/* Styles in development are loaded with Webpack's style-loader, in production,
+ they need to be static*/}
+ {process.env.NODE_ENV === 'production' ? (
+ criticalCss ? (
+ <>
+
+ {extractor.getStyleElements().map((elem) => (
+
+ ))}
+
+ ) : (
+ extractor.getStyleElements()
+ )
+ ) : undefined}
@@ -102,12 +184,14 @@ class Html extends Component {
{/* Add the crossorigin while in development */}
- {!renderScripts && this.props.extractScripts !== false
+ {this.props.extractScripts !== false
? extractor.getScriptElements().map((elem) =>
React.cloneElement(elem, {
crossOrigin:
@@ -120,4 +204,5 @@ class Html extends Component {
);
}
}
+
export default Html;