Merge pull request openlayers#416 from tschaub/dotless

Use dotless identifiers.

lib/OpenLayers/Renderer/Canvas.js

@@ -799,7 +799,7 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
                 if (data[3] === 255) { // antialiased
                     var id = data[2] + (256 * (data[1] + (256 * data[0])));
                     if (id) {
-                        featureId = "OpenLayers.Feature.Vector_" + (id - 1 + this.hitOverflow);
+                        featureId = "OpenLayers_Feature_Vector_" + (id - 1 + this.hitOverflow);
                         try {
                             feature = this.features[featureId][0];
                         } catch(err) {

lib/OpenLayers/Util.js

@@ -130,6 +130,17 @@ OpenLayers.Util.indexOf = function(array, obj) {
 };
 
 
+/**
+ * Property: dotless
+ * {RegExp}
+ * Compiled regular expression to match dots (".").  This is used for replacing
+ *     dots in identifiers.  Because object identifiers are frequently used for
+ *     DOM element identifiers by the library, we avoid using dots to make for
+ *     more sensible CSS selectors.
+ *
+ * TODO: Use a module pattern to avoid bloating the API with stuff like this.
+ */
+OpenLayers.Util.dotless = /\./g;
 
 /**
  * Function: modifyDOMElement
@@ -139,7 +150,8 @@ OpenLayers.Util.indexOf = function(array, obj) {
  *
  * Parameters:
  * element - {DOMElement} DOM element to modify.
- * id - {String} The element id attribute to set.
+ * id - {String} The element id attribute to set.  Note that dots (".") will be
+ *     replaced with underscore ("_") in setting the element id.
  * px - {<OpenLayers.Pixel>|Object} The element left and top position,
  *                                  OpenLayers.Pixel or an object with
  *                                  a 'x' and 'y' properties.
@@ -157,7 +169,7 @@ OpenLayers.Util.modifyDOMElement = function(element, id, px, sz, position,
                                             border, overflow, opacity) {
 
     if (id) {
-        element.id = id;
+        element.id = id.replace(OpenLayers.Util.dotless, "_");
     }
     if (px) {
         element.style.left = px.x + "px";
@@ -195,7 +207,8 @@ OpenLayers.Util.modifyDOMElement = function(element, id, px, sz, position,
  * Parameters:
  * id - {String} An identifier for this element.  If no id is
  *               passed an identifier will be created 
- *               automatically.
+ *               automatically.  Note that dots (".") will be replaced with
+ *               underscore ("_") when generating ids.
  * px - {<OpenLayers.Pixel>|Object} The element left and top position,
  *                                  OpenLayers.Pixel or an object with
  *                                  a 'x' and 'y' properties.
@@ -928,13 +941,16 @@ OpenLayers.Util.lastSeqID = 0;
  * 
  * Parameters:
  * prefix - {String} Optional string to prefix unique id. Default is "id_".
+ *     Note that dots (".") in the prefix will be replaced with underscore ("_").
  * 
  * Returns:
  * {String} A unique id string, built on the passed in prefix.
  */
 OpenLayers.Util.createUniqueID = function(prefix) {
     if (prefix == null) {
         prefix = "id_";
+    } else {
+        prefix = prefix.replace(OpenLayers.Util.dotless, "_");
     }
     OpenLayers.Util.lastSeqID += 1; 
     return prefix + OpenLayers.Util.lastSeqID;        

notes/2.13.md

@@ -0,0 +1,9 @@
+# Enhancements and Additions
+
+## Dotless identifiers
+
+Previously, objects generated by the library were given id properties with values that contained dots (e.g. "OpenLayers.Control.Navigation_2").  These same identifiers are also used for DOM elements in some case.  Though uncommon, a developer may want to access these elements with a CSS selector.  To facilitate this, we now always generate ids with underscore instead of dot.
+
+Corresponding issues/pull requests:
+
+ * https://github.com/openlayers/openlayers/pull/416

tests/Feature.html

@@ -21,7 +21,7 @@
 
         t.ok( feature instanceof OpenLayers.Feature, "new OpenLayers.Feature returns Feature object" );
         t.eq( feature.layer, layer, "feature.layer set correctly" );
-        t.ok(OpenLayers.String.startsWith(feature.id, "OpenLayers.Feature_"),
+        t.ok(OpenLayers.String.startsWith(feature.id, "OpenLayers_Feature_"),
              "feature.id set correctly");
         t.ok( feature.lonlat.equals(lonlat), "feature.lonlat set correctly" );
         t.eq( feature.data.iconURL, iconURL, "feature.data.iconURL set correctly" );

tests/Geometry.html

@@ -11,7 +11,7 @@
         var g = new OpenLayers.Geometry();
 
         t.eq(g.CLASS_NAME, "OpenLayers.Geometry", "correct CLASS_NAME")
-        t.ok(OpenLayers.String.startsWith(g.id, "OpenLayers.Geometry_"),
+        t.ok(OpenLayers.String.startsWith(g.id, "OpenLayers_Geometry_"),
              "id correctly set");
     }
 
@@ -22,7 +22,7 @@
         var clone = geometry.clone();
 
         t.eq(clone.CLASS_NAME, "OpenLayers.Geometry", "correct CLASS_NAME")
-        t.ok(OpenLayers.String.startsWith(clone.id, "OpenLayers.Geometry_"),
+        t.ok(OpenLayers.String.startsWith(clone.id, "OpenLayers_Geometry_"),
              "id correctly set");
     }
 

tests/Popup.html

@@ -13,7 +13,7 @@
         popup = new OpenLayers.Popup();
 
         t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
-        t.ok(OpenLayers.String.startsWith(popup.id, "OpenLayers.Popup"),
+        t.ok(OpenLayers.String.startsWith(popup.id, "OpenLayers_Popup"),
              "valid default popupid");
         var firstID = popup.id;
         t.ok(popup.contentSize.equals(size), "good default popup.size");

tests/Popup/Anchored.html

@@ -11,7 +11,7 @@
         popup = new OpenLayers.Popup.Anchored();
 
         t.ok( popup instanceof OpenLayers.Popup.Anchored, "new OpenLayers.Popup.Anchored returns Popup.Anchored object" );
-        t.ok(OpenLayers.String.startsWith(popup.id, "OpenLayers.Popup.Anchored"), "valid default popupid");
+        t.ok(OpenLayers.String.startsWith(popup.id, "OpenLayers_Popup_Anchored"), "valid default popupid");
         var firstID = popup.id;
         t.eq(popup.contentHTML, null, "good default popup.contentHTML");