Skip to content

Commit

Permalink
Merge pull request #191 from mbarto/fix_spinner_ol3
Browse files Browse the repository at this point in the history 
Fixes for GlobalSpinner on both leaflet and openlayers
  • Loading branch information
@mbarto
mbarto committed Oct 2, 2015
2 parents ff0acb9 + b6d14e7 commit ab72eaf
Show file tree
Hide file tree
Showing 10 changed files with 61 additions and 174 deletions.
24 changes: 1 addition & 23 deletions web/client/actions/__tests__/map-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,12 @@ var {
CHANGE_ZOOM_LVL,
LAYER_LOADING,
LAYER_LOAD,
SHOW_SPINNER,
HIDE_SPINNER,
changeMapView,
clickOnMap,
changeMousePointer,
changeZoomLevel,
layerLoading,
layerLoad,
showSpinner,
hideSpinner
layerLoad
} = require('../map');

describe('Test correctness of the map actions', () => {
Expand Down Expand Up @@ -87,22 +83,4 @@ describe('Test correctness of the map actions', () => {
expect(retval.type).toBe(LAYER_LOAD);
expect(retval.layerId).toBe(testVal);
});

it('show some spinner', () => {
const testVal = 'spinner1';
const retval = showSpinner(testVal);

expect(retval).toExist();
expect(retval.type).toBe(SHOW_SPINNER);
expect(retval.spinnerId).toBe(testVal);
});

it('hide some spinner', () => {
const testVal = 'spinner1';
const retval = hideSpinner(testVal);

expect(retval).toExist();
expect(retval.type).toBe(HIDE_SPINNER);
expect(retval.spinnerId).toBe(testVal);
});
});
22 changes: 1 addition & 21 deletions web/client/actions/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ const CHANGE_MOUSE_POINTER = 'CHANGE_MOUSE_POINTER';
const CHANGE_ZOOM_LVL = 'CHANGE_ZOOM_LVL';
const LAYER_LOADING = 'LAYER_LOADING';
const LAYER_LOAD = 'LAYER_LOAD';
const SHOW_SPINNER = 'SHOW_SPINNER';
const HIDE_SPINNER = 'HIDE_SPINNER';

function changeMapView(center, zoom, bbox, size, mapStateSource) {
return {
Expand Down Expand Up @@ -62,35 +60,17 @@ function layerLoad(layerId) {
};
}

function showSpinner(spinnerId) {
return {
type: SHOW_SPINNER,
spinnerId: spinnerId
};
}

function hideSpinner(spinnerId) {
return {
type: HIDE_SPINNER,
spinnerId: spinnerId
};
}

module.exports = {
CHANGE_MAP_VIEW,
CLICK_ON_MAP,
CHANGE_MOUSE_POINTER,
CHANGE_ZOOM_LVL,
LAYER_LOADING,
LAYER_LOAD,
SHOW_SPINNER,
HIDE_SPINNER,
changeMapView,
clickOnMap,
changeMousePointer,
changeZoomLevel,
layerLoading,
layerLoad,
showSpinner,
hideSpinner
layerLoad
};
26 changes: 3 additions & 23 deletions web/client/components/globalspinner/GlobalSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,21 @@ var React = require('react');
var GlobalSpinner = React.createClass({
propTypes: {
id: React.PropTypes.string,
loadingLayers: React.PropTypes.object,
showSpinner: React.PropTypes.func,
hideSpinner: React.PropTypes.func,
spinnersInfo: React.PropTypes.object,
delayMs: React.PropTypes.number
loadingLayers: React.PropTypes.array
},
getDefaultProps() {
return {
id: "mapstore-globalspinner",
loadingLayers: {},
showSpinner() {},
hideSpinner() {},
delayMs: 500
loadingLayers: []
};
},
/*componentWillReceiveProps(newProps) {
var id = newProps.id;
var delayMs = newProps.delayMs;
var func = this.isSomeLayerLoading(newProps.loadingLayers) ? newProps.showSpinner : newProps.hideSpinner;
setTimeout(() => func(id), delayMs);
},*/
render() {
if (this.isSomeLayerLoading(this.props.loadingLayers)) {
if (this.props.loadingLayers.length > 0) {
return (
<div id={this.props.id}></div>
);
}
return null;
},
isSomeLayerLoading(loadingLayers) {
return Object.keys(loadingLayers).map(
(key) => { return loadingLayers[key]; }).some(element => element === true);
},
show() {
return (this.props.spinnersInfo || {})[this.props.id] || false;
}
});

Expand Down
4 changes: 2 additions & 2 deletions web/client/components/globalspinner/__tests__/GlobalSpinner-test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('test the globalspinner component', () => {
});

it('creates the component with layers loading and spinner to show', () => {
const globalspinner = React.render(<GlobalSpinner id="globalspinner" loadingLayers={{layer1: true}}
const globalspinner = React.render(<GlobalSpinner id="globalspinner" loadingLayers={["layer1"]}
spinnersInfo={{globalspinner: true}}/>, document.body);
expect(globalspinner).toExist();
const globalspinnerDiv = React.findDOMNode(globalspinner);
Expand All @@ -40,7 +40,7 @@ describe('test the globalspinner component', () => {
});*/

it('creates the component with layers load', () => {
const globalspinner = React.render(<GlobalSpinner loadingLayers={{layer1: false}}/>, document.body);
const globalspinner = React.render(<GlobalSpinner loadingLayers={[]}/>, document.body);
expect(globalspinner).toExist();
const globalspinnerDiv = React.findDOMNode(globalspinner);
expect(globalspinnerDiv).toNotExist();
Expand Down
19 changes: 18 additions & 1 deletion web/client/components/map/openlayers/Layer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,15 @@ const OpenlayersLayer = React.createClass({
map: React.PropTypes.object,
mapId: React.PropTypes.string,
type: React.PropTypes.string,
options: React.PropTypes.object
options: React.PropTypes.object,
onLayerLoading: React.PropTypes.func,
onLayerLoad: React.PropTypes.func
},
getDefaultProps() {
return {
onLayerLoading: () => {},
onLayerLoad: () => {}
};
},

componentDidMount() {
Expand Down Expand Up @@ -48,6 +56,15 @@ const OpenlayersLayer = React.createClass({

if (this.layer) {
this.props.map.addLayer(this.layer);
this.layer.getSource().on('tileloadstart', () => {
this.props.onLayerLoading(options.name);
});
this.layer.getSource().on('tileloadend', () => {
this.props.onLayerLoad(options.name);
});
this.layer.getSource().on('tileloaderror', () => {
this.props.onLayerLoad(options.name);
});
}
}
}
Expand Down
5 changes: 3 additions & 2 deletions web/client/components/map/openlayers/Map.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ var OpenlayersMap = React.createClass({
map.getLayers().forEach((element, index) => { this.props.onLayerLoading(index); });
});
map.on('postcompose', () => {
map.on('change', () => {
map.getLayers().forEach((element, index) => { this.props.onLayerLoad(index); });
});*/

Expand All @@ -138,7 +138,8 @@ var OpenlayersMap = React.createClass({
render() {
const map = this.map;
const children = map ? React.Children.map(this.props.children, child => {
return child ? React.cloneElement(child, {map: map, mapId: this.props.id}) : null;
return child ? React.cloneElement(child, {map: map, mapId: this.props.id,
onLayerLoading: this.props.onLayerLoading, onLayerLoad: this.props.onLayerLoad}) : null;
}) : null;

return (
Expand Down
9 changes: 2 additions & 7 deletions web/client/examples/viewer/containers/Viewer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ var ConfigUtils = require('../../../utils/ConfigUtils');

var {loadLocale} = require('../../../actions/locale');

var {changeMapView, clickOnMap, changeMousePointer,
layerLoading, layerLoad, showSpinner, hideSpinner} = require('../../../actions/map');
var {changeMapView, clickOnMap, changeMousePointer} = require('../../../actions/map');

var VMap = require('../components/Map');
var Localized = require('../../../components/I18N/Localized');
Expand Down Expand Up @@ -125,11 +124,7 @@ module.exports = (actions) => {
loadLocale: loadLocale.bind(null, '../../translations'),
changeMapView,
clickOnMap,
changeMousePointer,
layerLoading,
layerLoad,
showSpinner,
hideSpinner
changeMousePointer
}, actions), dispatch);
})(Viewer);
};
12 changes: 6 additions & 6 deletions web/client/examples/viewer/plugins/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ var {changeMousePosition, changeMousePositionCrs, changeMousePositionState} = re
var {changeLayerProperties} = require('../../../actions/config');
var {changeZoomLevel} = require('../../../actions/map');

var {layerLoading, layerLoad} = require('../../../actions/map');

var React = require('react');

module.exports = {
Expand Down Expand Up @@ -82,11 +84,7 @@ module.exports = {
<ScaleBox
onChange={props.changeZoomLevel}
currentZoomLvl={props.mapConfig.zoom} />,
<GlobalSpinner
loadingLayers={props.mapConfig.loadingLayers}
showSpinner={props.showSpinner}
hideSpinner={props.hideSpinner}
spinnersInfo={props.mapConfig.spinnersInfo} />
<GlobalSpinner loadingLayers={props.mapConfig.loadingLayers}/>
];
},
reducers: {mapInfo, floatingPanel, mousePosition},
Expand All @@ -99,6 +97,8 @@ module.exports = {
changeMousePositionState,
changeMousePositionCrs,
changeMousePosition,
changeZoomLevel
changeZoomLevel,
layerLoading,
layerLoad
}
};
86 changes: 16 additions & 70 deletions web/client/reducers/__tests__/config-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,26 +124,26 @@ describe('Test the mapConfig reducer', () => {
layerId: "layer1"
};

var originalLoadingLayers = {loadingLayers: {layer1: true}};
var originalLoadingLayers = {loadingLayers: ["layer1"]};
var state = mapConfig(null, action);

expect(state.loadingLayers).toEqual({layer1: true});
expect(state.loadingLayers).toEqual(["layer1"]);

state = mapConfig({}, action);
expect(state.loadingLayers).toEqual({layer1: true});
expect(state.loadingLayers).toEqual(["layer1"]);

state = mapConfig(state, action);
expect(state.loadingLayers).toEqual({layer1: true});
expect(state.loadingLayers).toEqual(["layer1"]);

state = mapConfig(originalLoadingLayers, action);
expect(state).toEqual(originalLoadingLayers);
expect(state).toNotBe(originalLoadingLayers);

state = mapConfig({layer1: false}, action);
expect(state.loadingLayers).toEqual({layer1: true});
state = mapConfig({}, action);
expect(state.loadingLayers).toEqual(["layer1"]);

state = mapConfig({loadingLayers: {layer2: true}}, action);
expect(state.loadingLayers).toEqual({layer2: true, layer1: true});
state = mapConfig({loadingLayers: ["layer2"]}, action);
expect(state.loadingLayers).toEqual(["layer2", "layer1"]);
});

it('a layer load, loadingLayers is updated', () => {
Expand All @@ -152,79 +152,25 @@ describe('Test the mapConfig reducer', () => {
layerId: "layer1"
};

var originalLoadingLayers = {loadingLayers: {layer1: false}};
var originalLoadingLayers = {loadingLayers: []};
var state = mapConfig(null, action);

expect(state.loadingLayers).toEqual({layer1: false});
expect(state.loadingLayers).toEqual([]);

state = mapConfig({}, action);
expect(state.loadingLayers).toEqual({layer1: false});
expect(state.loadingLayers).toEqual([]);

state = mapConfig(state, action);
expect(state.loadingLayers).toEqual({layer1: false});
expect(state.loadingLayers).toEqual([]);

state = mapConfig(originalLoadingLayers, action);
expect(state).toEqual(originalLoadingLayers);
expect(state).toNotBe(originalLoadingLayers);

state = mapConfig({layer1: true}, action);
expect(state.loadingLayers).toEqual({layer1: false});

state = mapConfig({loadingLayers: {layer2: true}}, action);
expect(state.loadingLayers).toEqual({layer2: true, layer1: false});
});

it('a spinner must be show', () => {
const action = {
type: 'SHOW_SPINNER',
spinnerId: "spinner1"
};

var originalmapConfig = {spinnersInfo: {spinner1: true}};
var state = mapConfig(null, action);
expect(state.spinnersInfo).toEqual({spinner1: true});

state = mapConfig({}, action);
expect(state.spinnersInfo).toEqual({spinner1: true});

state = mapConfig(state, action);
expect(state.spinnersInfo).toEqual({spinner1: true});

state = mapConfig(originalmapConfig, action);
expect(state).toEqual(originalmapConfig);
expect(state).toNotBe(originalmapConfig);

state = mapConfig({spinner1: false}, action);
expect(state.spinnersInfo).toEqual({spinner1: true});

state = mapConfig({spinnersInfo: {spinner2: true}}, action);
expect(state.spinnersInfo).toEqual({spinner2: true, spinner1: true});
});

it('a spinner must be hiden', () => {
const action = {
type: 'HIDE_SPINNER',
spinnerId: "spinner1"
};

var originalmapConfig = {spinnersInfo: {spinner1: false}};
var state = mapConfig(null, action);
expect(state.spinnersInfo).toEqual({spinner1: false});

state = mapConfig({}, action);
expect(state.spinnersInfo).toEqual({spinner1: false});

state = mapConfig(state, action);
expect(state.spinnersInfo).toEqual({spinner1: false});

state = mapConfig(originalmapConfig, action);
expect(state).toEqual(originalmapConfig);
expect(state).toNotBe(originalmapConfig);

state = mapConfig({spinner1: true}, action);
expect(state.spinnersInfo).toEqual({spinner1: false});
state = mapConfig({loadingLayers: ["layer1"]}, action);
expect(state.loadingLayers).toEqual([]);

state = mapConfig({spinnersInfo: {spinner2: true}}, action);
expect(state.spinnersInfo).toEqual({spinner2: true, spinner1: false});
state = mapConfig({loadingLayers: ["layer2"]}, action);
expect(state.loadingLayers).toEqual(["layer2"]);
});
});
Loading

0 comments on commit ab72eaf

Please sign in to comment.