Skip to content

Commit 9991c8b

Browse files
donkerdonker
committed
Reorganization of React code and fixes
1 parent 1da1c68 commit 9991c8b

File tree

3 files changed

+119
-116
lines changed

3 files changed

+119
-116
lines changed

‎js/src/ConnectMap.js

Lines changed: 94 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,93 @@ var ConnectMapComponent = React.createClass({
99
_map: {},
1010
_mapListener: {},
1111

12+
getInitialState: function() {
13+
this.security = ConnectMap.modules[this.props.moduleId].security;
14+
this.service = ConnectMap.modules[this.props.moduleId].service;
15+
this.resources = ConnectMap.modules[this.props.moduleId].resources;
16+
return {
17+
moduleId: this.props.moduleId,
18+
settings: ConnectMap.modules[this.props.moduleId].settings,
19+
mapPoints: ConnectMap.modules[this.props.moduleId].mapPoints,
20+
isAdding: false
21+
}
22+
},
23+
24+
render: function() {
25+
var editSettingsLink = (<span />);
26+
var setMapLink = (<span />);
27+
var addPointLink = (<span />);
28+
if (this.security.CanEdit) {
29+
editSettingsLink = (
30+
<a href="#" className="conLink connectMapSettings" title={this.resources.ShowSettings}>
31+
<Icon type="map" />
32+
</a>
33+
);
34+
setMapLink = (
35+
<a href="#" className="conLink" onClick={this.setMap} title={this.resources.SetMap}>
36+
<Icon type="crosshairs" />
37+
</a>
38+
);
39+
}
40+
if (this.security.IsPointer) {
41+
addPointLink = (
42+
<a href="#" className="conLink" onClick={this.addPoint} title={this.resources.AddPoint}>
43+
<Icon type="map-marker" />
44+
</a>
45+
);
46+
}
47+
48+
return (
49+
<div>
50+
<div ref="mapDiv" />
51+
<div className="conMgtPanel">
52+
{editSettingsLink}
53+
{setMapLink}
54+
{addPointLink}
55+
</div>
56+
</div>
57+
);
58+
},
59+
60+
shouldComponentUpdate: function(nextProps, nextState) {
61+
return nextState.settings !== this.state.settings;
62+
},
63+
64+
componentDidMount: function() {
65+
this.setMapSize();
66+
this._map = new google.maps.Map(this.refs.mapDiv.getDOMNode(), {
67+
center: new google.maps.LatLng(this.state.settings.MapOriginLat, this.state.settings.MapOriginLong),
68+
zoom: this.state.settings.Zoom,
69+
mapTypeId: google.maps.MapTypeId.ROADMAP
70+
});
71+
$.each(this.state.mapPoints, function(index, item) {
72+
this.addPointToMap(item);
73+
}.bind(this));
74+
$('.connectMapSettings').off("click");
75+
$('.connectMapSettings').click(function() {
76+
React.render(
77+
<ConnectMapSettings Settings={this.state.settings} onUpdate={this.onSettingsUpdate} resources={this.resources} />, $('#connectMapPanel')[0]);
78+
window.ConnectMap.slidePanel($('#connectMapPanel'));
79+
return false;
80+
}.bind(this));
81+
},
82+
1283
onSettingsUpdate: function(newSettings) {
13-
var that = this;
14-
this.state.service.updateSettings(newSettings, function(data) {
15-
that.setState({
84+
this.service.updateSettings(newSettings, function(data) {
85+
this.setState({
1686
settings: data
1787
});
18-
that.setMapSize();
19-
});
88+
this.setMapSize();
89+
}.bind(this));
2090
},
2191

2292
setMap: function() {
23-
if (confirm(this.state.resources.SetMapConfirm)) {
93+
if (confirm(this.resources.SetMapConfirm)) {
2494
var newSettings = this.state.settings;
2595
newSettings.MapOriginLat = this._map.getCenter().lat();
2696
newSettings.MapOriginLong = this._map.getCenter().lng();
2797
newSettings.Zoom = this._map.getZoom();
28-
this.state.service.updateSettings(newSettings);
98+
this.service.updateSettings(newSettings);
2999
}
30100
return false;
31101
},
@@ -36,18 +106,6 @@ var ConnectMapComponent = React.createClass({
36106
mapDiv.height(this.state.settings.MapHeight);
37107
},
38108

39-
getInitialState: function() {
40-
return {
41-
moduleId: this.props.moduleId,
42-
service: ConnectMap.modules[this.props.moduleId].service,
43-
security: ConnectMap.modules[this.props.moduleId].security,
44-
settings: ConnectMap.modules[this.props.moduleId].settings,
45-
mapPoints: ConnectMap.modules[this.props.moduleId].mapPoints,
46-
resources: ConnectMap.modules[this.props.moduleId].resources,
47-
isAdding: false
48-
}
49-
},
50-
51109
addPoint: function() {
52110
if (this.state.isAdding) {
53111
return this.stopAddingPoint();
@@ -58,7 +116,6 @@ var ConnectMapComponent = React.createClass({
58116
this.setState({
59117
isAdding: true
60118
});
61-
var that = this;
62119
this._mapListener = google.maps.event.addListener(this._map, 'click', function(e) {
63120
var newPoint = {
64121
Latitude: e.latLng.lat(),
@@ -67,10 +124,10 @@ var ConnectMapComponent = React.createClass({
67124
MapPointId: -1
68125
};
69126
React.render(
70-
<EditMapPoint MapPoint={newPoint} onUpdate={that.onAddPoint} resources={that.state.resources} />, $('#connectMapPanel')[0]);
127+
<EditMapPoint MapPoint={newPoint} onUpdate={this.onAddPoint} resources={this.resources} />, $('#connectMapPanel')[0]);
71128
window.ConnectMap.slidePanel($('#connectMapPanel'));
72-
that.stopAddingPoint();
73-
});
129+
this.stopAddingPoint();
130+
}.bind(this));
74131
return false;
75132
},
76133

@@ -81,43 +138,41 @@ var ConnectMapComponent = React.createClass({
81138
this.setState({
82139
isAdding: false
83140
});
84-
var that = this;
85141
google.maps.event.removeListener(this._mapListener);
86142
return false;
87143
},
88144

89145
onAddPoint: function(newMapPoint, marker) {
90-
var that = this;
91-
this.state.service.submitPoint(newMapPoint, function(data) {
146+
this.service.submitPoint(newMapPoint, function(data) {
92147
if (marker === undefined) {
93-
that.addPointToMap(data);
94-
var newPoints = that.state.mapPoints;
148+
this.addPointToMap(data);
149+
var newPoints = this.state.mapPoints;
95150
newPoints.push(data);
96-
that.setState({
151+
this.setState({
97152
mapPoints: newPoints
98153
});
99154
} else {
100-
var newPoints = that.state.mapPoints;
155+
var newPoints = this.state.mapPoints;
101156
for (var i = 0; i < newPoints.length; i++) {
102157
if (newPoints[i].MapPointId === newMapPoint.MapPointId) {
103158
newPoints[i] = newMapPoint;
104159
}
105160
}
106-
that.setState({
161+
this.setState({
107162
mapPoints: newPoints
108163
});
109164
}
110-
});
165+
}.bind(this));
111166
},
112167

113168
onDeletePoint: function(mapPoint, marker) {
114-
this.state.service.deletePoint(mapPoint.MapPointId, function(data) {
169+
this.service.deletePoint(mapPoint.MapPointId, function(data) {
115170
marker.setMap(null);
116171
});
117172
},
118173

119174
addPointToMap: function(point) {
120-
var canEdit = ((this.state.security.IsPointer && (point.CreatedByUserID == this.state.security.UserId || this.state.settings.AllowOtherEdit)) || this.state.security.CanEdit);
175+
var canEdit = ((this.security.IsPointer && (point.CreatedByUserID == this.security.UserId || this.state.settings.AllowOtherEdit)) || this.security.CanEdit);
121176
var marker = new google.maps.Marker({
122177
position: new google.maps.LatLng(point.Latitude, point.Longitude),
123178
map: this._map,
@@ -126,82 +181,20 @@ var ConnectMapComponent = React.createClass({
126181
});
127182
var msg = $('<div id="point' + point.MapPointId + '" class="conPointMessage"></div>').appendTo('body');
128183
React.render(
129-
<MapPointMessage MapPoint={point} CanEdit={canEdit} OnEdit={this.onAddPoint} OnDelete={this.onDeletePoint} Marker={marker} resources={this.state.resources} />,
184+
<MapPointMessage MapPoint={point} CanEdit={canEdit} OnEdit={this.onAddPoint} OnDelete={this.onDeletePoint} Marker={marker} resources={this.resources} />,
130185
msg[0]);
131186
var infowindow = new google.maps.InfoWindow();
132187
infowindow.setContent(msg[0]);
133188
msg.remove();
134-
var that = this;
135189
google.maps.event.addListener(marker, 'click', function(e) {
136-
infowindow.open(that._map, marker);
137-
});
190+
infowindow.open(this._map, marker);
191+
}.bind(this));
138192
google.maps.event.addListener(marker, 'dragend', function(e) {
139193
var changedPoint = marker.mapPoint;
140194
changedPoint.Latitude = e.latLng.lat();
141195
changedPoint.Longitude = e.latLng.lng();
142-
that.onAddPoint(changedPoint, marker);
143-
});
144-
},
145-
146-
shouldComponentUpdate: function(nextProps, nextState) {
147-
return nextState.settings !== this.state.settings;
148-
},
149-
150-
componentDidMount: function() {
151-
this.setMapSize();
152-
this._map = new google.maps.Map(this.refs.mapDiv.getDOMNode(), {
153-
center: new google.maps.LatLng(this.state.settings.MapOriginLat, this.state.settings.MapOriginLong),
154-
zoom: this.state.settings.Zoom,
155-
mapTypeId: google.maps.MapTypeId.ROADMAP
156-
});
157-
var that = this;
158-
$.each(this.state.mapPoints, function(index, item) {
159-
that.addPointToMap(item);
160-
});
161-
$('.connectMapSettings').off("click");
162-
$('.connectMapSettings').click(function() {
163-
React.render(
164-
<ConnectMapSettings Settings={that.state.settings} onUpdate={that.onSettingsUpdate} resources={that.state.resources} />, $('#connectMapPanel')[0]);
165-
window.ConnectMap.slidePanel($('#connectMapPanel'));
166-
return false;
167-
});
168-
},
169-
170-
render: function() {
171-
172-
var editSettingsLink = (<span />);
173-
var setMapLink = (<span />);
174-
var addPointLink = (<span />);
175-
if (this.state.security.CanEdit) {
176-
editSettingsLink = (
177-
<a href="#" className="conLink connectMapSettings" title={this.state.resources.ShowSettings}>
178-
<Icon type="map" />
179-
</a>
180-
);
181-
setMapLink = (
182-
<a href="#" className="conLink" onClick={this.setMap} title={this.state.resources.SetMap}>
183-
<Icon type="crosshairs" />
184-
</a>
185-
);
186-
}
187-
if (this.state.security.CanEdit) {
188-
addPointLink = (
189-
<a href="#" className="conLink" onClick={this.addPoint} title={this.state.resources.AddPoint}>
190-
<Icon type="map-marker" />
191-
</a>
192-
);
193-
}
194-
195-
return (
196-
<div>
197-
<div ref="mapDiv" />
198-
<div className="conMgtPanel">
199-
{editSettingsLink}
200-
{setMapLink}
201-
{addPointLink}
202-
</div>
203-
</div>
204-
);
196+
this.onAddPoint(changedPoint, marker);
197+
}.bind(this));
205198
}
206199

207200
});

‎js/src/ConnectMapSettings.js

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,9 @@ var TextBox = require('./forms/textbox'),
44

55
var ConnectMapSettings = React.createClass({
66

7-
handleUpdate: function() {
8-
var newSettings = this.props.Settings;
9-
newSettings.MapWidth = this.refs.txtMapWidth.getValue() || newSettings.MapWidth;
10-
newSettings.MapHeight = this.refs.txtMapHeight.getValue() || newSettings.MapHeight;
11-
newSettings.AllowOtherEdit = this.refs.chkAllowOtherEdit.getValue() || newSettings.AllowOtherEdit;
12-
newSettings.GoogleMapApiKey = this.refs.txtGoogleKey.getValue();
13-
this.props.onUpdate(newSettings);
14-
window.ConnectMap.slidePanel($('#connectMapPanel'));
15-
},
16-
17-
componentDidMount: function() {
18-
this.refs.txtMapWidth.getDOMNode().value = this.props.Settings.MapWidth;
19-
this.refs.txtMapHeight.getDOMNode().value = this.props.Settings.MapHeight;
20-
this.refs.chkAllowOtherEdit.getDOMNode().value = this.props.Settings.AllowOtherEdit;
21-
this.refs.txtGoogleKey.getDOMNode().value = this.props.Settings.GoogleMapApiKey;
7+
getInitialState: function() {
8+
return {
9+
}
2210
},
2311

2412
render: function() {
@@ -51,6 +39,23 @@ var ConnectMapSettings = React.createClass({
5139
<button className="dnnPrimaryAction" onClick={this.handleUpdate}>{this.props.resources.Update}</button>
5240
</div>
5341
);
42+
},
43+
44+
componentDidMount: function() {
45+
this.refs.txtMapWidth.getDOMNode().value = this.props.Settings.MapWidth;
46+
this.refs.txtMapHeight.getDOMNode().value = this.props.Settings.MapHeight;
47+
this.refs.chkAllowOtherEdit.getDOMNode().value = this.props.Settings.AllowOtherEdit;
48+
this.refs.txtGoogleKey.getDOMNode().value = this.props.Settings.GoogleMapApiKey;
49+
},
50+
51+
handleUpdate: function() {
52+
var newSettings = this.props.Settings;
53+
newSettings.MapWidth = this.refs.txtMapWidth.getValue() || newSettings.MapWidth;
54+
newSettings.MapHeight = this.refs.txtMapHeight.getValue() || newSettings.MapHeight;
55+
newSettings.AllowOtherEdit = this.refs.chkAllowOtherEdit.getValue() || newSettings.AllowOtherEdit;
56+
newSettings.GoogleMapApiKey = this.refs.txtGoogleKey.getValue();
57+
this.props.onUpdate(newSettings);
58+
window.ConnectMap.slidePanel($('#connectMapPanel'));
5459
}
5560

5661
});

‎js/src/EditMapPoint.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ var TextBlock = require('./forms/textblock');
33

44
var EditMapPoint = React.createClass({
55

6+
getInitialState: function() {
7+
return {
8+
}
9+
},
10+
611
handleUpdate: function() {
712
var newMapPoint = this.props.MapPoint;
813
newMapPoint.Message = this.refs.txtMessage.getValue();

0 commit comments

Comments
 (0)