Accessiblity and html validation fixes
Accessiblity and html validation fixes

<?php <?php
function include_header($pageTitle, $pageType, $opendiv = true, $geolocate = false, $datepicker = false) function include_header($pageTitle, $pageType, $opendiv = true, $geolocate = false, $datepicker = false)
{ {
echo ' echo '
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
  <meta charset="UTF-8">
<title>' . $pageTitle . '</title>'; <title>' . $pageTitle . '</title>';
if ($datepicker) echo '<link rel="stylesheet" href="css/jquery.ui.datepicker.mobile.css" />'; if ($datepicker) echo '<link rel="stylesheet" href="css/jquery.ui.datepicker.mobile.css" />';
if (isDebugServer()) echo '<link rel="stylesheet" href="css/jquery-mobile-1.0a3.css" /> if (isDebugServer()) echo '<link rel="stylesheet" href="css/jquery-mobile-1.0a3.css" />
<script type="text/javascript" src="js/jquery-1.5.js"></script> <script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0a3.js"></script>'; <script type="text/javascript" src="js/jquery-mobile-1.0a3.js"></script>';
else echo '<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> else echo '<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>'; <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>';
if ($datepicker) echo '<script> if ($datepicker) echo '<script>
//reset type=date inputs to text //reset type=date inputs to text
$( document ).bind( "mobileinit", function(){ $( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true; $.mobile.page.prototype.options.degradeInputs.date = true;
}); });
</script> </script>
<script src="js/jQuery.ui.datepicker.js"></script>'; <script src="js/jQuery.ui.datepicker.js"></script>';
echo '<style type="text/css"> echo '<style type="text/css">
.ui-navbar { .ui-navbar {
width: 100%; width: 100%;
} }
.ui-btn-inner { .ui-btn-inner {
white-space: normal !important; white-space: normal !important;
} }
.ui-li-heading { .ui-li-heading {
white-space: normal !important; white-space: normal !important;
} }
.ui-listview-filter { .ui-listview-filter {
margin: 0 !important; margin: 0 !important;
} }
.ui-icon-navigation { .ui-icon-navigation {
background-image: url(css/images/113-navigation.png); background-image: url(css/images/113-navigation.png);
background-position: 1px 0; background-position: 1px 0;
} }
#footer { #footer {
text-size: 0.75em; text-size: 0.75em;
text-align: center; text-align: center;
} }
body { body {
background-color: #F0F0F0; background-color: #F0F0F0;
} }
  #jqm-homeheader {
  text-align: center;
  }
   
  // source http://webaim.org/techniques/skipnav/
  #skip a, #skip a:hover, #skip a:visited
  {
  position:absolute;
  left:0px;
  top:-500px;
  width:1px;
  height:1px;
  overflow:hidden;
  }
   
  #skip a:active, #skip a:focus
  {
  position:static;
  width:auto;
  height:auto;
  }
</style>'; </style>';
if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod')) { if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod')) {
echo '<meta name="apple-mobile-web-app-capable" content="yes" /> echo '<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="startup.png" /> <link rel="apple-touch-startup-image" href="startup.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />'; <link rel="apple-touch-icon" href="apple-touch-icon.png" />';
} }
if ($geolocate) { if ($geolocate) {
echo "<script> echo "<script>
   
function success(position) { function success(position) {
$('#geolocate').val(position.coords.latitude+','+position.coords.longitude); $('#geolocate').val(position.coords.latitude+','+position.coords.longitude);
$.ajax({ url: \"common.inc.php?geolocate=yes&lat=\"+position.coords.latitude+\"&lon=\"+position.coords.longitude }); $.ajax({ url: \"common.inc.php?geolocate=yes&lat=\"+position.coords.latitude+\"&lon=\"+position.coords.longitude });
$('#here').click(function(event) { $('#geolocate').val(doAJAXrequestForGeolocSessionHere()); return false;}); $('#here').click(function(event) { $('#geolocate').val(doAJAXrequestForGeolocSessionHere()); return false;});
$('#here').show(); $('#here').show();
} }
function error(msg) { function error(msg) {
console.log(msg); console.log(msg);
} }
   
if (navigator.geolocation) { if (navigator.geolocation) {
var options = { var options = {
enableHighAccuracy: false, enableHighAccuracy: false,
timeout: 60000, timeout: 60000,
maximumAge: 10000 maximumAge: 10000
} }
navigator.geolocation.getCurrentPosition(success, error, options); navigator.geolocation.getCurrentPosition(success, error, options);
} }
   
</script> "; </script> ";
} }
echo '</head> echo '</head>
<body> <body>
  <div id="skip">
  <a href="#maincontent">Skip to content</a>
  </div>
'; ';
if ($opendiv) { if ($opendiv) {
echo '<div data-role="page"> echo '<div data-role="page">
<script> <script>
$(document).ready(function () $(document).ready(function ()
{ {
document.title = "' . $pageTitle . '"; document.title = "' . $pageTitle . '";
}); });
</script> </script>
<div data-role="header"> <div data-role="header">
<h1>' . $pageTitle . '</h1> <h1>' . $pageTitle . '</h1>
</div><!-- /header --> </div><!-- /header -->
  <a name="maincontent" id="maincontent"></a>
<div data-role="content"> '; <div data-role="content"> ';
} }
} }
function include_footer() function include_footer()
{ {
if ($geolocate && isset($_SESSION['lat'])) { if ($geolocate && isset($_SESSION['lat'])) {
echo "<script> echo "<script>
$('#here').click(function(event) { $('#geolocate').val(doAJAXrequestForGeolocSessionHere()); return false;}); $('#here').click(function(event) { $('#geolocate').val(doAJAXrequestForGeolocSessionHere()); return false;});
$('#here').show(); $('#here').show();
</script>"; </script>";
} }
echo '<div id="footer"><a href="about.php">About/Contact Us</a>&nbsp;<a href="feedback.php">Feedback/Bug Report</a></a>'; echo '<div id="footer"><a href="about.php">About/Contact Us</a>&nbsp;<a href="feedback.php">Feedback/Bug Report</a></a>';
echo '</div>'; echo '</div>';
} }
function timePlaceSettings($geolocate = false) function timePlaceSettings($geolocate = false)
{ {
global $service_periods; global $service_periods;
$geoerror = false; $geoerror = false;
if ($geolocate == true) { if ($geolocate == true) {
$geoerror = !isset($_SESSION['lat']) || !isset($_SESSION['lat']) || $_SESSION['lat'] == "" || $_SESSION['lon'] == ""; $geoerror = !isset($_SESSION['lat']) || !isset($_SESSION['lat']) || $_SESSION['lat'] == "" || $_SESSION['lon'] == "";
} }
if ($geoerror) { if ($geoerror) {
echo '<div class="error">Sorry, but your location could not currently be detected. echo '<div class="error">Sorry, but your location could not currently be detected.
Please allow location permission, wait for your location to be detected, Please allow location permission, wait for your location to be detected,
or enter an address/co-ordinates in the box below.</div>'; or enter an address/co-ordinates in the box below.</div>';
} }
echo '<div data-role="collapsible" data-collapsed="' . !$geoerror . '"> echo '<div data-role="collapsible" data-collapsed="' . !$geoerror . '">
<h3>Change Time/Place (' . (isset($_SESSION['time']) ? $_SESSION['time'] : "Current Time,") . ' ' . ucwords(service_period()) . ')...</h3> <h3>Change Time/Place (' . (isset($_SESSION['time']) ? $_SESSION['time'] : "Current Time,") . ' ' . ucwords(service_period()) . ')...</h3>
<form action="" method="post"> <form action="'.basename($_SERVER['PHP_SELF']).'" method="post">
<div class="ui-body"> <div class="ui-body">
<div data-role="fieldcontain"> <div data-role="fieldcontain">
<label for="geolocate"> Current Location: </label> <label for="geolocate"> Current Location: </label>
<input type="text" id="geolocate" name="geolocate" value="' . (isset($_SESSION['lat']) && isset($_SESSION['lon']) ? $_SESSION['lat'] . "," . $_SESSION['lon'] : "Enter co-ordinates or address here") . '"/> <a href="#" style="display:none" name="here" id="here"/>Here?</a> <input type="text" id="geolocate" name="geolocate" value="' . (isset($_SESSION['lat']) && isset($_SESSION['lon']) ? $_SESSION['lat'] . "," . $_SESSION['lon'] : "Enter co-ordinates or address here") . '"/> <a href="#" style="display:none" name="here" id="here">Here?</a>
</div> </div>
<div data-role="fieldcontain"> <div data-role="fieldcontain">
<label for="time"> Time: </label> <label for="time"> Time: </label>
<input type="time" name="time" id="time" value="' . (isset($_SESSION['time']) ? $_SESSION['time'] : date("H:i")) . '"/> <a href="#" name="currentTime" id="currentTime"/>Current Time?</a> <input type="time" name="time" id="time" value="' . (isset($_SESSION['time']) ? $_SESSION['time'] : date("H:i")) . '"/> <a href="#" name="currentTime" id="currentTime">Current Time?</a>
</div> </div>
<div data-role="fieldcontain"> <div data-role="fieldcontain">
<label for="service_period"> Service Period: </label> <label for="service_period"> Service Period: </label>
<select name="service_period">'; <select name="service_period" id="service_period">';
foreach ($service_periods as $service_period) { foreach ($service_periods as $service_period) {
echo "<option value=\"$service_period\"" . (service_period() === $service_period ? "SELECTED" : "") . '>' . ucwords($service_period) . '</option>'; echo "<option value=\"$service_period\"" . (service_period() === $service_period ? " SELECTED" : "") . '>' . ucwords($service_period) . '</option>';
} }
echo '</select> echo '</select>
<a href="#" style="display:none" name="currentPeriod" id="currentPeriod"/>Current Period?</a> <a href="#" style="display:none" name="currentPeriod" id="currentPeriod"/>Current Period?</a>
</div> </div>
<input type="submit" value="Update"/> <input type="submit" value="Update"/>
</form> </form>
</div></div>'; </div></div>';
} }
?> ?>
   
file:a/index.php -> file:b/index.php
<?php <?php
include ('common.inc.php'); include ('common.inc.php');
include_header("bus.lambdacomplex.org", "index", false, true) include_header("bus.lambdacomplex.org", "index", false, true)
?> ?>
<div data-role="page"> <div data-role="page">
<div data-role="content"> <div data-role="content">
<div id="jqm-homeheader"> <div id="jqm-homeheader">
<center><h3>busness time</h3><br><small>Canberra Bus Timetables and Trip Planner</small></center> <h1>busness time</h1><br><small>Canberra Bus Timetables and Trip Planner</small>
</div> </div>
<a href="tripPlanner.php" data-role="button" data-icon="navigation">Launch Trip Planner...</a> <a name="maincontent" id="maincontent"></a>
  <a href="tripPlanner.php" data-role="button" data-icon="navigation">Launch Trip Planner...</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Timetables - Stops</li> <li data-role="list-divider">Timetables - Stops</li>
<li><a href="stopList.php">Major (Timing Point) Stops</a></li> <li><a href="stopList.php">Major (Timing Point) Stops</a></li>
<li><a href="stopList.php">All Stops</a></li> <li><a href="stopList.php">All Stops</a></li>
<li><a href="stopList.php?suburbs=yes">Stops By Suburb</a></li> <li><a href="stopList.php?suburbs=yes">Stops By Suburb</a></li>
<li><a class="nearby" href="stopList.php?nearby=yes">Nearby Stops</a></li> <li><a class="nearby" href="stopList.php?nearby=yes">Nearby Stops</a></li>
</ul> </ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Timetables - Routes</li> <li data-role="list-divider">Timetables - Routes</li>
<li><a href="routeList.php">Routes By Final Destination</a></li> <li><a href="routeList.php">Routes By Final Destination</a></li>
<li><a href="routeList.php?bynumber=yes">Routes By Number</a></li> <li><a href="routeList.php?bynumber=yes">Routes By Number</a></li>
<li><a href="routeList.php?bysuburb=yes">Stops By Suburb</a></li> <li><a href="routeList.php?bysuburb=yes">Stops By Suburb</a></li>
<li><a class="nearby" href="routeList.php?nearby=yes">Nearby Routes</a></li> <li><a class="nearby" href="routeList.php?nearby=yes">Nearby Routes</a></li>
</ul> </ul>
<?php <?php
echo timePlaceSettings(); echo timePlaceSettings();
include_footer(true) include_footer(true)
?> ?>
file:a/stop.php -> file:b/stop.php
<?php <?php
include ('common.inc.php'); include ('common.inc.php');
$stopid = filter_var($_REQUEST['stopid'], FILTER_SANITIZE_NUMBER_INT); $stopid = filter_var($_REQUEST['stopid'], FILTER_SANITIZE_NUMBER_INT);
$stopcode = filter_var($_REQUEST['stopcode'], FILTER_SANITIZE_STRING); $stopcode = filter_var($_REQUEST['stopcode'], FILTER_SANITIZE_STRING);
$url = $APIurl . "/json/stop?stop_id=" . $stopid; $url = $APIurl . "/json/stop?stop_id=" . $stopid;
$stop = json_decode(getPage($url)); $stop = json_decode(getPage($url));
if ($stopcode != "" && $stop[5] != $stopcode) { if ($stopcode != "" && $stop[5] != $stopcode) {
$url = $APIurl . "/json/stopcodesearch?q=" . $stopcode; $url = $APIurl . "/json/stopcodesearch?q=" . $stopcode;
$stopsearch = json_decode(getPage($url)); $stopsearch = json_decode(getPage($url));
$stopid = $stopsearch[0][0]; $stopid = $stopsearch[0][0];
$url = $APIurl . "/json/stop?stop_id=" . $stopid; $url = $APIurl . "/json/stop?stop_id=" . $stopid;
$stop = json_decode(getPage($url)); $stop = json_decode(getPage($url));
} }
if (!startsWith($stop[5], "Wj") && strpos($stop[1], "Platform") === false) { if (!startsWith($stop[5], "Wj") && strpos($stop[1], "Platform") === false) {
// expand out to all platforms // expand out to all platforms
} }
$stops = Array(); $stops = Array();
$stopPositions = Array(); $stopPositions = Array();
$stopNames = Array(); $stopNames = Array();
$tripStopNumbers = Array(); $tripStopNumbers = Array();
$allStopsTrips = Array(); $allStopsTrips = Array();
$stopLinks = ""; $stopLinks = "";
if (isset($_REQUEST['stopids'])) { if (isset($_REQUEST['stopids'])) {
$stopids = explode(",", filter_var($_REQUEST['stopids'], FILTER_SANITIZE_STRING)); $stopids = explode(",", filter_var($_REQUEST['stopids'], FILTER_SANITIZE_STRING));
foreach ($stopids as $sub_stopid) { foreach ($stopids as $sub_stopid) {
$url = $APIurl . "/json/stop?stop_id=" . $sub_stopid; $url = $APIurl . "/json/stop?stop_id=" . $sub_stopid;
$stop = json_decode(getPage($url)); $stop = json_decode(getPage($url));
$stops[] = $stop; $stops[] = $stop;
} }
$stop = $stops[0]; $stop = $stops[0];
$stopid = $stops[0][0]; $stopid = $stops[0][0];
$stopLinks.= "Individual stop pages: "; $stopLinks.= "Individual stop pages: ";
foreach ($stops as $key => $sub_stop) { foreach ($stops as $key => $sub_stop) {
$stopNames[$key] = $sub_stop[1] . ' Stop #' . ($key + 1); $stopNames[$key] = $sub_stop[1] . ' Stop #' . ($key + 1);
$stopLinks.= '<a href="stop.php?stopid=' . $sub_stop[0] . '&stopcode=' . $sub_stop[5] . '">' . $stopNames[$key] . '</a> '; $stopLinks.= '<a href="stop.php?stopid=' . $sub_stop[0] . '&stopcode=' . $sub_stop[5] . '">' . $stopNames[$key] . '</a> ';
$stopPositions[$key] = Array( $stopPositions[$key] = Array(
$sub_stop[2], $sub_stop[2],
$sub_stop[3] $sub_stop[3]
); );
$url = $APIurl . "/json/stoptrips?stop=" . $sub_stop[0] . "&time=" . midnight_seconds() . "&service_period=" . service_period(); $url = $APIurl . "/json/stoptrips?stop=" . $sub_stop[0] . "&time=" . midnight_seconds() . "&service_period=" . service_period();
$trips = json_decode(getPage($url)); $trips = json_decode(getPage($url));
foreach ($trips as $trip) { foreach ($trips as $trip) {
if (!isset($allStopsTrips[$trip[1][0]])) $allStopsTrips[$trip[1][0]] = $trip; if (!isset($allStopsTrips[$trip[1][0]])) $allStopsTrips[$trip[1][0]] = $trip;
$tripStopNumbers[$trip[1][0]][] = $key; $tripStopNumbers[$trip[1][0]][] = $key;
} }
} }
} }
include_header($stop[1], "stop"); include_header($stop[1], "stop");
timePlaceSettings(); timePlaceSettings();
echo '<div data-role="content" class="ui-content" role="main">'; echo '<div data-role="content" class="ui-content" role="main"> <a name="maincontent" id="maincontent"></a>';
echo $stopLinks; echo $stopLinks;
if (sizeof($stops) > 0) { if (sizeof($stops) > 0) {
echo '<p>' . staticmap($stopPositions) . '</p>'; echo '<p>' . staticmap($stopPositions) . '</p>';
} }
else { else {
echo '<p>' . staticmap(Array( echo '<p>' . staticmap(Array(
0 => Array( 0 => Array(
$stop[2], $stop[2],
$stop[3] $stop[3]
) )
)) . '</p>'; )) . '</p>';
} }
echo ' <ul data-role="listview" data-inset="true">'; echo ' <ul data-role="listview" data-inset="true">';
if (sizeof($allStopsTrips) > 0) { if (sizeof($allStopsTrips) > 0) {
$trips = $allStopsTrips; $trips = $allStopsTrips;
} }
else { else {
$url = $APIurl . "/json/stoptrips?stop=" . $stopid . "&time=" . midnight_seconds() . "&service_period=" . service_period(); $url = $APIurl . "/json/stoptrips?stop=" . $stopid . "&time=" . midnight_seconds() . "&service_period=" . service_period();
$trips = json_decode(getPage($url)); $trips = json_decode(getPage($url));
} }
foreach ($trips as $row) { foreach ($trips as $row) {
echo '<li>'; echo '<li>';
echo '<h3><a href="trip.php?stopid=' . $stopid . '&tripid=' . $row[1][0] . '">' . $row[1][1]; echo '<h3><a href="trip.php?stopid=' . $stopid . '&tripid=' . $row[1][0] . '">' . $row[1][1];
if (isFastDevice()) { if (isFastDevice()) {
$viaPoints = viaPointNames($row[1][0], $stopid); $viaPoints = viaPointNames($row[1][0], $stopid);
if ($viaPoints != "") echo '<br><small>Via: ' . $viaPoints . '</small>'; if ($viaPoints != "") echo '<br><small>Via: ' . $viaPoints . '</small>';
} }
if (sizeof($tripStopNumbers) > 0) { if (sizeof($tripStopNumbers) > 0) {
echo '<br><small>Boarding At: '; echo '<br><small>Boarding At: ';
foreach ($tripStopNumbers[$row[1][0]] as $key) { foreach ($tripStopNumbers[$row[1][0]] as $key) {
echo $stopNames[$key] .' '; echo $stopNames[$key] .' ';
} }
echo '</small>'; echo '</small>';
} }
echo '</a></h3>'; echo '</a></h3>';
echo '<p class="ui-li-aside"><strong>' . midnight_seconds_to_time($row[0]) . '</strong></p>'; echo '<p class="ui-li-aside"><strong>' . midnight_seconds_to_time($row[0]) . '</strong></p>';
echo '</li>'; echo '</li>';
} }
if (sizeof($trips) == 0) echo "<li> <center>No trips in the near future.</center> </li>"; if (sizeof($trips) == 0) echo "<li> <center>No trips in the near future.</center> </li>";
echo '</ul></div>'; echo '</ul></div>';
include_footer(); include_footer();
?> ?>