Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample Custom Editor
<html>
<head>
<script src="../../../src/butter.js" ></script>
<script src="../../../src/modules/butter.comm.js" ></script>
<script src="../../../../popcorn-js/popcorn.js" ></script>
<script>
var googleCallback;
var i = 1,
_mapFired = false,
_mapLoaded = false,
geocoder, loadMaps;
//google api callback
googleCallback = function (data) {
// ensure all of the maps functions needed are loaded
// before setting _maploaded to true
if (typeof google !== "undefined" && google.maps && google.maps.Geocoder && google.maps.LatLng) {
geocoder = new google.maps.Geocoder();
_mapLoaded = true;
} else {
setTimeout(function () {
googleCallback(data);
}, 1);
}
};
// function that loads the google api
loadMaps = function () {
// for some reason the Google Map API adds content to the body
if (document.body) {
_mapFired = true;
Popcorn.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=googleCallback");
} else {
setTimeout(function () {
loadMaps();
}, 1);
}
};
document.addEventListener( "DOMContentLoaded", function (e) {
butter = new Butter();
client = new Butter.CommClient( "customEditorDemo" );
client.listen( "edittrackevent", function( message ) {
console.log(message);
construct ( message.trackEvent );
});
}, false);
var construct = function( trackEvent ) {
var newdiv, map, location,
target = document.getElementById( "custom-editor-target" );
// if this is the firest time running the plugins
// call the function that gets the sctipt
if (!_mapFired) {
loadMaps();
}
// create a new div this way anything in the target div is left intact
// this is later passed on to the maps api
newdiv = document.createElement("div");
newdiv.id = "actualmap" + i;
newdiv.style.width = "100%";
newdiv.style.height = "85%";
i++;
target.appendChild( newdiv )
// ensure that google maps and its functions are loaded
// before setting up the map parameters
var isMapReady = function () {
if (_mapLoaded) {
if (trackEvent.popcornOptions.location) {
// calls an anonymous google function called on separate thread
geocoder.geocode({
"address": trackEvent.popcornOptions.location
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
trackEvent.popcornOptions.lat = results[0].geometry.location.lat();
trackEvent.popcornOptions.lng = results[0].geometry.location.lng();
location = new google.maps.LatLng(trackEvent.popcornOptions.lat, trackEvent.popcornOptions.lng);
map = new google.maps.Map(newdiv, {
mapTypeId: google.maps.MapTypeId[trackEvent.popcornOptions.type] || google.maps.MapTypeId.HYBRID
});
map.getDiv().style.display = "block";
}
});
} else {
location = new google.maps.LatLng(trackEvent.popcornOptions.lat, trackEvent.popcornOptions.lng);
map = new google.maps.Map(newdiv, {
mapTypeId: google.maps.MapTypeId[trackEvent.popcornOptions.type] || google.maps.MapTypeId.HYBRID
});
map.getDiv().style.display = "block";
}
var show = function() {
if ( map ) {
map.getDiv().style.display = "block";
// reset the location and zoom just in case the user plaid with the map
google.maps.event.trigger(map, 'resize');
map.setCenter( location );
// make sure options.zoom is a number
if ( trackEvent.popcornOptions.zoom && typeof trackEvent.popcornOptions.zoom !== "number" ) {
trackEvent.popcornOptions.zoom = +trackEvent.popcornOptions.zoom;
}
trackEvent.popcornOptions.zoom = trackEvent.popcornOptions.zoom || 8; // default to 8
map.setZoom( trackEvent.popcornOptions.zoom );
var parent = map.getDiv().parentNode,
submit = document.createElement("input");
submit.value = "Submit Data to Event Editor Module";
submit.type = "button";
submit.addEventListener( "click", function() {
var latlng = map.getCenter(),
popcornOptions = {
zoom: map.getZoom(),
lat: latlng.lat(),
lng: latlng.lng(),
type: map.getMapTypeId().toUpperCase(),
start: trackEvent.popcornOptions.start,
end: trackEvent.popcornOptions.end
};
client.send( popcornOptions, "okayclicked" );
}, false );
parent.appendChild( submit);
} else {
setTimeout(function() {
show();
}, 5);
}
};
show();
} else {
setTimeout(function () {
isMapReady();
}, 5);
}
};
isMapReady();
}
</script>
</head>
<body>
<div id="custom-editor-target" style="width: 300px; height: 300px"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment