Move CSS ID escaping to util/misc function; refs #402

ColumnSet.js

@@ -1,5 +1,5 @@
-define(["dojo/_base/kernel", "dojo/_base/declare", "dojo/_base/Deferred", "dojo/on", "dojo/aspect", "dojo/query", "dojo/has", "put-selector/put", "xstyle/has-class", "./Grid", "dojo/_base/sniff", "xstyle/css!./css/columnset.css"],
-function(kernel, declare, Deferred, listen, aspect, query, has, put, hasClass, Grid){
+define(["dojo/_base/kernel", "dojo/_base/declare", "dojo/_base/Deferred", "dojo/on", "dojo/aspect", "dojo/query", "dojo/has", "./util/misc", "put-selector/put", "xstyle/has-class", "./Grid", "dojo/_base/sniff", "xstyle/css!./css/columnset.css"],
+function(kernel, declare, Deferred, listen, aspect, query, has, miscUtil, put, hasClass, Grid){
 	has.add("event-mousewheel", function(global, document, element){
 		return typeof element.onmousewheel !== "undefined";
 	});
@@ -16,7 +16,6 @@ function(kernel, declare, Deferred, listen, aspect, query, has, put, hasClass, G
 	});
 
 	var colsetidAttr = "data-dgrid-column-set-id";
-	var allPeriods = /\./g;
 
 	hasClass("safari", "ie-7");
 
@@ -218,7 +217,7 @@ function(kernel, declare, Deferred, listen, aspect, query, has, put, hasClass, G
 			// summary:
 			//		Dynamically creates a stylesheet rule to alter a columnset's style.
 
-			var rule = this.addCssRule("#" + this.domNode.id.replace(allPeriods, "\\.") + " .dgrid-column-set-" + colsetId, css);
+			var rule = this.addCssRule("#" + miscUtil.escapeCssIdentifier(this.domNode.id) + " .dgrid-column-set-" + colsetId, css);
 			positionScrollers(this);
 			return rule;
 		},

Grid.js

@@ -2,7 +2,6 @@ define(["dojo/_base/kernel", "dojo/_base/declare", "dojo/on", "dojo/has", "put-s
 function(kernel, declare, listen, has, put, List){
 	var contentBoxSizing = has("ie") < 8 && !has("quirks");
 	var invalidClassChars = /[^\._a-zA-Z0-9-]/g;
-	var allPeriods = /\./g;
 	function appendIfNode(parent, subNode){
 		if(subNode && subNode.nodeType){
 			parent.appendChild(subNode);
@@ -348,7 +347,8 @@ function(kernel, declare, listen, has, put, List){
 			// summary:
 			//		Dynamically creates a stylesheet rule to alter a column's style.
 
-			return this.addCssRule("#" + this.domNode.id.replace(allPeriods, "\\.") + " .dgrid-column-" + colId, css);
+			return this.addCssRule("#" + miscUtil.escapeCssIdentifier(this.domNode.id) +
+				" .dgrid-column-" + colId, css);
 		},
 
 		/*=====

extensions/ColumnHider.js

@@ -20,7 +20,6 @@ function(declare, has, listen, miscUtil, put){
 
 	var activeGrid, // references grid for which the menu is currently open
 		bodyListener, // references pausable event handler for body mousedown
-		allPeriods = /\./g, // regex to clean identifiers for CSS rule addition
 		// Need to handle old IE specially for checkbox listener and for attribute.
 		hasIE = has("ie"),
 		hasIEQuirks = hasIE && has("quirks"),
@@ -216,7 +215,7 @@ function(declare, has, listen, miscUtil, put){
 			//		Hides the column indicated by the given id.
 
 			// Use miscUtil function directly, since we clean these up ourselves anyway
-			var selectorPrefix = "#" + this.domNode.id.replace(allPeriods, "\\.") + " .dgrid-column-",
+			var selectorPrefix = "#" + miscUtil.escapeCssIdentifier(this.domNode.id) + " .dgrid-column-",
 				next, rules, i; // used in IE8 code path
 
 			if(has("ie") === 8 && !has("quirks")){

extensions/ColumnResizer.js

@@ -2,7 +2,6 @@ define(["dojo/_base/declare", "dojo/on", "dojo/query", "dojo/_base/lang", "dojo/
 function(declare, listen, query, lang, dom, geom, has, miscUtil, put){
 
 var hasPointFromNode = has("touch") && webkitConvertPointFromNodeToPage;
-var allPeriods = /\./g;
 
 function addRowSpan(table, span, startRow, column, id){
 	// loop through the rows of the table and add this column's id to
@@ -103,7 +102,7 @@ function resizeColumnWidth(grid, colId, width, parentType){
 		}else{
 			// Use miscUtil function directly, since we clean these up ourselves anyway
 			rule = miscUtil.addCssRule(
-				"#" + grid.domNode.id.replace(allPeriods, "\\.") + " .dgrid-column-" + colId, "width: " + width + ";");
+				"#" + miscUtil.escapeCssIdentifier(grid.domNode.id) + " .dgrid-column-" + colId, "width: " + width + ";");
 		}
 
 		// keep a reference for future removal

util/misc.js

@@ -8,7 +8,8 @@ define(["put-selector/put"], function(put){
 	var extraRules = [],
 		extraSheet,
 		removeMethod,
-		rulesProperty;
+		rulesProperty,
+		invalidCssChars = /([^A-Za-z0-9_\u00A0-\uFFFF-])/g;
 
 	function removeRule(index){
 		// Function called by the remove method on objects returned by addCssRule.
@@ -115,6 +116,16 @@ define(["put-selector/put"], function(put){
 					removeRule(index);
 				}
 			};
+		},
+
+		escapeCssIdentifier: function(id){
+			// summary:
+			//		Escapes normally-invalid characters in a CSS identifier (such as .);
+			//		see http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier
+			// id: String
+			//		CSS identifier (e.g. tag name, class, or id) to be escaped
+
+			return id.replace(invalidCssChars, "\\$1");
 		}
 	};
 	return util;