Skip to content

Commit

Permalink
feat(download): implement scroll to iframes to ensure print to pdf ha…
Browse files Browse the repository at this point in the history
…s preview of iframes (#213)

* feat: set isPrint redux state when window.print() is triggered

* add isPrint missing files

* test: add Logo.test.jsx

* test: fix in Logo.test.jsx

* test: added HomePageView.test.jsx and HomePageInverseView.test.jsx

* chore: cleanup unused RemoveSchema code

* chore: cleanup unused RemoveSchema code

* test: added TokenWidget.test.jsx and TopicsWidget.test.jsx

* Automated release 1.28.4

* Bump version to 1.29.0 from 1.28.4

* Automated release 1.29.0

* fix: smaller timeout in window.print

* test: TokenWidget.test.jsx and TopicsWidget.test.jsx cover more conditions

* Automated release 1.29.0

---------

Co-authored-by: EEA Jenkins <@users.noreply.github.com>
Co-authored-by: Claudia Ifrim <[email protected]>
  • Loading branch information
laszlocseh and claudiaifrim authored Mar 7, 2024
1 parent f9090eb commit bc5cbe0
Show file tree
Hide file tree
Showing 16 changed files with 345 additions and 19 deletions.
24 changes: 24 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d

Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

### [1.29.0](https://github.com/eea/volto-eea-website-theme/compare/1.28.3...1.29.0) - 7 March 2024

#### :rocket: New Features

- feat: set isPrint redux state when window.print() is triggered [laszlocseh - [`4d07b9a`](https://github.com/eea/volto-eea-website-theme/commit/4d07b9a76af0e43340e100db10ad1051c61f3a89)]

#### :bug: Bug Fixes

- fix: smaller timeout in window.print [laszlocseh - [`808d7e9`](https://github.com/eea/volto-eea-website-theme/commit/808d7e9ef406f38e008a718fd4883fe735c296de)]

#### :house: Internal changes

- chore: cleanup unused RemoveSchema code [laszlocseh - [`6d8de0a`](https://github.com/eea/volto-eea-website-theme/commit/6d8de0a27dd6bfd5645bb730d2c66f2d4784c158)]
- chore: cleanup unused RemoveSchema code [laszlocseh - [`c1f2650`](https://github.com/eea/volto-eea-website-theme/commit/c1f2650f0f7ffb27c168399fabcbf69d0299235b)]

#### :hammer_and_wrench: Others

- test: TokenWidget.test.jsx and TopicsWidget.test.jsx cover more conditions [laszlocseh - [`dd154bb`](https://github.com/eea/volto-eea-website-theme/commit/dd154bb520237f458be563280cac1545eb381bdf)]
- Bump version to 1.29.0 from 1.28.4 [Claudia Ifrim - [`7bc8eab`](https://github.com/eea/volto-eea-website-theme/commit/7bc8eabd4b0462fc5afc07ed131d074af642cc89)]
- test: added TokenWidget.test.jsx and TopicsWidget.test.jsx [laszlocseh - [`f7292bb`](https://github.com/eea/volto-eea-website-theme/commit/f7292bb426591f758dcc7bc159b5dbd75b7afb36)]
- test: added HomePageView.test.jsx and HomePageInverseView.test.jsx [laszlocseh - [`2076651`](https://github.com/eea/volto-eea-website-theme/commit/2076651820693825b5e20b0a7774307cd78eeb57)]
- test: fix in Logo.test.jsx [laszlocseh - [`6d552f8`](https://github.com/eea/volto-eea-website-theme/commit/6d552f89d5aff6e47ef3032d4862a1bcbe364c01)]
- test: add Logo.test.jsx [laszlocseh - [`752c562`](https://github.com/eea/volto-eea-website-theme/commit/752c5629840d906382858f088b97d33147684ca8)]
- add isPrint missing files [laszlocseh - [`d995789`](https://github.com/eea/volto-eea-website-theme/commit/d995789f337a00455d45b5ec26de9c4c0c898ce6)]
### [1.28.3](https://github.com/eea/volto-eea-website-theme/compare/1.28.2...1.28.3) - 5 March 2024

#### :bug: Bug Fixes
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@eeacms/volto-eea-website-theme",
"version": "1.28.3",
"version": "1.29.0",
"description": "@eeacms/volto-eea-website-theme: Volto add-on",
"main": "src/index.js",
"author": "European Environment Agency: IDM2 A-Team",
Expand Down
2 changes: 1 addition & 1 deletion src/actions/index.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from './schema';
export * from './print';
13 changes: 13 additions & 0 deletions src/actions/print.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* Print action.
* @module actions/print
*/

import { SET_ISPRINT } from '@eeacms/volto-eea-website-theme/constants/ActionTypes';

export const setIsPrint = (data) => {
return {
type: SET_ISPRINT,
payload: data,
};
};
5 changes: 0 additions & 5 deletions src/actions/schema.js

This file was deleted.

106 changes: 95 additions & 11 deletions src/components/theme/Banner/View.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useCallback, useMemo, useRef } from 'react';
import { Helmet } from '@plone/volto/helpers';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { connect, useDispatch } from 'react-redux';
import { withRouter } from 'react-router';
import { defineMessages, injectIntl } from 'react-intl';
import startCase from 'lodash/startCase';
import { Icon } from 'semantic-ui-react';
import { Icon, Loader } from 'semantic-ui-react';
import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
import config from '@plone/volto/registry';
import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
Expand All @@ -14,7 +14,8 @@ import {
sharePage,
} from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';

import { setIsPrint } from '@eeacms/volto-eea-website-theme/actions/print';
import cx from 'classnames';
import './styles.less';

const messages = defineMessages({
Expand Down Expand Up @@ -65,6 +66,7 @@ const Title = ({ config = {}, properties }) => {
};

const View = (props) => {
const dispatch = useDispatch();
const { banner = {}, intl } = props;
const metadata = props.metadata || props.properties;
const popupRef = useRef(null);
Expand Down Expand Up @@ -164,14 +166,95 @@ const View = (props) => {
</>
)}
{!hideDownloadButton && (
<Banner.Action
icon="ri-download-2-fill"
title={intl.formatMessage(messages.download)}
className="download"
onClick={() => {
window.print();
}}
/>
<>
<Banner.Action
icon="ri-download-2-fill"
title={intl.formatMessage(messages.download)}
className="download"
onClick={() => {
// set tabs to be visible
const tabs = document.getElementsByClassName('ui tab');
Array.from(tabs).forEach((tab) => {
tab.style.display = 'block';
});

dispatch(setIsPrint(true));
// display loader
const printLoader = document.getElementById(
'download-print-loader',
);
printLoader.style.display = 'flex';

let timeoutValue = 1000;
// if we have plotlycharts increase timeout
setTimeout(() => {
const plotlyCharts = document.getElementsByClassName(
'visualization-wrapper',
);
if (plotlyCharts.length > 0) {
timeoutValue = timeoutValue + 1000;
}
}, timeoutValue);

// scroll to iframes to make them be in the viewport
// use timeout to wait for load
setTimeout(() => {
const iframes = document.getElementsByTagName('iframe');
if (iframes.length > 0) {
timeoutValue = timeoutValue + 2000;
Array.from(iframes).forEach((element, index) => {
setTimeout(() => {
element.scrollIntoView({
behavior: 'instant',
block: 'nearest',
inline: 'center',
});
}, timeoutValue);
timeoutValue = timeoutValue + 3000;
});
timeoutValue = timeoutValue + 1000;
}

setTimeout(() => {
window.scrollTo({
top: 0,
});
Array.from(tabs).forEach((tab) => {
tab.style.display = '';
});
printLoader.style.display = 'none';
dispatch(setIsPrint(false));
window.print();
}, timeoutValue);
}, timeoutValue);
}}
/>
<div
id="download-print-loader"
className={cx('ui warning message')}
style={{
position: 'fixed',
left: '40%',
right: '40%',
backgroundColor: '#fff',
padding: '1em',
display: 'none',
flexDirection: 'column',
alignItems: 'center',
top: '40%',
zIndex: '9999',
}}
>
<Loader
disabled={false}
indeterminate
active
inline
size="medium"
></Loader>
<div>Preparing download</div>
</div>
</>
)}
{rssLinks?.map((rssLink, index) => (
<>
Expand Down Expand Up @@ -253,6 +336,7 @@ export default compose(
connect((state) => {
return {
types: state.types.types,
isPrint: state.isPrint,
};
}),
)(View);
16 changes: 16 additions & 0 deletions src/components/theme/Homepage/HomePageInverseView.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { render } from '@testing-library/react';
import HomePageInverseView from './HomePageInverseView';
import '@testing-library/jest-dom/extend-expect';

describe('HomePageInverseView Component', () => {
it('renders without crashing', () => {
const mockContent = (
<body>
<div>Mock content</div>
</body>
);
const { container } = render(<HomePageInverseView content={mockContent} />);
expect(container).toBeTruthy();
});
});
16 changes: 16 additions & 0 deletions src/components/theme/Homepage/HomePageView.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { render } from '@testing-library/react';
import HomePageView from './HomePageView';
import '@testing-library/jest-dom/extend-expect';

describe('HomePageView Component', () => {
it('renders without crashing', () => {
const mockContent = (
<body>
<div>Mock content</div>
</body>
);
const { container } = render(<HomePageView content={mockContent} />);
expect(container).toBeTruthy();
});
});
31 changes: 31 additions & 0 deletions src/components/theme/Logo.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-intl-redux';
import configureStore from 'redux-mock-store';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import EEALogo from './Logo';

const mockStore = configureStore();
let history = createMemoryHistory();

describe('EEALogo Component', () => {
it('renders without crashing', () => {
const store = mockStore({
intl: {
locale: 'en',
messages: {},
},
});

const { container } = render(
<Provider store={store}>
<Router history={history}>
<EEALogo />
</Router>
</Provider>,
);

expect(container).toBeTruthy();
});
});
54 changes: 54 additions & 0 deletions src/components/theme/Widgets/TokenWidget.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-intl-redux';
import configureStore from 'redux-mock-store';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { TokenWidget } from './TokenWidget';

const mockStore = configureStore();
let history = createMemoryHistory();

describe('TokenWidget Component', () => {
it('renders without crashing', () => {
const store = mockStore({
intl: {
locale: 'en',
messages: {},
},
});

const { container } = render(
<Provider store={store}>
<Router history={history}>
<TokenWidget
value={['Value1', 'Value2']}
children={''}
className={'test'}
/>
</Router>
</Provider>,
);

expect(container).toBeTruthy();
});

it('renders without crashing, without value', () => {
const store = mockStore({
intl: {
locale: 'en',
messages: {},
},
});

const { container } = render(
<Provider store={store}>
<Router history={history}>
<TokenWidget value={null} children={''} className={'test'} />
</Router>
</Provider>,
);

expect(container).toBeTruthy();
});
});
54 changes: 54 additions & 0 deletions src/components/theme/Widgets/TopicsWidget.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-intl-redux';
import configureStore from 'redux-mock-store';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { TopicsWidget } from './TopicsWidget';

const mockStore = configureStore();
let history = createMemoryHistory();

describe('TopicsWidget Component', () => {
it('renders without crashing, with value', () => {
const store = mockStore({
intl: {
locale: 'en',
messages: {},
},
});

const { container } = render(
<Provider store={store}>
<Router history={history}>
<TopicsWidget
value={['Value1', 'Value2']}
children={''}
className={'test'}
/>
</Router>
</Provider>,
);

expect(container).toBeTruthy();
});

it('renders without crashing, without value', () => {
const store = mockStore({
intl: {
locale: 'en',
messages: {},
},
});

const { container } = render(
<Provider store={store}>
<Router history={history}>
<TopicsWidget value={null} children={''} className={'test'} />
</Router>
</Provider>,
);

expect(container).toBeTruthy();
});
});
6 changes: 6 additions & 0 deletions src/constants/ActionTypes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/**
* Action types.
* @module constants/ActionTypes
*/

export const SET_ISPRINT = 'SET_ISPRINT';
Loading

0 comments on commit bc5cbe0

Please sign in to comment.