Skip to content
GitLab
Commit 24d15ec9 authored by Elijah Byrd's avatar Elijah Byrd
Browse files

Functionalized the shim. code works but needs lots of cleanup

parent 2998621b
Hide whitespace changes
Inline Side-by-side
accessible_gmaps.js
View file @ 24d15ec9
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