From f658c16456dcaf6117d121ee9c627edb50f32e3d Mon Sep 17 00:00:00 2001 From: Muhammad Usman Date: Fri, 17 Jul 2020 10:31:35 +0200 Subject: [PATCH 1/3] Make DataWrapperChart height resposive DataWrapperChart height was fixed previously to a static value It receives a post message from DataWrapper with the ideal height according to device It creates a hook, which register event and listen to the messages from iframe and ajust the height accordingly --- .../dataWrapperChart/DataWrapperChart.js | 8 +++++-- .../DataWrapperChart.module.css | 2 +- .../scrolled/package/src/frontend/index.js | 1 + .../package/src/frontend/useIframeHeight.js | 22 +++++++++++++++++++ 4 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 entry_types/scrolled/package/src/frontend/useIframeHeight.js diff --git a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js index 4a3d32a437..b412283a1c 100644 --- a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js +++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js @@ -2,7 +2,8 @@ import React from 'react'; import { useContentElementLifecycle, - useContentElementEditorState + useContentElementEditorState, + useIframeHeight } from 'pageflow-scrolled/frontend'; import styles from './DataWrapperChart.module.css'; @@ -10,15 +11,18 @@ import styles from './DataWrapperChart.module.css'; export function DataWrapperChart({configuration}) { const {isPrepared} = useContentElementLifecycle(); const {isEditable, isSelected} = useContentElementEditorState(); + const height = useIframeHeight(configuration.url); // remove url protocol, so that it is selected by the browser itself var srcURL = ''; if (configuration.url && isPrepared) { srcURL = configuration.url.replace(/http(s|):/, ''); } + return (
{renderIframe(srcURL)}
diff --git a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css index 1f6c6fd3a4..0b096b0bf5 100644 --- a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css +++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css @@ -1,6 +1,6 @@ .container { min-height: 200px; - height: 400px; + /* height: 400px; */ background-color: rgba(0, 0, 0, 0.5); } diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js index f7b22a681f..909bc7c699 100644 --- a/entry_types/scrolled/package/src/frontend/index.js +++ b/entry_types/scrolled/package/src/frontend/index.js @@ -38,6 +38,7 @@ export {AudioPlayerControls} from './AudioPlayerControls'; export {PlayerControls} from './PlayerControls'; export * from './useOnScreen'; +export * from './useIframeHeight'; export * from './i18n'; export * from './SectionThumbnail'; diff --git a/entry_types/scrolled/package/src/frontend/useIframeHeight.js b/entry_types/scrolled/package/src/frontend/useIframeHeight.js new file mode 100644 index 0000000000..4e923e3938 --- /dev/null +++ b/entry_types/scrolled/package/src/frontend/useIframeHeight.js @@ -0,0 +1,22 @@ +import {useState, useEffect} from 'react' + +export function useIframeHeight(url) { + const [height, setHeight] = useState('400px'); + + useEffect(() => { + window.addEventListener('message', receive) + + function receive(event) { + if (typeof event.data['datawrapper-height'] !== 'undefined') { + for (var chartId in event.data['datawrapper-height']) { + if (url.indexOf(chartId) > -1) { + setHeight(event.data['datawrapper-height'][chartId] + 'px'); + } + } + } + } + return () => document.removeEventListener('message', receive); + }, [url]); + + return height +} \ No newline at end of file From 5c7581b1363cc87e6dc872c0e50fa79882ed6267 Mon Sep 17 00:00:00 2001 From: Muhammad Usman Date: Tue, 21 Jul 2020 13:59:55 +0200 Subject: [PATCH 2/3] Add spec for remove event listener It adds a spec to confirm that the registered event window is successfully removed It also changes the absolute path, change the testUrl to a dummy url and cleans the code --- .../dataWrapperChart/useIframeHeight-spec.js | 31 +++++++++++++++++++ .../dataWrapperChart/DataWrapperChart.js | 4 +-- .../DataWrapperChart.module.css | 1 - .../dataWrapperChart}/useIframeHeight.js | 14 ++++----- .../scrolled/package/src/frontend/index.js | 1 - 5 files changed, 40 insertions(+), 11 deletions(-) create mode 100644 entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js rename entry_types/scrolled/package/src/{frontend => contentElements/dataWrapperChart}/useIframeHeight.js (62%) diff --git a/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js b/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js new file mode 100644 index 0000000000..4ed3e80b38 --- /dev/null +++ b/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js @@ -0,0 +1,31 @@ +import {useIframeHeight} from 'contentElements/dataWrapperChart/useIframeHeight'; + +import {renderHook} from '@testing-library/react-hooks'; +import {fakeParentWindow, tick} from 'support'; + +describe('useIframeHeight', () => { + it('Confirms the default height', async () => { + const testURL = 'testUrl/id/1/'; + fakeParentWindow(); + + const {result} = renderHook(() => useIframeHeight(testURL)); + + window.postMessage('SOME_MESSAGE', '*'); + await tick(); + + expect(result.current).toEqual('400px'); + }); + + it('removes listener on cleanup', async () => { + const testURL = 'testUrl/id/1/'; + fakeParentWindow(); + const {unmount} = renderHook(() => useIframeHeight(testURL)); + const spy = jest.spyOn(window.document, 'removeEventListener'); + + unmount(); + window.postMessage('SOME_MESSAGE', '*'); + await tick(); + + expect(spy).toBeCalledWith('message', expect.any(Function)); + }); +}); \ No newline at end of file diff --git a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js index b412283a1c..9a85c8024b 100644 --- a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js +++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.js @@ -2,9 +2,9 @@ import React from 'react'; import { useContentElementLifecycle, - useContentElementEditorState, - useIframeHeight + useContentElementEditorState } from 'pageflow-scrolled/frontend'; +import {useIframeHeight} from './useIframeHeight'; import styles from './DataWrapperChart.module.css'; diff --git a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css index 0b096b0bf5..fce5e6eec6 100644 --- a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css +++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/DataWrapperChart.module.css @@ -1,6 +1,5 @@ .container { min-height: 200px; - /* height: 400px; */ background-color: rgba(0, 0, 0, 0.5); } diff --git a/entry_types/scrolled/package/src/frontend/useIframeHeight.js b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js similarity index 62% rename from entry_types/scrolled/package/src/frontend/useIframeHeight.js rename to entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js index 4e923e3938..3b11c8c1ad 100644 --- a/entry_types/scrolled/package/src/frontend/useIframeHeight.js +++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js @@ -1,22 +1,22 @@ -import {useState, useEffect} from 'react' +import {useEffect, useState} from 'react'; export function useIframeHeight(url) { const [height, setHeight] = useState('400px'); - useEffect(() => { - window.addEventListener('message', receive) + window.addEventListener('message', receive); function receive(event) { if (typeof event.data['datawrapper-height'] !== 'undefined') { for (var chartId in event.data['datawrapper-height']) { if (url.indexOf(chartId) > -1) { - setHeight(event.data['datawrapper-height'][chartId] + 'px'); - } + const receivedHeight = event.data['datawrapper-height'][chartId] + 'px'; + setHeight(receivedHeight); + } } } } return () => document.removeEventListener('message', receive); }, [url]); - return height -} \ No newline at end of file + return height; +} diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js index 909bc7c699..f7b22a681f 100644 --- a/entry_types/scrolled/package/src/frontend/index.js +++ b/entry_types/scrolled/package/src/frontend/index.js @@ -38,7 +38,6 @@ export {AudioPlayerControls} from './AudioPlayerControls'; export {PlayerControls} from './PlayerControls'; export * from './useOnScreen'; -export * from './useIframeHeight'; export * from './i18n'; export * from './SectionThumbnail'; From 902f17b0ef9b8bd0bb997e779c01b86e55fe9994 Mon Sep 17 00:00:00 2001 From: Awais Date: Fri, 31 Jul 2020 16:14:11 +0200 Subject: [PATCH 3/3] Changes: * changed mechanism to retreive height from event object. * added the spec to test dynamic height --- .../dataWrapperChart/useIframeHeight-spec.js | 20 +++++++++++++++++-- .../dataWrapperChart/useIframeHeight.js | 17 ++++++++-------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js b/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js index 4ed3e80b38..90130ba0e8 100644 --- a/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/dataWrapperChart/useIframeHeight-spec.js @@ -1,6 +1,6 @@ import {useIframeHeight} from 'contentElements/dataWrapperChart/useIframeHeight'; -import {renderHook} from '@testing-library/react-hooks'; +import {renderHook, act} from '@testing-library/react-hooks'; import {fakeParentWindow, tick} from 'support'; describe('useIframeHeight', () => { @@ -16,6 +16,22 @@ describe('useIframeHeight', () => { expect(result.current).toEqual('400px'); }); + it('sets the height', async () => { + const testURL = 'https://datawrapper.dwcdn.net/CXXQo/1/'; + fakeParentWindow(); + const {result, rerender} = renderHook(() => useIframeHeight(testURL)); + expect(result.current).toEqual('400px'); + + window.postMessage({'datawrapper-height': { + id : 'CXXQo/1/', + height: 350 + }}, '*'); + await tick(); + rerender(); + + expect(result.current).toEqual('350px'); + }); + it('removes listener on cleanup', async () => { const testURL = 'testUrl/id/1/'; fakeParentWindow(); @@ -28,4 +44,4 @@ describe('useIframeHeight', () => { expect(spy).toBeCalledWith('message', expect.any(Function)); }); -}); \ No newline at end of file +}); diff --git a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js index 3b11c8c1ad..38dcabff33 100644 --- a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js +++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/useIframeHeight.js @@ -1,22 +1,21 @@ -import {useEffect, useState} from 'react'; +import {useEffect, useRef} from 'react'; export function useIframeHeight(url) { - const [height, setHeight] = useState('400px'); + const height = useRef('400px'); useEffect(() => { window.addEventListener('message', receive); - function receive(event) { + function receive(event) { if (typeof event.data['datawrapper-height'] !== 'undefined') { - for (var chartId in event.data['datawrapper-height']) { - if (url.indexOf(chartId) > -1) { - const receivedHeight = event.data['datawrapper-height'][chartId] + 'px'; - setHeight(receivedHeight); - } + let chartId = event.data['datawrapper-height']['id']; + if (chartId && url.indexOf(chartId) > -1) { + const receivedHeight = event.data['datawrapper-height']['height'] + 'px'; + height.current = receivedHeight; } } } return () => document.removeEventListener('message', receive); }, [url]); - return height; + return height.current; }