Skip to content

Commit ec6b440

Browse files
allyoucanmapofftherailz
allyoucanmap
authored and
offtherailz
committed
Geostory sections (#4029)
Add base structure for geostory scroll handlers and background setup (base support for immersive or cover backgrounds) .
1 parent e23fa89 commit ec6b440

30 files changed

Lines changed: 1286 additions & 978 deletions

‎package-lock.json‎

Lines changed: 414 additions & 838 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,12 @@
8484
"@mapbox/geojsonhint": "2.0.1",
8585
"@mapbox/togeojson": "0.16.0",
8686
"@turf/bbox": "4.1.0",
87+
"@turf/bbox-polygon": "5.1.5",
88+
"@turf/boolean-contains": "5.1.5",
89+
"@turf/boolean-overlap": "5.1.5",
8790
"@turf/center": "5.1.5",
8891
"@turf/great-circle": "5.1.5",
8992
"@turf/inside": "4.1.0",
90-
"@turf/bbox-polygon": "5.1.5",
91-
"@turf/boolean-overlap": "5.1.5",
92-
"@turf/boolean-contains": "5.1.5",
9393
"@turf/line-intersect": "4.1.0",
9494
"@turf/polygon-to-linestring": "4.1.0",
9595
"ag-grid": "3.3.3",
@@ -116,6 +116,7 @@
116116
"history": "4.6.1",
117117
"html2canvas": "0.5.0-beta4",
118118
"immutable": "4.0.0-rc.12",
119+
"intersection-observer": "0.7.0",
119120
"intl": "1.2.2",
120121
"ismobilejs": "0.4.0",
121122
"json-2-csv": "2.1.2",
@@ -162,6 +163,7 @@
162163
"react-dropzone": "3.13.1",
163164
"react-grid-layout-resize-prevent-collision": "0.16.0",
164165
"react-input-autosize": "1.1.4",
166+
"react-intersection-observer": "8.24.1",
165167
"react-intl": "2.3.0",
166168
"react-joyride": "ddeath/react-joyride#fixed-positioning-and-overlay",
167169
"react-notification-system": "0.2.14",
@@ -198,6 +200,7 @@
198200
"rxjs": "5.1.1",
199201
"screenfull": "4.0.0",
200202
"shpjs": "3.4.2",
203+
"stickybits": "3.6.6",
201204
"tinycolor2": "1.4.1",
202205
"turf-bbox": "3.0.10",
203206
"turf-buffer": "3.0.10",

‎web/client/components/geostory/__tests__/Story-test.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1+
/*
2+
* Copyright 2019, GeoSolutions Sas.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
19
import React from 'react';
2-
const ReactDOM = require('react-dom');
3-
const expect = require('expect');
10+
import ReactDOM from 'react-dom';
11+
import expect from 'expect';
412
import Story from '../Story';
513

614
describe('Story component', () => {

‎web/client/components/geostory/builder/SectionsPreview.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ const Preview = ({ width } = {}) => {
3333
const res = 1080 / 1920;
3434
const height = width * res;
3535
return (
36-
<div className="section-preview" style={{ position: 'relative', width, height }}>
37-
<div className="section-preview-icon">
38-
<Glyphicon glyph="1-map" style={{ fontSize: height / 2, margin: 'auto' }} />
36+
<div className="ms-section-preview" style={{ width, height }}>
37+
<div className="ms-section-preview-icon">
38+
<Glyphicon glyph="1-map" style={{ fontSize: height / 2 }} />
3939
</div>
4040
</div>
4141
);

‎web/client/components/geostory/builder/__tests__/Builder-test.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1+
/*
2+
* Copyright 2019, GeoSolutions Sas.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
19
import React from 'react';
2-
const ReactDOM = require('react-dom');
3-
const expect = require('expect');
10+
import ReactDOM from 'react-dom';
11+
import expect from 'expect';
412
import Builder from '../Builder';
513
import STORY from 'json-loader!../../../../test-resources/geostory/sampleStory_1.json';
614

‎web/client/components/geostory/builder/__tests__/SectionsPreview-test.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1+
/*
2+
* Copyright 2019, GeoSolutions Sas.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
19
import React from 'react';
2-
const ReactDOM = require('react-dom');
3-
const expect = require('expect');
10+
import ReactDOM from 'react-dom';
11+
import expect from 'expect';
412
import SectionsPreview from '../SectionsPreview';
513
import STORY from 'json-loader!../../../../test-resources/geostory/sampleStory_1.json';
614

‎web/client/components/geostory/contents/Content.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,21 @@
66
* LICENSE file in the root directory of this source tree.
77
*/
88
import React from 'react';
9-
import Text from './Text';
9+
import TextB from './Text';
10+
import { compose, withHandlers } from 'recompose';
11+
import withIntersectionObserver from '../../misc/enhancers/withIntersectionObserver';
12+
13+
const enhanceContents = compose(
14+
withHandlers({
15+
onVisibilityChange: ({ id, onVisibilityChange = () => { } } = {}) => (visible, entry) => onVisibilityChange({ id, visible, entry })
16+
}),
17+
withIntersectionObserver({ threshold: [0.75]})
18+
);
19+
20+
const Text = enhanceContents(TextB);
21+
const DummyComponent = ({ type, inViewRef }) => <div ref={inViewRef} className="ms-content ms-content-unknown">{`warning: unknown content type "${type}"`}</div>;
22+
1023

11-
const DummyComponent = ({type}) => <div className="ms-geostory-content-unknown">{`warning: unknown content type "${type}"`}</div>;
1224
/**
1325
* Returns the Component to use for the given type
1426
* @param {string} type the type of the Content

‎web/client/components/geostory/contents/Text.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
import React from 'react';
99

1010

11-
const Text = (props) => {
11+
const Text = ({ html, inViewRef, style = {}}) => {
1212
return (
13-
<div className="ms-geostory-content-text" style={{margin: 20}} onClick={() => {
13+
<div
14+
ref={inViewRef}
15+
style={style}
16+
className="ms-content ms-content-text"
17+
onClick={() => {
1418
// TODO: enable editing
15-
}} dangerouslySetInnerHTML={{ __html: props.html }} />
19+
}}
20+
dangerouslySetInnerHTML={{ __html: html }} />
1621
);
1722
};
1823
export default Text;

‎web/client/components/geostory/contents/__tests__/Contents-test.jsx‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1+
/*
2+
* Copyright 2019, GeoSolutions Sas.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
19
import React from 'react';
2-
const ReactDOM = require('react-dom');
3-
const expect = require('expect');
10+
import ReactDOM from 'react-dom';
11+
import expect from 'expect';
412
import Content from '../Content';
513
import STORY from 'json-loader!../../../../test-resources/geostory/sampleStory_1.json';
6-
14+
const SCROLLABLE_CONTAINER_ID = "TEST_SCROLLABLE_CONTAINER";
15+
const TestScrollableContainer = ({ children, height }) => <div id={SCROLLABLE_CONTAINER_ID} style={{ height, overflowY: "auto" }} >{children}</div>;
716
describe('Content component', () => {
817
beforeEach((done) => {
918
document.body.innerHTML = '<div id="container"></div>';
@@ -17,12 +26,28 @@ describe('Content component', () => {
1726
it('Content rendering with defaults', () => {
1827
ReactDOM.render(<Content />, document.getElementById("container"));
1928
const container = document.getElementById('container');
20-
expect(container.querySelector('.ms-geostory-content-unknown')).toExist();
29+
expect(container.querySelector('.ms-content-unknown')).toExist();
2130
});
2231
it('Content rendering known type (text)', () => {
2332
ReactDOM.render(<Content {...STORY.sections[0].contents[0]} />, document.getElementById("container"));
2433
const container = document.getElementById('container');
25-
const el = container.querySelector('.ms-geostory-content-text');
34+
const el = container.querySelector('.ms-content-text');
2635
expect(el).toExist();
2736
});
37+
it('content has intersection observer', (done) => {
38+
const ID_1 = "ID_1";
39+
const ID_2 = "ID_2";
40+
ReactDOM.render((<TestScrollableContainer height="100">
41+
<Content id={ID_1} type="text" height={100} />
42+
<Content id={ID_2} onVisibilityChange={({ id, visible }) => {
43+
expect(id).toBe(ID_2);
44+
expect(visible).toBe(true);
45+
done();
46+
}} type="text" height={100} />
47+
</TestScrollableContainer>), document.getElementById("container"));
48+
const container = document.getElementById('container');
49+
const scrollable = container.querySelector(`#${SCROLLABLE_CONTAINER_ID}`);
50+
expect(scrollable).toExist();
51+
scrollable.scrollBy(0, 120);
52+
});
2853
});

‎web/client/components/geostory/layouts/Cascade.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default ({
3434
}) => (<BorderLayout className="ms-cascade-story">
3535
<ContainerDimensions sections={sections}>
3636
{({ width, height }) =>
37-
<div className="sections-container">
37+
<div className="ms-sections-container">
3838
{
3939
sections.map(({ contents = [], id: sectionId, type: sectionType }) => {
4040
return (

0 commit comments

Comments
 (0)