Commit 24d15ec9 authored by Elijah Byrd's avatar Elijah Byrd
Browse files

Functionalized the shim. code works but needs lots of cleanup

parent 2998621b
var accessible_gmaps = {};
// TODO: properly isolate these global variables so they don't cause trouble when dropped into other sites
var accessible_gmaps_markers = [];
var infowindowsEnabled;
var accessibilityMap;
var accessibilityInfowindow;
var mapIdentifier;
var initialCenter;
var accessible_gmaps_keys = { // Define values for keycodes
accessible_gmaps.accessible_gmaps_markers = [];
accessible_gmaps.infowindowsEnabled;
accessible_gmaps.accessibilityMap;
accessible_gmaps.accessibilityInfowindow;
accessible_gmaps.mapIdentifier;
accessible_gmaps.initialCenter;
accessible_gmaps.accessible_gmaps_keys = { // Define values for keycodes
backspace: 8,
tab: 9,
enter: 13,
......@@ -29,7 +30,7 @@ var accessible_gmaps_keys = { // Define values for keycodes
};
/**
* Call this function after all markers have been added using accessible_gmaps_addMarker.
* Call this function after all markers have been added using addMarker().
*
* This master function builds the accessible map shim by:
* - adding keyboard-accessible accessible map controls
......@@ -37,45 +38,46 @@ var accessible_gmaps_keys = { // Define values for keycodes
* - (if enabled) creating a keyboard-accessible modal infowindow
* - adding listeners necessary to keep created objects up-to-date
*
* I might change this function so that marker divs are created by accessible_gmaps_addMarker,
* I might change this function so that marker divs are created by addMarker(),
* and just positioned in this function. I'm not sure which use case is more viable.
*/
function accessible_gmaps_onload(map, mapIdentifier_given, options){
accessible_gmaps.onload = function(map, mapIdentifier_given, options){
console.log("Accessibility shim loaded!");
// Collect data for shim global variables
mapIdentifier = mapIdentifier_given;
accessibilityMap = map;
initialCenter = accessibilityMap.getCenter();
accessible_gmaps.mapIdentifier = mapIdentifier_given;
accessible_gmaps.accessibilityMap = map;
accessible_gmaps.initialCenter = accessible_gmaps.accessibilityMap.getCenter();
if(options.infowindows){
infowindowsEnabled = true;
accessible_gmaps.infowindowsEnabled = true;
console.log("Infowindows enabled!");
}
// Add listeners to reposition marker overlays
map.addListener('center_changed', function() {
accessible_gmaps_resetAllMarkers();
accessible_gmaps.resetAllMarkers();
});
map.addListener('zoom_changed', function() {
accessible_gmaps_resetAllMarkers();
accessible_gmaps.resetAllMarkers();
});
// Create controls and other objects necessary for shim
accessible_gmaps_init_controls(map);
if(infowindowsEnabled){
accessibilityInfowindow = new google.maps.InfoWindow();
accessible_gmaps.init_controls(map);
if(accessible_gmaps.infowindowsEnabled){
accessible_gmaps.accessibilityInfowindow = new google.maps.InfoWindow();
}
// Create marker overlays
// We need a timeout - I'm not sure why. But the map bounds aren't caught up with us if we don't wait, and we need the map bounds set before we can position markers.
setTimeout(function(){
for(var i = 0; i < accessible_gmaps_markers.length; i++){
marker = accessible_gmaps_markers[i];
accessible_gmaps_create_marker_div(marker, i);
console.log(accessible_gmaps.accessible_gmaps_markers);
for(var i = 0; i < accessible_gmaps.accessible_gmaps_markers.length; i++){
marker = accessible_gmaps.accessible_gmaps_markers[i];
accessible_gmaps.create_marker_div(marker, i);
}
accessible_gmaps_resetAllMarkers();
accessible_gmaps.resetAllMarkers();
}, 2000);
}
......@@ -84,7 +86,7 @@ function accessible_gmaps_onload(map, mapIdentifier_given, options){
* and binds handlers to them for actual map controlling.
* Most of the logic here is Keith's, but it's been modified pretty heavily.
*/
function accessible_gmaps_init_controls(map){
accessible_gmaps.init_controls = function(map){
// Markup for keyboard-accessible map controls - there might be better ways to create this, but this is what we have.
var markup = '<div id="map-controls">';
......@@ -102,7 +104,7 @@ function accessible_gmaps_init_controls(map){
markup += '</div>';
// Add controls to map
jQuery(mapIdentifier).append(markup);
jQuery(accessible_gmaps.mapIdentifier).append(markup);
// Bind event handlers to controls. These pan values can be adjusted to taste.
jQuery('button#pan-up').bind('click', function(e) {
......@@ -127,7 +129,7 @@ function accessible_gmaps_init_controls(map){
});
jQuery('button#pan-ctr').bind('click', function(e) {
jQuery(this).focus();
map.setCenter(initialCenter);
map.setCenter(this.initialCenter);
return false;
});
jQuery('button#zoom-in').bind('click', function(e) {
......@@ -148,7 +150,7 @@ function accessible_gmaps_init_controls(map){
return true;
});
jQuery('button.map-bn').bind('keydown', function(e) {
if (e.keyCode == accessible_gmaps_keys.space || e.keyCode == accessible_gmaps_keys.enter) {
if (e.keyCode == accessible_gmaps.accessible_gmaps_keys.space || e.keyCode == accessible_gmaps.accessible_gmaps_keys.enter) {
jQuery(this).addClass('active');
}
return true;
......@@ -164,7 +166,7 @@ function accessible_gmaps_init_controls(map){
* This div can receive keyboard focus and allows
* keyboard users to browse the map with the tab key.
*/
function accessible_gmaps_create_marker_div(marker, markerIndex){
accessible_gmaps.create_marker_div = function(marker, markerIndex){
// Position a focusable div over the maker
var markerID = "mkr-" + markerIndex;
var title = marker.getTitle();
......@@ -172,18 +174,18 @@ function accessible_gmaps_create_marker_div(marker, markerIndex){
jQuery('div#' + markerID).data('markerID', markerIndex) // Data attribute is added to the div so its associated marker can be identified.
// Bind events to the marker overlay to manipulate its marker's z index.
jQuery('div#' + markerID).focus(accessible_gmaps_zUp);
jQuery('div#' + markerID).blur(accessible_gmaps_zDown);
jQuery('div#' + markerID).focus(accessible_gmaps.zUp);
jQuery('div#' + markerID).blur(accessible_gmaps.zDown);
// If the accessible infowindows module is enabled, bind handlers to open the modal infowindow.
if(infowindowsEnabled){
if(accessible_gmaps.infowindowsEnabled){
jQuery('div#' + markerID).keyup(function (e) {
if (e.keyCode == accessible_gmaps_keys.enter) {
accessible_gmaps_infowindows_openInfoWindow(markerIndex);
if (e.keyCode == accessible_gmaps.accessible_gmaps_keys.enter) {
accessible_gmaps.infowindows_openInfoWindow(markerIndex);
}
});
jQuery('div#' + markerID).click(function (e) {
accessible_gmaps_infowindows_openInfoWindow(markerIndex);
accessible_gmaps.infowindows_openInfoWindow(markerIndex);
});
}
}
......@@ -196,14 +198,14 @@ function accessible_gmaps_create_marker_div(marker, markerIndex){
* TODO: push all marker shims down in z index, so they aren't visible through the infowindow
* TODO: find a better way to grab our infowindow (right now we rely on a class created by Google)
*/
function accessible_gmaps_infowindows_openInfoWindow(markerIndex){
accessible_gmaps.infowindows_openInfoWindow = function(markerIndex){
// Grab map marker; we need its title and windowContent.
marker = accessible_gmaps_markers[markerIndex];
marker = accessible_gmaps.accessible_gmaps_markers[markerIndex];
header = "<h2 id='markerHeader-"+markerIndex+"'>"+marker.title+"</h2>";
// windowContent should have been added to the marker object by the client if they wanted to use the accessible infowindow module.
accessibilityInfowindow.setContent(header + marker.windowContent);
accessibilityInfowindow.open(accessibilityMap, marker);
accessible_gmaps.accessibilityInfowindow.setContent(header + marker.windowContent);
accessible_gmaps.accessibilityInfowindow.open(accessible_gmaps.accessibilityMap, marker);
// Grab our infowindow, apply necessary attributes and give it focus
// We're assuming here that ours is the only infowindow open on the map - it's the only way I can find right now to grab our window for accessibility modifications.
......@@ -216,27 +218,27 @@ function accessible_gmaps_infowindows_openInfoWindow(markerIndex){
var windowCloseButton = windowWithContent.next().children('img');
windowCloseButton.parent().remove();
windowWithContent.append("<span role='button' tabindex='0' class='accessibilityInfoClose'>Close infowindow</button>");
//accessible_gmaps_zUp()
//accessible_gmaps.zUp()
// Attach event handlers to close button.
jQuery('span.accessibilityInfoClose').keyup(function (e) {
if (e.keyCode == accessible_gmaps_keys.enter) {
if (e.keyCode == accessible_gmaps.accessible_gmaps_keys.enter) {
jQuery('div#mkr-' + markerIndex).focus();
//accessible_gmaps_zDown()
//accessible_gmaps.zDown()
windowWithContent.parent().unbind('keydown');
accessibilityInfowindow.close();
accessible_gmaps.accessibilityInfowindow.close();
}
});
jQuery('span.accessibilityInfoClose').click(function(e) {
jQuery('div#mkr-' + markerIndex).focus();
//accessible_gmaps_zDown()
//accessible_gmaps.zDown()
windowWithContent.parent().unbind('keydown');
accessibilityInfowindow.close();
accessible_gmaps.accessibilityInfowindow.close();
});
// Attach event handler to infowindow to keep focus inside window (modal-ish dialog)
windowWithContent.parent().keydown(function (e) {
accessible_gmaps_infowindows_trapTabKey(windowWithContent.parent(), e, markerIndex);
accessible_gmaps.infowindows_trapTabKey(windowWithContent.parent(), e, markerIndex);
});
}
......@@ -244,16 +246,16 @@ function accessible_gmaps_infowindows_openInfoWindow(markerIndex){
* Helper function that traps keyboard focus inside a modal dialog.
* Modified from example at https://accessibility.oit.ncsu.edu/blog/2013/09/13/the-incredible-accessible-modal-dialog/
*/
function accessible_gmaps_infowindows_trapTabKey(object,evt, markerIndex) {
accessible_gmaps.infowindows_trapTabKey = function(object,evt, markerIndex) {
var focusableElementsString ="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
// if tab or shift-tab pressed
if( evt.which == accessible_gmaps_keys.esc) {
if( evt.which == accessible_gmaps.accessible_gmaps_keys.esc) {
jQuery('div#mkr-' + markerIndex).focus();
//accessible_gmaps_zDown()
//accessible_gmaps.zDown()
object.unbind('keydown');
accessibilityInfowindow.close();
accessible_gmaps.accessibilityInfowindow.close();
}
else if ( evt.which == accessible_gmaps_keys.tab ) {
else if ( evt.which == accessible_gmaps.accessible_gmaps_keys.tab ) {
// get list of all children elements in given object
var o = object.find('*');
......@@ -293,8 +295,8 @@ function accessible_gmaps_infowindows_trapTabKey(object,evt, markerIndex) {
*
* TODO: allow offset to be calculated based on marker size data retrieved from user?
*/
function accessible_gmaps_resetMarker(markerIndex, mapData){
marker = accessible_gmaps_markers[markerIndex];
accessible_gmaps.resetMarker = function(markerIndex, mapData){
marker = accessible_gmaps.accessible_gmaps_markers[markerIndex];
var markerID = "mkr-" + markerIndex;
// If marker isn't visible, hide the div and move on.
......@@ -303,14 +305,14 @@ function accessible_gmaps_resetMarker(markerIndex, mapData){
return;
}
var offset = accessible_gmaps_getMarkerPos(marker, mapData);
var offset = accessible_gmaps.getMarkerPos(marker, mapData);
// These values should be adjusted based on your marker size.
offset.x = offset.x - 10;
offset.y = offset.y - 40;
var mapWidth = jQuery(mapIdentifier).width();
var mapHeight = jQuery(mapIdentifier).height();
var mapWidth = jQuery(accessible_gmaps.mapIdentifier).width();
var mapHeight = jQuery(accessible_gmaps.mapIdentifier).height();
var markerWidth = jQuery('div#' + markerID).width();
var markerHeight = jQuery('div#' + markerID).height();
......@@ -326,13 +328,13 @@ function accessible_gmaps_resetMarker(markerIndex, mapData){
}
/**
* Wrapper function for accessible_gmaps_resetMarker
* Wrapper function for resetMarker
* that resets all markers in the markers array.
*/
function accessible_gmaps_resetAllMarkers(){
var mapData = accessible_gmaps_getMapData();
for(var i = 0; i < accessible_gmaps_markers.length; i++){
accessible_gmaps_resetMarker(i, mapData);
accessible_gmaps.resetAllMarkers = function(){
var mapData = accessible_gmaps.getMapData();
for(var i = 0; i < accessible_gmaps.accessible_gmaps_markers.length; i++){
accessible_gmaps.resetMarker(i, mapData);
}
}
......@@ -342,8 +344,8 @@ function accessible_gmaps_resetAllMarkers(){
* TODO: generalize so this can be called elsewhere
*/
function accessible_gmaps_zUp(){
marker = accessible_gmaps_markers[jQuery(this).data('markerID')];
accessible_gmaps.zUp = function(){
marker = accessible_gmaps.accessible_gmaps_markers[jQuery(this).data('markerID')];
marker.setZIndex(1000);
}
......@@ -353,8 +355,8 @@ function accessible_gmaps_zUp(){
* TODO: generalize so this can be called elsewhere
*/
function accessible_gmaps_zDown(){
marker = accessible_gmaps_markers[jQuery(this).data('markerID')];
accessible_gmaps.zDown = function(){
marker = accessible_gmaps.accessible_gmaps_markers[jQuery(this).data('markerID')];
marker.setZIndex(1);
}
......@@ -362,15 +364,15 @@ function accessible_gmaps_zDown(){
* Function called by client to register a gMaps marker
* with this shim.
*/
function accessible_gmaps_addMarker(marker){
accessible_gmaps_markers.push(marker);
accessible_gmaps.addMarker = function(marker){
accessible_gmaps.accessible_gmaps_markers.push(marker);
}
/**
* Helper function to calculate the position of a marker overlay.
* Written by Keith and modified for performance.
*/
function accessible_gmaps_getMarkerPos(marker, mapData) {
accessible_gmaps.getMarkerPos = function(marker, mapData) {
var gmap = marker.map;
var worldCoordinate = mapData.projection.fromLatLngToPoint(marker.getPosition());
......@@ -385,17 +387,17 @@ function accessible_gmaps_getMarkerPos(marker, mapData) {
/**
* Helper function to pull projection information from map.
* This info is needed in accessible_gmaps_getMarkerPos(),
* This info is needed in getMarkerPos(),
* but can be calculated once for every batch of marker resets.
*/
function accessible_gmaps_getMapData(){
accessible_gmaps.getMapData = function(){
mapData = {};
mapData.scale = Math.pow(2, accessibilityMap.getZoom());
mapData.scale = Math.pow(2, accessible_gmaps.accessibilityMap.getZoom());
mapData.nw = new google.maps.LatLng(
accessibilityMap.getBounds().getNorthEast().lat(),
accessibilityMap.getBounds().getSouthWest().lng()
accessible_gmaps.accessibilityMap.getBounds().getNorthEast().lat(),
accessible_gmaps.accessibilityMap.getBounds().getSouthWest().lng()
);
mapData.projection = accessibilityMap.getProjection();
mapData.projection = accessible_gmaps.accessibilityMap.getProjection();
mapData.worldCoordinateNW = mapData.projection.fromLatLngToPoint(mapData.nw);
return mapData;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment