Skip to content

Commit 4009973

Browse files
wabsonwabson
committed
Proper async loading of Google Maps script dependencies, scripts are not realoaded if already present on the page. Fixes errors related to multiple instances being included on the page.
git-svn-id: https://share-extras.googlecode.com/svn/trunk/Document Geographic Details@1198 a3f5c567-fd0f-3a89-9b71-a290c5a5f590
1 parent 5561a70 commit 4009973

File tree

2 files changed

+182
-134
lines changed

2 files changed

+182
-134
lines changed

‎web/extras/components/document-details/document-geographic-info.js‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,6 @@ if (typeof Extras == "undefined" || !Extras)
4141
{
4242
Extras.DocumentGeographicInfo.superclass.constructor.call(this, "Extras.DocumentGeographicInfo", htmlId);
4343

44-
/* Decoupled event listeners */
45-
YAHOO.Bubbling.on("metadataRefresh", this.doRefresh, this);
46-
4744
return this;
4845
};
4946

@@ -125,14 +122,19 @@ if (typeof Extras == "undefined" || !Extras)
125122
typeof(docData.item.node.properties["cm:latitude"]) !== "undefined")
126123
{
127124
Dom.removeClass(this.id + "-body", "hidden");
128-
129-
if (this.map == null)
125+
126+
// Load maps API if not already loaded
127+
if (typeof google == "object" && typeof google.maps == "object")
130128
{
131-
this.initializeMap(docData);
129+
this.initializeMap(this.options.documentDetails);
132130
}
133131
else
134132
{
135-
this.updateMap(docData);
133+
// Async load the Google Maps API. Need to do this, as it breaks the YUI Loader otherwise
134+
var script = document.createElement("script");
135+
script.type = "text/javascript";
136+
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=Extras.DocumentGeographicInfo.Callback";
137+
document.body.appendChild(script);
136138
}
137139
}
138140
else
@@ -154,7 +156,8 @@ if (typeof Extras == "undefined" || !Extras)
154156
{
155157
zoom: 10,
156158
center: latLng,
157-
mapTypeId: google.maps.MapTypeId.ROADMAP
159+
mapTypeId: google.maps.MapTypeId.ROADMAP,
160+
useStaticMap: false
158161
}
159162
this.map = new google.maps.Map(this.mapContainer, myOptions);
160163
this.marker = new google.maps.Marker(
@@ -166,6 +169,9 @@ if (typeof Extras == "undefined" || !Extras)
166169
google.maps.event.addListener(this.marker, 'click', function() {
167170
document.location.href = document.location.href.replace("/document-details", "/geographic-map");
168171
});
172+
173+
/* Decoupled event listener */
174+
YAHOO.Bubbling.on("metadataRefresh", this.doRefresh, this);
169175
},
170176

171177
/**
@@ -177,7 +183,26 @@ if (typeof Extras == "undefined" || !Extras)
177183
{
178184
YAHOO.Bubbling.unsubscribe("metadataRefresh", this.doRefresh);
179185
this.refresh('extras/components/document-details/document-geographic-info?nodeRef={nodeRef}' + (this.options.siteId ? '&site={siteId}' : ''));
186+
},
187+
188+
/**
189+
* Event handler called when the Google Maps API has loaded
190+
*
191+
* @method onGoogleAPIReady
192+
*/
193+
onGoogleAPIReady: function DocumentGeographicInfo_onGoogleAPIReady()
194+
{
195+
this.initializeMap(this.options.documentDetails);
180196
}
181197

182198
});
183-
})();
199+
})();
200+
201+
Extras.DocumentGeographicInfo.Callback = function()
202+
{
203+
var component = Alfresco.util.ComponentManager.findFirst("Extras.DocumentGeographicInfo");
204+
if (component)
205+
{
206+
component.onGoogleAPIReady();
207+
}
208+
}

‎web/extras/components/documentlibrary/geotag-action.js‎

Lines changed: 148 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
function gmaps_init() {
2-
// Do nothing
1+
/**
2+
* Extras root namespace.
3+
*
4+
* @namespace Extras
5+
*/
6+
if (typeof Extras == "undefined" || !Extras)
7+
{
8+
var Extras = {};
39
}
410

511
/**
@@ -21,14 +27,6 @@ function gmaps_init() {
2127
*/
2228
var $html = Alfresco.util.encodeHTML,
2329
$combine = Alfresco.util.combinePaths;
24-
25-
// Async handler to bring in Google Maps scripts
26-
Event.onDOMReady(function geotag_gmapsInit() {
27-
var script = document.createElement("script");
28-
script.type = "text/javascript";
29-
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=gmaps_init";
30-
document.body.appendChild(script);
31-
});
3230

3331
/**
3432
* Geotag a document.
@@ -39,120 +37,145 @@ function gmaps_init() {
3937
YAHOO.Bubbling.fire("registerAction",
4038
{
4139
actionName: "onActionGeotag",
42-
fn: function DL_onActionGeotag(asset)
43-
{
44-
var nodeRef = asset.nodeRef,
45-
lat = "", lon = "",
46-
displayName = asset.displayName,
47-
actionUrl = Alfresco.constants.PROXY_URI + $combine("slingshot/doclib/action/geotag/node", nodeRef.replace(":/", ""));
48-
49-
if (typeof(asset.node) === "object" &&
50-
typeof(asset.node.properties) === "object" &&
51-
typeof(asset.node.properties["cm:latitude"]) !== "undefined" &&
52-
typeof(asset.node.properties["cm:longitude"]) !== "undefined")
53-
{
54-
lat = asset.node.properties["cm:latitude"];
55-
lon = asset.node.properties["cm:longitude"];
56-
}
57-
58-
// Validation
59-
var fnValidate = function fnValidate(field, args, event, form, silent, message)
60-
{
61-
return field.value !== "";
62-
};
63-
64-
// Always create a new instance
65-
this.modules.geotag = new Alfresco.module.SimpleDialog(this.id + "-geotag").setOptions(
66-
{
67-
width: "50em",
68-
templateUrl: Alfresco.constants.URL_SERVICECONTEXT + "extras/modules/documentlibrary/geotag",
69-
actionUrl: actionUrl,
70-
onSuccess:
71-
{
72-
fn: function dlA_onActionChangeType_success(response)
73-
{
74-
YAHOO.Bubbling.fire("metadataRefresh",
75-
{
76-
highlightFile: displayName
77-
});
78-
Alfresco.util.PopupManager.displayMessage(
79-
{
80-
text: this.msg("message.geotag.success", displayName)
81-
});
82-
},
83-
scope: this
84-
},
85-
onFailure:
86-
{
87-
fn: function dlA_onActionChangeType_failure(response)
88-
{
89-
Alfresco.util.PopupManager.displayMessage(
90-
{
91-
text: this.msg("message.geotag.failure", displayName)
92-
});
93-
},
94-
scope: this
95-
},
96-
doSetupFormsValidation:
97-
{
98-
fn: function dlA_onActionChangeType_doSetupFormsValidation(p_form)
99-
{
100-
// Add validation
101-
p_form.addValidation(this.id + "-geotag-lat", fnValidate, null, "change");
102-
p_form.addValidation(this.id + "-geotag-lon", fnValidate, null, "change");
103-
p_form.setShowSubmitStateDynamically(true, false);
104-
105-
var me = this, marker = null;
106-
// Set up the GMap
107-
var latLng = new google.maps.LatLng(lat !== "" ? lat : 0.0, lon !== "" ? lon : 0.0);
108-
var myOptions =
109-
{
110-
zoom: 1,
111-
center: latLng,
112-
mapTypeId: google.maps.MapTypeId.ROADMAP,
113-
draggableCursor: "crosshair"
114-
}
115-
var map = new google.maps.Map(Dom.get(this.modules.geotag.id + "-map"), myOptions);
116-
if (lat !== "" && lon !== "")
117-
{
118-
marker = new google.maps.Marker(
119-
{
120-
position: latLng,
121-
map: map,
122-
title: displayName
123-
});
124-
map.setZoom(10);
125-
}
126-
// Add click listener to the map to update coordinates
127-
google.maps.event.addListener(map, "click", function(e) {
128-
// Update the coordiates stored in the form
129-
Dom.get(me.modules.geotag.id + "-lat").value = e.latLng.lat();
130-
Dom.get(me.modules.geotag.id + "-lon").value = e.latLng.lng();
131-
132-
// Trigger re-validation of the form
133-
p_form.updateSubmitElements();
134-
135-
// Remove the old marker if present
136-
if (marker !== null)
137-
{
138-
marker.setMap(null)
139-
marker = null;
140-
}
141-
142-
// Centre the map on the new coordinates and add a new marker
143-
map.panTo(e.latLng);
144-
marker = new google.maps.Marker(
145-
{
146-
position: e.latLng,
147-
map: map,
148-
title: displayName
149-
});
150-
});
151-
},
152-
scope: this
153-
}
154-
});
155-
this.modules.geotag.show();
156-
}
40+
fn: function DL_onActionGeotag(asset) {
41+
42+
var me = this;
43+
Extras.GeotagActionCallback = function DL_GeotagActionCallback()
44+
{
45+
var nodeRef = asset.nodeRef,
46+
lat = "", lon = "",
47+
displayName = asset.displayName,
48+
actionUrl = Alfresco.constants.PROXY_URI + $combine("slingshot/doclib/action/geotag/node", nodeRef.replace(":/", ""));
49+
50+
if (typeof asset.node == "object" &&
51+
typeof asset.node.properties == "object" &&
52+
typeof asset.node.properties["cm:latitude"] != "undefined" &&
53+
typeof asset.node.properties["cm:longitude"] != "undefined")
54+
{
55+
lat = asset.node.properties["cm:latitude"];
56+
lon = asset.node.properties["cm:longitude"];
57+
}
58+
59+
// Validation
60+
var fnValidate = function fnValidate(field, args, event, form, silent, message)
61+
{
62+
return field.value !== "";
63+
};
64+
65+
// Always create a new instance
66+
me.modules.geotag = new Alfresco.module.SimpleDialog(me.id + "-geotag").setOptions(
67+
{
68+
width: "50em",
69+
templateUrl: Alfresco.constants.URL_SERVICECONTEXT + "extras/modules/documentlibrary/geotag",
70+
actionUrl: actionUrl,
71+
onSuccess:
72+
{
73+
fn: function dlA_onActionChangeType_success(response)
74+
{
75+
YAHOO.Bubbling.fire("metadataRefresh",
76+
{
77+
highlightFile: displayName
78+
});
79+
Alfresco.util.PopupManager.displayMessage(
80+
{
81+
text: me.msg("message.geotag.success", displayName)
82+
});
83+
},
84+
scope: me
85+
},
86+
onFailure:
87+
{
88+
fn: function dlA_onActionChangeType_failure(response)
89+
{
90+
Alfresco.util.PopupManager.displayMessage(
91+
{
92+
text: me.msg("message.geotag.failure", displayName)
93+
});
94+
},
95+
scope: me
96+
},
97+
doSetupFormsValidation:
98+
{
99+
fn: function dlA_onActionChangeType_doSetupFormsValidation(p_form)
100+
{
101+
// Add validation
102+
p_form.addValidation(me.id + "-geotag-lat", fnValidate, null, "change");
103+
p_form.addValidation(me.id + "-geotag-lon", fnValidate, null, "change");
104+
p_form.setShowSubmitStateDynamically(true, false);
105+
106+
var marker = null;
107+
// Set up the GMap
108+
var latLng = new google.maps.LatLng(lat !== "" ? lat : 0.0, lon !== "" ? lon : 0.0);
109+
var myOptions =
110+
{
111+
zoom: 1,
112+
center: latLng,
113+
mapTypeId: google.maps.MapTypeId.ROADMAP,
114+
draggableCursor: "crosshair"
115+
}
116+
var map = new google.maps.Map(Dom.get(me.modules.geotag.id + "-map"), myOptions);
117+
if (lat !== "" && lon !== "")
118+
{
119+
marker = new google.maps.Marker(
120+
{
121+
position: latLng,
122+
map: map,
123+
title: displayName
124+
});
125+
map.setZoom(10);
126+
}
127+
// Add click listener to the map to update coordinates
128+
google.maps.event.addListener(map, "click", function(e) {
129+
// Update the coordiates stored in the form
130+
Dom.get(me.modules.geotag.id + "-lat").value = e.latLng.lat();
131+
Dom.get(me.modules.geotag.id + "-lon").value = e.latLng.lng();
132+
133+
// Update the local copy of the node data
134+
asset.node.properties["cm:latitude"] = e.latLng.lat();
135+
asset.node.properties["cm:longitude"] = e.latLng.lng();
136+
137+
// Trigger re-validation of the form
138+
p_form.updateSubmitElements();
139+
140+
// Remove the old marker if present
141+
if (marker !== null)
142+
{
143+
marker.setMap(null)
144+
marker = null;
145+
}
146+
147+
// Centre the map on the new coordinates and add a new marker
148+
map.panTo(e.latLng);
149+
marker = new google.maps.Marker(
150+
{
151+
position: e.latLng,
152+
map: map,
153+
title: displayName
154+
});
155+
});
156+
},
157+
scope: me
158+
}
159+
});
160+
me.modules.geotag.show();
161+
};
162+
163+
// Load maps API if not already loaded
164+
if (typeof google == "object" && typeof google.maps == "object")
165+
{
166+
Extras.GeotagActionCallback.call(this);
167+
}
168+
else
169+
{
170+
// Async load the Google Maps API. Need to do this, as it breaks the YUI Loader otherwise
171+
var script = document.createElement("script");
172+
script.type = "text/javascript";
173+
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=Extras.GeotagActionCallback";
174+
document.body.appendChild(script);
175+
}
176+
177+
}
157178
});
179+
180+
158181
})();

0 commit comments

Comments
 (0)