Merge pull request #423 from marcjansen/no-$

Remove the aliasing of OpenLayers.Util.getElement to window.$

examples/editing-methods.js

@@ -20,7 +20,7 @@ map.addControl(draw);
 draw.activate();
 
 // 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"
@@ -30,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"
@@ -40,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"
@@ -50,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"
@@ -60,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();
 };
 

examples/game-accel-ball.html

@@ -35,7 +35,7 @@
         function init() {
             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'} 
             );

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');
 });
-
+document.getElementById('locate').onclick = function() {
-$('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;

examples/getfeatureinfo-control.html

@@ -48,7 +48,6 @@
     </style>
     <script defer="defer" type="text/javascript">
     OpenLayers.ProxyHost = "proxy.cgi?url=";
-    
     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;
         }
     }
 

examples/select-feature.html

@@ -15,6 +15,7 @@
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, drawControls;
+        
         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
         function init(){
             map = new OpenLayers.Map('map');
@@ -33,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;
                 }
             });
 

examples/snap-split.html

@@ -35,13 +35,12 @@
     <script type="text/javascript">
 
         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
-
+        
         function init() {
             initMap();
             initUI();
         }
 
-
         var map, draw, modify, snap, split, vectors;
         function initMap() {
 
@@ -185,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;
@@ -201,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() {
@@ -216,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();
             };

examples/snapping.html

@@ -33,7 +33,7 @@
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
-
+        
         function init() {
             initMap();
             initUI();
@@ -194,7 +194,7 @@
          * property values.
          */
         function initUI() {
-            var check = $("snapping");
+            var check = document.getElementById("snapping");
             check.checked = true;
             check.onclick = function() {
                 if(check.checked) {
@@ -204,7 +204,7 @@
                 }
             };
             
-            var sel = $("editable");
+            var sel = document.getElementById("editable");
             sel.value = "poly";
             sel.onchange = function() {
                 updateEditable(sel.value);
@@ -216,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() {

examples/strategy-cluster-extended.js

@@ -95,14 +95,14 @@ var map, vectorlayer, features, stylemap, select;
 		} else {
 			info += '  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

examples/strategy-cluster-threshold.html

@@ -18,7 +18,6 @@
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-
             // create a semi-random grid of features to be clustered
             var dx = 3;
             var dy = 3;
@@ -90,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 distance = parseInt(document.getElementById("distance").value);
-                var threshold = parseInt($("threshold").value);
+                var threshold = parseInt(document.getElementById("threshold").value);
                 strategy.distance = distance || strategy.distance;
                 strategy.threshold = threshold || strategy.threshold;
-                $("distance").value = strategy.distance;
+                document.getElementById("distance").value = strategy.distance;
-                $("threshold").value = strategy.threshold || "null";
+                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 {

examples/strategy-cluster.html

@@ -69,6 +69,7 @@
         <script src="Jugl.js"></script>
         <script src="animator.js"></script>
         <script type="text/javascript">
+        
             var map, template;
 
             /**
@@ -171,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});
+                var forward = Animator.apply(document.getElementById("list"), ["start", "end"], {duration: 1500});
-                $("scroll-end").onmouseover = function() {forward.seekTo(1)};
+                document.getElementById("scroll-end").onmouseover = function() {forward.seekTo(1)};
-                $("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
+                document.getElementById("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
-                $("scroll-start").onmouseover = function() {forward.seekTo(0)};
+                document.getElementById("scroll-start").onmouseover = function() {forward.seekTo(0)};
-                $("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
+                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"]));
                 }
             }
             

examples/tilecache.html

@@ -11,7 +11,7 @@
     <script type="text/javascript">
         var map, layer;
         function init(){
-            map = new OpenLayers.Map( $('map'), {
+            map = new OpenLayers.Map( 'map', {
                 resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125]
             });
             layer = new OpenLayers.Layer.TileCache("TileCache Layer",

examples/using-proj4js.js

@@ -1,4 +1,5 @@
 var map, vector;
+
 function init(){
     map = new OpenLayers.Map('map', {
         projection: 'EPSG:31467',
@@ -7,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/' 
@@ -59,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',
@@ -110,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;
 }
 
@@ -124,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 = '';
 }

lib/OpenLayers/Util.js

@@ -74,13 +74,6 @@ OpenLayers.Util.isArray = function(a) {
     return (Object.prototype.toString.call(a) === '[object Array]');
 };
 
-/** 
- * Maintain existing definition of $.
- */
-if(typeof window.$  === "undefined") {
-    window.$ = OpenLayers.Util.getElement;
-}
-
 /** 
  * Function: removeItem
  * Remove an object from an array. Iterates through the array

lib/deprecated.js

@@ -164,6 +164,17 @@ OpenLayers.Util.getArgs = function(url) {
     return OpenLayers.Util.getParameters(url);
 };
 
+/** 
+ * Maintain existing definition of $.
+ * 
+ * The use of our $-method is deprecated and the mapping of 
+ * OpenLayers.Util.getElement will eventually be removed. Do not depend on 
+ * window.$ being defined by OpenLayers.
+ */
+if(typeof window.$  === "undefined") {
+    window.$ = OpenLayers.Util.getElement;
+}
+
 /**
  * Namespace: OpenLayers.Ajax
  */

notes/2.13.md

@@ -7,3 +7,22 @@ Previously, objects generated by the library were given id properties with value
 Corresponding issues/pull requests:
 
  * https://github.com/openlayers/openlayers/pull/416
+ 
+# Behavior Changes from Past Releases
+
+## window.$ is no longer an alias for OpenLayers.Util.getElement
+ 
+We do no longer create a global variable '$' when such a symbol isn't already
+defined. Previous versions of OpenLayers would define '$' to be an alias for 
+OpenLayers.Util.getElement. If your application requires window.$ to be defined 
+in such a way you can either
+ 
+* include deprecated.js in your custom build or as additional ressource in your
+  HTML-file
+* or you do the aliasing in your application code yourself:
+
+    window.$ = OpenLayers.Util.getElement;
+    
+Corresponding issue/pull requests:
+
+* https://github.com/openlayers/openlayers/pull/423

tests/Map.html

@@ -748,7 +748,7 @@
     function test_Map_double_addLayer(t) {
         t.plan(2);
 
-        map = new OpenLayers.Map($('map'));
+        map = new OpenLayers.Map('map');
         layer = new OpenLayers.Layer.WMS('Test Layer', 
                     "http://octo.metacarta.com/cgi-bin/mapserv", 
                     {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} 

tests/Util.html

@@ -1,10 +1,6 @@
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-  <script>
-    var custom$ = function() {};
-    window.$ = custom$;
-  </script>
   <script>
     var OpenLayers = [
         "OpenLayers/BaseTypes/Class.js",
@@ -77,11 +73,6 @@
         t.eq(OpenLayers.Util.isArray(testArray), true, "isArray works");
     }
     
-    function test_$(t) {
-        t.plan(1);
-        t.ok($ === custom$, "OpenLayers doesn't clobber existing definition of $.");
-    }
-    
     function test_Util_getImagesLocation (t) {
         t.plan( 1 );
         t.ok( OpenLayers.Util.getImagesLocation(), "../img/",

tests/deprecated/Util.html

@@ -0,0 +1,20 @@
+<html>
+    <head>
+        <script>
+var custom$ = function() {};
+window.$ = custom$;
+        </script>
+        <script src="../OLLoader.js"></script>
+        <script src="../../lib/deprecated.js"></script>
+        <script>
+        
+function test_$(t) {
+    t.plan(1);
+    t.ok($ === custom$, "OpenLayers doesn't clobber existing definition of $.");
+}
+            
+        </script>
+    </head>
+    <body>
+    </body>
+</html>

tests/list-tests.html

@@ -231,6 +231,7 @@
     <li>Kinetic.html</li>
     <li>Util.html</li>
     <li>deprecated/Ajax.html</li>
+    <li>deprecated/Util.html</li>
     <li>deprecated/BaseTypes/Class.html</li>
     <li>deprecated/BaseTypes/Element.html</li>
     <li>deprecated/Control/MouseToolbar.html</li>