From 0c9630b24ae572667dce4b4a6f65abe5366dd845 Mon Sep 17 00:00:00 2001
From: Sarah Hoffmann <lonvia@denofr.de>
Date: Fri, 16 Nov 2012 22:22:04 +0100
Subject: [PATCH] clean up html for search form

- move CSS to its own file
- make it pass as valid XHTML
- move attribution into Mapnik layer definition
- remove Osmarender layer
---
 lib/template/search-html.php | 218 +++++------------------------------
 website/css/search.css       | 166 ++++++++++++++++++++++++++
 website/js/tiles.js          |  31 +----
 3 files changed, 194 insertions(+), 221 deletions(-)
 create mode 100644 website/css/search.css
diff --git a/lib/template/search-html.php b/lib/template/search-html.php
index 3fd8096d..07c26be1 100644
--- a/lib/template/search-html.php
+++ b/lib/template/search-html.php
@@ -1,184 +1,18 @@
 <?php
 	header("content-type: text/html; charset=UTF-8");
 ?>
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>OpenStreetMap Nominatim: Search</title>
 
 	<base href="<?php echo CONST_Website_BaseURL;?>" />
 	<link href="nominatim.xml" rel="search" title="Nominatim Search" type="application/opensearchdescription+xml" />
+	<link href="css/search.css" rel="stylesheet" type="text/css" />
 
-	<script src="js/OpenLayers.js"></script>
-	<script src="js/tiles.js"></script>
-	<script src="js/prototype-1.6.0.3.js"></script>
-
-	<style>
-* {-moz-box-sizing: border-box;}
-body {
-  margin:0px;
-  padding:0px;
-  overflow: hidden;
-  background:#ffffff;
-  height: 100%;
-  font: normal 12px/15px arial,sans-serif;
-}
-#seachheader {
-  position:absolute;
-  z-index:5;
-  top:0px;
-  left:0px;
-  width:100%;
-  height:38px;
-  background:#F0F7FF;
-  border-bottom: 2px solid #75ADFF;
-}
-#q {
-  width:300px;
-}
-#seachheaderfade1, #seachheaderfade2, #seachheaderfade3, #seachheaderfade4{
-  position:absolute;
-  z-index:4;
-  top:0px;
-  left:0px;
-  width:100%;
-  opacity: 0.15;
-  filter: alpha(opacity = 15);
-  background:#000000;
-  border: 1px solid #000000;
-}
-#seachheaderfade1{
-  height:39px;
-}
-#seachheaderfade2{
-  height:40px;
-}
-#seachheaderfade3{
-  height:41px;
-}
-#seachheaderfade4{
-  height:42px;
-}
-#searchresultsfade1, #searchresultsfade2, #searchresultsfade3, #searchresultsfade4 {
-  position:absolute;
-  z-index:2;
-  top:0px;
-  left:200px;
-  height: 100%;
-  opacity: 0.2;
-  filter: alpha(opacity = 20);
-  background:#ffffff;
-  border: 1px solid #ffffff;
-}
-#searchresultsfade1{
-  width:1px;
-}
-#searchresultsfade2{
-  width:2px;
-}
-#searchresultsfade3{
-  width:3px;
-}
-#searchresultsfade4{
-  width:4px;
-}
-
-#searchresults{
-  position:absolute;
-  z-index:3;
-  top:41px;
-  width:200px;
-  height: 100%;
-  background:#ffffff;
-  border: 1px solid #ffffff;
-  overflow: auto;
-}
-#map{
-  position:absolute;
-  z-index:1;
-  top:38px;
-  left:200px;
-  width:100%;
-  height:100%;
-  background:#eee;
-}
-#report{
-  position:absolute;
-  z-index:2;
-  top:38px;
-  left:200px;
-  width:100%;
-  height:100%;
-  background:#eee;
-  font: normal 12px/15px arial,sans-serif;
-  padding:20px;
-}
-#report table {
-  margin-left:20px;
-}
-#report th {
-  vertical-align:top;
-  text-align:left;
-}
-#report td.button {
-  text-align:right;
-}
-.result {
-  margin:5px;
-  margin-bottom:0px;
-  padding:2px;
-  padding-left:4px;
-  padding-right:4px;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  background:#F0F7FF;
-  border: 2px solid #D7E7FF;
-  font: normal 12px/15px arial,sans-serif;
-  cursor:pointer;
-}
-.result img{
-  float:right;
-}
-.result .latlon{
-  display: none;
-}
-.result .place_id{
-  display: none;
-}
-.result .type{
-  color: #999;
-  text-align:center;
-  font: normal 9px/10px arial,sans-serif;
-  padding-top:4px;
-}
-.result .details, .result .details a{
-  color: #999;
-  text-align:center;
-  font: normal 9px/10px arial,sans-serif;
-  padding-top:4px;
-}
-.noresults{
-  color: #000;
-  text-align:center;
-  font: normal 12px arial,sans-serif;
-  padding-top:4px;
-}
-.more{
-  color: #ccc;
-  text-align:center;
-  padding-top:4px;
-}
-.disclaimer{
-  color: #ccc;
-  text-align:center;
-  font: normal 9px/10px arial,sans-serif;
-  padding-top:4px;
-}
-form{
-  margin:0px;
-  padding:0px;
-}
-	</style>
+	<script src="js/OpenLayers.js" type="text/javascript"></script>
+	<script src="js/tiles.js" type="text/javascript"></script>
+	<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
 
 	<script type="text/javascript">
         
@@ -188,18 +22,19 @@ form{
 		{
 			if ($('searchresults'))
 			{
-				$('map').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200;
-				$('report').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200;
+                var viewwidth = ((document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200) + 'px';
+				$('map').style.width = viewwidth;
+				$('report').style.width = viewwidth;
 			}
 			else
 			{
-				$('map').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 0;
-				$('map').style.left = 0;
+				$('map').style.width = ((document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 0) + 'px';
+				$('map').style.left = '0px';
 			}
 			
-			if ($('map')) $('map').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38;
-			if ($('searchresults')) $('searchresults').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38;
-			if ($('report')) $('report').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38;
+			if ($('map')) $('map').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
+			if ($('searchresults')) $('searchresults').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
+			if ($('report')) $('report').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
 		}
 		window.onresize = handleResize;
 
@@ -289,8 +124,7 @@ form{
 									"moveend": mapEventMove
 								}
             	} );
-			map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default",
-                         { attribution : 'Â© <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, under an <a target="_parent" href="http://www.openstreetmap.org/copyright">open license</a>'}));
+			map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default"));
 
 			var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 			layer_style.fillOpacity = 0.2;
@@ -315,19 +149,19 @@ form{
 
 	<div id="seachheader">
 		<form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
-			<table border="0" width="100%">
+			<table border="0" width="100%" summary="header">
 				<tr>
-					<td valign="center" style="width:30px;"><img src="images/logo.gif"></td>
-					<td valign="center" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery); 
-?>" style="width:270px;"><input type="text" id="viewbox" style="width:130px;" name="viewbox"></td>
-					<td style="width:80px;"><input type="submit" value="Search"></td>
-<?php if (CONST_Search_AreaPolygons) { ?>					<td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked"; ?>> Highlight</td>
+					<td valign="middle" style="width:30px;"><img alt="logo" src="images/logo.gif" /></td>
+					<td valign="middle" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery); 
+?>" style="width:270px;" /><input type="text" id="viewbox" style="width:128px;" name="viewbox" /></td>
+					<td style="width:80px;"><input type="submit" value="Search"/></td>
+<?php if (CONST_Search_AreaPolygons) { ?>					<td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked='checked'"; ?>/> Highlight</td>
 <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
 <td style="text-align:right;">
 <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ" 
 target="_blank">FAQ</a></td>
 
-<?php } ?>					<td style="text-align:right;"><?php if ($sQuery) { ?><input type="button" value="Report Problem With Results" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"><?php } ?></td>
+<?php } ?>					<td style="text-align:right;"><?php if ($sQuery) { ?><input type="button" value="Report Problem With Results" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"/><?php } ?></td>
 				</tr>
 			</table>
 		</form>
@@ -365,7 +199,7 @@ target="_blank">FAQ</a></td>
 			echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
 		}
 
-		echo (isset($aResult['icon'])?'<img src="'.$aResult['icon'].'">':'');
+		echo (isset($aResult['icon'])?'<img alt="icon" src="'.$aResult['icon'].'"/>':'');
 		echo ' <span class="name">'.$aResult['name'].'</span>';
 		echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>';
 		echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
@@ -380,7 +214,7 @@ target="_blank">FAQ</a></td>
 	{
 		if ($sMoreURL)
 		{
-			echo '<div class="more"><a href="'.$sMoreURL.'">Search for more results</a></div>';
+			echo '<div class="more"><a href="'.htmlentities($sMoreURL).'">Search for more results</a></div>';
 		}
 	}
 	else
@@ -390,7 +224,7 @@ target="_blank">FAQ</a></td>
 
 ?>
 		<div class="disclaimer">Addresses and postcodes are approximate
-			<input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')">
+			<input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"/>
 		</div>
 	</div>
 <?php
@@ -405,7 +239,7 @@ href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ">FAQ</a>.  If your proble
 to check how the address was generated before reporting a problem.</p>
 		<p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems 
 making sure to set 
-the component to 'nominatim'.  You can search for existing bug reports <a href="http://trac.openstreetmap.org/query?status=new&status=assigned&status=reopened&component=nominatim&order=priority">here</a>.</p>
+the component to 'nominatim'.  You can search for existing bug reports <a href="http://trac.openstreetmap.org/query?status=new&amp;status=assigned&amp;status=reopened&amp;component=nominatim&amp;order=priority">here</a>.</p>
 		<p>Please ensure that you include a full description of the problem, including the search query that you used, the problem with the result and, if 
 the problem relates to missing data, the osm id of the item that is missing.  Problems that contain enough detail are likely to get looked at before ones that 
 require significant research!</p>
diff --git a/website/css/search.css b/website/css/search.css
new file mode 100644
index 00000000..14eca2ef
--- /dev/null
+++ b/website/css/search.css
@@ -0,0 +1,166 @@
+* {-moz-box-sizing: border-box;}
+body {
+  margin:0px;
+  padding:0px;
+  overflow: hidden;
+  background:#ffffff;
+  height: 100%;
+  font: normal 12px/15px arial,sans-serif;
+}
+#seachheader {
+  position:absolute;
+  z-index:5;
+  top:0px;
+  left:0px;
+  width:100%;
+  height:38px;
+  background:#F0F7FF;
+  border-bottom: 2px solid #75ADFF;
+}
+#q {
+  width:300px;
+}
+#seachheaderfade1, #seachheaderfade2, #seachheaderfade3, #seachheaderfade4{
+  position:absolute;
+  z-index:4;
+  top:0px;
+  left:0px;
+  width:100%;
+  opacity: 0.15;
+  filter: alpha(opacity = 15);
+  background:#000000;
+  border: 1px solid #000000;
+}
+#seachheaderfade1{
+  height:39px;
+}
+#seachheaderfade2{
+  height:40px;
+}
+#seachheaderfade3{
+  height:41px;
+}
+#seachheaderfade4{
+  height:42px;
+}
+#searchresultsfade1, #searchresultsfade2, #searchresultsfade3, #searchresultsfade4 {
+  position:absolute;
+  z-index:2;
+  top:0px;
+  left:200px;
+  height: 100%;
+  opacity: 0.2;
+  filter: alpha(opacity = 20);
+  background:#ffffff;
+  border: 1px solid #ffffff;
+}
+#searchresultsfade1{
+  width:1px;
+}
+#searchresultsfade2{
+  width:2px;
+}
+#searchresultsfade3{
+  width:3px;
+}
+#searchresultsfade4{
+  width:4px;
+}
+
+#searchresults{
+  position:absolute;
+  z-index:3;
+  top:41px;
+  width:200px;
+  height: 100%;
+  background:#ffffff;
+  border: 1px solid #ffffff;
+  overflow: auto;
+}
+#map{
+  position:absolute;
+  z-index:1;
+  top:38px;
+  left:200px;
+  width:100%;
+  height:100%;
+  background:#eee;
+}
+#report{
+  position:absolute;
+  z-index:2;
+  top:38px;
+  left:200px;
+  width:100%;
+  height:100%;
+  background:#eee;
+  font: normal 12px/15px arial,sans-serif;
+  padding:20px;
+}
+#report table {
+  margin-left:20px;
+}
+#report th {
+  vertical-align:top;
+  text-align:left;
+}
+#report td.button {
+  text-align:right;
+}
+.result {
+  margin:5px;
+  margin-bottom:0px;
+  padding:2px;
+  padding-left:4px;
+  padding-right:4px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  background:#F0F7FF;
+  border: 2px solid #D7E7FF;
+  font: normal 12px/15px arial,sans-serif;
+  cursor:pointer;
+}
+.result img{
+  float:right;
+}
+.result .latlon{
+  display: none;
+}
+.result .place_id{
+  display: none;
+}
+.result .type{
+  color: #999;
+  text-align:center;
+  font: normal 9px/10px arial,sans-serif;
+  padding-top:4px;
+}
+.result .details, .result .details a{
+  color: #999;
+  text-align:center;
+  font: normal 9px/10px arial,sans-serif;
+  padding-top:4px;
+}
+.noresults{
+  color: #000;
+  text-align:center;
+  font: normal 12px arial,sans-serif;
+  padding-top:4px;
+}
+.more{
+  color: #ccc;
+  text-align:center;
+  padding-top:4px;
+}
+.disclaimer{
+  color: #ccc;
+  text-align:center;
+  font: normal 9px/10px arial,sans-serif;
+  padding-top:4px;
+}
+form{
+  margin:0px;
+  padding:0px;
+}
+
diff --git a/website/js/tiles.js b/website/js/tiles.js
index 77eaf63b..37e243ab 100644
--- a/website/js/tiles.js
+++ b/website/js/tiles.js
@@ -48,7 +48,8 @@ OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {
             "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
             "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
         ];
-        options = OpenLayers.Util.extend({ numZoomLevels: 19, buffer: 0 }, options);
+        options = OpenLayers.Util.extend({ numZoomLevels: 19, buffer: 0,
+           attribution : 'Â© <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, under an <a target="_parent" href="http://www.openstreetmap.org/copyright">open license</a>' }, options);
         var newArguments = [name, url, options];
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
     },
@@ -85,34 +86,6 @@ OpenLayers.Layer.OSM.MapQuestOpen = OpenLayers.Class(OpenLayers.Layer.OSM, {
     CLASS_NAME: "OpenLayers.Layer.OSM.MapQuestOpen"
 });
 
-/**
- * Class: OpenLayers.Layer.OSM.Osmarender
- *
- * Inherits from:
- *  - <OpenLayers.Layer.OSM>
- */
-OpenLayers.Layer.OSM.Osmarender = OpenLayers.Class(OpenLayers.Layer.OSM, {
-    /**
-     * Constructor: OpenLayers.Layer.OSM.Osmarender
-     *
-     * Parameters:
-     * name - {String}
-     * options - {Object} Hashtable of extra options to tag onto the layer
-     */
-    initialize: function(name, options) {
-        var url = [
-            "http://a.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
-            "http://b.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
-            "http://c.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
-        ];
-        options = OpenLayers.Util.extend({ numZoomLevels: 18, buffer: 0 }, options);
-        var newArguments = [name, url, options];
-        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
-    },
-
-    CLASS_NAME: "OpenLayers.Layer.OSM.Osmarender"
-});
-
 /**
  * Class: OpenLayers.Layer.OSM.CycleMap
  *
-- 
2.39.5

