From acb9f950df0b8bfa54552de7c46d8f3b887fff39 Mon Sep 17 00:00:00 2001
From: Marc Jansen <jansen@terrestris.de>
Date: Tue, 29 May 2012 21:47:22 +0200
Subject: [PATCH] Use document.getElementById in examples.

Previously examples would either use the now deprecated `window.$` or the
non-API-method `OpenLayers.Util.getElement`. This was well caught by @probins
and @elemoine.
---
 examples/editing-methods.js              | 14 ++++++--------
 examples/game-accel-ball.html            |  3 +--
 examples/geolocation.js                  |  9 ++++-----
 examples/getfeatureinfo-control.html     |  3 +--
 examples/select-feature.html             |  6 ++----
 examples/snap-split.html                 | 23 ++++++++++-------------
 examples/snapping.html                   | 10 ++++------
 examples/strategy-cluster-extended.js    |  6 ++----
 examples/strategy-cluster-threshold.html | 14 ++++++--------
 examples/strategy-cluster.html           | 17 ++++++++---------
 examples/using-proj4js.js                | 15 +++++++--------
 11 files changed, 51 insertions(+), 69 deletions(-)

diff --git a/examples/editing-methods.js b/examples/editing-methods.js
index 1c227c4b11..03d5e82311 100644
--- a/examples/editing-methods.js
+++ b/examples/editing-methods.js
@@ -19,10 +19,8 @@ var draw = new OpenLayers.Control.DrawFeature(
 map.addControl(draw);
 draw.activate();
 
-var $ = OpenLayers.Util.getElement;
-
 // handle clicks on method links
-$("insertXY").onclick = function() {
+document.getElementById("insertXY").onclick = function() {
     var values = parseInput(
         window.prompt(
             "Enter map coordinates for new point (e.g. '-111, 46')", "x, y"
@@ -32,7 +30,7 @@ $("insertXY").onclick = function() {
         draw.insertXY(values[0], values[1]);
     }
 };
-$("insertDeltaXY").onclick = function() {
+document.getElementById("insertDeltaXY").onclick = function() {
     var values = parseInput(
         window.prompt(
             "Enter offset values for new point (e.g. '15, -10')", "dx, dy"
@@ -42,7 +40,7 @@ $("insertDeltaXY").onclick = function() {
         draw.insertDeltaXY(values[0], values[1]);
     }
 };
-$("insertDirectionLength").onclick = function() {
+document.getElementById("insertDirectionLength").onclick = function() {
     var values = parseInput(
         window.prompt(
             "Enter direction and length offset values for new point (e.g. '-45, 10')", "direction, length"
@@ -52,7 +50,7 @@ $("insertDirectionLength").onclick = function() {
         draw.insertDirectionLength(values[0], values[1]);
     }
 };
-$("insertDeflectionLength").onclick = function() {
+document.getElementById("insertDeflectionLength").onclick = function() {
     var values = parseInput(
         window.prompt(
             "Enter deflection and length offset values for new point (e.g. '15, 20')", "deflection, length"
@@ -62,10 +60,10 @@ $("insertDeflectionLength").onclick = function() {
         draw.insertDeflectionLength(values[0], values[1]);
     }
 };
-$("cancel").onclick = function() {
+document.getElementById("cancel").onclick = function() {
     draw.cancel();
 };
-$("finishSketch").onclick = function() {
+document.getElementById("finishSketch").onclick = function() {
     draw.finishSketch();
 };
 
diff --git a/examples/game-accel-ball.html b/examples/game-accel-ball.html
index a622768bd2..c832e86721 100644
--- a/examples/game-accel-ball.html
+++ b/examples/game-accel-ball.html
@@ -33,10 +33,9 @@
             vlayer.drawFeature(feature);
         }
         function init() {
-            var $ = OpenLayers.Util.getElement;
             map = new OpenLayers.Map( 'map', 
                 {
-                 'maxExtent': new OpenLayers.Bounds(0, 0, $("map").clientWidth, $("map").clientHeight), 
+                 'maxExtent': new OpenLayers.Bounds(0, 0, document.getElementById("map").clientWidth, document.getElementById("map").clientHeight), 
                  controls: [], 
                  maxResolution: 'auto'} 
             );
diff --git a/examples/geolocation.js b/examples/geolocation.js
index acde5faae5..3d8d6f4b55 100644
--- a/examples/geolocation.js
+++ b/examples/geolocation.js
@@ -92,16 +92,15 @@ geolocate.events.register("locationupdated",geolocate,function(e) {
 geolocate.events.register("locationfailed",this,function() {
     OpenLayers.Console.log('Location detection failed');
 });
-var $ = OpenLayers.Util.getElement;
-$('locate').onclick = function() {
+document.getElementById('locate').onclick = function() {
     vector.removeAllFeatures();
     geolocate.deactivate();
-    $('track').checked = false;
+    document.getElementById('track').checked = false;
     geolocate.watch = false;
     firstGeolocation = true;
     geolocate.activate();
 };
-$('track').onclick = function() {
+document.getElementById('track').onclick = function() {
     vector.removeAllFeatures();
     geolocate.deactivate();
     if (this.checked) {
@@ -110,4 +109,4 @@ $('track').onclick = function() {
         geolocate.activate();
     }
 };
-$('track').checked = false;
+document.getElementById('track').checked = false;
diff --git a/examples/getfeatureinfo-control.html b/examples/getfeatureinfo-control.html
index 2dcdf3c58d..baecd420fb 100644
--- a/examples/getfeatureinfo-control.html
+++ b/examples/getfeatureinfo-control.html
@@ -48,7 +48,6 @@
     </style>
     <script defer="defer" type="text/javascript">
     OpenLayers.ProxyHost = "proxy.cgi?url=";
-    var $ = OpenLayers.Util.getElement;
     var map, infocontrols, water, highlightlayer;
     
     function load() {
@@ -125,7 +124,7 @@
              highlightLayer.addFeatures(evt.features);
              highlightLayer.redraw();
         } else {
-            $('responseText').innerHTML = evt.text;
+            document.getElementById('responseText').innerHTML = evt.text;
         }
     }
 
diff --git a/examples/select-feature.html b/examples/select-feature.html
index 2b8aef69fa..fe5243e711 100644
--- a/examples/select-feature.html
+++ b/examples/select-feature.html
@@ -16,8 +16,6 @@
     <script type="text/javascript">
         var map, drawControls;
         
-        var $ = OpenLayers.Util.getElement;
-        
         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
         function init(){
             map = new OpenLayers.Map('map');
@@ -36,10 +34,10 @@
             });
             vectors.events.on({
                 'featureselected': function(feature) {
-                    $('counter').innerHTML = this.selectedFeatures.length;
+                    document.getElementById('counter').innerHTML = this.selectedFeatures.length;
                 },
                 'featureunselected': function(feature) {
-                    $('counter').innerHTML = this.selectedFeatures.length;
+                    document.getElementById('counter').innerHTML = this.selectedFeatures.length;
                 }
             });
 
diff --git a/examples/snap-split.html b/examples/snap-split.html
index 1f7a30b962..13306cceab 100644
--- a/examples/snap-split.html
+++ b/examples/snap-split.html
@@ -36,14 +36,11 @@
 
         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
         
-        var $ = OpenLayers.Util.getElement;
-
         function init() {
             initMap();
             initUI();
         }
 
-
         var map, draw, modify, snap, split, vectors;
         function initMap() {
 
@@ -187,15 +184,15 @@
          */
         function initUI() {
             // add behavior to snap elements
-            var snapCheck = $("snap_toggle");
+            var snapCheck = document.getElementById("snap_toggle");
             snapCheck.checked = true;
             snapCheck.onclick = function() {
                 if(snapCheck.checked) {
                     snap.activate();
-                    $("snap_options").style.display = "block";
+                    document.getElementById("snap_options").style.display = "block";
                 } else {
                     snap.deactivate();
-                    $("snap_options").style.display = "none";
+                    document.getElementById("snap_options").style.display = "none";
                 }
             };
             var target, type, tog, tol;
@@ -203,12 +200,12 @@
             var target = snap.targets[0];
             for(var j=0; j<types.length; ++j) {
                 type = types[j];
-                tog = $("target_" + type);
+                tog = document.getElementById("target_" + type);
                 tog.checked = target[type];
                 tog.onclick = (function(tog, type, target) {
                     return function() {target[type] = tog.checked;}
                 })(tog, type, target);
-                tol = $("target_" + type + "Tolerance");
+                tol = document.getElementById("target_" + type + "Tolerance");
                 tol.value = target[type + "Tolerance"];
                 tol.onchange = (function(tol, type, target) {
                     return function() {
@@ -218,24 +215,24 @@
             }
 
             // add behavior to split elements
-            var splitCheck = $("split_toggle");
+            var splitCheck = document.getElementById("split_toggle");
             splitCheck.checked = true;
             splitCheck.onclick = function() {
                 if(splitCheck.checked) {
                     split.activate();
-                    $("split_options").style.display = "block";
+                    document.getElementById("split_options").style.display = "block";
                 } else {
                     split.deactivate();
-                    $("split_options").style.display = "none";
+                    document.getElementById("split_options").style.display = "none";
                 }
             };
-            var edgeCheck = $("edge_toggle");
+            var edgeCheck = document.getElementById("edge_toggle");
             edgeCheck.checked = split.edge;
             edgeCheck.onclick = function() {
                 split.edge = edgeCheck.checked;
             };
             
-            $("clear").onclick = function() {
+            document.getElementById("clear").onclick = function() {
                 modify.deactivate();
                 vectors.destroyFeatures();
             };
diff --git a/examples/snapping.html b/examples/snapping.html
index 2b830dbb8d..944b4c2ef1 100644
--- a/examples/snapping.html
+++ b/examples/snapping.html
@@ -34,8 +34,6 @@
     <script type="text/javascript">
         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
         
-        var $ = OpenLayers.Util.getElement;
-
         function init() {
             initMap();
             initUI();
@@ -196,7 +194,7 @@
          * property values.
          */
         function initUI() {
-            var check = $("snapping");
+            var check = document.getElementById("snapping");
             check.checked = true;
             check.onclick = function() {
                 if(check.checked) {
@@ -206,7 +204,7 @@
                 }
             };
             
-            var sel = $("editable");
+            var sel = document.getElementById("editable");
             sel.value = "poly";
             sel.onchange = function() {
                 updateEditable(sel.value);
@@ -218,12 +216,12 @@
                 target = snap.targets[i];
                 for(var j=0; j<types.length; ++j) {
                     type = types[j];
-                    tog = $(i + "_" + type);
+                    tog = document.getElementById(i + "_" + type);
                     tog.checked = target[type];
                     tog.onclick = (function(tog, type, target) {
                         return function() {target[type] = tog.checked;}
                     })(tog, type, target);
-                    tol = $(i + "_" + type + "Tolerance");
+                    tol = document.getElementById(i + "_" + type + "Tolerance");
                     tol.value = target[type + "Tolerance"];
                     tol.onchange = (function(tol, type, target) {
                         return function() {
diff --git a/examples/strategy-cluster-extended.js b/examples/strategy-cluster-extended.js
index 62d8119748..e3372bd337 100644
--- a/examples/strategy-cluster-extended.js
+++ b/examples/strategy-cluster-extended.js
@@ -67,8 +67,6 @@ OpenLayers.Strategy.RuleCluster = OpenLayers.Class(OpenLayers.Strategy.Cluster,
 // global variables
 var map, vectorlayer, features, stylemap, select;
 
-var $ = OpenLayers.Util.getElement;
-
 // wrap the instanciation code in an anonymous function that gets executed
 // immeadeately
 (function(){
@@ -97,14 +95,14 @@ var $ = OpenLayers.Util.getElement;
 		} else {
 			info += '&nbsp;&nbsp;Single feature of clazz = ' + feature.attributes.clazz;
 		}
-		$('info').innerHTML = info;
+		document.getElementById('info').innerHTML = info;
     };
 
 	// The function that gets called on feature selection. Shows information 
     // about the number of "points" on the map.
 	var updateGeneralInformation = function() {
 		var info = 'Currently ' + vectorlayer.features.length + ' points are shown on the map.';
-		$('generalinfo').innerHTML = info;
+		document.getElementById('generalinfo').innerHTML = info;
 	};
 	
 	// instanciate the map
diff --git a/examples/strategy-cluster-threshold.html b/examples/strategy-cluster-threshold.html
index 8546939c13..13abd2c1ea 100644
--- a/examples/strategy-cluster-threshold.html
+++ b/examples/strategy-cluster-threshold.html
@@ -18,8 +18,6 @@
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-            var $ = OpenLayers.Util.getElement;
-
             // create a semi-random grid of features to be clustered
             var dx = 3;
             var dy = 3;
@@ -91,24 +89,24 @@
                 map.setCenter(new OpenLayers.LonLat(0, 0), 2);
                 
                 reset();
-                $("reset").onclick = reset;
+                document.getElementById("reset").onclick = reset;
 
             }
             
             function reset() {
-                var distance = parseInt($("distance").value);
-                var threshold = parseInt($("threshold").value);
+                var distance = parseInt(document.getElementById("distance").value);
+                var threshold = parseInt(document.getElementById("threshold").value);
                 strategy.distance = distance || strategy.distance;
                 strategy.threshold = threshold || strategy.threshold;
-                $("distance").value = strategy.distance;
-                $("threshold").value = strategy.threshold || "null";
+                document.getElementById("distance").value = strategy.distance;
+                document.getElementById("threshold").value = strategy.threshold || "null";
                 clusters.removeFeatures(clusters.features);
                 clusters.addFeatures(features);
             }
             
             function display(event) {
                 var f = event.feature;
-                var el = $("output");
+                var el = document.getElementById("output");
                 if(f.cluster) {
                     el.innerHTML = "cluster of " + f.attributes.count;
                 } else {
diff --git a/examples/strategy-cluster.html b/examples/strategy-cluster.html
index d9a2323ddc..d695f71ad6 100644
--- a/examples/strategy-cluster.html
+++ b/examples/strategy-cluster.html
@@ -69,7 +69,6 @@
         <script src="Jugl.js"></script>
         <script src="animator.js"></script>
         <script type="text/javascript">
-            var $ = OpenLayers.Util.getElement;
         
             var map, template;
 
@@ -173,21 +172,21 @@
             
             function display(event) {
                 // clear previous photo list and create new one
-                $("photos").innerHTML = "";
+                document.getElementById("photos").innerHTML = "";
                 var node = template.process({
                     context: {features: event.feature.cluster},
                     clone: true,
-                    parent: $("photos")
+                    parent: document.getElementById("photos")
                 });
                 // set up forward/rewind
-                var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500});
-                $("scroll-end").onmouseover = function() {forward.seekTo(1)};
-                $("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
-                $("scroll-start").onmouseover = function() {forward.seekTo(0)};
-                $("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
+                var forward = Animator.apply(document.getElementById("list"), ["start", "end"], {duration: 1500});
+                document.getElementById("scroll-end").onmouseover = function() {forward.seekTo(1)};
+                document.getElementById("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
+                document.getElementById("scroll-start").onmouseover = function() {forward.seekTo(0)};
+                document.getElementById("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
                 // set up photo zoom
                 for(var i=0; i<event.feature.cluster.length; ++i) {
-                    listen($("link-" + i), Animator.apply($("photo-" + i), ["thumb", "big"]));
+                    listen(document.getElementById("link-" + i), Animator.apply(document.getElementById("photo-" + i), ["thumb", "big"]));
                 }
             }
             
diff --git a/examples/using-proj4js.js b/examples/using-proj4js.js
index 1790970860..044b872793 100644
--- a/examples/using-proj4js.js
+++ b/examples/using-proj4js.js
@@ -1,5 +1,4 @@
 var map, vector;
-var $ = OpenLayers.Util.getElement;
 
 function init(){
     map = new OpenLayers.Map('map', {
@@ -9,16 +8,16 @@ function init(){
         numZoomLevels: 1,
         controls: [
             new OpenLayers.Control.Attribution({
-                div: $('attribution')
+                div: document.getElementById('attribution')
             }),
             new OpenLayers.Control.MousePosition({
-                div: $('mouse-position-31467'),
+                div: document.getElementById('mouse-position-31467'),
                 prefix: 'Coordinates: ',
                 suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' 
                     + '31467/">EPSG:31467</a>)'
             }),
             new OpenLayers.Control.MousePosition({
-                div: $('mouse-position-4326'),
+                div: document.getElementById('mouse-position-4326'),
                 displayProjection: new OpenLayers.Projection('EPSG:4326'),
                 prefix: 'Coordinates: ',
                 suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' 
@@ -61,7 +60,7 @@ function addVector(x, y, btn){
     
     status += '<br /><code class="emph">  ' 
         + geometry.toString() + '</code>.';
-    $('status').innerHTML = status;
+    document.getElementById('status').innerHTML = status;
     
     var feature = new OpenLayers.Feature.Vector(geometry, {}, {
         strokeColor: '#333333',
@@ -112,7 +111,7 @@ function addOutline(btn) {
         transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style);
     
     vector.addFeatures([transformedFeature]);
-    $('status').innerHTML = 'Transformed polygon';
+    document.getElementById('status').innerHTML = 'Transformed polygon';
     btn.disabled = true;
 }
 
@@ -126,8 +125,8 @@ function clearVectors(){
         'btnGermany'
     ];
     for (var i = 0, len = ids.length; i < len; i++) {
-        var elem = $(ids[i]);
+        var elem = document.getElementById(ids[i]);
         elem.disabled = false;
     }
-    $('status').innerHTML = '';
+    document.getElementById('status').innerHTML = '';
 }