Skip to content
Snippets Groups Projects
Commit e6e6a4e0 authored by Elijah Byrd's avatar Elijah Byrd
Browse files

Initial commit of mostly-working code

parents
No related branches found
No related tags found
No related merge requests found
Pipeline #
Hide whitespace changes
Inline Side-by-side
Showing
with 390 additions and 0 deletions
accessible_gmaps.css 0 → 100644
+ 143
− 0
View file @ e6e6a4e0
/* KEITH STUFF - need to refactor */
#map-canvas {
width: 450px;
height: 350px;
position: relative;
}
#map-static {
width: 450px;
height: 350px;
}
#map-controls {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
div.map-marker {
position: absolute;
width: 27px;
height: 45px;
cursor:pointer;
z-index: 100;
}
div.map-marker span {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
/* Clipping hides the single-pixel object from view */
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
div.map-marker:hover,
div.map-marker:focus {
margin: -2px 0 0 -2px;
border: 2px solid #0f0;
}
div#pan-base {
width:94px;
height:94px;
margin: 10px;
}
div#zoom-base {
width:36px;
height:94px;
bottom: 10px;
right: 10px;
position: absolute;
}
.accessible_button_wrapper {
padding: 0;
width: 29px;
height: 29px;
position: absolute;
background-color: white;
border-radius: 2px;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
pointer-events: all;
}
.map-bn {
cursor:pointer;
text-indent:-100em;
border: none;
width: 100%;
height: 100%;
background-color: #4E4E4E;
}
.accessible_button_wrapper.pan-up {
top: 10px;
left: 44px;
}
button#pan-up {
mask: url('icons/ic_keyboard_arrow_up_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_keyboard_arrow_up_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
.accessible_button_wrapper.pan-lt {
top: 44px;
left: 10px;
}
button#pan-lt {
mask: url('icons/ic_keyboard_arrow_left_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_keyboard_arrow_left_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
.accessible_button_wrapper.pan-ctr {
top: 44px;
left: 44px;
}
button#pan-ctr {
mask: url('icons/ic_all_out_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_all_out_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
.accessible_button_wrapper.pan-rt {
top: 44px;
left: 79px;
}
button#pan-rt {
mask: url('icons/ic_keyboard_arrow_right_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_keyboard_arrow_right_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
.accessible_button_wrapper.pan-dn {
top: 79px;
left: 44px;
}
button#pan-dn {
mask: url('icons/ic_keyboard_arrow_down_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_keyboard_arrow_down_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
.accessible_button_wrapper.zoom-in {
top: 6px;
left: 6px;
}
button#zoom-in {
mask: url('icons/ic_keyboard_arrow_up_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_add_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
.accessible_button_wrapper.zoom-out {
top: 64px;
left: 6px;
}
button#zoom-out {
mask: url('icons/ic_remove_black_24px.svg') no-repeat 0px 0px/100% 100%;
-webkit-mask: url('icons/ic_remove_black_24px.svg') no-repeat 0px 0px/100% 100%;
}
button#pan-up:hover,
button#pan-up:focus,
button#pan-lt:hover,
button#pan-lt:focus,
button#pan-ctr:hover,
button#pan-ctr:focus,
button#pan-rt:hover,
button#pan-rt:focus,
button#pan-dn:hover,
button#pan-dn:focus,
button#zoom-in:hover,
button#zoom-in:focus,
button#zoom-out:hover,
button#zoom-out:focus {
background-color: #0f0;
}
button.active {
background-position: 0 -48px !important;
}
\ No newline at end of file
accessible_gmaps.js 0 → 100644
+ 212
− 0
View file @ e6e6a4e0
var markers = [];
var mapIdentifier;
var initialCenter;
var accessibility_keys = { // Define values for keycodes
backspace: 8,
tab: 9,
enter: 13,
shift: 16, // defined for keyUp event handler - firefox browser fix
ctrl: 17, // defined for keyUp event handler - firefox browser fix
alt: 18, // defined for keyUp event handler - firefox browser fix
esc: 27,
space: 32,
pageup: 33,
pagedown: 34,
end: 35,
home: 36,
left: 37,
up: 38,
right: 39,
down: 40,
del: 46
};
function accessibility_onload(map, mapIdentifier_given, options){
console.log("Accessibility shim loaded!");
mapIdentifier = mapIdentifier_given;
initialCenter = map.getCenter();
console.log(initialCenter);
accessibility_init_controls(map);
// We need a timeout - I'm not sure why. But the map bounds aren't caught up with us if we don't wait.
setTimeout(function(){
for(var i = 0; i < markers.length; i++){
marker = markers[i];
accessibility_create_marker_div(marker, i);
}
}, 2000);
}
function accessibility_init_controls(map){
var markup = '<div id="map-controls">';
markup += '<div id="pan-base">';
markup += '<div class="accessible_button_wrapper pan-up"><button id="pan-up" class="map-bn">Up</button></div>';
markup += '<div class="accessible_button_wrapper pan-lt"><button id="pan-lt" class="map-bn">Left</button></div>';
markup += '<div class="accessible_button_wrapper pan-ctr"><button id="pan-ctr" class="map-bn">Center</button></div>';
markup += '<div class="accessible_button_wrapper pan-rt"><button id="pan-rt" class="map-bn">Right</button></div>';
markup += '<div class="accessible_button_wrapper pan-dn"><button id="pan-dn" class="map-bn">Down</button></div>';
markup += '</div>';
markup += '<div id="zoom-base">';
markup += '<div class="accessible_button_wrapper zoom-in"><button id="zoom-in" class="map-bn">Zoom In</button></div>';
markup += '<div class="accessible_button_wrapper zoom-out"><button id="zoom-out" class="map-bn">Zoom Out</button></div>';
markup += '</div>';
markup += '</div>';
jQuery(mapIdentifier).append(markup);
jQuery('button#pan-up').bind('click', function(e) {
jQuery(this).focus();
map.panBy(0, -88);
accessibility_resetAllMarkers();
return false;
});
jQuery('button#pan-lt').bind('click', function(e) {
jQuery(this).focus();
map.panBy(-112, 0);
accessibility_resetAllMarkers();
return false;
});
jQuery('button#pan-rt').bind('click', function(e) {
jQuery(this).focus();
map.panBy(112, 0);
accessibility_resetAllMarkers();
return false;
});
jQuery('button#pan-dn').bind('click', function(e) {
jQuery(this).focus();
map.panBy(0, 88);
accessibility_resetAllMarkers();
return false;
});
jQuery('button#pan-ctr').bind('click', function(e) {
jQuery(this).focus();
map.setCenter(initialCenter);
accessibility_resetAllMarkers();
return false;
});
jQuery('button#zoom-in').bind('click', function(e) {
jQuery(this).focus();
var zoomLevel = map.getZoom();
map.setZoom(zoomLevel + 1);
accessibility_resetAllMarkers();
return false;
});
jQuery('button#zoom-out').bind('click', function(e) {
jQuery(this).focus();
var zoomLevel = map.getZoom();
map.setZoom(zoomLevel - 1);
accessibility_resetAllMarkers();
return false;
});
jQuery('button.map-bn').bind('mousedown', function(e) {
jQuery(this).addClass('active');
return true;
});
jQuery('button.map-bn').bind('keydown', function(e) {
if (e.keyCode == accessibility_keys.space || e.keyCode == accessibility_keys.enter) {
jQuery(this).addClass('active');
}
return true;
});
jQuery('button.map-bn').bind('mouseup keyup', function(e) {
jQuery(this).removeClass('active');
return true;
});
jQuery(mapIdentifier).bind('mouseup', function(e) {
accessibility_resetAllMarkers();
return true;
});
}
function accessibility_create_marker_div(marker, markerIndex){
// Position a focusable div over the maker
var markerID = "mkr-" + markerIndex;
var title = marker.getTitle();
jQuery('div#map-controls').after('<div id="' + markerID + '" title="' + title + '" class="map-marker" tabindex="0"><span>' + title + '</span></div>');
jQuery('div#' + markerID).data('markerID', markerIndex)
jQuery('div#' + markerID).focus(accessibility_zUp);
jQuery('div#' + markerID).blur(accessibility_zDown);
accessibility_resetMarker(markerIndex);
}
function accessibility_resetMarker(markerIndex){
marker = markers[markerIndex];
var offset = getMarkerPos(marker);
// adjust offset for size of div
offset.x = offset.x - 10;
offset.y = offset.y - 40;
var mapWidth = jQuery(mapIdentifier).width();
var mapHeight = jQuery(mapIdentifier).height();
var markerID = "mkr-" + markerIndex;
var markerWidth = jQuery('div#' + markerID).width();
var markerHeight = jQuery('div#' + markerID).height();
if ((offset.x > (0 - markerWidth) && offset.x < mapWidth) && (offset.y > (0 - markerHeight) && offset.y < mapHeight)) {
jQuery('div#' + markerID).css('display', 'block');
jQuery('div#' + markerID).css('left', offset.x + 'px');
jQuery('div#' + markerID).css('top', offset.y + 'px');
}
else {
console.log("Offset not in bounds!");
jQuery('div#' + markerID).css('display', 'none');
}
}
function accessibility_resetAllMarkers(){
for(var i = 0; i < markers.length; i++){
accessibility_resetMarker(i);
}
}
function accessibility_zUp(){
console.log("Calling zUp!");
marker = markers[jQuery(this).data('markerID')];
marker.setZIndex(1000);
}
function accessibility_zDown(){
console.log("Calling zDown!");
marker = markers[jQuery(this).data('markerID')];
marker.setZIndex(1);
}
function accessibility_addMarker(marker){
markers.push(marker);
}
function getMarkerPos(marker) {
var gmap = marker.map;
var scale = Math.pow(2, gmap.getZoom());
var nw = new google.maps.LatLng(
gmap.getBounds().getNorthEast().lat(),
gmap.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = gmap.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = gmap.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
return pixelOffset;
}
\ No newline at end of file
icons/ic_add_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
icons/ic_all_out_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M16.21 4.16l4 4v-4zm4 12l-4 4h4zm-12 4l-4-4v4zm-4-12l4-4h-4zm12.95-.95c-2.73-2.73-7.17-2.73-9.9 0s-2.73 7.17 0 9.9 7.17 2.73 9.9 0 2.73-7.16 0-9.9zm-1.1 8.8c-2.13 2.13-5.57 2.13-7.7 0s-2.13-5.57 0-7.7 5.57-2.13 7.7 0 2.13 5.57 0 7.7z" fill="#010101"/>
<path d="M.21.16h24v24h-24z" fill="none"/>
</svg>
\ No newline at end of file
icons/ic_keyboard_arrow_down_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
icons/ic_keyboard_arrow_left_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
<path d="M0-.5h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
icons/ic_keyboard_arrow_right_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
<path d="M0-.25h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
icons/ic_keyboard_arrow_up_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
icons/ic_remove_black_24px.svg 0 → 100644
+ 5
− 0
View file @ e6e6a4e0
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 13H5v-2h14v2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
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